一、文本渲染

Vue支持動態(tài)渲染文本，即在修改屬性的同時，實時渲染文本內(nèi)容。同時為了提高渲染效率，也支持只渲染一次，即第一次渲染出文本后，文本內(nèi)容不再跟隨屬性值的變化而變化。

實時渲染

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 標簽的值動態(tài)綁定到屬性 msg 上，通過 {{ msg }} 表達式顯示在頁面上。當修改文本框內(nèi)容時，后面的頁面內(nèi)容將實時變化并與文本框內(nèi)容保持一致。

一次渲染

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 指令后，無論如何修改文本框內(nèi)容，頁面內(nèi)容都不會變化。

HTML代碼渲染

某些情況下，頁面需要動態(tài)的插入一段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 指令后，元素對應位置將顯示出屬性值內(nèi)的對應元素

1 <div class="row">2   <h2>文本 - HTML</h2>3   <div v-html="html"></div>4 </div>

二、表達式

上文中已經(jīng)介紹過的 {{ 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>

在文本框中輸入數(shù)字，Vue通過表達式內(nèi)的運算符實時計算出結果，并顯示出來。因為文本框內(nèi)容為字符串，所以在表達式中需要對 number 屬性進行類型轉換成數(shù)字。

三元運算表達式

Vue支持在表達式內(nèi)使用三元運算符

1 <div>2   <h4>三元運算表達式</h4>3   <span v-pre>{{ ok ? 'YES' : 'NO' }}：</span><span>{{ ok ? 'YES' : 'NO' }}</span>4 </div>

Javascript方法

表達式內(nèi)也可以使用Javascript支持的基礎方法，Vue會動態(tài)執(zhí)行方法并顯示最終結果

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 屬性值的字符進行倒序排列后重新組合起來。

三、過濾器

過濾器經(jīng)常用來進行內(nèi)容的格式化顯示。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 屬性里，方法的第一個參數(shù)值就是傳遞進來需要被處理的原始內(nèi)容，方法的返回值即時處理過的新內(nèi)容。

自定義的過濾器使用方法如下

1 <div>2   <h4>單一過濾器</h4>3   <span v-pre>{{ filter_msg | filter1 }}：</span><span>{{ filter_msg | filter1 }}</span>4 </div>

上面的例子中，過濾器通過管道符號“|”與需要處理的內(nèi)容進行連接，將 filter_msg 屬性值經(jīng)過 filter1 過濾器，在后面追加內(nèi)容并顯示。

同時，Vue也支持連接多個過濾器

1 <div>2   <h4>串聯(lián)過濾器</h4>3   <span v-pre>{{ filter_msg | filter1 | filter2 }}：</span><span>{{ filter_msg | filter1 | filter2 }}</span>4 </div>

這個例子中，通過管道符號“|”，可以連接多個過濾器，每前一個過濾器的輸出將作為后一個過濾器的輸入，直到顯示最終結果。

當過濾器有多個參數(shù)時，Vue也支持帶參數(shù)調(diào)用

1 <div>2   <h4>過濾器參數(shù)</h4>3   <span v-pre>{{ filter_msg | filter_arg('arg1', 'arg2') }}：</span><span>{{ filter_msg | filter_arg('arg1', 'arg2') }}</span>4 </div>

四、常用指令

指令就是將一些特殊行為應用到頁面DOM元素的特殊屬性。Vue的內(nèi)置指令都是一些帶有 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: true6         }7     });8 });

在上面的例子里，給 vm 對象增加一個名稱為 btn_enabled 的布爾屬性，在按鈕中通過 v-bind:disabled="btn_enabled" 動態(tài)給 disabled 屬性賦值

頁面上可以看到“不能點擊的按鈕”動態(tài)增加了一個 disabled 屬性。同時 v-bind:disabled="!btn_enabled" 也可以簡寫成 :disabled="!btn_enabled" 。

v-on

該指令綁定事件監(jiān)聽器。事件類型由參數(shù)指定。表達式可以是一個方法的名字或一個內(nèi)聯(lián)語句。用在普通元素上時，只能監(jiān)聽原生 DOM 事件。在監(jiān)聽原生 DOM 事件時，方法以事件為唯一的參數(shù)。如果使用內(nèi)聯(lián)語句，語句可以訪問一個 $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>帶事件參數(shù)的點擊事件(v-on:click="btn_clickWithEvent($event)")：</span><button v-on:click="btn_clickWithEvent($event)" type="button">點我！</button><br/>5   <span v-pre>帶自定義參數(shù)的點擊事件(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

該指令用來基于源數(shù)據(jù)多次渲染元素或模板塊。

在 vm 對象里添加一個數(shù)組類型的屬性 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 指令實現(xiàn)一個簡單列表

1 <div>2   <h4>v-for（循環(huán)）</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的數(shù)字時，右側只顯示“小于10”的文本內(nèi)容。

查看源碼發(fā)現(xiàn)，只有“小于10”的內(nèi)容的 span 標簽存在，另外兩個標簽被插入到頁面中。

同樣，在輸入大于10的數(shù)字時，右側只顯示“大于10”的文本內(nèi)容。而源碼里只有對應的 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 ，頁面顯示如下

從頁面顯示的結果上看，沒有任何區(qū)別。但是查看源碼會發(fā)現(xiàn)，符合表達式結果判斷的元素內(nèi)容將被顯示，不符合結果判斷的元素將被隱藏，即被加上 display: none; 的樣式。

從上面兩個例子對比可以看出

• v-if：動態(tài)插入或刪除元素

• v-show：動態(tài)顯示或隱藏元素

本文版權歸作者和博客園共有，歡迎轉載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出作者名和原文連接，否則保留追究法律責任的權利。

http://www.cnblogs.com/niklai/p/7137520.html

延伸閱讀

• 學習、實踐。再學習，再實踐 2023-04-15
• 從0到0.5，堅持學習 2022-09-08
• 來萬碼學習，是我最正確的選擇 2022-09-07
• 云筆記 2022-07-13
• 學習與實踐 2022-06-24
• 學習——工作——再學習 2021-06-01
• 不斷學習，才能不斷進步 2021-05-19
• 此生難忘的一次學習 2020-06-11
• 我的學習之路 2019-11-24
• 互相學習，共同進步——劉*洵 2019-11-06

學習、實踐。再學習，再實踐