如果你是一个 Vue 的开发者，或者正在学习 Vue，那你一定对修饰符不陌生。其实，我在面试的时候，碰到过不少面试官提到过 Vue 修饰符，特别是问到：Vue 常用的修饰符有哪些？它们有什么应用场景？
嘿，别担心！今天我就带大家捋一捋常见的 Vue 修饰符，顺便分享一下这些修饰符在日常开发中如何派上用场。你们准备好了吗？
1. 表单修饰符
表单修饰符，顾名思义，主要是在处理表单输入时用到的。我们平时用得最多的就是 v-model，它可以让我们简化双向绑定的操作。不过，你知道吗？Vue 提供了一些修饰符，可以让 v-model 更加灵活地处理各种表单输入场景。
(1) .lazy
有些时候，我们并不需要在每次输入的时候就同步数据，像是在一些大表单中，如果每次输入都触发更新，可能会影响性能。.lazy 修饰符就是为了解决这个问题。它会等到用户完成输入并且离开输入框时，才把值同步到数据上。
例如：
<input type="text" v-model.lazy="value">
<p>{{ value }}</p>
这样，只有在用户结束输入并离开文本框后，value 的值才会更新。
(2) .trim
你有没有过这种经历，用户输入的内容有很多空格，虽然中间的空格没什么问题，但是两端的空格总是让人头疼。.trim 修饰符可以自动去除字符串两端的空格，简直是开发时的“小救星”！
<input type="text" v-model.trim="value">
(3) .number
你还在担心用户输入的值是字符串而不是数字吗？v-model.number 就是为了解决这个问题，它会自动把输入的值转换为数字。如果无法转换成数字，原值会保持不变。
<input v-model.number="age" type="number">
2. 事件修饰符
我们都知道，在 Vue 中，事件处理是非常常见的任务，尤其是在交互式页面中。事件修饰符可以帮助我们省去一些繁琐的操作。常见的事件修饰符有：
(1) .stop
这是不是常见的一个问题？我们想要阻止事件的冒泡。比如点击按钮时，父元素的点击事件也会被触发。.stop 修饰符就能帮我们阻止事件冒泡，等于调用了 event.stopPropagation()。
<div @click="shout(2)">
<button @click.stop="shout(1)">Click Me</button>
</div>
点击按钮时，只会输出 1，不会触发父元素的点击事件。
(2) .prevent
如果你想阻止事件的默认行为，比如在表单提交时不刷新页面，可以使用 .prevent。它等价于 event.preventDefault()。
<form v-on:submit.prevent="onSubmit"></form>
(3) .self
这个修饰符会让事件只在触发它的元素本身上执行。比如我们有一个嵌套的结构，如果只想处理当前元素的点击事件，而不想影响父元素，可以使用 .self。
<div v-on:click.self="doThat">Click Me</div>
(4) .once
.once 是用来限制事件只触发一次的，第二次点击就没反应了。非常适合用于需要单次响应的事件。
<button @click.once="shout(1)">Click Once</button>
(5) .capture
当事件从捕获阶段开始触发时，.capture 就会派上用场。你可以让事件从父元素开始往下传递，而不是从触发的元素开始往上传递。
<div @click.capture="shout(1)">obj1</div>
<div @click.capture="shout(2)">obj2</div>
<div @click="shout(3)">obj3</div>
3. 鼠标按钮修饰符
鼠标修饰符通常用来区分左键、右键和中键的点击事件，适用于需要根据点击的按钮做不同处理的场景。
<button @click.left="shout(1)">Left Click</button>
<button @click.right="shout(2)">Right Click</button>
<button @click.middle="shout(3)">Middle Click</button>
4. 键盘修饰符
在处理键盘事件时，我们有时需要针对特定的按键做处理。Vue 提供了 keyCode 的别名来简化这个过程，常见的如 enter、esc、space 等。
<input type="text" @keyup.enter="submitForm">
这种方式简化了我们对键盘按键的处理，无需关心 keyCode 的具体值。
5. v-bind 修饰符
最后，我们来聊聊 v-bind 修饰符。它主要用于绑定属性时，可以让我们在一些特殊场景下进行优化或绑定。
(1) .sync
这个修饰符可以实现父子组件之间的双向绑定。它比传统的事件处理更加简洁。
<comp :myMessage.sync="message"></comp>
这等价于：
<comp :myMessage="message" @update:myMessage="func"></comp>
(2) .prop
有时我们需要在组件中传递属性，并且不想暴露这些属性到 HTML 标签中。.prop 就能实现这个需求。
<input :index.prop="index">
最后，Vue 的修饰符是非常强大的工具，能让我们的代码更加简洁、易维护。每次我在项目中使用这些修饰符，都会感叹 Vue 真是让开发变得如此轻松！通过合理使用修饰符，我们能避免许多重复且繁琐的代码，专注于更复杂的业务逻辑。
希望这篇文章能帮你更好地理解 Vue 修饰符的应用场景，也欢迎大家在评论区分享你在开发过程中是如何使用这些修饰符的！
目前，对编程、职场感兴趣的同学，大家可以联系我微信：golang404，拉你进入“程序员交流群”。
虎哥私藏精品 热门推荐 虎哥作为一名老码农，整理了全网最全《前端资料合集》。
