前言
大家是否在平时写代码的时候遇到过这样的代码？
小凌特此去研究了一下，其实这是Vue的修饰符。同时它也是Vue的重要组成成分之一，利用好修饰符可以大大地提高开发效率的同时，也可以减少很多不必要的代码。接下来给大家整理了一下平时开发常用到的14种Vue修饰符。
1.lazy
顾名思义，lazy修饰符作用是，改变输入框的值时绑定的lazyValue不会改变，当光标离开输入框时，v-model绑定的值lazyValue才会改变。
<!--html-->
<input type="text" v-model.lazy="lazyValue">
<div>{{lazyValue}}</div>
<!--data-->
data() {
return {
lazyValue:"100"
}
}
复制代码2.tirm
trim修饰符的作用是把v-model绑定的值的首尾空格给去掉。在实际开发中我们一般用于搜索框的内容修饰，过滤掉用户多输入前后空格导致内容查不出来的情况。
<input type="text" v-model.trim="trimValue">
<div>{{trimValue}}</div>
data() {
return {
trimValue:"100"
}
},
复制代码3.number
number修饰符的作用是将值转成数字，但是先输入字符串和先输入数字，是两种情况。
先输入数字的话，只取前面数字部分
先输入字母的话，
number修饰符无效
当然大家也可以通过type='number'来实现这个功能。
当然这会遇到一个问题，比如我们平时需要输入控制两位小数的价格时，就会有问题(价格不允许是负数且只需要保留两位小数)。小凌平时会用以下方法来实现:
<!--允许输入小数(两位小数)-->
<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" >
复制代码4.stop
stop修饰符的作用是阻止事件冒泡。
<div class="out-box" @click="clickEvent(2)" >
触发输出2
<div class="in-box" @click.stop="clickEvent(1)">触发输出1</div>
</div>
methods: {
// 点击事件
clickEvent(num){
console.log('出发输出:'+num);
}
},
复制代码5.capture
事件冒泡默认是由里往外冒泡，capture修饰符的作用是反过来，由外往内捕获。
<div class="out-box" @click.capture="clickEvent(2)" >
触发输出2
<div class="in-box" @click="clickEvent(1)">触发输出1</div>
</div>
复制代码可以从结果中看到，点击内部div事件冒泡进行了反转。先输出了2，再输出1。
6.self
self修饰符作用是，只有点击事件绑定的本身才会触发事件。
<div class="out-box" @click.self="clickEvent(2)" >
触发输出2
<div class="in-box" @click="clickEvent(1)">触发输出1</div>
</div>
复制代码可以看到只触发了2 没有触发1.
7.once
once修饰符的作用是，事件只执行一次。
<div class="out-box" @click="clickEvent(2)" >
触发输出2
<div class="in-box" @click.once="clickEvent(1)">触发输出1</div>
</div>
复制代码从演示中我们可以看到，绑定once的div在触发一次事件后就不会再触发了（但是还是会事件冒泡）。
8.prevent
prevent修饰符的作用是阻止默认事件（例如a标签的跳转）
<a href="http://www.w3school.com.cn" @click.prevent="clickEvent(1)">点击A标签</a>
复制代码可以看到，点击了a标签，也没有触发原生的跳转事件。
9.native
native修饰符是加在自定义组件的事件上，保证事件能执行。
<!--子组件要是没有emit click事件 就执行不了-->
<Child @click="clickEvent(1)"></Child>
<!--可以执行-->
<Child @click.native="clickEvent(1)"></Child>
复制代码可以看到未使用native且自生没有emit click事件的组件并没有触发事件。
10.left，.right，.middle
.left，.right，.middle这三个修饰符是鼠标的左中右按键触发的事件.
<div class="out-box" @click.left="clickEvent('left')" @click.middle="clickEvent('middle')" @click.right="clickEvent('right')">鼠标各键触发</div>
复制代码11.sync
当父组件传值进子组件，子组件想要改变这个值时(一般直接修改会报错)，可以这么做。
<Child :childValue="trimValue" @changeChildValue="value=>trimValue = value"></Child>
<!--child-->
methods: {
changeChildValue(){
this.$emit('update:childValue', '子修改过的值')
}
},
复制代码这种情况比较常见切写法比较复杂。于是我们引出 .sync。
<!--父组件-->
<Child :childValue.sync="trimValue" ></Child>
<!--子组件-->
methods: {
changeChildValue(){
this.$emit('update:childValue', '子修改过的值')
}
},
复制代码12.keyCode
.keyCode修饰主要用于使用按键触发事件。再项目中用的最多的就是回车触发搜索功能。
<p>.keyCode</p>
<input type="text" @keyup[keyCode]="clickEvent('keyCode')">
复制代码Vue提供的keyCode：
//普通键
.enter
.tab
.delete //(捕获“删除”和“退格”键)
.space
.esc
.up
.down
.left
.right
//系统修饰键
.ctrl
.alt
.meta
.shift
复制代码也可以通过键码去触发，具体键码：
可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
复制代码13.passive
.passive修饰符主要用于给onscroll事件加一个类似.lazy的修饰符。 在pc端是没啥问题的，但是在移动端，会让我们的网页变卡。因此我们要这么使用。
<div @scroll.passive="onScroll">...</div>
复制代码14.camel
由于HTML特性是不区分大小写的,.camel 修饰符允许在使用 DOM 模板时将 v-bind 属性名称驼峰化，例如 SVG 的 viewBox 属性：实际会被渲染为
<svg viewbox="viewbox"></svg>
复制代码这将导致渲染失败，因为 SVG 标签只认 viewBox，却不知道 viewbox 是什么。
<!--加了canmel viewBox才会被识别成viewBox-->
<svg :viewBox.camel="viewBox"></svg>
复制代码问题
Q:能不能两个修饰符，比如click.self.stop?
A:可以
<div class="out-box" @click.stop.prevent="clickEvent(2)" ></div>
复制代码就可以触发 .stop、.prevent 两个修饰符。
结语
本文参考三心哥文章：
并加上了一些自己的理解和实际操作。