模板語法
- 文本
數(shù)據(jù)綁定最常用的形式就是使用雙大括號的文本插值
<span>Message: {{ msg }}</span>
- html代碼
雙大括號會(huì)將數(shù)據(jù)解釋為普通文本,而非 HTML 代碼羡亩。為了輸出真正的 HTML 口糕,你需要使用 v-html 指令:
<div v-html="rawHtml"></div>
這個(gè) div 的內(nèi)容將會(huì)被替換成為屬性值 rawHtml蛮瞄,直接作為 HTML——會(huì)忽略解析屬性值中的數(shù)據(jù)綁定 - js表達(dá)式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }
這些表達(dá)式會(huì)在所屬 Vue 實(shí)例的數(shù)據(jù)作用域下作為 JavaScript 被解析棍郎。有個(gè)限制就是钦讳,每個(gè)綁定都只能包含單個(gè)表達(dá)式阅签,所以下面的例子都不會(huì)生效掐暮。
{{ var a = 1 }}
{{ if (ok) { return message } }}
參數(shù)
一些指令能夠接收一個(gè)“參數(shù)”,在指令名稱之后以冒號表示政钟。例如劫乱,v-bind 指令可以用于響應(yīng)式地更新 HTML 屬性:
<a v-bind:href="url">...</a>
另一個(gè)例子是 v-on 指令织中,它用于監(jiān)聽 DOM 事件:
<a v-on:click="doSomething">...</a>
縮寫
v-bind:
<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫 -->
<a :href="url">...</a>
v-on:
<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫 -->
<a @click="doSomething">...</a>