Vue.js 事件
Vue.js允許我們透過在元素上使用v-on
指令來攔截任何DOM事件。這個主題是使組件可以互動的關鍵。
什麼是Vue.js事件
Vue.js允許我們透過在元素上使用v-on
指令來攔截任何DOM事件。
如果我們想要在這個元素上發生點擊事件時做一些事情:
1 | <template> |
我們添加一個v-on
指令:
1 | <template> |
Vue還提供了一種非常便捷的替代語法:
1 | <template> |
您可以選擇使用括號或不使用括號。@click="handleClick"
等效於@click="handleClick()"
。
handleClick
是附加到組件的方法:
1 | <script> |
詳細的方法在我 Vue 方法教程中有更詳盡的解釋。
你在這裡需要知道的是,你可以從事件中傳遞參數:@click="handleClick(param)"
,並且它們將在方法內被接收。
存取原始事件對象
在許多情況下,您希望對事件對象執行操作或查找其中的某些屬性。您如何訪問它?
使用特殊的$event
指令:
1 | <template> |
如果你已經傳遞了一個變數:
1 | <template> |
從那裡你可以調用event.preventDefault()
,但有一種更好的方式:事件修飾符。
事件修飾符
不要在你的方法中亂弄DOM“東西”,告訴Vue替你處理事情:
@click.prevent
調用event.preventDefault()
@click.stop
調用event.stopPropagation()
@click.passive
使用 addEventListener的passive選項@click.capture
使用事件捕獲而不是事件冒泡@click.self
確保點擊事件不是從子事件冒泡到的,而是直接在該元素上發生的@click.once
事件只觸發一次
所有這些選項都可以通過在修飾符後添加另一個修飾符來組合使用。
有關事件傳播,事件冒泡/捕獲的更多信息,請參閱我的JavaScript事件指南。
tags: [“Vue.js”, “events”, “event handling”, “event modifiers”]