vuejs和angularjs有什麼差別

區別：1、angularjs上手難，而vuejs簡單易學；2、angular的指令是“ng-xxx”，而vue是“v-xxx”；3、angular的所有指令和方法都是綁定在$scope上的，而vue的所有方法和指令都綁定在vue實例上。

本教學操作環境：windows7系統、vue2.9.6版，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

<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的雙向資料綁定

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

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

Angular的雙向資料綁定

<div ng-app="myApp" ng-controller="myCtrl">
  <p>{{message}}</p>
  <input ng-model="message">
</div>

var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.message = "Hello world!";
});

vue雖然是一個輕量級的框架，提供的API確非常多，包括一些便捷的指令和屬性操作，一般vue是指令使用(v-)操作符，相比angularjs指令使用（ng-）。其中vue.js也支援指令的簡寫方式：

• (1)事件click###

  <a v-on: click="fn"></a>

  简写方式：
  <a @click="fn"></a>

• (2)属性

  <a v-bind: href="url"></a>

  简写方式：
  <a :href="url"></a>

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

vue的循环

<ul>
    <li v-for="item in list">
        <a :href="item.url">{{item.title}}</a>
    </li>
</ul>

angular和vue的渲染差不多

<div class="item" ng-repeat="news in  newsList">
    <a ng-href="#/content/{{news.id}}">
        <img ng-src="{{news.img}}" />
        <div class="item-info">
            <h3 class="item-title">{{news.title}}</h3>
            <p class="item-time">{{news.createTime}}</p>
        </div>
    </a>
</div>

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

总结：angularjs和vuejs的区别

1、angularJS上手难，而vueJS简单易学；

2、angularJS的指令都是ng-xxx，而vueJS的指令都是v-xxx；

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

4、angularJS是由google开发和维护的，vueJS是由个人维护的；

5、vueJS一般用于移动端的开发，而angularJS一般应用于大型的项目。

更多编程相关知识，请访问：编程学习！！

以上是vuejs和angularjs有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！