一.v-on指令
vue中用v-on指令來監聽DOM事件,並觸發相應的代碼。比如v-on:click,表示監聽了點擊事件。
二.事件修飾符
在事件處理函數中調用 event.preventDefault() 等方法 是非常常見的需求。但更好的方式是:處理函數只有純粹的數據邏輯,而
不是去處理 DOM 事件細節。為了解決這個問題,Vue.js 為 v-on 提供了事件 修飾符。
.stop.prevent.capture.self.once.passive
<!-- 阻止單擊事件繼續傳播 --> <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>
三.按鍵修飾符
在監聽鍵盤事件時,我們經常需要檢查詳細的按鍵。Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符:
<!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()` --> <input v-on:keyup.enter="submit">
