vue事件修饰符包括.stop阻止冒泡，.prevent阻止默认行为，.once实现一次监听，.capture捕获阶段触发，.passive优化滚动性能，且可组合使用。例如@click.stop.prevent可同时阻止冒泡和默认行为。
在 Vue 开发中，事件修饰符是非常实用的小工具，它们能让我们更轻松地处理 DOM 事件的默认行为和冒泡逻辑。常见的比如 .stop 和 .prevent，但其实还有更多修饰符可以帮助我们写出更简洁、清晰的代码。
下面是一些常用的 Vue 事件修饰符及其用途：
阻止事件冒泡：.stop
当你不希望一个事件向父元素继续传播时，就可以用 .stop。它等价于原生 JavaScript 中的 event.stopPropagation()。
立即学习“前端免费学习笔记（深入）”；
举个例子：
<div @click="handleDiv"> <button @click.stop="handleButton">点我</button> </div>
点击按钮时，只会触发 handleButton 方法，不会触发外层 div 的 handleDiv。这个修饰符在嵌套结构里特别有用，可以避免不必要的干扰。
阻止默认行为：.prevent
如果你需要阻止浏览器的默认动作，比如表单提交或者链接跳转，可以用 .prevent。这相当于调用了 event.preventDefault()。
例如：
<a href="https://example.com" @click.prevent="doSomething">点击</a>
点击这个链接时，页面不会跳转，而是执行你的 doSomething 方法。
一次性监听：.once
有时候你希望某个事件只被触发一次，之后就不再响应了，这时候 .once 就派上用场了。
比如：
<button @click.once="initializeData">初始化</button>
不管用户点了几次这个按钮，initializeData 只会执行一次。这对于加载数据或初始化操作很有用。
捕获阶段监听：.capture
默认情况下，Vue 的事件监听器是在冒泡阶段触发的。但如果你希望在捕获阶段就处理事件，可以加上 .capture。
示例：
<div @click.capture="handleCapture"> <button @click="handleButton">按钮</button> </div>
点击按钮时，会先触发外层 div 的 handleCapture，然后再是按钮本身的事件。
自动添加 passive：.passive
这个修饰符用于提升滚动性能，特别是在移动端。它告诉浏览器该事件监听器不会阻止默认行为，从而让滚动更流畅。
比如：
<div @touchstart.passive="handleTouchStart"></div>
需要注意的是，.prevent 和 .passive 不能同时使用，因为 .passive 明确表示不会调用 preventDefault()。
修饰符组合使用
这些修饰符还可以连着写，顺序一般不影响结果。比如：
<form @submit.prevent.stop="handleSubmit"></form>
这样就能同时阻止默认提交行为和事件冒泡。
基本上就这些常用的事件修饰符了，虽然看起来不多，但在实际开发中非常实用，尤其是能帮你省掉很多手动调用 event 方法的代码。合理使用它们可以让代码更干净，逻辑也更清晰。
