Vue是一套用於構建用戶界面的漸進式框架。Vue被設計爲自底向上逐層應用。
Vue的核心庫只關注視圖層，不僅易上手，還便於與第三方庫或既有項目整合。
Vue實例
一個Vue應用由一個通過new Vue創建 的根Vue實例，以及可選的嵌套、可複用的組件樹組成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1. 引入vue文件 -->
<script src="./vue2.js"></script>
</head>
<body>
<!-- 如果超過vue實例的管轄範圍，這個{{}}作用就會失效 -->
<div>{{msg}}</div>
<div id="app">
<!-- 5. 展示數據：通過插值表達式{{}} ，作用是專門用來渲染文本-->
<h1>{{msg}}</h1>
</div>
<script>
// 2. 創建vue實例，作用：他會監管我們的html代碼
var vm = new Vue({
// 3. 通過一個el屬性來指定vue實例的監管範圍,後面跟一個id
el: '#app',
// 4. 用data屬性將要展示的變量存起來,data後面跟一個對象
data: {
msg: 'hello world'
}
})
</script>
</body>
</html>
實例聲明週期鉤子
每個Vue實例在被創建時都要經過一系列的初始化過程。在這個過程中也會運行一些叫做生命週期鉤子的函數，
給用戶在不同階段添加自己代碼的機會。
new Vue({
data:{
a:1
},
created:function(){
//this指向vm實例
console.log('a is:'+this.a)
}
})
也有其他的鉤子，在實例生命週期的不同階段被調用，如：mounted、updated、和destroyed。
生命週期鉤子的this上下文指向調用它的Vue實例。不要在選項屬性或回調上使用箭頭函數。
生命週期
vue生命週期最常用的鉤子函數包括：
1、在beforeCreate和created鉤子函數之間的生命週期
在這個生命週期之間，進行初始化事件，進行數據的觀測，可以看到created的時候數據已經和data屬性進行綁定。
2、created和beforeMount鉤子函數之間的生命週期
在這個生命週期，先判斷對象是否有el選項。如果有的話就繼續向下編譯，如果沒有el選項，則停止編譯，
也就意味着停止了生命週期，直到在該vue實例上調用vm.$mount(el)。
3、beforeMount和mounted鉤子函數間的生命週期
給vue實例對象添加$el成員，並且替換掉掛在DOM元素。因爲在之前console中打印的結果可以看到beforeMount之前el還是undefined。
4、mounted
在mounted之前h1通過{{message}}進行佔位，因爲此時還有掛在到頁面上，還是JavaScript中的虛擬DOM形式存在的。
在mounted之後可以看到h1中的內容發生變化。
5、beforeUpdate和updated鉤子函數間的生命週期
當vue發現data中的數據發生了改變，會觸發對應組件的重新渲染，先後調用beforeUpdate和updated鉤子函數。
6、beforeDestroy和destroyed鉤子函數間的生命週期
beforeDestroy鉤子函數在實例銷燬前調用。在這一步，實例仍然完全可用。
destroyed鉤子函數在vue實例銷燬後調用。調用後，vue實例指示的所有東西都會解綁定，又有的事件監聽器會被移除，子實例也會被銷燬。
beforeCreate()——實例初始化自動調用
created()——實例創建後調用
beforeMount()——在mount之前運行,元素已經加載，但是 屬性值沒渲染
mounted()——在編譯結束時調用,加載完成
beforeUpdate()——在實例掛載後，再次更新實例時調用,屬性值未渲染
updated()——在實例掛載之後，再次更新實例並更新完DOM。結構後調用,屬性值修改後
beforeDestroy()——在開始銷燬實例時調用
destroyed()——在實例銷燬後調用
actived()——在動態組件初始化渲染的過程中調用
deactived()——在動態組件移除的過程中調用