Maison > Article > interface Web > Quelle est la différence entre angulairejs et vuejs
Différence : 1. Angularjs utilise la « détection de valeurs sales » pour comparer si les données ont changé afin d'obtenir une liaison de données bidirectionnelle ; tandis que Vue utilise le « détournement de données » combiné au « modèle éditeur-abonné » pour obtenir une liaison de données bidirectionnelle. . 2. L'instruction vue utilise l'opérateur "v-" et l'instruction angulairejs utilise "ng-".
L'environnement d'exploitation de ce tutoriel : système windows7, version vue2.9.6&&Angular9, 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.
Parlons d’abord brièvement de leurs caractéristiques respectives en théorie, 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 combinés via l'API la plus simple possible.
(1) Modularisation. Actuellement, le moyen le plus populaire consiste à utiliser la modularisation ES6 directement dans le projet et à la combiner avec Webpack pour le packaging du projet.Principe de liaison de données bidirectionnelle. entre Vue et Angular###
angular.js: vérification de valeur saleangular js utilise la détection de valeur sale pour comparer si les données ont changé afin de décider de mettre à jour la vue. Le moyen le plus simple est. pour interroger régulièrement pour détecter les changements de données via setInterval(). Bien sûr, Google ne sera pas si lent. Angular ne peut détecter les changements de données qu'à des événements spécifiés lorsqu'il est déclenché, à peu près comme suit :
Événements DOM, tels que. lorsque l'utilisateur saisit du texte, clique sur un bouton, 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"; });
<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!";
});
vue est un framework léger, mais il fournit de nombreuses API, y compris des instructions pratiques et des opérations d'attributs en général. , les instructions vue utilisent l'opérateur (v-), par rapport aux instructions angulaires js qui utilisent (ng-). Parmi eux, vue.js prend également en charge l'abréviation des instructions :
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('') } });
相关推荐:《vue.js教程》
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!