vue常用的修飾符

• 表單修飾符
• 事件修飾符
• 鼠標按鍵修飾符
• 鍵值修飾符
• v-bind修飾符

修飾符的作用

表單的修飾符

lazy

在我們填完信息，光標離開標簽的時候，才會將值賦予給value，也就是在change事件之后再進行信息同步

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

trim

自動過濾用戶輸入的首空格字符，中間的空格不會過濾

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

number

自動將用戶的輸入值轉(zhuǎn)為數(shù)值類型，但如果這個值無法被parseFloat解析，則會返回原來的值

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

事件修飾符

stop

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

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

prevent

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

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

self

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

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

使用修飾符時，順序很重要；用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊

once

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

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

capture

使事件觸發(fā)從包含這個元素的頂層開始往下觸發(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

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

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

不能把 .passive 和 .prevent 一起使用,因為 .prevent 將會被忽略，同時瀏覽器可能會展示一個警告。

passive 會告訴瀏覽器你不想阻止事件的默認行為

native

讓組件變成像html內(nèi)置標簽那樣監(jiān)聽根元素的原生事件，否則組件上使用 v-on 只會監(jiān)聽自定義事件

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

使用.native修飾符來操作普通HTML標簽是會令事件失效的

鼠標按鈕修飾符

鼠標按鈕修飾符針對的就是左鍵、右鍵、中鍵點擊，有如下：

• left 左鍵點擊
• right 右鍵點擊
• middle 中鍵點擊

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

鍵盤修飾符

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

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

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

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

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

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

Vue.config.keyCodes.f2 = 113

v-bind修飾符

v-bind修飾符主要是為屬性進行操作，用來分別有如下：

async

能對props進行一個雙向綁定

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

以上方法相當于以下的簡寫

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

使用async需要注意：

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

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

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

props

設置自定義標簽屬性，避免暴露數(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>

應用場景

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

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

最新評論