偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

面試官最喜歡問(wèn)的 14 種Vue修飾符

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

前言

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

1.lazy

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

<input type="text" v-model.lazy="value">
<div>{{value}}</div>

data() {
        return {
            value: '222'
        }
    }

lazy1.giflazy1.gif

2.trim

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

<input type="text" v-model.trim="value">
<div>{{value}}</div>

data() {
        return {
            value: '222'
        }
    }

number.gifnumber.gif

3.number

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

<input type="text" v-model.number="value">
<div>{{value}}</div>

data() {
        return {
            value: '222'
        }
    }

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

圖片圖片

先輸入字母的話,number修飾符無(wú)效

number2.gifnumber2.gif

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修飾符的作用是反過(guò)來(lái),由外網(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.notallow="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)我們?cè)诒O(jiān)聽(tīng)元素滾動(dòng)事件的時(shí)候,會(huì)一直觸發(fā)onscroll事件,在pc端是沒(méi)啥問(wèn)題的,但是在移動(dòng)端,會(huì)讓我們的網(wǎng)頁(yè)變卡,因此我們使用這個(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修飾符的作用就是,可以簡(jiǎn)寫:

父組件里
<children :foo.sync="bar"></children>

子組件里
this.$emit('update:foo', newValue)

14.keyCode

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

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

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

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

Vue提供的keyCode:

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

例如(具體的鍵碼請(qǐng)看鍵碼對(duì)應(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)">


責(zé)任編輯:武曉燕 來(lái)源: 前端之神
相關(guān)推薦

2022-01-05 08:56:20

Vue修飾符面試

2021-11-08 09:18:01

CAS面試場(chǎng)景

2021-12-25 22:31:10

MarkWord面試synchronize

2021-12-16 18:38:13

面試Synchronize

2021-12-02 18:20:25

算法垃圾回收

2009-08-24 16:49:39

C#修飾符

2024-11-29 08:11:27

2021-03-24 10:25:24

優(yōu)化VUE性能

2018-05-10 15:48:47

面試面試官Java

2022-06-29 16:59:21

Vue3Vue2面試

2016-03-02 15:13:54

面試開(kāi)發(fā)者問(wèn)題

2020-07-28 00:58:20

IP地址子網(wǎng)TCP

2024-03-13 13:39:21

2025-06-03 07:05:00

Linux操作系統(tǒng)Windows

2010-08-23 15:06:52

發(fā)問(wèn)

2021-01-06 05:36:25

拉鏈表數(shù)倉(cāng)數(shù)據(jù)

2023-05-05 07:34:48

事件修飾符Vue應(yīng)用

2022-01-05 09:55:26

asynawait前端

2021-05-27 07:14:52

ZooKeeper節(jié)點(diǎn)類型

2009-08-27 11:12:03

C# abstract
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)