面試最常問的13種Vue修飾符
1.lazy
lazy修飾符作用是，改變輸入框的值時value不會改變，當(dāng)光標(biāo)離開輸入框時，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)">點擊</button>
</div>
methods: {
clickEvent(num) {
// 不加 stop 點擊按鈕輸出 1 2
// 加了 stop 點擊按鈕輸出 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)">點擊</button>
</div>
methods: {
clickEvent(num) {
// 不加 capture 點擊按鈕輸出 1 2
// 加了 capture 點擊按鈕輸出 2 1
console.log(num)
}
}
6.self
self修飾符作用是，只有點擊事件綁定的本身才會觸發(fā)事件
<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修飾符的作用是，事件只執(zhí)行一次
<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修飾符的作用是阻止默認(rèn)事件（例如a標(biāo)簽的跳轉(zhuǎn)）
<a href="#" rel="external nofollow" @click.prevent="clickEvent(1)">點我</a>
methods: {
clickEvent(num) {
// 不加 prevent 點擊a標(biāo)簽 先跳轉(zhuǎn)然后輸出 1
// 加了 prevent 點擊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
這三個修飾符是鼠標(biāo)的左中右按鍵觸發(fā)的事件
<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
當(dāng)我們在監(jiān)聽元素滾動事件的時候，會一直觸發(fā)onscroll事件，在pc端是沒啥問題的，但是在移動端，會讓我們的網(wǎng)頁變卡，因此我們使用這個修飾符的時候，相當(dāng)于給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
當(dāng)父組件傳值進子組件，子組件想要改變這個值時，可以這么做
父組件里
<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)我們這么寫事件的時候，無論按什么按鈕都會觸發(fā)事件
<input type="text" @keyup="shout(4)">
那么想要限制成某個按鍵觸發(fā)怎么辦？這時候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)文章
本篇文章主要介紹了vue2.0項目中使用Ueditor富文本編輯器示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了vue 遞歸組件的簡單使用示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
vue項目npm?run?build打包dist文件及打包后空白解決辦法
npm run build 這個命令會執(zhí)行Vue CLI中預(yù)定義的打包配置,并將打包后的文件存放在"dist"文件夾中,這篇文章主要給大家介紹了關(guān)于vue項目npm?run?build打包dist文件及打包后空白的解決辦法,需要的朋友可以參考下2023-10-10
vue3點擊出現(xiàn)彈窗后背景變暗且不可操作的實現(xiàn)代碼
這篇文章主要介紹了vue3點擊出現(xiàn)彈窗后背景變暗且不可操作的實現(xiàn)代碼,本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue.js動態(tài)組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
本篇文章主要介紹了vue better-scroll插件使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vue中構(gòu)造數(shù)組數(shù)據(jù)之map和forEach方法實現(xiàn)
數(shù)組操作是前端最重要的數(shù)據(jù)操作，構(gòu)造數(shù)組數(shù)據(jù)，又是數(shù)組操作中很常見的，本文將梳理下map和forEach方法在Vue項目中的使用，感興趣的朋友跟隨小編一起看看吧2022-09-09
這篇文章主要介紹了細(xì)說 Vue 組件的服務(wù)器端渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了Vue中引入使用patch-package為依賴打補丁問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡單選項卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03