资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

angularjs和vuejs的区别是什么

本篇文章为大家展示了angularjs和vuejs的区别是什么，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

公司主营业务：网站建设、网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联推出沂南免费做网站回馈大家。

区别：1、angularjs是通过“脏值检测”的方式比对数据是否有变更，实现双向数据绑定；而vue是采用“数据劫持”结合“发布者-订阅者模式”的方式实现双向数据绑定。2、vue指令使用“v-”操作符，angularjs的指令使用“ng-”。

本教程操作环境：windows7系统、vue2.9.6&&Angular9版，DELL G3电脑。

使用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


  {{ 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的双向数据绑定


  
{{ 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虽然是一个轻量级的框架，提供的API确非常多，包括一些便捷的指令和属性操作，一般vue是指令使用(v-)操作符，相比angularjs指令使用（ng-）。其中vue.js还支持指令的简写方式：

vue.渲染列表


  


new Vue({
  el: '#app',
  data: {
    names: [
      { first: 'summer', last: '7310' },
      { first: 'David', last:'666' },
      { first: 'Json', last:'888' }
    ]
  }
})

Angularjs渲染列表


  {{name.first}}


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的循环

angular和vue的渲染差不多


    
        
        
            {{news.title}}
            {{news.createTime}}

        
    

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

上述内容就是angularjs和vuejs的区别是什么，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。


本文题目：angularjs和vuejs的区别是什么
标题来源：http://cdkjz.cn/article/ipeesh.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
网页设计制作腾讯香港空间成都门窗定制网站建设公司成都400电话办理鑫友邦火锅桌成都免费做网站网站建设重庆网站设计微信小程序开发

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图