Vueのイベントハンドリングを理解する

どんな記事？

Vue.jsのイベントハンドリングを理解しよう！

イベントハンドラとは？

イベントハンドラとは、イベントの通知を受け取るように登録されている関数またはオブジェクトのことを指します。

その要素がどのようにイベントに反応するか、を管理します。

イベントには、クリック・押されたキーの検出・フォーカスの取得等々があります。

Vueにおけるイベントの購読

v-onディレクティブを使うことで、DOMイベントの購読、イベント発火時のJavaScriptの実行が可能になります。

例

<div id="example">
  <!-- クリックされると変数counterに1ずつ足すボタン -->
  <button v-on:click="counter += 1">1足す</button>
</div>

var example = new Vue({
  el: 'example',
  data: {
    counter: 0
  }
});

メソッドを呼び出す

v-onは呼び出したいメソッドの名前も受け付けます。

例

<div id="example">
  <!-- クリックされたら挨拶するメソッドを実行 -->
  <button v-on:click="greet">挨拶する</button>
</div>

var example = new Vue ({
  el: 'example',
  data: {
    name: 'Vue.js'
  },
  //メソッド定義
  methods: {
    greet: function (event) {
      //`this`はVueインスタンスを参照
      alert('Hello ' + this.name + '!')
      //`event`はDOMイベントを指す
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

実行結果（ボタンを押すとアラートに表示）

Hello Vue.js!

v-onの利点

なぜVueではv-onを使ってHTMLにリスナーを記述するのか。

1. HTMLテンプレートからJSコード内のハンドラ関数を簡単に探せるようにする
2. JS内のイベントリスナーを手作業で付け加える必要がないのでViewModelをDOM依存のない純粋なロジックにできる。これはテストを実施しやすくする。
3. ViewModelが消去される時に全てのイベントリスナーは自動で削除される。

上記の利点により、Vueではv-onを使ってリスナーを記述する。

省略記法

v-onもv-bind同様に省略記法がある。

完全な構文

<a v-on:click="doSomething"></a>

省略記法

<a @click="doSomething"></a>

参考

DOM on-イベントハンドラ
イベントハンドリング