模板語法
Vue.js 使用了基于 HTML 的模板語法潘酗,允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)甘邀。所有 Vue.js 的模板都是合法的 HTML 顶籽,所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析葵腹。
在底層的實現(xiàn)上高每,Vue 將模板編譯成虛擬 DOM 渲染函數(shù)。結(jié)合響應(yīng)系統(tǒng)践宴,在應(yīng)用狀態(tài)改變時鲸匿,Vue 能夠智能地計算出重新渲染組件的最小代價并應(yīng)用到 DOM 操作上。
插值
數(shù)據(jù)綁定使用雙大括號的文本插值
<span>{{msg}}</span>
v-once指令可以執(zhí)行一次性地插值
<span v-once>這個將不會改變:{{msg}}</span>
使用Javascript表達式
//每個綁定都只能包含單個表達式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
指令
指令 (Directives) 是帶有?v-?前綴的特殊屬性阻肩。指令屬性的值預(yù)期是單個 JavaScript 表達式(v-for?是例外情況)带欢。指令的職責(zé)是,當(dāng)表達式的值改變時,將其產(chǎn)生的連帶影響乔煞,響應(yīng)式地作用于 DOM
一些指令能夠接收一個“參數(shù)”吁朦,在指令名稱之后以冒號表示
<a v-bind:href="url"></a>
在這里href是參數(shù),告知v-bind指令將該元素的href屬性與url表達式的值綁定在一起
<a v-on:onclick="doSomething"></a>
修飾符
修飾符 (Modifiers) 是以半角句號?.?指明的特殊后綴渡贾,用于指出一個指令應(yīng)該以特殊方式綁定逗宜。例如,.prevent?修飾符告訴?v-on?指令對于觸發(fā)的事件調(diào)用?
<form v-on:submit.prevent="onSubmit"></form>
縮寫
v-?前綴作為一種視覺提示剥啤,用來識別模板中 Vue 特定的特性锦溪。當(dāng)你在使用 Vue.js 為現(xiàn)有標簽添加動態(tài)行為時,v-?前綴很有幫助府怯,然而刻诊,對于一些頻繁用到的指令來說,就會感到使用繁瑣牺丙。同時则涯,在構(gòu)建由 Vue.js 管理所有模板的單頁面應(yīng)用程序 (SPA - single page application)?時,v-?前綴也變得沒那么重要了冲簿。因此粟判,Vue.js 為?v-bind?和?v-on?這兩個最常用的指令,提供了特定簡寫:
v-bind
<!--? 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
v-on
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>