vue事件处理核心是v-on指令，支持直接调用、传参调用和内联语句三种写法，并提供.prevent、.stop、.self、.once、.capture五种常用事件修饰符及按键修饰符。
Vue 的事件处理核心是 v-on 指令，它让 DOM 元素能响应用户交互，比如点击、输入、键盘操作等。实际开发中，光绑定方法不够，还需灵活控制事件行为——这时事件修饰符就派上用场了。
v-on 的三种常用写法
事件绑定不只一种方式，选对写法能让逻辑更清晰、维护更轻松：
-
直接调用方法（无参）：如
@click="handleClick"，Vue 会自动把原生event对象作为第一个参数传入handleClick函数。 -
传参调用方法：如
@click="handleClick('confirm', $event)"，$event是 Vue 提供的特殊变量，代表原生事件对象；自定义参数写在前面，顺序不能错。 -
内联语句（简单逻辑）：如
@click="count++"或@click="name = 'Vue'"，适合单条表达式，不建议放复杂逻辑或多个语句。
必须掌握的五个事件修饰符
修饰符通过点号（.）接在事件名后，让事件处理更专注数据逻辑，不用在方法里反复写 event.preventDefault() 这类 DOM 操作：
-
.prevent：阻止默认行为。常见于表单提交（
@submit.prevent）或链接跳转（@click.prevent）。 -
.stop：阻止事件冒泡。比如按钮在弹窗内，点按钮不想触发外层遮罩层的关闭逻辑，加
@click.stop即可。 -
.self：仅当事件由该元素自身触发才执行。例如
<div><button>X</button></div>，点按钮不触发close，点 div 空白处才触发。 - .once：事件只触发一次。适用于初始化操作、支付确认、防重复提交等场景。
- .capture：启用捕获阶段监听。与冒泡相反，父元素先响应，再往下传。配合 .self 或其他修饰符可实现更精细的控制。
修饰符组合与注意事项
修饰符支持链式使用，但顺序影响结果：
-
@click.prevent.stop：先阻止默认行为，再阻止冒泡。 -
@click.stop.prevent：先阻止冒泡，再阻止默认行为——效果一样，但语义更清晰的是 prevent 在前。 -
@click.self.prevent：只对元素自身点击阻止默认行为；而@click.prevent.self会先阻止所有点击默认行为，再判断是否是自身触发——后者几乎没意义，应避免。 - 修饰符可以单独使用，比如
@submit.prevent后面不跟方法，只阻止刷新，不执行任何 JS。
按键与系统修饰符（补充实用项）
针对键盘事件，Vue 还提供按键修饰符，提升用户体验：
-
@keyup.enter：回车键触发，常用于表单提交。 -
@keydown.ctrl.s：Ctrl+S 保存，注意修饰符顺序：系统键（ctrl）在前，字母键（s）在后。 -
@click.alt或@mousedown.shift：配合鼠标/键盘组合，实现快捷操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
