【Vue.js】イベントの処理

v-onディレクティブ

v-onディレクティブは、要素のイベントを処理するためのディレクティブです。

<input
  type="text"
  :value="value"
+ v-on:input="value = $event.target.value"
>
 {{value}}
</input>

const app = new Vue({
  el: "#example",
  data: {
    value: "こんにちは",
  }
})

inputへの入力イベントに反応して、dataオプションのvalueの値が書き換わります。

v-onの省略記法

v-onディレクティブは、@で代替できます。

<input
  type="text"
  :value="value"
+ @input="value = $event.target.value"
>
 {{value}}

$eventのダラーサインについて

eventオブジェクトの前に$が必要です。これはVue.jsによって定められている特別な変数だからです。

Vueで扱えるイベントオブジェクトと、通常のDOMイベントオブジェクトが若干異なっており、区別のためには名前を変えるしかないので$がついています。

他にも、$routeとか$httpとかあるみたいです。

v-modelディレクティブ

毎回dataをバインドして、v-onするのは面倒なので、代わりにv-modelが利用できます。
v-modelディレクティブを使うことで、v-onディレクティブとv-bindディレクティブの両方を使った場合と同じように、双方向データバインディングが実現できます。

<input type="text" v-model="value">
 {{value}}

簡潔になりました。