vue2_1、vue简介

1、vue是什么？

js框架。

2、vue特点

①采用组件化模块，提高代码复用率，且让代码更好维护。

组件化模块就是建一个页面的内容分为几个部分，每个部分都是自己的js和css和html(也就是.vue结尾的文件)。

②声明式编码，让编码人员不用直接操作DOM，提高开发效率。

比如：由一个数据，要展示到页面上。

用原生js实现也就是命令式编码，用vue实现也就是声明式编码。如：

③使用DOM+优秀的Diff算法，尽量复用DOM节点。

原生js实现

如果用原生js实现，如下图，第二次又有一个数据，只是这个数据里面仅仅多了一个数据，如果又用innerHtml的话，原本界面上的内容就没了，被新的数据又重新替换了。最好就是复用上面三个人的信息，因为只是多了一个人而已，也就是原来有的有用的数据依然使用，这就是复用。用原生js也可以实现复用，就是自己去对比，原来有的数据保留，只添加一个新的数据。但是很麻烦，而且数据量一大，js写的判断效率就会很低。

vue实现

vue会先把之前的数据变成虚拟dom(也就是存入内存)，然后再把虚拟dom转成页面上的真实的dom元素，如果数据式不会有变化(死数据)，那么虚拟dom确实没啥作用，但是，如果这个数据是会变化的，那就有用。比如下面又有新的数据，又会生产新的虚拟dom，但是，如果之前有生产过旧的虚拟dom对象，他就会将新的和旧的虚拟dom进行Diff算法比较，会发现，新的虚拟dom和旧的虚拟dom有一样的，那么页面上原来的就数据就直接复用了，只把新的赵六的虚拟dom放进去。

3、与其他前端 JS 框架的关联

• 借鉴 angular 的 模板 和 数据绑定 技术
• 借鉴 react 的 组件化 和 虚拟DOM 技术

4、Vue 扩展插件

vue-cli：vue 脚手架
vue-resource(axios)：ajax 请求
vue-router：路由
vuex：状态管理（它是 vue 的插件但是没有用 vue-xxx 的命名规则）
vue-lazyload：图片懒加载
vue-scroller：页面滑动相关
mint-ui：基于 vue 的 UI 组件库（移动端）
element-ui：基于 vue 的 UI 组件库（PC 端）