Vue 中常用的修饰符
一、修饰符的作用
在认识修饰符之前要先了解一下 为什么Vue中会有修饰符的存在呢？ 其实在事件处理程序中，我们调用event.preventDefault() 或者 event.stopPropagation() 是开发中非常常见的需求，但是为了减少Dom操作，Vue 中为了就创构建了修饰符的存在，也方便程序员编写，那么常用的修饰符有哪些呢？接下来给大家一一列举
二、常用的修饰符
1.表单修饰符
.lazy
在我们填完信息，光标离开标签的时候，才会将值赋予给
value，也就是在change事件之后再进行信息同步
<input type="text" v-model.lazy="value">
<p>{{value}}</p> //注意绑定表单事件喔
.trim
清除用户输入的空格字符，但是内容中间的空格不会消除
<input type="text" v-model.trim="value"> //通常在用户名表单中用到
.number
限制输入数字或者输入的东西转换成数字 (如果你先输入数字，那它就会限制你输入的只能是数字。如果你先输入字符串，那它就相当于没有加 .number)
<input type="text" v-model.number="value">
2.事件修饰符
.stop
一键阻止事件冒泡，相当于调用了 event.stopPropagation() 方法
<button @click.stop="ok">ok</button></div>
.prevent
用于阻止事件的默认行为，例如当点击提交按钮时阻止对表单的提交。相当于调用了 event.preventDefault() 方法
<button @click.prevent="ok">ok</button></div>
.self
当事件发生在该元素本身而不是子元素的时候会触发 .once 这个修饰符的用法也是和名字一样简单粗暴，只能用一次，绑定了事件以后只能触发一次，第二次就不会触发。
<button @click.once="del">ok</button>
.capture
事件侦听，事件发生的时候会调用 .passive 当我们在监听元素滚动事件的时候，会一直触发 onscroll 事件，在 PC 端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给 onscroll 事件整了一个 .lazy 修饰符
.native
该修饰符的作用就是把一个 Vue 组件转化为一个普通的 HTML 标签
<el-son-item @click.native="add"></el-son-item> //可以在子组件上直接注册事件
3.鼠标按键修饰符
Click 事件，我们一般是会用左键触发，有时候我们需要更改右键菜单啥的，就需要用到右键点击或者中间键点击，这个时候就要用到鼠标按钮修饰符
- .left 左键点击
- .right 右键点击
- .middle 中键点击
4.键值修饰符
在我们的项目经常需要监听一些键盘事件来触发程序的执行，而Vue中允许在监听的时候添加关键修饰符：常用的键值修饰符:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
<input @click.enter="add"/>
4.v-bind修饰符
.async
和v-band都是语法糖，都可以实现父与子组件中的通信 详细可了解我另外一篇文章： .async 和 v-model的区别
