最近使用到 vue 的事件修飾符，快速的過一下 vue 中的事件修飾符

1. 官方文檔

vue2 v-on 點(diǎn)擊這里

vue3 v-on 點(diǎn)擊這里

vue2中有關(guān) v-on 的介紹

vue3中有關(guān) v-on 的介紹

初步看下來，vue2 和 Vue3 中修飾符差距并不大。

2. 說明+實(shí)例

2.1 .stop

.stop 修飾符的作用是阻止冒泡

<template>
  <div @click="handleClick(2)">
    <button @click.stop="handleClick(1)">點(diǎn)擊</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleClick(key) {
      console.log('你好', key);
    },
  },
};
</script>

js 中事件默認(rèn)是由內(nèi)向外層冒泡傳遞的。正常情況下點(diǎn)擊按鈕會(huì)依次打印 1,2。當(dāng)我們并不想觸發(fā)外層的事件時(shí)，我們可以用 .stop 阻止冒泡。

對(duì)應(yīng)源碼使用的是 $event.stopPropagation() 實(shí)現(xiàn)此功能

2.2 .prevent

.prevent 修飾符的作用是阻止默認(rèn)事件

<template>
  <div>
    <a href="#" rel="external nofollow"  @click.prevent="handleClick(1)">點(diǎn)我</a>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleClick(key) {
      console.log('你好', key);
    },
  },
};
</script>

html 某些元素自帶一些默認(rèn)的事件，例如常見的:from 表單的提交；a 標(biāo)簽的跳轉(zhuǎn)；如果想禁用這些時(shí)間，就可以使用 .prevent 修飾符。

對(duì)應(yīng)源碼使用的是 event.preventDefault() 實(shí)現(xiàn)此功能

2.3 .capture

事件默認(rèn)是由里往外冒泡，.capture 修飾符的作用是,由外部向內(nèi)進(jìn)行捕獲

<template>
  <div @click.capture="handleClick(2)">
    <button @click="handleClick(1)">點(diǎn)擊</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleClick(key) {
      console.log('你好', key);
    },
  },
};
</script>

此處會(huì)先打印 2,再打印 1。

對(duì)應(yīng) js 原生中修改事件是，冒泡還是捕獲，dom.addEventListener(eventName,fn,capture)。第三個(gè)參數(shù)默認(rèn)是 false，及冒泡。如果為 true，及捕獲。capture 英譯 ：捕獲。

2.4 {keyCode | keyAlias}

當(dāng)需要對(duì)鍵盤按鈕做處理的時(shí)候，比如 keydown, keyup。如果想針對(duì)特定的某些按鈕進(jìn)行監(jiān)聽，可以添加修飾符，例如：

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

常見的按鍵碼 官方文檔對(duì)按鍵碼的介紹

2.5 .native

.native 修飾符是加在自定義組件的事件上，保證事件能執(zhí)行.

// 執(zhí)行不了
<My-component @click="shout(3)"></My-component>

// 可以執(zhí)行
<My-component @click.native="shout(3)"></My-component>

2.6 .once

.once修飾符的作用是，事件只執(zhí)行一次

<button  @click.once="handleClick($event)">
  按鈕
</button>

2.7 .left .right .middle

.left .middle .right 這三個(gè)修飾符分別是鼠標(biāo)的左中右按鍵觸發(fā)的事件

2.8 .passive

當(dāng)我們?cè)诒O(jiān)聽元素滾動(dòng)事件的時(shí)候，會(huì)一直觸發(fā) onscroll 事件，在 pc 端是沒啥問題的，但是在移動(dòng)端，會(huì)讓我們的網(wǎng)頁(yè)變卡，因此我們使用這個(gè)修飾符的時(shí)候，相當(dāng)于給對(duì)移動(dòng)端的滾動(dòng)做一些優(yōu)化。

<div @scroll.passive="onScroll">...</div>

End

事件修飾符底層還是基于 js 實(shí)現(xiàn)的。當(dāng)然 vue 也還是基于 js 的封裝。事件修飾符不難，暫時(shí)記住這么幾種即可。就我目前接觸到的情況來說，元素的原生事件在某些關(guān)鍵時(shí)刻有奇效，但是也會(huì)發(fā)生很奇特的 bug。

到此這篇關(guān)于vue中的事件修飾符介紹和示例的文章就介紹到這了,更多相關(guān)vue事件修飾符內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論