簡單介紹vue基本事件處理

【相關推薦：、】

Vue 事件處理是每個 Vue 專案的必要方面。它用於捕獲使用者輸入，共用資料以及許多其他創造性方式。

在本文中，我將介紹基礎知識，並提供一些用於處理事件的程式碼範例。

基本事件處理

使用 v-on 指令（@ 簡稱），我們可以監聽 DOM 事件並執行處理程式方法或內聯 Javascript：

<div v-on:click='handleClick' />
<!-- 相當於 -->
<div @click='handleClick' />

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

發出自定義事件

任何 Web 框架中的常見用例都是希望子元件能夠向其父元件發出事件。這將允許雙向資料繫結。

這樣的一個範例是將資料從輸入元件傳送到父表單。

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

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

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

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

setup 方法的第二個引數是上下文變數，它包含三個屬性：attrs、slot 和 emit。

只要匯入上下文物件，就可以使用與 Options API 相同的引數來呼叫 emit。

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

整理程式碼的一種方法是使用物件解構直接匯入 emit。看起來像這樣。

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

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

<HelloWorld @update='inputUpdated'/>

如果我們發出的方法也傳遞了一個值，則可以用兩種不同的方式捕獲它-取決於我們是內聯工作還是使用其他方法。

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

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

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

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

處理滑鼠修飾符

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

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

對於我們的點選事件，我們還可以新增滑鼠事件修飾符來限制哪些滑鼠按鈕將觸發我們的事件。有三個滑鼠按鍵：left、right 和 middle。

<!-- 這將僅在滑鼠左鍵單擊時觸發 -->
<div @mousedown.left='handleLeftClick'> Left </div>

按鍵修飾符

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

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

通常，我們希望在某個按鍵上監聽這些事件，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'
/>

一些特殊的字元無法被匹配，如 "、'、/、=、> 和 .。這些應該在監聽器內使用事件物件單獨判斷。

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

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

系統修飾符

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

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

• shift

• alt

• ctrl

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

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

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

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

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

滑鼠按鈕修飾符：lefe、right 和 middle，預設行為為 left（左鍵點選）。

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

事件修飾符

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

<!-- 阻止預設操作 -->
<form @submit.prevent />
<!-- 停止事件傳播 -->
<form @submit.stop="submitForm" />
<!-- 串聯的修飾符 -->
<form @submit.stop.prevent="submitForm" />
<!-- 防止事件被觸發多次 -->
<el-button @click.once="handleClose">執行一次</el-button>

使用修飾符時，順序很重要；相應的程式碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點選，而 v-on:click.self.prevent 只會阻止對元素自身的點選。

以下時 Vue 提供的完整事件修飾符：

• stop 阻止事件傳播

• prevent 阻止預設事件

• capture 新增事件監聽器時使用事件捕獲模式，即內部元素觸發的事件先在此處理，然後才交由內部元素進行處理

• self 只當在 event.target 是當前元素自身時觸發處理常式，即事件不是從內部元素觸發的

• once 僅執行一次

• passive 修飾符尤其能夠提升行動端的效能

注意：不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的預設行為。

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

捲動事件的預設行為（即捲動行為）將會立即觸發，而不會等待 onScroll 完成。

【相關推薦：、】

以上就是簡單介紹vue基本事件處理的詳細內容，更多請關注TW511.COM其它相關文章！