vue.js模板語(yǔ)法
vue.js使用了基于HTML的模版語(yǔ)法夕冲,允許開(kāi)發(fā)者聲明式地將Dom綁定至底層vue實(shí)例的數(shù)據(jù)弄砍。
vue.js的核心是一個(gè)允許你采用簡(jiǎn)潔的模版語(yǔ)法來(lái)聲明式的將數(shù)據(jù)渲染進(jìn)Dom的系統(tǒng)究反。結(jié)合響應(yīng)系統(tǒng)田轧,在應(yīng)用狀態(tài)改變時(shí),vue能夠智能地計(jì)算重新渲染組件的最小代價(jià)并應(yīng)用到Dom操作上竭缝。
插值
文本
數(shù)據(jù)綁定最常見(jiàn)的形式就是使用 {{...}}(雙大括號(hào))的文本插值:
< div id="app" >
<p>{{ message }}</p>
</div>
表達(dá)式
常用的表達(dá)式:三目運(yùn)算房维,算術(shù)運(yùn)算,比較運(yùn)算抬纸,邏輯運(yùn)算咙俩,正則表達(dá)式等
三目運(yùn)算:條件?“條件1”:“條件2”
算術(shù)運(yùn)算:加、減阿趁、乘膜蛔、除、取余
比較運(yùn)算:大于脖阵、小于皂股、
Vue 實(shí)例
構(gòu)造器
每個(gè) Vue.js 應(yīng)用都是通過(guò)構(gòu)造函數(shù) Vue 創(chuàng)建一個(gè) Vue 的根實(shí)例來(lái)啟動(dòng)的:
var vm = new Vue({
// 選項(xiàng)
})
屬性與方法
每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性:
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 設(shè)置屬性也會(huì)影響到原始數(shù)據(jù)
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
除了 data 屬性, Vue 實(shí)例暴露了一些有用的實(shí)例屬性與方法命黔。這些屬性與方法都有前綴 $呜呐,以便與代理的 data 屬性區(qū)分。例如:
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一個(gè)實(shí)例方法
vm.$watch('a', function (newVal, oldVal) {
// 這個(gè)回調(diào)將在vm.a
改變后調(diào)用
})