vue框架

1、vue概述
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router：跳转，vue -resource：通信，vuex：管理)或既有项目整合

1.1、前端三板斧
HTML (结构) ：超文本标记语言(Hyper Text Markup Language)，决定网页的结构和内容
CSS (表现) ：层叠样式表(Cascading Style Sheets)，设定网页的表坝样式
JavaScript (行为) ：是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页的行为
1.2、JavaScript框架
jQuery：众所周知的JavaScript框架，优点是简化了DOM操作，缺点是频繁操作DOM，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6、7、8
Angular：Google收购的前端框架，由一群Java程序员开发，基特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发；对后台程序员友好，对前端程序员不太友好，缺点版本迭代不合理
React：Facebook 出品，一款高性能的JS前端框架；特点是提出了新概念【虚拟DOM】于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率;缺点是使用复杂，需要额外学习一门【JSX】语言
Vue：一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点
Axios：前端通信框架，因为Vue的边界很明确，就是为了处理DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery提供的Ajax通信功能
1.3、UI框架
Ant-Design：阿里巴巴出品，基于React的UI框架
ElementUI： iview、ice，饿了么出品，基于Vue的UI框架
Bootstrap： Twitter 推出的一个用于前端开发的开源工具包
AmazeUI：又叫"妹子UI"，一款HTML5跨屏前端框架
1.4、JavaScript构建工具
Babel: JS 编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
WebPack：模块打包器，主要作用是打包、压缩、合并及按序加载
1.5、MVVM模式和第一个Vue程序
MVVM (Model-View-ViewModel) 是一种软件架构设计模式， 由微软WPF (用于替代WinForm，以前就是用这个技术开发桌面应用程序的)和Silverlight (类似于Java Applet，简单点说就是在浏览器上运行的WPF)的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman (同样也是WPF和Silverlight的架构师)于2005年在他的博客上发表

MVVM源自于经典的MVC (Model-View-Controller) 模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用

该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互
MVVM已经较为成熟，当下流行的MVVM框架有vue.js，Angular.js

1.5.1、View
View是视图层，也就是看到的用户界面。前端主要由HTML和CSS来构建，为了更方便地展现ViewModel或者Model 层的数据，已经产生了各种各样的前后端模板语言，比如FreeMarker、Thymeleaf等等，各大MVVM框架如Vue.js， AngularJS， EJS 等也都有自己用来构建用户界面的内置模板语言

1.5.2、Model
Model是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则

1.5.3、ViewModel
ViewModel是由前端开发人员组织生成和维护的视图数据层。在这-层，前端开发者对从后端获取的Model数据进行转换处理，做二次封装，以生成符合View层使用预期的视图数据模型。MVVM框架已经把最繁琐的一块做好了，我们开发者只需要处理和维护ViewModel，更新数据视图就会自动得到相应更新，真正实现事件驱动编程

View层展现的不是Model层的数据，而是ViewModel的数据，由ViewModel 负责与Model层交互，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环