- lazy
lazy修飾符作用是窍霞，改變輸入框的值時value不會改變，當光標離開輸入框時敛瓷，v-model綁定的值value才會改變
<input type="text" v-model.lazy="value">
<div>{{value}}</div>
data() {
return {
value: '222'
}
}
- trim
trim修飾符的作用類似于JavaScript中的trim()方法杨赤，作用是把v-model綁定的值的首尾空格給過濾掉。
<input type="text" v-model.trim="value">
<div>{{value}}</div>
data() {
return {
value: '222'
}
}
- number
number修飾符的作用是將值轉(zhuǎn)成數(shù)字丹墨，但是先輸入字符串和先輸入數(shù)字，是兩種情況
先輸入數(shù)字的話嬉愧，只取前面數(shù)字部分
先輸入字母的話贩挣，number修飾符無效
<input type="text" v-model.number="value">
<div>{{value}}</div>
data() {
return {
value: '222'
}
}
- stop
stop修飾符的作用是阻止冒泡
<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)
}
}
- capture
事件默認是由里往外冒泡，capture修飾符的作用是反過來没酣，由外網(wǎng)內(nèi)捕獲
<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)
}
}
- self
self修飾符作用是王财，只有點擊事件綁定的本身才會觸發(fā)事件
<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)
}
}
- once
once修飾符的作用是，事件只執(zhí)行一次
<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)
}
}
- prevent
prevent修飾符的作用是阻止默認事件（例如a標簽的跳轉(zhuǎn)）
<a href="#" @click.prevent="clickEvent(1)">點我</a>
methods: {
clickEvent(num) {
不加 prevent 點擊a標簽 先跳轉(zhuǎn)然后輸出 1
加了 prevent 點擊a標簽 不會跳轉(zhuǎn)只會輸出 1
console.log(num)
}
}
- native
native修飾符是加在自定義組件的事件上裕便，保證事件能執(zhí)行
執(zhí)行不了
<My-component @click="shout(3)"></My-component>
可以執(zhí)行
<My-component @click.native="shout(3)"></My-component>
- left绒净，right，middle
這三個修飾符是鼠標的左中右按鍵觸發(fā)的事件
<button @click.middle="clickEvent('middle')" @click.left="clickEvent('left')" @click.right="clickEvent('right')">點我</button>
methods: {
點擊中鍵輸出middle
點擊左鍵輸出left
點擊右鍵輸出right
clickEvent(str) {
console.log(str)
}
}
- passive
當我們在監(jiān)聽元素滾動事件的時候偿衰，會一直觸發(fā)onscroll事件挂疆，在pc端是沒啥問題的改览，但是在移動端，會讓我們的網(wǎng)頁變卡缤言，因此我們使用這個修飾符的時候宝当，相當于給onscroll事件整了一個.lazy修飾符
<div @scroll.passive="onScroll">...</div>
- camel
不加camel viewBox會被識別成viewbox
<svg :viewBox="viewBox"></svg>
加了canmel viewBox才會被識別成viewBox
<svg :viewBox.camel="viewBox"></svg>
- sync
當父組件傳值進子組件，子組件想要改變這個值時胆萧，可以這么做
父組件里
<children :foo="bar" @update:foo="val => bar = val"></children>
子組件里
this.$emit('update:foo', newValue)
sync修飾符的作用就是庆揩，可以簡寫：
父組件里
<children :foo.sync="bar"></children>
子組件里
this.$emit('update:foo', newValue)
