Vueでのイベントハンドラの設定

それでは、何らかのイベントを契機にメソッドを実行してみましょう。 DOM要素にイベントを設定するには、ディレクティブ v-onを使用する必要があります。

このディレクティブでは、コロンの後にイベント名を指定し、 値として、そのイベント発生時に呼び出されるメソッド名を 指定します。

実際に試してみましょう。 以下のメソッドがあるとします：

App.vuemethods: {
  show: function() {
    alert('!');
  }
}

以下のボタンがあるとします：

App.vue<template>
  <button>text</button>
</template>

このボタンをクリックしたときにメソッド showが呼び出されるようにしましょう：

App.vue<template>
  <button v-on:click="show">text</button>
</template>

通常、v-onの短縮形が使用されます。 それは、イベント名の前に記号@を 置くものです：

App.vue<template>
  <button @click="show">text</button>
</template>