💬 前言
在Vue开发中，我们时常会发现 Vue指令有些数据被拿到之后，需要进行处理才能直接使用， 又或者是有些事件、属性需要二次处理，才能直接使用。
但是有没有一种可以直接配合（修饰）Vue指令操作的功能呢？ 答案是有的，就是Vue 修饰符，能够用来修饰 Vue表单选项、事件、鼠标按键 等操作。
接下来，小温将配合具体案例对 Vue 修饰符 进行讲解，内容如下！
👉 一、什么是修饰符？
在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号。
在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，能够有效的提高代码质量，减少代码庸余。
⌨️ 修饰符种类：
| 类型 | 描述 | 举例 |
|---|---|---|
| 表单修饰符 | 用于修饰表单选项绑定值指令：v-model |
lazy、trim、number |
| 事件修饰符 | 修饰Vue中 v-on ( @ ) 绑定的事件 |
stop、prevent、self、native ... |
| 鼠标按键修饰符 | 修饰 v-on:click / v-on:dbclick 点击事件，添加 鼠标 左键、中键、右键限制 |
left、right、middle |
| 键盘修饰符 | 用于修饰键盘事件（onkeyup - 弹起，onkeydown - 按下） |
@keyup.键值、@keydown.键值 |
| v-bind修饰符 | v-bind 修饰符主要是对 属性 / 自定义属性 进行操作修饰 | sync、prop、camel |
👉 二、修饰符作用 及 语法
⌨️ 表单修饰符
在我们填写表单的时候用得最多的是 input标签 ，指令用得最多的是 v-model。表单修饰符的作用： 对表单数据进行修饰限定。
关于表单的修饰符有如下：
- lazy
- trim
- number
① lazy
在我们填完信息，光标离开标签的时候（ 失去焦点 ），才会将值赋予给value，也就是在change事件之后才数据同步。
<el-input v-model.lazy="value" />
<!-- 数据将在input 失去焦点时, 同步数据 -->
<p>{
{value}}</p>
② trim
字面意思, 其功能与 js 中 trim() 一致, 用于过滤用户输入的首尾空格字符，而中间的空格不会过滤。
<el-input v-model.trim="value" />
<p> {
{ value }} </p>
③ number
自动将用户的输入值转为数值类型，但如果这个值无法被 parseFloat 解析，则会返回原来的值。（即字符串中的首个字符为数字时即可返回数字，否则返回原值）
用于某些地方需要指定变量值为数值时使用，防止出现 字符串数字， 如：‘123’ 和 123 的区别，‘123’是无法除非 number类型自带的函数的。
<el-input v-model.number="age" />
<!-- 如果 age 为 123Str， age显示为 123； 如果 age 为 str123，则返回原值 -->
<p> {
{ age }} </p>
⌨️ 事件修饰符 （重点）
事件修饰符是对事件捕获 以及 目标的其他操作 进行限制或修饰。
事件修饰符种类如下：
- stop
- prevent
- self
- once
- capture
- passive
- native （
Vue3 中 已移除该修饰符）
① stop
阻止了事件冒泡，相当于调用了 event.stopPropagation 方法
<div @click="shout(2)">
<button @click.stop="shout(1)">ok</button>
</div>
<!--
只输出1，阻止了 内部 button元素的点击事件冒泡，类似阻断了 button 被点击的这个信息传输到div元素。
此时，div元素是不知道 内部的button被点击了的。
-->
② prevent
阻止了事件的默认行为，相当于调用了event.preventDefault方法
<form v-on:submit.prevent="onSubmit"></form>
<!-- 阻止了 form 表单本身的 submit 事件将提交表单的逻辑，转而触发 onSubmit 方法 -->
③ self
只当在 event.target 是当前元素自身时触发处理函数
<div v-on:click.self="doThat">...</div>
<!-- 只有点击 div 自身时，才会触发 处理函数 doThat()，点击其内部的子元素则不会触发。
-->
使用案例： 实现弹窗仅点击边框，才可拖动，可以用在设置一个 DIV 弹窗，只有按住 DIV 本身才能拖动（主要是 操作DOM元素，也需要获取DIV元素本身。弹窗内部有其他元素，设置内边距，只有点击边边的边距才能拖动。
注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。例如，用
v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击
④ once
限定绑定的事件仅触发一次，阻止第二次及后续的触发（ 重新渲染重置 ）。
<button @click.once="shout(1)">ok</button>
⑤ capture
使事件触发，从包含这个元素的顶层开始往下触发（包括子元素中的事件）。
<div @click.capture="show(1)">
DIV_1
<div @click.capture="show(2)">
DIV_2
<!-- 下面两个DIV未设置 capture，按照事件原本触发顺序触发 -- 事件冒泡 -->
<div @click="show(3)">
DIV_3
<div @click="show(4)">
DIV_4
</div>
</div>
</div>
</div>
<!--
输出结构: 1 2 4 3，如果未设置 capture 的话， 则是按照 `事件冒泡` 触发事件，自下而上。
从 最里面的两个未设置 capture 的 div中可见。
-->
⑥ passive
在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会使网页变卡，持续触发onscroll事件，导致网页内存被持续占用，降低网页性能。因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符。
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
💡 Tips：不要把
.passive和.prevent一起使用, 因为.prevent将会被忽略，同时浏览器可能会向你展示一个警告。passive会告诉浏览器你不想阻止事件的默认行为
⑦ native
组件上使用 v-on 正常情况，是只能监听自定义事件，native让组件变成像html内置标签那样，可以监听根元素的原生事件。
<my-component @click.native="doSomething"></my-component>
<!--
正常情况下，在组件上监听事件，它会把click当成一个自定义事件，实际上，我们是想要监听 组件的原生事件 `click`。为此需要使用native -->
使用.native修饰符来操作普通HTML标签是会令事件失效的。
在最新的
Vue3中，移除了.native修饰符，取而代之的emits 选项。emits 选项，用于区分 原生事件和自定义事件，当在组件中，定义了 emits，即使事件名和原生事件一致，也将会被识别为自定义事件，覆盖原生事件。
具体规则 点击跳转 Vue 3 官方文档。
⌨️ 鼠标按键修饰符
鼠标按钮修饰符 用于限制事件触发方式， 触发方式分为三种：左键（left）、右键（right）、中键点击（middle）。
<button @click.left="show(1)">鼠标左键展示</button>
<button @click.right="show(1)">鼠标右键展示</button>
<button @click.middle="show(1)">鼠标中键展示</button>
⌨️ 键盘修饰符
键盘修饰符是用来修饰键盘事件（onkeyup -- 弹起，onkeydown -- 按下）的，有如下：
keyCode 存在很多，但 Vue为我们提供了别名，分为以下两种：
- 普通键（
enter、tab、delete、space、esc、up...） - 系统修饰键（
ctrl、alt、meta、shift...）
> 语法
// 只有按键为keyCode的时候才触发
<input type="text" @keyup|keydown[keyCode]="shout()">
💡 注意：Vue 提供了 keyCodes，可以自定义 键盘按键 别名，具体需要根据 键盘按键值（百度可查）来设置。语法如下：
Vue.config.keyCodes = {
f1: 112
};
// 给全局怎加112 键位码事件使用时候变成`v-on:keyup.f1`
<!-- 键码版本 -->
<input v-on:keyup.112="showHelpText" />
<!-- 自定义别名版本 -->
<input v-on:keyup.f1="showHelpText" />
❗ 提示：
Vue 2.x中，可用以上内容，但在最新的Vue 3.x中，keyboardEvent.keyCode被废除，即使 Vue 3 任然支持使用keyboardEvent。因此，根据 Vue 3 官网文档，现在建议对任何要用作修饰符的键使用kebab-cased (短横线)名称。
👉 具体说明 点击跳转 查看
Vue 3 中 使用语法
<!-- Vue 3 在 v-on 上使用按键修饰符 -->
<input v-on:keyup.page-down="nextPage">
<!-- 同时匹配 q 和 Q -->
<input v-on:keypress.q="quit">
正如 Vue 3 官方文档中所说，这意味着 config.keyCodes 现在也已弃用，不再受支持。
⌨️ v-bind修饰符
v-bind修饰符 是对 属性 / 自定义属性 进行操作修饰，用来分别有如下：
- sync
- prop
- camel
① sync
sync修饰符是一个语法糖，类似v-model性质，能对组件属性值（props）进行一个双向绑定。
因为 Vue 为了避免父子组件间数据污染，提倡的是单向数据流动，因此不能直接在子组件里面修改父组件传过来的数据，一般$emit 触发父组件 对应的监听事件，进行数据的双向绑定。
//父组件
<comp :myMessage.sync="bar"></comp>
<!-- 子组件 -->
<script>
this.$emit('update:myMessage',params);
</script>
<!-- 以上这种方法等价于以下的简写-->
<!-- 父组件 -->
<comp :myMessage="bar" @update:myMessage="func"></comp>
<script>
// 父组件
func(e){
this.bar = e;
}
// 子组件
this.$emit('update:myMessage',params);
</script>
<!--
第一种方法，明显更加简洁，减少了代码的庸余。
由上述代码可见，sync修饰符其实是做了两步动作：
1、声明传的数据myMessage
2、声明@update:myMessage事件
将两步内容合并，减少代码累赘。
-->
使用sync需要注意以下两点：
使用
sync的时候，子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致。注意带有
.sync修饰符的 v-bind 不能和表达式一起使用将
v-bind.sync用在一个字面量的对象上，例如v-bind.sync=”{ title: doc.title }”，是无法正常工作的。
⚠️ 提示： 不过需要注意一点的就是，Vue 提倡数据
② props
设置自定义标签属性，避免暴露数据，防止污染HTML结构。
<input id="input" type="foo" value="11" :data="inputData"></input>
<!--
渲染后的标签结构:
<input id="input" type="foo" value="11" data="inputData 的值"></input>
input.data === undefined; 和 input本身自带的data属性混淆了,且暴露了 data数据
input.attributes.data === this.inputData
-->
<input id="input" type="foo" value="11" :data.prop="inputData"></input>
<!--
渲染后的标签结构:
<input id="input" type="foo" value="11"></input>
input.data === this.inputData
input.attributes.data === undefined
-->
③ camel
将命名变为驼峰命名法，如将 view-Box属性名转换为 viewBox
<div :msg-text="msgText">未设置 camel</div>
<!-- 编译后为 <div :msg-text="msgText">未设置 camel</div> -->
<div :msg-text.camel="msgText">设置camel修饰符</div>
<!--
编译后为 <div :msgText.camel="msgText">设置camel修饰符</div>
由于camel将msg-text转化为msgText。
-->
💬 小温有话说
今天的内容就大致到这里结束了！ 卷王们，下期见 ，觉得文章对您有所帮助的，请不要吝啬你们的三连呀！小温在这祝大家喜提高薪,事事顺心 😘
