vue的雙向數(shù)據(jù)綁定在互聯(lián)網(wǎng)編程學(xué)習中,隨著不斷的更新和迭代我們可以使用的框架越來越多,我們會在不同的框架中使用不用的框架,那么今天我們就來說說有關(guān)于“在vue.js和angularjs中有哪些特點?”這個問題吧!下面是一些相關(guān)的信息,希望對大家的學(xué)習和理解有所幫助!
一、Vue與 Angular介紹
1、Vue
對于 vue大家應(yīng)該都是比較熟悉的,它是有關(guān)于構(gòu)建用戶界面的漸進式框架,與其他的重量級框架不同,它是采用自底向上增量開發(fā)的設(shè)計,而且在vue的核心庫中只關(guān)注視圖層,而且還是比較容易學(xué)習的,也方便于和其他的庫或者已經(jīng)有的項目進行整合。另一方面對于vue來說它是有能力驅(qū)動采用單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。
內(nèi)容包含:
模塊化:目前最熱的方式是在項目中直接使用ES6的模塊化而且還結(jié)合?Webpack
?進行項目打包、組件化:創(chuàng)造單個?component
?后綴為.vue的文件,包含?template(html代碼)
?,?script(es6代碼)
?,?style(css樣式)
?、雙向數(shù)據(jù)綁定:界面的操作能實時反映到數(shù)據(jù),數(shù)據(jù)的變更能實時展現(xiàn)到界面
、指令(?v-html v-bind v-model v-if/v-show...
?)、路由(vue-router)、vuex 數(shù)據(jù)共享、Ajax插件(vue-resource,axios) 。
2、Angular
對于?Angular
?它是一款構(gòu)建用戶界面的前端框架?,而且還是一個應(yīng)用設(shè)計框架與開發(fā)平臺,并且可以用于創(chuàng)建高效、復(fù)雜、精致的單頁面應(yīng)用,不僅如此?Angular
?通過新的屬性和表達式擴展了?HTML
?,從而可以實現(xiàn)一套框架,多種平臺,移動端和桌面端。
內(nèi)容包含:
MVVM(Model)(View)(View-model)、模塊化(Module)控制器(Contoller)依賴注入: 、雙向數(shù)據(jù)綁定:界面的操作能實時反映到數(shù)據(jù),數(shù)據(jù)的變更能實時展現(xiàn)到界面、指令(?ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...
?) 、服務(wù)?Service($compile $filter $interval $timeout $http...)
?
、路由(ng-Route原生路由),ui-router(路由組件) 、Ajax封裝($http)
二、Vue與 Angular 雙向數(shù)據(jù)綁定原理
1、angular.js :臟值檢查
在?angular.js
?中是通過臟值檢測的方式比對數(shù)據(jù)是否有變更,來決定是否更新視圖,而且最簡單的方式就是通過 ?setInterval()
?定時輪詢檢測數(shù)據(jù)變動,而且?angular
?只有在指定的事件觸發(fā)時進入臟值檢測,如下: DOM事件,譬如用戶輸入文本,點擊按鈕等。(? ng-click
? ) XHR響應(yīng)事件 ( $http )
,瀏覽器Location變更事件 ?( $location )
?、Timer事件?( $timeout , $interval )
?、 執(zhí)行? $digest()
?或 ?$apply()
?
2、vue :數(shù)據(jù)劫持
對于?vue.js
?來說則是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式,然后再通過?Object.defineProperty()
?來劫持各個屬性的?setter
、?getter
在數(shù)據(jù)變動時發(fā)布消息給訂閱者,觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
3.代碼演示如下:
(1)、vue.js和angular.js的?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";
});
小結(jié):我們通過兩者之間的相互比較來看在?vue
?中采用了?json
?的數(shù)據(jù)格式進行?dom
?和?data
?的編寫,而且這一種編寫風格更加靠進?js
?的數(shù)據(jù)編碼格式,通俗易懂。
(2)、vue和angular的雙向數(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!";
});
小結(jié):我們在代碼中可以看到?vue
?雖然是一個輕量級的框架,但是提供的?API
?確非常多,而且還有包括一些便捷的指令和屬性操作,而且一般?vue
?是指令使用(v-)操作符,相比?angular.js
?指令使用(ng-),其中?vue.js
?還支持指令的簡寫方式:拿事件來說:?click<a v-on: click="fn"></a>
?的簡寫方式是:?
<a @click="fn"></a>
?; 對于屬性?<a v-bind: href="url"></a>
?來說它的簡寫方式是: ?<a :href="url"></a>
?。
(3)、vue和angular的渲染列表:
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' }
]
}
})
angular的渲染列表代碼如下:
<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' }
]
});
在我們看來其實?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>
(4)、vue循環(huán):
?vue
?循環(huán)代碼如下:
<ul>
<li v-for="item in list">
<a :href="item.url">{{item.title}}</a>
</li>
</ul>
三、vue和Angular處理用戶輸入
vue處理用戶輸入代碼:
<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('')
}
}
})
Angular處理用戶輸入代碼:
<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('')
}
});
總結(jié):
以上就是有關(guān)于“在vue.js和angular.js中有哪些特點?”這個問題的相關(guān)資料和分析,當然如果你有更全面的內(nèi)容也可以和大家一起分享共同學(xué)習,更多有關(guān)于vue與angular的相關(guān)內(nèi)容和知識點我們都可以在W3cschool中學(xué)習和了解。