vue基本事件處理實(shí)例分析

本篇內(nèi)容介紹了“vue基本事件處理實(shí)例分析”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

Vue 事件處理是每個(gè) Vue 項(xiàng)目的必要方面。它用于捕獲用戶輸入，共享數(shù)據(jù)以及許多其他創(chuàng)造性方式。

基本事件處理

使用 v-on 指令（@ 簡稱），我們可以監(jiān)聽 DOM 事件并運(yùn)行處理程序方法或內(nèi)聯(lián) Javascript：

<div v-on:click='handleClick' />
<!-- 相當(dāng)于 -->
<div @click='handleClick' />

我們將介紹您可能想捕獲的一些更常見的事件，單擊此處以獲取 DOM 事件的完整列表。

發(fā)出自定義事件

任何 Web 框架中的常見用例都是希望子組件能夠向其父組件發(fā)出事件。這將允許雙向數(shù)據(jù)綁定。

這樣的一個(gè)示例是將數(shù)據(jù)從輸入組件發(fā)送到父表單。

根據(jù)我們使用的是 Options API 還是 Composition API，發(fā)出事件的語法是不同的。

在 Options API 中，我們可以簡單地調(diào)用 this.$emit(eventName, payload)：

export default {
  methods: {
    handleUpdate() {
      this.$emit('update', 'Hello World')
    }
  }
}

但是，Composition API 沒有 this。相反，我們可以使用 Vue3 setup 方法直接訪問 emit 方法。

setup 方法的第二個(gè)參數(shù)是上下文變量，它包含三個(gè)屬性：attrs、slot 和 emit。

只要導(dǎo)入上下文對(duì)象，就可以使用與 Options API 相同的參數(shù)來調(diào)用 emit。

export default {
  setup (props, context) {
    const handleUpdate = () => {
      context.emit('update', 'Hello World')
    }
    return { handleUpdate }
  } 
}

整理代碼的一種方法是使用對(duì)象解構(gòu)直接導(dǎo)入 emit。看起來像這樣。

export default {
  setup (props, { emit }) {
    const handleUpdate = () => {
      emit('update', 'Hello World')
    }
    return { handleUpdate }
  } 
}

無論我們使用 Options API 還是 Composition API，我們的父組件都以相同的方式監(jiān)聽自定義事件。

<HelloWorld @update='inputUpdated'/>

如果我們發(fā)出的方法也傳遞了一個(gè)值，則可以用兩種不同的方式捕獲它-取決于我們是內(nèi)聯(lián)工作還是使用其他方法。

首先，我們可以 $event 在模板中使用傳遞的值。

<HelloWorld @update='inputUpdated($event)'/>

其次，如果我們使用方法來處理事件，則傳遞的值將作為第一個(gè)參數(shù)自動(dòng)傳遞給我們的方法。

<HelloWorld @update='inputUpdated'/>
<script>
methods: {
  inputUpdated: (value) => {
    console.log(value) // WORKS TOO
  }
}
</ script>

處理鼠標(biāo)修飾符

以下是我們可以在 v-on 指令中捕獲的主要 DOM 鼠標(biāo)事件 的列表：

<div 
  @mousedown='handleEvent'
  @mouseup='handleEvent'
  @click='handleEvent'
  @dblclick='handleEvent'
  @mousemove='handleEvent'
  @mouseover='handleEvent'
  @mousewheel='handleEvent'
  @mouseout='handleEvent'
>
  與我互動(dòng)！
</div>

對(duì)于我們的點(diǎn)擊事件，我們還可以添加鼠標(biāo)事件修飾符來限制哪些鼠標(biāo)按鈕將觸發(fā)我們的事件。有三個(gè)鼠標(biāo)按鍵：left、right 和 middle。

<!-- 這將僅在鼠標(biāo)左鍵單擊時(shí)觸發(fā) -->
<div @mousedown.left='handleLeftClick'> Left </div>

按鍵修飾符

我們可以監(jiān)聽三個(gè) DOM 鍵盤事件：

<input
  type="text"
  placeholder="Type something"
  @keypress="handleKeyPressed"
  @keydown="handleKeyDown"
  @keyup="handleKeyUp"
/>

通常，我們希望在某個(gè)按鍵上監(jiān)聽這些事件，Vue 具有某些鍵的別名可以幫助到我們。

• enter

• tab

• delete（捕獲“刪除”和“退格”鍵）

• esc

• space

• up

• down

• left

• right

<input
  type='text'
  placeholder='Type something'
  @keyup.enter='handleEnter'
/>

需要注意的是，Vue 2.x 中，我們還可以使用鍵碼 的方式，但在 Vue3.x 不在適用：

<!--  -->
<input
  type='text'
  placeholder='Type something'
   @keyup.13='handleEnter'
/>

一些特殊的字符無法被匹配，如 "、'、/、=、> 和 .。這些應(yīng)該在監(jiān)聽器內(nèi)使用事件對(duì)象單獨(dú)判斷。

<input
  type='text'
  placeholder='Type something'
   @keyup.,='handleEnter'
/>

注意：Vue 3.x 不在支持自定義按鍵 config.keyCodes

系統(tǒng)修飾符

對(duì)于某些項(xiàng)目，我們可能只想在用戶按下修飾符的情況下觸發(fā)事件。修飾符類似于 Command 或 shift。

在 Vue 中，有四個(gè)系統(tǒng)修飾符。

• shift

• alt

• ctrl

• meta （在 Mac 上為 cmd，在 Windows 上為 Windows 鍵）

這對(duì)于在 Vue 應(yīng)用程序中創(chuàng)建諸如自定義鍵盤快捷鍵之類的功能非常有用。

<!-- 為 Shift + a clear 的自定義快捷方式 -->
<button @keyup.shift.a="clear">清除</button>

在 Vue 文檔中，還有一個(gè) exact 修飾符，確保僅在按下我們指定的鍵且沒有其他鍵的情況下才觸發(fā)事件。

<!-- 僅為 Shift + a 執(zhí)行 clear -->
<button @keyup.shift.a.exact="clear">清除</button>

鼠標(biāo)按鈕修飾符：lefe、right 和 middle，默認(rèn)行為為 left（左鍵點(diǎn)擊）。

<button @click.middle="clear">清除</button>

事件修飾符

對(duì)于所有 DOM 事件，我們可以使用一些修飾符來更改其運(yùn)行方式。無論是停止傳播還是阻止默認(rèn)操作，Vue 都有幾個(gè)內(nèi)置的 DOM 事件修飾符。

<!-- 阻止默認(rèn)操作 -->
<form @submit.prevent />
<!-- 停止事件傳播 -->
<form @submit.stop="submitForm" />
<!-- 串聯(lián)的修飾符 -->
<form @submit.stop.prevent="submitForm" />
<!-- 防止事件被觸發(fā)多次 -->
<el-button @click.once="handleClose">執(zhí)行一次</el-button>

使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。

以下時(shí) Vue 提供的完整事件修飾符：

• stop 阻止事件傳播

• prevent 阻止默認(rèn)事件

• capture 添加事件監(jiān)聽器時(shí)使用事件捕獲模式，即內(nèi)部元素觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理

• self 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù)，即事件不是從內(nèi)部元素觸發(fā)的

• once 僅執(zhí)行一次

• passive 修飾符尤其能夠提升移動(dòng)端的性能

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

<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div @scroll.passive="onScroll">...</div>

滾動(dòng)事件的默認(rèn)行為（即滾動(dòng)行為）將會(huì)立即觸發(fā)，而不會(huì)等待 onScroll 完成。

“vue基本事件處理實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！