Vue常用模板語法
常用模板語法
本篇將在上一篇的基礎上記錄文本渲染、表達式、過濾器以及常用指令的簡單用法。
一、文本渲染
Vue支持動態渲染文本,即在修改屬性的同時,實時渲染文本內容。同時為了提高渲染效率,也支持只渲染一次,即第一次渲染出文本後,文本內容不再跟隨屬性值的變化而變化。
實時渲染
1 <div class="row"> 2 <h2>文本 - 實時渲染</h2> 3 <input type="text" v-model="msg" class="col-md-2" /> 4 <span class="col-md-10">{{ msg }}</span> 5 </div>
v-model 指令將 input 標簽的值動態綁定到屬性 msg 上,通過 {{ msg }} 表達式顯示在頁面上。當修改文本框內容時,後面的頁面內容將實時變化並與文本框內容保持一致。
一次渲染
1 <div class="row"> 2 <h2>文本 - 一次渲染</h2> 3 <input type="text" v-model="msg_once" class="col-md-2" /> 4 <span class="col-md-10" v-once>{{ msg_once }}</span> 5 </div>
在 vm 對象裏添加屬性
1 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) { 2 var vm = new Vue({ 3 el: "#app", 4 data: { 5 msg_once: "once..." 6 } 7 }); 8 });
頁面第一次加載完成時,頁面顯示once...,當 span 標簽加上 v-once 指令後,無論如何修改文本框內容,頁面內容都不會變化。
HTML代碼渲染
某些情況下,頁面需要動態的插入一段HTML代碼
在 vm 對象裏添加屬性,屬性值為一段HTML代碼
1 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) { 2 var vm = new Vue({ 3 el: "#app", 4 data: { 5 html: "<span>This is a html tag.</span>" 6 } 7 }); 8 });
頁面元素添加 v-html 指令後,元素對應位置將顯示出屬性值內的對應元素
1 <div class="row"> 2 <h2>文本 - HTML</h2> 3 <div v-html="html"></div> 4 </div>
二、表達式
上文中已經介紹過的 {{ msg }} 就是一個簡單的表達式。除此之外,還有一些常用的表達式寫法。
運算表達式
在上述簡單表達式中可以使用運算符,Vue會將運算後的結果渲染在頁面上
1 <div> 2 <h4>運算表達式</h4> 3 <span v-pre>{{ Number(number)+1 }}:</span> 4 <input v-model="number" type="text" /> 5 <span>運算結果:{{ Number(number)+1 }}</span> 6 </div>
在文本框中輸入數字,Vue通過表達式內的運算符實時計算出結果,並顯示出來。因為文本框內容為字符串,所以在表達式中需要對 number 屬性進行類型轉換成數字。
三元運算表達式
Vue支持在表達式內使用三元運算符
1 <div> 2 <h4>三元運算表達式</h4> 3 <span v-pre>{{ ok ? ‘YES‘ : ‘NO‘ }}:</span><span>{{ ok ? ‘YES‘ : ‘NO‘ }}</span> 4 </div>Javascript方法 表達式內也可以使用Javascript支持的基礎方法,Vue會動態執行方法並顯示最終結果
1 <div> 2 <h4>Javascript方法</h4> 3 <span v-pre>{{msg_once.split(‘‘).reverse().join(‘‘)}}:</span><span>{{msg_once.split(‘‘).reverse().join(‘‘)}}</span> 4 </div>
這個例子是將 msg_once 屬性值的字符進行倒序排列後重新組合起來。
三、過濾器
過濾器經常用來進行內容的格式化顯示。Vue支持自定義過濾器
首先要在 vm 對象裏增加過濾器方法
1 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) { 2 var vm = new Vue({ 3 el: "#app", 4 data: { 5 filter_msg: ‘base‘ 6 }, 7 filters: { 8 filter1: function (value) { 9 if (!value) { 10 return ‘‘; 11 } 12 13 return value + ‘_filter1‘; 14 }, 15 filter2: function (value) { 16 if (!value) { 17 return ‘‘; 18 } 19 20 return value + ‘_filter2‘; 21 }, 22 filter_arg: function (value, arg1, arg2) { 23 if (!value) { 24 return ‘‘; 25 } 26 27 return value + ‘ ‘ + arg1 + ‘ ‘ + arg2; 28 } 29 } 30 }); 31 });
所有的過濾器方法都要定義在 filters 屬性裏,方法的第一個參數值就是傳遞進來需要被處理的原始內容,方法的返回值即時處理過的新內容。
自定義的過濾器使用方法如下
1 <div> 2 <h4>單一過濾器</h4> 3 <span v-pre>{{ filter_msg | filter1 }}:</span><span>{{ filter_msg | filter1 }}</span> 4 </div>
上面的例子中,過濾器通過管道符號“|”與需要處理的內容進行連接,將 filter_msg 屬性值經過 filter1 過濾器,在後面追加內容並顯示。
同時,Vue也支持連接多個過濾器
1 <div> 2 <h4>串聯過濾器</h4> 3 <span v-pre>{{ filter_msg | filter1 | filter2 }}:</span><span>{{ filter_msg | filter1 | filter2 }}</span> 4 </div>
這個例子中,通過管道符號“|”,可以連接多個過濾器,每前一個過濾器的輸出將作為後一個過濾器的輸入,直到顯示最終結果。
當過濾器有多個參數時,Vue也支持帶參數調用
1 <div> 2 <h4>過濾器參數</h4> 3 <span v-pre>{{ filter_msg | filter_arg(‘arg1‘, ‘arg2‘) }}:</span><span>{{ filter_msg | filter_arg(‘arg1‘, ‘arg2‘) }}</span> 4 </div>
四、常用指令
指令就是將一些特殊行為應用到頁面DOM元素的特殊屬性。Vue的內置指令都是一些帶有 v- 前綴的特殊屬性。
常用的指令如下:
- v-bind
- v-on
- v-for
- v-if
- v-else-if
- v-else
- v-show
v-bind
該指令用來給元素綁定一個或多個特性
1 <div> 2 <h4>v-bind(屬性綁定)</h4> 3 <span v-pre>可用的按鈕(v-bind:disabled="!btn_enabled"):</span><button v-bind:disabled="!btn_enabled" type="button">可以點擊的按鈕</button><br/> 4 <span v-pre>不可用的按鈕(v-bind:disabled="btn_enabled"):</span><button v-bind:disabled="btn_enabled" type="button">不可點擊的按鈕</button><br/> 5 <span v-pre>縮寫(:disabled="!btn_enabled"):</span><button :disabled="!btn_enabled" type="button">可以點擊的按鈕</button> 6 </div>
1 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) { 2 var vm = new Vue({ 3 el: "#app", 4 data: { 5 btn_enabled: true 6 } 7 }); 8 });
在上面的例子裏,給 vm 對象增加一個名稱為 btn_enabled 的布爾屬性,在按鈕中通過 v-bind:disabled="btn_enabled" 動態給 disabled 屬性賦值
頁面上可以看到“不能點擊的按鈕”動態增加了一個 disabled 屬性。同時 v-bind:disabled="!btn_enabled" 也可以簡寫成 :disabled="!btn_enabled" 。
v-on
該指令綁定事件監聽器。事件類型由參數指定。表達式可以是一個方法的名字或一個內聯語句。用在普通元素上時,只能監聽原生 DOM 事件。在監聽原生 DOM 事件時,方法以事件為唯一的參數。如果使用內聯語句,語句可以訪問一個 $event 屬性。
在 vm 對象的 methods 屬性裏添加自定義方法
1 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) { 2 var vm = new Vue({ 3 el: "#app", 4 methods: { 5 btn_click: function () { 6 console.log("button click!"); 7 }, 8 btn_clickWithEvent: function($event){ 9 console.log($event); 10 }, 11 btn_clickWithMsg: function (msg) { 12 console.log("Message is:" + msg); 13 } 14 } 15 }); 16 });
通過屬性 v-on:click="btn_click" 在按鈕上添加 click 事件
1 <div> 2 <h4>v-on(事件綁定)</h4> 3 <span v-pre>點擊事件(v-on:click="btn_click"):</span><button v-on:click="btn_click" type="button">點我!</button><br/> 4 <span v-pre>帶事件參數的點擊事件(v-on:click="btn_clickWithEvent($event)"):</span><button v-on:click="btn_clickWithEvent($event)" type="button">點我!</button><br/> 5 <span v-pre>帶自定義參數的點擊事件(v-on:click="btn_clickWithMsg(‘Hello world!‘)"):</span><button v-on:click="btn_clickWithMsg(‘Hello world!‘)" type="button">點我!</button><br/> 6 <span v-pre>縮寫(@click="btn_click"):</span><button @click="btn_click" type="button">點我!</button> 7 </div>
頁面效果如下
v-on指令也支持縮寫,[email protected],比如: @click="btn_click" 。
v-for
該指令用來基於源數據多次渲染元素或模板塊。
在 vm 對象裏添加一個數組類型的屬性 books
1 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) { 2 var vm = new Vue({ 3 el: "#app", 4 data: { 5 books: ["深入淺出node", "C#本質論", "編程珠璣"] 6 } 7 }); 8 });
通過 v-for 指令實現一個簡單列表
1 <div> 2 <h4>v-for(循環)</h4> 3 <ul> 4 <li v-for="item in books"> 5 {{ item }} 6 </li> 7 </ul> 8 </div>
頁面效果如下
v-for 屬性值是一個 item in expression 結構的表達式,其中 item 代表 expression 運算結果的每一項。最終的HTML代碼如下
v-if、v-else-if、v-else
條件渲染指令,通過表達式結果的真假來插入和刪除元素。 v-if 可以單獨使用,而 v-else-if 、 v-else 必須和 v-if 一起使用。
下面是一個簡單用法的例子
1 <div> 2 <h4>v-if、v-else-if、v-else(分支)</h4> 3 <span>分支示例:</span> 4 <input type="text" v-model="number" /> 5 <span v-if="number>10">大於10</span> 6 <span v-else-if="number==10">等於10</span> 7 <span v-else>小於10</span><br/> 8 </div>
頁面顯示如下
當文本框裏輸入小於10的數字時,右側只顯示“小於10”的文本內容。
查看源碼發現,只有“小於10”的內容的 span 標簽存在,另外兩個標簽被插入到頁面中。
同樣,在輸入大於10的數字時,右側只顯示“大於10”的文本內容。而源碼裏只有對應的 span 標簽存在。
v-show
該指令也是條件渲染指令,但是與上述的 v-if 有不同。這可以通過一個例子來說明。
1 <div> 2 <h4>v-show(條件渲染)</h4> 3 <span>v-show示例:</span> 4 <input type="text" v-model="number" /> 5 <span v-show="number>10">大於10</span> 6 <span v-show="number==10">等於10</span> 7 <span v-show="number<10">小於10</span><br/> 8 </div>
將上面例子裏的指令都換成 v-show ,頁面顯示如下
從頁面顯示的結果上看,沒有任何區別。但是查看源碼會發現,符合表達式結果判斷的元素內容將被顯示,不符合結果判斷的元素將被隱藏,即被加上 display: none; 的樣式。
從上面兩個例子對比可以看出
- v-if:動態插入或刪除元素
- v-show:動態顯示或隱藏元素
Vue常用模板語法