Vue でのイベント処理の分析

この記事では、Vue でのイベント処理の分析を共有します。必要な方は参考にしてください。

目標:

1. イベント監視方法に精通し、イベント処理方法とさまざまなイベント修飾子に精通している

2. HTMLでのイベント監視の意味を理解する

イベントをリッスンする(v-on)

1. 通常の on と同様に、たとえば v-on:click または @click は通常の onclick と同等です。v-on は vue インスタンスのメソッドを呼び出すだけでなく、メソッドを呼び出すこともできます。いくつかの JS 式を実行します

2. 特殊変数 $event を渡して要素の DOM イベントにアクセスします

3. Event modifier

Modifier

.stop // イベントの伝播を阻止します

.prevent // デフォルトの動作を阻止します
1. 。 Capture // イベントキャプチャモードを使用します（最初に自分で処理し、その後内部要素に渡して処理します）

   .self //event.target が現在の要素自体である場合にトリガーされます（他の要素によって引き起こされたものは効果がありません）
   .once // 1 回だけトリガーできます
   .passive // デフォルトの動作をすぐにトリガーします
   
   
   
   修飾子はイベント名の後に追加され、連結することも、修飾子のみを使用することもできます

2. 例如: <a href="http://www.baidu.com" @click.prevent.stop>去百度</a>

   キーイベント修飾子

1. キーボードイベント

@keydown // キーボード押下イベント

@keyup // キーボードリリースイベント

2. 修飾子(キーエイリアス)
.enter
.tab

.delete (「delete」と「」をキャプチャ) backspace" ” key)

.esc
.space
.up
.down
.left
.right

さらに、グローバル config.keyCodes オブジェクトを通じてキー修飾子のエイリアスをカスタマイズできます:

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

3. システム制御組み合わせを変更する

.ctrl

.alt

.shift

.meta

 <!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<p @click.ctrl="doSomething">Do something</p>

HTML でイベントをリッスンする理由

基本的にすべての Vue.js イベント処理メソッドと式は、現在のビューの ViewModel に厳密にバインドされています

v-on は次の利点があります:

テンプレートによってバインドされたイベントを表示し、JS コード内の対応するメソッドを簡単に見つけるのに便利です

1. イベントを手動で JS にバインドする必要がなく、DOM から切り離され、テストが簡単です

2. ViewModel が破棄されると、すべてのイベント ハンドラーはクリアされずに自動的に削除されます

3. 関連する推奨事項:

Vue でのクラスとスタイルのバインディングと条件付きおよびリストのレンダリングの分析

Vue 分析テンプレート構文、計算されたプロパティ、リスナーの説明

以上がVue でのイベント処理の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。