<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)">點(diǎn)擊</button>
</div>

methods: {
 clickEvent(num) {
  // 不加 stop 點(diǎn)擊按鈕輸出 1 2
  // 加了 stop 點(diǎn)擊按鈕輸出 1
  console.log(num)
 }
}

<div @click.capture="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click="clickEvent(1)">點(diǎn)擊</button>
</div>

methods: {
 clickEvent(num) {
  // 不加 capture 點(diǎn)擊按鈕輸出 1 2
  // 加了 capture 點(diǎn)擊按鈕輸出 2 1
  console.log(num)
 }
}

<div @click.self="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click="clickEvent(1)">點(diǎn)擊</button>
</div>
methods: {
 clickEvent(num) {
  // 不加 self 點(diǎn)擊按鈕輸出 1 2
  // 加了 self 點(diǎn)擊按鈕輸出 1 點(diǎn)擊div才會(huì)輸出 2
  console.log(num)
 }
}

<div @click.once="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click="clickEvent(1)">點(diǎn)擊</button>
</div>

methods: {
 clickEvent(num) {
  // 不加 once 多次點(diǎn)擊按鈕輸出 1
  // 加了 once 多次點(diǎn)擊按鈕只會(huì)輸出一次 1 
  console.log(num)
 }
}

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

methods: {
 clickEvent(num) {
  // 不加 prevent 點(diǎn)擊a標(biāo)簽 先跳轉(zhuǎn)然后輸出 1
  // 加了 prevent 點(diǎn)擊a標(biāo)簽 不會(huì)跳轉(zhuǎn)只會(huì)輸出 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)">點(diǎn)我</button>

methods: {
 // 點(diǎn)擊中鍵輸出1
 // 點(diǎn)擊左鍵輸出2
 // 點(diǎn)擊右鍵輸出3
 clickEvent(num) {
  console.log(num)
 }
}

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

不加camel viewBox會(huì)被識(shí)別成viewbox
<svg :viewBox="viewBox"></svg>

加了canmel viewBox才會(huì)被識(shí)別成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
//系統(tǒng)修飾鍵
.ctrl
.alt
.meta
.shift

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

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

<input type="text" @