recherche

Maison  >  Article  >  interface Web  >  Quelle est la différence entre angulairejs et vuejs

Quelle est la différence entre angulairejs et vuejs

青灯夜游
青灯夜游original
2021-09-24 16:05:081396parcourir

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-".

Quelle est la différence entre angulairejs et vuejs

L'environnement d'exploitation de ce tutoriel : système windows7, version vue2.9.6&&Angular9, ordinateur DELL G3.

Comparaison entre l'utilisation d'Angularjs et Vue.js

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.

Angular

  • 1, MVVM (Modèle) (View) (View-model)
  • 2, Injection de dépendance du contrôleur modulaire (Module) (Controller) :
  • 3, Liaison de données bidirectionnelle : les opérations d'interface peuvent se refléter 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, commande (ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)
  • 5, service Service ($compile $filter $interval $timeout $http. ..)
  • 6, routage (routage natif ng-Route), ui-router (composant de routage)
  • 7, encapsulation Ajax ($http)

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

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éactive

et 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.
  • (2) Componentisation, créer un fichier de composant unique avec le suffixe .vue, y compris. modèle (code html), script (code es6), style (style css)
  • (3) Liaison de données bidirectionnelle : le fonctionnement de l'interface peut être reflété dans les données en temps réel et les modifications apportées aux données peuvent être affiché dans l'interface en temps réel.
  • (4) Commande (v-html v-bind v-model v-if/v-show...)
  • (5) Routage (vue-router)
  • (6) partage de données vuex
  • (7 ) Plug-in Ajax (vue-resource, axios)
  • vue est très petite. Après compression, le code source minimum est de 72,9 Ko. Après compression gzip, il n'est que de 25,11 Ko par rapport à Angular. utilisez-le vous-même avec les plug-ins de bibliothèque requis, similaires aux plug-ins de routage (Vue-router), au plug-in Ajax (vue-resource, axios), etc.

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)
  • Événement de réponse XHR ($http)
  • Événement de changement d'emplacement du navigateur ($location)
  • Événement de minuterie ($timeout, $interval)
  • Exécuter $digest() ou $apply()
vue

 : 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: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})

Angular 

<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";
});

En comparaison, Vue utilise le format de données json pour écrire dom et data. Le style d'écriture est davantage basé sur le format d'encodage de données js, qui est facile à comprendre.

liaison de données bidirectionnelle de vue

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})

liaison de données bidirectionnelle d'Angular

<div ng-app="myApp" ng-controller="myCtrl">
  <p>{{message}}</p>
  <input ng-model="message">
</div>

var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, 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 :

    (1) event click

  • fb18926a59749a682e51d2201c2ba6895db79b134e9f6b82c0b36e0489ee08ed

    简写方式：
    8159299ceddef3bf00d03ef9f56ad0db5db79b134e9f6b82c0b36e0489ee08ed

  • (2)属性

    f1d426d3654278992adc280d87d5593a5db79b134e9f6b82c0b36e0489ee08ed

    简写方式：
    7e02c3b846c23f3f09a33678d01021f05db79b134e9f6b82c0b36e0489ee08ed

vue.渲染列表

<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; }
    ]
  }
})

Angularjs渲染列表

<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; }
    ]
});

vue的循环

<ul>
    <li v-for="item in list">
        <a :href="item.url">{{item.title}}</a>
    </li>
</ul>

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>

vue和Angular处理用户输入

<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.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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Quelles sont les deux parties que comprend la structure du HTML ?Article suivant：Quelles sont les deux parties que comprend la structure du HTML ?

Articles Liés

Voir plus