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的数据。
• 能使用修饰符的时候尽量使用修饰符,修饰符具有兼容性。
• 修饰符可以使用多个,顺序不同效果也不同。

到此这篇关于Vue修饰符的使用详解的文章就介绍到这了,更多相关Vue修饰符内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！