イベント処理
ディレクトリ
- ##HTML でイベントをリッスンする理由
v-on
ディレクティブを使用して DOM をリッスンします。イベントを生成し、トリガーされるといくつかの JavaScript コードを実行します。
例:
<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div>
var example1 = new Vue({ el: '#example-1', data: { counter: 0 } })結果:
イベント処理メソッド
#ただし、多くのイベント処理ロジックはより複雑になるため、v-on
ディレクティブに JavaScript コードを直接記述することは現実的ではありません。したがって、v-on
は、呼び出す必要があるメソッド名も受け取ることができます。 例:
<div id="example-2"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button> </div>
var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function (event) { // `this` 在方法里指向当前 Vue 实例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } } }) // 也可以用 JavaScript 直接调用方法 example2.greet() // => 'Hello Vue.js!'
結果:
## メソッドインライン プロセッサの場合
メソッドは、メソッドに直接バインドされるだけでなく、インライン JavaScript ステートメントでも呼び出すことができます: <div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})
結果:
インライン ステートメント ハンドラーで生の DOM イベントにアクセスする必要がある場合もあります。特殊変数
$event を使用してメソッドに渡すことができます:
<button v-on:click="warn('Form cannot be submitted yet.', $event)"> Submit </button>
// ... methods: { warn: function (message, event) { // 现在我们可以访问原生事件对象 if (event) event.preventDefault() alert(message) } }
イベント修飾子
##イベント ハンドラーで event.preventDefault() または event.stopPropagation()
を呼び出すことは、非常に一般的な要件です。これをメソッドで簡単に実装できますが、DOM イベントの詳細を処理するのではなく、純粋なデータ ロジックを備えたメソッドを使用することをお勧めします。この問題を解決するために、Vue.js は v-on
に event 修飾子 を提供します。前述したように、修飾子はドットで始まる命令接尾辞で表されます。
#.停止
- ##.防止
修飾子を使用する場合、順序が重要であるため、コードは次のようになります。同じ順序で生成されます。したがって、##
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>
v-on:click.prevent.self
すべてのクリックが防止されますが、
v-on:click.self.prevent
はクリックのみを防止します。要素自体について。2.1.4 新しく追加されました
<!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a>
ネイティブ DOM イベントに対してのみ機能する他の修飾子とは異なり、コンポーネント イベント.once
修飾子は次のこともできます。カスタム
で使用できます。コンポーネントに関するドキュメントを読んでいない場合でも、心配する必要はありません。 2.3.0 新しく追加された
Vueは、addEventListener##で提供されるpassive
オプションにも対応します#.passive
修飾子。
この .passive<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
修飾子は、特にモバイルのパフォーマンスを向上させることができます。
.passive
を
と一緒に使用しないでください。##キー修飾子.prevent
は無視され、ブラウザーに警告が表示される可能性があります。
.passiveは、イベントのデフォルトの動作をブロックしたくないことをブラウザーに伝えることに注意してください。
キーボード イベントをリッスンするとき、多くの場合、次のことが必要になります。詳細なキーを確認します。 Vue では、キーボード イベントをリッスンするときに v-on でキー修飾子を追加できます: <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
KeyboardEvent.key 任意の有効なキー名を直接公開できます修飾子としてケバブケースに変換されます。
<input v-on:keyup.page-down="onPageDown">
上の例では、ハンドラー関数は $event.key が
PageDown と等しい場合にのみ呼び出されます。
#キーコード
keyCodeイベントの使用法 は非推奨になっており、最新のブラウザではサポートされていない可能性があります。
keyCode
機能の使用も許可されています:<input v-on:keyup.13="submit">必要に応じて古いブラウザをサポートするために、Vue は最も一般的に使用されるキーコード エイリアスを提供します:
#.enter
.tab
.delete
(「Delete」キーと「Backspace」キーをキャプチャ)
- ##.esc
##.space
- .up
##.down
- ############。左右############## ## ## 一部のキー (
.esc
値を持っています。IE9 をサポートしたい場合は、これらの組み込みエイリアスを優先する必要があります。およびすべての矢印キー) は、IE9 では異なる
keyグローバル
:config.keyCodes
オブジェクト// 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112システム修飾キー
を使用して、キー修飾子のエイリアス
をカスタマイズすることもできます。
2.1.0 新規
次の修飾子を使用して、対応するキーが押されたときにのみ起動される、マウスまたはキーボード イベントのリスナーを実装します。
##.ctrl
##.alt
##.shift.meta
keyup.17
注: オンMac のシステム キーボード、meta はコマンド キー (?) に対応します。 Windows のシステム キーボードでは、メタは Windows ロゴ キー (?) に対応します。 Sun オペレーティング システムのキーボードでは、メタは実線の gem キー (◆) に対応します。他の特定のキーボード、特に MIT および Lisp マシンのキーボード、および Knight キーボードや Space-cadet キーボードなどの後継キーボードでは、meta は「META」とマークされます。シンボリック キーボードでは、メタは「META」または「Meta」とマークされます。
- 修飾キーは通常のキーとは異なることに注意してください。
例:
<!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>- keyup
を押しながら他のキーを離すことによってのみトリガーできます。また、単にイベントと一緒に使用すると、修飾キーはイベントがトリガーされると変更されます。このキーを押す必要があります。つまり、
ctrlkeyup.ctrl
は、- ctrl
を使用してください:を放しただけではイベントはトリガーされません。この動作が必要な場合は、
keyCodectrl
の代わりに。.exact
修飾子
2.5.0 新しい
.exact
修飾子を使用すると、システム修飾子の正確な組み合わせによってトリガーされるイベントを制御できます。<!-- 即使 Alt 或 Shift 被一同按下时也会触发 --> <button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的时候才触发 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 没有任何系统修饰符被按下的时候才触发 --> <button @click.exact="onClick">A</button>
マウス ボタン修飾子##2.2.0 新しい
# ###########。左######
.右
.中
これら修飾子は、特定のマウス ボタンにのみ応答するようにハンドラー関数を制限します。
#なぜ HTML でイベントをリッスンするのですか?
このようなイベントに気づくかもしれません。傾聴のアプローチは、関心事を分離するという長年の伝統に反します。ただし、すべての Vue.js イベント ハンドラーと式は現在のビューの ViewModel に厳密にバインドされているため、メンテナンスが困難になることはありませんので、ご安心ください。実際、v-on
1. HTML テンプレートをスキャンすると、JavaScript コード内の対応するメソッドを簡単に見つけることができます。 2. JavaScript でイベントを手動でバインドする必要がないため、ViewModel コードは非常に純粋なロジックとなり、DOM から完全に切り離され、テストが容易になります。 3. ViewModelが破棄されると、すべてのイベントハンドラーが自動的に削除されます。掃除について心配する必要はありません。の使用にはいくつかの利点があります。