Vue 修饰符使用总结

修饰符是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