Vue的修饰符

一、v-model修饰符

1. lazy :输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开后input框更新数据：

<input v-model.lazy="model">

2. trim: 过滤输入的内容中的首尾空格

<input v-model.trim="model>

3. number: 输入的内容中,只保留数字部分的数据

<input v-model.trim="model>

二、click事件修饰符

1. stop: 阻止事件冒泡,相当于调用了event.stopPropagation()方法

<button @click.stop="stop">海绵宝宝</button>

2. prevent: 阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a标签的跳转就是默认事件：

<a @click.prevent="prevent">海绵宝宝</a>

3. self: 只有点击事件绑定的元素本身才会触发事件,比如说:div里面有个按钮,div和按钮上都绑定了事件,我们点击按钮,div上面的事件也会被触发,按钮上面加上.self就不会触发到div上面的事件

<div @click="click">
<button @click.self="click">按钮</button>
</div>

4. once: 事件只能调用一次,无论点击多次之后都不会触发事件

<button @click.once="button">按钮</button>

5.capture:使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

<button @click.capture="button">按钮</button>

6.passive:告诉浏览器你不想阻止事件的默认行为(个人感觉:有的标签本来就会自动使用默认行为,为什么还要一个passIve修饰符呢)

<a @click.passive="button">按钮</a>

//修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

三.键盘修饰符

1.通过keyup.keyCode来监听鼠标事件

//通过可以Code的方法监听
<input type='text'  @keyup.111='onSubmit'>
//通过鼠标按键名称监听
<input type='text' @keyup.enter='onSubmit'>

所有可用的按键名称
.enter 
.tab 
.delete(捕获'删除'和'退格'键)
.esc
.up
.left
.right
.down
.space

2.自定义按键修饰符

通过config.keyCodes对象来自定义按键修饰符别名，如：
Vue.config.keyCodes.f1 = 112