目錄
表單修飾符
事件修飾符
鼠標按鍵修飾符
鍵值修飾符
v-bind修飾符（實在不知道叫啥名字）
表單修飾符
填寫表單获询，最常用的是什么逗鸣？input原押！v-model~而我們的修飾符正是為了簡化這些東西而存在的
.lazy
<div>
<input type="text" v-model="value">
<p>{{value}}</p>
</div>
從這里我們可以看到无畔，我們還在輸入的時候，光標還在的時候帮碰，下面的值就已經(jīng)出來了，可以說是非常地實時拾积。
但是有時候我們希望殉挽，在我們輸入完所有東西丰涉，光標離開才更新視圖。
<div>
<input type="text" v-model.lazy="value">
<p>{{value}}</p>
</div>
這樣即可~這樣只有當我們光標離開輸入框的時候斯碌，它才會更新視圖一死，相當于在onchange事件觸發(fā)更新。
.trim
在我們的輸入框中傻唾，我們經(jīng)常需要過濾一下一些輸入完密碼不小心多敲了一下空格的兄弟輸入的內(nèi)容投慈。
<input type="text" v-model.trim="value">
為了讓你更清楚的看到，我改了一下樣式策吠，不過問題不大逛裤，相信你已經(jīng)清楚看到這個大大的hello左右兩邊沒有空格，盡管你在input框里敲爛了空格鍵猴抹。
需要注意的是带族，它只能過濾首尾的空格！首尾蟀给，中間的是不會過濾的
.number
看這個名字就知道蝙砌，應(yīng)該是限制輸入數(shù)字或者輸入的東西轉(zhuǎn)換成數(shù)字，but不是辣么干的跋理。
如果你先輸入數(shù)字择克，那它就會限制你輸入的只能是數(shù)字。
如果你先輸入字符串前普，那它就相當于沒有加.number
事件修飾符
.stop
由于事件冒泡的機制肚邢，我們給元素綁定點擊事件的時候，也會觸發(fā)父級的點擊事件拭卿。
<div @click="shout(2)">
<button @click="shout(1)">ok</button>
</div>
//js
shout(e){
console.log(e)
}
//1
//2
一鍵阻止事件冒泡骡湖，簡直方便得不行。相當于調(diào)用了event.stopPropagation()方法峻厚。
<div @click="shout(2)">
<button @click.stop="shout(1)">ok</button>
</div>
//只輸出1
.prevent
用于阻止事件的默認行為响蕴，例如，當點擊提交按鈕時阻止對表單的提交惠桃。相當于調(diào)用了event.preventDefault()方法浦夷。
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
注意：修飾符可以同時使用多個,但是可能會因為順序而有所不同。
用 v-on:click.prevent.self 會阻止所有的點擊辜王，而 v-on:click.self.prevent 只會阻止對元素自身的點擊劈狐。
也就是從左往右判斷~
.self
只當事件是從事件綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。像下面所示誓禁，剛剛我們從.stop時候知道子元素會冒泡到父元素導(dǎo)致觸發(fā)父元素的點擊事件懈息，當我們加了這個.self以后，我們點擊button不會觸發(fā)父元素的點擊事件shout摹恰，只有當點擊到父元素的時候（藍色背景）才會shout~從這個self的英文翻譯過來就是‘自己辫继，本身’可以看出這個修飾符的用法
<div class="blue" @click.self="shout(2)">
<button @click="shout(1)">ok</button>
</div>
.once
這個修飾符的用法也是和名字一樣簡單粗暴怒见，只能用一次，綁定了事件以后只能觸發(fā)一次姑宽，第二次就不會觸發(fā)遣耍。
//鍵盤按壞都只能shout一次
<button @click.once="shout(1)">ok</button>
.capture
從上面我們知道了事件的冒泡，其實完整的事件機制是：捕獲階段--目標階段--冒泡階段炮车。
默認的呢舵变，是事件觸發(fā)是從目標開始往上冒泡。
當我們加了這個.capture以后呢瘦穆，我們就反過來了纪隙，事件觸發(fā)從包含這個元素的頂層開始往下觸發(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>
// 1 2 4 3
從上面這個例子我們點擊obj4的時候扛或，就可以清楚地看出區(qū)別绵咱，obj1，obj2在捕獲階段就觸發(fā)了事件熙兔，因此是先1后2悲伶，后面的obj3，obj4是默認的冒泡階段觸發(fā)住涉，因此是先4然后冒泡到3~
.passive
當我們在監(jiān)聽元素滾動事件的時候麸锉，會一直觸發(fā)onscroll事件，在pc端是沒啥問題的舆声，但是在移動端花沉，會讓我們的網(wǎng)頁變卡，因此我們使用這個修飾符的時候媳握，相當于給onscroll事件整了一個.lazy修飾符
<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發(fā) -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>
.native
我們經(jīng)常會寫很多的小組件主穗，有些小組件可能會綁定一些事件，但是毙芜，像下面這樣綁定事件是不會觸發(fā)的
<My-component @click="shout(3)"></My-component>
必須使用.native來修飾這個click事件（即），可以理解為該修飾符的作用就是把一個vue組件轉(zhuǎn)化為一個普通的HTML標簽争拐，
注意：使用.native修飾符來操作普通HTML標簽是會令事件失效的
鼠標按鈕修飾符
剛剛我們講到這個click事件腋粥，我們一般是會用左鍵觸發(fā)，有時候我們需要更改右鍵菜單啥的架曹，就需要用到右鍵點擊或者中間鍵點擊隘冲，這個時候就要用到鼠標按鈕修飾符
.left 左鍵點擊
.right 右鍵點擊
.middle 中鍵點擊
<button @click.right="shout(1)">ok</button>
鍵值修飾符
其實這個也算是事件修飾符的一種，因為它都是用來修飾鍵盤事件的绑雄。
比如onkeyup展辞，onkeydown啊
.keyCode
如果不用keyCode修飾符，那我們每次按下鍵盤都會觸發(fā)shout万牺，當我們想指定按下某一個鍵才觸發(fā)這個shout的時候罗珍，這個修飾符就有用了洽腺，具體鍵碼查看鍵碼對應(yīng)表https://zhidao.baidu.com/question/266291349.html
<input type="text" @keyup.keyCode="shout(4)">
為了方便我們使用，vue給一些常用的鍵提供了別名
//普通鍵
.enter
.tab
.delete //(捕獲“刪除”和“退格”鍵)
.space
.esc
.up
.down
.left
.right
//系統(tǒng)修飾鍵
.ctrl
.alt
.meta
.shift
可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名：
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
我們從上面看到覆旱，鍵分成了普通常用的鍵和系統(tǒng)修飾鍵蘸朋，區(qū)別是什么呢？
當我們寫如下代碼的時候,我們會發(fā)現(xiàn)如果僅僅使用系統(tǒng)修飾鍵是無法觸發(fā)keyup事件的扣唱。
<input type="text" @keyup.ctrl="shout(4)">
那該如何呢藕坯？我們需要將系統(tǒng)修飾鍵和其他鍵碼鏈接起來使用，比如
<input type="text" @keyup.ctrl.67="shout(4)">
這樣當我們同時按下ctrl+c時噪沙，就會觸發(fā)keyup事件炼彪。
另，如果是鼠標事件正歼，那就可以單獨使用系統(tǒng)修飾符辐马。
<button @mouseover.ctrl="shout(1)">ok</button>
<button @mousedown.ctrl="shout(1)">ok</button>
<button @click.ctrl.67="shout(1)">ok</button>
大概是什么意思呢，就是你不能單手指使用系統(tǒng)修飾鍵的修飾符（最少兩個手指朋腋，可以多個）齐疙。你可以一個手指按住系統(tǒng)修飾鍵一個手指按住另外一個鍵來實現(xiàn)鍵盤事件。也可以用一個手指按住系統(tǒng)修飾鍵旭咽，另一只手按住鼠標來實現(xiàn)鼠標事件贞奋。
.exact (2.5新增)
我們上面說了這個系統(tǒng)修飾鍵，當我們像這樣綁定了click鍵按下的事件穷绵，驚奇的是轿塔，我們同時按下幾個系統(tǒng)修飾鍵，比如ctrl shift點擊仲墨，也能觸發(fā)勾缭，可能有些場景我們只需要或者只能按一個系統(tǒng)修飾鍵來觸發(fā)（像制作一些快捷鍵的時候），而當我們按下ctrl和其他鍵的時候則無法觸發(fā)目养。那就這樣寫俩由。
注意：這個只是限制系統(tǒng)修飾鍵的，像下面這樣書寫以后你還是可以按下ctrl + c癌蚁，ctrl+v或者ctrl+普通鍵 來觸發(fā)幻梯，但是不能按下ctrl + shift +普通鍵來觸發(fā)。
<button type="text" @click.ctrl.exact="shout(4)">ok</button>
然后下面這個你可以同時按下enter+普通鍵來觸發(fā)努释，但是不能按下系統(tǒng)修飾鍵+enter來觸發(fā)碘梢。相信你已經(jīng)能聽懂了8~
<input type="text" @keydown.enter.exact="shout('我被觸發(fā)了')">
v-bind修飾符
.sync(2.3.0+ 新增)
在有些情況下，我們可能需要對一個 prop 進行“雙向綁定”伐蒂。不幸的是煞躬，真正的雙向綁定會帶來維護上的問題，因為子組件可以修改父組件，且在父組件和子組件都沒有明顯的改動來源恩沛。我們通常的做法是
//父親組件
<comp :myMessage="bar" @update:myMessage="func"></comp>
//js
func(e){
this.bar = e;
}
//子組件js
func2(){
this.$emit('update:myMessage',params);
}
現(xiàn)在這個.sync修飾符就是簡化了上面的步驟
//父組件
<comp :myMessage.sync="bar"></comp>
//子組件
this.$emit('update:myMessage',params);
這樣確實會方便很多在扰，但是也有很多需要注意的點
1、使用sync的時候复唤，子組件傳遞的事件名必須為update:value健田，其中value必須與子組件中props中聲明的名稱完全一致(如上例中的myMessage，不能使用my-message)
2佛纫、注意帶有 .sync 修飾符的 v-bind 不能和表達式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是無效的)妓局。取而代之的是，你只能提供你想要綁定的屬性名呈宇，類似 v-model好爬。
3將 v-bind.sync 用在一個字面量的對象上，例如 v-bind.sync=”{ title: doc.title }”甥啄，是無法正常工作的存炮，因為在解析一個像這樣的復(fù)雜表達式的時候，有很多邊緣情況需要考慮蜈漓。
.prop
要學(xué)習(xí)這個修飾符穆桂，我們首先要搞懂兩個東西的區(qū)別。
Property：節(jié)點對象在內(nèi)存中存儲的屬性融虽，可以訪問和設(shè)置享完。
Attribute：節(jié)點對象的其中一個屬性( property )，值是一個對象有额。
可以通過點訪問法 document.getElementById('xx').attributes 或者 document.getElementById('xx').getAttributes('xx') 讀取般又，通過 document.getElementById('xx').setAttribute('xx',value) 新增和修改。
在標簽里定義的所有屬性包括 HTML 屬性和自定義屬性都會在 attributes 對象里以鍵值對的方式存在巍佑。
其實attribute和property兩個單詞茴迁，翻譯出來都是屬性，但是《javascript高級程序設(shè)計》將它們翻譯為特性和屬性萤衰，以示區(qū)分
//這里的id,value,style都屬于property
//index屬于attribute
//id堕义、title等既是屬性，也是特性脆栋。修改屬性胳螟，其對應(yīng)的特性會發(fā)生改變；修改特性筹吐，屬性也會改變
<input id="uid" title="title1" value="1" :index="index">
//input.index === undefined
//input.attributes.index === this.index
從上面我們可以看到如果直接使用v-bind綁定，則默認會綁定到dom節(jié)點的attribute秘遏。
為了
通過自定義屬性存儲變量丘薛，避免暴露數(shù)據(jù)
防止污染 HTML 結(jié)構(gòu)
我們可以使用這個修飾符，如下
<input id="uid" title="title1" value="1" :index.prop="index">
//input.index === this.index
//input.attributes.index === undefined
.camel
由于HTML 特性是不區(qū)分大小寫的邦危。
<svg :viewBox="viewBox"></svg>
實際上會渲染為
<svg viewbox="viewBox"></svg>
這將導(dǎo)致渲染失敗洋侨，因為 SVG 標簽只認 viewBox舍扰，卻不知道 viewbox 是什么。
如果我們使用.camel修飾符希坚，那它就會被渲染為駝峰名边苹。
另，如果你使用字符串模版裁僧，則沒有這些限制个束。
new Vue({
template: '<svg :viewBox="viewBox"></svg>'
})
