前端有三宝,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. 微信小程序云开发-云存储-上传单个视频到云存储并显示到页面上

    一.wxml文件 <!-- 上传视频到云存储 --> <button bindtap="chooseVideo" type="primary" ...

  2. 微信小程序云开发-云函数-调用初始云函数获取openid

    一.调用初始云函数获取openid的两种方法 1.传统的success和fail 2.ES6的.then和.catch 3.编译结果 说明:初始云函数,是指刚创建完成的云函数.默认系统写的代码.

  3. 【超值分享】为何写服务器程序需要自己管理内存,从改造std::string字符串操作说起。。。

    服务器程序为何要进行内存管理,管中窥豹,让我们从string字符串的操作说起...... new/delete是用于c++中的动态内存管理函数,而malloc/free在c++和c中都可以使用,本质上 ...

  4. 流畅的python-2

    一.python数据结构  ----------------> ()      []          {} List 列表[] 可变的 lst = [1,2,3,4] #改 lst[(元素下标 ...

  5. python3中文件/IO编程

    python3的文件操作可谓是我见过所有语言中最舒服的,那我们来一起看一下py3中的文件操作. 1:文件的打开方式有以下几种: 注:以上图表参考菜鸟教程 2:定位读写文件  f = open(&quo ...

  6. joomla 3.7.0 (CVE-2017-8917) SQL注入漏洞

    影响版本: 3.7.0 poc http://192.168.49.2:8080/index.php?option=com_fields&view=fields&layout=moda ...

  7. 巧用map解决nginx的Location里if失效问题

    需求: Nginx根据参数来输出不同的header 我们想用Nginx来判断一些通用的参数, 根据参数情况在输出中不同的header, 或者cookie, 那么根据正常思路, 有如下配置: locat ...

  8. SpringBoot 源码解析笔记

    作者笔记仓库:https://github.com/seazean/javanotes 欢迎各位关注我的笔记仓库,clone 仓库到本地后使用 Typora 阅读效果更好. 如果大家只关注 Sprin ...

  9. 表格技术七十二变|手把手教你用Canvas电子表格做电子签名

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 日常生活工作学习中,大家对电子表格必定不陌生.从工作数据汇总分析到出门收据各种电子发票,这些都是由电子表格制 ...

  10. 攻防世界Web区部分题解

    攻防世界Web区部分题解   前言:PHP序列化就是把代码中所有的 对象 , 类 , 数组 , 变量 , 匿名函数等全部转换为一个字符串 , 提供给用户传输和存储 . 而反序列化就是把字符串重新转换为 ...