本篇將簡單介紹常用的修飾符。
在上一篇中，介紹了 v-model 和 v-on 簡單用法。除了常規(guī)用法，這些指令也支持特殊方式綁定方法，以修飾符的方式實現(xiàn)。通常都是在指令后面用小數(shù)點“.”連接修飾符名稱。
一、v-model的修飾符
v-model 是用于在表單表單元素上創(chuàng)建雙向數(shù)據(jù)綁定的指令。在 <input> 和 <textarea> 上，默認通過監(jiān)聽元素的 input 事件來更新綁定的屬性值。
為了能明顯的看到綁定屬性值的變化，需要在Chrome瀏覽器中安裝Vue Devtools擴展程序。當查看Vue開發(fā)的頁面時，按F12就可以在開發(fā)者工具里看到Vue頁簽。這里需要注意，只有在引用Vue的開發(fā)版本文件，即vue.js文件時，Vue Devtools工具才能正常使用。
.lazy
首先在 vm 對象中增加需要綁定的屬性
1 var vm = new Vue({2 el: "#app",3 data: {4 input_lazy: ""5 }6 });在頁面中的 input 的元素上添加指令
1 <div class="row">2 <h2>v-model.lazy</h2>3 <input type="text" v-model.lazy="input_lazy" />4 </div>
打開頁面，開啟Vue Devtools，在文本框中輸入字符，查看屬性值變化
當在文本框輸入內(nèi)容，并且光標焦點沒有離開文本框時，屬性值沒有實時發(fā)生變化
而當焦點離開文本框時，屬性值發(fā)生了變化并與文本框內(nèi)容保持一致。從這個例子可以看出 .lazy 修飾符延遲了同步更新屬性值的時機。即將原本綁定在 input 事件的同步邏輯轉(zhuǎn)變?yōu)榻壎ㄔ?nbsp;change 事件上。
.number
該修飾符用來將輸入內(nèi)容自動轉(zhuǎn)換成數(shù)值。
在 vm 對象里增加一個屬性，默認為空字符串
1 var vm = new Vue({2 el: "#app",3 data: {4 input_number: ""5 }6 });在頁面的 input 元素上添加指令
1 <div class="row">2 <h2>v-model.number</h2>3 <input type="text" v-model.number="input_number" />4 <hr />5 </div>
打開頁面，在文本框內(nèi)輸入內(nèi)容，查看綁定屬性值的變化
當開始輸入數(shù)字時，屬性值將實時更新成Number類型的數(shù)值。數(shù)字后輸入其他非數(shù)字的字符，屬性值將不再變化。
而當開始輸入非數(shù)字的字符串時，因為Vue無法將字符串轉(zhuǎn)換成數(shù)值，所以屬性值將實時更新成相同的字符串。即使后面輸入數(shù)字，也將被視作字符串。
.trim
該修飾符用來自動過濾字符串前后的空字符。
在 vm 對象中增加一個屬性，默認為空字符串
1 var vm = new Vue({2 el: "#app",3 data: {4 input_trim: ""5 }6 });在 input 上添加指令
1 <div class="row">2 <h2>v-model.trim</h2>3 <input type="text" v-model.trim="input_trim" />4 <hr />5 </div>
打開頁面，在文本框輸入內(nèi)容，并在內(nèi)容前后添加多個空格
Vue會自動過濾掉前后的多個空格，最終屬性值是前后沒有空字符的字符串。
二、v-on的修飾符
綁定的事件修飾符可以改變事件的觸發(fā)方式。
.stop
該修飾符將阻止事件向上冒泡。同理于調(diào)用 event.stopPropagation() 方法
在 vm 對象里添加兩個事件
1 var vm = new Vue({ 2 el: "#app", 3 methods: { 4 div_click: function () { 5 console.log("div click..."); 6 }, 7 stop_click: function () { 8 console.log("stop_click..."); 9 }10 }11 });
將上面兩個方法綁定到一組具有父子關(guān)系的元素上
1 <div class="row">2 <h2>v-on.stop</h2>3 <div @click="div_click">4 <button type="button" @click.stop="stop_click">StopPropagation</button>5 </div>6 <hr />7 </div>
打開頁面，并點擊按鈕，查看控制臺打印結(jié)果
按照事件冒泡原理，點擊按鈕時，從當前觸發(fā)的元素開始，沿著它的父元素一直到根元素，都會依次觸發(fā) click 事件。但是應(yīng)用了 .stop 修飾符后，將只會觸發(fā)當前元素的 click 事件，并阻止事件向上冒泡。
.prevent
該修飾符會阻止當前事件的默認行為。同理于調(diào)用 event.preventDefault() 方法
在 vm 對象里添加一個測試方法
1 var vm = new Vue({2 el: "#app",3 methods: {4 form_submit: function () {5 console.log("form submit!");6 }7 }8 });
頁面添加一個 form 表單，并綁定表單的提交事件
1 <div class="row">2 <h2>v-on.prevent</h2>3 <form @submit.prevent="form_submit">4 <button type="submit">Submit</button>5 </form>6 <hr />7 </div>
當點擊提交按鈕時，會觸發(fā)綁定的事件，并且阻止表單提交并刷新當前頁面的默認行為。
.self
該指令只當事件是從事件綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)
修改上面 .stop 的例子，在父元素 div 上添加樣式
1 <div class="row">2 <h2>v-on.self</h2>3 <div @click.self="div_click" style="display:inline-block; width: 200px; background-color:red;">4 <button type="button" @click="stop_click">Button</button>5 </div>6 <hr />7 </div>
打開頁面
因為父元素比它的子元素要長，所以右側(cè)會有一部分紅色的父元素顯示出來。分別點擊按鈕和紅色區(qū)域，查看控制臺打印結(jié)果
因為 div_click 事件被修飾符綁定，只有在直接點擊到父元素 div ，即紅色區(qū)域內(nèi)，事件才會被觸發(fā)。
即使點擊了它的子元素觸發(fā)了子元素的事件，按照事件冒泡原理，父元素的事件應(yīng)當被觸發(fā)，但是因為事件的觸發(fā)源并不是事件綁定的元素本身，所以父元素事件不會被觸發(fā)。
.one
該修飾符表示綁定的事件只會被觸發(fā)一次
在 vm 對象中添加一個測試方法
1 var vm = new Vue({2 el: "#app",3 methods: {4 once_click: function () {5 console.log("once click...");6 }7 }8 });
頁面添加一個按鈕，綁定事件
1 <div class="row">2 <h2>v-on.once</h2>3 <button type="button" @click.once="once_click">Button</button>4 <hr />5 </div>
打開頁面，多次點擊按鈕。只有在第一次點擊時，事件才會觸發(fā)。
鍵值修飾符
該修飾符可以用來監(jiān)聽鍵盤事件
在 vm 對象中添加一個測試方法
1 var vm = new Vue({2 el: "#app",3 methods: {4 enter_click: function () {5 console.log("enter click...");6 }7 }8 });
頁面增加一個 input 元素，監(jiān)聽鍵盤事件
1 <div class="row">2 <h2>鍵值修飾符</h2>3 <input type="text" @keyup.13="enter_click" />4 <hr />5 </div>
打開頁面，在文本框輸入內(nèi)容，并按回車，查看控制臺打印結(jié)果
通過 keyup.keyCode 的方式來監(jiān)聽鍵盤特定按鍵的事件。也可以通過按鍵名稱來監(jiān)聽
1 <input type="text" @keyup.enter="enter_click"/>
也可以自定義按鍵名稱
1 // 自定義按鍵名稱2 Vue.config.keyCodes.ent = 13;3 4 // 頁面引用5 <input type="text" @keyup.ent="enter_click"/>
http://www.cnblogs.com/niklai/p/7171873.html
