前端有三宝,Angular,Vue,React。目前这三大主流JS框架已经成三分之势。其中的React框架是由脸书开发的,今天我们就来聊一聊VueJS的前世今生。

前世

在2013年的js开发者大会上,ReactJS被开源了。我们都知道开源社区是非常强大的,开源的React在短短几年就积累了大量的扩展,这让react一下子就成为了三大框架之一。随着React越来越流行,问题也越来越明显,当然React的设计思想之好毋庸置疑,但是对中国人来说,其语法不太符合国人的习惯,导致国人很难上手使用React。非常之时必出非常之事,非常之事必出非常之人,在Goole工作的华人尤雨溪从react设计思想中找到灵感,结合国人编码习惯,开启了Vue时代,提供了更加简洁、更易于理解的API,使得我们能够快上手,前端事业从此进入一个新时代。

今生

随着 HTML5 的流行,前端不再是人们眼中的小玩意,以前在 C/S 中实现的桌面软件的功能逐步迁移到了前端,前端的代码逻辑逐渐变得复杂起来。随着这些 MVVM框架的出现,网页逐渐由 Web Site 演变成了 Web App,最终导致了复杂的单页应用( Single Page Application)的出现。Vue的出现主要目的是为了开发大型单页面应用。Vue的基本原理如下:

1. 声明式渲染:解决数据绑定问题,数据驱动,开发人员关注数据及业务逻辑,不再关注DOM操作。

2. 组件化: 拆分页面,复用和维护,利于多人协作。

3. 虚拟DOM和diff算法(继承react): 大大提高了DOM操作性能。

随着Vue的快速发展和大量前端爱好者的大力追捧,目前Vue已经有了自己的大家族,也就是Vue全家桶。后续会对Vue的技术和原理进行深度讲解,敬请期待!

MVVM框架三巨头之Vue的前世今生。的更多相关文章

  1. 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  2. Vue.js-----轻量高效的MVVM框架(二、Vue.js的简单入门)

    1.hello vue.js! (1)引入vue.js <script type="text/javascript" src="js/vue.js"> ...

  3. Vue.js-----轻量高效的MVVM框架(一、初识Vue.js)

    1.什么是Vue.js? 众所周知,最近几年前端发展非常的迅猛,除各种框架如:backbone.angular.reactjs外,还有模块化开发思想的实现库:sea.js .require.js .w ...

  4. vue.js学习笔记(一):什么是mvvm框架,vue.js的核心思想

    一:MVVM框架 MVVM框架的应用场景:  1.针对具有复杂交互逻辑的前端应用 2.提供基础的架构抽象 3.提供ajax数据持久化,保证前端用户体验 二:vue.js的核心思想 (一):数据驱动 ( ...

  5. 实现一个类 Vue 的 MVVM 框架

    Vue 一个 MVVM 框架.一个响应式的组件系统,通过把页面抽象成一个个组件来增加复用性.降低复杂性 主要特色就是数据操纵视图变化,一旦数据变化自动更新所有关联组件~ 所以它的一大特性就是一个数据响 ...

  6. 三种Web前端框架比较与介绍--Vue, react, angular

    一.Angular 1.MVVM(Model)(View)(View-model): 2.模块化(Module)控制器(Contoller)依赖注入: 3.双向数据绑定:界面的操作能实时反映到数据,数 ...

  7. Vue中的MVVM框架

    ViewModel:数据双向绑定 场景: 针对具有复杂交互逻辑的前段应用 提供基础的架构抽象 通过Ajax数据持久化,保证前端用户体验  什么是vue.js? 是一个轻量级的mvvm框架 数据驱动+组 ...

  8. 直播课(1)如何通过数据劫持实现Vue(mvvm)框架

    19.6.28更新: 这篇博客比较完善:将每一部分都分装在单独的js文件中: 剖析Vue原理&实现双向绑定MVVM 半个月前看的直播课,现在才自己敲了一遍,罪过罪过 预览: 思路: 简单实现V ...

  9. 剖析手写Vue,你也可以手写一个MVVM框架

    剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...

随机推荐

  1. Unittest方法 -- 用例执行顺序

    import unittestfrom selenium import webdriverclass F4(unittest.TestCase): @classmethod def setUpClas ...

  2. React中组件之间通信的方式

    一.是什么 我们将组件间通信可以拆分为两个词: 组件 通信 回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想 相比vue,React的组件更加灵活和多样,按照不同 ...

  3. SpringBoot | 3.1 配置数据源

    目录 前言 1. 数据源的自动配置 2. *数据源自动配置源码分析 2.1 DataSourceAutoConfiguration:数据源自动配置类 2.2 JdbcTemplateAutoConfi ...

  4. VScode中LeetCode插件无法登录的情况

    VScode中LeetCode插件无法登录的情况 一直提示账户和密码无效,不知道什么问题. 后来发现是设置问题 在插件中找到leetcode 右键,点击setting 在界面里找到这里,将leetco ...

  5. java实现自动静默打印功能

    ​ 最近接到一个需求,要求实现自动打印功能,一般网页打印pdf需要借助浏览器的pdf组件,而且还要弹出打印窗口,再点击打印才能实现. 那么如何实现自动打印了,从点击自己网页上3次缩减到点击一次了? 一 ...

  6. 通过Xlib枚举指定进程下所有窗体

    在windows系统下如果想要枚举指定进程的窗体,我们可以通过EnumWindows加上自己实现的回调函数进行实现,那么在linux下该如何做呢? 其实也很简单,在linux下,我们可以通过xlib中 ...

  7. js 日期转为时间戳

    在js中,将一个字符转化成Date型也不是什么难事:var str = '2013-08-30'; // 日期字符串str = str.replace(/-/g,'/'); // 将-替换成/,因为下 ...

  8. AuthorizationFailed""The client '***' with object id '***' does not have authorization to perform action 'or the scope is invalid. If access was recently granted, please refresh your credentials

    Warning  SyncLoadBalancerFailed  4m9s (x11 over 29m)   service-controller  Error syncing load balanc ...

  9. Kafka原理笔记

    1.什么是kafka? Kafka是一种分布式的,基于发布/订阅的消息系统(消息队列). 2.为什么要用kafka? 当业务逻辑变得复杂,数据量也会越来越多.此时可能需要增加多条数据线,每条数据线将收 ...

  10. 跟你说个笑话,硕士毕业两年,月薪10k,天天面向CV编程

    "枯燥乏味的一天,又tm要开始了". 早上10:00,程序员毛毛带着路上买的早餐,打开24英寸的显示屏,去某论坛查一下昨天没有解决的bug. 9 个小时增删改查.搬砖写代码的一天又 ...