＜ 每日小技巧：Vue常用修饰符 ＞

---

💬 前言

在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。
-->

💬 小温有话说

今天的内容就大致到这里结束了！ 卷王们，下期见 ，觉得文章对您有所帮助的，请不要吝啬你们的三连呀！小温在这祝大家喜提高薪,事事顺心 😘

---

参考文献

• 《vue修饰符–可能是东半球最详细的文档（滑稽）》
• 《Vue 2.0 修饰符》
• 《Vue 3 官方文档 – 关于Vue 2 -> 3 移除内容 及 迁移策略 》

往期内容 💨

🔥 ＜Javascript技巧： Javascript 是个难泡的妞，学点技巧征服 “ 她 ” ＞

🔥 ＜ 在 elementUi 中 设置 Table表格 多选勾选规则限制 ＞

🔥 ＜ 谈谈对 SPA（单页面应用）的理解 ＞

🔥 ＜ 简述 “ 尤大 ” 的 Vue3 相比 Vue 2 的区别 ＞