在上一篇文章<<Vue深入解析-Mustache>>中,我們解釋了vue在插值和綁定表達式時使用的模板語言Mustache的相關知識,這篇文章我們會深入解析下Vue是如何使用Mustache模板的語法.
插值
插值是Vue用來實現使用數據綁定的一種方式,在Vue中常用的方式如下:
- 文本插值
使用"Mustache"語法(雙括號 {{keyName}} 語法 直接輸出與鍵名匹配的鍵值),實現文本插值對數據的基本綁定: 在解析過程中Mustache標簽會被相應數據對象的屬性的值替換,每當這個屬性變化時它也會更新.
代碼段:
<div id="msg">
<p>{{msg}}</p>
</div>
<script>
var msg = new Vue({
el:"#msg",
data:{
msg:"This is a message."
}
})
</script>
如果這時通過控制臺,運行:
** msg.$data.msg = "This is a new message" **
這時你會發現頁面中的文本會跟著發生變化.
插值與數據彼此關聯,數據更新引發插值更新.如果只想進行單次插值,可以向如下使用:
<span>This will never change: {{* msg}}</span>
- 原始HTML
使用三括號的Mustache,進行原始HTML輸出(這是Mustache的語法 {{{keyName}}}會保持內容原樣輸出)
<div id="vueHtml">
{{{vueHtml}}}
</div>
<script>
var vueHtml = new Vue({
el:"#vueHtml",
data:{
vueHtml:"<p>這段文字會原樣輸出HTML代碼</p>"
}
})
</script>
- HTML屬性:
Mustache標簽( {{keyName}} 會直接輸出與鍵名匹配的鍵值的特性)可以用在html屬性內:
<div id="component">
<div id="item-{{id}}"></div>
</div>
<script>
var comp = new Vue({
el:"#component",
data:{
'id':"val1"
}
});
</script>
綁定表達式
放在Mustache標簽內的文本稱為綁定表達式,在Vue.js中,一段綁定表達式由一個簡單的Javascript表達式和可選的一個多個過濾器構成.
** a.Javascript表達式 **
在雙括號的Mustache標簽內,可以包含的是單個js表達式,如果是語句的話就是無效的.
{{ number + 1}}
{{ ok ? "Yes" : "No"}}
{{message.split('').reverse().join("")}}
以下均無效
{{var a = 1}} //這是一個語句
{{if(ok) {return message}}} //控制語句
<div id="component">
<div>{{ number + 1}}</div>
<div>{{ ok ? "Yes" : "No"}}</div>
<div>{{message.split('').reverse().join("")}}</div>
</div>
<script>
var comp = new Vue({
el:"#component",
data:{
'message':"edcba",
'number':12,
'ok':"1"
}
});
</script>
b.過濾器
vue.js允許在表達式后添加可選的"過濾器",將表達式message的值,運用管道(pipe),輸到相應的過濾器內,過濾器對輸入進行處理,最好返回處理后的 值.(真是個很棒的想法)除了vue內部自帶的過濾器,還可以自定義過濾器.
{{ message | capitalize }}
這里我們將表達式 message 的值通過內部管道輸入到內置過濾器 capitalize過濾器中,這個過濾器其實只是一個Javascript函數,返回大寫化的值.
由表達式到過濾器通過類似管道的方式進行傳遞數據,處于這種特性也就不難理解,vue的過濾器可以串聯了(A過濾器處理完的數據,又傳到B過濾器進行處理):
{{ message | filterA | filterB}}
由于過濾器本質就是函數,所以其必然可以接收參數:
{{ message | filterA "arg1" arg2}}
在Vue的過濾器的預設中,如果是帶引號的會直接當作參數傳遞個過濾器("arg1"會直接傳遞給過濾器filterA當作第二個參數,第一個參數是message的 返回值),arg2會被當作表達式,在arg2值計算出來后,把arg2計算出的值,當作第三個參數傳遞給過濾器filterA.
下面是一個過濾使用的例子,這里對item.name使用lowercase進行小寫過濾,item.price使用currency對輸出進行過濾.
<div id="component">
<ul>
<li v-for="item in fItems"> name: {{item.name|lowercase }}; price:{{item.price|currency "$"}} </li>
</ul>
</div>
<script>
var comp = new Vue({
el:"#component",
data: {
fItems: [{name: "《精通Spring》",price: "38.80"},
{name: "《精通Hibiernate》", price: "28.80"},
{ name: "《精通Jquery》", price: "25.99"},
{name: "《精通Vue》",price: "18.88"}]
}
});
</script>
指令
指令是vue.js中特殊的帶有前綴v-的特性,指令的值限定為綁定表達式.指令的職責就是當表達式的值發生改變時,把某些特殊的行為應用到Dom上.
<p v-if="greeting">Hello</p>
這里的v-if指令將根據表達式greeting值的真假刪除/插入<p>元素
參數
有些指令可以在其名稱后面帶上一個參數,中間用一個冒號隔開.
例如,v-bind指令用于響應地更新HTML特性:
<a v-bind:href="url"></a>
這里href是參數,它告訴v-bind指令將元素href特性跟表達式url的值綁定.
v-on指令,用于監聽DOM事件:
<a v-on:click="doSomething"></a>
修飾符
修飾符(Modifiers)是以半角句號(.)開始的特殊后綴,用于表示指令應當以特殊方式綁定.
比如:.literal修飾符告訴指令將它的值解析為一個字面字符串,而不是一個表達式:
<a v-bind:href.literal="/a/b/c"></a>
