Vue.js學(xué)習(xí)筆記之常用模板語(yǔ)法詳解

更新時(shí)間：2017年07月25日 16:27:22 作者：星辰.Lee

本篇文章主要介紹了Vue.js學(xué)習(xí)筆記之常用模板語(yǔ)法詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了Vue.js 常用模板語(yǔ)法，分享給大家，具體如下：

一、文本渲染

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

實(shí)時(shí)渲染

 <div class="row">
  <h2>文本 - 實(shí)時(shí)渲染</h2>
  <input type="text" v-model="msg" class="col-md-2" />
  <span class="col-md-">{{ msg }}</span>
 </div>

v-model 指令將 input 標(biāo)簽的值動(dòng)態(tài)綁定到屬性 msg 上，通過(guò) {{ msg }} 表達(dá)式顯示在頁(yè)面上。當(dāng)修改文本框內(nèi)容時(shí)，后面的頁(yè)面內(nèi)容將實(shí)時(shí)變化并與文本框內(nèi)容保持一致。

一次渲染

 <div class="row">
  <h2>文本 - 一次渲染</h2>
  <input type="text" v-model="msg_once" class="col-md-2" />
  <span class="col-md-" v-once>{{ msg_once }}</span>
 </div>

在 vm 對(duì)象里添加屬性

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       msg_once: "once..."
     }
   });
 });

頁(yè)面第一次加載完成時(shí)，頁(yè)面顯示once...，當(dāng) span 標(biāo)簽加上 v-once 指令后，無(wú)論如何修改文本框內(nèi)容，頁(yè)面內(nèi)容都不會(huì)變化。

HTML代碼渲染

某些情況下，頁(yè)面需要?jiǎng)討B(tài)的插入一段HTML代碼

在 vm 對(duì)象里添加屬性，屬性值為一段HTML代碼

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       html: "<span>This is a html tag.</span>"
     }
   });
 });

頁(yè)面元素添加 v-html 指令后，元素對(duì)應(yīng)位置將顯示出屬性值內(nèi)的對(duì)應(yīng)元素

 <div class="row">
  <h2>文本 - HTML</h2>
  <div v-html="html"></div>
 </div>

二、表達(dá)式

上文中已經(jīng)介紹過(guò)的 {{ msg }} 就是一個(gè)簡(jiǎn)單的表達(dá)式。除此之外，還有一些常用的表達(dá)式寫法。

運(yùn)算表達(dá)式

在上述簡(jiǎn)單表達(dá)式中可以使用運(yùn)算符，Vue會(huì)將運(yùn)算后的結(jié)果渲染在頁(yè)面上

 <div>
  <h4>運(yùn)算表達(dá)式</h4>
  <span v-pre>{{ Number(number)+ }}：</span>
  <input v-model="number" type="text" />
  <span>運(yùn)算結(jié)果：{{ Number(number)+ }}</span>
 </div>

在文本框中輸入數(shù)字，Vue通過(guò)表達(dá)式內(nèi)的運(yùn)算符實(shí)時(shí)計(jì)算出結(jié)果，并顯示出來(lái)。因?yàn)槲谋究騼?nèi)容為字符串，所以在表達(dá)式中需要對(duì) number 屬性進(jìn)行類型轉(zhuǎn)換成數(shù)字。

三元運(yùn)算表達(dá)式

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

 <div>
  <h4>三元運(yùn)算表達(dá)式</h4>
  <span v-pre>{{ ok ? 'YES' : 'NO' }}：</span><span>{{ ok ? 'YES' : 'NO' }}</span>
 </div>

Javascript方法

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

 <div>
  <h4>Javascript方法</h4>
  <span v-pre>{{msg_once.split('').reverse().join('')}}：</span><span>{{msg_once.split('').reverse().join('')}}</span>
</div>

這個(gè)例子是將 msg_once 屬性值的字符進(jìn)行倒序排列后重新組合起來(lái)。

三、過(guò)濾器

過(guò)濾器經(jīng)常用來(lái)進(jìn)行內(nèi)容的格式化顯示。Vue支持自定義過(guò)濾器

首先要在 vm 對(duì)象里增加過(guò)濾器方法

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       filter_msg: 'base'
     },
     filters: {
       filter: function (value) {
         if (!value) {
           return '';
         }
 
         return value + '_filter1';
       },
       filter2: function (value) {
         if (!value) {
           return '';
         }
 
         return value + '_filter2';
       },
       filter_arg: function (value, arg1, arg2) {
         if (!value) {
           return '';
         }
 
         return value + ' ' + arg1 + ' ' + arg2;
       }
     }
   });
 });

所有的過(guò)濾器方法都要定義在 filters 屬性里，方法的第一個(gè)參數(shù)值就是傳遞進(jìn)來(lái)需要被處理的原始內(nèi)容，方法的返回值即時(shí)處理過(guò)的新內(nèi)容。

自定義的過(guò)濾器使用方法如下

<div>
  <h4>單一過(guò)濾器</h4>
  <span v-pre>{{ filter_msg | filter1 }}：</span><span>{{ filter_msg | filter1 }}</span>
 </div>

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

同時(shí)，Vue也支持連接多個(gè)過(guò)濾器

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

這個(gè)例子中，通過(guò)管道符號(hào)“|”，可以連接多個(gè)過(guò)濾器，每前一個(gè)過(guò)濾器的輸出將作為后一個(gè)過(guò)濾器的輸入，直到顯示最終結(jié)果。

當(dāng)過(guò)濾器有多個(gè)參數(shù)時(shí)，Vue也支持帶參數(shù)調(diào)用

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

四、常用指令

指令就是將一些特殊行為應(yīng)用到頁(yè)面DOM元素的特殊屬性。Vue的內(nèi)置指令都是一些帶有 v- 前綴的特殊屬性。

常用的指令如下：

v-bind
v-on
v-for
v-if
v-else-if
v-else
v-show

v-bind

該指令用來(lái)給元素綁定一個(gè)或多個(gè)特性

 <div>
  <h>v-bind（屬性綁定）</h>
  <span v-pre>可用的按鈕(v-bind:disabled="!btn_enabled")：</span><button v-bind:disabled="!btn_enabled" type="button">可以點(diǎn)擊的按鈕</button><br/>
  <span v-pre>不可用的按鈕(v-bind:disabled="btn_enabled")：</span><button v-bind:disabled="btn_enabled" type="button">不可點(diǎn)擊的按鈕</button><br/>
  <span v-pre>縮寫(:disabled="!btn_enabled")：</span><button :disabled="!btn_enabled" type="button">可以點(diǎn)擊的按鈕</button>
 </div>

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       btn_enabled: true
     }
   });
 });

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

頁(yè)面上可以看到“不能點(diǎn)擊的按鈕”動(dòng)態(tài)增加了一個(gè) disabled 屬性。同時(shí) v-bind:disabled="!btn_enabled" 也可以簡(jiǎn)寫成 :disabled="!btn_enabled" 。

v-on

該指令綁定事件監(jiān)聽(tīng)器。事件類型由參數(shù)指定。表達(dá)式可以是一個(gè)方法的名字或一個(gè)內(nèi)聯(lián)語(yǔ)句。用在普通元素上時(shí)，只能監(jiān)聽(tīng)原生 DOM 事件。在監(jiān)聽(tīng)原生 DOM 事件時(shí)，方法以事件為唯一的參數(shù)。如果使用內(nèi)聯(lián)語(yǔ)句，語(yǔ)句可以訪問(wèn)一個(gè) $event 屬性。

在 vm 對(duì)象的 methods 屬性里添加自定義方法

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     methods: {
       btn_click: function () {
         console.log("button click!");
       },
       btn_clickWithEvent: function($event){
         console.log($event);
       },
       btn_clickWithMsg: function (msg) {
         console.log("Message is:" + msg);
       }
     }
   });
 });

通過(guò)屬性 v-on:click="btn_click" 在按鈕上添加 click 事件

 <div>
  <h4>v-on（事件綁定）</h4>
  <span v-pre>點(diǎn)擊事件(v-on:click="btn_click")：</span><button v-on:click="btn_click" type="button">點(diǎn)我！</button><br/>
  <span v-pre>帶事件參數(shù)的點(diǎn)擊事件(v-on:click="btn_clickWithEvent($event)")：</span><button v-on:click="btn_clickWithEvent($event)" type="button">點(diǎn)我！</button><br/>
  <span v-pre>帶自定義參數(shù)的點(diǎn)擊事件(v-on:click="btn_clickWithMsg('Hello world!')")：</span><button v-on:click="btn_clickWithMsg('Hello world!')" type="button">點(diǎn)我！</button><br/>
  <span v-pre>縮寫(@click="btn_click")：</span><button @click="btn_click" type="button">點(diǎn)我！</button>
 </div>

頁(yè)面效果如下

v-on指令也支持縮寫，用@符號(hào)代替，比如： @click="btn_click" 。

v-for

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

在 vm 對(duì)象里添加一個(gè)數(shù)組類型的屬性 books

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       books: ["深入淺出node", "C#本質(zhì)論", "編程珠璣"]
     }
   });
 });

通過(guò) v-for 指令實(shí)現(xiàn)一個(gè)簡(jiǎn)單列表

 <div>
  <h4>v-for（循環(huán)）</h4>
  <ul>
    <li v-for="item in books">
     {{ item }}
    </li>
  </ul>
 </div>

頁(yè)面效果如下

v-for 屬性值是一個(gè) item in expression 結(jié)構(gòu)的表達(dá)式，其中 item 代表 expression 運(yùn)算結(jié)果的每一項(xiàng)。最終的HTML代碼如下

v-if、v-else-if、v-else

條件渲染指令，通過(guò)表達(dá)式結(jié)果的真假來(lái)插入和刪除元素。 v-if 可以單獨(dú)使用，而 v-else-if 、 v-else 必須和 v-if 一起使用。

下面是一個(gè)簡(jiǎn)單用法的例子

 <div>
  <h4>v-if、v-else-if、v-else（分支）</h4>
  <span>分支示例：</span>
  <input type="text" v-model="number" />
  <span v-if="number>10">大于10</span>
  <span v-else-if="number==10">等于10</span>
  <span v-else>小于10</span><br/>
 </div>

頁(yè)面顯示如下

當(dāng)文本框里輸入小于10的數(shù)字時(shí)，右側(cè)只顯示“小于10”的文本內(nèi)容。

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

同樣，在輸入大于10的數(shù)字時(shí)，右側(cè)只顯示“大于10”的文本內(nèi)容。而源碼里只有對(duì)應(yīng)的 span 標(biāo)簽存在。

v-show

該指令也是條件渲染指令，但是與上述的 v-if 有不同。這可以通過(guò)一個(gè)例子來(lái)說(shuō)明。

 <div>
  <h4>v-show（條件渲染）</h4>
  <span>v-show示例：</span>
 <input type="text" v-model="number" />
  <span v-show="number>10">大于10</span>
  <span v-show="number==10">等于10</span>
  <span v-show="number<10">小于10</span><br/>
 </div>

將上面例子里的指令都換成 v-show ，頁(yè)面顯示如下