Der Inhalt dieses Artikels handelt vom Vergleich zwischen Angularjs und Vue.js. Jetzt können Freunde in Not darauf verweisen.
Die vorherigen Projekte verwendeten alle Angularjs (bitte beachten Sie, dass sich dieser Artikel hauptsächlich auf Folgendes bezieht). Angularjs 1) Machen Sie im Vorfeld nach der Verwendung von Vue.js eine einfache Vergleichsnotiz.
Lassen Sie uns zunächst kurz auf die jeweiligen Eigenschaften in der Theorie eingehen und diese dann anhand einiger kleiner Beispiele veranschaulichen.
1, MVVM (Modell) (Ansicht) (Ansichtsmodell)
2, Modular ( Modul ) Controller (Contoller) Dependency Injection:
3. Zwei-Wege-Datenbindung: Der Betrieb der Schnittstelle kann in Echtzeit in den Daten widergespiegelt werden, und die Änderungen in den Daten können in Echtzeit in der Benutzeroberfläche angezeigt werden.
4, Befehl (ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)
5, 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 den schmutzigen Wert des $scope Verwenden Sie zur Erkennung $scope.$watch (Ansicht zum Modell) und $scope.$apply (Modell zur Ansicht) zur Erkennung. Natürlich kann $scope.$digest auch direkt zur Dirty-Prü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.
offizielle Website von vue.js: Es handelt sich um ein progressives 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 steuern, die mit Single File Components und vom Vue-Ökosystem unterstützten Bibliotheken entwickelt wurden.
Das Ziel von Vue.js besteht darin, responsive Datenbindung und komponierte Ansichtskomponenten über die einfachste mögliche API zu implementieren.
(1) Modularisierung Der derzeit heißeste Weg besteht darin, die ES6-Modularität direkt im Projekt zu verwenden und sie mit Webpack für die Projektverpackung zu kombinieren
(2) Komponentisierung, erstellen Sie eine einzelne Komponentendatei mit dem Suffix .vue, einschließlich Vorlage (HTML-Code), Skript (ES6-Code), Stil (CSS-Stil)
(3) Bidirektionale Datenbindung: Schnittstellenoperationen können in Echtzeit in den Daten widergespiegelt werden, und Datenänderungen können in Echtzeit in der Schnittstelle angezeigt werden.
(4) Befehl (v-html v-bind v-model v-if/v-show...)
( 5) Routing (vue-router)
(6) Vuex-Datenfreigabe
(7) Ajax-Plug-in (vue-resource, Axios)
Vue ist nach der Komprimierung sehr klein. Nach der GZIP-Komprimierung sind es nur 144 KB. Sie können es selbst verwenden Erforderliche Bibliotheks-Plug-Ins, ähnlich dem Routing-Plug-In (Vue-Router), Ajax-Plug-Ins (Vue-Ressource, Axios) usw.
angular.js: Dirty-Value-Prüfung
angular.js verwendet die Dirty-Value-Erkennung, um zu vergleichen, ob sich die Daten geändert haben, um zu entscheiden, ob die Ansicht aktualisiert werden soll Der einfachste Weg besteht darin, Datenänderungen regelmäßig über setInterval() zu ermitteln. So niedrig ist Angular nur, wenn ein bestimmtes Ereignis ausgelöst wird, etwa wie folgt:
DOM-Ereignisse, z. B. das Eingeben von Text durch Benutzer, das Klicken auf Schaltflächen usw. (ng-click)
XHR-Antwortereignis ($http)
Browser-Standortänderungsereignis ($location)
Timer-Ereignis ($timeout, $interval)
$digest() oder $apply() ausführen
vue: Datenhijacking
vue.js nutzt Datenhijacking in Kombination mit dem Publisher-Subscriber-Modell, um jede Eigenschaft über Object.defineProperty() zu kapern. Die Setter und Getter veröffentlichen Nachrichten an Abonnenten, wenn sich Daten ändern, und löst entsprechende Abhörrückrufe aus. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty
Der Code ist direkt unten
Das erste ist natürlich Hallo Welt
<p id="app">
{{ message }}
</p>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})<p ng-app="myApp" ng-controller="myCtrl">
{{message}}
</p>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world";
});Im Vergleich dazu verwendet Vue das JSON-Datenformat zum Schreiben von Dom und Daten, und der Schreibstil ähnelt eher js Das Datenkodierungsformat ist leicht zu verstehen.
<p id="app">
<p>{{ message }}</p>
<input v-model="message">
</p>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})<p ng-app="myApp" ng-controller="myCtrl">
<p>{{message}}</p>
<input ng-model="message">
</p>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world!";
});Obwohl Vue ein leichtgewichtiges Framework ist, ist dies bei der von ihm bereitgestellten API der Fall Tatsächlich gibt es viele, einschließlich einiger praktischer Anweisungen und Attributoperationen. Im Allgemeinen verwenden Vue-Anweisungen den (v-)-Operator, verglichen mit AngularJS-Anweisungen, die (ng-) verwenden. Unter anderem unterstützt vue.js auch die Abkürzung von Anweisungen:
(1) Ereignisklick
<a v-on: click="fn"></a>
Abkürzung:
<a @click="fn"></a>
(2) Attribute
<a v-bind: href="url"></a>
Abkürzung: <a :href="url"></a>
<p id="app">
<ul>
<li v-for="name in names">
{{ name.first }}
</li>
</ul>
</p>
new Vue({
el: '#app',
data: {
names: [
{ first: 'summer', last: '7310' },
{ first: 'David', last:'666' },
{ first: 'Json', last:'888' }
]
}
})<p ng-app="myApp" ng-controller="myCtrl">
<li ng-repeat="name in names">{{name.first}}</li>
</p>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [
{ first: 'summer', last: '7310' },
{ first: 'David', last:'666' },
{ first: 'Json', last:'888' }
]
});<ul>
<li v-for="item in list">
<a :href="item.url">{{item.title}}</a>
</li>
</ul><p class="item" ng-repeat="news in newsList">
<a ng-href="#/content/{{news.id}}">
<img ng-src="{{news.img}}" />
<p class="item-info">
<h3 class="item-title">{{news.title}}</h3>
<p class="item-time">{{news.createTime}}</p>
</p>
</a>
</p><p id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</p>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})<p ng-app="myApp" ng-controller="myCtrl">
<p>{{ message }}</p>
<button ng-click="reverseMessage()">Reverse Message</button>
</p>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world!";
$scope.reverseMessage = function() {
this.message = this.message.split('').reverse().join('')
}
});相关推荐：
Das obige ist der detaillierte Inhalt vonVergleich mit Angularjs und Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
