Vue常用修饰符

.lazy（减少触发次数）

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，相当于在onchange事件触发更新。

<div>
   <input type="text" v-model.lazy="value">
   <p>{{value}}</p>
</div>

.trim（过滤首尾的空格）

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

.number（将值转成数字）

作用是将值转成数字，但是先输入字符串和先输入数字，是两种情况，1是先输入数字的话，只取前面数字部分，2是先输入字母的话，number修饰符无效。

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

事件修饰符

.stop（阻止点击事件冒泡）

阻止点击事件冒泡。等同于JavaScript中的event.stopPropagation()

.prevent （阻止事件的默认行为）

prevent等同于JavaScript的event.preventDefault()，用于取消默认事件。

.self（ 点击事件绑定的本身才会触发事件）

只会触发自己范围内的事件，不包含子元素，也不会触发父级元素的点击事件。

.once （只触发一次）

<button @click.once="handle()">x</button>

只执行一次，如果我们在@click事件上添加.once修饰符，只要点击按钮只会执行一次

.native （转化为原生事件）

关于 .native 官网解释：

你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。

在我们vue中写组件的绑定事件的时候，可能有时候会失效，可以尝试下这个，把绑定的事件转换为原生事件。

暂时常用的这些，还有一些系统修饰键（.ctrl .alt .meta .shift 等），以及键值鼠标修改符（left，right，middle，keyCode等）