青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步

  Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js。而在很多方面,Vue.js也正像是中国的那句古话,“青出于蓝而胜于蓝”。今天,K就从下面几个方面来跟大家一起探讨一下,Vue.js到底在哪些方面更“胜于蓝”。

(一)简单的操作

  这是K看来Vue.js最杰出的的方法,Vue.js致力于视图层的展现,这使它在与其他项目进行整合的时候会变得非常easy,这也使它更容易“嵌入”其他的库或者项目。而在写法上,K也是很偏向于Vue.js的,无论是各种数据、方法上的绑定等等。这一点是Angular.js很难相齐的。

(二)单向数据流

  这是Vue.js所具备的不同模块间的强制性的单向数据流,是Vue.js不同于Angular.js的一大特色。Vue.js所提供的单向数据流的数据绑定方式使程序猿操作时,更容易摸清、控制数据的走向。

(三)指令与组件

  在Vue.js中,强化了指令与组件的区分:指令只封装DOM操作,而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。而在 Angular 中两者有不少相混的地方。

(四)优化更简单

  Vue.js中的数据变化是相对独立的(除非有特别明确的依赖关系),而在Angular.js中,一个作用域中某条数据的变化就会使watcher重新对这一作用域进行更新。相对来说,后者会花费更多的时间去优化数据的更新,特别是作用域大量存在时,而前者根本就不会发生这种问题。

  以上四点,就是K在初步学习Vue.js和Angular.js之后,感觉到的两者的不同。其实在某种程下,两者是不分伯仲的,他们各自都有其不可被替代的那一部分,或许以后的某个时间,会再有一种综合能力更强于两者的框架的出现。

  (参考:https://cn.vuejs.org/v2/guide/comparison.html)

时间: 2024-08-03 03:14:34

青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步的相关文章

Require.js、Angular.js整合

Require.js 详见: 初识Require.js 解密Require.js Angular.js 详见: 初识Angular.js之爱恨情仇 整合Require.js.Angular.js 配置 在Requirejs中配置angular.js. require-main.js // 配置 requirejs.config({ ... paths: { 'jquery': 'libs/jquery-2.1.3/jquery.min', 'angular': 'libs/angular-1.3

js框架——angular.js(5)

1. 3种过滤方式 1 <html> 2 <head> 3 <meta charset='utf-8'> 4 <script src="js/angular.js"></script> 5 <script src="js/app.js"></script> 6 <link rel="stylesheet" href="css/bootstrap.c

Angular JS - 3 - Angular JS 双向数据绑定

一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从Model流向View 视图(View): 也就是我们的页面(主要是Andular指令和表达式) 模型(Model) : 作用域对象(当前为$rootScope), 它可以包含一些属性或方法 当改变View中的数据, Model对象的对应属性也会随之改变: ng-model指令 数据从View==>

Angular JS - 7 - Angular JS 常用指令2

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <!-- 8 常用指令(二) 9 * ng-class: 动态引用定义的样式 {aClass:true, bClass:false} 10 * ng-style: 动态引用通过j

Angular JS - 6 - Angular JS 常用指令

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <!-- 8 1. Angular指令 9 * Angular为HTML页面扩展的: 自定义标签属性或标签 10 * 与Angular的作用域对象(scope)交互,扩展页面的动

Vue.js和angular.js的区别

关于Vue的描述: HTML模版+JSON数据,再创建一个Vue实例,就这么简单 关于Angular的描述: AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. 由此可以看出Vue比Angular相对来说简单一些,在 API 与设计两方面上 Vue.js 都比 Angular 简单得多,因此你可以快速地掌握它的全部特性并投入开发

主流前端框架对比:Vue.js , React, Angular.js

个人认为Vue.js的文档最恳切.我认为结合文档和遇到问题Google答案的匹配度来讲:Vue.js > ReactJS > AngularJS > Angular 2 如何使用Vue.js? 1.安装 (1)script 如果项目直接通过script加载CDN文件,代码示例如下: <script src="http://webapp.didistatic.com/static/webapp/shield/z/vue/vue/1.0.24/vue.min.js"

js框架——angular.js(3)

1. 过滤filter 过滤就是将内容进行筛选或者转换或者两者都有,一般的表示方式就是在变量后面添加"|",然后加上过滤条件,如—— {{name|currency}} 这个currency过滤器可以将值转变成货币的格式. 另外,这个货币的格式也可以设置—— {{name|currency: "Euro €" }} 这样,输入1234,就会显示: 123,4 Euro € 2. 自定义过滤器 过滤器当然可以自定义,毕竟系统给定的过滤器根本不够用. 1 <bod

js框架——angular.js(4)

1. angular中的对象 其实也不用多说的,前台是可以提取后台定义的对象的—— 1 <body ng-app="MyApp"> 2 <div ng-controller="User"> 3 <form ng-submit="submit()" novalidate> 4 <label>Firstname</label> 5 <input type="text"