Vue修饰符

Vue修饰符

1. 表单输入修饰符
2. 事件修饰符
3. 按键修饰符
4. 系统修饰符
5. 鼠标按钮修饰符

表单输入修饰符

修饰符	藐视
.lazy	焦点离开之后再触发
.number	返回数字，而不是数字的字符串
.trim	去除输入内容两端的空格

用法

<input type="text"   v-model.lazy="inputValue">
<input type="number" v-model.number="inputValue">
<input type="trim"   v-model.trim="inputValue">

事件修饰符

修饰符	描述
.stop	可阻止事件冒泡
.prevent	可阻止事件的默认行为（如a标签点击后的跳转）
.capture	可捕获内部事件并先处理，再由内部事件处理
.self	只有当前事件才触发，可用于父组件事件阻止冒泡行为
.once	只触发一次事件
.passive	提前告知浏览器该事件没有被阻止，优化移动端触屏性能，不能与(.prevent)一起使用

用法

1. 常规使用

   <button @click.stop="clickButton">click</button>
   

2. 连续调用

   <a @click.stop.prevent="clickLink">百度</a>
   

3. 仅修饰符

   <a href="https://www.baidu.com" @click.stop>百度</a>
   

按键修饰符

修饰符	描述
.enter	捕获Enter键
.tab	捕获Tab键
.delete	捕获Backspace和Delete键
.esc	捕获Esc键
.space	捕获Space键
.up	捕获上箭头键
.down	捕获下箭头键
.left	捕获左箭头键
.right	捕获又箭头键

用法

<input type="text" @keyup.enter="enterEvent">

系统修饰符

• .ctrl
• .alt
• .shift
• .meta
• .exact(用于精确控制事件触发)

可用于按键组合从而触发相应的事件，用法同上。

鼠标按钮修饰符

• .left
• .right
• .middle

用法同上。