模板語法
數據綁定最常見的形式就是使用“Mustache”語法(雙大括號)的文本插值:
<p>{{message}}</p>
通過v-once指令執行一次性插值,當數據改變時,插值處的數據不會更新。需要注意,這個指令也會影響到該節點上的其他數據綁定。
v-once的用法:
<p v-once>這個值不會變化:{{message}}</p>
Mustache語法只會將數據解釋爲普通文本,爲了輸出真正的html代碼,需要使用v-html指令。
<p>{{testHtml}}</p>
<p v-html="testHtml"></p>
new Vue({
el:'#vue'
data:{
testHtml:'<span style="color:red">red</span>'
}
})
結果:
Mustache語法不能作用在html屬性上,應該使用v-bind指令:
<div v-bind:id="id"></div>
在html屬性是布爾值時,指令的存在默認爲true:
<button v-bind:disabled="tof">點擊</button>
"tof"的值如果是null、undefined,那麼這個屬性不會被渲染到節點中。官網中說如果值是“false”也不會渲染屬性,但是實際測試了一下,是會渲染的,但是默認true
使用javascript表達式
對於數據的綁定,Vue.js提供了完全的javascript表達式支持。
{{number+1}}
//支持三元表達式
{{ok?'yes':'no'}}
//單個表達式
{{message.reverse()}}
有個限制就是,每個綁定都只能包含單個表達式,所以下面的例子都不會生效。
<!-- 這是語句,不是表達式 -->
{{ var a = 1 }}
<!-- 流控制也不會生效,請使用三元表達式 -->
{{ if (ok) { return message } }}
修飾符
修飾符用半角句號 . 指明特殊後綴,用於指出一個指令應該以特殊方式綁定,例如,.prevent
修飾符告訴 v-on
指令對於觸發的事件調用 event.preventDefault()
:
<form v-on:submit.prevent="onSubmit">...</form>
縮寫
v-bind縮寫爲‘:’
<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫 -->
<a :href="url">...</a>
v-on縮寫爲‘@’
<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫 -->
<a @click="doSomething">...</a>