vueキー修飾子、キーコード、システム修飾キー、exact修飾子、マウスボタン修飾子

キー修飾子、キーコード
Vueでは、v-onにキーボードイベントをリスニングするときにキー修飾子を追加できます.

keyCode 。

は、必要に応じて古いブラウザをサポートするために、Vueは、ほとんどの一般的なキーコードの別名:

を提供する.

.enter

.tab

.delete(「削除」キーと「バックアウト」キーをキャプチャ)

.esc

.space

.up

.down

.left

.right

config.keyCodes ：

//      `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

システム修飾キー
マウスまたはキーボードイベントは、対応するキーを押したときにのみトリガーされるリスナーを、次の修飾子で実現できます.

.ctrl

.alt

.shift

.meta

Do something

修飾キーは通常のキーとは異なり、keyupイベントとともに使用される場合、イベントトリガ時に修飾キーが押されている必要があります.言い換えれば、ctrlを押したまま他のボタンを解放してこそ、keyup.ctrlをトリガすることができる.ctrlを解放してもイベントはトリガーされません.このような行為をしたい場合は、ctrlにkeyCode:keyup.17を交換してください.

A


A


A

exact修飾子.exact修飾子を使用すると、正確なシステム修飾子の組み合わせによってトリガーされるイベントを制御できます.

A


A


A

マウスボタン修飾子
これらの修飾子は、処理関数が特定のマウスボタンにのみ応答することを制限します.

.left

.right

.middle

    Do something

v-onを使用すると、いくつかのメリットがあります.

HTMLテンプレートを一目見れば、JavaScriptコードに対応する方法を簡単に見つけることができます.

JavaScriptでイベントを手動でバインドする必要がないため、ViewModelコードは非常に純粋な論理であり、DOMと完全にデカップリングされ、テストしやすいです.

ViewModelが破棄されると、すべてのイベントプロセッサが自動的に削除されます.どうやって片付けるか心配する必要はありません.