VUE事件修饰符、表单修饰符

1.事件修饰符

.stop：阻止向上冒泡

<div id="app" @click="divclick">
         <input type="button" value="戳他" @click.stop="btnclick">
</div>

点击button会触发上层div的click事件，用.stop阻止向上冒泡

.prevent:阻止默认事件，例如<a>的链接

<div id="app">
    <a href="http://www.baidu.com"  @click.prevent="clicklink">百度一下</a>
</div>

点击链接后不再跳转，只执行clicklink方法

.capture:实现捕获触发事件的机制

<div id="app" @click.capture="divclick">
    <input type="button"  @click.prevent="btnclick">百度一下</a>
</div>

点击button先触发外层的divclick，再触发里面的btnclick事件；简单来说优先触发捕获到的事件

.self:只有点击当前元素时才触发，不包括内部元素

<div id="app" @click.self="divclick">
    <input type="button"  @click.prevent="btnclick">百度一下</a>
</div>

.once:事件只触发一次

<div id="app">
    <input type="button"  @click.once="btnclick">百度一下</a>
</div>

2.表单修饰符

.lazy:懒加载 例如input框失去焦点后才同步

<input type="button"  v-model.lazy="name" />

.number:双向绑定值为number类型

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

.trim:前后去空

<input type="button"  v-model.trim="age" />