一疟呐、修飾符是什么
在程序世界里，修飾符是用于限定類型以及類型成員的聲明的一種符號(hào)
在Vue中园细，修飾符處理了許多DOM事件的細(xì)節(jié)唆垃，讓我們不再需要花大量的時(shí)間去處理這些煩惱的事情，而能有更多的精力專注于程序的邏輯處理
vue中修飾符分為以下五種：
- 表單修飾符
- 事件修飾符
- 鼠標(biāo)按鍵修飾符
- 鍵值修飾符
- v-bind修飾符
二趁猴、修飾符的作用
表單修飾符
在我們填寫表單的時(shí)候用得最多的是input標(biāo)簽刊咳，指令用得最多的是v-model
關(guān)于表單的修飾符有如下：
- lazy
- trim
- number
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">
事件修飾符
事件修飾符是對(duì)事件捕獲以及目標(biāo)進(jìn)行了處理酵镜，有如下修飾符：
- stop
- prevent
- self
- once
- capture
- passive
- native
stop
阻止了事件冒泡，相當(dāng)于調(diào)用了event.stopPropagation方法
<div @click="shout(2)">
<button @click.stop="shout(1)">ok</button>
</div>
//只輸出1
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í)淮韭，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生贴届。因此靠粪，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊
once
綁定了事件以后只能觸發(fā)一次毫蚓，第二次就不會(huì)觸發(fā)
<button @click.once="shout(1)">ok</button>
capture
使事件觸發(fā)從包含這個(gè)元素的頂層開(kāi)始往下觸發(fā)
<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>
// 輸出結(jié)構(gòu): 1 2 4 3
passive
在移動(dòng)端占键，當(dāng)我們?cè)诒O(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="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(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
- prop
- camel
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需要注意以下兩點(diǎn)：
- 使用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)轳劮迕ㄒ烟恚鐚iew-Box屬性名轉(zhuǎn)換為 viewBox
<svg :viewBox="viewBox"></svg>
三妥箕、應(yīng)用場(chǎng)景
根據(jù)每一個(gè)修飾符的功能，我們可以得到以下修飾符的應(yīng)用場(chǎng)景：
- .stop：阻止事件冒泡
- .native：綁定原生事件
- .once：事件只執(zhí)行一次
- .self ：將事件綁定在自身身上酝碳，相當(dāng)于阻止事件冒泡
- .prevent：阻止默認(rèn)事件
- .caption：用于事件捕獲
- .once：只觸發(fā)一次
- .keyCode：監(jiān)聽(tīng)特定鍵盤按下
- .right：右鍵
