使用Angularjs和Vue.js对比

之前项目都是使用Angularjs,(注明此处主要讲Angularjs 1)在初步使用Vue.js后做一个简单的对比笔记。

首先从理论上简单说一下各自的特点,之后再用几个小的例子加以说明。

Angular

  • 1,MVVM(Model)(View)(View-model)
  • 2,模块化(Module)控制器(Contoller)依赖注入:
  • 3,双向数据绑定:界面的操作能实时反映到数据,数据的变更能实时展现到界面。
  • 4,指令(ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)
  • 5,服务Service($compile $filter $interval $timeout $http...)
  • 6,路由(ng-Route原生路由),ui-router(路由组件)
  • 7,Ajax封装($http)

其中双向数据绑定的实现使用了$scope变量的脏值检测,使用$scope.$watch(视图到模型),$scope.$apply(模型到视图)检测,内部调用的都是digest,当然也可以直接调用$scope.$digest进行脏检查。值得注意的是当数据变化十分频繁时,脏检测对浏览器性能的消耗将会很大,官方注明的最大检测脏值为2000个数据。

Vue

vue.js官网:是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定组合的视图组件

  • (1)模块化,目前最热的方式是在项目中直接使用ES6的模块化,结合Webpack进行项目打包
  • (2)组件化,创造单个component后缀为.vue的文件,包含template(html代码),script(es6代码),style(css样式)
  • (3)双向数据绑定:界面的操作能实时反映到数据,数据的变更能实时展现到界面。
  • (4)指令(v-html v-bind v-model v-if/v-show...)
  • (5)路由(vue-router)
  • (6)vuex 数据共享
  • (7)Ajax插件(vue-resource,axios)

vue非常小巧,压缩后min源码为72.9kb,gzip压缩后只有25.11kb,想比Angular为144kb,可以自驾搭配使用需要的库插件,类似路由插件(Vue-router),Ajax插件(vue-resource,axios)等

Vue与 Angular 双向数据绑定原理###

angular.js脏值检查

angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图,最简单的方式就是通过 setInterval() 定时轮询检测数据变动,当然Google不会这么low,angular只有在指定的事件触发时进入脏值检测,大致如下:

  • DOM事件,譬如用户输入文本,点击按钮等。( ng-click )
  • XHR响应事件 ( $http )
  • 浏览器Location变更事件 ( $location )
  • Timer事件( $timeout , $interval )
  • 执行 $digest() 或 $apply()

vue数据劫持

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty

下面直接上代码

首先当然是Hello World了

vue

<div id="app">
{{ message }}
</div> new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})

Angular

<div ng-app="myApp" ng-controller="myCtrl">
{{message}}
</div> var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world";
});

相比较来看,vue采用了json的数据格式进行dom和data的编写,编写风格更加靠进js的数据编码格式,通俗易懂。

vue的双向数据绑定

<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div> new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})

Angular的双向数据绑定

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{message}}</p>
<input ng-model="message">
</div> var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world!";
});

vue虽然是一个轻量级的框架,提供的API确非常多,包括一些便捷的指令和属性操作,一般vue是指令使用(v-)操作符,相比angularjs指令使用(ng-)。其中vue.js还支持指令的简写方式:

  • (1)事件click

    <a v-on: click="fn"></a>

    简写方式:

    <a @click="fn"></a>

  • (2)属性

    <a v-bind: href="url"></a>

    简写方式:

    <a :href="url"></a>

vue.渲染列表

<div id="app">
<ul>
<li v-for="name in names">
{{ name.first }}
</li>
</ul>
</div> new Vue({
el: '#app',
data: {
names: [
{ first: 'summer', last: '7310' },
{ first: 'David', last:'666' },
{ first: 'Json', last:'888' }
]
}
})

Angularjs渲染列表

<div ng-app="myApp" ng-controller="myCtrl">
<li ng-repeat="name in names">{{name.first}}</li>
</div> var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [
{ first: 'summer', last: '7310' },
{ first: 'David', last:'666' },
{ first: 'Json', last:'888' }
]
});

vue的循环

<ul>
<li v-for="item in list">
<a :href="item.url">{{item.title}}</a>
</li>
</ul>

angular和vue的渲染差不多

<div class="item" ng-repeat="news in  newsList">
<a ng-href="#/content/{{news.id}}">
<img ng-src="{{news.img}}" />
<div class="item-info">
<h3 class="item-title">{{news.title}}</h3>
<p class="item-time">{{news.createTime}}</p>
</div>
</a>
</div>

vue和Angular处理用户输入

<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div> new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ message }}</p>
<button ng-click="reverseMessage()">Reverse Message</button>
</div> var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world!";
$scope.reverseMessage = function() {
this.message = this.message.split('').reverse().join('')
}
});

使用Angularjs和Vue.js对比的更多相关文章

  1. Ember.js和Vue.js对比,哪个框架更优秀?

    本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript最初是为Web应用程序创建的.但是随着前端技术的 ...

  2. Vue.JS 对比其他框架

    Angular 选择 Vue 而不选择 Angular,有下面几个原因,当然不是对每个人都适合: 在 API 与设计两方面上 Vue.js 都比 Angular 简单得多,因此你可以快速地掌握它的全部 ...

  3. 从angularJS改道Vue.js,趟过第一个坑!

    vue采用 new vue()初始化,显然vue内部没有类似jquery ready函数的机制,在文档加载完成后再执行初始化. 今天新学习vue,由于vue采用es5的特殊机制更新UI,我不确定ipa ...

  4. 移动端 | Vue.js对比微信小程序基础语法

    (1)vue 自定义组件与父组件的通信,props:[abb],可以看成自组建的一个自定义属性 (2)vue 模版语法{{}} 只能是在DOM中插入,<div>{{acc}}</di ...

  5. vue.js与angular.js的区别(个人)

    刚进入实训 讲师就要发一些什么比较高大上的东西,本人才疏学浅  浅浅的分享一下angularjs 和vue.js的区别.只是简单的理解一下 大神勿喷. 生实训之前学习的angular.js 只是理解了 ...

  6. Vue.js 很好,但会比 Angular 或 React 更好吗?

    文章转自:http://www.oschina.net/translate/vuejs-is-good-but-is-it-better-than-angular-or-rea Vue.js 是一个用 ...

  7. Vue.js Is Good, but Is It Better Than Angular or React?

    Vue.js is a JavaScript library for building web interfaces. Combining  with some other tools It also ...

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

    个人认为Vue.js的文档最恳切.我认为结合文档和遇到问题Google答案的匹配度来讲:Vue.js > ReactJS > AngularJS > Angular 2 如何使用Vu ...

  9. angular4.0和angularJS、react.js、vue.js的简单比较

    angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 ang ...

随机推荐

  1. java课设-计算数学表达式的程序,201521123050,51 团队

    1.团队名称.团队成员介绍 团队名称:天空 团队成员: 肖世松 谢庆圆 2.项目git地址 项目git地址 3.项目git提交记录截图(要体现出每个人的提交记录.提交说明) 4.项目功能架构图与主要功 ...

  2. 201521123026《JAVA程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  3. 201521123089《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 1.数据库:为了实现一定目的按某中规划组织起来的"数据"的"集合". 2 ...

  4. Eclipse rap 富客户端开发总结(13) :Rap/Rcp保存按钮处理方式

    一.概述 在做项目的过程中,处理编辑区的保存机制的时候.发现,同样是扩展eclipse 自带的保存和全部保存按钮时候,rcp 工程下,保存按钮可以正常的灰显和可用,但是rap 的按钮就是始终呈现灰显的 ...

  5. 纳税服务系统【自动受理,Quartz任务调度】

    需求 回到我们的需求: 自动投诉受理:在每个月月底最后一天对本月之前的投诉进行自动处理:将投诉信息的状态改为 已失效.在后台管理中不能对该类型投诉进行回复. 这个需求需求我们要怎么弄呢????要在每个 ...

  6. Struts2-在js中使用struts2标签

    1, 支行是下拉列表,自助银行也是下拉列表,它们是级联关系; <tr> <th width="17%"><span>*</span> ...

  7. UVW源码漫谈(番外篇)—— Emitter

    这两天天气凉了,苏州这边连续好几天都是淅淅沥沥的下着小雨,今天天气还稍微好点.前两天早上起来突然就感冒了,当天就用了一卷纸,好在年轻扛得住,第二天就跟没事人似的.在这里提醒大家一下,天气凉了,睡凉席的 ...

  8. node 当中的 cnpm和npm 的区别和使用

    在安装nodejs之后会有npm命令 打开命令符输入之后 输入node -v(记得-v前空格)查看版本信息   如果显示出来了就说明安装成功 然后 npm 可以安装node插件 cnpm使用的是淘宝网 ...

  9. StringBuffer的替换和反转和截取功能

    A:StringBuffer的替换功能 * public StringBuffer replace(int start,int end,String str): * 从start开始到end用str替 ...

  10. ArrayListd的长度问题

    namespace ArrayListd的长度问题{ class Program { static void Main(string[] args) { //需要的参数是object类型 //alt+ ...