前言
大家好，我是林三心，眾所周知，修飾符也是Vue的重要組成成分之一，利用好修飾符可以大大地提高開發的效率，接下來給大家介紹一下面試官最喜歡問的13種Vue修飾符
1.lazy
lazy修飾符作用是，改變輸入框的值時value不會改變，當游標離開輸入框時，v-model繫結的值value才會改變
<input type="text" v-model.lazy="value">
<div>{{value}}</div>
data() {
return {
value: '222'
}
}
2.trim
trim修飾符的作用類似於JavaScript中的trim()方法，作用是把v-model繫結的值的首尾空格給過濾掉。
<input type="text" v-model.trim="value">
<div>{{value}}</div>
data() {
return {
value: '222'
}
}
3.number
number修飾符的作用是將值轉成數字，但是先輸入字串和先輸入數字，是兩種情況
<input type="text" v-model.number="value">
<div>{{value}}</div>
data() {
return {
value: '222'
}
}先輸入數字的話，只取前面數字部分
先輸入字母的話，
number修飾符無效
4.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)
}
}5.capture
事件預設是由裡往外冒泡，capture修飾符的作用是反過來，由外網內捕獲
<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)
}
}6.self
self修飾符作用是，只有點選事件繫結的本身才會觸發事件
<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)
}
}7.once
once修飾符的作用是，事件只執行一次
<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)
}
}8.prevent
prevent修飾符的作用是阻止預設事件（例如a標籤的跳轉）
<a href="#" @click.prevent="clickEvent(1)">點我</a>
methods: {
clickEvent(num) {
不加 prevent 點選a標籤 先跳轉然後輸出 1
加了 prevent 點選a標籤 不會跳轉只會輸出 1
console.log(num)
}
}9.native
native修飾符是加在自定義元件的事件上，保證事件能執行
執行不了
<My-component @click="shout(3)"></My-component>
可以執行
<My-component @click.native="shout(3)"></My-component>10.left，right，middle
這三個修飾符是滑鼠的左中右按鍵觸發的事件
<button @click.middle="clickEvent(1)" @click.left="clickEvent(2)" @click.right="clickEvent(3)">點我</button>
methods: {
點選中鍵輸出1
點選左鍵輸出2
點選右鍵輸出3
clickEvent(num) {
console.log(num)
}
}11.passive
當我們在監聽元素滾動事件的時候，會一直觸發onscroll事件，在pc端是沒啥問題的，但是在移動端，會讓我們的網頁變卡，因此我們使用這個修飾符的時候，相當於給onscroll事件整了一個.lazy修飾符
<div @scroll.passive="onScroll">...</div>12.camel
不加camel viewBox會被識別成viewbox
<svg :viewBox="viewBox"></svg>
加了canmel viewBox才會被識別成viewBox
<svg :viewBox.camel="viewBox"></svg>13.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)14.keyCode
當我們這麼寫事件的時候，無論按什麼按鈕都會觸發事件
<input type="text" @keyup="shout(4)">那麼想要限制成某個按鍵觸發怎麼辦？這時候keyCode修飾符就派上用場了
<input type="text" @keyup.keyCode="shout(4)">Vue提供的keyCode：
//普通鍵
.enter
.tab
.delete //(捕獲“刪除”和“退格”鍵)
.space
.esc
.up
.down
.left
.right
//系統修飾鍵
.ctrl
.alt
.meta
.shift例如（具體的鍵碼請看鍵碼對應表）
按 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)">結語
我是林三心，一個熱心的前端菜鳥程式設計師。如果你上進，喜歡前端，想學習前端，那我們們可以交朋友，一起摸魚哈哈，摸魚群，加我請備註【思否】
