前端有三宝,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. 手把手教你实现Android编译期注解

    一.编译期注解在开发中的重要性 从早期令人惊艳的ButterKnife,到后来的以ARouter为首的各种路由框架,再到现在谷歌大力推行的Jetpack组件,越来越多的第三方框架都在使用编译期注解这门 ...

  2. 第四篇--Beyond Compare4 试用期30天后

    30天后删除BCUnrar.dll这个文件,继续使用30天.还有就是注册表中regedit-->HEKY_CURRENT_USER-->Software-->Scooter Soft ...

  3. 01MATLAB导论

    MATLAB语言的主要功能 数值计算 符号计算 图形绘制 程序流程控制 工具箱 课程的学习目标 要求理解MATLAB功能实现的数学背景与算法原理 掌握利用MATLAB进行问题求解的基本规律 能够利用M ...

  4. 构建后端第1篇之---springcloud项目依赖分析

    张艳涛写于2021-2-2日 springcloud是springboot工程+cloud依赖,从这个角度来分析,使用springcloud实际上就是添加springcloud的某个以来比如eurek ...

  5. 构建前端第6篇之---内嵌css样式 <el-button style="width:100%"> 登录 </el-button>

    张艳涛写于2021-1-20日 What: 如何让button的长度和input长度一致呢 最先想到的是给这个button加一个class ="buttonclass",然后在vu ...

  6. js之检测浏览器

    getBrowser () { let ua = navigator.userAgent.toLocaleLowerCase() let browserType = null if (ua.match ...

  7. 【LeetCode】841. 钥匙和房间

    841. 钥匙和房间 知识点:图:递归 题目描述 有 N 个房间,开始时你位于 0 号房间.每个房间有不同的号码:0,1,2,...,N-1,并且房间里可能有一些钥匙能使你进入下一个房间. 在形式上, ...

  8. Liferay Portal CE 反序列化命令执行漏洞(CVE-2020-7961)

    影响范围 Liferay Portal 6.1.X Liferay Portal 6.2.X Liferay Portal 7.0.X Liferay Portal 7.1.X Liferay Por ...

  9. QT 如何在调试时能进入源码方式(MacOS)

    最近在学习QT, 遇到一些crash, 也没看过QT源码啊, 就想类似Java一样, 在出错时进入源码跟踪一下, 但是QT和Java太不一样了, 死活进不去. 研究了几天, 发现本来是很简单的事情, ...

  10. 3D网页小实验-基于多线程和精灵动画实现RTS式单位行为

    一.实验目的: 1.在上一篇的"RTS式单位控制"的基础上添加逻辑线程,为每个单位实现ai计算: 2.用精灵动画为单位的行为显示对应的动作效果. 二.运行效果: 1.场景中的单位分 ...