目錄

1.事件修飾符

1）.stop

2）.prevent

3）.capture

4）.self

5）.once

6）.passive

2.按鍵修飾符

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

4.鼠標(biāo)按鈕修飾符

---

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');}} })

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

2）.prevent

作用：調(diào)用event.preventDefault()，阻止默認(rèn)事件，舉個(gè)栗子，form表單在提交時(shí)，會(huì)自動(dòng)刷新頁面，如圖1

圖1 未阻止默認(rèn)事件

此時(shí)需要阻止默認(rèn)事件，如下

<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')}} })

?【結(jié)果】

圖2 方法1結(jié)果

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');}} })

【結(jié)果】點(diǎn)擊click，打印結(jié)果如下

4）.self

作用：只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時(shí)才觸發(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');}} })

【結(jié)果】

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')}} })

?【結(jié)果】

6）.passive

作用：設(shè)置addEventListener中的passive選項(xiàng)，2.3.0版本中新增的，能夠提升移動(dòng)端的性能。在觸發(fā)觸摸事件時(shí)，即使執(zhí)行了一個(gè)空的函數(shù)，也會(huì)讓頁面卡頓。因?yàn)闉g覽器不知道監(jiān)聽器到底會(huì)不會(huì)阻止默認(rèn)事件，所以瀏覽器要等到執(zhí)行完整個(gè)函數(shù)后，才能決定是否要滾動(dòng)頁面。passive事件監(jiān)聽器，允許開發(fā)者告訴瀏覽器，監(jiān)聽器不會(huì)阻止默認(rèn)行為，從而瀏覽器可以放心大膽的滾動(dòng)頁面，這樣可以大幅度提升移動(dòng)端頁面的性能，因?yàn)閾?jù)統(tǒng)計(jì)只有20%的觸摸事件會(huì)阻止默認(rèn)事件。passive會(huì)告訴瀏覽器你不想阻止默認(rèn)事件的默認(rèn)行為

【注意】

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

v-on:click.prevent.self //會(huì)阻止所有的點(diǎn)擊的默認(rèn)事件 v-on:click.self.prevent //只會(huì)阻止元素自身點(diǎn)擊的默認(rèn)事件

② 不要把.passive 和.prevent 一起使用，因?yàn)?prevent將會(huì)被忽略，同時(shí)瀏覽器可能會(huì)向你展示一個(gè)警告

2.按鍵修飾符

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

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

?【結(jié)果】

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

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

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

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

4.鼠標(biāo)按鈕修飾符

作用：僅當(dāng)點(diǎn)擊特定的鼠標(biāo)按鈕時(shí)會(huì)處理執(zhí)行函數(shù)，有.left / .right / .middle

總結(jié)

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

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