真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

angularjs和vuejs的區(qū)別是什么

本篇文章為大家展示了angularjs和vuejs的區(qū)別是什么，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

公司主營業(yè)務(wù)：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出沂南免費做網(wǎng)站回饋大家。

區(qū)別：1、angularjs是通過“臟值檢測”的方式比對數(shù)據(jù)是否有變更，實現(xiàn)雙向數(shù)據(jù)綁定；而vue是采用“數(shù)據(jù)劫持”結(jié)合“發(fā)布者-訂閱者模式”的方式實現(xiàn)雙向數(shù)據(jù)綁定。2、vue指令使用“v-”操作符，angularjs的指令使用“ng-”。

本教程操作環(huán)境：windows7系統(tǒng)、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，雙向數(shù)據(jù)綁定：界面的操作能實時反映到數(shù)據(jù)，數(shù)據(jù)的變更能實時展現(xiàn)到界面。

  • 4，指令(ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)

  • 5，服務(wù)Service($compile $filter $interval $timeout $http...)

  • 6，路由(ng-Route原生路由),ui-router(路由組件)

  • 7，Ajax封裝($http)

其中雙向數(shù)據(jù)綁定的實現(xiàn)使用了$scope變量的臟值檢測，使用$scope.$watch（視圖到模型），$scope.$apply(模型到視圖)檢測，內(nèi)部調(diào)用的都是digest，當(dāng)然也可以直接調(diào)用$scope.$digest進(jìn)行臟檢查。值得注意的是當(dāng)數(shù)據(jù)變化十分頻繁時，臟檢測對瀏覽器性能的消耗將會很大，官方注明的最大檢測臟值為2000個數(shù)據(jù)。

Vue

vue.js官網(wǎng)：是一套構(gòu)建用戶界面的 漸進(jìn)式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計。Vue 的核心庫只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅(qū)動采用單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。

Vue.js 的目標(biāo)是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

  • （1）模塊化，目前最熱的方式是在項目中直接使用ES6的模塊化，結(jié)合Webpack進(jìn)行項目打包

  • （2）組件化，創(chuàng)造單個component后綴為.vue的文件，包含template(html代碼)，script(es6代碼),style(css樣式)

  • （3）雙向數(shù)據(jù)綁定：界面的操作能實時反映到數(shù)據(jù)，數(shù)據(jù)的變更能實時展現(xiàn)到界面。

  • （4）指令(v-html v-bind v-model v-if/v-show...)

  • （5）路由(vue-router)

  • （6）vuex 數(shù)據(jù)共享

  • （7）Ajax插件(vue-resource,axios)

vue非常小巧，壓縮后min源碼為72.9kb，gzip壓縮后只有25.11kb，想比Angular為144kb，可以自駕搭配使用需要的庫插件，類似路由插件(Vue-router)，Ajax插件(vue-resource,axios)等

Vue與 Angular 雙向數(shù)據(jù)綁定原理###

angular.js：臟值檢查

angular.js 是通過臟值檢測的方式比對數(shù)據(jù)是否有變更，來決定是否更新視圖，最簡單的方式就是通過 setInterval() 定時輪詢檢測數(shù)據(jù)變動，當(dāng)然Google不會這么low，angular只有在指定的事件觸發(fā)時進(jìn)入臟值檢測，大致如下：

  • DOM事件，譬如用戶輸入文本，點擊按鈕等。( ng-click )

  • XHR響應(yīng)事件 ( $http )

  • 瀏覽器Location變更事件 ( $location )

  • Timer事件( $timeout , $interval )

  • 執(zhí)行 $digest() 或 $apply()

vue：數(shù)據(jù)劫持

vue.js 則是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty

下面直接上代碼

首先當(dāng)然是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的數(shù)據(jù)格式進(jìn)行dom和data的編寫，編寫風(fēng)格更加靠進(jìn)js的數(shù)據(jù)編碼格式，通俗易懂。

vue的雙向數(shù)據(jù)綁定


  
{{ message }}

  
new Vue({   el: '#app',   data: {     message: 'Hello Vue.js!'   } })

Angular的雙向數(shù)據(jù)綁定


  
{{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的循環(huán)

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

上述內(nèi)容就是angularjs和vuejs的區(qū)別是什么，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。


當(dāng)前標(biāo)題：angularjs和vuejs的區(qū)別是什么
轉(zhuǎn)載來于：http://weahome.cn/article/ipeesh.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部