目錄

1.事件修飾符

1）.stop

2）.prevent

3）.capture

4）.self

5）.once

6）.passive

2.按鍵修飾符

3.系統修飾鍵

4.鼠標按鈕修飾符

---

1.事件修飾符

1）.stop

作用：調用event.stop，阻止事件冒泡

<div id="app"><div @click="fatherClick"><button @click.stop="childClick">click</button></div> </div> const vm = new Vue({el: '#app',methods: {fatherClick() {console.log('father');},childClick() {console.log('child');}} })

【結果】若沒有阻止冒泡則打印child，father，組織后只打印child?

2）.prevent

作用：調用event.preventDefault()，阻止默認事件，舉個栗子，form表單在提交時，會自動刷新頁面，如圖1

圖1 未阻止默認事件

此時需要阻止默認事件，如下

<div id="app"><!-- 方法1 --><form @submit.prevent="onSubmit"><input type="submit" value="submit"></form><!-- 方法2：只寫修飾符 --><form v-on:submit.prevent><input type="submit"></form> </div> const vm = new Vue({el: '#app',methods: {onSubmit() {console.log('submit')}} })

?【結果】

圖2 方法1結果

3）.capture

作用：事件捕獲模式

<div id="app"><div @click.capture="fatherClick"><button @click="childClick">click</button></div> </div> const vm = new Vue({el: '#app',methods: {fatherClick() {console.log('father');},childClick() {console.log('child');}} })

【結果】點擊click，打印結果如下

4）.self

作用：只當事件是從偵聽器綁定的元素本身觸發時才觸發回調

<div id="app"><div :style="{ backgroundColor: '#f88', width:'100px',height:'100px'}" @click.self='fatherClick'><button @click='childClick'>click</button></div> </div> const vm = new Vue({el: '#app',methods: {fatherClick() {console.log('father');},childClick() {console.log('child');}} })

【結果】

5）.once

作用：只觸發一次回調，2.1.4新增

<div id="app"><button @click.once="print">click</button> </div> const vm = new Vue({el: '#app',methods: {print() {console.log('button')}} })

?【結果】

6）.passive

作用：設置addEventListener中的passive選項，2.3.0版本中新增的，能夠提升移動端的性能。在觸發觸摸事件時，即使執行了一個空的函數，也會讓頁面卡頓。因為瀏覽器不知道監聽器到底會不會阻止默認事件，所以瀏覽器要等到執行完整個函數后，才能決定是否要滾動頁面。passive事件監聽器，允許開發者告訴瀏覽器，監聽器不會阻止默認行為，從而瀏覽器可以放心大膽的滾動頁面，這樣可以大幅度提升移動端頁面的性能，因為據統計只有20%的觸摸事件會阻止默認事件。passive會告訴瀏覽器你不想阻止默認事件的默認行為

【注意】

① 使用修飾符時，順序很重要。相應的代碼會以同樣的順序產生。因此，

v-on:click.prevent.self //會阻止所有的點擊的默認事件 v-on:click.self.prevent //只會阻止元素自身點擊的默認事件

② 不要把.passive 和.prevent 一起使用，因為.prevent將會被忽略，同時瀏覽器可能會向你展示一個警告

2.按鍵修飾符

在監聽鍵盤事件時，我們經常需要檢查詳細的按鍵。Vue允許為v-on在監聽鍵盤事件時添加按鍵修飾符，如下例

<div id="app"><!-- 只有在key是Enter時，調用vm.submit --><input @keyup.enter="submit"> </div> const vm = new Vue({el: '#app',methods: {submit() {alert('提交成功')}} })

?【結果】

?我們可以將KeyboardEvent.key暴露的任意有效按鍵名轉換為kebab-case來作為修飾符

3.系統修飾鍵

可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器

修飾鍵與常規按鍵不同，在和keyup事件一起使用時，事件觸發時修飾鍵必須處于按下狀態，換句話說，只有在按住ctrl的情況下釋放其他按鍵，才能觸發keyup.ctrl。而單單釋放ctrl也不會觸發事件。如果想要這樣的行為，請為ctrl換用keyCode: keyuo.17

4.鼠標按鈕修飾符

作用：僅當點擊特定的鼠標按鈕時會處理執行函數，有.left / .right / .middle

總結

以上是生活随笔為你收集整理的v-on指令修饰符大全的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。