「百毒不侵」面試官最喜歡問的13種Vue修飾符

「本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！」

前言

你們好，我是林三心，衆所周知，修飾符也是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>
複製代碼

12.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)
複製代碼

13.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)">
複製代碼

結語

個人專欄已更新：

• Vue源碼解析
• leetcode題目解析
• Element源碼解析
• 面試——百毒不侵

學習羣請點擊這裏，立刻安排