面试最常问的13种Vue修饰符

<input type="text" v-model.lazy="value">
<div>{{value}}</div>

data() {
 return {
  value: '111111'
 }
}

<input type="text" v-model.trim="value">
<div>{{value}}</div>

data() {
 return {
  value: '111111'
 }
}

<input type="text" v-model.number="value">
<div>{{value}}</div>

data() {
 return {
  value: '111111'
 }
}

<div @click="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click.stop="clickEvent(1)">点击</button>
</div>

methods: {
 clickEvent(num) {
  // 不加 stop 点击按钮输出 1 2
  // 加了 stop 点击按钮输出 1
  console.log(num)
 }
}

<div @click.capture="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click="clickEvent(1)">点击</button>
</div>

methods: {
 clickEvent(num) {
  // 不加 capture 点击按钮输出 1 2
  // 加了 capture 点击按钮输出 2 1
  console.log(num)
 }
}

<div @click.self="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click="clickEvent(1)">点击</button>
</div>
methods: {
 clickEvent(num) {
  // 不加 self 点击按钮输出 1 2
  // 加了 self 点击按钮输出 1 点击div才会输出 2
  console.log(num)
 }
}

<div @click.once="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click="clickEvent(1)">点击</button>
</div>

methods: {
 clickEvent(num) {
  // 不加 once 多次点击按钮输出 1
  // 加了 once 多次点击按钮只会输出一次 1 
  console.log(num)
 }
}

<a href="#" rel="external nofollow" @click.prevent="clickEvent(1)">点我</a>

methods: {
 clickEvent(num) {
  // 不加 prevent 点击a标签 先跳转然后输出 1
  // 加了 prevent 点击a标签 不会跳转只会输出 1
  console.log(num)
 }
}

<My-component @click="shout(3)"></My-component>

<My-component @click.native="shout(3)"></My-component>

<button @click.middle="clickEvent(1)"  @click.left="clickEvent(2)"  @click.right="clickEvent(3)">点我</button>

methods: {
 // 点击中键输出1
 // 点击左键输出2
 // 点击右键输出3
 clickEvent(num) {
  console.log(num)
 }
}

<div @scroll.passive="onScroll">...</div>

不加camel viewBox会被识别成viewbox
<svg :viewBox="viewBox"></svg>

加了canmel viewBox才会被识别成viewBox
<svg :viewBox.camel="viewBox"></svg>

<children :foo="bar" @update:foo="val => bar = val"></children>

this.$emit('update:foo', newValue)

<children :foo.sync="bar"></children>

this.$emit('update:foo', newValue)

<input type="text" @keyup="shout(4)">

<input type="text" @keyup.keyCode="shout(4)">

//普通键
.enter 
.tab
.delete //(捕获“删除”和“退格”键)
.space
.esc
.up
.down
.left
.right
//系统修饰键
.ctrl
.alt
.meta
.shift

<input type="text" @keyup.ctrl="shout(4)">

<input type="text" @mousedown.ctrl.="shout(4)">

<input type="text" @