面試最常問的13種Vue修飾符
1.lazy
lazy修飾符作用是，改變輸入框的值時(shí)value不會改變，當(dāng)光標(biāo)離開輸入框時(shí)，v-model綁定的值value才會改變
<input type="text" v-model.lazy="value">
<div>{{value}}</div>
data() {
return {
value: '111111'
}
}
2.trim
trim修飾符的作用類似于JavaScript中的trim()方法，作用是把v-model綁定的值的首尾空格給過濾掉。
<input type="text" v-model.trim="value">
<div>{{value}}</div>
data() {
return {
value: '111111'
}
}
3.number
number修飾符的作用是將值轉(zhuǎn)成數(shù)字，但是先輸入字符串和先輸入數(shù)字，是兩種情況
<input type="text" v-model.number="value">
<div>{{value}}</div>
data() {
return {
value: '111111'
}
}
先輸入數(shù)字的話，只取前面數(shù)字部分
先輸入字母的話，number修飾符無效
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)擊事件綁定的本身才會觸發(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才會輸出 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)擊按鈕只會輸出一次 1
console.log(num)
}
}
8.prevent
prevent修飾符的作用是阻止默認(rèn)事件（例如a標(biāo)簽的跳轉(zhuǎn)）
<a href="#" rel="external nofollow" @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)簽 不會跳轉(zhuǎn)只會輸出 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)聽元素滾動事件的時(shí)候，會一直觸發(fā)onscroll事件，在pc端是沒啥問題的，但是在移動端，會讓我們的網(wǎng)頁變卡，因此我們使用這個(gè)修飾符的時(shí)候，相當(dāng)于給onscroll事件整了一個(gè).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
當(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)
13.keyCode
當(dāng)我們這么寫事件的時(shí)候，無論按什么按鈕都會觸發(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
例如：
按 ctrl 才會觸發(fā)
<input type="text" @keyup.ctrl="shout(4)">
也可以鼠標(biāo)事件+按鍵
<input type="text" @mousedown.ctrl.="shout(4)">
可以多按鍵觸發(fā) 例如 ctrl + 67
<input type="text" @
到此這篇關(guān)于面試最常問的13種Vue修飾符的文章就介紹到這了,更多相關(guān)Vue修飾符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue列表渲染的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了深度剖析Vue3在瀏覽器的運(yùn)行原理，文章通過圍繞主題展開相關(guān)詳細(xì)介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
Vuex利用state保存新聞數(shù)據(jù)實(shí)例
本篇文章主要介紹了Vuex利用state保存新聞數(shù)據(jù)實(shí)例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
Nuxt 項(xiàng)目性能優(yōu)化調(diào)研分析
這篇文章主要介紹了Nuxt 項(xiàng)目性能優(yōu)化調(diào)研分析，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue不操作dom實(shí)現(xiàn)圖片輪播的示例代碼
這篇文章主要介紹了vue不操作dom實(shí)現(xiàn)圖片輪播的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了Vue-cli3簡單使用(圖文步驟)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了vue中如何動態(tài)獲取剩余區(qū)域的滾動高度問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
elementui如何解決el-table重復(fù)寫loading問題
這篇文章主要介紹了elementui如何解決el-table重復(fù)寫loading問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue.js 初體驗(yàn)之Chrome 插件開發(fā)實(shí)錄
這篇文章主要介紹了vue.js 初體驗(yàn)之Chrome 插件開發(fā)實(shí)錄 ,需要的朋友可以參考下2017-05-05
vue實(shí)現(xiàn)隨機(jī)驗(yàn)證碼功能的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)隨機(jī)驗(yàn)證碼功能的實(shí)例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04