發(fā)現(xiàn)Vue
最近公司在做一個(gè)H5的項(xiàng)目，涉及到用戶數(shù)據(jù)綁定，由于用的是Html+webApi的形式，所以每次綁定用戶數(shù)據(jù)的時(shí)候感覺寫的特別累撞反，js文件里寫了一大堆東西，每次改的時(shí)候格式看的讓人很頭痛搪花。剛好最近接觸了微信小程序遏片，看到里面數(shù)據(jù)綁定的時(shí)候特別方便，于是就想一定也有這樣的js框架來實(shí)現(xiàn)類似小程序里數(shù)據(jù)綁定的方式吧撮竿！于是乎就找到了vue.js吮便。簡單用了下還是很給力的。
Vue.js 介紹
Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的 漸進(jìn)式框架幢踏。與其他重量級(jí)框架不同的是髓需，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫只關(guān)注視圖層房蝉，并且非常容易學(xué)習(xí)僚匆，非常容易與其它庫或已有項(xiàng)目整合微渠。另一方面，Vue 完全有能力驅(qū)動(dòng)采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用咧擂。
Vue.js 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件逞盆。
上幾個(gè)簡單的例子
聲明式渲染
Vue.js 的核心是一個(gè)允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)：
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
條件
控制切換一個(gè)元素的顯示也相當(dāng)簡單：
<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
繼續(xù)在控制臺(tái)設(shè)置 app3.seen = false，你會(huì)發(fā)現(xiàn) “Now you see me” 消失了松申。
循環(huán)
v-for指令可以綁定數(shù)據(jù)到數(shù)據(jù)來渲染一個(gè)列表：
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
重點(diǎn)
以上就是Vue.js的簡單介紹
更詳細(xì)的內(nèi)容大家可以訪問官網(wǎng)http://cn.vuejs.org/
