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'/>

总结

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