详解vue中的修饰符

对表单中的修饰符

.lazy: 加lazy修饰符的区别相当于在输入后失去焦点或者摁了enter键视图才更新。不加lazy则是在keyup就更新

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

.number: 对输入的类型进行限制

<input v-model.number="msg">

.trim: 自动过滤输入的首尾空格

<input v-model.trim="msg">

对事件的修饰符

<!-- 阻止单击事件冒泡，当点击box2时就不会触发box1的点击事件，若不加则会触发 -->
<div class="box1" @click="btn">
	<div class="box2" @click.stop="btn1"></div>
</div>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联，阻止默认事件  -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 添加事件侦听器时使用事件捕获模式，先执行外层盒子事件，再执行里面盒子事件 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当事件在该元素本身（而不是子元素）才去执行 -->
<div v-on:click.self="doThat">...</div>
 
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

按键修饰符

<!-- 只有在按enter键时调用submit -->
<input v-on:keyup.enter="submit">
    
.tab：制表键
.delete：含delete和backspace键
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键