Vue實例：
創建一個Vue實例：
每個Vue應用都是通過Vue函數創建一個新的Vue實例開始的：
| var vm = new Vue({ //選項 }) |
Vue的設計受到MVVM模型的啓發，當創建一個實例時，可以傳入一個選項對象。
一個Vue應用通過new Vue創建的跟Vue實例，和可選的嵌套的、可複用的組件數組
成。
數據和方法：
當一個Vue實例被創建的時候，它向Vue的響應式系統中加入了其data對象中能找
到的所有屬性，當這些屬性的值發生改變的時候，視圖將會產生響應，即匹配更新的
值。
數據對象 var data = {a:1} 該對象被加入到一個Vue實例中 var vm = new Vue({ data:data }) 獲得這個實例上的屬性，返回源數據中對應的字段 vm.a == data.a //返回true 設置屬性也會影響到原始數據 vm.a = 2 data.a // =>2 data.a = 3 vm.a // =>3 |
當這些數據發生改變的時候，視圖會重新進行渲染，只有當實例被創建的時候data中
存在的屬性纔是響應式的，也就是說如果添加新屬性，例如：
| vm.b = "hi" |
那麼b的改動將不會觸發任何視圖的更新，如果你知道會在晚些時候需要一個屬性
，但是一個開始它爲空或者不存在，那麼你僅僅需要設置一些初始值，比如
data:{ newTodoText:'', 初始化一個文本爲空 visitCount:0, 初始化一個數字爲0 hideCompletedTodos:false, 初始化一個bool爲false todos:[], 初始化一個數組爲空數組 error:null 初始化一個錯誤提示爲空 } |
這裏唯一的例外是使用Object.freeze()，這會阻止修改現有的屬性，也意味着相應
系統無法追蹤變化
var obj = { foo:"bar" } Object.freeze(obj) new Vue({ el:'#app', data:obj }) <div id="app"> <p>{{foo}}</p> <button v-on:click="foo='naz'">change it </button> </div> |
除了數據屬性，Vue實例還暴露了一些有用的實例屬性與方法，他們都有前綴$，便
於與用戶定義的屬性區分，例如：
var data = { a:1 } var vm = new Vue({ el:"#example", data:data }) vm.$data === data // = >返回true vm.$el === document.getElementById("element"); // = > 返回true vm.$watch("a",function(newValue,oldValue){ //這個會掉將會在vm.a調用後改變 }) |
實例生命週期鉤子：
每個Vue實例在被創建的時候都要經歷一系列的初始化過程，例如，需要設置數據監
聽、編譯模板，將實例掛載到DOM並在數據變化時更新DOM等。同時在這個過程中
也會運行一些叫做生命週期鉤子的函數，這可以實現在不同階段添加不同代碼
比如created鉤子可以用來在一個實例被創建之後執行代碼：
new Vue({ data:{ a:1 }, created:function(){ console.log("a is" + this.a); } }) // a is 1 |
也有一些其他的鉤子，在實例生命週期的不同階段被調用，比如：
mounted、updated和destroyed
生命週期鉤子的this上下文指向調用Vue實例
注意：
不要在選項屬性或者回調上使用箭頭函數，例如：
created: ()=> console.log(this.a)
vm.$watch("a",newValue=>this.myMethod())
原因：
箭頭函數是和父級上下文綁定在一起的，this不會是如你所預期的Vue實例