Vue.js學習筆記（二） - 經常使用模板語法

時間 2019-12-11

標籤 vue.js vue 學習筆記經常使用模板語法欄目 JavaScript 简体版

原文原文鏈接

本篇將在上一篇的基礎上記錄文本渲染、表達式、過濾器以及經常使用指令的簡單用法。html

1、文本渲染

Vue支持動態渲染文本，即在修改屬性的同時，實時渲染文本內容。同時爲了提升渲染效率，也支持只渲染一次，即第一次渲染出文本後，文本內容再也不跟隨屬性值的變化而變化。vue

實時渲染node

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 }} 表達式顯示在頁面上。當修改文本框內容時，後面的頁面內容將實時變化並與文本框內容保持一致。jquery

一次渲染express

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 指令後，不管如何修改文本框內容，頁面內容都不會變化。bootstrap

HTML代碼渲染數組

某些狀況下，頁面須要動態的插入一段HTML代碼app

在 vm 對象裏添加屬性，屬性值爲一段HTML代碼ui

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>

2、表達式

上文中已經介紹過的 {{ 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 屬性值的字符進行倒序排列後從新組合起來。

3、過濾器

過濾器常常用來進行內容的格式化顯示。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>

4、經常使用指令

指令就是將一些特殊行爲應用到頁面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指令也支持縮寫，用@符號代替，好比： @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>