引入vue.js <script src="https://unpkg.com/vue"></script>
api文檔
<div id='#app'></div>
var vm = new Vue({
el:'#app',
data:{},
methods:{}
})
//Vue構造器
使用Vue構造函數創(chuàng)建一個Vue實例棠涮，然后通過Vue實例的el接口實現(xiàn)和HTML元素的掛載拴鸵；
數據與方法
當一個 Vue 實例被創(chuàng)建時，它向 Vue 的響應式系統(tǒng)中加入了其 data 對象中能找到的所有的屬性。當這些屬性的值發(fā)生改變時，視圖將會產生“響應”谆奥，即匹配更新為新的值。
// 我們的數據對象
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
當這些數據改變時檐蚜，視圖會進行重渲染。值得注意的是只有當實例被創(chuàng)建時 data 中存在的屬性是響應式的沿侈。
除了 data 屬性闯第，Vue 實例暴露了一些有用的實例屬性與方法。它們都有前綴 $缀拭，以便與用戶定義的屬性區(qū)分開來咳短。例如：
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一個實例方法
vm.$watch('a', function (newValue, oldValue) {
// 這個回調將在 `vm.a` 改變后調用
})
實例生命周期
每個 Vue 實例在被創(chuàng)建之前都要經過一系列的初始化過程填帽。例如需要設置數據監(jiān)聽、編譯模板咙好、掛載實例到 DOM篡腌、在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數勾效，給予用戶機會在一些特定的場景下添加他們自己的代碼嘹悼。
比如 created 鉤子可以用來在一個實例被創(chuàng)建之后執(zhí)行代碼：
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 實例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
不要在選項屬性或回調上使用箭頭函數,
因為箭頭函數是和父級上下文綁定在一起的，this 不會是如你所預期的 Vue 實例层宫。
image.png
