vue.js是輕量級的前端框架，2016.10 發(fā)布了最新2.0 版本，具有更強大，更快速的特點，使Vue.js 的應用變得更加廣泛。
vue.js 的特點
- 輕量級
- 高效率
- 上手快
- 簡單易學
- 文檔全面而簡潔
vue.js 的功能
以下是三點功能：
- 模板渲染、數(shù)據(jù)渲染、數(shù)據(jù)同步
例子：
<div id="app">
{{message}}
</div>
//vuejs實例對象
new Vue({
el:'#app', //對象裝載的位置
data:{ //數(shù)據(jù)
massage:'Hello Vue!'
}
})
顯示
- 模塊化、組件化
例子：
<div id="example">
<my-component></my-component>
</div>
// 注冊
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 創(chuàng)建根實例
new Vue({
el: '#example'
})
渲染為：
<div id="example">
<div>A custom component!</div>
</div>
顯示
組件局部注冊
不必在全局注冊每個組件。通過使用組件實例選項注冊，可以使組件僅在另一個實例/組件的作用域中可用：
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 將只在父模板可用
'my-component': Child
}
})
data 必須是函數(shù)
使用組件時，大多數(shù)選項可以被傳入到 Vue 構造器中，有一個例外： data 必須是函數(shù)。 實際上，如果你這么做：
Vue.component('my-component', {
template: '<span>{{ message }}</span>',
data: {
message: 'hello'
}
})
那么 Vue 會在控制臺發(fā)出警告，告訴你在組件中 data 必須是一個函數(shù)。下面我們就來理解一下這種規(guī)則的存在意義。
<div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
var data = { counter: 0 }
Vue.component('simple-counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
// data 是一個函數(shù)，因此 Vue 不會警告，
// 但是我們?yōu)槊恳粋€組件返回了同一個對象引用
data: function () {
return data
}
})
new Vue({
el: '#example-2'
})
由于這三個組件共享了同一個 data ， 因此增加一個 counter 會影響所有組件！我們可以通過為每個組件返回新的 data 對象來解決這個問題，避免直接的引用賦值：
data: function () {
return {
counter: 0
}
}
現(xiàn)在每個 counter 都有它自己內部的狀態(tài)了：
- 擴展功能 比如：路由、ajax、數(shù)據(jù)流
