Was ist der Unterschied zwischen VueJS und AngularJS?

Unterschiede: 1. Angularjs ist schwer zu starten, aber vuejs ist einfach und leicht zu erlernen. 2. Die Anweisungen von Angular sind „ng-xxx“, während vue „v-xxx“ ist von angle sind im Gültigkeitsbereich an $ gebunden, und alle Methoden und Anweisungen von vue sind an die vue-Instanz gebunden.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Vergleich zwischen der Verwendung von Angularjs und Vue.js

Frühere Projekte verwendeten alle Angularjs (bitte beachten Sie, dass sich dieser Artikel hauptsächlich auf Angularjs bezieht 1) Machen Sie nach der ersten Verwendung von Vue.js eine einfache Vergleichsnotiz.
Lassen Sie uns zunächst kurz theoretisch über ihre jeweiligen Eigenschaften sprechen und diese dann anhand einiger kleiner Beispiele veranschaulichen.

Angular

• 1, MVVM (Modell) (Ansicht) (Ansichtsmodell)
• 2, Modular (Modul) Controller (Controller) Abhängigkeitsinjektion:
• 3, Zwei-Wege-Datenbindung: Schnittstelle Operationen können sich in Echtzeit in den Daten widerspiegeln und Datenänderungen können in Echtzeit in der Schnittstelle angezeigt werden.
• 4, Befehl (ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)
• 5, Service Service ($compile $filter $interval $timeout $http. ..)
• 6, Routing (ng-Route natives Routing), UI-Router (Routing-Komponente)
• 7, Ajax-Kapselung ($http)

Die Implementierung der bidirektionalen Datenbindung verwendet die schmutzige $scope-Variable Verwenden Sie zur Werterkennung die Erkennung „$scope.$watch“ (Ansicht zu Modell) und „$scope.$apply“ (Modell zu Ansicht). Natürlich kann $scope.$digest auch direkt zur schmutzigen Überprüfung aufgerufen werden. 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

vue.js offizielle Website: Es handelt sich um eine Reihe von progressiven Frameworks 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 Ansichtsebenen 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 Components“ und „Vue Ecosystem Supported Libraries“ entwickelt wurden. Das Ziel von Vue.js besteht darin, responsive Datenbindung und komponierte Ansichtskomponenten über die einfachste mögliche API zu implementieren.

(1) Modularisierung ist derzeit die direkte Verwendung der ES6-Modularisierung im Projekt und die Kombination mit Webpack für die Projektverpackung. (2) Komponentisierung: Erstellen Sie eine einzelne Komponentendatei mit dem Suffix .vue Vorlage (HTML-Code), Skript (ES6-Code), Stil (CSS-Stil)

• (4) Befehl (v-html v-bind v-model v-if/v-show...)
• (5) Routing (vue-router)
• (6) vuex-Datenfreigabe
• (7 ) Ajax-Plugin (vue-ressource, axios)
• vue ist nach der Komprimierung sehr klein. Nach der GZIP-Komprimierung sind es nur 144 KB Verwenden Sie es selbst mit den erforderlichen Bibliotheks-Plug-Ins, ähnlich wie Routing-Plug-Ins (Vue-Router), Ajax-Plug-Ins (Vue-Ressource, Axios) usw.
• Vue und Angular bidirektionale Datenbindung Prinzip ###

angular.js ist eine Methode zur Werterkennung, die vergleicht, ob sich die Daten geändert haben, um zu entscheiden, ob die Ansicht aktualisiert werden soll Erkennen Sie Datenänderungen über setInterval(). Natürlich wird Angular nur dann schmutzig sein, wenn das angegebene Ereignis ausgelöst wird:

DOM-Ereignisse, wie z. B. die Eingabe von Text durch den Benutzer Knöpfe usw. (ng-click)

vue

Datenhijacking
• vue.js nutzt Datenhijacking in Kombination mit dem Publisher-Subscriber-Modell, um die Setter und Getter jeder Eigenschaft über Object.defineProperty() zu kapern und Nachrichten zu veröffentlichen, wenn sich die Daten ändern , lösen Sie den entsprechenden Abhörrückruf aus. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty
• Der Code ist direkt unten
• Der erste ist natürlich Hello World
• vue

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

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

Nach dem Login kopieren

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

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

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

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

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

总结：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一般应用于大型的项目。

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

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen VueJS und AngularJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!