当前位置:Gxlcms > JavaScript > angularjs和Vue有哪些区别?angularjs与Vue的对比详情

angularjs和Vue有哪些区别?angularjs与Vue的对比详情

时间:2021-07-01 10:21:17 帮助过:9人阅读

本篇文章主要的介绍了关于angularjs和vuejs的区别,还有angularjs和vue.js对齐的详情,里面还包含了很多实例在里面,让大家更容易阅读。下面就让我们一起来看本篇文章吧。

首先我们来看看angularjs和Vue的区别介绍:

  1. vueJS简单易学,而angularJS的上手较高;

  2. vue专注于View层,主打的是快速便捷,而angularJS功能则比较全面,当然体量也较大,相对没有vue那么便捷;

  3. angularJS的指令都是ng-xxx,而vueJS的指令都是v-xxx;

  4. angularJS的所有指令和方法都是绑定在$scope上的,而vueJS是new出来一个实例,所有的方法和指令都在这个实例上,一个页面上可以有多个vue实例,但是angularJS的对象只能有一个;

  5. angularJS是由google开发和维护的,vueJS是由个人维护的;

  6. 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的代码:

<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和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.渲染列表

<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' }
    ]
});

angular和vue的渲染差不多。

好了,以上就是本篇关于angularjs和Vue之间的区别和对比介绍的文章了(推荐到PHP中文网AngularJS使用手册栏目学习)。有问题的可以在下方留言提问。

【小编推荐】

angularjs的优点和缺点分别是什么?angularjs的优缺点介绍

node.js在2018年能继续火起来吗?我们来看看node.js的待遇情况

以上就是angularjs和Vue有哪些区别?angularjs与Vue的对比详情的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行