您好,登錄后才能下訂單哦!
本篇文章為大家展示了angularjs和vuejs的區(qū)別是什么,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
區(qū)別:1、angularjs是通過(guò)“臟值檢測(cè)”的方式比對(duì)數(shù)據(jù)是否有變更,實(shí)現(xiàn)雙向數(shù)據(jù)綁定;而vue是采用“數(shù)據(jù)劫持”結(jié)合“發(fā)布者-訂閱者模式”的方式實(shí)現(xiàn)雙向數(shù)據(jù)綁定。2、vue指令使用“v-”操作符,angularjs的指令使用“ng-”。
本教程操作環(huán)境:windows7系統(tǒng)、vue2.9.6&&Angular9版,DELL G3電腦。
之前項(xiàng)目都是使用Angularjs,(注明此處主要講Angularjs 1)在初步使用Vue.js后做一個(gè)簡(jiǎn)單的對(duì)比筆記。
首先從理論上簡(jiǎn)單說(shuō)一下各自的特點(diǎn),之后再用幾個(gè)小的例子加以說(shuō)明。
1,MVVM(Model)(View)(View-model)
2,模塊化(Module)控制器(Contoller)依賴(lài)注入:
3,雙向數(shù)據(jù)綁定:界面的操作能實(shí)時(shí)反映到數(shù)據(jù),數(shù)據(jù)的變更能實(shí)時(shí)展現(xiàn)到界面。
4,指令(ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)
5,服務(wù)Service($compile $filter $interval $timeout $http...)
6,路由(ng-Route原生路由),ui-router(路由組件)
7,Ajax封裝($http)
其中雙向數(shù)據(jù)綁定的實(shí)現(xiàn)使用了$scope變量的臟值檢測(cè),使用$scope.$watch(視圖到模型),$scope.$apply(模型到視圖)檢測(cè),內(nèi)部調(diào)用的都是digest,當(dāng)然也可以直接調(diào)用$scope.$digest進(jìn)行臟檢查。值得注意的是當(dāng)數(shù)據(jù)變化十分頻繁時(shí),臟檢測(cè)對(duì)瀏覽器性能的消耗將會(huì)很大,官方注明的最大檢測(cè)臟值為2000個(gè)數(shù)據(jù)。
vue.js官網(wǎng):是一套構(gòu)建用戶界面的 漸進(jìn)式框架。與其他重量級(jí)框架不同的是,Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。Vue 的核心庫(kù)只關(guān)注視圖層,并且非常容易學(xué)習(xí),非常容易與其它庫(kù)或已有項(xiàng)目整合。另一方面,Vue 完全有能力驅(qū)動(dòng)采用單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)的復(fù)雜單頁(yè)應(yīng)用。
Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
(1)模塊化,目前最熱的方式是在項(xiàng)目中直接使用ES6的模塊化,結(jié)合Webpack進(jìn)行項(xiàng)目打包
(2)組件化,創(chuàng)造單個(gè)component后綴為.vue的文件,包含template(html代碼),script(es6代碼),style(css樣式)
(3)雙向數(shù)據(jù)綁定:界面的操作能實(shí)時(shí)反映到數(shù)據(jù),數(shù)據(jù)的變更能實(shí)時(shí)展現(xiàn)到界面。
(4)指令(v-html v-bind v-model v-if/v-show...)
(5)路由(vue-router)
(6)vuex 數(shù)據(jù)共享
(7)Ajax插件(vue-resource,axios)
vue非常小巧,壓縮后min源碼為72.9kb,gzip壓縮后只有25.11kb,想比Angular為144kb,可以自駕搭配使用需要的庫(kù)插件,類(lèi)似路由插件(Vue-router),Ajax插件(vue-resource,axios)等
Vue與 Angular 雙向數(shù)據(jù)綁定原理###
angular.js :臟值檢查
angular.js 是通過(guò)臟值檢測(cè)的方式比對(duì)數(shù)據(jù)是否有變更,來(lái)決定是否更新視圖,最簡(jiǎn)單的方式就是通過(guò) setInterval() 定時(shí)輪詢(xún)檢測(cè)數(shù)據(jù)變動(dòng),當(dāng)然Google不會(huì)這么low,angular只有在指定的事件觸發(fā)時(shí)進(jìn)入臟值檢測(cè),大致如下:
DOM事件,譬如用戶輸入文本,點(diǎn)擊按鈕等。( ng-click )
XHR響應(yīng)事件 ( $http )
瀏覽器Location變更事件 ( $location )
Timer事件( $timeout , $interval )
執(zhí)行 $digest() 或 $apply()
vue :數(shù)據(jù)劫持
vue.js 則是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式,通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter,getter,在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者,觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty
下面直接上代碼
首先當(dāng)然是Hello World了
<div id="app"> {{ message }} </div> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })
<div ng-app="myApp" ng-controller="myCtrl"> {{message}} </div> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.message = "Hello world"; });
相比較來(lái)看,vue采用了json的數(shù)據(jù)格式進(jìn)行dom和data的編寫(xiě),編寫(xiě)風(fēng)格更加靠進(jìn)js的數(shù)據(jù)編碼格式,通俗易懂。
vue的雙向數(shù)據(jù)綁定
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })
Angular的雙向數(shù)據(jù)綁定
<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雖然是一個(gè)輕量級(jí)的框架,提供的API確非常多,包括一些便捷的指令和屬性操作,一般vue是指令使用(v-)操作符,相比angularjs指令使用(ng-)。其中vue.js還支持指令的簡(jiǎn)寫(xiě)方式:
(1)事件click
<a v-on: click="fn"></a>
簡(jiǎn)寫(xiě)方式:<a @click="fn"></a>
(2)屬性
<a v-bind: href="url"></a>
簡(jiǎn)寫(xiě)方式:<a :href="url"></a>
<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' } ] } })
<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' } ] });
<ul> <li v-for="item in list"> <a :href="item.url">{{item.title}}</a> </li> </ul>
<div class="item" ng-repeat="news in newsList"> <a ng-href="#/content/{{news.id}}"> <img ng-src="{{news.img}}" /> <div class="item-info"> <h4 class="item-title">{{news.title}}</h4> <p class="item-time">{{news.createTime}}</p> </div> </a> </div>
<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('') } });
上述內(nèi)容就是angularjs和vuejs的區(qū)別是什么,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。