vue.js和angular.js的特點是什么

本篇內容介紹了“vue.js和angular.js的特點是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

一、Vue與 Angular介紹

1、Vue

對于 vue大家應該都是比較熟悉的，它是有關于構建用戶界面的漸進式框架，與其他的重量級框架不同，它是采用自底向上增量開發的設計，而且在vue的核心庫中只關注視圖層，而且還是比較容易學習的，也方便于和其他的庫或者已經有的項目進行整合。另一方面對于vue來說它是有能力驅動采用單文件組件和 Vue 生態系統支持的庫開發的復雜單頁應用。 

內容包含：

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

2、Angular 

對于Angular它是一款構建用戶界面的前端框架，而且還是一個應用設計框架與開發平臺，并且可以用于創建高效、復雜、精致的單頁面應用，不僅如此Angular通過新的屬性和表達式擴展了HTML，從而可以實現一套框架，多種平臺，移動端和桌面端。

內容包含：

MVVM（Model）(View)(View-model)、模塊化（Module）控制器（Contoller）依賴注入： 、雙向數據綁定：界面的操作能實時反映到數據，數據的變更能實時展現到界面、指令(ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...) 、服務Service($compile $filter $interval $timeout $http...)    、路由(ng-Route原生路由),ui-router(路由組件) 、Ajax封裝($http) 

二、Vue與 Angular 雙向數據綁定原理

1、angular.js ：臟值檢查

在angular.js中是通過臟值檢測的方式比對數據是否有變更，來決定是否更新視圖，而且最簡單的方式就是通過 setInterval() 定時輪詢檢測數據變動，而且angular只有在指定的事件觸發時進入臟值檢測，如下： DOM事件，譬如用戶輸入文本，點擊按鈕等。( ng-click ) XHR響應事件 ( $http )    ，瀏覽器Location變更事件 ( $location )、Timer事件( $timeout , $interval )、 執行 $digest() 或 $apply() 

2、vue ：數據劫持

對于vue.js來說則是采用數據劫持結合發布者-訂閱者模式的方式，然后再通過Object.defineProperty()來劫持各個屬性的setter 、getter在數據變動時發布消息給訂閱者，觸發相應的監聽回調。

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";
});

小結：我們通過兩者之間的相互比較來看在vue中采用了json的數據格式進行dom和data的編寫，而且這一種編寫風格更加靠進js的數據編碼格式，通俗易懂。

(2)、vue和angular的雙向數據綁定:

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-)操作符，相比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">
            <h4 class="item-title">{{news.title}}</h4>
            <p class="item-time">{{news.createTime}}</p>
        </div>
    </a>
</div>

(4)、vue循環：

vue循環代碼如下：

<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('')
    }
});

“vue.js和angular.js的特點是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！