Vue中使用修饰符

事件修饰符的使用

<button @click.stop='func'>按钮</button>

• stop 阻止冒泡(兼容) 等同于event.stopPropagation() 或 event.cancelBubble = true
• prevent 阻止默认行为 等同于event.preventDefault()
• capture 设置事件在捕获阶段执行
• once 事件只执行一次,相当于addEventListener的第三个参数的passive设置为true
• passive 设置过passive之后不会再阻止事件的默认行为,即使有event.stopPropagation,相当于设置addEventListener的第三个参数的passive为true
• self 当target===this的时候执行,即当前元素本身触发点击事件时才执行

按键修饰符

vue提供了一些按键修饰符,如space、arrawLeft、arrawright、enter、esc等。使用这些修饰符只有按下指定按键才会执行对应的事件,其它的key可以通过keycode自行判断。

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

<input @keyup.enter='func'/>

只有按下enter键的时候函数才会执行
有一些按键在ie9中有不同的key值,按键修饰符对此做了兼容

系统键修饰符

• .ctrl
• .alt
• .shift
• .meta 对应window的win键合mac的commond键

//shit + c
<input @keyup.shift.67='func'/>

//click + ctrl
<div @click.ctrl='func'>点击</div>

系统修饰键可以与点击事件keyCode一同使用

.exact修饰符用来精准的控制系统按键的执行方式

 //摁住shift + 任意键进行点击都会执行
<div @click.shift='func'>点击</div>

//有且仅有shift键被按下的时候才执行
<div @click.shift.exact='func'></div>

//没有任何系统修饰符时候才执行
<div @click.exact='func'></div>

鼠标按键修饰符

• .left
• .right
• .middle

 //鼠标左键执行
 <div @click.left="childClick"></div>

 //鼠标右键执行,并阻止默认行为(取消右键菜单)
 <div @click.right="childClick"></div>

 //摁下鼠标滚轮执行
 <div @click.middle="childClick"></div>

表单修饰符

• .lazy 用于优化v-model,将数据更新延迟至失去焦点,减少数据更新的频率。

<input v-model.lazy='val'/>

• .number 将输入的文本类型转为数字,不合法的值会在失去焦后被清除(与type=number效果相同)

<input type='text' v-model.number='val'/>

• .trim 去除文本输入中多余的空格,相当于字符串的trim方法

<input type='text' v-model.trim='val'/>

总结

1. Vue的修饰符包含了事件修饰符、按键修饰符、系统键修饰符、exact修饰符、鼠标按键修饰符、表单修饰符。
2. 事件修饰符包含stop、once、capture、prevent等,按键修饰符包含enter、esc、delete、left等,系统键修饰符包含alt、ctrl、shift、meta(系统键,win或command),鼠标按键修饰符包含left、right、middle,表单修饰符包含lazy、trim、number。
3. exact用于更精准的控制系统键。
4. lazy在表单输入元素失去焦点的时候才会更新vue的数据。
5. 能使用修饰符的时候尽量使用修饰符,修饰符具有兼容性。
6. 修饰符可以使用多个,顺序不同效果也不同。