目錄

1.事件修飾符

1）.stop

2）.prevent

3）.capture

4）.self

5）.once

6）.passive

2.按鍵修飾符

3.系統(tǒng)修飾鍵

4.鼠標按鈕修飾符

---

1.事件修飾符

1）.stop

作用：調(diào)用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

作用：調(diào)用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

作用：只當事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)

<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

作用：只觸發(fā)一次回調(diào)，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版本中新增的，能夠提升移動端的性能。在觸發(fā)觸摸事件時，即使執(zhí)行了一個空的函數(shù)，也會讓頁面卡頓。因為瀏覽器不知道監(jiān)聽器到底會不會阻止默認事件，所以瀏覽器要等到執(zhí)行完整個函數(shù)后，才能決定是否要滾動頁面。passive事件監(jiān)聽器，允許開發(fā)者告訴瀏覽器，監(jiān)聽器不會阻止默認行為，從而瀏覽器可以放心大膽的滾動頁面，這樣可以大幅度提升移動端頁面的性能，因為據(jù)統(tǒng)計只有20%的觸摸事件會阻止默認事件。passive會告訴瀏覽器你不想阻止默認事件的默認行為

【注意】

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

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

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

2.按鍵修飾符

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

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

?【結果】

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

3.系統(tǒng)修飾鍵

可以用如下修飾符來實現(xiàn)僅在按下相應按鍵時才觸發(fā)鼠標或鍵盤事件的監(jiān)聽器

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

4.鼠標按鈕修飾符

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

總結

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。