本篇文章介紹的內容是關於使用Angularjs和Vue.js對比，現在分享給大家，有需要的朋友可以參考一下
##使用Angularjs和Vue.js對比
Vuevue.js官網：是一套建構使用者介面的 #漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。 Vue 的核心函式庫只專注於視圖層，而且非常容易學習，非常容易與其它函式庫或已有專案整合。另一方面，Vue 完全有能力驅動採用單一檔案元件和
Vue 生態系統支援的函式庫開發的複雜單頁應用程式。 Vue.js 的目標是透過盡可能簡單的 API 實現回應的資料綁定和
組合的視圖元件vue非常小巧，壓縮後min源碼為72.9kb，gzip壓縮後只有25.11kb，想比Angular為144kb，可以自駕搭配使用需要的庫插件，類似路由插件(Vue-router )，Ajax插件(vue-resource,axios)等
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了
<p id="app">
{{ message }}
</p>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})<p ng-app="myApp" ng-controller="myCtrl">
{{message}}
</p>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world";
});比較來看，vue採用了json的資料格式進行dom和data的編寫，編寫風格更靠進js的資料編碼格式，通俗易懂。
<p id="app">
<p>{{ message }}</p>
<input v-model="message">
</p>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})<p ng-app="myApp" ng-controller="myCtrl">
<p>{{message}}</p>
<input ng-model="message">
</p>
var app = angular.module('myApp', []);
app.controller('myCtrl', 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>
<p id="app">
<ul>
<li v-for="name in names">
{{ name.first }}
</li>
</ul>
</p>
new Vue({
el: '#app',
data: {
names: [
{ first: 'summer', last: '7310' },
{ first: 'David', last:'666' },
{ first: 'Json', last:'888' }
]
}
})<p ng-app="myApp" ng-controller="myCtrl">
<li ng-repeat="name in names">{{name.first}}</li>
</p>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [
{ first: 'summer', last: '7310' },
{ first: 'David', last:'666' },
{ first: 'Json', last:'888' }
]
});<ul>
<li v-for="item in list">
<a :href="item.url">{{item.title}}</a>
</li>
</ul><p class="item" ng-repeat="news in newsList">
<a ng-href="#/content/{{news.id}}">
<img ng-src="{{news.img}}" />
<p class="item-info">
<h3 class="item-title">{{news.title}}</h3>
<p class="item-time">{{news.createTime}}</p>
</p>
</a>
</p><p id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</p>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})<p ng-app="myApp" ng-controller="myCtrl">
<p>{{ message }}</p>
<button ng-click="reverseMessage()">Reverse Message</button>
</p>
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和Vue.js對比的詳細內容。更多資訊請關注PHP中文網其他相關文章！
