vue常用的修飾符

• 表單修飾符
• 事件修飾符
• 鼠標(biāo)按鍵修飾符
• 鍵值修飾符
• v-bind修飾符

修飾符的作用

表單的修飾符

lazy

在我們填完信息，光標(biāo)離開(kāi)標(biāo)簽的時(shí)候，才會(huì)將值賦予給value，也就是在change事件之后再進(jìn)行信息同步

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

trim

自動(dòng)過(guò)濾用戶輸入的首空格字符，中間的空格不會(huì)過(guò)濾

<input type="text" v-model.trim="value">

number

自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型，但如果這個(gè)值無(wú)法被parseFloat解析，則會(huì)返回原來(lái)的值

<input v-model.number="age" type="number">

事件修飾符

stop

阻止了事件冒泡，相當(dāng)于調(diào)用了event.stopPropagation方法

<div @click="click1">
? <button @click.stop="click2">ok</button>
</div>
//只觸發(fā)click2

prevent

阻止了事件的默認(rèn)行為，相當(dāng)于調(diào)用了event.preventDefault方法

<form v-on:submit.prevent="onSubmit"></form>

self

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

<div v-on:click.self="doThat">...</div>

使用修飾符時(shí)，順序很重要；用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊

once

綁定了事件以后只能觸發(fā)一次，第二次就不會(huì)觸發(fā)

<button @click.once="click(1)">ok</button>

capture

使事件觸發(fā)從包含這個(gè)元素的頂層開(kāi)始往下觸發(fā)

<div @click.capture="click(1)">div1
?? ?<div @click.capture="click(2)">div2
?? ??? ?<div @click="click(3)"> div3
?? ??? ??? ?<div @click="click(4)">div4</div>
?? ??? ?</div>
?? ?</div>
</div>
// 執(zhí)行順序: click1 click2 click4 click3?

passive

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

<!-- 滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā) -->
<!-- 而不會(huì)等待 `onScroll` 完成 ?-->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>

不能把 .passive 和 .prevent 一起使用,因?yàn)?.prevent 將會(huì)被忽略，同時(shí)瀏覽器可能會(huì)展示一個(gè)警告。

passive 會(huì)告訴瀏覽器你不想阻止事件的默認(rèn)行為

native

讓組件變成像html內(nèi)置標(biāo)簽?zāi)菢颖O(jiān)聽(tīng)根元素的原生事件，否則組件上使用 v-on 只會(huì)監(jiān)聽(tīng)自定義事件

<my-component v-on:click.native="doSomething"></my-component>

使用.native修飾符來(lái)操作普通HTML標(biāo)簽是會(huì)令事件失效的

鼠標(biāo)按鈕修飾符

鼠標(biāo)按鈕修飾符針對(duì)的就是左鍵、右鍵、中鍵點(diǎn)擊，有如下：

• left 左鍵點(diǎn)擊
• right 右鍵點(diǎn)擊
• middle 中鍵點(diǎn)擊

<button @click.left="click(1)">ok</button>
<button @click.right="click(1)">ok</button>
<button @click.middle="click(1)">ok</button>

鍵盤修飾符

鍵盤修飾符是用來(lái)修飾鍵盤事件（onkeyup，onkeydown）的，有如下：

keyCode存在很多，但vue為我們提供了別名，分為以下兩種：

普通鍵（enter、tab、delete、space、esc、up…）

系統(tǒng)修飾鍵（ctrl、alt、meta、shift…）

// 只有按鍵為keyCode的時(shí)候才觸發(fā)
<input type="text" @keyup.keyCode="shout()">

還可以通過(guò)以下方式自定義一些全局的鍵盤碼別名

Vue.config.keyCodes.f2 = 113

v-bind修飾符

v-bind修飾符主要是為屬性進(jìn)行操作，用來(lái)分別有如下：

async

能對(duì)props進(jìn)行一個(gè)雙向綁定

//父組件
<comp :myMessage.sync="bar"></comp>?
//子組件
this.$emit('update:myMessage',params);

以上方法相當(dāng)于以下的簡(jiǎn)寫

//父親組件
<comp :myMessage="bar" @update:myMessage="func"></comp>
func(e){
?this.bar = e;
}
//子組件js
func2(){
? this.$emit('update:myMessage',params);
}

使用async需要注意：

使用sync的時(shí)候，子組件傳遞的事件名格式必須為update:value，其中value必須與子組件中props中聲明的名稱完全一致

注意帶有 .sync 修飾符的 v-bind 不能和表達(dá)式一起使用

將 v-bind.sync 用在一個(gè)字面量的對(duì)象上，例如 v-bind.sync=”{ title: doc.title }”，是無(wú)法正常工作的

props

設(shè)置自定義標(biāo)簽屬性，避免暴露數(shù)據(jù)，防止污染HTML結(jié)構(gòu)

<input id="uid" title="title1" value="1" :index.prop="index">

camel

將命名變?yōu)轳劮迕?，如?view-Box屬性名轉(zhuǎn)換為 viewBox

<svg :viewBox="viewBox"></svg>

應(yīng)用場(chǎng)景

• .stop：阻止事件冒泡
• .native：綁定原生事件
• .once：事件只執(zhí)行一次
• .self ：將事件綁定在自身身上，相當(dāng)于阻止事件冒泡
• .prevent：阻止默認(rèn)事件
• .caption：用于事件捕獲
• .once：只觸發(fā)一次
• .keyCode：監(jiān)聽(tīng)特定鍵盤按下
• .right：右鍵

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論