前言

在 Vue 中，當你希望做某些動作並觸發事件時，可能就會需要用到事件綁定，

譬如說呢，今天要點擊一個按鈕數字會 +1:

const count = ref(0)

▲ 宣告一個 count ref 來存放我們的計數

<button @click="count++">加 1</button>
<p>數字是: {{ count }}</p>

▲ v-on 使用範例
有注意到在 button 上有個 @click 這就是我們今天的主角，事件綁定
@click 其實是簡寫，真正全名是 v-on:click。

除了 click 我們還有什麼可以用

這邊我們透過語法提示可以知道說:

▲ 原生的 DOM events 都是可以拿來做綁定的，常見的有 click, change, keydown, etc.

那如果是自定義組件，可以再額外綁定 emit 事件，
這個部份我們會再後續的篇章中詳細講解有關 Vue 的雙向綁定。

使用

最基礎的用法就是直接在事件綁定後面加上 JavaScript 表達式。

<button @click="count++">{{ count }}</button>
<button v-on:click="count++">{{ count }}</button>

或是你也可以綁定 Function 這樣你可以做一些更複雜的操作。

<script setup>
function say(){
 alert(message);
}
</script>

<template>
  <button @click="say('你好')"> 說你好 </button> <!-- 你好 -->
  <button @click="say('想去日本')"> 說想去日本 </button> <!-- 想去日本 -->
</template>

修飾符

你也許看過這種功能，
為了阻止 <form> 的自動跳轉功能，我們會加上 .preventDefault()。

<script setup>
function submitForm(event) {
  event.preventDefault()
  //...剩餘程式碼
}
</script>

<template>
  <form @submit="submitForm">
    <input type="text"/>
    <input type="email"/>
    <button type="submit" >送出</button>
  </form>
</template>

那 Vue 也提供了相關的功能，叫做 事件修飾符，
但並不是所有的修飾符都能套用，按照文件來分類有以下幾種。

addEventListener() - options

• capture
• passive
• prevent

系統修改鍵

• ctrl
• alt
• shift
• meta

按鍵修飾符

有時候為了無障礙或是更好的 UX，
我們會去按鍵偵測使用者的操作，
可以加上的修飾符其實遠比提示的還要多。

你可能會想 這個 {keyAlias} 為什麼我選上去了但無法套用，
但其實她只是為了表示說你可以在後面加上特定按鍵。

以這個 pageUp 按鍵為例

source

<script setup>
function onPageUp() {
  console.log("Page Up key pressed");
}
</script>

<template>
  <input type="text" @keydown.page-up="onPageUp()" />
</template>

獲取事件本身參數

來補充一下我遇到的一個坑，
在官方提供的範例程式碼中用了 page-down 來做為要監聽的按鈕。

▲ 關於 v-on 的官方範例圖

那剛好，我的這個鍵盤上面那排並沒有 pageup 跟 pagedown，

然後他又在上下按下掛上了 PgUp PgDn。

我就在那邊一直按一直按，他死不觸發。

我都快要發瘋了，所以我就想知道他到底能不能用這個按鈕偵測。
尤大是不是騙我

<script setup>
function onPageUp(event) {
  console.log(event);
}
</script>

<template>
  <input type="text" @keydown="onPageUp($event)" />
</template>

$event 是 inline 事件處理的特殊參數, 可以獲得事件本身的物件

在這個基礎上我們補上 key 這個屬性名稱

<script setup>
function onPageUp(event) {
  console.log(event.key);
}
</script>

<template>
  <input type="text" @keydown="onPageUp($event)" />
</template>

(有時候就挺無奈的

結語

今天我們帶過了事件處理語法，在何種情況可以使用修飾符，
以及如何利用 $event 這個特殊參數來解決我們的實際問題。

事件處理是 Vue 中最基本的觀念，也是互動中最重要的第一步，
上面這些東西不需要也沒必要全都背起來，
當你使用的次數變多了也會知道哪些是常用的東西，哪些是需要再查就好了。

到今天我們就順利完成了 Vue 基礎語法的篇章，
下個篇章我們將脫離單一組件的範圍，正式進入組件溝通的領域。

如果你喜歡這個系列或是想看我發瘋，歡迎按下 訂閱 一起走完這三十天吧。

一些小練習

1. 一句話解釋 v-on ?
2. v-on 的簡寫為何 ?
3. 在不使用 emit 的情況下，預設可以綁定哪類型的事件?
4. 怎麼獲取事件本身的參數 ?
5. 修飾符是什麼? 幫我舉一個實際例子。