Was sind die Unterschiede zwischen AngularJS und Vue? Vergleichsdetails zwischen AngularJS und Vue

Dieser Artikel stellt hauptsächlich den Unterschied zwischen angularjs und vuejs sowie die Details der Ausrichtung von anglejs und vue.js vor. Außerdem enthält er viele Beispiele, um das Lesen für alle zu erleichtern. Lassen Sie uns diesen Artikel gemeinsam lesen.

Werfen wir zunächst einen Blick auf die Unterschiede zwischen AngularJS und Vue:

1. vueJS ist einfach und leicht zu erlernen, während AngularJS ist einfacher zu starten;

2. vue konzentriert sich auf die Ansichtsebene und konzentriert sich auf Geschwindigkeit und Komfort, während AngularJS umfassendere Funktionen hat, natürlich auch größer und nicht so praktisch wie vue;

3. Die Anweisungen von angleJS sind alle ng-xxx, während die Anweisungen von vueJS alle v-xxx sind; Anweisungen und Methoden von AngularJS sind an eine Instanz von New gebunden. Es können mehrere Vue-Instanzen auf einer Seite vorhanden sein 🎜>

angularJS wird von Google entwickelt und gepflegt, vueJS wird von Einzelpersonen gepflegt
vueJS wird im Allgemeinen für die mobile Entwicklung verwendet, während angleJS im Allgemeinen in großen Skalierungsprojekte
6. Lassen Sie uns nun über die Vergleichsdetails zwischen AngularJS und Vue sprechen:

Die vorherigen Projekte verwendeten alle AngularJS (bitte beachten Sie, dass dies Der Artikel befasst sich hauptsächlich mit Angularjs. 1) Nachdem Sie Vue js zum ersten Mal verwendet haben, machen Sie eine kurze Vergleichsnotiz.

Lassen Sie uns zunächst kurz theoretisch auf ihre jeweiligen Eigenschaften eingehen und diese dann anhand einiger kleiner Beispiele veranschaulichen. (Wenn Sie mehr über AngularJS erfahren möchten, schauen Sie sich die Spalte AngularJS-Referenzhandbuch auf der chinesischen PHP-Website an.)

1.MVVM (Modell) (Ansicht) (Ansichtsmodell)

2. Modul (Modul) Controller (Controller) Abhängigkeitsinjektion: 3. Zwei-Wege-Datenbindung: Schnittstellenoperationen können sich in Echtzeit in den Daten widerspiegeln und Datenänderungen können in der Schnittstelle in Echtzeit angezeigt werden.

4. Anweisungen (ng-click ng-model ng-href ng-src ng-if...)

5 ...)

Die Implementierung der bidirektionalen Datenbindung verwendet die Erkennung schmutziger Werte von $scope-Variablen mithilfe der Erkennung von $scope.$watch (Ansicht zu Modell) und $scope.$apply (Modell zu Ansicht). Alle internen Aufrufe sind Digest. Natürlich können Sie $scope.$digest auch direkt zur Dirty-Prüfung aufrufen. Es ist zu beachten, dass die Dirty-Erkennung bei sehr häufigen Datenänderungen viel Browserleistung beansprucht. Der offizielle maximale Wert für die Dirty-Erkennung beträgt 2000 Daten.

Vue.js offizielle Website: Es ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen. Im Gegensatz zu anderen Schwergewichts-Frameworks verwendet Vue ein inkrementelles Bottom-up-Entwicklungsdesign. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene und ist sehr einfach zu erlernen und in andere Bibliotheken oder bestehende Projekte zu integrieren. Vue hingegen ist vollständig in der Lage, komplexe Single-Page-Anwendungen zu betreiben, die mit Single-File-Komponenten und Bibliotheken entwickelt werden, die vom Vue-Ökosystem unterstützt werden.

Das Ziel von Vue.js ist es, eine reaktionsfähige Datenbindung und zusammengesetzte Ansichtskomponenten über eine möglichst einfache API zu ermöglichen. Modularisierung ist derzeit die Verwendung der ES6-Modularisierung direkt im Projekt und die Kombination mit Webpack für die Projektverpackung.

Komponentisierung: Erstellen Sie eine einzelne Komponentendatei mit dem Suffix .vue. einschließlich Vorlage (HTML-Code), Skript (ES6-Code), Stil (CSS-Stil)

Routing,

vue ist sehr klein, der minimale Quellcode beträgt nach der Komprimierung 72,9 KB und nur 25,11 KB nach der GZIP-Komprimierung. Im Vergleich zu Angular, das 144 KB groß ist, können Sie es selbst mit den erforderlichen Bibliotheks-Plug-Ins wie Routing-Plug-Ins (Vue-Router), Ajax-Plug-Ins (Vue-Ressource) usw. verwenden .

Laden Sie einfach den Code unten hoch

Zuallererst natürlich It's Hello World

<div id="app">
  {{ message }}
</div>
 new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})

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

vue und Angular verarbeiten Benutzereingaben

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

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

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