[メモ]Vue.jsイベント修飾子一覧

.stop

event.stopPropagation()を呼ぶ

<div @click="handler('親')">
  <div @click.stop="handler('子')">
    ボタン
  </div>
</div>

通常同じイベントをハンドルしたDOMがネストされている場合、親要素に向かってイベントが連鎖する。
.stopをつけるとhandler('子')は実行されるが、handler('親')は実行されない。

.prevent

event.preventDefault()を呼ぶ

<a href="#top" @click.prevent="handler"></a>

handlerは実行されるが、#topに移動はしない。

.capture

キャプチャモードでDOMイベントをハンドルする
つまりルート要素から順番にイベントが実行される

<div @click="handler('親')">
  <div @click.capture="handler('子')">
    ボタン
  </div>
</div>

handler('親') -> handler('子')の順番で実行される

イベントが発生すると、キャプチャフェーズでルート要素から要素を探し、ターゲットフェーズでイベントハンドラ実行、バブリングフェーズでルートまで要素をさかのぼります。
通常はターゲットフェーズでイベントハンドラを実行しますが、キャプチャモードにするとキャプチャフェーズでイベントが発生します。

参照：イベントフェーズ

.self

event.targetが自分自身の場合のみハンドラが呼び出される
(子要素は呼び出されない)

<div v-on:click.self="handler">ボタン</div>

.native

コンポーネントのルート要素上のネイティブイベントをハンドルする

<!-- コンポーネントをクリックするとhandlerが呼び出される -->
<my-component @click.native="handler"></my-component>

<!-- コンポーネントをクリックしてもhandlerが呼び出されない -->
<my-component @click="handler"></my-component>

.once

最大１回ハンドラを呼び出す

.passive

event.preventDefault()を呼び出さないことを明示
(.preventとの併用不可)

.left

マウスの左クリックの場合のみハンドラを呼び出す

.enter

キー修飾子。エンターボタンを押した場合にハンドラを呼び出す

参考：基礎から学ぶVue.js