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方面的知識，就到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: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})

#Angular的程式碼：

<div ng-app="myApp" ng-controller="myCtrl">
 {{message}}
</div>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, 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: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})

<div ng-app="myApp" ng-controller="myCtrl">
 <p>{{ message }}</p>
 <button ng-click="reverseMessage()">Reverse Message</button>
</div>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.message = "Hello world!";
    $scope.reverseMessage = function() {
        this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
});

vue.渲染清單

<div id="app">
  <ul>
    <li v-for="name in names">
      {{ name.first }}
    </li>
  </ul>
</div>
new Vue({
  el: &#39;#app&#39;,
  data: {
    names: [
      { first: &#39;summer&#39;, last: &#39;7310&#39; },
      { first: &#39;David&#39;, last:&#39;666&#39; },
      { first: &#39;Json&#39;, last:&#39;888&#39; }
    ]
  }
})

Angularjs渲染清單

<div ng-app="myApp" ng-controller="myCtrl">
  <li ng-repeat="name in names">{{name.first}}</li>
</div>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.names = [
      { first: &#39;summer&#39;, last: &#39;7310&#39; },
      { first: &#39;David&#39;, last:&#39;666&#39; },
      { first: &#39;Json&#39;, last:&#39;888&#39; }
    ]
});

angular和vue的渲染差不多。

好了，以上就是這篇關於angularjs和Vue之間的區別和對比介紹的文章了（推薦到PHP中文網AngularJS使用手冊欄位學習）。有問題的可以在下方留言提問。

【小編推薦】

angularjs的優點和缺點分別是什麼？ angularjs的優缺點介紹

node.js在2018年能繼續火起來嗎？讓我們來看看node.js的待遇狀況

以上是angularjs和Vue有哪些差別？ angularjs與Vue的對比詳情的詳細內容。更多資訊請關注PHP中文網其他相關文章！