說實在，看文檔是很累的，看一次忘一次更累，最好就是記下來，直接看到自己想要的那就方便很多！
新手推薦直接應用vue地址，<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
傳統的插值需要綁定元素再賦值，而vue框架是通過改變數據，響應式地改變dom(文档对象模型)
（一）文本插值
<!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> (数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值)
</body>
<script>
var app = new Vue({ （数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值）
el: '#app', （id綁定div，每個實例只能對應一個div）
data: { （存儲全局變量）
message: 'Hello Vue!'
}
})
</script>
</html>
如下圖
index4.png
（二）生命週期
可能一開始接觸很難明白什麼是生命週期，其實就是一個頁面從加載到運行到關閉的一個週期。
賦上生命週期圖：
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——創建前')
// 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
},
created(){
console.log('created——創建後')
this.message = '777'
// 在 created 中，data 和 methods 都已经被初始化好了！
// 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
//message的值已經從原來的（Hello Vue!）變成了（777）
},
beforeMount(){
console.log('beforeMount——掛載前')
// 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
},
mounted(){
console.log('mounted——掛載後')
// 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了
//，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
},
beforeUpdate(){
console.log('beforeUpdate——跟新前')
// 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，
//此时 data 数据是最新的，页面尚未和 最新的数据保持同步
},
updated(){
console.log('updated——跟新後')
// updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
},
beforeDestory(){
console.log('beforeDestory——銷燬前')
// 處於銷燬狀態，但是實例還能用
},
destroyed(){
console.log('destroyed——銷燬後')
//銷燬實例的所有數據、方法、過濾器、指令，但是dom不能銷燬
//跳轉頁面前得銷燬自行運行的方法：比如定時器
}
})
app.message = '666';
//在實例外通過控制app改變內部數據
</script>
</body>
</html>
下面的代碼會覆蓋上面的代碼，所以一開始的{{message}}=> Hello Vue! => 777 => 666
