4.Vue實例
4.1.創建Vue實例
每個 Vue 應用都是通過用 Vue 函數創建一個新的 Vue 實例開始的：
var vm = new Vue({
// 選項
})
在構造函數中傳入一個對象，並且在對象中聲明各種Vue需要的數據和方法，包括：
- el
- data
- methods
等等
接下來我們一 一介紹。
4.2.模板或元素
每個Vue實例都需要關聯一段Html模板，Vue會基於此模板進行視圖渲染。
我們可以通過el屬性來指定。
例如一段html模板：
<div id="app">
</div>
然后創建Vue實例，關聯這個div
var vm = new Vue({
el:"#app"
})
這樣，Vue就可以基於id為app的div元素作為模板進行渲染了。在這個div范圍以外的部分是無法使用vue特性的。
4.3.數據
當Vue實例被創建時，它會嘗試獲取在data中定義的所有屬性，用於視圖的渲染，並且監視data中的屬性變化，當data發生改變，所有相關的視圖都將重新渲染，這就是“響應式“系統。
html：
<div id="app">
<input type="text" v-model="name"/>
</div>
js:
var vm = new Vue({
el:"#app",
data:{
name:"劉德華"
}
})
- name的變化會影響到
input的值 - input中輸入的值，也會導致vm中的name發生改變
4.4.方法
Vue實例中除了可以定義data屬性，也可以定義方法，並且在Vue實例的作用范圍內使用。
html:
<div id="app">
{{num}}
<button v-on:click="add">加</button>
</div>
js:
var vm = new Vue({
el:"#app",
data:{
num: 0
},
methods:{
add:function(){
// this代表的當前vue實例
this.num++;
}
}
})
4.5.生命周期鈎子
4.5.1.生命周期
每個 Vue 實例在被創建時都要經過一系列的初始化過程 ：創建實例，裝載模板，渲染模板等等。Vue為生命周期中的每個狀態都設置了鈎子函數（監聽函數）。每當Vue實例處於不同的生命周期時，對應的函數就會被觸發調用。
生命周期：
4.5.2.鈎子函數
beforeCreated：我們在用Vue時都要進行實例化，因此，該函數就是在Vue實例化時調用，也可以將他理解為初始化函數比較方便一點，在Vue1.0時，這個函數的名字就是init。
created：在創建實例之后進行調用。
beforeMount：頁面加載完成，沒有渲染。如：此時頁面還是{{name}}
mounted：我們可以將他理解為原生js中的window.onload=function({...}),或許大家也在用jquery，所以也可以理解為jquery中的$(document).ready(function(){….})，他的功能就是：在dom文檔渲染完畢之后將要執行的函數，該函數在Vue1.0版本中名字為compiled。 此時頁面中的{{name}}已被渲染成峰哥
beforeDestroy：該函數將在銷毀實例前進行調用 。
destroyed：改函數將在銷毀實例時進行調用。
beforeUpdate：組件更新之前。
updated：組件更新之后。
例如：created代表在vue實例創建后；
我們可以在Vue中定義一個created函數，代表這個時期的鈎子函數：
// 創建vue實例
var app = new Vue({
el: "#app", // el即element，該vue實例要渲染的頁面元素
data: { // 渲染頁面需要的數據
name: "峰哥",
num: 5
},
methods: {
add: function(){
this.num--;
}
},
created: function () {
this.num = 100;
}
});
結果：
4.5.3.this
我們可以看下在vue內部的this變量是誰，我們在created的時候，打印this
methods: {
add: function(){
this.num--;
console.log(this);
}
},
控制台的輸出：
