Vue.js 模板語(yǔ)法

Vue.js 使用了基于 HTML 的模版語(yǔ)法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。

Vue.js 的核心是一個(gè)允許你采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)。

結(jié)合響應(yīng)系統(tǒng)，在應(yīng)用狀態(tài)改變時(shí)， Vue 能夠智能地計(jì)算出重新渲染組件的最小代價(jià)并應(yīng)用到 DOM 操作上。

使用“Mustache”語(yǔ)法 (即用雙大括號(hào)包裹) 的文本插值：

<span>Message: {{ msg }}</span>

Mustache 標(biāo)簽將會(huì)被替代為對(duì)應(yīng)數(shù)據(jù)對(duì)象上 “msg” 屬性的值。無(wú)論何時(shí)，綁定的數(shù)據(jù)對(duì)象上 msg 屬性發(fā)生了改變，插值處的內(nèi)容都會(huì)更新。

如果使用 v-once 指令，你也能執(zhí)行 一次性插值 ，當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)更新。但請(qǐng)留心這會(huì)影響到該節(jié)點(diǎn)上的其它數(shù)據(jù)綁定。

HTML

直接用雙大括號(hào)包裹只是普通文本，如果想實(shí)現(xiàn)HTML代碼效果，需要加入 v-html 指令

html部分：

<div id="app">
	<p>Using mustaches: {{ rawHtml }}</p>
	<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>

js部分：

var vm = new Vue({
	el:'#app',
	data:{
	 rawHtml:'<span style="color:red">this is red</span>'
	}
});

v-html使用時(shí) 在span標(biāo)簽的前標(biāo)簽內(nèi)寫入“v-html="xxx” ，相當(dāng)于將data中的值以HTML形式放入span標(biāo)簽內(nèi)。

attribute（屬性）

Mustache 語(yǔ)法不能作用在 HTML attribute 上，遇到這種情況應(yīng)該使用 v-bind 指令：

格式：v-bind:屬性="變量名"

html部分：

<div v-bind:color="textcolor">123</div>

js部分：

data:{
 textcolor:"red"
}

將變量textcolor的值“red"綁定在盒子的 "color" 屬性上

對(duì)于布爾屬性，v-bind使用為：

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false ，則 disabled attribute 甚至不會(huì)被包含在渲染出來(lái)的 <button> 元素中。

JS表達(dá)式

迄今為止，在我們的模板中，我們一直都只綁定簡(jiǎn)單的屬性鍵值。但實(shí)際上，對(duì)于所有的數(shù)據(jù)綁定，Vue.js 都提供了完全的 JavaScript 表達(dá)式支持。

{{ data變量 + 1 }}    //
{{ data變量/表達(dá)式 ? 'true代碼' : 'false代碼' }}   //三元運(yùn)算
{{ data變量.split('').reverse().join('') }}   //可以進(jìn)行函數(shù)調(diào)用

<div v-bind:id="'list-' + id"></div>

這些表達(dá)式會(huì)在所屬 Vue 實(shí)例的數(shù)據(jù)作用域下作為 JavaScript被解析。

限制是：每個(gè)綁定都只能包含單個(gè)表達(dá)式，所以下面的例子都不會(huì)生效。

<!-- 這是語(yǔ)句，不是表達(dá)式 -->
{{ var a = 1 }}

<!-- 流控制也不會(huì)生效，請(qǐng)使用三元表達(dá)式 -->
{{ if (ok) { return message } }}

指令

指令 (Directives) 是帶有 v- 前綴的特殊 attribute。指令 attribute 的值預(yù)期是單個(gè) JavaScript 表達(dá)式 。指令的職責(zé)是， 當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。 回顧我們?cè)诮榻B中看到的例子：

<p v-if="seen">現(xiàn)在你看到我了</p>

這里，v-if 指令將根據(jù)表達(dá)式 seen 的值的真假來(lái)插入/移除 <p> 元素。

參數(shù)

一些指令能夠接收一個(gè)“參數(shù)”，在指令名稱之后以冒號(hào)表示。例如， v-bind 指令可以用于響應(yīng)式地更新 HTML屬性值：

<a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</a>

在這里 href 是參數(shù) ，告知 v-bind 指令將該元素的 href attribute 與表達(dá)式 url 的值綁定。

另一個(gè)例子是 v-on 指令，它用于監(jiān)聽 DOM 事件：

<a v-on:click="doSomething">...</a>

在這里參數(shù)是監(jiān)聽的事件名。

動(dòng)態(tài)參數(shù)

可以動(dòng)態(tài)的綁定不同的屬性，可以用 方括號(hào) 括起來(lái)的 JavaScript 表達(dá)式作為一個(gè)指令的參數(shù)：

<!--
注意，參數(shù)表達(dá)式的寫法存在一些約束，如之后的“對(duì)動(dòng)態(tài)參數(shù)表達(dá)式的約束”章節(jié)所述。
-->
<a v-bind:[attributeName]="url"> ... </a>

這里的 attributeName(命名中不能有逗號(hào)或冒號(hào)等符號(hào)) 會(huì)被作為一個(gè) JavaScript 表達(dá)式進(jìn)行動(dòng)態(tài)求值，求得的值將會(huì)作為最終的參數(shù)來(lái)使用。

例如，如果你的 Vue 實(shí)例有一個(gè) data 屬性 attributeName，其值為 "href"，那么這個(gè)綁定將等價(jià)于 <a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</a> 。

同樣地，你可以使用動(dòng)態(tài)參數(shù)為一個(gè)動(dòng)態(tài)的事件名綁定處理函數(shù)：

<a v-on:[eventName]="doSomething"> ... </a>

在這個(gè)示例中，當(dāng) eventName 的值為 "focus" 時(shí)，v-on:[eventName] 將等價(jià)于 v-on:focus。

修飾符

修飾符 (modifier) 是以半角句號(hào) " . " 指明的特殊后綴，用于指出一個(gè)指令應(yīng)該以特殊方式綁定。

簡(jiǎn)寫 v-bind 縮寫

<!-- 完整語(yǔ)法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

v-on 縮寫

<!-- 完整語(yǔ)法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

總結(jié)

以上所述是小編給大家介紹的Vue.js的模板語(yǔ)法詳解，希望對(duì)大家有所幫助！