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)
(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 (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: Dirty Value Check
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
:
Angular
<div ng-app="myApp" ng-controller="myCtrl">
{{message}}
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world";
});Nach dem Login kopieren
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})Nach dem Login kopieren
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!";
});Nach dem Login kopieren
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
<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: '#app',
data: {
names: [
{ first: 'summer', last: '7310' },
{ first: 'David', last:'666' },
{ first: 'Json', last:'888' }
]
}
})Nach dem Login kopieren
Angularjs渲染列表
<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' }
]
});Nach dem Login kopieren
vue的循环
<ul>
<li v-for="item in list">
<a :href="item.url">{{item.title}}</a>
</li>
</ul>Nach dem Login kopieren
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>Nach dem Login kopieren
vue和Angular处理用户输入
<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('')
}
}
})Nach dem Login kopieren
<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('')
}
});Nach dem Login kopieren
总结：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!
