VUE 修饰符
一、事件修饰符
1、@click.stop和原生js的event.stopPropagation()一样，都是阻止冒泡的，当一个元素有且只有它一个的时候看不出效果，当该元素存在父元素时就能看出来了，如下：
// 当有且只有一个元素时 点击打印只会出现一行结果（用原生写的）
/**
* 当出现以下情况时会多次打印
* 当我点击下面绑定child的元素时会同时打印 child parent
* 如果我这样绑定：@click.stop="child"，就只会打印child
*/
2、@click.prevent和元素js的event.preventDefault()一样，阻止默认行为的，就比如我给
a标签一个href属性值，当我点击a时会发生页面跳转，那么此时我给a标签添加一个点击事件，并且阻止了默认行为之后，再次点击就不会跳转了，除非在事件里面添加了跳转事件。
3、@click.self，当元素的event.target是本身时才触发事件。
4、@click.once，当第一次点击时会触发对应的函数，再次点击则不会触发，once一次性的一次，只触发一次。
5、@click.capture，让事件进入捕获阶段。
6、@click.passive，立即执行，特别是在移动端，能提升性能
7、@click.native，在vue中很多时候我们都会用到自定义组件，或者一些ui框架提供的组件，有的时候直接给这些组件绑定原生事件的时候，无效果，需要添加.native修饰符，就能解决了
8、@click.left，@click.middle，@click.right分别对应鼠标的左、中、右键。
（以上是举例一直用的click单击事件，别不是说其他的鼠标事件就不能用了啊，其实都能用）
二、按键修饰符
1、@keyup.enter，指定按下回车键 时触发。
2、@keyup.tab，按下tab键时触发。
3、@keyup.delete，按下删除键或者退格键时触发。
4、@keyup.esc，按下esc键时触发。
5、@keyup.space，按下空格键时触发。
6、@keyup.up，@keyup.down，@keyup.left，@keyup.right，分别对应的是按下上、下、左、右键时触发。
7、在全局自定义按键修饰符别名
Vue.config.keyCodes.f2 = 13; (回车键)
@keyup.f2，按下回车时触发
8、@keyup.ctrl，按下ctrl键时触发。
9、@keyup.alt，按下alt键时触发。
10、@keyup.shift，按下shift键时触发。
11、@keyup.meta，按下系统键时触发，window键盘，是在fn键和alt中间那个键。
12、以上都是按下单个键，在按下指定按键的前一时间按下其他按键，并且不松开，在按下指定按键时也会触发，想要避免这样的情况发生，可以像这样：@keyup.enter.exact，这样只会在有且只有按下enter键时触发，这样：@keyup.ctrl.shift.exact，必须同时按下ctrl和shift键时发触发，并且不能按下其他键。
三、表单输入修饰符（搭配v-model使用）
都说到v-model了，简单说一下v-model 的原理吧，
正常绑定：
原理：
1、，只有当输入框状态改变时才会去改变formInput数据的值，本来v-model是监听input事件的，加上lazy修饰符之后只会在发生change时间之后才触发。
2、，自定将输入的内容转为数值类型，再赋值给formInput。
3、，有时候用户在输入的时候，喜欢在两段打空格，在前面还好说，如果是在最后呢，肉眼很难分别，所以可以加一个trim修饰符来自动去除输入字符串两段的空格。
四、自定义事件修饰符
1、.sync修饰符说不明白，直接代码：
// 这是父组件 parent.vue
// 父组件使用children子组件，并且传给子组件了一个num数据