一.速識(shí)概念：

  你好呀，最近過(guò)的怎么樣？今天總結(jié)了vue常見(jiàn)的事件修飾符，學(xué)習(xí)面試都是常遇到的，快來(lái)看看吧~??
  先引用vue官網(wǎng)的話(huà)說(shuō)----在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見(jiàn)的需求。盡管我們可以在方法中輕松實(shí)現(xiàn)這點(diǎn)，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。為了解決這個(gè)問(wèn)題，Vue.js 為 v-on 提供了事件修飾符。之前提過(guò)，修飾符是由點(diǎn)開(kāi)頭的指令后綴來(lái)表示的。
  簡(jiǎn)單通俗來(lái)說(shuō)就是，我想要實(shí)現(xiàn)一些功能的方法，但是我不想寫(xiě)代碼，我想有直接封裝好的直接拿來(lái)用，所以vue就提供了所謂的事件修飾符，我們直接調(diào)用就可以達(dá)到想要的功能。

分類(lèi)如下：

擴(kuò)展：按鍵修飾符、系統(tǒng)修飾符

二.stop修飾符：

阻止冒泡，阻止事件向上級(jí)DOM元素傳遞。

  什么是冒泡呢？以下面這個(gè)例子，比如有一個(gè)天藍(lán)色父盒子，里面包裹了一個(gè)綠色子盒子，分別綁定點(diǎn)擊事件將輸出不同內(nèi)容：

     <div class="father" @click="father">
        <div class="child" @click="child"></div>
      </div>

.father {
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: green;
      }

     father() {
        console.log("trigger father");
      },
      child() {
        console.log("trigger child");
      },

  效果如下，可以發(fā)現(xiàn)，當(dāng)點(diǎn)擊子盒子時(shí)，不僅子盒子事件被觸發(fā)，連同父盒子的事件也被觸發(fā)了。而只點(diǎn)父盒子時(shí)，只有父盒子事件觸發(fā)。這就是冒泡，事件會(huì)向上級(jí)DOM元素傳遞，由內(nèi)而外，依次觸發(fā)。

 當(dāng)使用 .stop 事件修飾符時(shí)就能很簡(jiǎn)單的阻止冒泡了，用法如下，直接給子盒子的點(diǎn)擊事件后加上.stop即可：

 <div class="child" @click.stop="child"></div>

效果如下：

二.prevent修飾符：

  阻止默認(rèn)事件觸發(fā)。默認(rèn)事件指對(duì)DOM的操作會(huì)引起自動(dòng)執(zhí)行的動(dòng)作，比如點(diǎn)擊a標(biāo)簽超鏈接的時(shí)候會(huì)進(jìn)行默認(rèn)進(jìn)行頁(yè)面的跳轉(zhuǎn)等等。

  如下，定義一個(gè)超鏈接：

<a >北極光之夜。</a>

  正常情況，點(diǎn)擊后默認(rèn)跳轉(zhuǎn)：

添加prevent事件修飾符，取消默認(rèn)的點(diǎn)擊跳轉(zhuǎn)頁(yè)面事件：

<a  @click.prevent>北極光之夜。</a>

看，默認(rèn)點(diǎn)擊跳轉(zhuǎn)頁(yè)面沒(méi)了：

三.capture修飾符：

  捕獲冒泡，即當(dāng)冒泡發(fā)生時(shí)，有capture修飾符的dom元素會(huì)先執(zhí)行，如果有多個(gè)，從外到內(nèi)依次
執(zhí)行，最后再按自然冒泡順序執(zhí)行觸發(fā)的事件。

  以下面這個(gè)例子，比如有一個(gè)天藍(lán)色父盒子，里面包裹了一個(gè)綠色子盒子，里面再包裹了一個(gè)橙色孫子盒子，分別綁定點(diǎn)擊事件將輸出不同內(nèi)容：

<div class="father" @click="father">
        <div class="child" @click="child">
          <div class="grandSon" @click="grandSon"></div>
        </div>

 .father {
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: green;
      }
      .grandSon {
        width: 50px;
        height: 50px;
        background-color: orange;
      }

 father() {
            console.log("trigger father");
          },
          child() {
            console.log("trigger child");
          },
          grandSon() {
            console.log("trigger granSon");
          },

當(dāng)點(diǎn)擊孫子盒子時(shí)，會(huì)產(chǎn)生冒泡，由內(nèi)而外，依次順序執(zhí)行事件：

  我們給處于中間的子盒子添加.capture修飾符捕獲冒泡事件，這樣當(dāng)點(diǎn)擊孫子盒子時(shí)，會(huì)先執(zhí)行子盒子后，再按正常冒泡順序依次執(zhí)行孫子盒子與父盒子：

<div class="child" @click.capture="child">

四.self修飾符：

將事件綁定到自身，只有自身才能觸發(fā)，通常用于避免冒泡事件的影響。

  以下面這個(gè)例子，比如有一個(gè)天藍(lán)色父盒子，里面包裹了一個(gè)綠色子盒子，里面再包裹了一個(gè)橙色孫子盒子，分別綁定點(diǎn)擊事件將輸出不同內(nèi)容：

<div class="father" @click="father">
        <div class="child" @click="child">
          <div class="grandSon" @click="grandSon"></div>
        </div>

 .father {
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: green;
      }
      .grandSon {
        width: 50px;
        height: 50px;
        background-color: orange;
      }

 father() {
            console.log("trigger father");
          },
          child() {
            console.log("trigger child");
          },
          grandSon() {
            console.log("trigger granSon");
          },

正常情況下，當(dāng)點(diǎn)擊不同盒子時(shí)，會(huì)產(chǎn)生冒泡，由內(nèi)而外，依次順序執(zhí)行事件：

  我們給處于中間的子盒子添加.self修飾符，這樣當(dāng)點(diǎn)擊孫子盒子時(shí)，按照正常冒泡邏輯，會(huì)依次觸發(fā)孫子、兒子、父親的點(diǎn)擊事件，但是因?yàn)樽雍凶犹砑恿?self修飾符，那么孫子的冒泡就不能影響到子盒子了，冒泡無(wú)效，只有子盒子自己被點(diǎn)擊才會(huì)觸發(fā)它的點(diǎn)擊事件。

<div class="child" @click.self="child">

五.once修飾符：

  顧名思義，就是事件只能觸發(fā)一次，比如給一個(gè)盒子綁定點(diǎn)擊事件，點(diǎn)擊后輸出內(nèi)容：

<div class="father" @click="father"></div>

.father {
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }

father() {
            console.log("trigger father");
          },

正常效果：

添加.once修飾符，點(diǎn)擊事件只能觸發(fā)一次，多點(diǎn)沒(méi)有了：

<div class="father" @click.once="father"></div>

六.passive修飾符：

這個(gè)不方便舉例，我就直接結(jié)合vue官方文檔的介紹了：

Vue 還對(duì)應(yīng) addEventListener 中的 passive 選項(xiàng)提供了 .passive 修飾符。

<!-- 滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā) -->
<!-- 而不會(huì)等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>

  這個(gè) .passive 修飾符會(huì)執(zhí)行默認(rèn)方法，尤其能夠提升移動(dòng)端的性能。
  問(wèn)題來(lái)了，passive 修飾符會(huì)執(zhí)行默認(rèn)方法？提高性能？默認(rèn)方法本來(lái)就會(huì)執(zhí)行，要它干嘛？
  簡(jiǎn)單來(lái)說(shuō)，其實(shí)每次事件產(chǎn)生，瀏覽器都會(huì)去查詢(xún)一下是否有preventDefault阻止該次事件的默認(rèn)動(dòng)作。我們加上passive就是為了告訴瀏覽器，不用查詢(xún)了，我們沒(méi)用preventDefault阻止默認(rèn)動(dòng)作。所以說(shuō)，瀏覽器就不用去檢查了，既然不用檢查了，那效率就上來(lái)了，性能那肯定就加強(qiáng)了。特別是在移動(dòng)端，用戶(hù)手勢(shì)操作那么快，執(zhí)行效率就很重要了。

不要把 .passive 和 .prevent 一起使用，因?yàn)?.prevent 將會(huì)被忽略，同時(shí)瀏覽器可能會(huì)向你展示一個(gè)警告。請(qǐng)記住，.passive 會(huì)告訴瀏覽器你不想阻止事件的默認(rèn)行為。

七. 按鍵修飾符、系統(tǒng)修飾符：

1.按鍵修飾符:

  在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為 v-on 在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)添加按鍵修飾符。簡(jiǎn)單來(lái)說(shuō)，我們?cè)诮壎ò存I事件時(shí)，可以通過(guò)修飾符快速指定只有點(diǎn)擊某個(gè)鍵才會(huì)觸發(fā)。

vue提供的常用按鍵碼別名的修飾符如下：

.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

比如，有一個(gè)input輸入框，綁定一個(gè)keyup按鍵松開(kāi)事件，觸發(fā)時(shí)輸出內(nèi)容：

<input type="text" @keyup="outPut" />

 outPut() {
            console.log("outPut!");
          },

只要有按鍵松開(kāi)都會(huì)觸發(fā)：

按鍵修飾符，后面當(dāng)我按回車(chē)鍵時(shí)才會(huì)觸發(fā)事件：

<input type="text" @keyup.enter="outPut" />

2.系統(tǒng)修飾符:

這個(gè)跟按鍵修飾符一樣的，就不多介紹了，我直接引用vue官方文檔的介紹了：

可以用如下修飾符來(lái)實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(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>

請(qǐng)注意修飾鍵與常規(guī)按鍵不同，在和 keyup 事件一起用時(shí)，事件觸發(fā)時(shí)修飾鍵必須處于按下?tīng)顟B(tài)。換句話(huà)說(shuō)，只有在按住 ctrl 的情況下釋放其它按鍵，才能觸發(fā) keyup.ctrl。而單單釋放 ctrl 也不會(huì)觸發(fā)事件。如果你想要這樣的行為，請(qǐng)為 ctrl 換用 keyCode：keyup.17。

八.總結(jié)：

?到這基本上對(duì)vue事件修飾符的介紹就差不多了，并不難，再上一次表格，強(qiáng)化記憶：

到此這篇關(guān)于案例實(shí)操vue事件修飾符帶你快速了解與應(yīng)用的文章就介紹到這了,更多相關(guān)vue事件修飾符了解與應(yīng)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論