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. H3C ARP配置

    一.ARP简介 ARP(Address Resolution Protocol,地址解析协议)是将IP地址解析为以太网MAC地址(或称物理地址)的协议. 在网络中,当主机或其它网络设备有数据要发送给另 ...

  2. 欢迎来到L T X的博客 & 博客转型公告

    这里是L T X,一位来自重庆的学生的个人博客. 由于博主以前是OIer,目前博客里主要是OI相关的内容. 但是现在博主已经退役了,因此博客将会转向...嗯...那种...就是那种...比较奇怪的类型 ...

  3. 使用Vmware过程中,突然网络连接不上问题

    ###第一次的解决方法: 1.我一般过一段时间就会对虚拟机进行拍快照备份:在使用过程中,如果没有太大变化,恢复网络正常的快照一般是能解决问题的,但是要记得恢复快照之前要备份你已经修改过的所有东西,以防 ...

  4. AntDesign(React)学习-2 第一个页面

    1.前面创建了第一个项目jgdemo,结构如下,使用TypeScript. 2.yarn start启动项目 3.点击GettingStarted是umi的官方网站 https://umijs.org ...

  5. windows10 安装盘制作以及重装系统

    1,安装盘制作 1),需要有系统的源文件才能装机,源文件请百度“windows10”选择microsoft官网的链接:这里,选择立即下载工具 2),很快就能下载好,双击运行,选择制作启动盘.启动盘的特 ...

  6. 《深入理解Java虚拟机》读书笔记十二

    第十二章  Java内存模型与线程 1.硬件效率与一致性 由于计算机的存储设备与处理器的运算速度有几个数量级的差距,所以现代计算机系统都不得不加入一层读写速度尽可能接近处理器运算速度的高速缓存(Cac ...

  7. ICPC2019 亚洲区域赛 南京站

    蒟蒻终于打完了人生的第一场ICPC了. 终榜去星后rank36,AG,和AU差几十罚时了. 虽有遗憾但总体也是正常发挥了. 不愿再去对比赛做什么回顾,甚至很不愿去想.很多题已经在能力之外,即便是平常熟 ...

  8. HTTP响应头 状态码

    HTTP 简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传 ...

  9. MIPS中的syscall用法

  10. 第三十三篇 玩转数据结构——红黑树(Read Black Tree)

    1.. 图解2-3树维持绝对平衡的原理: 2.. 红黑树与2-3树是等价的 3.. 红黑树的特点 简要概括如下: 所有节点非黑即红:根节点为黑:NULL节点为黑:红节点孩子为黑:黑平衡 4.. 实现红 ...