面試最常問(wèn)的13種Vue修飾符

目錄

1.lazy

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

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

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

2.trim

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

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

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

3.number

number修飾符的作用是將值轉成數字，但是先輸入字符串和先輸入數字，是兩種情況

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

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

先輸入數字的話(huà)，只取前面數字部分
先輸入字母的話(huà)，number修飾符無(wú)效

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

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

<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修飾符的作用是，事件只執行一次

<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修飾符的作用是阻止默認事件（例如a標簽的跳轉）

<a href="#" rel="external nofollow" @click.prevent="clickEvent(1)">點(diǎn)我</a>

methods: {
 clickEvent(num) {
  // 不加 prevent 點(diǎn)擊a標簽 先跳轉然后輸出 1
  // 加了 prevent 點(diǎn)擊a標簽 不會(huì )跳轉只會(huì )輸出 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

這三個(gè)修飾符是鼠標的左中右按鍵觸發(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

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

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

12.camel

不加camel viewBox會(huì )被識別成viewbox
<svg :viewBox="viewBox"></svg>

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

12.sync

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

父組件里

<children :foo="bar" @update:foo="val => bar = val"></children>

子組件里

this.$emit('update:foo', newValue)

sync修飾符的作用就是，可以簡(jiǎn)寫(xiě)：

父組件里

<children :foo.sync="bar"></children>

子組件里

this.$emit('update:foo', newValue)

13.keyCode

當我們這么寫(xiě)事件的時(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
//系統修飾鍵
.ctrl
.alt
.meta
.shift

例如：

按 ctrl 才會(huì )觸發(fā)

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

也可以鼠標事件+按鍵

<input type="text" @mousedown.ctrl.="shout(4)">

可以多按鍵觸發(fā) 例如 ctrl + 67

<input type="text" @

到此這篇關(guān)于面試最常問(wèn)的13種Vue修飾符的文章就介紹到這了,更多相關(guān)Vue修飾符內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！