はじめに
はじめまして、学生エンジニアの@huyunokiです。
イベント修飾子とは
イベントハンドラーの処理に加えてDOMのデフォルトの振る舞い（例えば、フォームの自動送信やリンクの遷移など）を制御したい場合に使うのがイベント修飾子です。
関連チートシート
構文
イベント名の後にドット（.）で繋げて記述します。
<!-- 構文の形: @イベント名.修飾子名="メソッド名" -->
<a @click.prevent="navigate">リンクだが遷移を防止</a>
イベント修飾子一覧（チートシート）
| 修飾子 | 説明 | 構文例 |
|---|---|---|
.stop |
event.stopPropagation() と同等。親要素へのイベント伝播（バブリング）を停止します。 |
@click.stop="doThis" |
.prevent |
event.preventDefault() と同等。デフォルトの動作（リンク遷移、フォーム送信など）をキャンセルします。 |
@submit.prevent="doSubmit" |
.capture |
イベントをキャプチャフェーズで処理します（バブリングとは逆）。 | @click.capture="doThis" |
.self |
イベントがハンドラを付けた要素自身で発生した場合のみ実行します。子要素で発生した場合は実行されません。 | @click.self="doThis" |
.once |
イベントハンドラを一度だけ実行します。実行後、リスナーが自動的に削除されます。 | @click.once="doThis" |
.passive |
スクロールイベントなどで preventDefault を呼び出さないことを示し、ブラウザのスクロール性能を向上させます。 |
@scroll.passive="onScroll" |
.native |
カスタムコンポーネントのルート要素に直接ネイティブなDOMイベントリスナーを追加します。（※Vue 3では不要になりました） | @click.native="handleClick" |