Vue理解

Vue是什么

Vue是一个用于搭建用户界面的开源JavaScript框架，也是用于搭建单页应用的Web应用框架.同时它能方便地获取数据更新，并通过组件中特定的方法实现模型(model)与视图(view)的交互.

---

Vue核心特性

数据驱动(MVVM)

MVVM 表示的是 Model-View-ViewModel

• Model：模型层，负责处理业务逻辑以及和服务器端进行交互
• View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
• ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁

组件化 

组件化就是将图形和非图形的各种逻辑均抽象为一个统一的概念(组件)，Vue中每一个.vue文件都可以视为一个组件.

组件化的优势:

• 降低整个系统的耦合度，在保持接口不变的情况下，可以替换不同的组件来快速完成需求. 
• 调试方便，由于整个系统是通过组件组合起来的，出现问题时，可以采用排除法直接移除组件，或者根据报错组件快速定位问题，之所以可以快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑比分析整个系统要简单.
• 提高可维护性，由于每个组件职责单一，并且组件在系统中是被复用的，所以对代码进行优化可以获得系统的整体升级.

指令系统

指令 (Directives) 是带有 v-  前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM 

没有指令之前，都需要先获取DOM，绑定事件来操作.

---

Vue与传统开发的区别

以注册账号这个需求示例:

用 jquery 来实现大概的思路就是选择流程dom对象，点击按钮隐藏当前活动流程dom对象，显示下一流程dom对象

如下图:

用 vue 来实现，vue 基本不操作 dom节点， 双向绑定使 dom节点 跟视图绑定后，通过修改变量的值控制dom节点的各类属性。

所以其实现思路为：视图层使用一变量控制dom节点显示与否，点击按钮则改变该变量

如下图:

总结就是:

• Vue 所有的界面事件，都是只去操作数据的，JQuery 操作DOM.
• Vue 所有界面的变动，都是根据数据自动绑定渲染出来的，JQuery 操作DOM.

  ---