v-on修饰符是点号（.）附加在事件名后的语法糖，用于简化DOM事件控制：.stop阻止冒泡，.prevent取消默认行为，.self限定自身触发，.once限单次执行，.capture启用捕获模式，支持串联且可与$event共存。
v-on 监听原生 DOM 事件时，修饰符通过点号（.）附加在事件名后，直接写在指令值里，语法简洁、语义明确。它不是额外配置，而是 Vue 编译器识别的语法糖，作用于事件触发阶段，无需手动调用 event.stopPropagation() 或 event.preventDefault()。
常用修饰符及其核心用途
最常使用的修饰符有 .stop、.prevent、.self、.once 和 .capture，它们解决的是 DOM 事件生命周期中的典型问题：
- .stop：终止事件冒泡，防止父级监听器被触发
- .prevent：取消事件默认行为，比如表单提交刷新、链接跳转
- .self：仅当 event.target 精确等于绑定元素自身时才触发（排除子元素冒泡）
- .once：事件只触发一次，之后自动解绑
- .capture：在捕获阶段而非冒泡阶段执行处理器
修饰符可以串联使用
多个修饰符按逻辑顺序组合，从左到右生效。例如：
-
@click.stop.prevent：先阻止冒泡，再阻止默认行为 -
@submit.capture.prevent：在捕获阶段拦截表单提交，并阻止刷新 -
@keydown.enter.once：只响应一次回车键按下
注意顺序会影响行为——.prevent.stop 和 .stop.prevent 效果一致，但习惯上把更基础的修饰符（如 .stop）放在前面。
立即学习“前端免费学习笔记（深入）”；
在 methods 中配合事件对象使用
修饰符处理的是 DOM 层面的细节，而业务逻辑仍由 methods 承担。若需访问原生事件对象，有两种方式：
- 方法无参数时，Vue 自动将 event 作为第一个参数传入：
@click="handleClick"→handleClick(e) { ... } - 方法已有参数时，需显式传入
$event：@click="handleClick('submit', $event)
修饰符与 $event 可共存，比如 @click.stop="handleClick($event, 'save') —— 此时 .stop 仍生效，$event 也正常传递。
避免和 .native 修饰符混淆
.native 不是事件修饰符，而是专用于组件根元素监听原生事件的特殊修饰符（如 <my-input @focus.native="onFocus">）。它和 .stop、.prevent 等属于不同层级的概念：前者解决“监听谁的事件”，后者解决“事件怎么触发”。二者不冲突，可同时出现：<my-input @click.native.stop="handle">。
