Vue.js學習筆記(三) - 修飾符

本篇將簡單介紹經常使用的修飾符。html

上一篇中,介紹了 v-model 和 v-on 簡單用法。除了常規用法,這些指令也支持特殊方式綁定方法,以修飾符的方式實現。一般都是在指令後面用小數點「.」鏈接修飾符名稱。vue

 

1、v-model的修飾符

 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會自動過濾掉先後的多個空格,最終屬性值是先後沒有空字符的字符串。

 

2、v-on的修飾符

綁定的事件修飾符能夠改變事件的觸發方式。

.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"/>
相關文章
相關標籤/搜索