vue中的事件修飾符once,prevent,stop,capture,self,passive
vue中的事件修飾符
1. once
只執(zhí)行一次
<div v-on:click.once='alert("1")'></div>只有在第一次點(diǎn)擊時(shí)會執(zhí)行，再次點(diǎn)擊不會起作用
2. prevent
阻止默認(rèn)程序，比如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會進(jìn)行數(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ù)，個(gè)人覺得這個(gè)修飾符使用的并不多，完全可以不做submit，我自己寫個(gè)click更方便?。?！
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>此時(shí)點(diǎn)擊子級的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>點(diǎn)擊子級的div，此時(shí)的執(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>點(diǎn)擊子級的div，此時(shí)的執(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
因?yàn)樵谑褂胏apture和self的時(shí)候有一些迷糊，有一篇單獨(dú)介紹他倆個(gè)的文章
5. passive與prevent相反
javascript中的preventDefault()
passive就是專門用來跟他們作對的，使他們不起作用，同時(shí)，passive不能和prevent同時(shí)使用，prevent會失效，而且會警告！！
vue事件處理（修飾符）
事件修飾符
在vue中為了只處理純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)，vue.js提供了事件修飾符。
.stop阻止單擊事件繼續(xù)傳播
<a v-on:click.stop="doThis"></a>
.prevent提交事件不再重載頁面
<form v-on:submit.prevent></form>
.capture添加事件監(jiān)聽器時(shí)使用事件捕獲模式，即內(nèi)部元素觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理
<div v-on:click.capture="doThis">...</div>
.self只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù)，即事件不是從內(nèi)部元素觸發(fā)的
<div v-on:click.self="doThat">...</div>
.once點(diǎn)擊事件將只會觸發(fā)一次
<a v-on:click.once="doThis"></a>
.passive滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會立即觸發(fā)，而不會等待 `onScroll` 完成，這其中包含 `event.preventDefault()` 的情況
<div v-on:scroll.passive="onScroll">...</div>
注：修飾符可以串聯(lián)，使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會阻止對元素自身的點(diǎn)擊。
<a v-on:click.stop.prevent="doThat"></a>
按鍵修飾符
vue 允許為 v-on 在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符：
enterpage-down
//只有在 `key` 是 `Enter` 時(shí)調(diào)用 `vm.submit()` <input v-on:keyup.enter="submit"> //處理函數(shù)只會在 $event.key 等于 PageDown 時(shí)被調(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 事件一起用時(shí)，事件觸發(fā)時(shí)修飾鍵必須處于按下狀態(tài)
.exact 修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件
<!-- 即使 Alt 或 Shift 被一同按下時(shí)也會觸發(fā) --> <button v-on:click.ctrl="onClick">A</button> ? <!-- 有且只有 Ctrl 被按下的時(shí)候才觸發(fā) --> <button v-on:click.ctrl.exact="onCtrlClick">A</button> ? <!-- 沒有任何系統(tǒng)修飾符被按下的時(shí)候才觸發(fā) --> <button v-on:click.exact="onClick">A</button>
鼠標(biāo)按鈕修飾符
.left.right.middle
這些修飾符會限制處理函數(shù)僅響應(yīng)特定的鼠標(biāo)按鈕
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
provide和inject主要為高階插件/組件庫提供用例,并不推薦直接用于應(yīng)用程序代碼中,下面這篇文章主要給大家介紹了關(guān)于Vue中provide、inject詳解以及使用的相關(guān)資料,需要的朋友可以參考下2022-11-11
Vue Object 的變化偵測實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue Object的變化偵測實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue el-table實(shí)現(xiàn)自定義表頭
這篇文章主要為大家詳細(xì)介紹了vue el-table實(shí)現(xiàn)自定義表頭，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
Vue 中的插槽在開發(fā)組件的過程中其實(shí)是非常重要并且好用的。下面這篇文章主要給大家介紹了關(guān)于vue具名插槽基本使用的相關(guān)資料，需要的朋友可以參考下2021-05-05
在Vue項(xiàng)目中用fullcalendar制作日程表的示例代碼
這篇文章主要介紹了在Vue項(xiàng)目中用fullcalendar制作日程表，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
element實(shí)現(xiàn)二級菜單和頂部導(dǎo)航聯(lián)動(dòng)的示例
本文主要介紹了element實(shí)現(xiàn)二級菜單和頂部導(dǎo)航聯(lián)動(dòng)的示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
淺析vue偵測數(shù)據(jù)的變化之基本實(shí)現(xiàn)
這里涉及到Vue一個(gè)重要特性：響應(yīng)式系統(tǒng)。數(shù)據(jù)模型只是普通的 JavaScript對象，當(dāng)我們修改時(shí)，視圖會被更新，而變化偵測是響應(yīng)式系統(tǒng)的核心2021-06-06
基于vue組件實(shí)現(xiàn)猜數(shù)字游戲
這篇文章主要為大家詳細(xì)介紹了基于vue組件實(shí)現(xiàn)猜數(shù)字游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vue+element實(shí)現(xiàn)手機(jī)號驗(yàn)證碼注冊的示例
本文主要介紹了vue+element實(shí)現(xiàn)手機(jī)號驗(yàn)證碼注冊的示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了vue中格式化element表格中的時(shí)間為指定格式,需要的朋友可以參考下2022-05-05