事件修飾符

• .prevent修飾符
• .stop修飾符
• .once修飾符

prevent修飾符

• 用于阻止默認(rèn)事件行為,相當(dāng)于event.preventDefault()，例如a標(biāo)簽?zāi)J(rèn)跳轉(zhuǎn)

<div id="app">
  <a @click.prevent="fn" >鏈接</a> // 可以添加fn方法也可以不加
  <a @click.prevent >鏈接</a>
</div>

stop修飾符

• 用于阻止事件傳播，相當(dāng)于event.stopPropagation()。
• 元素在事件觸發(fā)后默認(rèn)會(huì)產(chǎn)生事件冒泡，事件冒泡會(huì)導(dǎo)致，當(dāng)前元素觸發(fā)后向上傳遞給父元素，并依次向外傳遞，如果外部某元素也存在相同事件時(shí)也會(huì)被觸發(fā)

點(diǎn)擊按鈕時(shí)，div的點(diǎn)擊事件也會(huì)觸發(fā)

正確寫(xiě)法

<div @click="fn1">
  <button @click.stop="fn2">按鈕</button>
</div>

修飾符的結(jié)合使用

<div @click="fn1">
  <a @click.prevent.stop="fn2" href="xxx">鏈接</a>
</div>

once修飾符

• 用于設(shè)置事件只會(huì)觸發(fā)一次

<div id="app">
  <button @click.once="fn2">按鈕</button>
</div>

passive修飾符

• passive這個(gè)修飾符會(huì)執(zhí)行默認(rèn)方法。你們可能會(huì)問(wèn)，明明默認(rèn)執(zhí)行為什么會(huì)設(shè)置這樣一個(gè)修飾符。這就要說(shuō)一下這個(gè)修飾符的本意了
• 【瀏覽器只有等內(nèi)核線(xiàn)程執(zhí)行到事件監(jiān)聽(tīng)器對(duì)應(yīng)的JavaScript代碼時(shí)，才能知道內(nèi)部是否會(huì)調(diào)用preventDefault函數(shù)來(lái)阻止事件的默認(rèn)行為，所以瀏覽器本身是沒(méi)有辦法對(duì)這種場(chǎng)景進(jìn)行優(yōu)化的。這種場(chǎng)景下，用戶(hù)的手勢(shì)事件無(wú)法快速產(chǎn)生，會(huì)導(dǎo)致頁(yè)面無(wú)法快速執(zhí)行滑動(dòng)邏輯，從而讓用戶(hù)感覺(jué)到頁(yè)面卡頓?！?/li>
• 通俗點(diǎn)說(shuō)就是每次事件產(chǎn)生，瀏覽器都會(huì)去查詢(xún)一下是否有preventDefault阻止該次事件的默認(rèn)動(dòng)作。我們加上passive就是為了告訴瀏覽器，不用查詢(xún)了，我們沒(méi)用preventDefault阻止默認(rèn)動(dòng)作
• 一般用在滾動(dòng)監(jiān)聽(tīng)，@scoll，@touchmove，因?yàn)闈L動(dòng)監(jiān)聽(tīng)過(guò)程中，移動(dòng)每個(gè)像素都會(huì)產(chǎn)生一次事件，每次都使用內(nèi)核線(xiàn)程查詢(xún)prevent會(huì)使滑動(dòng)卡頓。我們通過(guò)passive將內(nèi)核線(xiàn)程查詢(xún)跳過(guò)，可以大大提升滑動(dòng)的流暢度
• 注：passive和prevent沖突，不能同時(shí)綁定在一個(gè)監(jiān)聽(tīng)器上

self修飾符

• 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù)

<div v-on:click.self="doThat">...</div>

更多事件修飾符來(lái)自官網(wǎng)

按鍵修飾符

• 按鍵碼：按鍵碼指的是將 按鍵的按鍵碼 作為修飾符使用，以標(biāo)識(shí)按鍵的操作方式。

<div id="app">
  <input type="text" @keyup="fn"> // 指定按鍵松開(kāi)會(huì)觸發(fā)
</div>

var vm = new Vue({
  data:{
  },
  methods:{
    fn(event){
      console.log(event) // 內(nèi)有code，key，keycode(被廢棄)
    }
  }
}).$mount("#app")

添加按鍵碼修飾符

<div id="app">
  <input type="text" @keyup.49="fn"> // 只有keycode49可以觸發(fā)
</div>

如果按鍵是字母,可以修改為字母修飾符

<div id="app">
  <input type="text" @keyup.a="fn"> // 只有a字母可以觸發(fā)
</div>

• 特殊按鍵：指的是鍵盤(pán)中類(lèi)似esc、enter、delete等功能按鍵，為了更好的兼容性,應(yīng)首選內(nèi)置別名。
• 不同設(shè)備keycode可能不一致，特殊按鍵用別名

<div id="app">
  <input type="text" @keyup.esc="fn"> // 只有 esc 可以觸發(fā)
</div>

• 按鍵碼的修飾符組合

<div id="app">
  <input type="text" @keyup.a.b.c="fn"> // a 或者 b 或者 c 都可以觸發(fā)
</div>

更多按鍵修飾符來(lái)自官網(wǎng)

系統(tǒng)修飾符

• 系統(tǒng)按鍵指的是ctrl、alt 、shift、meta（windows鍵）等按鍵。
• 系統(tǒng)按鍵不單獨(dú)使用
• 系統(tǒng)按鍵通常與其他按鍵組合使用，例如配合ctrl+c 來(lái)使用

<div id="app">
  <input type="text" @keyup.ctrl="fn"> // 點(diǎn)擊 ctrl+c
</div>

<div id="app">
  <input type="text" @keyup.ctrl.q ="fn"> // 只有 ctrl+q 才能觸發(fā)
</div>

鼠標(biāo)按鍵修飾符

• 用于設(shè)置點(diǎn)擊事件由鼠標(biāo)哪個(gè)按鍵來(lái)完成。
• .left修飾符
• .right修飾符
• .middle修飾符（滾輪）

<div id="app">
  <input type="text" @keyup.left ="fn"> // 左鍵 才能觸發(fā)
</div>

v-model修飾符

• .trim修飾符
• .lazy修飾符
• .number修飾符

trim修飾符

• 用于自動(dòng)過(guò)濾用戶(hù)輸入內(nèi)容首尾兩端的空格。（input，textarea）

<div id="app">
  <input type="text" v-model.trim="inputVal"> // input中首尾空格會(huì)被trim移除
  <p>{{ inputVal }}</p>
</div>

lazy修飾符

• 用于將v-model的觸發(fā)方式由 input事件 觸發(fā)更改為 change事件 觸發(fā)。
• 每次輸入完畢失去交點(diǎn)時(shí)才進(jìn)行檢測(cè)，觸發(fā)

<div id="app">
  <input type="text" v-model.lazy="inputVal"> // input只有失去焦點(diǎn)才會(huì)更新
  <p>{{ inputVal }}</p>
</div>

number修飾符

• 用于自動(dòng)將用戶(hù)輸入的值轉(zhuǎn)換為數(shù)值類(lèi)型，如無(wú)法被parseFloat()轉(zhuǎn)換，則返回原始內(nèi)容。
• input標(biāo)簽輸入123，實(shí)際獲取的 vm.inputVal = "123",可以使用 .number修飾符進(jìn)行轉(zhuǎn)換

歡迎贊賞和關(guān)注?。?/h3>