Apakah perbezaan antara vuejs dan angularjs

Perbezaan: 1. Angularjs sukar untuk dimulakan, tetapi vuejs mudah dan mudah dipelajari 2. Arahan sudut ialah “ng-xxx”, manakala vue ialah “v-xxx”; Semua arahan dan kaedah sudut adalah Ia terikat kepada $skop, dan semua kaedah dan arahan vue terikat kepada contoh vue.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, 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.

Vue dan Prinsip Sudut bagi pengikatan data dua hala###

angular.js: Semakan nilai kotor

angular.js membandingkan data melalui pengesanan nilai kotor Jika terdapat perubahan, cara paling mudah untuk memutuskan sama ada untuk mengemas kini paparan ialah menggunakan setInterval() untuk membuat tinjauan secara kerap untuk mengesan perubahan data. Google tidak akan begitu perlahan. Angular hanya memasuki pengesanan nilai kotor apabila peristiwa yang ditentukan dicetuskan, iaitu 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.

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

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

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

• (1) klik acara

  fb18926a59749a682e51d2201c2ba6895db79b134e9f6b82c0b36e0489ee08ed

  简写方式：
  8159299ceddef3bf00d03ef9f56ad0db5db79b134e9f6b82c0b36e0489ee08ed

• (2)属性

  f1d426d3654278992adc280d87d5593a5db79b134e9f6b82c0b36e0489ee08ed

  简写方式：
  7e02c3b846c23f3f09a33678d01021f05db79b134e9f6b82c0b36e0489ee08ed

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

总结：angularjs和vuejs的区别

1、angularJS上手难，而vueJS简单易学；

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

3、angularJS的所有指令和方法都是绑定在$scope上的，而vueJS是new出来一个实例，所有的方法和指令都在这个实例上，一个页面上可以有多个vue实例，但是angularJS的对象只能有一个；

4、angularJS是由google开发和维护的，vueJS是由个人维护的；

5、vueJS一般用于移动端的开发，而angularJS一般应用于大型的项目。

更多编程相关知识，请访问：编程学习！！

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