Vue常用的修飾符有哪些?有什麼應用場景?
一、修飾符是什麼
在程式世界裡，修飾符是用於限定型別以及型別成員的宣告的一種符號
在Vue中，修飾符處理了許多DOM事件的細節，讓我們不再需要花大量的時間去處理這些煩惱的事情，而能有更多的精力專注於程式的邏輯處理
vue中修飾符分為以下五種：
-
表單修飾符 -
事件修飾符 -
滑鼠按鍵修飾符 -
鍵值修飾符 -
v-bind修飾符
二、修飾符的作用
表單修飾符
在我們填寫表單的時候用得最多的是input標籤，指令用得最多的是v-model
關於表單的修飾符有如下：
-
lazy -
trim -
number
lazy
在我們填完資訊，游標離開標籤的時候，才會將值賦予給value，也就是在change
<input type="text" v-model.lazy="value">
<p>{{value}}</p>trim
自動過濾使用者輸入的首空格字元，而中間的空格不會過濾
<input type="text" v-model.trim="value">number
自動將使用者的輸入值轉為數值型別，但如果這個值無法被parseFloat解析，則會返回原來的值
<input v-model.number="age" type="number">事件修飾符
事件修飾符是對事件捕獲以及目標進行了處理，有如下修飾符：
-
stop -
prevent -
self -
once -
capture -
passive -
native
stop
阻止了事件冒泡，相當於呼叫了event.stopPropagation方法
<div @click="shout(2)">
<button @click.stop="shout(1)">ok</button>
</div>
//只輸出1prevent
阻止了事件的預設行為，相當於呼叫了event.preventDefault方法
<form v-on:submit.prevent="onSubmit"></form>
self
只當在 event.target 是當前元素自身時觸發處理函式
<div v-on:click.self="doThat">...</div>使用修飾符時，順序很重要；相應的程式碼會以同樣的順序產生。因此，用
v-on:click.prevent.self會阻止所有的點選，而v-on:click.self.prevent只會阻止對元素自身的點選
once
綁定了事件以後只能觸發一次，第二次就不會觸發
<button @click.once="shout(1)">ok</button>capture
使事件觸發從包含這個元素的頂層開始往下觸發
<div @click.capture="shout(1)">
obj1
<div @click.capture="shout(2)">
obj2
<div @click="shout(3)">
obj3
<div @click="shout(4)">
obj4
</div>
</div>
</div>
</div>
// 輸出結構: 1 2 4 3 passive
在移動端，當我們在監聽元素滾動事件的時候，會一直觸發onscroll事件會讓我們的網頁變卡，因此我們使用這個修飾符的時候，相當於給onscroll事件整了一個.lazy修飾符
<!-- 滾動事件的預設行為 (即滾動行為) 將會立即觸發 -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>不要把
.passive和.prevent一起使用,因為.prevent將會被忽略，同時瀏覽器可能會向你展示一個警告。
passive會告訴瀏覽器你不想阻止事件的預設行為
native
讓元件變成像html內建標籤那樣監聽根元素的原生事件，否則元件上使用 v-on 只會監聽自定義事件
<my-component v-on:click.native="doSomething"></my-component>使用.native修飾符來操作普通HTML標籤是會令事件失效的
滑鼠按鈕修飾符
滑鼠按鈕修飾符針對的就是左鍵、右鍵、中鍵點選，有如下：
-
left 左鍵點選 -
right 右鍵點選 -
middle 中鍵點選
<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>鍵盤修飾符
鍵盤修飾符是用來修飾鍵盤事件（onkeyup，onkeydown）的，有如下：
keyCode存在很多，但vue為我們提供了別名，分為以下兩種：
-
普通鍵（enter、tab、delete、space、esc、up...） -
系統修飾鍵（ctrl、alt、meta、shift...）
// 只有按鍵為keyCode的時候才觸發
<input type="text" @keyup.keyCode="shout()">還可以通過以下方式自定義一些全域性的鍵盤碼別名
Vue.config.keyCodes.f2 = 113v-bind修飾符
v-bind修飾符主要是為屬性進行操作，用來分別有如下：
-
async -
prop -
camel
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
設定自定義標籤屬性，避免暴露資料，防止汙染HTML結構
<input id="uid" title="title1" value="1" :index.prop="index">camel
將命名變為駝峰命名法，如將view-Box屬性名轉換為 viewBox
<svg :viewBox="viewBox"></svg>三、應用場景
根據每一個修飾符的功能，我們可以得到以下修飾符的應用場景：
-
.stop：阻止事件冒泡 -
.native：繫結原生事件 -
.once：事件只執行一次 -
.self ：將事件繫結在自身身上，相當於阻止事件冒泡 -
.prevent：阻止預設事件 -
.caption：用於事件捕獲 -
.once：只觸發一次 -
.keyCode：監聽特定鍵盤按下 -
.right：右鍵