Vue 3 在樣板（template）中使用 `v-on` 指令處理 DOM 事件，也可以用簡寫 `@` 表示。 ## 基本語法 ```vue <button v-on:click="handleClick">點擊</button> <!-- 簡寫 --> <button @click="handleClick">點擊</button> ``` 事件處理函式通常定義在 `<script setup>` 中，或傳統 Options API 的 `methods` 裡。 ## 範例 1：點擊按鈕更新資料 ```vue <script setup> import { ref } from 'vue' const count = ref(0) function increment() { count.value++ } </script> <template> <p>目前數字：{{ count }}</p> <button @click="increment">加一</button> </template> ``` 說明： - `@click` 監聽點擊事件。 - `increment` 是事件處理函式。 - `ref` 的值在 JavaScript 中需要透過 `.value` 修改，但樣板中可以直接使用 `count`。 ## 範例 2：取得事件物件與使用修飾符 ```vue <script setup> function submitForm(event) { console.log('送出內容：', event.target.message.value) } </script> <template> <form @submit.prevent="submitForm"> <input name="message" placeholder="輸入訊息" /> <button type="submit">送出</button> </form> </template> ``` 說明： - `@submit` 監聽表單送出事件。 - `.prevent` 是事件修飾符，會自動執行 `event.preventDefault()`，避免表單重新載入頁面。 - Vue 會自動將原生事件物件傳入 `submitForm`。 常見事件修飾符還包括： ```vue <button @click.stop="handleClick">阻止事件冒泡</button> <input @keyup.enter="submit" /> ``` 其中 `.stop` 會停止事件冒泡，`.enter` 則只在按下 Enter 鍵時觸發。