區別：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: '#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的雙向資料綁定
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})登入後複製
Angular的雙向資料綁定
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{message}}</p>
<input ng-model="message">
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world!";
});登入後複製
vue雖然是一個輕量級的框架，提供的API確非常多，包括一些便捷的指令和屬性操作，一般vue是指令使用(v-)操作符，相比angularjs指令使用（ng-）。其中vue.js也支援指令的簡寫方式：
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' }
]
});登入後複製
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: '#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('')
}
});登入後複製
总结：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中文網其他相關文章！
