資訊專(zhuān)欄INFORMATION COLUMN
摘要：一基礎(chǔ)學(xué)習(xí)模式下圖不僅概括了模式，還描述了在中是如何和以及進(jìn)行交互的。關(guān)于這一點(diǎn)我們將在后續(xù)反應(yīng)系統(tǒng)中討論。父組件通過(guò)向下傳遞數(shù)據(jù)給子組件，子組件通過(guò)給父組件發(fā)送消息。這個(gè)對(duì)象必須是普通對(duì)象原生對(duì)象，及原型屬性會(huì)被忽略。
Vue.js 是用于構(gòu)建交互式的 Web 界面的庫(kù)。
Vue.js 提供了 MVVM 數(shù)據(jù)綁定和一個(gè)可組合的組件系統(tǒng)，具有簡(jiǎn)單、靈活的 API。
其實(shí)和Jquery一樣，VueJs就是一個(gè)Js庫(kù)，但是是面向前端的庫(kù)，具體來(lái)講叫做MVVM(Model-View-ViewModel)庫(kù).
也就是說(shuō)，有部分功能和Jquery是差不多的，Vuejs能做的，Jquery也能做。這下我們就放心了，Jquery多簡(jiǎn)單啊，令人發(fā)指的是Vuejs在實(shí)現(xiàn)相同功能的時(shí)候更簡(jiǎn)單（不然用你干嘛啊）；
理解Vuejs最關(guān)鍵的一句話(huà)叫做“數(shù)據(jù)驅(qū)動(dòng)視圖”，比如用Jquery來(lái)做一個(gè)列表，這個(gè)列表的數(shù)據(jù)是從Laravel來(lái)的，那么我們要遍歷這個(gè)數(shù)據(jù)，然后把列表的html元素加到dom里面去， 要?jiǎng)h除一個(gè)列表項(xiàng)的時(shí)候，先要在找到列表項(xiàng)在dom的位置，然后去除這個(gè)節(jié)點(diǎn)。Vuejs不用，數(shù)據(jù)在的時(shí)候，列表就在，數(shù)據(jù)減一，列表項(xiàng)就自動(dòng)實(shí)時(shí)相應(yīng)減一。也就是說(shuō)，你只要操作數(shù)據(jù)就夠了，不用管dom。這基本就是Vuejs的中心思想。
一、基礎(chǔ)學(xué)習(xí) 1.MVVM模式下圖不僅概括了MVVM模式（Model-View-ViewModel），還描述了在Vue.js中ViewModel是如何和View以及Model進(jìn)行交互的。
ViewModel是Vue.js的核心，它是一個(gè)Vue實(shí)例。Vue實(shí)例是作用于某一個(gè)HTML元素上的，這個(gè)元素可以是HTML的body元素，也可以是指定了id的某個(gè)元素。
當(dāng)創(chuàng)建了ViewModel后，雙向綁定是如何達(dá)成的呢？
首先，我們將上圖中的DOM Listeners和Data Bindings看作兩個(gè)工具，它們是實(shí)現(xiàn)雙向綁定的關(guān)鍵。
從View側(cè)看，ViewModel中的DOM Listeners工具會(huì)幫我們監(jiān)測(cè)頁(yè)面上DOM元素的變化，如果有變化，則更改Model中的數(shù)據(jù)；
從Model側(cè)看，當(dāng)我們更新Model中的數(shù)據(jù)時(shí)，Data Bindings工具會(huì)幫我們更新頁(yè)面中的DOM元素。
先來(lái)看一個(gè)簡(jiǎn)單的示例，Hello,World!
Vue學(xué)習(xí) {{ message }}
示例詳解：
1.2.1 data屬性和方法每個(gè)Vue實(shí)例都會(huì)代理其data對(duì)象中的所有屬性：
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// setting the property also affects original data
vm.a = 2
data.a // -> 2
// ... and vice-versa
data.a = 3
vm.a // -> 3
需要注意的是只有代理屬性是反應(yīng)式的，如果在實(shí)例創(chuàng)建之后添加一個(gè)新的屬性到實(shí)例上，將不會(huì)觸發(fā)任何視圖更新。關(guān)于這一點(diǎn)我們將在后續(xù)反應(yīng)系統(tǒng)中討論。
除了數(shù)據(jù)屬性之外，Vue實(shí)例還提供了許多有用的實(shí)例屬性和方法，這些屬性和方法都以$開(kāi)頭以便和代理數(shù)據(jù)屬性進(jìn)行區(qū)分。例如：
var data = { a: 1 }
var vm = new Vue({
el: "#example",
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById("example") // -> true
// $watch is an instance method
vm.$watch("a", function (newVal, oldVal) {
// this callback will be called when `vm.a` changes
})
1.2.2 實(shí)例生命周期
每個(gè)Vue實(shí)例在創(chuàng)建時(shí)都會(huì)經(jīng)歷一系列實(shí)例化步驟，例如，需要設(shè)置數(shù)據(jù)觀察、編譯模板、以及創(chuàng)建必要的數(shù)據(jù)綁定。在這個(gè)過(guò)程中，還會(huì)調(diào)用生命周期鉤子，從而方便我們執(zhí)行自定義邏輯，例如，created鉤子會(huì)在實(shí)例創(chuàng)建后調(diào)用：
var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` points to the vm instance
console.log("a is: " + this.a)
}
})
// -> "a is: 1"
還有一些鉤子會(huì)在實(shí)例生命周期的不同階段調(diào)用，例如compiled、ready和destroyed，所有被調(diào)用的生命周期鉤子通過(guò)this指向調(diào)用它的Vue實(shí)例，一些用戶(hù)可能會(huì)疑惑在Vue.js的世界中有沒(méi)有“控制器”的概念，答案是沒(méi)有。組件的自定義邏輯會(huì)被分割到這些生命周期鉤子中。
1.2.3 props 用法props將數(shù)據(jù)從父作用域傳到子組件。在 Vue.js 中，父子組件的關(guān)系可以總結(jié)為 props down, events up 。父組件通過(guò) props 向下傳遞數(shù)據(jù)給子組件，子組件通過(guò) events 給父組件發(fā)送消息。
Vue.component("todo-item", { props: ["todo"], template: "
這只是一個(gè)假設(shè)的例子，但是我們已經(jīng)設(shè)法將應(yīng)用分割成了兩個(gè)更小的單元，子單元通過(guò) props 接口實(shí)現(xiàn)了與父單元很好的解耦。我們現(xiàn)在可以進(jìn)一步為我們的 todo-item 組件實(shí)現(xiàn)更復(fù)雜的模板和邏輯的改進(jìn)，而不會(huì)影響到父單元。
組件實(shí)例的作用域是孤立的。這意味著不能(也不應(yīng)該)在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。要讓子組件使用父組件的數(shù)據(jù)，我們需要通過(guò)子組件的props選項(xiàng)。
子組件要顯式地用props 選項(xiàng)聲明它期待獲得的數(shù)據(jù)：
Vue.component("child", {
// 聲明 props
props: ["message"],
// 就像 data 一樣，prop 可以用在模板內(nèi)
// 同樣也可以在 vm 實(shí)例中像 “this.message” 這樣使用
template: "{{ message }}"
})
然后我們可以這樣向它傳入一個(gè)普通字符串：
結(jié)果：
hello!1.2.4 data屬性對(duì)象和函數(shù)返回對(duì)象的區(qū)別
我們先來(lái)看一下這個(gè)比較經(jīng)典的問(wèn)題，當(dāng)初在學(xué)Vue的時(shí)候也犯過(guò)這樣的迷惑，不知道何時(shí)傳遞data對(duì)象，何時(shí)傳遞data函數(shù) 。Vue.js的data是要一個(gè)對(duì)象還是一個(gè)function?
Vue 實(shí)例的數(shù)據(jù)對(duì)象。Vue.js 會(huì)遞歸地將它全部屬性轉(zhuǎn)為 getter/setter，從而讓它能響應(yīng)數(shù)據(jù)變化。這個(gè)對(duì)象必須是普通對(duì)象：原生對(duì)象，getter/setter 及原型屬性會(huì)被忽略。不推薦觀察復(fù)雜對(duì)象。
在實(shí)例創(chuàng)建之后，可以用 vm.$data 訪(fǎng)問(wèn)原始數(shù)據(jù)對(duì)象。Vue 實(shí)例也代理了數(shù)據(jù)對(duì)象所有的屬性。
在定義組件時(shí)，同一定義將創(chuàng)建多個(gè)實(shí)例，此時(shí) data 必須是一個(gè)函數(shù)，返回原始數(shù)據(jù)對(duì)象。如果 data 仍然是一個(gè)普通對(duì)象，則所有的實(shí)例將指向同一個(gè)對(duì)象！換成函數(shù)后，每當(dāng)創(chuàng)建一個(gè)實(shí)例時(shí)，會(huì)調(diào)用這個(gè)函數(shù)，返回一個(gè)新的原始數(shù)據(jù)對(duì)象的副本。
簡(jiǎn)單說(shuō), 在實(shí)例中data是對(duì)象, 在組件中data就得是函數(shù)返回對(duì)象。
組件中的data寫(xiě)法示例：
var data = { counter: 0 } Vue.component("simple-counter", { template: "", // 技術(shù)上 data 的確是一個(gè)函數(shù)了，因此 Vue 不會(huì)警告， // 但是我們返回給每個(gè)組件的實(shí)例的卻引用了同一個(gè)data對(duì)象 data: function () { return data } }) new Vue({ el: "#example-2" })
由于這三個(gè)組件共享了同一個(gè) data ， 因此增加一個(gè) counter 會(huì)影響所有組件！這不對(duì)。我們可以通過(guò)為每個(gè)組件返回全新的 data 對(duì)象來(lái)解決這個(gè)問(wèn)題：
data: function () {
return {
counter: 0
}
}
更多詳情請(qǐng)參考：官網(wǎng)組件數(shù)據(jù)data傳遞說(shuō)明（Component）
1.2.5 組件寫(xiě)法需注意的幾個(gè)問(wèn)題一個(gè)組件下只能有一個(gè)并列的 div，可以這么寫(xiě)，所以復(fù)制官網(wǎng)示例的時(shí)候只要復(fù)制 div 里面的內(nèi)容就好。
但是不能這樣寫(xiě):
第二。數(shù)據(jù)要寫(xiě)在 return 里面而不是像文檔那樣子寫(xiě)
錯(cuò)誤的寫(xiě)法:
組件使用 ：
firstComponent.vue
I am a title.
written by {{ author }}
其他Vue問(wèn)題，可以參考該博文：Vue2.0 新手完全填坑攻略——從環(huán)境搭建到發(fā)布
2.Vue.js的常用指令請(qǐng)參考官方文檔Vue官方文檔
1.v-model,v-for,v-on在了解了vue的基本用法（數(shù)據(jù)綁定、指令、縮寫(xiě)、條件渲染等）后，來(lái)看一個(gè)完整示例,動(dòng)態(tài)添加/刪除元素：
Name
Age
Sex
Delete
{{ person.name }}
{{ person.age }}
{{ person.sex }}
Demo
Github示例源碼
添加、刪除表單數(shù)據(jù)
Vue js Vue開(kāi)發(fā)
welcome to Vue.js{{ message }}
- {{ todo.id }} {{ todo.title }}