一、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() 等样板代码。

常用事件修饰符一览：

修饰符作用
.stop阻止事件冒泡（event.stopPropagation()）
.prevent阻止默认行为（event.preventDefault()）
.capture使用事件捕获模式
.self只当事件在元素本身触发时才触发（不包含子元素）
.once事件只触发一次
.passive以被动模式添加事件监听器（提升滚动性能）

示例演示：


不会跳转



  外层 div
  




不会代理子元素点击

✅ 组合使用：修饰符可以链式调用

五、按键修饰符（Key Modifiers）

在监听键盘事件时，Vue 支持按键修饰符，用于监听特定按键。

常见按键修饰符：

修饰符对应按键
.enterEnter 键
.tabTab 键
.deleteDelete 和 Backspace 键
.escEscape 键
.space空格键
.up / .down / .left / .right方向键

示例：

自定义按键码（已废弃，推荐使用键名）

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

✅ 推荐使用别名，更语义化。

六、系统修饰键与组合键

Vue 还支持监听带有 Ctrl、Alt、Shift、Meta（Windows/Command 键）的组合键。

修饰符说明
.ctrlCtrl 键
.altAlt 键
.shiftShift 键
.metaCommand (Mac) / Windows (Win) 键

示例：



按住 Ctrl 点击我

⚠️ 注意：.exact 修饰符可控制精确的系统修饰符组合：

七、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>

八、常见问题与最佳实践

❓ 1. 为什么推荐使用修饰符而不是在方法中调用 preventDefault？

  • 更清晰：意图明确，模板即文档。
  • 更高效：避免在方法中写重复代码。
  • 更声明式：符合 Vue 的设计理念。

❓ 2. 事件绑定可以绑定多个事件吗？

可以！支持多个事件绑定：

❓ 3. 动态事件名（v-on:[event]）

Vue 支持动态事件名绑定：


<script>
export default {
  data() {
    return {
      eventName: 'click'
    }
  },
  methods: {
    handleEvent() {
      alert('动态事件触发！')
    }
  }
}
</script>

九、总结

功能语法说明
事件绑定@click 或 v-on:click监听 DOM 事件
传参@click="func(arg, $event)"$event 访问原生事件
事件修饰符.stop.prevent.once 等简化事件控制
按键修饰符.enter.esc.up 等监听特定按键
系统修饰键.ctrl.alt.shift组合键监听
动态事件v-on:[event]动态绑定事件名

十、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！