angularjs和Vue有哪些區別？angularjs與Vue的對比詳情

本篇文章主要的介紹了關於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方面的知識，就到topic.alibabacloud.comAngularJS參考手冊欄目觀看)

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之間的區別和對比介紹的文章了（推薦到topic.alibabacloud.comAngularJS使用手冊欄目學習）。有問題的可以在下方留言提問。