事件修饰符

1. 修饰符是什么

修饰符是用于限定类型以及类型成员声明的一种符号，可以处理许多DOM事件

vue中修饰符分为5种：

表单修饰符

事件修饰符

鼠标按键修饰符

鼠标按键修饰符

键值修饰符

v-bind修饰符

2.修饰符的作用

我们用的比较频繁的应该是input标签，指令应该是v-model来进行双向绑定

lazy

在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步

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

trim

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

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

number

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

<input v-model.number="age" type="number">

prevent

阻止了事件的默认行为，相当于调用了event.preventDefault方法

<form v-on:submit.prevent="onSubmit"></form>

async

能对props进行一个双向绑定

//父组件
<comp :myMessage.sync="bar"></comp> 
//子组件
this.$emit('update:myMessage',params);

• 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用

stop

 阻止了事件冒泡，相当于调用了event.stopPropagation方法

<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>
//只输出1

native

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

<my-component v-on:click.native="doSomething"></my-component>

once

绑定了事件以后只能触发一次，第二次就不会触发

<button @click.once="shout(1)">ok</button>

3.应用场景

 根据每一个修饰符的功能，我们可以得到以下修饰符的应用场景：

.stop:阻止事件冒泡

.native:绑定原生事件

.once：事件只执行一次

.prevrnt：阻止默认事件

capture：事件侦听，事件发生时会调用

.self：当事件发生在该元素本身，而不是子元素的时候触发