修饰符
是Vue的重要组成部分,利用好修饰符
可以大大地提高开发的效率。
v-model
lazy 修饰符——改变输入框的值时 v-model
绑定的值 value 不会改变,当光标离开输入框时才会改变:
<input type="text" v-model.lazy="value">
trim 修饰符——类似于JavaScript中的trim()
方法,把v-model
绑定的值的首尾空格给过滤掉:
<input type="text" v-model.trim="value">
number 修饰符——将值转成数字,如果以非数字开头则不生效:
<input type="text" v-model.number="value">
@click
stop 修饰符——阻止冒泡:
<div @click="handleClick(2)">
<button @click.stop="handleClick(1)">点击</button>
</div>
methods: {
handleClick(num) {
console.log(num);
}
}
capture 修饰符——将事件冒泡改为事件捕获
:
<div @click.capture="handleClick(2)">
<button @click="handleClick(1)">点击</button>
</div>
methods: {
handleClick(num) {
console.log(num);
}
}
self 修饰符——只有点击事件绑定的本身才会触发事件:
<div @click.self="handleClick(2)">
<button @click="handleClick(1)">点击</button>
</div>
methods: {
handleClick(num) {
console.log(num);
}
}
once 修饰符——事件只执行一次:
<div @click.self="handleClick(1)">点击</div>
methods: {
handleClick(num) {
console.log(num);
}
}
prevent 修饰符——阻止默认事件(例如a标签的跳转:
<a href="#" @click.prevent="clickEvent(1)">点击</a>
methods: {
handleClick(num) {
console.log(num);
}
}
native 修饰符——加在自定义组件的事件上,保证事件能执行:
/** 执行不了 */
<My-component @click="shout(3)">点击</My-component>
/** 可以执行 */
<My-component @click.native="shout(3)">点击</My-component>
left/middle/right 修饰符——鼠标的左中右按键触发的事件:
<button @click.middle="clickEvent(1)" @click.left="clickEvent(2)" @click.right="clickEvent(3)">点击</button>
methods: {
handleClick(num) {
console.log(num);
}
}
@scroll
passive 修饰符——滚动节流:
<div @scroll.passive="onScroll">...</div>
变量
camel 修饰符——正确识别成小驼峰:
/** 加了canmel viewBox才会被识别成viewBox,否则会被识别成viewbox */
<svg :viewBox.camel="viewBox"></svg>
sync 修饰符——简写子组件修改父组件传递的值:
/** 父组件里 */
<children :foo.sync="bar"></children>
/** 子组件里 */
this.$emit('update:foo', newValue)
/** 否则需要这样 */
/** 父组件里 */
<children :foo="bar" @update:foo="val => bar = val"></children>
/** 子组件里 */
this.$emit('update:foo', newValue)
@keyup & @mousedown
keyCode修饰符——限制成某个按键触发事件:
/** 按 ctrl 触发 */
<input type="text" @keyup.ctrl="shout(4)">
/** 鼠标事件 + 按键 触发 */
<input type="text" @mousedown.ctrl.="shout(4)">
/** 多按键触发,例如 ctrl + 67 */
<input type="text" @keyup.ctrl.67="shout(4)">
Vue提供的keyCode:
//普通键
.enter
.tab
.delete //(捕获“删除”和“退格”键)
.space
.esc
.up
.down
.left
.right
//系统修饰键
.ctrl
.alt
.meta
.shift