イベント修飾子は何がある？

Vueは全部で6つイベント修飾子を用意してくれています。

.stop
.prevent
.capture
.self
.once
.passive

一つずつ解説していきます。

.stop

これをつけるとバブリングを止めてくれます。

バブリングとは、子要素で発火したイベントが親要素でも効いちゃうってやつです。

具体的にバブリングを止めないとどうなるかというと、
子要素と親要素が両方clickイベントでの起こるメソッドを構えていた場合、
子要素でclickイベントが起こると、子要素のclickイベントでのメソッドの実行と同時に親要素のclickイベントのメソッドも実行されちゃう、という事象が起こります。

基本的にJavaScriptはイベントが発火されると、このバブリングの動きをして子から親へとイベントを伝播しちゃいます。
その伝播に対して「この先には伝播させない」と止めてくれるイベント修飾子が.stopになります。

ちなみにjsで用意されているevent.stopPropagation()をラッピングしています。

.prevent

こちらもよく使われるやつです。これはformのsubmitイベントに対して使うやつです。

form要素に送信先が指定されていない場合のデフォルトの動きをキャンセルしてくれます。
送信先が指定されていないデフォルトの動きとは、自身のURLに対して送信を行うというものです。

要は、送信先のURL指定がなければリロードしちゃうよって話ですね。
これをキャンセルしてくれます。

.preventをつけるとリロードせずに値を送信しますよーって感じです。

jsで言うところのevent.preventDefault()をラッピングしてます。

.capture

これはちょっとマニアックなやつです。
イベントの伝播をキャプチャフェーズで行うようにしてくれます。

まずは前提知識がいるのでマニアックな話を挟みます。
ざっくりとしか解説しないので、細かいところは各自調べていただけたらと思います。

まずJavaScriptはイベントを感知して色々行ってくれますが、このイベント実行にはいくつかフェーズと呼ばれるものがあります。

キャプチャフェーズ、ターゲットフェーズ、バブリングフェーズの3つです。

一番簡単なのはターゲットフェーズです。

これは、イベントが起こった場所を特定するっていうものですね。
このタグのこのイベントだな、となります。

次にバブリングフェーズです。

これは.stopの解説でも出てきましたが、イベントが発火するとターゲットフェーズで発火した場所が特定されます。
そしてそのイベントが起こった要素からどんどん親要素にイベントが伝播していきます。
上に上がっていくのがバブリングフェーズと覚えてください。(子:イベント発火箇所→親→さらに親→ルート)

そして最後が、キャプチャフェーズです。

これはバブリングフェーズとは反対に、ターゲットフェーズで特定した要素に向かって上から順番にイベントが伝播していきます。(ルート→親→子→孫:イベント発火箇所)

jsでは、ターゲットフェーズからバブリングフェーズにいくのが基本的な動きなんですが、
これをキャプチャフェーズの動きで実行させるというのが.captureです。
あんまり使う機会はないかもしれません。

以下の図がわかりやすいです。拾ってきました。

W3Cのドキュメントに載っていた図をお借りしました

実験してみたければ、Vueの動く環境で親要素と子要素両方にclickイベントを待たせておいて.stopと組み合わせれば、親のメソッドだけ動くのがわかると思います。

sample.vue

<!-- 細かいのは端折ってます -->

<div>
  <div id="myParent" v-on:click.capture.stop="onClickParent">
    親要素
    <div id="myElement" v-on:click.capture.stop="onClickChild">
      子要素
    </div>
  </div>
</div>

<script>
~~~

methods: {
    onClickParent() {
      *console*.log('親要素のclickイベントが発火');
    },
    onClickChild() {
      *console*.log('子要素のclickイベントが発火');
    },
}
~~~
<script>

// クリックすると、「親要素のclickイベントが発火」とだけ表示される。
// .captureだけ消した状態でクリックすると、「子要素のclickイベントが発火」とだけ表示される。