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. Cannot resolve collation conflict between "Chinese_Taiwan_Stroke_CI_AS" and "Chinese_PRC_CI_AS" in UNION ALL operator occurring in SELECT statement column 1.

    Cannot resolve collation conflict between . 解决方案: COLLATE Chinese_PRC_CI_AS 例子: SELECT A.Name FROM A ...

  2. 分类问题(三)混淆矩阵,Precision与Recall

    混淆矩阵 衡量一个分类器性能的更好的办法是混淆矩阵.它基于的思想是:计算类别A被分类为类别B的次数.例如在查看分类器将图片5分类成图片3时,我们会看混淆矩阵的第5行以及第3列. 为了计算一个混淆矩阵, ...

  3. wx: wx.showModal 回调函数中调用自定义方法

    一.在回调函数中调用自定义方法: 回调函数中不能直接使用this,需要在外面定义 var that = this 然后 that.自定义的方法.如下: //删除 onDelete: function ...

  4. Ubuntu 18.04 怎么安装Gnome Tweak Tool

    地址:https://jingyan.baidu.com/article/86f4a73ebd6c9437d7526963.html 终端键入命令:[sudo add-apt-repository u ...

  5. 白面系列 mongoDB

    mongoDB和redis一样,都是noSQL技术之一. redis是Key-Value存储,mongoDB是文档存储. 文档存储一般用类似json的格式存储,存储的内容是文档型的.文档是一组键值(k ...

  6. Ubuntu下vsc+python3配置

    我发现直接搜这个很容易得到过时的文章py2请滚蛋好么 1.首先下去VSC官网下载.deb的安装包,安装好vsc,打开后安装PYTHON,reload下.别啊忘记修改路径,setting下搜python ...

  7. 笔记本u盘插上不显示

    u盘突然拔出笔记本再次插入时不显示: 解决方法:我的电脑-设备管理器-其他设备(你的U盘驱动)-卸载 再重新插上去,即可显示

  8. JUC-线程间通信

    面试题: 两个线程,一个线程打印1-52,另一个打印字母A-Z打印顺序为12A34B...5152Z, 要求用线程间通信 线程间通信:1.生产者+消费者2.通知等待唤醒机制 多线程编程模版中 1.判断 ...

  9. 3_time

    3. Time and order What is order and why is it important? What do you mean "what is order"? ...

  10. 一点点学习PS--实战五

    本节实战的内容,新学习到的功能是:人物影子边缘.立体的心形 1.工具的使用: (1)滤镜--模糊--特殊模糊 (2)滤镜--滤镜库--艺术效果--水彩 (3)滤镜--滤镜库--纹理化 (4)自动形状工 ...