Quelle est la différence entre vuejs et angulairejs

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.

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.
Tout d’abord, parlons brièvement de leurs caractéristiques respectives sur le plan théorique, 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 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.

• (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.

Liaison de données bidirectionnelle Vue et Angular. principe ###

angular.js : vérification de la valeur sale

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)

• É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 et des opérations d'attributs pratiques. Généralement, Vue est un. directive Utilisez l'opérateur (v-), par rapport à la directive angulairejs utilisant (ng-). Parmi eux, vue.js prend également en charge l'abréviation des instructions :

(1) event click

• <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: &#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;)
    }
});

总结：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!