一、Vue 中的事件綁定：v-on 指令

Vue 使用 v-on 指令來監聽 DOM 事件，並在觸發時執行 JavaScript 代碼。

1. 基本語法

點擊我

2. 簡寫語法（推薦）

v-on: 可以簡寫為 @，這是 Vue 中最常見的寫法：

點擊我

3. 方法定義

在 Vue 組件的 methods 中定義事件處理函數：

export default {
  methods: {
    handleClick() {
      alert('按鈕被點擊了！')
    }
  }
}

✅ 注意：在 methods 中定義的方法，this 指向當前 Vue 實例。

二、內聯事件處理器

除了調用方法，你也可以直接在 @click 後寫 JavaScript 表達式：

增加計數
打招呼

配合 data 使用：

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    sayHello(name) {
      alert(`Hello, ${name}!`)
    }
  }
}

⚠️ 建議：複雜邏輯應放在 methods 中，避免模板中寫過多邏輯。

三、傳參與訪問原生事件

1. 傳遞自定義參數

點擊傳參

methods: {
  handleClick(msg, event) {
    console.log(msg)     // 輸出：參數
    console.log(event)   // 原生 DOM 事件對象
    event.preventDefault() // 阻止默認行為
  }
}

$event 是 Vue 提供的特殊變量，用於訪問原生事件對象。

四、事件修飾符（Event Modifiers）

Vue 提供了一組事件修飾符，可以以“點語法”方式鏈式調用，用於處理常見的事件行為，避免在方法中寫 event.preventDefault() 等樣板代碼。

常用事件修飾符一覽：

示例演示：

不會跳轉


  外層 div
  按鈕（點擊不觸發外層）


不會代理子元素點擊

點我一次

✅ 組合使用：修飾符可以鏈式調用

五、按鍵修飾符（Key Modifiers）

在監聽鍵盤事件時，Vue 支持按鍵修飾符，用於監聽特定按鍵。

常見按鍵修飾符：

示例：

自定義按鍵碼（已廢棄，推薦使用鍵名）

Vue 也支持使用 keyCode，但不推薦：

✅ 推薦使用別名，更語義化。

六、系統修飾鍵與組合鍵

Vue 還支持監聽帶有 Ctrl、Alt、Shift、Meta（Windows/Command 鍵）的組合鍵。

示例：

按住 Ctrl 點擊我

Shift + 點擊

⚠️ 注意：.exact 修飾符可控制精確的系統修飾符組合：

Click

精確 Ctrl

七、Vue 3 中的 Composition API 寫法

在 setup() 中，事件處理函數定義在 setup 返回的對象中：

<script>
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    const reset = () => {
      count.value = 0
    }
    return {
      count,
      increment,
      reset
    }
  }
}
</script>

    計數：{{ count }}
    +1
    重置

八、常見問題與最佳實踐

❓ 1. 為什麼推薦使用修飾符而不是在方法中調用 preventDefault？

• 更清晰：意圖明確，模板即文檔。
• 更高效：避免在方法中寫重複代碼。
• 更聲明式：符合 Vue 的設計理念。

❓ 2. 事件綁定可以綁定多個事件嗎？

可以！支持多個事件綁定：

多事件綁定

❓ 3. 動態事件名（v-on:[event]）

Vue 支持動態事件名綁定：

動態事件

<script>
export default {
  data() {
    return {
      eventName: 'click'
    }
  },
  methods: {
    handleEvent() {
      alert('動態事件觸發！')
    }
  }
}
</script>

九、總結

十、結語

感謝您的閲讀！如果你有任何疑問或想要分享的經驗，請在評論區留言交流！