Vue中常用的修飾符有哪些

這篇文章主要介紹了Vue中常用的修飾符有哪些的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Vue中常用的修飾符有哪些文章都會(huì)有所收獲，下面我們一起來看看吧。

面試官：說一下你平時(shí)用過的 Vue修飾符

候選人：又卷？誰平時(shí)沒事記這些啊，真正要用的時(shí)候我不知道去查文檔嗎？【相關(guān)推薦：vue.js視頻教程】

面試官：嗯？

候選人：好吧，我說。

面試官：這才對(duì)嘛，雖然考這些八股文看起來是沒啥意義，但其實(shí)我考察的是你對(duì) vue 的熟悉程度，真正用 vue 開發(fā)過幾個(gè)大型項(xiàng)目的人，是不可能答不出 5 個(gè)以上的。

候選人：您說的都對(duì)。

...

解答及延伸：

在上一篇文章 《自定義組件中如何用v-model？聊聊.sync修飾符的使用場景》 中，我們介紹了 .sync 修飾符。由此引出了這篇文章的問題，說一下你平時(shí)用過的 vue 修飾符。

修飾符用得好，那開發(fā)效率杠杠滴，即使不是應(yīng)對(duì)面試，我們也應(yīng)該掌握常用的修飾符。

自定義組件修飾符

.sync

父子組件交互，父組件傳遞給子組件 prop 值，子組件拋出事件，通知父組件改變這個(gè)綁定的值，可以用 .sync 修飾符簡寫。

父組件里
<children :value="fatherValue" @update:value="val => fatherValue = val"></children>

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

等價(jià)于

父組件里
<children :value.sync="fatherValue"></children>

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

.nativue

.native 修飾符是加在自定義組件的事件上，保證自定義組件的原生事件能執(zhí)行

執(zhí)行不了 
<my-button @click="handleClick"></my-button> 

可以執(zhí)行 
<my-button @click.native="handleClick"></my-button>

如果不寫 .native 修飾符，那上面的 @click 就是自定義事件 click，而非原生事件 click，除非在 my-button 組件內(nèi)部 emit 了自定義事件 click，否則 handleClick 方法不會(huì)執(zhí)行。

事件修飾符

.stop

.stop 修飾符，用于阻止冒泡，同 event.stopPropagation()

<div @click="handleDivClick">
  <button @click.stop="handleBtnClick">click</button>
</div>

一個(gè) div 里面包了一個(gè) button。

button 上的事件不加 .stop 修飾符，點(diǎn)擊 button ，先執(zhí)行 handleBtnClick ，再執(zhí)行 handleDivClick 。

button 上的事件加了 .stop 修飾符，點(diǎn)擊 button ，只執(zhí)行 handleBtnClick。

了解事件冒泡和捕獲，請(qǐng) 點(diǎn)擊這里，面試幾乎必考。

.capture

.capture 修飾符，用于添加事件監(jiān)聽器時(shí)使用事件捕獲模式

<div @click.capture="handleDivClick">
  <button @click="handleBtnClick">click</button>
</div>

div 上的事件不加 .capture 修飾符，點(diǎn)擊 button ，先執(zhí)行 handleBtnClick ，再執(zhí)行 handleDivClick ，其實(shí)就是默認(rèn)使用冒泡模式。

div 上的事件加了 .capture 修飾符，點(diǎn)擊 button ，先執(zhí)行 handleDivClick ，再執(zhí)行 handleBtnClick 。

.self

.self 修飾符，只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù)

<div @click.self="handleDivClick">
  <button @click="handleBtnClick">click</button>
</div>

div 上的事件不加 .self 修飾符，點(diǎn)擊 button ，先執(zhí)行 handleBtnClick ，再執(zhí)行 handleDivClick ，其實(shí)就是默認(rèn)使用冒泡模式。

div 上的事件加了 .self 修飾符，點(diǎn)擊 button ，只執(zhí)行 handleBtnClick ，點(diǎn)擊 div，才執(zhí)行 handleDivClick 。

.once

.once 修飾符，點(diǎn)擊事件將只會(huì)觸發(fā)一次

<button @click.once="handleBtnClick">button</button>

button 上的事件加了 .once 修飾符，點(diǎn)擊 button ，只執(zhí)行一次 handleBtnClick 事件 ，之后再次點(diǎn)擊，handleBtnClick 事件不會(huì)執(zhí)行。

.prevent

.prevent 阻止默認(rèn)事件，同event.preventDefault()

阻止a標(biāo)簽的跳轉(zhuǎn)行為
<a href="#" @click.prevent="handleClick">點(diǎn)擊跳轉(zhuǎn)</a>

阻止復(fù)選框被勾選
<input type="checkbox" @click.prevent />

阻止 form 表單提交刷新頁面問題
<el-form :model="form" @submit.native.prevent>
  <el-form-item label="活動(dòng)名稱">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
</el-form>

鍵盤按鍵修飾符

需要用到的時(shí)候再去查 vue文檔 吧，太多了，不用記住。

表單輸入綁定修飾符

.lazy

v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 。添加 .lazy 修飾符，會(huì)在 change 事件之后進(jìn)行同步

<input v-model.lazy="value" />
<p>{{ value }}</p>
//...
data() {
  return {
    value: 'lin'
  }
}
// ...

.trim

使用 .trim 修飾符，會(huì)自動(dòng)過濾用戶輸入的首尾空白字符

<input v-model.trim="value" />
<p>{{ value }}</p>
//...
data() {
  return {
    value: 'lin'
  }
}
// ...

.number

使用 .number 修飾符，會(huì)將用戶的輸入值轉(zhuǎn)為數(shù)值類型

<input v-model.number="value" />
<p>{{ value }}</p>
//...
data() {
  return {
    value: 'lin'
  }
}
// ...

關(guān)于“Vue中常用的修飾符有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Vue中常用的修飾符有哪些”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。