概述 Vue.js 提供了 v-on 指令（简写为 @）用于监听 DOM 事件并执行对应的 JavaScript 代码。这是 Vue 实现用户交互的核心功能之一。
基本用法事件处理器类型Vue 支持两种类型的事件处理器：
内联事件处理器：直接在模板中编写简单的 JavaScript 代码
方法事件处理器：调用组件中定义的方法
Add 1
Greet
内联处理器 vs 方法处理器判断机制Vue 模板编译器通过检查 v-on 的值来判断处理器类型：
值类型示例处理器类型JavaScript 标识符foo方法事件处理器属性访问路径foo.bar, foo['bar']方法事件处理器函数调用foo()内联事件处理器表达式count++内联事件处理器
事件修饰符Vue 提供了一系列事件修饰符来处理常见的 DOM 事件操作：
常用事件修饰符修饰符功能描述示例.stop阻止事件冒泡@click.stop="doThis".prevent阻止默认行为@submit.prevent="onSubmit".self仅当事件从元素本身触发时执行@click.self="doThat".capture使用事件捕获模式@click.capture="doThis".once事件只触发一次@click.once="doThis".passive改善移动端滚动性能@scroll.passive="onScroll"修饰符使用注意事项修饰符可以链式使用：@click.stop.prevent="doThat"
顺序很重要：@click.prevent.self 与 @click.self.prevent 行为不同
.passive 和 .prevent 不能同时使用
按键修饰符常用按键别名Vue 为常见按键提供了别名：
修饰符对应按键.enterEnter 键.tabTab 键.deleteDelete 或 Backspace 键.escEscape 键.space空格键.up上箭头键.down下箭头键.left左箭头键.right右箭头键
系统按键修饰符修饰符功能描述.ctrlCtrl 键.altAlt 键.shiftShift 键.metaMeta 键（Mac: ⌘, Win: ⊞）特殊修饰符.exact：精确控制系统修饰符组合触发条件
鼠标按键修饰符：.left, .right, .middle
事件处理流程图
使用技巧与最佳实践1. 传递参数给方法
function say(message) {
alert(message)
}
Say hello
Say bye
2. 访问原生事件对象
Submit
warn('Form cannot be submitted yet.', event)">
Submit
3. 系统修饰键组合使用
Do something
总结Vue.js 的事件处理系统提供了强大而灵活的功能：
简洁语法：v-on 指令和 @ 简写使代码更清晰
两种处理器：内联处理器适合简单逻辑，方法处理器适合复杂逻辑
丰富修饰符：事件修饰符、按键修饰符和系统修饰符简化了常见需求
类型安全：Vue 3 支持为事件处理器标注类型
性能优化：.passive 修饰符可改善移动端性能
通过合理使用这些功能，可以创建出交互丰富、代码清晰且易于维护的 Vue 应用程序。
附录：修饰符快速参考表类别修饰符描述事件修饰符.stop停止事件传播.prevent阻止默认行为.self仅元素自身触发.capture使用捕获模式.once只触发一次.passive改善滚动性能按键修饰符.enterEnter 键.tabTab 键.deleteDelete/Backspace 键方向键.up, .down, .left, .right系统修饰符.ctrlCtrl 键.altAlt 键.shiftShift 键.metaMeta/Command/Windows 键特殊修饰符.exact精确控制修饰键组合鼠标修饰符.left鼠标左键.right鼠标右键.middle鼠标中键