Différences : 1. Angularjs est difficile à démarrer, mais vuejs est simple et facile à apprendre ; 2. Les instructions d'Angular sont « ng-xxx », tandis que vue est « v-xxx » ; de angulaire sont liés à $ sur la portée, et toutes les méthodes et instructions de vue sont liées à l'instance de vue.
L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.
Les projets précédents utilisaient tous Angularjs, (veuillez noter que cet article parle principalement d'Angularjs 1) Faites une simple note de comparaison après la première utilisation de Vue.js.
Tout d’abord, parlons brièvement de leurs caractéristiques respectives sur le plan théorique, puis utilisons quelques petits exemples pour les illustrer.
L'implémentation de la liaison de données bidirectionnelle utilise la variable dirty $scope Pour la détection de valeur, utilisez $scope.$watch (vue vers le modèle) et $scope.$apply (modèle vers vue). La détection Digest est bien sûr appelée en interne, $scope.$digest peut également être appelée directement pour une vérification sale. Il convient de noter que lorsque les données changent très fréquemment, la détection sale consommera beaucoup de performances du navigateur. La valeur maximale officielle de détection sale est de 2 000 éléments de données. Site officiel de
vue.js : Il s'agit d'un ensemble de framework progressif permettant de créer des interfaces utilisateur. Contrairement à d'autres frameworks lourds, Vue adopte une conception de développement incrémental ascendant. La bibliothèque principale de Vue se concentre uniquement sur les couches de vues et est très facile à apprendre et à intégrer à d'autres bibliothèques ou projets existants. Vue, d'autre part, est tout à fait capable d'alimenter des applications complexes d'une seule page développées avec des Single File Components et des Vue Ecosystem Supported Libraries. L'objectif de Vue.js est d'implémenter une
liaison de données réactiveet des composants de vue composées via l'API la plus simple possible.
(1) Modularisation. Actuellement, le moyen le plus populaire consiste à utiliser directement la modularisation ES6 dans le projet et à la combiner avec Webpack pour le packaging du projet.angular.js passe par la méthode de détection de valeur qui compare si les données ont changé pour décider s'il faut mettre à jour la vue. Le moyen le plus simple est d'interroger régulièrement. détecter les changements de données via setInterval(). Bien sûr, Google ne sera pas si lent. Angular n'entrera sale que lorsque l'événement spécifié est déclenché. La détection de valeur est à peu près la suivante :
Événements DOM, tels que les utilisateurs saisissant du texte, cliquant. boutons, etc (ng-click): Détournement de donnéesvue.js utilise le piratage de données combiné au modèle éditeur-abonné pour détourner les setters et getters de chaque propriété via Object.defineProperty() et publier des messages lorsque les données changent pour l'abonné. , déclenchez le rappel d'écoute correspondant. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty
Le code est directement en dessous
Le premier est bien sûr Hello World
vue
<div id="app">
{{ message }}
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})<div ng-app="myApp" ng-controller="myCtrl">
{{message}}
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world";
});Liaison de données bidirectionnelle de Vue
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})<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!";
}); <a v-on: click="fn"></a>
简写方式：<a @click="fn"></a>
(2)属性
<a v-bind: href="url"></a>
简写方式：<a :href="url"></a>
<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一般应用于大型的项目。
更多编程相关知识，请访问：编程学习！！
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
