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

1. 官方文檔

vue2 v-on 點擊這里

vue3 v-on 點擊這里

vue2中有關 v-on 的介紹

vue3中有關 v-on 的介紹

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

2. 說明+實例

2.1 .stop

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

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

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

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

對應源碼使用的是 $event.stopPropagation() 實現(xiàn)此功能

2.2 .prevent

.prevent 修飾符的作用是阻止默認事件

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

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

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

對應源碼使用的是 event.preventDefault() 實現(xiàn)此功能

2.3 .capture

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

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

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

此處會先打印 2,再打印 1。

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

2.4 {keyCode | keyAlias}

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

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

常見的按鍵碼 官方文檔對按鍵碼的介紹

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 這三個修飾符分別是鼠標的左中右按鍵觸發(fā)的事件

2.8 .passive

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

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

End

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

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

最新評論