App下載

在vue.js和angular.js中有哪些特點(diǎn)?兩者直接的特點(diǎn)對(duì)比分析!

猿友 2021-06-21 11:00:26 瀏覽數(shù) (3005)
反饋

vue的雙向數(shù)據(jù)綁定在互聯(lián)網(wǎng)編程學(xué)習(xí)中,隨著不斷的更新和迭代我們可以使用的框架越來(lái)越多,我們會(huì)在不同的框架中使用不用的框架,那么今天我們就來(lái)說(shuō)說(shuō)有關(guān)于“在vue.js和angularjs中有哪些特點(diǎn)?”這個(gè)問(wèn)題吧!下面是一些相關(guān)的信息,希望對(duì)大家的學(xué)習(xí)和理解有所幫助!


一、Vue與 Angular介紹

1、Vue

對(duì)于 vue大家應(yīng)該都是比較熟悉的,它是有關(guān)于構(gòu)建用戶界面的漸進(jìn)式框架,與其他的重量級(jí)框架不同,它是采用自底向上增量開(kāi)發(fā)的設(shè)計(jì),而且在vue的核心庫(kù)中只關(guān)注視圖層,而且還是比較容易學(xué)習(xí)的,也方便于和其他的庫(kù)或者已經(jīng)有的項(xiàng)目進(jìn)行整合。另一方面對(duì)于vue來(lái)說(shuō)它是有能力驅(qū)動(dòng)采用單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)的復(fù)雜單頁(yè)應(yīng)用。 

內(nèi)容包含:

模塊化:目前最熱的方式是在項(xiàng)目中直接使用ES6的模塊化而且還結(jié)合?Webpack?進(jìn)行項(xiàng)目打包、組件化:創(chuàng)造單個(gè)?component?后綴為.vue的文件,包含?template(html代碼)?,?script(es6代碼)?,?style(css樣式)?、雙向數(shù)據(jù)綁定:界面的操作能實(shí)時(shí)反映到數(shù)據(jù),數(shù)據(jù)的變更能實(shí)時(shí)展現(xiàn)到界面 、指令(?v-html v-bind v-model v-if/v-show...?)、路由(vue-router)、vuex 數(shù)據(jù)共享、Ajax插件(vue-resource,axios) 。

2、Angular 

對(duì)于?Angular?它是一款構(gòu)建用戶界面前端框架?,而且還是一個(gè)應(yīng)用設(shè)計(jì)框架與開(kāi)發(fā)平臺(tái),并且可以用于創(chuàng)建高效、復(fù)雜、精致的單頁(yè)面應(yīng)用,不僅如此?Angular?通過(guò)新的屬性和表達(dá)式擴(kuò)展了?HTML?,從而可以實(shí)現(xiàn)一套框架,多種平臺(tái),移動(dòng)端和桌面端。

內(nèi)容包含:

MVVM(Model)(View)(View-model)、模塊化(Module)控制器(Contoller)依賴(lài)注入: 、雙向數(shù)據(jù)綁定:界面的操作能實(shí)時(shí)反映到數(shù)據(jù),數(shù)據(jù)的變更能實(shí)時(shí)展現(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?中是通過(guò)臟值檢測(cè)的方式比對(duì)數(shù)據(jù)是否有變更,來(lái)決定是否更新視圖,而且最簡(jiǎn)單的方式就是通過(guò) ?setInterval() ?定時(shí)輪詢檢測(cè)數(shù)據(jù)變動(dòng),而且?angular?只有在指定的事件觸發(fā)時(shí)進(jìn)入臟值檢測(cè),如下: DOM事件,譬如用戶輸入文本,點(diǎn)擊按鈕等。(? ng-click? ) XHR響應(yīng)事件 ( $http ) ,瀏覽器Location變更事件 ?( $location ) ?、Timer事件?( $timeout , $interval )?、 執(zhí)行? $digest() ?或 ?$apply() ?

2、vue :數(shù)據(jù)劫持

對(duì)于?vue.js?來(lái)說(shuō)則是采用數(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)。

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é):我們通過(guò)兩者之間的相互比較來(lái)看在?vue?中采用了?json?的數(shù)據(jù)格式進(jìn)行?dom?和?data?的編寫(xiě),而且這一種編寫(xiě)風(fēng)格更加靠進(jìn)?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é):我們?cè)诖a中可以看到?vue?雖然是一個(gè)輕量級(jí)的框架,但是提供的?API?確非常多,而且還有包括一些便捷的指令和屬性操作,而且一般?vue?是指令使用(v-)操作符,相比?angular.js?指令使用(ng-),其中?vue.js?還支持指令的簡(jiǎn)寫(xiě)方式:拿事件來(lái)說(shuō):?click<a v-on: click="fn"></a> ?的簡(jiǎn)寫(xiě)方式是:? <a @click="fn"></a>?; 對(duì)于屬性?<a v-bind: href="url"></a>?來(lái)說(shuō)它的簡(jiǎn)寫(xiě)方式是: ?<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' }
    ]
});

在我們看來(lái)其實(shí)?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中有哪些特點(diǎn)?”這個(gè)問(wèn)題的相關(guān)資料和分析,當(dāng)然如果你有更全面的內(nèi)容也可以和大家一起分享共同學(xué)習(xí),更多有關(guān)于vue與angular的相關(guān)內(nèi)容和知識(shí)點(diǎn)我們都可以在W3cschool中學(xué)習(xí)和了解。


0 人點(diǎn)贊