Vue如何進行事件處理？相關基礎知識介紹

本篇文章為大家介紹Vue事件處理的基礎知識。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

Vue事件處理是每個Vue專案的必要面向。它用於捕獲用戶輸入，共享數據以及許多其他創造性方式。 【相關推薦：《vue.js教學》】

在本文中，會介紹基礎知識，並提供一些處理事件的程式碼範例。它只包含我認為最有用的技巧/方法，要深入了解Vue可以做的所有事情，請查看Vue文件。

基本事件處理

使用v-on指令(簡稱#@)，我們可以監聽DOM事件並執行處理程序方法或內聯Javascript。

// v-on 指令
<div v-on:click=&#39;handleClick&#39; />

// OR

<div @click=&#39;handleClick&#39; />

向父元件發出自訂事件

任何網路框架中的常見用例都是希望子元件能夠向其父元件發出事件，這也是雙向資料綁定原理。

常見一個範例是將資料從 input元件傳送到父表單。

根據我們使用的是Options API還是Composition API，發出事件的語法是不同的。

在Options API 中，我們可以簡單地呼叫this.$emit(eventName, payload) ,範例如下：

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

但是，Composition API 使用方式與此不同。需要在 Vue3 提供的 setup方法使用emit方法。

只要匯入context對象，就可以使用與Options API相同的參數呼叫emit。

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

    return { handleUpdate }
  } 
}

當然，我在專案中經常使用解構的方式來使用：

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

    return { handleUpdate }
  } 
}

完美！

無論我們使用Options 或 Composition API，父組監聽的方式都是一樣的。

<HelloWorld @update=&#39;inputUpdated&#39;/>

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

如果在元件 emit 出去方法有傳遞值，我們可以透過兩種不同的方式捕捉它，這取決於我們是使用內聯還是使用方法。

第一種是在模板中使用$event存取傳遞的值。

<HelloWorld @update=&#39;inputUpdated($event)&#39;/>

第二，使用方法來處理事件，則傳遞的值將作為第一個參數自動傳遞給我們的方法。

<HelloWorld @update=&#39;inputUpdated&#39;/>

// ...

methods: {
    inputUpdated: (value) => {
      console.log(value) // WORKS TOO
    }
}

滑鼠修飾符

下面是我們可以在v-on指令中捕獲的主要DOM滑鼠事件列表：

<div 
  @mousedown=&#39;handleEvent&#39;
  @mouseup=&#39;handleEvent&#39;
  @click=&#39;handleEvent&#39;
  @dblclick=&#39;handleEvent&#39;
  @mousemove=&#39;handleEvent&#39;
  @mouseover=&#39;handleEvent&#39;
  @mousewheel=&#39;handleEvent&#39;
  @mouseout=&#39;handleEvent&#39;
>
Interact with Me!
</div>

對於點擊事件，我們還可以添加滑鼠事件修飾符來限制哪個滑鼠按鈕將觸發我們的事件。有三個: left，right 和 middle。

<!-- 这只会触发鼠标左键 -->
<div @mousedown.left=&#39;handleLeftClick&#39;> Left </div>

鍵盤修飾符

我們可以聽三個DOM鍵盤事件：

<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keypress=&#39;handleKeyPressed&#39;
   @keydown=&#39;handleKeyDown&#39;
   @keyup=&#39;handleKeyUp&#39;
/>

通常，我們想偵測某個鍵上的這些事件，有兩種方法可以執行此操作。

• keycodes

• Vue具有某些鍵的別名（enter, tab, delete, esc, space, up, down, left, right)

<!-- Trigger even when enter is released -->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.enter=&#39;handleEnter&#39;
/>

<!-- OR -->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.13=&#39;handleEnter&#39;
/>

系統修飾符

對於某些項目，我們可能只想在使用者按下修飾鍵的情況下觸發事件。修飾鍵類似於Command或shift。

在Vue中，有四個系統修飾符。

• shift

• alt

• #ctrl

• meta (在mac上是CMD，在Windows上是Windows鍵)

這對於在Vue應用程式中創建諸如自訂鍵盤快捷鍵之類的功能非常有用。

<!-- 自定义快捷方式，杨使用Shift + 8 创建列表 -->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.shift.56=&#39;createList&#39;
/>

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

<!-- 自定义快捷方式，只有Shift + 8 这两个按下时才会创建列表-->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.shift.56.exact=&#39;createList&#39;
/>

事件修飾符

對於所有DOM事件，我們可以使用一些修飾符來更改其運行方式。無論是停止傳播還是阻止預設操作，Vue都有兩個內建的DOM事件修飾符。

<!-- 阻止默认行为 -->
<form @submit.prevent>

<!-- 阻止冒泡 -->
<form @submit.stop=&#39;submitForm&#39;>

<!-- 阻止默认行为和冒泡 -->
<form @submit.stop.prevent=&#39;submitForm&#39;>

<!-- 防止事件被多次触发 -->
<p @close.once=&#39;handleClose&#39;>

英文原文網址：https://segmentfault.com/a/1190000039938779

作者：Fernando Doglio

譯者：前端小智

更多程式相關知識，請造訪：程式設計影片！ ！

以上是Vue如何進行事件處理？相關基礎知識介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！