Vue #使用 #MVVM #绑定原理 #指令

一.VUE：第三方开发的基于MVVM渐进式的纯前端框架

#使用

1.下载：下载vue.js文件到项目本地的js文件夹中，在网页中引入vue.js文件（企业中不用）;
2.脚手架方式: (企业中都用)

#MVVM

旧的前端开发,把代码分成三部分：HTML CSS JS
问题：因为HTML和CSS连程序基本的功能变量都不支持,更不支持分支,循环等解构,导致JS中存在大量重复的步骤的编码

解决：MVVM设计模式,将前端代码进行了重新划分
(1)界面(view):增强版的HTML+CSS.可以支持变量,分支,循环：<div id="app"><div>
(2)模型对象(Model):专门保存界面所需要的所有变量和函数：data:{
   ..},methods:{
   ..}
(3)视图模型(ViewModel):专门负责维护模型对象中的变量与界面中的变量同步：new Vue({
   })	

优点：因为有了ViewModel的存在,数据可以自动同步到界面上,避免了大量的重复编码

#绑定原理

VUE框架是如何实现MVVM设计模式：
VUE的绑定原理：
(1)当引入vue.js时,其实就是在内存中添加了一种新的类型
(2)只要希望自动监控页面上的一个区域,就要创建VUE类型的子对象:new Vue({
   });
(3)new Vue()第一件事将data引入 new Vue()中保存：
	a.data对象被引入new Vue()之后,new Vue会给data中的每个变量添加访问器属性,隐藏实际变量
	b.只要在new Vue()中试图修改data中的变量，其实修改的都不是原变量，都是访问器属性.
	c.访问器属性既有保护作用，又起到监视变量变化的作用
	d.new Vue()内只要修改变量会自动调用变量的访问器属性的set()函数，就会自动触发通知函数
(4)