【前端Vue学习系列】一、Vue初识

---

前言

Hi，大家好，我是希留。

现在前后端分离技术越来越流行，很多公司的传统Jsp项目也慢慢重构成前后端分离的项目，虽然大型公司都是有专门的前端人员，但是也有很多的公司是前后端代码分离，但是人不分离的。所以，作为后端开发人员，了解并掌握一定的前端技术也是很有必要的。

本系列文章主要介绍vue2.X的相关知识，需要有一定的HTML、CSS 和 JavaScript的基础。如果你也对vue感兴趣，就快跟着我们一起来学习吧~

---

一、为什么学习Vue？

现在提起前端框架，无非就是三大框架：Vue、Angular、React，Angular是谷歌开发的，国内用的比较少。React是facebook开发的，里面用的多是高阶函数，需要你对js特别熟，对初学者不是很友好。Vue是是中国人尤雨溪开发的，结合了Angular和React的优点，国内公司用的比较多，它所提倡的渐进式学习，从JavaScript过度到Vue是很平滑的，没有陡峭的学习曲线；还有就是它的中文文档非常完善，有利于我们的学习。

二、Vue是什么？

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

简单来说，Vue就是一个前端框架，而且是渐进式框架。那么问题来了，什么是渐进式框架呢？

是指一个前端项目可以使用vue.js一两个特性也可以整个项目都用vue.js，也就意味着你可以渐渐的使用vue的全部。

三、Vue的特点

1.MVVM模型

MVVM是Mode-View-ViewModel的缩写，其核心是提供对View和ViewModel的双向数据绑定，当ViewModel的数据发生变化时，View也会同步更新数据，反之亦然。

View是视图层， 也就是用户界面。主要用于表现DOM节点
Model是指数据模型，是业务逻辑相关的数据对象，通常从数据库映射而来 在这里表示JavaScript对象
ViewModel是连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者。

2.双向绑定

数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。Vue的双向绑定就是通过Object.defineProperty() 实现的，这个函数能够可以定义对象的属性相关描述符，从而劫持各个属性的setter、getter，在数据变动时，发布消息给订阅者，触发相应的监听回调。

3.虚拟DOM

传统的开发模式中，使用原生js或jq操作 DOM 时，浏览器会从构建 DOM 树开始从头到尾执行一遍流程，造成了极大地性能浪费，当DOM操作频繁时，甚至会造成卡