Comparaison avec Angularjs et Vue.js

Le contenu de cet article concerne la comparaison entre Angularjs et Vue.js. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Tout d’abord, parlons brièvement de leurs caractéristiques respectives en théorie, puis utilisons quelques petits exemples pour les illustrer.

• 1, MVVM (Modèle) (Vue) (Vue-modèle)

• 2, Modulaire (Module ) Injection de dépendance du contrôleur (Contoller) :

• 3. Liaison de données bidirectionnelle : les opérations de l'interface peuvent être reflétées 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 (ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)

• 5, Service($compile $filter $interval $timeout $http...)

• 6, Routage (routage natif ng-Route), ui-router( Routage composant)

• 7, encapsulation Ajax ($http)

framework progressif pour 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 la couche de vue et est très facile à apprendre et à intégrer avec d'autres bibliothèques ou projets existants. Vue, d'autre part, est tout à fait capable de piloter des applications complexes d'une seule page développées à l'aide de Composants de fichier unique et de Bibliothèques prises en charge par l'écosystème Vue.

liaison de données réactive et des composants de vue composées avec l'API la plus simple possible.

• (1) Modularisation Actuellement, le moyen le plus populaire consiste à utiliser directement la modularité ES6 dans le projet et à la combiner avec Webpack pour le packaging du projet

(2) Componentisation, créez un seul fichier de composant avec le suffixe .vue, comprenant le modèle (code html), le script (code es6), le style (style css)
(3) Liaison de données bidirectionnelle : les opérations de l'interface peuvent être reflétées 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 (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 ne fait que 25,11 Ko par rapport à Angular. plug-ins de bibliothèque requis, similaires au plug-in de routage (Vue-router), aux plug-ins Ajax (vue-resource, axios), etc.

Principe de liaison de données bidirectionnelle Vue et Angular

angular.js : Vérification des valeurs sales

angular.js utilise la détection des valeurs sales pour comparer si les données ont changé afin de décider s'il faut mettre à jour la vue . Le moyen le plus simple est d'interroger régulièrement pour détecter les changements de données via setInterval(). Bien sûr, Google ne le fera pas. Si bas, Angular n'entre dans la détection de valeurs sales que lorsqu'un événement spécifié est déclenché, à peu près comme suit :

<.>
• Événements DOM, tels que les utilisateurs saisissant du texte, cliquant sur des 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ées

<p id="app">
  {{ message }}
</p>

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

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

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.message = "Hello world";
});

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

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

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

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.message = "Hello world!";
});

• (1) clic d'événement

  <a v-on: click="fn"></a>

  abréviation :

  
  <a @click="fn"></a>

• (2) Attributs

  <a v-bind: href="url"></a>

  Abréviation :

  
  <a :href="url"></a>

vue.渲染列表

<p id="app">
  <ul>
    <li v-for="name in names">
      {{ name.first }}
    </li>
  </ul>
</p>

new Vue({
  el: '#app',
  data: {
    names: [
      { first: 'summer', last: '7310' },
      { first: 'David', last:'666' },
      { first: 'Json', last:'888' }
    ]
  }
})

Angularjs渲染列表

<p ng-app="myApp" ng-controller="myCtrl">
  <li ng-repeat="name in names">{{name.first}}</li>
</p>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = [
      { first: 'summer', last: '7310' },
      { first: 'David', last:'666' },
      { first: 'Json', last:'888' }
    ]
});

vue的循环

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

angular和vue的渲染差不多

<p class="item" ng-repeat="news in  newsList">
    <a ng-href="#/content/{{news.id}}">
        <img ng-src="{{news.img}}" />
        <p class="item-info">
            <h3 class="item-title">{{news.title}}</h3>
            <p class="item-time">{{news.createTime}}</p>
        </p>
    </a>
</p>

vue和Angular处理用户输入

<p id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</p>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

<p ng-app="myApp" ng-controller="myCtrl">
 <p>{{ message }}</p>
 <button ng-click="reverseMessage()">Reverse Message</button>
</p>

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应用模块化的使用详解

Angular开发实践之服务端渲染_AngularJS

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!