模板語法
????????Vue.js 使用了基于 HTML 的模版語法,允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)卫病。Vue模板因而從實(shí)際上不同于基于字符串的模板蹂季。
????????Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)齐帚。
????????結(jié)合響應(yīng)系統(tǒng)庐冯,在應(yīng)用狀態(tài)改變時,Vue 能夠智能地計(jì)算出重新渲染組件的最小代價并應(yīng)用到 DOM 操作上慧妄。
一顷牌、插入值
1、文本
????????數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值:
????????Mustache 標(biāo)簽將會被替代為對應(yīng)數(shù)據(jù)對象上?msg?屬性的值塞淹。綁定的數(shù)據(jù)對象上?msg?屬性發(fā)生了改變窟蓝,插值處的內(nèi)容都會更新。
????????通過使用v-once 指令(指令將在后續(xù)章節(jié)介紹)饱普,執(zhí)行一次性地插值运挫,當(dāng)數(shù)據(jù)改變時状共,插值處的內(nèi)容不會更新。但這會影響到該節(jié)點(diǎn)上的其它數(shù)據(jù)綁定或者在花括號中使用*也可以做到一次性插值滑臊。
2口芍、原始HTML
????????雙大括號會將數(shù)據(jù)解釋為普通文本箍铲,而非HTML 代碼雇卷。為了輸出真正的 HTML,需要使用?v-html?指令或使用三花括號{{{ rawHtml }}}:
????????結(jié)果:
3颠猴、HTML特性
????????Mustache標(biāo)簽也可以用在Html的屬性內(nèi):
????????但是在一些特殊特性內(nèi)和Vue.js指令中不能使用插值关划,如果用錯地方Vue.js會給出警告。
4翘瓮、JavaScript表達(dá)式
????????對于所有的數(shù)據(jù)綁定贮折,Vue.js 都提供了完全的 JavaScript 表達(dá)式支持。
????????這些表達(dá)式會在所屬Vue 實(shí)例的數(shù)據(jù)作用域下作為 JavaScript 被解析资盅。有個限制就是调榄,每個綁定都只能包含單個表達(dá)式,所以下面的例子將不會生效呵扛。
二每庆、指令
????????指令(Directives) 是帶有?v-?前綴的特殊特性。指令的職責(zé)是今穿,當(dāng)表達(dá)式的值改變時缤灵,將其產(chǎn)生的連帶影響,響應(yīng)式地作用于DOM蓝晒。指令特性的值預(yù)期是單個JavaScript 表達(dá)式(v-for?是例外情況腮出,稍后我們再討論)。
????????這里v-if?指令將根據(jù)表達(dá)式?seen?的值的真假來插入/移除元素芝薇。當(dāng)v-if的值為true時也沒初始化渲染時將會插入元素否則會被移除胚嘲。
1、參數(shù)
????????參數(shù)在指令后以冒號指明洛二。例如馋劈,v-bind指令被用來響應(yīng)地更新 HTML 屬性:
? ???在這里?href?是參數(shù),告知?v-bind?指令將該元素的?href?特性與表達(dá)式?url?的值綁定灭红。
2侣滩、修飾符
????????修飾符(Modifiers) 是以半角句號?.?指明的特殊后綴,用于指出一個指令應(yīng)該以特殊方式綁定变擒。
????????.prevent?修飾符告訴v-on?指令對于觸發(fā)的事件調(diào)用?event.preventDefault():
3君珠、縮寫
????????v-前綴是一種標(biāo)識模板中特定的Vue特性的視覺按時。
????????在構(gòu)建單頁應(yīng)用時娇斑,Vue.js會管理所有的模板此時v-前綴就沒那么重要策添。
????????Vue.js 為?v-bind?和?v-on?這兩個最常用的指令材部,提供了特定簡寫。
三唯竹、用戶輸入
????????在input 輸入框中我們可以使用 v-model 指令來實(shí)現(xiàn)雙向數(shù)據(jù)綁定:
????????這樣乐导,就將input與p標(biāo)簽進(jìn)行了綁定,input的值改變浸颓,p標(biāo)簽的文本也會被改變物臂。