v-on 是 Vue 提供的🔗 指令 (directive) 之一，用來綁定事件。透過 v-on 可以讓元素觸發事件，例如點擊、滑鼠移入、滑鼠移出等事件發生時，執行指定的方法。

基本使用方式

1. v-on:event="function"：在元素上使用 v-on 指令，並指定 event 與 function 。
2. @event="function"：v-on 的縮寫，可以直接使用 @ 符號來綁定 event。

<script setup>
  import { ref } from 'vue';
  const counter = ref(1);
</script>

<template>
  <h1>Counter: {{ counter }}</h1>
  <button v-on:click="counter++">
    Increment
  </button>
  <button @click="counter--">
    Decrement
  </button>
</template>

傳入參數使用

有時候我們需要在觸發事件時，傳入一些參數給方法。這時可以透過 $event 來取得事件物件，或是直接在事件名稱後面加上參數。

<script setup>
  import { ref } from 'vue';

  const name = ref('');

  const changeName = (newName, e) =>{
    name.value = newName;
    console.log(e);
    // PointerEvent {isTrusted: true, _vts: 1725820441615, pointerId: 1, width: 1, height: 1, …}
    console.log(e.target);
    // <button> Change </button>
  }
</script>

<template>
  <h1>Your name is: {{ name }}</h1>
  <button @click="changeName('John', $event)">
    Change
  </button>
</template>

延伸閱讀

🔗 事件處理 (Event Handling)