摘要

v-on 指令（常用其縮寫 @）用於監聽 DOM 事件（如 click），並在事件觸發時執行指定的 JavaScript 程式碼，是實現使用者互動的核心。

定義與說明

我們可以將簡單的邏輯直接寫在模板裡（內聯處理器），或呼叫在 <script> 中定義的方法（方法處理器）。後者是更推薦的做法。當需要傳遞參數時，可以使用 @click="myMethod(arg)"，並透過特殊的 $event 變數來存取原生的事件物件。

實作範例

Vue SFC

<script setup>
function greet(name) {
  alert(`你好, {name}!`);
}
</script>

<template>
  <!-- 呼叫方法並傳遞參數 -->
  <button @click="greet('Vue')">點我</button>
</template>

結論

@ 指令將使用者的操作與我們的元件邏輯連接起來，讓靜態的頁面變得鮮活。將複雜邏輯封裝在方法中是保持模板整潔的最佳實踐。

v-on 事件處理使用者互動