說實(shí)在减江，看文檔是很累的染突，看一次忘一次更累，最好就是記下來辈灼，直接看到自己想要的那就方便很多份企！
新手推薦直接應(yīng)用vue地址，<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
傳統(tǒng)的插值需要綁定元素再賦值巡莹，而vue框架是通過改變數(shù)據(jù)司志，響應(yīng)式地改變dom(文檔對(duì)象模型)
（一）文本插值
<!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>
<!-- 開發(fā)環(huán)境版本甜紫，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">{{message}}</div> (數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語(yǔ)法 (雙大括號(hào)) 的文本插值)
</body>
<script>
var app = new Vue({ （數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語(yǔ)法 (雙大括號(hào)) 的文本插值）
el: '#app', （id綁定div，每個(gè)實(shí)例只能對(duì)應(yīng)一個(gè)div）
data: { （存儲(chǔ)全局變量）
message: 'Hello Vue!'
}
})
</script>
</html>
如下圖
index4.png
（二）生命週期
可能一開始接觸很難明白什麼是生命週期骂远，其實(shí)就是一個(gè)頁(yè)面從加載到運(yùn)行到關(guān)閉的一個(gè)週期棵介。
賦上生命週期圖：
index5.png
<!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>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">{{message}}</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods:{
//所有的方法都是寫在這裏
},
beforeCreate(){
console.log('beforeCreate——?jiǎng)?chuàng)建前')
// 注意： 在 beforeCreate 生命周期函數(shù)執(zhí)行的時(shí)候，data 和 methods 中的 數(shù)據(jù)都還沒有沒初始化
},
created(){
console.log('created——?jiǎng)?chuàng)建後')
this.message = '777'
// 在 created 中吧史，data 和 methods 都已經(jīng)被初始化好了邮辽！
// 如果要調(diào)用 methods 中的方法，或者操作 data 中的數(shù)據(jù)贸营，最早吨述，只能在 created 中操作
//message的值已經(jīng)從原來的（Hello Vue!）變成了（777）
},
beforeMount(){
console.log('beforeMount——掛載前')
// 在 beforeMount 執(zhí)行的時(shí)候，頁(yè)面中的元素钞脂，還沒有被真正替換過來揣云，只是之前寫的一些模板字符串
},
mounted(){
console.log('mounted——掛載後')
// 注意： mounted 是 實(shí)例創(chuàng)建期間的最后一個(gè)生命周期函數(shù)，當(dāng)執(zhí)行完 mounted 就表示冰啃，實(shí)例已經(jīng)被完全創(chuàng)建好了
//邓夕，此時(shí)，如果沒有其它操作的話阎毅，這個(gè)實(shí)例焚刚，就靜靜的 躺在我們的內(nèi)存中，一動(dòng)不動(dòng)
},
beforeUpdate(){
console.log('beforeUpdate——跟新前')
// 得出結(jié)論： 當(dāng)執(zhí)行 beforeUpdate 的時(shí)候扇调，頁(yè)面中的顯示的數(shù)據(jù)矿咕，還是舊的，
//此時(shí) data 數(shù)據(jù)是最新的狼钮，頁(yè)面尚未和 最新的數(shù)據(jù)保持同步
},
updated(){
console.log('updated——跟新後')
// updated 事件執(zhí)行的時(shí)候碳柱，頁(yè)面和 data 數(shù)據(jù)已經(jīng)保持同步了，都是最新的
},
beforeDestory(){
console.log('beforeDestory——銷燬前')
// 處?kù)朵N燬狀態(tài)熬芜，但是實(shí)例還能用
},
destroyed(){
console.log('destroyed——銷燬後')
//銷燬實(shí)例的所有數(shù)據(jù)莲镣、方法、過濾器涎拉、指令瑞侮，但是dom不能銷燬
//跳轉(zhuǎn)頁(yè)面前得銷燬自行運(yùn)行的方法：比如定時(shí)器
}
})
app.message = '666';
//在實(shí)例外通過控制app改變內(nèi)部數(shù)據(jù)
</script>
</body>
</html>
下面的代碼會(huì)覆蓋上面的代碼，所以一開始的{{message}}=> Hello Vue! => 777 => 666
