從零開始的 Vue3 生活- 事件監聽

前言

這篇主要講解 v-on 這個事件監聽的指令，以及簡單描述一下 methods 這個物件，是 Vue 中最常用的指令。

---

監聽事件

v-on 這個指令讓我們可以監聽 DOM 事件，如同 JavaScript 中的 addEventListener，在裡面可以帶入一個方法或是對 data 裡的屬性直接賦值。這裡以 click 事件舉例，用法為 v-on:click="xxxx"，或是使用 @ 簡寫 @click="xxxx" 的方式：

<div id="app">
    <button @click="count += 1">click</button>
    {{ count }}
  </div>

const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

---

事件處理方法

上面那種直接在 v-on 裡寫 JavaScript 的方法有時候很方便，但大多數事件處理會更複雜，不會只有一行 JavaScript，這個時候 Vue 的 methods 就登場了：

const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    addOne: function() {
      // 做的事情就是將 count 加 1
      this.count += 1
    },

    // 簡寫
    addTwo(num) {
      // 將 count 加入傳入的數值
      this.count += num
    }
  }
}).mount('#app')

methods 這個物件在 Vue 裡是管理方法的地方。而在上面的是程式碼中，我們需要使用 this 來取用 count 這個資料屬性。這裡的 this 是指向 Vue 的實體，所以我們能在 methods 裡取用 count。

接下來我們就用 v-on 來處理 methods 裡的方法：

<div id="app">
  <button @click="addOne">Add One</button>
  <!-- 可以像這樣傳遞參數 -->
  <button @click="addTwo(2)">Add Two</button>
  <h1>{{ count }}</h1>
</div>

---

取用原生的 DOM 事件

如果需要，我們可以用在方法傳入 $event 這個變數，來訪問原生地 DOM 事件：

<div id="app">
  <button @click="getOrigin($event)">Get DOM Event</button>
</div>

const app = Vue.createApp({
  methods: {
    getOrigin(event) {
      // 能看到原生的方法以及 DOM 節點
      console.log(event)
    }
  }
}).mount('#app')

---

處理多個方法

v-on 可以傳入多個方法，這些方法由逗號隔開，要注意的是處理多個方法時，都需要在方法後加括號：

<div id="app">
  <button @click="addOne(), addTwo(2)">Add One</button>
  <h1>{{ count }}</h1>
</div>

---

事件修飾符

有時候我們在防止事件冒泡或防止預設行為觸發時，會使用 preventDefault() 或 stopPropagation()，但 methods 在使用上的宗旨就是只有純粹的資料邏輯，而不是去處理 DOM 事件細節。

為解決此問題，v-on 提供了事件修飾符：

• .stop：防止事件冒泡(由內而外依序觸發事件)
• .prevent：防止預設行為觸發，多用在 submit 事件
• .capture：事件捕獲(由外而內出發事件)
• .self：只觸發自己的事件，不包含子元素
• .once：只會觸發一次，之後就無法在觸發

---

案件修飾符

監聽鍵盤事件，我們會需要取用特定的按鍵，Vue 提供了鍵盤事件的修飾符：

<!-- 按下 ENTER 鍵時才調用 postWord 方法 -->
<input type="text" @keyup.enter="postWord">

按鍵修飾符有以下這些：

• .enter
• .tab
• .delete (Delete 鍵和 倒退鍵)
• .esc
• .space
• .up
• .down
• .left
• .right
• .ctrl
• .alt
• .shift

---

參考

Vue 官網