这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战

大家好，我是 Vue.js 的忠实粉丝。今天，我想和大家分享一些 Vue 中超好用且常用的修饰符。修饰符是 Vue 中的一个重要概念，它可以让我们以更简单的方式来修饰元素的默认行为。

修饰符的好处

• 提高开发效率
• 使代码更简洁、更易读
• 提高代码的可维护性

常用的 Vue 修饰符

Vue 中常用的修饰符有很多，下面列出一些最常用的：

1. .prevent：阻止元素的默认行为。例如，当点击一个链接时，默认行为是跳转到另一个页面。如果我们在链接上使用 .prevent 修饰符，则点击该链接时不会发生跳转。
2. .stop：阻止事件冒泡。例如，当在一个元素上点击时，该事件会向上冒泡到父元素。如果我们在元素上使用 .stop 修饰符，则事件不会冒泡到父元素。
3. .capture：在捕获阶段而不是冒泡阶段触发事件。例如，当在一个元素上点击时，该事件会首先在捕获阶段触发，然后才在冒泡阶段触发。如果我们在元素上使用 .capture 修饰符，则事件将在捕获阶段触发，而不会在冒泡阶段触发。
4. .self：只触发元素自身的事件，而不触发父元素的事件。例如，当在一个元素上点击时，该事件会向上冒泡到父元素。如果我们在元素上使用 .self 修饰符，则事件只会在元素自身触发，而不会冒泡到父元素。
5. .once：只触发一次事件。例如，当在一个元素上点击时，该事件会多次触发。如果我们在元素上使用 .once 修饰符，则事件只会在第一次点击时触发。
6. .passive：告诉浏览器不要阻止默认事件，如页面滚动。例如，当在一个元素上滚动时，该事件会触发。如果我们在元素上使用 .passive 修饰符，则事件会在触发时不会阻止默认事件，如页面滚动。

修饰符的用法

要使用修饰符，只需在元素的事件处理程序中将修饰符添加到事件名称的后面即可。例如，要阻止一个链接的默认行为，可以使用以下代码：

<a href="#" @click.prevent>链接</a>

要阻止一个事件冒泡，可以使用以下代码：

<div @click.stop>元素</div>

要使一个事件只在捕获阶段触发，可以使用以下代码：

<div @click.capture>元素</div>

要使一个事件只触发元素自身的事件，可以使用以下代码：

<div @click.self>元素</div>

要使一个事件只触发一次，可以使用以下代码：

<div @click.once>元素</div>

要告诉浏览器不要阻止默认事件，如页面滚动，可以使用以下代码：

<div @scroll.passive>元素</div>

结语

修饰符是 Vue 中的一个重要概念，它可以让我们以更简单的方式来修饰元素的默认行为。通过使用修饰符，我们可以提高开发效率、使代码更简洁、更易读、提高代码的可维护性。希望大家能够熟练掌握修饰符的使用，以便在开发 Vue 应用时能够更加得心应手。

参考文献

[Vue.js 修饰符](https://vuejs.org/v2/guide/event-modifiers.html)

[Vue.js 修饰符示例](https://vuejs.org/v2/examples/event-modifiers.html)