html5 vue angularjs,angularjs和Vue有哪些区别？angularjs与Vue的对比详情
本篇文章主要的介绍了关于angularjs和vuejs的区别，还有angularjs和vue.js对齐的详情，里面还包含了很多实例在里面，让大家更容易阅读。下面就让我们一起来看本篇文章吧。
首先我们来看看angularjs和Vue的区别介绍：vueJS简单易学,而angularJS的上手较高；
vue专注于View层，主打的是快速便捷，而angularJS功能则比较全面，当然体量也较大，相对没有vue那么便捷；
angularJS的指令都是ng-xxx，而vueJS的指令都是v-xxx；
angularJS的所有指令和方法都是绑定在$scope上的，而vueJS是new出来一个实例，所有的方法和指令都在这个实例上，一个页面上可以有多个vue实例，但是angularJS的对象只能有一个；
angularJS是由google开发和维护的，vueJS是由个人维护的；
vueJS一般用于移动端的开发，而angularJS一般应用于大型的项目
现在说说angularjs和Vue的对比详情：
之前项目都是使用Angularjs，(注明此处主要讲Angularjs 1)在初步使用Vue.js后做一个简答的对比笔记。
首先从理论上简单说一下各自的特点，之后再用几个小的例子加以说明。(想知道更多关于angularjs方面的知识，就到PHP中文网AngularJS参考手册栏目观看)
Angular的介绍：
1.MVVM(Model)(View)(View-model)
2.模块化(Module)控制器(Contoller)依赖注入：
3.双向数据绑定：界面的操作能实时反映到数据，数据的变更能实时展现到界面。
4.指令(ng-click ng-model ng-href ng-src ng-if...)
5.服务Service($compile $filter $interval $timeout $http...)
其中双向数据绑定的实现使用了$scope变量的脏值检测，使用$scope.$watch(视图到模型)，$scope.$apply(模型到视图)检测，内部调用的都是digest，当然也可以直接调用$scope.$digest进行脏检查。值得注意的是当数据变化十分频繁时，脏检测对浏览器性能的消耗将会很大，官方注明的最大检测脏值为2000个数据。
Vue的介绍：
vue.js官网：是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
模块化，目前最热的方式是在项目中直接使用ES6的模块化，结合Webpack进行项目打包
组件化，创造单个component后缀为.vue的文件，包含template(html代码)，script(es6代码),style(css样式)
路由，
vue非常小巧，压缩后min源码为72.9kb，gzip压缩后只有25.11kb，想比Angular为144kb，可以自驾搭配使用需要的库插件，类似路由插件(Vue-router)，Ajax插件(vue-resource)等
下面直接上代码
首先当然是Hello World了
vue的代码：
{{ message }}
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
Angular的代码：
{{message}}
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world";
});
相比较来看，vue采用了json的数据格式进行dom和data的编写，编写风格更加靠进js的数据编码格式，通俗易懂。
vue和Angular处理用户输入
{{ message }}
Reverse Message
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
{{ message }}
Reverse Message
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.渲染列表
{{ name.first }}
new Vue({
el: '#app',
data: {
names: [
{ first: 'summer', last: '7310' },
{ first: 'David', last:'666' },
{ first: 'Json', last:'888' }
]
}
})
Angularjs渲染列表
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [
{ first: 'summer', last: '7310' },
{ first: 'David', last:'666' },
{ first: 'Json', last:'888' }
]
});
angular和vue的渲染差不多。
好了，以上就是本篇关于angularjs和Vue之间的区别和对比介绍的文章了(推荐到PHP中文网AngularJS使用手册栏目学习)。有问题的可以在下方留言提问。
【小编推荐】