Vue.js学习——修饰符

VUE.js修饰符详解

一、.lazy

光标离开后更新视图

例：v-model.lazy (光标离开以后更新视图)

二、.trim

过滤首尾空格

例：v-model.trim

三、.number

如果先输入数字，那他就会限制你输入的只能是数字。如果你输入的是字符串，那.number则是无效的。

四、.stop

相当于调用event.stopPropagation（）。一键阻止事件冒泡。

五、.prevent

相当于调用event.preventDefault（）。用于阻止事件的默认行为。

注：修饰符可以同时使用多个，但是可能会因为顺序有所不同。

例：v-on:click.prevent.self（阻止所有的点击）

       v-on:click.self.prevent（阻止对元素自身的点击）

遵循从左往右

六、.self

只当事件是从事件绑定的元素本身触发时才触发回调

<div class="aaa" @click.self="shout(2)">
    <button @click="shout(1)">OK</button>
</div>

当加了.self以后，点击button不会触发父元素的点击事件shout，只有当点击到父元素的时候才会shout。

七、.once

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

例：@click.once

八、.capture

默认是事件触发是从目标开始往上冒泡，加了这个.capture事件触发从包含这个元素的顶层开始往下触发。

九、passive

相当于给onscroll事件整了一个.lazy修饰符

滚动事件的默认行为（即滚动行为），将会立即触发，而不会等待"onscroll"完成。

十、.native

使用.native修饰来操作普通的HTML标签会使事件失效

十一、鼠标按钮修饰符

• .left   左键点击
• .right  右键点击
• .middle   中键点击

十二、键盘修饰符

onkeyup , onkeydown

• .keyCode  

         普通键：.enter，.tab ，.delete（捕获“删除”和“退格”键），.space，.esc，.up，.down，.left，.right

• 系统修饰键

.ctrl，.alt，.meta，.shift

• 可以通过全局config.keyCodes对象定义按键修饰符别名

例：vue.config.keyCodes.f1=112

• .exact

<input type="text" @keydown.enter.exact="">

十三、v-bind修饰符

• .sync
• .prop
• .camel