上一篇我們講了雙向綁定，讓使用者輸入東西能馬上同步到程式變數，這很方便。但很多時候，開發者希望使用者「做一個動作」才觸發某件事情，例如：點擊按鈕才送出表單、滑鼠移入才顯示提示文字、鍵盤按下 Enter 才搜尋。這時候，我們就會用到 事件綁定。

什麼是事件綁定？

所謂「事件綁定」簡單來說就是：把 HTML 元素上的某個事件，綁定到 Vue 的方法。
舉例來說，你有一顆按鈕，點下去想要觸發一個方法 sayHello()，那就是事件綁定。

舉例：

<button v-on:click="sayHello">點我一下</button>
<!-- 縮寫 -->
<button @click="sayHello">點我一下</button>

這邊看到我們可以用「@」來縮寫「v-on:」，當使用者點下按鈕，就會呼叫 sayHello()。

來看一個例子

假設開發者想要做一個按鈕，每按一下數字就加一。

<template>
  <div>
    <button @click="increment">點我 +1</button>
    <p>目前數字：{{ count }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

這邊有兩個重點：

1. @click="increment" 就是事件綁定，當使用者點擊按鈕，會呼叫 increment() 方法。
2. count.value++ 讓數字加一，因為我們前面有用 ref(0) 來定義變數。

讀者可以試試看，按幾次就加幾次，畫面會即時更新。這就是事件綁定最直接的應用。

常見的事件

事件不只 click，還有很多，像是：

• @mouseover（滑鼠移入）
• @mouseout（滑鼠移出）
• @keydown（按下鍵盤）
• @keyup.enter（按下 Enter 鍵才觸發）
• @submit.prevent（送出表單，並阻止預設行為）

這裡我就舉一個表單送出的例子給讀者看看：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="name" placeholder="請輸入名字" />
    <button type="submit">送出</button>
  </form>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const name = ref('')

function handleSubmit() {
  alert(`哈囉 ${name.value}！表單已送出！`)
}
</script>

這裡的關鍵在 @submit.prevent，它不只綁定了表單送出事件，還幫我們阻止了「預設刷新頁面」的行為，這是前端框架裡超常見的需求。

那 event 本身呢？

有時候呢，開發者會想知道「使用者點擊了哪些按鈕」又或是「滑鼠座標是多少」，此時我們可以將 event 傳進去。

<template>
  <button @click="showEvent">點我看看 event</button>
</template>

<script setup lang="ts">
function showEvent(e: MouseEvent) {
  console.log(e)
  console.log(`點擊位置：(${e.clientX}, ${e.clientY})`)
}
</script>

我們觀察一下，當使用者點擊按鈕的時候，會將 evnet 傳入到 showEvent()，而這個 function 傳入 e，其型別為 MouseEvent，我們可以將其 console.log（在畫面上印出來） 出來，即可看到 e 有什麼參數可以使用。我們就將滑鼠位置給印出來。

自訂參數

那有些時候，我們可以要傳送參數進去，我們就可以用以下做法：

<template>
  <button @click="sayHello('小明')">打招呼</button>
  <button @click="sayHello('小美')">打招呼</button>
</template>

<script setup lang="ts">
function sayHello(name: string) {
  console.log(`哈囉 ${name}！`)
}
</script>

將名字給傳入 sayHello(名字)，傳入 function 之後印出來。

當然你也可以合併處理，可以將名字傳入，也可以將 event 給傳入：

<template>
  <button @click="(e) => saySomething('小明', e)">點我</button>
</template>

<script setup lang="ts">
function saySomething(name: string, e: MouseEvent) {
  console.log(e)
  console.log(`哈囉 ${name}！你剛剛點的位置是 (${e.clientX}, ${e.clientY})`)
}
</script>

在這個例子當中，我將名字和 event 給傳入，可以看一下這個 function 的 props（參數），有「name、e」，其中 name 型別為 string，而 e 型別為 MouseEvent。然後我將 e 給印出來，可以查看 e 的參數，另外我在第二行的 console.log 中，將名字和滑鼠的位置印出來。

練習：做一個「計算機」

題目：請讀者做一個簡單的「加法計算機」。有兩個輸入框，讓使用者輸入數字，然後點擊「相加」按鈕，畫面顯示結果。

Thinking~

1. 定義兩個變數 num1、num2，再加一個 result 來存結果。
2. 在兩個輸入框綁定 v-model。
3. 在按鈕加上 @click="add"，呼叫加法方法。
4. 在畫面上顯示結果。

解答

<template>
  <div>
    <h1>小小計算機</h1>
    <input v-model.number="num1" type="number" placeholder="輸入數字1" />
    <input v-model.number="num2" type="number" placeholder="輸入數字2" />
    <button @click="add">相加</button>
    <p>結果：{{ result }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const num1 = ref(0)
const num2 = ref(0)
const result = ref(0)

function add() {
  result.value = num1.value + num2.value
}
</script>

我們這邊定義了三個變數「num1、num2、result」，分別是「數字1、數字2、結果」，還定義了一個 function add，其作用是將 num1 與 num2 相加後賦值於 result。

因此使用者在前端畫面輸入了 num1 和 num2 之後呢，使用者按下了相加的按鈕，即會在畫面上顯示相加的結果。

本文結尾

今天我們學了事件綁定，相信各位讀者都對「event」有些觀念了，從點擊按鈕、送出表單、鍵盤輸入，這些行為都能觸發 function。下一篇，我們要來聊聊「條件渲染」。畢竟事件只是互動的一部分，更多時候我們需要「根據條件決定要不要顯示某些東西」。