vue2_1、vue简介

1、vue是什么? js框架。2、vue特点 ①采用组件化模块,提高代码复用率,且让代码更好维护。 组件化模块就是建一个页面的内容分为几个部分,每个部分都是自

1、vue是什么?

js框架。
image

2、vue特点

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

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



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

比如:由一个数据,要展示到页面上。
image

用原生js实现也就是命令式编码,用vue实现也就是声明式编码。如:
image


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

原生js实现

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


vue实现

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

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 端)

您可能有感兴趣的文章
12 个不可错过的 Vue UI 组件库,请查收!

vue介绍以及相关概念理解大全

Vue核心之:Vue的基本认识和Vue的基本如何使用

vue入门介绍以及语法

学习Vue(一):vue的基本指令