vue中的事件修飾符once,prevent,stop,capture,self,passive
vue中的事件修飾符
1. once
只執(zhí)行一次
<div v-on:click.once='alert("1")'></div>只有在第一次點擊時會執(zhí)行，再次點擊不會起作用
2. prevent
阻止默認程序，比如form表單中的summit提交按鈕，會自己提交，
<form v-on:submit="alert('who')" action="first_submit" method="get" accept-charset="utf-8">
? ? ? ? first_submit
? ? ? ? get
? ? ? ? <input type="submit" name="">
? ? </form>現(xiàn)在的submit會進行數(shù)據(jù)提交，和跳轉(zhuǎn)
<form v-on:submit.prevent="alert('who')" action="first_submit" method="get" accept-charset="utf-8">
? ? ? ? first_submit
? ? ? ? get
? ? ? ? <input type="submit" name="">
? ? </form>prevent，直接不讓你提交了，也不跳轉(zhuǎn)，只是執(zhí)行自己命名的函數(shù)，個人覺得這個修飾符使用的并不多，完全可以不做submit，我自己寫個click更方便?。。?/p>
3. stop
阻止函數(shù)的傳遞
<div v-on:click='alert("1")' style="width: 100%;height: 45px;background-color: black;">
? ? ? ? ? ? <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
? ? ? ? ? ? ? ? 123
? ? ? ? ? ? </div>
? ? ? ? </div>此時點擊子級的div會，先彈出2，再彈出1
<div v-on:click.capture='alert("1")' style="width: 100%;height: 45px;background-color: black;">
? ? ? ? ? ? <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
? ? ? ? ? ? ? ? 123
? ? ? ? ? ? </div>
? ? ? ? </div>點擊子級的div，此時的執(zhí)行結(jié)果是，先彈出1，再彈出2（capture的作用）
<div v-on:click.capture.stop='alert("1")' style="width: 100%;height: 45px;background-color: black;">
? ? ? ? ? ? <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
? ? ? ? ? ? ? ? 123
? ? ? ? ? ? </div>
? ? ? ? </div>點擊子級的div，此時的執(zhí)行結(jié)果是只會彈出1（capture決定的執(zhí)行順序），不會執(zhí)行alert(‘2’)
<div v-on:click='alert("1")' style="width: 100%;height: 45px;background-color: black;">
? ? ? ? ? ? <div v-on:click.stop="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
? ? ? ? ? ? ? ? 123
? ? ? ? ? ? </div>
? ? ? ? </div>這樣就只會彈出2，不會彈出1 了
總之，stop就是你自己執(zhí)行你的就好了，別去打擾別人。
4. capture和self
因為在使用capture和self的時候有一些迷糊，有一篇單獨介紹他倆個的文章
5. passive與prevent相反
javascript中的preventDefault()
passive就是專門用來跟他們作對的，使他們不起作用，同時，passive不能和prevent同時使用，prevent會失效，而且會警告??！
vue事件處理（修飾符）
事件修飾符
在vue中為了只處理純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細節(jié)，vue.js提供了事件修飾符。
.stop阻止單擊事件繼續(xù)傳播
<a v-on:click.stop="doThis"></a>
.prevent提交事件不再重載頁面
<form v-on:submit.prevent></form>
.capture添加事件監(jiān)聽器時使用事件捕獲模式，即內(nèi)部元素觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進行處理
<div v-on:click.capture="doThis">...</div>
.self只當(dāng)在 event.target 是當(dāng)前元素自身時觸發(fā)處理函數(shù)，即事件不是從內(nèi)部元素觸發(fā)的
<div v-on:click.self="doThat">...</div>
.once點擊事件將只會觸發(fā)一次
<a v-on:click.once="doThis"></a>
.passive滾動事件的默認行為 (即滾動行為) 將會立即觸發(fā)，而不會等待 `onScroll` 完成，這其中包含 `event.preventDefault()` 的情況
<div v-on:scroll.passive="onScroll">...</div>
注：修飾符可以串聯(lián)，使用修飾符時，順序很重要；相應(yīng)的代碼會以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。
<a v-on:click.stop.prevent="doThat"></a>
按鍵修飾符
vue 允許為 v-on 在監(jiān)聽鍵盤事件時添加按鍵修飾符：
enterpage-down
//只有在 `key` 是 `Enter` 時調(diào)用 `vm.submit()` <input v-on:keyup.enter="submit"> //處理函數(shù)只會在 $event.key 等于 PageDown 時被調(diào)用 <input v-on:keyup.page-down="onPageDown">
系統(tǒng)修飾鍵
.ctrl.alt.shift.meta
<!-- Alt + C --> <input v-on:keyup.alt.67="clear"> ? <!-- Ctrl + Click --> <div v-on:click.ctrl="doSomething">Do something</div>
注：請注意修飾鍵與常規(guī)按鍵不同，在和 keyup 事件一起用時，事件觸發(fā)時修飾鍵必須處于按下狀態(tài)
.exact 修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件
<!-- 即使 Alt 或 Shift 被一同按下時也會觸發(fā) --> <button v-on:click.ctrl="onClick">A</button> ? <!-- 有且只有 Ctrl 被按下的時候才觸發(fā) --> <button v-on:click.ctrl.exact="onCtrlClick">A</button> ? <!-- 沒有任何系統(tǒng)修飾符被按下的時候才觸發(fā) --> <button v-on:click.exact="onClick">A</button>
鼠標(biāo)按鈕修飾符
.left.right.middle
這些修飾符會限制處理函數(shù)僅響應(yīng)特定的鼠標(biāo)按鈕
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
如何使用fetchEventSource實現(xiàn)sse流式請求
這篇文章主要介紹了如何使用fetchEventSource實現(xiàn)sse流式請求問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue+tsc+noEmit導(dǎo)致打包報TS類型錯誤問題及解決方法
當(dāng)我們新建vue3項目,package.json文件會自動給我添加一些配置選項,這寫選項基本沒有問題,但是在實際操作過程中,當(dāng)項目越來越復(fù)雜就會出現(xiàn)問題,本文給大家分享vue+tsc+noEmit導(dǎo)致打包報TS類型錯誤問題及解決方法,感興趣的朋友一起看看吧2023-10-10
vue3項目導(dǎo)入異常Error:@vitejs/PLUGIN-vue?requires?vue?(＞=3.2.13
這篇文章主要給大家介紹了關(guān)于vue3項目導(dǎo)入異常Error:@vitejs/PLUGIN-vue?requires?vue?(＞=3.2.13)的解決辦法,文中將解決辦法介紹的非常詳細,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue實現(xiàn)PC端錄音功能的實例代碼，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
vue中el-form-item展開項居中的實現(xiàn)方式
這篇文章主要介紹了vue中el-form-item展開項居中的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue-Router2.X多種路由實現(xiàn)方式總結(jié)
下面小編就為大家分享一篇Vue-Router2.X多種路由實現(xiàn)方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue中 this.$set的用法詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了使用vite兼容低端瀏覽器配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
nginx如何配置vue項目history的路由模式(非根目錄)
這篇文章主要介紹了nginx如何配置vue項目history的路由模式(非根目錄),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
如何解決sass-loader和node-sass版本沖突的問題
這篇文章主要介紹了如何解決sass-loader和node-sass版本沖突的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04