Vue.js使用了基于HTML的模版語法懊直,允許開發(fā)者聲明式地將DOM綁定至底層Vue實(shí)例的數(shù)據(jù)驹溃。所有Vue.js的模板都是合法的HTML,所以能被遵循規(guī)范的瀏覽器和HTML解析器解析。
在底層的實(shí)現(xiàn)上皆愉,Vue將模板編譯成虛擬DOM渲染函數(shù)。結(jié)合響應(yīng)系統(tǒng)落萎,在應(yīng)用狀態(tài)改變時(shí)亥啦,Vue能夠智能地計(jì)算出重新渲染組件的最小代價(jià)并應(yīng)用到DOM操作上炭剪。
1.文本插值
數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語法(雙大括號(hào))的文本插值:
Message: {{ msg }}
Mustache標(biāo)簽將會(huì)被替代為對(duì)應(yīng)數(shù)據(jù)對(duì)象上msg屬性的值练链。無論何時(shí),綁定的數(shù)據(jù)對(duì)象上msg屬性發(fā)生了改變奴拦,插值處的內(nèi)容都會(huì)更新媒鼓。
通過使用v-once指令,你也能執(zhí)行一次性地插值错妖,當(dāng)數(shù)據(jù)改變時(shí)绿鸣,插值處的內(nèi)容不會(huì)更新。但請(qǐng)留心這會(huì)影響到該節(jié)點(diǎn)上所有的數(shù)據(jù)綁定:
This will never change: {{ msg }}
這里我們通過一個(gè)例子暂氯,來看一下文本插值潮模,我們?cè)趆tml文件中引入vuejs庫(kù),可以子啊官方網(wǎng)站下載該庫(kù)痴施。
運(yùn)行之后頁面顯示的是Hello vue.js