模板語法

????????Vue.js 使用了基于 HTML 的模版語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)。Vue模板因而從實際上不同于基于字符串的模板。

????????Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進 DOM 的系統(tǒng)。

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

一、插入值

????????數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值：

????????Mustache 標簽將會被替代為對應(yīng)數(shù)據(jù)對象上?msg?屬性的值。綁定的數(shù)據(jù)對象上?msg?屬性發(fā)生了改變，插值處的內(nèi)容都會更新。

????????通過使用v-once 指令（指令將在后續(xù)章節(jié)介紹），執(zhí)行一次性地插值，當數(shù)據(jù)改變時，插值處的內(nèi)容不會更新。但這會影響到該節(jié)點上的其它數(shù)據(jù)綁定或者在花括號中使用*也可以做到一次性插值。

????????雙大括號會將數(shù)據(jù)解釋為普通文本，而非HTML 代碼。為了輸出真正的 HTML，需要使用?v-html?指令或使用三花括號{{{ rawHtml }}}：

????????結(jié)果：

????????Mustache標簽也可以用在Html的屬性內(nèi)：

????????但是在一些特殊特性內(nèi)和Vue.js指令中不能使用插值，如果用錯地方Vue.js會給出警告。

????????對于所有的數(shù)據(jù)綁定，Vue.js 都提供了完全的 JavaScript 表達式支持。

????????這些表達式會在所屬Vue 實例的數(shù)據(jù)作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達式，所以下面的例子將不會生效。

????????指令(Directives) 是帶有?v-?前綴的特殊特性。指令的職責是，當表達式的值改變時，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于DOM。指令特性的值預(yù)期是單個JavaScript 表達式(v-for?是例外情況，稍后我們再討論)。

????????這里v-if?指令將根據(jù)表達式?seen?的值的真假來插入/移除元素。當v-if的值為true時也沒初始化渲染時將會插入元素否則會被移除。

????????參數(shù)在指令后以冒號指明。例如，v-bind指令被用來響應(yīng)地更新 HTML 屬性：

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

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

????????.prevent?修飾符告訴v-on?指令對于觸發(fā)的事件調(diào)用?event.preventDefault()：

????????v-前綴是一種標識模板中特定的Vue特性的視覺按時。

????????在構(gòu)建單頁應(yīng)用時，Vue.js會管理所有的模板此時v-前綴就沒那么重要。

????????Vue.js 為?v-bind?和?v-on?這兩個最常用的指令，提供了特定簡寫。

????????在input 輸入框中我們可以使用 v-model 指令來實現(xiàn)雙向數(shù)據(jù)綁定：

????????這樣，就將input與p標簽進行了綁定，input的值改變，p標簽的文本也會被改變。