前言

大家好，我是林三心，眾所周知，修飾符也是Vue的重要組成成分之一，利用好修飾符可以大大地提高開發(fā)的效率，接下來給大家介紹一下面試官最喜歡問的13種Vue修飾符。

1.lazy

lazy修飾符作用是，改變輸入框的值時(shí)value不會(huì)改變，當(dāng)光標(biāo)離開輸入框時(shí)，v-model綁定的值value才會(huì)改變

<input type="text" v-model.lazy="value"> 
<div>{{value}}</div> 
 
data() { 
        return { 
            value: '222' 
        } 
    } 

lazy1

2.trim

trim修飾符的作用類似于JavaScript中的trim()方法，作用是把v-model綁定的值的首尾空格給過濾掉。

<input type="text" v-model.trim="value"> 
<div>{{value}}</div> 
 
data() { 
        return { 
            value: '222' 
        } 
    } 

number

3.number

number修飾符的作用是將值轉(zhuǎn)成數(shù)字，但是先輸入字符串和先輸入數(shù)字，是兩種情況

<input type="text" v-model.number="value"> 
<div>{{value}}</div> 
 
data() { 
        return { 
            value: '222' 
        } 
    } 

先輸入數(shù)字的話，只取前面數(shù)字部分

先輸入字母的話，number修飾符無效

number2

4.stop

stop修飾符的作用是阻止冒泡

<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) 
        } 
    } 

5.capture

事件默認(rèn)是由里往外冒泡，capture修飾符的作用是反過來，由外網(wǎng)內(nèi)捕獲

<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) 
        } 
    } 

6.self

self修飾符作用是，只有點(diǎn)擊事件綁定的本身才會(huì)觸發(fā)事件

<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) 
        } 
    } 

7.once

once修飾符的作用是，事件只執(zhí)行一次

<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) 
        } 
    } 

8.prevent

prevent修飾符的作用是阻止默認(rèn)事件(例如a標(biāo)簽的跳轉(zhuǎn))

<a href="#" @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) 
        } 
    } 

9.native

native修飾符是加在自定義組件的事件上，保證事件能執(zhí)行

執(zhí)行不了 
<My-component @click="shout(3)"></My-component> 
 
可以執(zhí)行 
<My-component @click.native="shout(3)"></My-component> 

10.left，right，middle

這三個(gè)修飾符是鼠標(biāo)的左中右按鍵觸發(fā)的事件

<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) 
        } 
    } 

11.passive

當(dāng)我們在監(jiān)聽元素滾動(dòng)事件的時(shí)候，會(huì)一直觸發(fā)onscroll事件，在pc端是沒啥問題的，但是在移動(dòng)端，會(huì)讓我們的網(wǎng)頁變卡，因此我們使用這個(gè)修飾符的時(shí)候，相當(dāng)于給onscroll事件整了一個(gè).lazy修飾符

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

12.camel

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

13.sync

當(dāng)父組件傳值進(jìn)子組件，子組件想要改變這個(gè)值時(shí)，可以這么做

父組件里 
<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

當(dāng)我們這么寫事件的時(shí)候，無論按什么按鈕都會(huì)觸發(fā)事件

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

那么想要限制成某個(gè)按鍵觸發(fā)怎么辦?這時(shí)候keyCode修飾符就派上用場了

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

Vue提供的keyCode：

//普通鍵 
.enter  
.tab 
.delete //(捕獲“刪除”和“退格”鍵) 
.space 
.esc 
.up 
.down 
.left 
.right 
//系統(tǒng)修飾鍵 
.ctrl 
.alt 
.meta 
.shift 

例如(具體的鍵碼請看鍵碼對應(yīng)表)

按 ctrl 才會(huì)觸發(fā) 
<input type="text" @keyup.ctrl="shout(4)"> 
 
也可以鼠標(biāo)事件+按鍵 
<input type="text" @mousedown.ctrl.="shout(4)"> 
 
可以多按鍵觸發(fā) 例如 ctrl + 67 
<input type="text" @keyup.ctrl.67="shout(4)">