原文連結：segmentfault.com
為了友善大家寫代碼，vue.js給大家提供了很多友善的修飾符，比如我們經常用到的取消冒泡，阻止預設事件等等~
目錄
- 表單修飾符
- 事件修飾符
- 滑鼠按鍵修飾符
- 鍵值修飾符
- v-bind修飾符（實在不知道叫啥名字）
表單修飾符
填寫表單，最常用的是什麼？input！v-model~而我們的修飾符正是為了簡化這些東西而存在的
- .lazy
<div>
<input type="text" v-model="value">
<p>{{value}}</p>
</div>
從這裡我們可以看到，我們還在輸入的時候，光标還在的時候，下面的值就已經出來了，可以說是非常地實時。但是有時候我們希望，在我們輸入完所有東西，光标離開才更新視圖。
<div>
<input type="text" v-model.lazy="value">
<p>{{value}}</p>
</div>
這樣即可~這樣隻有當我們光标離開輸入框的時候，它才會更新視圖，相當于在onchange事件觸發更新。
- .trim
在我們的輸入框中，我們經常需要過濾一下一些輸入完密碼不小心多敲了一下空格的兄弟輸入的内容。
為了讓你更清楚的看到，我改了一下樣式，不過問題不大，相信你已經清楚看到這個大大的hello左右兩邊沒有空格，盡管你在input框裡敲爛了空格鍵。
需要注意的是，它隻能過濾首尾的空格！首尾，中間的是不會過濾的
.number
看這個名字就知道，應該是限制輸入數字或者輸入的東西轉換成數字，but不是辣麼趕單。
如果你先輸入數字，那它就會限制你輸入的隻能是數字。如果你先輸入字元串，那它就相當于沒有加.number
事件修飾符
- .stop
由于事件冒泡的機制，我們給元素綁定點選事件的時候，也會觸發父級的點選事件。
<div @click="shout(2)">
<button @click="shout(1)">ok</button>
</div>
//js
shout(e){
console.log(e)
}
//1
//2
一鍵阻止事件冒泡，簡直友善得不行。相當于調用了event.stopPropagation()方法。
<div @click="shout(2)">
<button @click.stop="shout(1)">ok</button>
</div>
//隻輸出1
- .prevent
用于阻止事件的預設行為，例如，當點選送出按鈕時阻止對表單的送出。相當于調用了event.preventDefault()方法。
<!-- 送出事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
注意：
修飾符可以同時使用多個,但是可能會因為順序而有所不同。
用 v-on:click.prevent.self 會阻止所有的點選，而 v-on:click.self.prevent 隻會阻止對元素自身的點選。
也就是從左往右判斷~
- .self
隻當事件是從事件綁定的元素本身觸發時才觸發回調。像下面所示，剛剛我們從.stop時候知道子元素會冒泡到父元素導緻觸發父元素的點選事件，當我們加了這個.self以後，我們點選button不會觸發父元素的點選事件shout，隻有當點選到父元素的時候（藍色背景）才會shout~從這個self的英文翻譯過來就是‘自己，本身’可以看出這個修飾符的用法
<div class="blue" @click.self="shout(2)">
<button @click="shout(1)">ok</button>
</div>
- .once
這個修飾符的用法也是和名字一樣簡單粗暴，隻能用一次，綁定了事件以後隻能觸發一次，第二次就不會觸發。
//鍵盤按壞都隻能shout一次
<button @click.once="shout(1)">ok</button>
- .capture
從上面我們知道了事件的冒泡，其實完整的事件機制是：捕獲階段–目标階段–冒泡階段。
預設的呢，是事件觸發是從目标開始往上冒泡。
當我們加了這個.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
從上面這個例子我們點選obj4的時候，就可以清楚地看出差別，obj1，obj2在捕獲階段就觸發了事件，是以是先1後2，後面的obj3，obj4是預設的冒泡階段觸發，是以是先4然後冒泡到3~
- .passive
當我們在監聽元素滾動事件的時候，會一直觸發onscroll事件，在pc端是沒啥問題的，但是在移動端，會讓我們的網頁變卡，是以我們使用這個修飾符的時候，相當于給onscroll事件整了一個.lazy修飾符
<!-- 滾動事件的預設行為 (即滾動行為) 将會立即觸發 -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>
- .native
我們經常會寫很多的小元件，有些小元件可能會綁定一些事件，但是，像下面這樣綁定事件是不會觸發的
<My-component @click="shout(3)"></My-component>
必須使用.native來修飾這個click事件
<My-component @click.native="shout(3)"></My-component>
可以了解為該修飾符的作用就是把一個vue元件轉化為一個普通的HTML标簽，
注意：使用.native修飾符來操作普通HTML标簽是會令事件失效的
滑鼠按鈕修飾符
剛剛我們講到這個click事件，我們一般是會用左鍵觸發，有時候我們需要更改右鍵菜單啥的，就需要用到右鍵點選或者中間鍵點選，這個時候就要用到滑鼠按鈕修飾符
- .left 左鍵點選
- .right 右鍵點選
- .middle 中鍵點選
<button @click.right="shout(1)">ok</button>
鍵值修飾符
其實這個也算是事件修飾符的一種，因為它都是用來修飾鍵盤事件的。比如onkeyup，onkeydown啊
- .keyCode
如果不用keyCode修飾符，那我們每次按下鍵盤都會觸發shout，當我們想指定按下某一個鍵才觸發這個shout的時候，這個修飾符就有用了，具體鍵碼檢視鍵碼對應表
<input type="text" @keyup.keyCode="shout(4)">
為了友善我們使用，vue給一些常用的鍵提供了别名
//普通鍵
.enter
.tab
.delete //(捕獲“删除”和“倒退”鍵)
.space
.esc
.up
.down
.left
.right
//系統修飾鍵
.ctrl
.alt
.meta
.shift
可以通過全局 config.keyCodes 對象自定義按鍵修飾符别名：
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
我們從上面看到，鍵分成了普通常用的鍵和系統修飾鍵，差別是什麼呢？
當我們寫如下代碼的時候,我們會發現如果僅僅使用系統修飾鍵是無法觸發keyup事件的。
<input type="text" @keyup.ctrl="shout(4)">
那該如何呢？我們需要将系統修飾鍵和其他鍵碼連結起來使用，比如
<input type="text" @keyup.ctrl.67="shout(4)">
這樣當我們同時按下ctrl+c時，就會觸發keyup事件。另，如果是滑鼠事件，那就可以單獨使用系統修飾符。
<button @mouseover.ctrl="shout(1)">ok</button>
<button @mousedown.ctrl="shout(1)">ok</button>
<button @click.ctrl.67="shout(1)">ok</button>
大概是什麼意思呢，就是你不能單手指使用系統修飾鍵的修飾符（最少兩個手指，可以多個）。你可以一個手指按住系統修飾鍵一個手指按住另外一個鍵來實作鍵盤事件。也可以用一個手指按住系統修飾鍵，另一隻手按住滑鼠來實作滑鼠事件。
- .exact (2.5新增)
我們上面說了這個系統修飾鍵，當我們像這樣
<button type="text" @click.ctrl="shout(4)"></button>
綁定了click鍵按下的事件，驚奇的是，我們同時按下幾個系統修飾鍵，比如ctrl shift點選，也能觸發，可能有些場景我們隻需要或者隻能按一個系統修飾鍵來觸發（像制作一些快捷鍵的時候），而當我們按下ctrl和其他鍵的時候則無法觸發。那就這樣寫。
注意：這個隻是限制系統修飾鍵的，像下面這樣書寫以後你還是可以按下ctrl + c，ctrl+v或者ctrl+普通鍵 來觸發，但是不能按下ctrl + shift +普通鍵來觸發。
<button type="text" @click.ctrl.exact="shout(4)">ok</button>
然後下面這個你可以同時按下enter+普通鍵來觸發，但是不能按下系統修飾鍵+enter來觸發。相信你已經能聽懂了8~
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);
}
現在這個.sync修飾符就是簡化了上面的步驟
//父元件
<comp :myMessage.sync="bar"></comp>
//子元件
this.$emit('update:myMessage',params);
這樣确實會友善很多，但是也有很多需要注意的點
- 使用sync的時候，子元件傳遞的事件名必須為update:value，其中value必須與子元件中props中聲明的名稱完全一緻(如上例中的myMessage，不能使用my-message)
注意帶有 .sync 修飾符的 v-bind 不能和表達式一起使用 (例如 v-bind:title.sync=”doc.title +
‘!’” 是無效的)。取而代之的是，你隻能提供你想要綁定的屬性名，類似 v-model。
将 v-bind.sync 用在一個字面量的對象上，例如 v-bind.sync=”{ title: doc.title
}”，是無法正常工作的，因為在解析一個像這樣的複雜表達式的時候，有很多邊緣情況需要考慮。
- .prop
要學習這個修飾符，我們首先要搞懂兩個東西的差別。
Property：節點對象在記憶體中存儲的屬性，可以通路和設定。 Attribute：節點對象的其中一個屬性( property
)，值是一個對象。 可以通過點通路法 document.getElementById(‘xx’).attributes 或者
document.getElementById(‘xx’).getAttributes(‘xx’) 讀取，通過
document.getElementById(‘xx’).setAttribute(‘xx’,value) 新增和修改。
在标簽裡定義的所有屬性包括 HTML 屬性和自定義屬性都會在 attributes 對象裡以鍵值對的方式存在。
其實attribute和property兩個單詞，翻譯出來都是屬性，但是《javascript進階程式設計》将它們翻譯為特性和屬性，以示區分
//這裡的id,value,style都屬于property
//index屬于attribute
//id、title等既是屬性，也是特性。修改屬性，其對應的特性會發生改變；修改特性，屬性也會改變
<input id="uid" title="title1" value="1" :index="index">
//input.index === undefined
//input.attributes.index === this.index
從上面我們可以看到如果直接使用v-bind綁定，則預設會綁定到dom節點的attribute。為了
- 通過自定義屬性存儲變量，避免暴露資料
- 防止污染 HTML 結構
我們可以使用這個修飾符，如下
<input id="uid" title="title1" value="1" :index.prop="index">
//input.index === this.index
//input.attributes.index === undefined
- .camel
由于HTML 特性是不區分大小寫的。
<svg :viewBox="viewBox"></svg>
實際上會渲染為
<svg viewbox="viewBox"></svg>
這将導緻渲染失敗，因為 SVG 标簽隻認 viewBox，卻不知道 viewbox 是什麼。
如果我們使用.camel修飾符，那它就會被渲染為駝峰名。
另，如果你使用字元串模版，則沒有這些限制。
new Vue({
template: '<svg :viewBox="viewBox"></svg>'
})