本教程操作环境：windows7系统、vue2.9.6&&angular9版，dell g3电脑。
使用angularjs和vue.js对比之前项目都是使用angularjs，（注明此处主要讲angularjs 1）在初步使用vue.js后做一个简单的对比笔记。
首先从理论上简单说一下各自的特点，之后再用几个小的例子加以说明。
angular1，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个数据。
vuevue.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('') }});
相关推荐：《vue.js教程》
以上就是angularjs和vuejs的区别是什么的详细内容。