Apakah perbezaan antara angularjs dan vuejs

Perbezaan: 1. Angularjs menggunakan "pengesan nilai kotor" untuk membandingkan sama ada data telah berubah untuk mencapai pengikatan data dua hala manakala Vue menggunakan "perampasan data" digabungkan dengan cara "mod penerbit-pelanggan". pengikatan data dua hala. 2. Arahan vue menggunakan operator "v-", dan arahan angularjs menggunakan "ng-".

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue2.9.6&&Angular9, komputer DELL G3.

Perbandingan antara menggunakan Angularjs dan Vue.js

Projek sebelumnya semuanya menggunakan Angularjs, (sila ambil perhatian bahawa artikel ini terutamanya bercakap tentang Angularjs 1) Selepas penggunaan awal Vue.js Nota perbandingan mudah.
Pertama sekali, mari kita bercakap secara ringkas tentang ciri masing-masing secara teori, dan kemudian gunakan beberapa contoh kecil untuk menggambarkannya.

Sudut

• 1, MVVM (Model) (Paparan) (View-model)
• 2, Pengawal kawalan modul (Contoller) suntikan pergantungan:
• 3 Pengikatan data dua hala: Operasi antara muka boleh ditunjukkan dalam data dalam masa nyata dan perubahan dalam data boleh dipaparkan dalam antara muka dalam masa nyata.
• 4, arahan (ng-klik ng-bind ng-model ng-href ng-src ng-if/ng-show...)
• 5, service Service($compile $ penapis $interval $timeout $http...)
• 6, routing (ng-Route native routing), ui-router (routing component)
• 7, Ajax enkapsulasi ($http)

Pelaksanaan pengikatan data dua hala menggunakan pengesanan nilai kotor pembolehubah $skop, menggunakan $scope.$watch (lihat ke model), $scope.$apply (model untuk melihat) pengesanan, dalaman Semua panggilan adalah digest Sudah tentu, anda juga boleh menghubungi $scope.$digest terus untuk pemeriksaan kotor. Perlu diingat bahawa apabila data berubah dengan sangat kerap, pengesanan kotor akan memakan banyak prestasi pelayar Nilai pengesanan kotor maksimum rasmi ialah 2000 keping data.

Vue

tapak web rasmi vue.js: Ia ialah rangka kerja progresif untuk membina antara muka pengguna. Tidak seperti rangka kerja heavyweight lain, Vue menggunakan reka bentuk pembangunan tambahan dari bawah ke atas. Pustaka teras Vue hanya menumpukan pada paparan lapisan , dan sangat mudah dipelajari serta disepadukan dengan perpustakaan lain atau projek sedia ada. Vue, sebaliknya, mampu sepenuhnya menjanakan aplikasi satu halaman kompleks yang dibangunkan dengan Komponen Fail Tunggal dan Perpustakaan yang disokong oleh ekosistem Vue.

Matlamat Vue.js adalah untuk melaksanakan pengikatan data responsif dan komponen paparan tersusun melalui API yang paling mudah.

• (1) Modularisasi Pada masa ini, cara paling hangat ialah menggunakan modulariti ES6 secara langsung dalam projek dan menggabungkannya dengan Webpack untuk pembungkusan projek
• (2) Pengkomponenan untuk mencipta satu. Fail dengan akhiran komponen .vue, termasuk templat (kod html), skrip (kod es6), gaya (gaya css)
• (3) Pengikatan data dua hala: Operasi antara muka boleh dicerminkan dalam data dalam masa nyata Perubahan boleh dipaparkan pada antara muka dalam masa nyata.
• (4) Perintah (v-html v-bind v-model v-if/v-show...)
• (5) Routing (vue-router)
• (6) vuex perkongsian data
• (7) Ajax plug-in (vue-resource, axios)

vue sangat kecil, kod sumber min termampat ialah 72.9kb , selepas pemampatan gzip Ia hanya 25.11kb, iaitu 144kb berbanding dengan Angular Anda boleh menggunakannya sendiri dengan pemalam perpustakaan yang diperlukan, seperti pemalam penghalaan (Vue-router), pemalam Ajax (vue-. sumber, aksios), dsb.

Prinsip pengikatan data dua hala antara Vue dan Angular###

sudut. js: Semakan nilai kotor

js menggunakan pengesanan nilai kotor untuk membandingkan sama ada data telah berubah untuk memutuskan sama ada untuk mengemas kini paparan mengesan perubahan data melalui setInterval(). Sudah tentu, Google tidak akan begitu perlahan hanya boleh mengesan perubahan data pada peristiwa tertentu Masukkan pengesanan nilai kotor apabila dicetuskan, kira-kira seperti berikut:

• peristiwa DOM. , seperti pengguna memasukkan teks, mengklik butang, dsb. (ng-klik)
• Acara respons XHR ($http)
• Acara perubahan Lokasi Penyemak Imbas ($lokasi)
• Acara pemasa ($tamat masa, $interval)
• Laksanakan $digest() atau $apply()

vue: Rampasan data

vue.js sedang Menggunakan data rampasan digabungkan dengan model penerbit-pelanggan, Object.defineProperty() digunakan untuk merampas penetap dan getter bagi setiap sifat, menerbitkan mesej kepada pelanggan apabila data berubah dan mencetuskan panggilan balik pendengaran yang sepadan. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty

Kod itu betul-betul di bawah

Yang pertama sudah tentu Hello World

vue

<div id="app">
  {{ message }}
</div>

new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})

Sudut

<div ng-app="myApp" ng-controller="myCtrl">
 {{message}}
</div>

var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.message = "Hello world";
});

Sebagai perbandingan, vue menggunakan format data json untuk menulis dom dan data, dan gaya penulisan lebih serupa dengan js Format pengekodan data mudah difahami.

Ikatan data dua hala Vue

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})

Ikatan data dua hala Angular

<div ng-app="myApp" ng-controller="myCtrl">
  <p>{{message}}</p>
  <input ng-model="message">
</div>

var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.message = "Hello world!";
});

vue walaupun Ia adalah rangka kerja ringan yang menyediakan banyak API, termasuk beberapa arahan mudah dan operasi atribut Secara amnya, arahan Vue menggunakan operator (v-), berbanding dengan arahan angularjs yang menggunakan (ng-). Antaranya, vue.js juga menyokong singkatan arahan:

• (1) klik acara

  <a v-on: click="fn"></a>

  简写方式：
  <a @click="fn"></a>

• (2)属性

  <a v-bind: href="url"></a>

  简写方式：
  <a :href="url"></a>

vue.渲染列表

<div id="app">
  <ul>
    <li v-for="name in names">
      {{ name.first }}
    </li>
  </ul>
</div>

new Vue({
  el: &#39;#app&#39;,
  data: {
    names: [
      { first: &#39;summer&#39;, last: &#39;7310&#39; },
      { first: &#39;David&#39;, last:&#39;666&#39; },
      { first: &#39;Json&#39;, last:&#39;888&#39; }
    ]
  }
})

Angularjs渲染列表

<div ng-app="myApp" ng-controller="myCtrl">
  <li ng-repeat="name in names">{{name.first}}</li>
</div>

var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.names = [
      { first: &#39;summer&#39;, last: &#39;7310&#39; },
      { first: &#39;David&#39;, last:&#39;666&#39; },
      { first: &#39;Json&#39;, last:&#39;888&#39; }
    ]
});

vue的循环

<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">
            <h3 class="item-title">{{news.title}}</h3>
            <p class="item-time">{{news.createTime}}</p>
        </div>
    </a>
</div>

vue和Angular处理用户输入

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

new Vue({
  el: &#39;#app&#39;,
  data: {
	message: &#39;Hello Vue.js!&#39;
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})

<div ng-app="myApp" ng-controller="myCtrl">
 <p>{{ message }}</p>
 <button ng-click="reverseMessage()">Reverse Message</button>
</div>

var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.message = "Hello world!";
    $scope.reverseMessage = function() {
        this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
});

相关推荐：《vue.js教程》

Atas ialah kandungan terperinci Apakah perbezaan antara angularjs dan vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!