Quelles sont les différences entre Angularjs et Vue ? Détails de comparaison entre angulairejs et Vue

Cet article présente principalement la différence entre angularjs et vuejs, ainsi que les détails de l'alignement entre angulairejs et vue.js. Il contient également de nombreux exemples pour faciliter la lecture par tout le monde. Lisons cet article ensemble.

Tout d'abord, jetons un coup d'œil à la différence entre angulairejs et Vue :

1. vueJS est simple et facile à apprendre, tandis qu'angularJS est plus facile à démarrer ;

2. vue se concentre sur la couche View, en se concentrant sur la vitesse et la commodité, tandis qu'angularJS a des fonctions plus complètes, bien sûr, il est également plus grand et n'est pas aussi pratique comme vue;

3. Les instructions d'angularJS sont toutes ng-xxx, tandis que les instructions de vueJS sont toutes v-xxx

4. Tous ; les instructions et les méthodes d'angularJS sont liées à $scope. VueJS est une instance de new. Toutes les méthodes et instructions sont sur cette instance. Il peut y avoir plusieurs instances de vue sur une page, mais il ne peut y avoir qu'un seul objet angulaire JS ; 🎜>

angularJS est développé et maintenu par Google, vueJS est maintenu par des particuliers
vueJS est généralement utilisé pour le développement mobile, tandis qu'angularJS est généralement utilisé dans les grands domaines ; projets à grande échelle

Parlons maintenant des détails de comparaison entre Angularjs et Vue :

Les projets précédents utilisaient tous Angularjs, (veuillez noter que ceci l'article parle principalement d'Angularjs 1) Après avoir initialement utilisé Vue js et fait une courte note de comparaison.

Tout d’abord, parlons brièvement de leurs caractéristiques respectives sur le plan théorique, puis utilisons quelques petits exemples pour les illustrer. (Si vous souhaitez en savoir plus sur Angularjs, rendez-vous sur le site Web PHP chinois

AngularJS Reference Manual

colonne à regarder)

Introduction à Angular :

1.MVVM (Modèle) (View) (View-model)

2. Injection de dépendance du module (Module) Controller (Controller) :

3. peut être reflété dans les données en temps réel et les modifications des données peuvent être affichées dans l'interface en temps réel.

4. Instructions (ng-click ng-model ng-href ng-src ng-if...)

5. ...)

L'implémentation de la liaison de données bidirectionnelle utilise la détection des valeurs sales des variables $scope, en utilisant la détection $scope.$watch (vue au modèle), $scope.$apply (modèle à vue). , tous les appels internes sont digest. Bien sûr, $scope.$digest peut également être appelé 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.

Introduction à Vue :

site officiel de vue.js : Il s'agit d'un framework progressif pour la création d'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 la couche de vue et est très facile à apprendre et à intégrer à d'autres bibliothèques ou projets existants. Vue, en revanche, est entièrement capable d'alimenter des applications complexes d'une seule page développées avec des composants et des bibliothèques à fichier unique pris en charge par l'écosystème Vue.

L'objectif de Vue.js est de permettre une liaison de données réactive et des composants de vue composés via l'API la plus simple possible.

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.

Componentisation, créez un fichier de composant unique avec le suffixe .vue, y compris le modèle (code html), le script (code es6), le style (style css)

routage,

vue est très petite, le code source minimum est de 72,9 Ko après compression, et seulement 25,11 Ko après compression gzip Par rapport à Angular, qui fait 144 Ko, vous pouvez l'utiliser vous-même avec les plug-ins de bibliothèque requis, tels que les plug-ins de routage (Vue-router), les plug-ins Ajax (vue-resource), etc. .

Téléchargez simplement le code ci-dessous

Tout d'abord, bien sûr, c'est Hello World

Code de Vue :

<div id="app">
  {{ message }}
</div>
 new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})

Code d'Angular :

Comparé Il semble que Vue utilise le format de données json pour écrire dom et data, et le style d'écriture est davantage basé sur le format d'encodage de données js , ce qui est facile à comprendre.

<div ng-app="myApp" ng-controller="myCtrl">
 {{message}}
</div>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.message = "Hello world";
});

vue et Angular gèrent les entrées de l'utilisateur

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})

<div ng-app="myApp" ng-controller="myCtrl">
 <p>{{ message }}</p>
 <button ng-click="reverseMessage()">Reverse Message</button>
</div>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.message = "Hello world!";
    $scope.reverseMessage = function() {
        this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
});

vue.renderinglist

<div id="app">
  <ul>
    <li v-for="name in names">
      {{ name.first }}
    </li>
  </ul>
</div>
new Vue({
  el: &#39;#app&#39;,
  data: {
    names: [
      { first: &#39;summer&#39;, last: &#39;7310&#39; },
      { first: &#39;David&#39;, last:&#39;666&#39; },
      { first: &#39;Json&#39;, last:&#39;888&#39; }
    ]
  }
})

Liste de rendu Angularjs

Le rendu d'angular et de vue est similaire.

<div ng-app="myApp" ng-controller="myCtrl">
  <li ng-repeat="name in names">{{name.first}}</li>
</div>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.names = [
      { first: &#39;summer&#39;, last: &#39;7310&#39; },
      { first: &#39;David&#39;, last:&#39;666&#39; },
      { first: &#39;Json&#39;, last:&#39;888&#39; }
    ]
});

D'accord, c'est tout pour cet article sur les différences et les comparaisons entre angulairejs et Vue (il est recommandé d'étudier dans la colonne

Manuel d'utilisation AngularJS

du site Web PHP chinois). Si vous avez des questions, vous pouvez laisser un message ci-dessous. [Recommandation de la rédaction]

Quels sont les avantages et les inconvénients d'angularjs ? Introduction aux avantages et inconvénients d'angularjs

Node.js peut-il continuer à être populaire en 2018 ? Jetons un coup d'œil au traitement de node.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!