知识点学了太多还是需要总结复习，否则后面会因为零碎的知识点而感到繁杂，那么今天我来总结一下vue相关的知识点，新学习vue的朋友也可以把这当做一个细致总结：
1.Vue是什么（重点）：
对于Vue的总结，最重要的地方是它为一个渐进式的视图（view）模板引擎，在vue中通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。这些功能相互独立，不一定要全部用在一起，用什么拿什么么，这里所说的“渐进式”，其实就是Vue的使用方式。
编写方式通俗来说哦就是自底向上，从基层做起，然后向上逐渐添加效果和功能。
2.基础语法：
基础语法有两种，插值语法和指令语法。
1.插值语法：双大括号形式，用于解析标签体内容：{{msg}} msg:为表达式。
举例：页面上有一个节点（注意vue中只有一个id为root的div节点），new Vue中的data值直接用双大括号插入节点当中：
<div id="root">{{hello}}</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#root",
data: {
hello: "helloworld!",
},
});
</script>2.指令语法：vue中有很多指令，他们用于解析标签属性、解析标签体内容、绑定事件，以v-开头
举例：这里用v-bind:href = “url” 举例，式子中url为表达式，具有返回值
<div id="root">
<a v-bind:href="url">去淘宝</a>
<!-- v-bind:href简写 -->
<a :href="url">去淘宝</a>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#root",
data: {
url: "https://www.taobao.com/",
},
});
</script>以上是vue中的两种基础语法。
3.数据绑定
数据绑定分为两种，单向数据绑定和双向数据绑定，顾名思义，单向数据绑定中数据只会从data中流向页面，而双向数据绑定不仅data的值可以流向界面，页面的值也可以流向data。
写法举例：
1.单向数据绑定：单向绑定v-bind：数据只能从data流向页面，data中是什么值，页面上就是什么值：
<div id="root">
<input type="text" name="" :value="msg" />
</div>
<script src="vue.js"></script>
<script>
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
msg: "张三",
},
});
</script>2.双向数据绑定：双向绑定v-model：数据不仅能从data流向页面，还可以从页面流向data：
<div id="root">
<input type="text" name="" v-model:value="msg"/>
</div>
<script src="vue.js"></script>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
msg:"张三"
}
})
</script>双向数据绑定不仅可以实现数据从data流向页面，也可以实现在页面中修改数据的时候，数据也会传到data中。
注意：v-model:value 可以简写为 v-model，v-model一般应用于输入类型的表单元素。
4.M-V-VM模型和数据代理
M-V-VM分别代表了1.M模型(Model) ：data中的数据 ，2.V视图(View) ：模板代码，3.VM：视图模型(ViewModel)：Vue实例。
如上图所示，M和V分别代表数据波形和页面视图，那么就需要一个桥梁连通它们，所以VM就相当于连接它们的桥梁。
所以VM就相当于我们上方写的一个new Vue的实例，具体写法如下：
<div id="root">
<input type="text" name="" v-model:value="msg" />
</div>
<script src="vue.js"></script>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
msg: "张三",
},
});
</script>在这不得不提到一个名词叫做响应式原理，但是响应式原理在这里，三言两语说不清楚，希望大家可以在网上搜寻详细的资料看一下，充分理解响应式原理。
而Vue中数据代理的原理就是通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter去操作（读/写）data中对应的属性。
举个例子，我们创建了两个对象，想把一个对象其中的值在另一个对象中输出应该怎么做，在这里就应该用到数据代理：
<div id="root">
<input type="text" name="" v-model:value="msg" />
</div>
<script src="vue.js"></script>
<script>
Vue.config.productionTip = false;
const p1 = {
age: 19,
};
const p2 = {
name: "mike",
};
Object.defineProperty(p2, "age", {
get() {
return p1.age;
},
set(v) {
p1.age = v;
},
});
console.log(p2.age);
</script>在Object.defineProperty()这个函数中，用到get和set方法，get用来获取p1里面需要的值，set用来设置一个值等于获得的那个值，然后把设置的这个值放到p2中，最后输出p2.age即可完成我们想要的结果。
