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