angularjs和vuejs的区别_vue和angularjs区别-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42992840/article/details/84962253

本文探讨了Vue.js的模块化和组件化特性，并对比了Angular与Vue之间的差异，包括Angular的MVVM框架性质、双向数据绑定的实现方式、模板编译规则，以及Vue的轻量化、高性能和低学习成本。同时，展示了Vue和Angular的Hello World示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue仅仅是mvvm中的view层，只是一个如jquery般的工具库，而不是框架，而angular是mvvm框架。

2.vue的双向邦定是基于ES5 的 getter/setter来实现的，而angular而是由自己实现一套模版编译规则，需要进行所谓的“脏”检查，vue则不需要。因此，vue在性能上更高效，但是代价是对于ie9以下的浏览器无法支持。

3.在 vue 中指令和组件分得更清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。在 angular 中两者有不少相混的地方。

4.在 API 与设计两方上 vue比 angular 简单得多，因此你可以快速地掌握它的全部特性并投入开发。

5.vue是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序，而不是在任何时候都必须遵循 angular制定的规则，这让 vue 能适用于各种项目。

6.angular用的指令是ng-前缀的，而vue是v-，风格其实一样的，数据绑定的方式也是一样的两个{}

AngularJS
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...)。

Vue.js
1、模块化，目前最热的方式是在项目中直接使用ES6的模块化，结合Webpack进行项目打包；
2、组件化，创造单个component后缀为.vue的文件，包含template(html代码)，script(es6代码),style(css样式)；

angular和vue的差别

Angular是mvvm框架, 而vue是一个渐进式的框架, 相当于view层, 都有双向数据绑定, 但是angular中的双向数据绑定是基于脏检查机制, vue的双向数据绑定是基于ES5的getter和setter来实现, 而angular是有自己实现一套模板编译规则,vue比angular更轻量, 性能上更高效, 比angular更容易上手, 学习成本低, vue需要一个el对象进行实例化, 而angular是整个html页面下的,单页面应用, 而vue可以有过个vue实例；
　　下面直接上代码

首先当然是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";
});

参考：https://blog.youkuaiyun.com/qq_21859119/article/details/70598938