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. 我的第一个Maven Helloworld

    使用MAVEN创建项目可以有两种方式进行创建,第一种,使用mvn命令创建Maven项目,第二种,使用eclipse创建Maven项目. 在创建Maven项目之前,我们需要安装maven,并和配置JDK ...

  2. python面试的100题(14)

    32.请写出一个函数满足以下条件 该函数的输入是一个仅包含数字的list,输出一个新的list,其中每一个元素要满足以下条件: 1.该元素是偶数 2.该元素在原list中是在偶数的位置(index是偶 ...

  3. Manacher算法求最长回文串模板

    #include <algorithm> #include <iostream> #include <cstring> #include <cstdio> ...

  4. 汉语诗词 LaTeX 排版样式

    清世何须忧庙廊——汉语诗词 LaTeX 排版样式 作者想一些中国古典诗歌,发现大多数早期的例子都是为了英文诗而创作的环境. 下面是作者给出唐诗选集的布局实例. 它不是一般解决方案,而只是一个特定的例子 ...

  5. 图的最短路径算法-- Floyd算法

    Floyd算法求的是图的任意两点之间的最短距离 下面是Floyd算法的代码实现模板: ; ; // maxv为最大顶点数 int n, m; // n 为顶点数,m为边数 int dis[maxv][ ...

  6. 杭电oj————2057(java)

    question:A+ B again 思路:额,没啥思路/捂脸,用java的long包里的方法,很简单,只是有几次WA,有几点要注意一下 注意:如果数字有加号要删除掉,这里用到了正则表达式“\\+” ...

  7. 220. 存在重复元素 III

    题目: 给定一个整数数组,判断数组中是否有两个不同的索引 i 和 j,使得 nums [i] 和 nums [j] 的差的绝对值最大为 t,并且 i 和 j 之间的差的绝对值最大为 ķ. 示例 1: ...

  8. JSON.toJSONString(Object object,SerializerFeature...features)详解

    D package myProject; import java.math.BigDecimal; import java.util.ArrayList; import java.util.List; ...

  9. AcWing 282. 石子合并

    #include <iostream> #include <algorithm> using namespace std; ; int n; int s[N];//前缀和 in ...

  10. 1060 Are They Equal (25分)

    1060 Are They Equal (25分) 题目 思路 定义结构体 struct fraction{ string f; int index; } 把输入的两个数先都转换为科学计数法,统一标准 ...