イベント修飾子
イベントを処理するにあたり、よく利用する動作を指定することができる。
個々の修飾子は、連結可能で、ハンドラを指定しなくても利用できる。
連結した場合、順序によって動作が変わるため、注意する。
<button @click.stop.prevent="handlerName">Click</button>
<button @click.stop>Click</button>
.stop
親要素へのイベントの伝播を行わない。
== stopPropagationを実行する。
<button @click.stop="handlerName">Click</button>
.prevent
既定のアクション（form内のbuttonのsubmitなど）を実行しない。
== preventDefaultを実行する。
<button @click.prevent="handlerName">Click</button>
.capture
子要素で発生したイベントを、発生対象の要素より先に処理する（キャプチャフェーズ1でイベントを処理する）。
== addEventListenerのcaptureオプションをtrueにする。
<button @click.capture="handlerName">Click</button>
.self
自身がイベント発生対象（event.target）の場合のみ、処理を実行する。
== 子要素でイベントが発生した場合、バブリングフェーズでイベントを処理しない。
<button @click.self="handlerName">Click</button>
.once
一度だけイベントを発火する。
== addEventListenerのonceオプションをtrueにする。
<button @click.once="handlerName">Click</button>
.passive
イベントの既定のアクションがハンドラの処理を待たずに実行される。2
== addEventListenerのpassiveオプションをtrueにする。
.preventと共に使用すると、.preventは無視されるため、指定しないこと。
<button @click.passive="handlerName">Click</button>
キー修飾子
特定のキーのイベントの場合のみ、イベントを発火したい場合に利用する。
.で繋げることで、OR条件を指定することもできる。
// enterキー押下
<input @keyup.enter="handlerName">
// ↓キー押下 （エイリアスで指定）
<input @keyup.down="handlerName">
// ↓キー押下 （KeyboardEvent.keyのキーで指定）
<input @keyup.page-down="handlerName">
// enterキー、escキー、↑キー、または、↓キー押下
<input @keyup.enter.esc.up.down="handlerName">
キーコードによる指定
keyCode属性によってキーを指定することもできる。
<input @keyup.13="handlerName">
キーコードによる指定は、ブラウザ間の仕様の違いなどから、非推奨とされている。
その代わりに、Vueが指定しているエイリアスを利用することが推奨されている。
エイリアス一覧は本家を参照。
カスタムキー修飾子のエイリアス
用途に応じて、特定のキーコードにカスタム修飾子のエイリアスを指定することができる。
Vue.config.keyCodes.f1 = 112
システム修飾子
特定のキーが押下されているときのみ、イベントを発火したい場合に利用する。3
キー修飾子と違い、.で繋げた場合、AND条件となることに注意する。
- .ctrl
- .alt
- .shift
- .meta4
// ctrlキーを押しながらenterキーを押下
<input @keyup.ctrl.enter="handlerName">
// shiftキーとaltキーを押しながらクリック
<button @click.shift.alt="handlerName">Click</button>
.exact
システム修飾子の厳密な組み合わせを指定する。
また、システム修飾子なしで.exactのみを指定した場合、全てのシステム修飾子が押下されていない場合のみイベントを発火する。
// shiftキーを押しながらクリック（他のシステム修飾子が押されていても良い）
<button @click.shift="handlerName">
// shiftキーのみが押下されている状態でクリック
<button @click.shift.exact="handlerName">Click</button>
// shiftキーとaltキーのみが押下されている状態でクリック
<button @click.shift.alt.exact="handlerName">Click</button>
// システム修飾子が何も押下されていない状態でクリック
<button @click.exact="handlerName">Click</button>
マウスの修飾子
マウスのボタンによるイベントの発火を、特定のボタンのみに制限する。
- .left
- .right
- .middle
おまけ：ハンドラへの引数の渡し方
イベントを取得する
<button @click="handler">Click</button>
methods: {
handler(event) {
console.log(event)
}
}
ハンドラに引数を渡す
<button @click="handler(param)">Click</button>
methods: {
handler(paramName) {
console.log(paramName)
}
}
イベントと引数を両方渡す
<button @click="handler($event, param)">Click</button>
methods: {
handler($event, paramName) {
console.log($event)
console.log(paramName)
}
}