模板語(yǔ)法
- 文本
數(shù)據(jù)綁定最常用的形式就是使用雙大括號(hào)的文本插值
<span>Message: {{ msg }}</span> - html代碼
雙大括號(hào)會(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ù)”，在指令名稱(chēng)之后以冒號(hào)表示。例如，v-bind 指令可以用于響應(yīng)式地更新 HTML 屬性：
<a v-bind:href="url">...</a>
另一個(gè)例子是 v-on 指令，它用于監(jiān)聽(tīng) DOM 事件：
<a v-on:click="doSomething">...</a>縮寫(xiě)
v-bind：
<!-- 完整語(yǔ)法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫(xiě) -->
<a :href="url">...</a>
v-on:
<!-- 完整語(yǔ)法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫(xiě) -->
<a @click="doSomething">...</a>
