メソッドとイベントハンドリング

メソッドハンドラ

私達は DOM イベントをリッスンするために v-on ディレクティブを使用することができます:

<div id="example">
<button v-on:click="greet">Greet</button>
</div>

私達は greet という名のメソッドに click イベントリスナをバインドします。ここでは、私達の Vue インスタンスでメソッドを定義する方法は以下になります:

var vm = new Vue({
el: '#example',
data: {
name: 'Vue.js'
},
// `methods` オブジェクトの下にメソッドを定義します
methods: {
greet: function (event) {
// 内部メソッドの `this` は vm インスタンスを指します
alert('Hello ' + this.name + '!')
// `event` はネイティブ DOM イベントです
alert(event.target.tagName)
}
}
})
// JavaScript でもメソッドを起動できます
vm.greet() // -> 'Hello Vue.js!'

あなた自身でそれをテストしてみましょう:

インラインステートメントハンドラ

メソッド名に直接バインドする代わりに、私達はインライン JavaScript 文も使用することができます:

<div id="example-2">
<button v-on:click="say('hi')">Say Hi</button>
<button v-on:click="say('what')">Say What</button>
</div>
new Vue({
el: '#example-2',
methods: {
say: function (msg) {
alert(msg)
}
}
})

結果:

インライン式での制限と同様に、イベントハンドラは1つの文のみに制限されています。

時どき、私達はインラインステートメントハンドラで元の DOM イベントにアクセスする必要もあります。特別な $event 変数を使用してメソッドにそれを渡すことができます:

<button v-on:click="say('hello!', $event)">Submit</button>
// ...
methods: {
say: function (msg, event) {
// 私達はネイティブイベントにアクセスできます
event.preventDefault()
}
}

イベント修飾子

イベントハンドラ内部で event.preventDefault() または event.stopPropagation() を呼びだすのは、非常に一般的に必要です。私達はメソッド内部で簡単にこれを実行することはできますが、メソッドが DOM イベントで詳細に対処することよりもむしろデータロジックに対して純粋に可能ならば、それがよいでしょう。

この問題に対処するため、Vue.js は v-on に対して、.prevent そして .stop という2つのイベント修飾子 (event modifier)を提供します。修飾子はドット(.) で表記されたディレクティブの接尾辞を想起させます:

<!-- click イベント propagation は停止されます -->
<a v-on:click.stop="doThis"></a>
<!-- submit イベントはもはやページをリロードしません -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾子は繋ぎ合わせることができます -->
<a v-on:click.stop.prevent="doThat">
<!-- 修飾子だけ -->
<form v-on:submit.prevent></form>

1.0.16 で、2つの追加の修飾子が導入されています:

<!-- イベントリストを追加するときにキャプチャモードを使用します -->
<div v-on:click.capture="doThis">...</div>
<!-- event.target が要素それ自身の場合だけハンドラをトリガします -->
<!-- すなわち、子要素からではありません -->
<div v-on:click.self="doThat">...</div>

キー修飾子

キーボードイベントをリスニングするとき、私達はしばしば一般的なキーコードをチェックする必要があります。Vue.js はキーイベントに対してリスニングするとき、キー修飾子 (key modifier)を追加することができます:

<!-- キーコードが 13 のときだけ、vm.submit() が呼ばれます -->
<input v-on:keyup.13="submit">

全てのキーコードを覚えることは面倒ですので、Vue.js は最も一般的に使用されるキーのエイリアスを提供します:

<!-- 上記と同じです -->
<input v-on:keyup.enter="submit">
<!-- 省略記法に対しても動作します -->
<input @keyup.enter="submit">

以下は、キー修飾子のエイリアスの完全なリストです:

加えて、単一文字キーエイリアスは、1.0.8 以上でサポートされます。

なぜ HTML 内にリスナを記述するのですか?

このようなイベント監視のアプローチは、「関心の分離」という古き良きルールを破っているのではないか、と心配されるかもしれません。安心してください。すべての Vue.js のハンドラ関数と式は現在の View のみを扱う ViewModel にのみバインドされるよう制限されています。それによってメンテナンスが難しくなることはありません。実際に、v-on を利用することでいくつかの利点があります:

  1. HTML テンプレートを単に眺めることで、あなたの JS コード内のハンドラ関数を簡単に見つけ出すことができます。

  2. JS 内のイベントリスナを手作業でアタッチする必要がないので、ViewModel のコードはロジックのみとなり、DOM 依存もなくなります。このことはテストをより簡単にします。

  3. ViewModel が破棄されたとき、すべてのイベントリスナは自動的に削除されます。それらを自力でクリーンアップすることを気にかける必要もありません。