Heim >Web-Frontend >Front-End-Fragen und Antworten >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.
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.
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.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)
(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.DOM-Ereignisse, wie z. B. die Eingabe von Text durch den Benutzer Knöpfe usw. (ng-click)
vue
:<div id="app">
{{ message }}
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})Angular <div ng-app="myApp" ng-controller="myCtrl">
{{message}}
</div>
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. Der Schreibstil basiert eher auf dem JS-Datenkodierungsformat, was leicht zu verstehen ist. Vues bidirektionale Datenbindung<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})Angulars bidirektionale Datenbindung<div ng-app="myApp" ng-controller="myCtrl">
<p>{{message}}</p>
<input ng-model="message">
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world!";
});Vue ist ein leichtes Framework, bietet jedoch viele APIs, einschließlich einiger praktischer Anweisungen und Attributoperationen. Im Allgemeinen ist Vue ein Direktive Verwenden Sie den (v-)-Operator, im Vergleich zur AngularJS-Direktive, die (ng-) verwendet. Unter anderem unterstützt vue.js auch die Abkürzung von Anweisungen:
(1) Ereignisklick
fb18926a59749a682e51d2201c2ba6895db79b134e9f6b82c0b36e0489ee08ed
简写方式：8159299ceddef3bf00d03ef9f56ad0db5db79b134e9f6b82c0b36e0489ee08ed
(2)属性
f1d426d3654278992adc280d87d5593a5db79b134e9f6b82c0b36e0489ee08ed
简写方式：7e02c3b846c23f3f09a33678d01021f05db79b134e9f6b82c0b36e0489ee08ed
<div id="app">
<ul>
<li v-for="name in names">
{{ name.first }}
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
names: [
{ first: 'summer', last: '7310' },
{ first: 'David', last:'666' },
{ first: 'Json', last:'888' }
]
}
})<div ng-app="myApp" ng-controller="myCtrl">
<li ng-repeat="name in names">{{name.first}}</li>
</div>
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><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><div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ message }}</p>
<button ng-click="reverseMessage()">Reverse Message</button>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world!";
$scope.reverseMessage = function() {
this.message = this.message.split('').reverse().join('')
}
});总结：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!