Vue基础知识一

一.Vue简介

1.1 Vue.js 是什么

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

1.2 Vue的特点

  • 采用组件化模式,提高代码复用率,且让代码更好维护
    Vue基础知识一_第1张图片
    上图里的每一个.vue文件就是一个组件

  • 声明式编码,让编码人员无需直接操作DOM,提高开发效率
    需求:把下边数据放入页面里标签下的

  • 标签里
    Vue基础知识一_第2张图片
    使用传统js(命令式编码)实现,经历了好几条命令才实现
    Vue基础知识一_第3张图片
    使用声明式编码(vue)
    Vue基础知识一_第4张图片
    可以看到,声明式编码节省了很多代码

  • 使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点
    还是使用上边的案例,传统实现方式如下
    Vue基础知识一_第5张图片
    如果哪天数据发生变化,比如张三、李四、王五变为张三、李四、王五、赵六了,则需要把之前的所有旧数据都删除,然后再加载新的数据,旧数据没有被复用,如下
    Vue基础知识一_第6张图片
    使用vue实现的话,中间多了一个"虚拟DOM"(内存里的数据),vue先把旧数据张三、李四、王五变为原始虚拟DOM,随后再把虚拟DOM变为真实DOM,当数据变为张三、李四、王五、赵六后,vue再生成新的虚拟DOM,新的虚拟DOM会与原始虚拟DOM比较(使用Diff算法),对比后发现有数据可以重复使用,只是多出来赵六这个数据,此时真实DOM里的旧数据(张三、李四、王五)不动了,只把赵六放进去就完事了;

Vue基础知识一_第7张图片

Vue基础知识一_第8张图片
如果数据不变的话,虚拟DOM没什么用,但是数据有变化的话就有作用了;

1.3 搭建Vue开发环境

vue官网
官方教程:
Vue基础知识一_第9张图片
有如下两种安装方式
Vue基础知识一_第10张图片

安装方式一

引入

你可能感兴趣的:(Vue,vue.js,javascript,前端)