vue學習筆記7-事件修飾符

vue中事件修飾符有6個 ：.stop .prevent .capture .self .once .passive
在事件處理程式中呼叫 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。

儘管我們可以在方法中輕鬆實現這點，但更好的方式是：方法只有純粹的資料邏輯，而不是去處理 DOM 事件細節。

為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。

---

修飾符是由點開頭的指令字尾來表示的。

---

.stop

阻止冒泡事件

.prevent

阻止預設事件

.capture

事件捕獲處理

.self

只執行自己這個事件

.once 2.1.4 新增

只執行一次

不像其它只能對原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的元件事件上。如果你還沒有閱讀關於元件的文件，現在大可不必擔心。

.passive 2.3.0 新增

應用於移動端的滾動

<!-- 滾動事件的預設行為 (即滾動行為) 將會立即觸發 -->
<!-- 而不會等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>

這個 .passive 修飾符尤其能夠提升移動端的效能。

不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的預設行為。

事件修飾符的幾種寫法

1事件後面寫一個修飾符

<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再過載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

2事件後面串聯幾個修飾符

<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>

使用修飾符時，順序很重要；相應的程式碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點選，而 v-on:click.self.prevent 只會阻止對元素自身的點選。

3只有修飾符

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

案例

在這裡插入程式碼片