本篇將簡單介紹經常使用的修飾符。html
在上一篇中,介紹了 v-model 和 v-on 簡單用法。除了常規用法,這些指令也支持特殊方式綁定方法,以修飾符的方式實現。一般都是在指令後面用小數點「.」鏈接修飾符名稱。vue
v-model 是用於在表單表單元素上建立雙向數據綁定的指令。在 <input> 和 <textarea> 上,默認經過監聽元素的 input 事件來更新綁定的屬性值。瀏覽器
爲了能明顯的看到綁定屬性值的變化,須要在Chrome瀏覽器中安裝Vue Devtools擴展程序。當查看Vue開發的頁面時,按F12就能夠在開發者工具裏看到Vue頁籤。這裏須要注意,只有在引用Vue的開發版本文件,即vue.js文件時,Vue Devtools工具才能正常使用。app
.lazy工具
首先在 vm 對象中增長鬚要綁定的屬性測試
1 var vm = new Vue({ 2 el: "#app", 3 data: { 4 input_lazy: "" 5 } 6 });
在頁面中的 input 的元素上添加指令spa
1 <div class="row"> 2 <h2>v-model.lazy</h2> 3 <input type="text" v-model.lazy="input_lazy" /> 4 </div>
打開頁面,開啓Vue Devtools,在文本框中輸入字符,查看屬性值變化3d
當在文本框輸入內容,而且光標焦點沒有離開文本框時,屬性值沒有實時發生變化code
而當焦點離開文本框時,屬性值發生了變化並與文本框內容保持一致。從這個例子能夠看出 .lazy 修飾符延遲了同步更新屬性值的時機。即將本來綁定在 input 事件的同步邏輯轉變爲綁定在 change 事件上。orm
.number
該修飾符用來將輸入內容自動轉換成數值。
在 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>
打開頁面,在文本框內輸入內容,查看綁定屬性值的變化
當開始輸入數字時,屬性值將實時更新成Number類型的數值。數字後輸入其餘非數字的字符,屬性值將再也不變化。
而當開始輸入非數字的字符串時,由於Vue沒法將字符串轉換成數值,因此屬性值將實時更新成相同的字符串。即便後面輸入數字,也將被視做字符串。
.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>
打開頁面,在文本框輸入內容,並在內容先後添加多個空格
Vue會自動過濾掉先後的多個空格,最終屬性值是先後沒有空字符的字符串。
綁定的事件修飾符能夠改變事件的觸發方式。
.stop
該修飾符將阻止事件向上冒泡。同理於調用 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 });
將上面兩個方法綁定到一組具備父子關係的元素上
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>
打開頁面,並點擊按鈕,查看控制檯打印結果
按照事件冒泡原理,點擊按鈕時,從當前觸發的元素開始,沿着它的父元素一直到根元素,都會依次觸發 click 事件。可是應用了 .stop 修飾符後,將只會觸發當前元素的 click 事件,並阻止事件向上冒泡。
.prevent
該修飾符會阻止當前事件的默認行爲。同理於調用 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>
當點擊提交按鈕時,會觸發綁定的事件,而且阻止表單提交併刷新當前頁面的默認行爲。
.self
該指令只當事件是從事件綁定的元素自己觸發時才觸發回調
修改上面 .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>
打開頁面
由於父元素比它的子元素要長,因此右側會有一部分成色的父元素顯示出來。分別點擊按鈕和紅色區域,查看控制檯打印結果
由於 div_click 事件被修飾符綁定,只有在直接點擊到父元素 div ,即紅色區域內,事件纔會被觸發。
即便點擊了它的子元素觸發了子元素的事件,按照事件冒泡原理,父元素的事件應當被觸發,可是由於事件的觸發源並非事件綁定的元素自己,因此父元素事件不會被觸發。
.one
該修飾符表示綁定的事件只會被觸發一次
在 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>
打開頁面,屢次點擊按鈕。只有在第一次點擊時,事件纔會觸發。
鍵值修飾符
該修飾符能夠用來監聽鍵盤事件
在 vm 對象中添加一個測試方法
1 var vm = new Vue({ 2 el: "#app", 3 methods: { 4 enter_click: function () { 5 console.log("enter click..."); 6 } 7 } 8 });
頁面增長一個 input 元素,監聽鍵盤事件
1 <div class="row"> 2 <h2>鍵值修飾符</h2> 3 <input type="text" @keyup.13="enter_click" /> 4 <hr /> 5 </div>
打開頁面,在文本框輸入內容,並按回車,查看控制檯打印結果
經過 keyup.keyCode 的方式來監聽鍵盤特定按鍵的事件。也能夠經過按鍵名稱來監聽
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"/>