在vue中，主要有5中修饰符

一：表单修饰符

1：lazy=>光标离开标签才会将值赋予给value，在change事件之后再进行信息同步

2：trim=>自动过滤用户输入的首空格字符，而中间的空格不会过滤

3：number=>自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值

<input type="text" v-model.lazy="value"><input type="text" v-model.trim="value"><input v-model.number="age" type="number">

二：事件修饰符

1：stop=> 阻止了事件冒泡，event.stopPropagation()

2：prevent=> 阻止了事件的默认行为，event.preventDefault()

3：capture=> 使用事件捕获模式，使事件触发从包含这个元素的顶层开始往下触发

4：self=> 只当在 event.target 是当前元素自身时触发处理函数

5：once=> 绑定了事件以后只能触发一次，第二次就不会触发

6：passive=> 告诉浏览器你不想阻止事件的默认行为

7：native=> 让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件

 <button @click.stop="shout(1)">ok</button><form v-on:submit.prevent="onSubmit"></form><div @click.capture="shout(1)"></div><div v-on:click.self="doThat">...</div><button @click.once="shout(1)">ok</button><div v-on:scroll.passive="onScroll">...</div><my-component v-on:click.native="doSomething"></my-component>

三：鼠标按键修饰符

1：left=> 左键点击

2：right=> 右键点击

3：middle =>中键点击

<button @click.left="shout(1)">ok</button><button @click.right="shout(1)">ok</button><button @click.middle="shout(1)">ok</button>

四：键值修饰符

1：普通键（enter、tab、delete、space、esc、up、down、left、right...）

2：系统修饰键（ctrl、alt、meta、shift...）

3：自定义键盘码别名

<input type="text" @keyup.keyCode="shout()">Vue.config.keyCodes.f2 = 113

五：v-bind修饰符

async 能对props进行一个双向绑定，子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致，带有 .sync 修饰符的 v-bind 不能和表达式一起使用

<comp :myMessage.sync="bar"></comp>