這篇文章主要介紹“vuejs和angularjs的區(qū)別是什么”，在日常操作中，相信很多人在vuejs和angularjs的區(qū)別是什么問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vuejs和angularjs的區(qū)別是什么”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

站在用戶(hù)的角度思考問(wèn)題，與客戶(hù)深入溝通，找到黃岡網(wǎng)站設(shè)計(jì)與黃岡網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶(hù)體驗(yàn)好的作品，建站類(lèi)型包括：成都網(wǎng)站制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、申請(qǐng)域名、網(wǎng)頁(yè)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋黃岡地區(qū)。

區(qū)別：1、angularjs上手難，而vuejs簡(jiǎn)單易學(xué)；2、angular的指令是“ng-xxx”，而vue是“v-xxx”；3、angular的所有指令和方法都是綁定在$scope上的，而vue的所有方法和指令都綁定在vue實(shí)例上。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

使用Angularjs和Vue.js對(duì)比

之前項(xiàng)目都是使用Angularjs，（注明此處主要講Angularjs 1）在初步使用Vue.js后做一個(gè)簡(jiǎn)單的對(duì)比筆記。
首先從理論上簡(jiǎn)單說(shuō)一下各自的特點(diǎn)，之后再用幾個(gè)小的例子加以說(shuō)明。

Angular

• 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

vue.js官網(wǎng)：是一套構(gòu)建用戶(hù)界面的 漸進(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事件，譬如用戶(hù)輸入文本，點(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了

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

相比較來(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>

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' }
    ]
  }
})

Angularjs渲染列表

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

vue的循環(huán)

<ul>
    <li v-for="item in list">
        <a :href="item.url">{{item.title}}</a>
    </li>
</ul>

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>

vue和Angular處理用戶(hù)輸入

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

總結(jié)：angularjs和vuejs的區(qū)別

1、angularJS上手難，而vueJS簡(jiǎn)單易學(xué)；

2、angularJS的指令都是ng-xxx，而vueJS的指令都是v-xxx；

3、angularJS的所有指令和方法都是綁定在$scope上的，而vueJS是new出來(lái)一個(gè)實(shí)例，所有的方法和指令都在這個(gè)實(shí)例上，一個(gè)頁(yè)面上可以有多個(gè)vue實(shí)例，但是angularJS的對(duì)象只能有一個(gè)；

4、angularJS是由google開(kāi)發(fā)和維護(hù)的，vueJS是由個(gè)人維護(hù)的；

5、vueJS一般用于移動(dòng)端的開(kāi)發(fā)，而angularJS一般應(yīng)用于大型的項(xiàng)目。

到此，關(guān)于“vuejs和angularjs的區(qū)別是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

分享文章：vuejs和angularjs的區(qū)別是什么
當(dāng)前地址：http://sd-ha.com/article0/ggsooo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、App開(kāi)發(fā)、小程序開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)公司、定制開(kāi)發(fā)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)