Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架

在解释什么是渐进式框架之前,有必要了解一下什么是框架

在最初的前端开发中,我们利用JS获取HTML中的DOM元素;这样的方式虽然简单实用,但随着业务需求的增加,会使得代码变得混乱,难以维护。

比方说,现在有一个需求:

有一张图片,在被点击时,可以记录下被点击的次数。

接下来,需求稍微发生了点变动

要求有两张图片,分别被点击时,可以记录下各自的点击次数。

这时只需要把原先的代码复制一份就可以了

但当这个需求的图片变成了五张时,虽然通过复制粘贴代码也可以实现该需求,但此时代码就会变得臃肿,虽然在接受的范围内,但此时如果再进行需求的变更

还是五张照片分别记录被点击次数,不过这样单独罗列五张图片似乎太占空间,现在只需要存在一个图片的位置,通过选择按钮来切换被点击的图片。

这个需求看上去很微小,但却可能导致你的代码清空重写;此时,可发现使用JS获取DOM元素所存在的不足之处

为了应对这种情况,可以将代码的组织结构分为三个板块,数据(M)/ 视图(V)/ 逻辑控制(*)

  • 数据板块:只含有数据内容
  • 视图板块:负责更改样式
  • 逻辑控制:建立数据板块和视图板块间的联系

    这样的代码组织结构好处在于,发生需求更改时,只需要对相应的板块作出更改。

这种开发模式也就是常说的MV模式,MVC / MVVM / MVP 等都是由其衍生的;这种模式的主要目的在于,让视图与数据不会发生直接联系;由此可知,“DOM流”的缺陷在于把dom当作Model,直接从dom中获取数据,然后通过dom来修改视图,这其实是将视图与模型混在一起了,不利于代码的维护。

因此,MV* 的代码组织方式慢慢变成了框架;一个团队中选择框架的重要原因在于可以提前设定好代码的组织结构,让实际的项目开发有一个相对明确的方式,而不需要担心某个个体其特有的编码习惯或疏忽造成代码的混乱。

以上就是对框架的认识。严格来说,Bootstrap 并不能称作一个框架,它其实算是 CSS 的一个工具集,主要用于界面的美化;Jquery 也只是把一些重复的操作作了简化,以及兼容性的解决,所以只是一个方便操作的JS库。

在学习中,我们没必要一开始就全部搞懂Vue的功能和组件,先从核心开始学习,再逐渐扩展。同时,在使用中,我们也没必要把全部组件都拿出来,需要什么用什么就是了,而且Vue也可以很方便的与其他已有项目或框架相结合使用。

《一句话理解Vue核心内容》阅读笔记的更多相关文章

  1. 阅读《RobHess的SIFT源码分析:综述》笔记

    今天总算是机缘巧合的找到了照样一篇纲要性质的文章. 如是能早一些找到就好了.不过“在你认为为时已晚的时候,其实还为时未晚”倒是也能聊以自慰,不过不能经常这样迷惑自己,毕竟我需要开始跑了! 就照着这个大 ...

  2. RobHess的SIFT源码分析:imgfeatures.h和imgfeatures.c文件

    SIFT源码分析系列文章的索引在这里:RobHess的SIFT源码分析:综述 imgfeatures.h中有SIFT特征点结构struct feature的定义,除此之外还有一些特征点的导入导出以及特 ...

  3. RobHess的SIFT源码分析:综述

    最初的目的是想做全景图像拼接,一开始找了OpenCV中自带的全景拼接的样例,用的是Stitcher类,可以很方便的实现全景拼接,而且效果很好,但是不利于做深入研究. 使用OpenCV中自带的Stitc ...

  4. 阅读《RobHess的SIFT源码分析:综述》笔记2

    今天开始磕代码部分. part1: 1. sift特征提取. img1_Feat = cvCloneImage(img1);//复制图1,深拷贝,用来画特征点 img2_Feat = cvCloneI ...

  5. element-ui button组件 radio组件源码分析整理笔记(一)

    Button组件 button.vue <template> <button class="el-button" @click="handleClick ...

  6. element-ui 组件源码分析整理笔记目录

    element-ui button组件 radio组件源码分析整理笔记(一) element-ui switch组件源码分析整理笔记(二) element-ui inputNumber.Card .B ...

  7. element-ui Carousel 走马灯源码分析整理笔记(十一)

    Carousel 走马灯源码分析整理笔记,这篇写的不详细,后面有空补充 main.vue <template> <!--走马灯的最外层包裹div--> <div clas ...

  8. STL源码分析读书笔记--第二章--空间配置器(allocator)

    声明:侯捷先生的STL源码剖析第二章个人感觉讲得蛮乱的,而且跟第三章有关,建议看完第三章再看第二章,网上有人上传了一篇读书笔记,觉得这个读书笔记的内容和编排还不错,我的这篇总结基本就延续了该读书笔记的 ...

  9. element-ui MessageBox组件源码分析整理笔记(十二)

    MessageBox组件源码,有添加部分注释 main.vue <template> <transition name="msgbox-fade"> < ...

  10. element-ui switch组件源码分析整理笔记(二)

    源码如下: <template> <div class="el-switch" :class="{ 'is-disabled': switchDisab ...

随机推荐

  1. 《NVM-Express-1_4-2019.06.10-Ratified》学习笔记(8.7)Standard Vendor Specific Command Format

    8.7 Standard Vendor Specific Command Format 标准的厂商特定命令格式 Controller可以支持Figure 106中定义的标准的Vendor Specif ...

  2. URL简介&HTTP协议

    世界上任何一栋建筑必须有一个地址才能找到 互联网上任何一个资源必须有一个“URL”才能被访问 URL的完整格式: <scheme>://<user>:<pwd>@& ...

  3. ASPxGridView 排序、分页、加载数据必需的三个函数

    protected void ASPxGridViewPoint_OnCustomCallback(object sender, ASPxGridViewCustomCallbackEventArgs ...

  4. es报错org.frameworkset.elasticsearch.ElasticSearchException: {"error":{"root_cause":[{"type":"cluster_block_exception","reason":"blocked by: [FORBIDDEN/12/index read-only / allow delete (api)];"}],

    今天es在保存数据的时候报错 org.frameworkset.elasticsearch.ElasticSearchException: {"error":{"root ...

  5. Python爬虫连载4-Error模块、Useragent详解

    一.error 1.URLError产生的原因:(1)没有网络:(2)服务器连接失败:(3)不知道指定服务器:(4)是OSError的子类 from urllib import request,err ...

  6. mysql cmd 常用命令

    环境变量配置配置好以后,打开cmd 连接:mysql -h主机地址 -u用户名 -p用户密码 (注:u与root可以不用加空格,其它也一样) 断开:exit (回车) 创建授权:grant selec ...

  7. 意外发现--http-server使用

    http-server 在很多情况下,需要在本地开启http服务器来测试.所以就需要一个简单的省事好用的http服务器.以前的时候,都是使用php的本地环境,但是,自从学了nodejs,发现了http ...

  8. 打表法fffff

    打表法: 打表前先运行一下 看一看速度 优化: O3 #pragma GCC optimize(3,"Ofast","inline") O2  #pragma ...

  9. 三分钟快速上手TensorFlow 2.0 (中)——常用模块和模型的部署

    本文学习笔记参照来源:https://tf.wiki/zh/basic/basic.html 前文:三分钟快速上手TensorFlow 2.0 (上)——前置基础.模型建立与可视化 tf.train. ...

  10. this.$nextTick

    首先我们先来看看官方介绍的用法: 将回调延迟到下次 DOM 更新循环之后执行.在修改数据之后立即使用它,然后等待 DOM 更新. 它跟全局方法 Vue.nextTick 一样,不同的是回调的 this ...