【Vue学习第一节】

一、vue是什么？

答：一套用于构建用户界面的渐进式jsvascript框架；

渐进式：vue可以自底向上逐层的应用（如一个简单应用，只需要引入核心库即可；复杂应用的话可以引用各种各样的vue插件）

二、vue特点

1：采用组件化模式，提高代码复用率，并且使代码易维护；（把某些常用功能模块单独封装起来形成一个组件，需要用到此模块调用即可；如网站某个模块样式需要调整，只改动封装好的组件即可）；

2：声明式编码，让编程人员不需要操作DOM，提高开发效率。

3：使用虚拟DOM+diff算法尽量复用DOM节点。

三、模板语法

初识vue:

1：想让vue工作，就必须创建一个vue实例；

2：容器中的代码依旧符合html代码规范；

3：容器中的代码被称为vue模板；

1:插值语法

功能：用于解析标签体内内容；

写法：{{XXX}} XXX为js表达式，且可读到data中所有属性；

例如：

 2:指令语法

功能：用于解析标签（包括标签属性、标签体内容和绑定事件等）；

写法例如： <a v-bind:href="url.url">{{url.name}}</a>  在href标签属性中使用插值语法是不会被解析的。

备注：vue中有很多指令，形式都是 v-??? 

  3：数据绑定

vue中有两种数据绑定方式：

1：单向绑定（v-bind）:数据只能从data流向页面。

2：双向绑定（v-model）：数据不仅能从data流向页面，也可以从页面流向data。

注：

1：双向绑定一般都是应用在表单元素上。（如input、select等）

2：v-model:value可以简写为v-model,因为v-model默认收集的就是value中的数据；

四、MVVM模型

M ：模型（model）对应data中的数据；

V：视图（view）模板；

VM：视图模型（ViewModel）Vue实例对象；

1：data中的所有属性，最后都会出现在VM上（数据代理）；

2：VM中的属性和原型上的所有属性，在VUE模板上都可以直接使用；

VM解释：负责监听M然后对V进行修改，实现M和V的双向绑定。当M层的数据发生修改时，VM层会监测到变化然后立马对V层的数据也进行修改。反之，当V层的数据发生修改时，VM层也会监测到变化然后对M层的数据进行修改。

Model层和View是不会直接相互操作的，需要通过中间的一层VM层进行互相联系，降低了耦合。

而且Vue中大部分时间中Vue就是充当了VM层，我们开发时只需要做好View层和Model层就好了，因为Vue已经帮我们做了自动监听、解析和修改了。
 

五、数据代理

1：vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）；

2：vue中数据代理的好处：可以更加方便的操作data中的数据；

数据代理基本原理：

通过object.defineProperty(）把data对象中的属性添加到vm对象中；

为每一个添加到vm上的属性都指定一个getter/seter;

在getter/setter内部去操作（读/写）data中对应的属性；