这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战
Vue 提供了一些修饰符, 使得编码的时候更方便, 在此整理一些项目中常用的使用方法
.trim
去掉 value 的首尾空格, 我在项目中多用于密码输入框, 防止用户复制密码时多复制了空格, 导致的密码错误
<div>
<input type="text" v-model.trim="value" />
</div>
需要注意的是，它只能过滤首尾的空格，中间的空格不会过滤掉
.lazy
输入值时 value 不会实时改变, 当光标离开输入框时, 才更新 value
<div>
<input type="text" v-model.lazy="value" />
<p>{{value}}</p>
</div>
.number
将 value 转化为数字
<div>
<input type="text" v-model.number="value" />
</div>
如果用户是先输入数字，那它就会限制你输入的内容, 只保留数字部分
如果用户先输入字符串，.number相当于没有效果, 还需要搭配其他验证来限制
.stop
由于事件冒泡的机制，给元素绑定点击事件的时候，会触发父级的点击事件。
<div @click="eventFn('b')">
<button @click="eventFn('a')">test</button>
</div>
// script
eventFn(e){
console.log(e)
}
// a
// b
使用 .stop 阻止事件冒泡, 相当于调用了event.stopPropagation()方法
<div @click="eventFn('b')">
<button @click.stop="eventFn('a')">test</button>
</div>
// a
.capture
事件默认是从触发目标向上冒泡，这个修饰符的作用则相反，事件开始自顶向下捕获
<div @click.capture="eventFn('a')">
<div @click.capture="eventFn('b')">
<div @click="eventFn('c')">
test
</div>
</div>
</div>
// a b c
.self
只有事件绑定的元素本身，才会触发事件
<div @click.self="eventFn('a')">
<button @click="eventFn('b')">test</button>
</div>
// b
点击 button 时不会触发父元素的点击事件，只有当点击父元素本身时才会触发
.once
.once 的作用是，事件只执行一次，一次后再也不会触发
<div>
<button @click.once="eventFn">test</button>
</div>
.prevent
用于阻止事件的默认行为
例如，当点击提交按钮时阻止对表单的提交。相当于调用了event.preventDefault()方法。
<div>
<form v-on:submit.prevent="onSubmit"></form>
</div>
.native
在自定义组件上， .native 用来修饰这个click事件，保证事件能执行
<My-component @click.native="eventFn"></My-component>
.left ； .right ；.middle
这三个修饰符是鼠标的三个按键触发的事件
.left 左键点击 ; .right 右键点击 ; .middle 中键点击
<div>
<button @click.right="eventFn">test</button>
</div>
.sync
用于父子组件传值，子组件更新 prop 的值，可以使用这个修饰符简便完成
//父组件
<comp :isShow.sync="isShow"></comp>
//子组件
this.$emit('update:isShow', params)
使用 .sync 的时候，子组件传递的事件名必须为 update:value，其中 value 必须与子组件中 props 中声明的名称完全一致
