Comment remplacer jQuery avec Vue –

Data

Ajoutons également les données des trois lignes d’exemple à notre instance Vue:

 const app = new Vue ({
  el: 'table',
  Les données: {
    articles: [
      { description: 'Website design', quantity: 1, price: 300 },
      { description: 'Hosting (3 months)', quantity: 1, price: 75 },
      { description: 'Domain name (1 year)', quantity: 1, price: 10 },
    ]
  }
});

La propriété data est l'emplacement dans lequel nous stockons l'état de notre application. Cela inclut non seulement les données avec lesquelles nous voulons que notre application fonctionne, mais également des informations sur l'état de l'interface utilisateur (par exemple, la section actuellement active dans un groupe d'onglets, ou si un accordéon est développé ou réduit).

Vue nous encourage à séparer l'état de notre application de sa présentation (c'est-à-dire le DOM) et à le centraliser à un seul endroit – une source unique de vérité.

Modification du modèle

Modifions maintenant notre modèle pour afficher les éléments de notre objet de données. Comme nous l'avons dit à Vue pour contrôler la table, nous pouvons utiliser sa syntaxe de modèle dans le code HTML pour indiquer à Vue comment la restituer et la manipuler.

En utilisant l'attribut v-for nous peut restituer un bloc de code HTML pour chaque élément de notre tableau :

Vue répétera ce balisage pour chaque élément du tableau (ou de l'objet) que vous transmettez à la construction v-for vous permettant ainsi de référencer chaque élément de la boucle – dans ce cas, comme élément . Comme Vue observe toutes les propriétés de l'objet data il restitue dynamiquement le balisage au fur et à mesure que le contenu des éléments change. Tout ce que nous avons à faire est d'ajouter ou de supprimer des éléments dans l'état de notre application, et Vue se charge de mettre à jour l'interface utilisateur.

Nous devons également ajouter pour que l'utilisateur remplisse la description, prix unitaire, et quantité de l'article:

 $ 

 $ {{item.price * item.quantity}} 

Nous utilisons ici l’attribut v-model pour établir une liaison bidirectionnelle entre les entrées et les propriétés de notre modèle de données. Cela signifie que toute modification apportée aux entrées mettra à jour les propriétés correspondantes dans le modèle d'élément, et inversement.

Dans la dernière cellule, nous utilisons des doubles accolades {{} pour afficher du texte. . Nous pouvons utiliser n’importe quelle expression JavaScript valide entre accolades. Nous multiplions donc deux de nos propriétés d’élément et produisions le résultat. Encore une fois, alors que Vue observe notre modèle de données, une modification apportée à l'une de ces propriétés entraînera la réévaluation automatique de l'expression.

Evénements et méthodes

Nous avons maintenant configuré notre modèle pour afficher nos éléments . collection, mais comment pouvons-nous ajouter de nouvelles lignes? Comme Vue restituera tout ce qui se trouve dans les éléments il suffit de pousser un objet avec les valeurs par défaut souhaitées dans le tableau items .

Pour créer des fonctions accessible à partir de notre modèle, nous devons les transmettre à notre instance Vue en tant que propriétés d’un objet méthodes :

 const app = new Vue ({
  // ...
  méthodes: {
    myMethod () {}
  },
  // ...
})

Définissons une méthode addRow que nous pouvons appeler pour ajouter un nouvel élément à notre tableau :

 méthodes: {
  ajouter une rangée() {
    this.items.push ({description: '', quantité: 1, prix: 0});
  },
},

Notez que toutes les méthodes que nous créons sont automatiquement liées à l'instance Vue elle-même. Nous pouvons donc accéder aux propriétés de notre objet data et à d'autres méthodes, en tant que propriétés de de . [19659008] Donc, maintenant que nous avons notre méthode, comment l'appelons-nous lorsque le bouton Add row est cliqué? La syntaxe permettant d'ajouter des écouteurs d'événement à un élément du modèle est la suivante: . V-on: nom-événement :

  Ajouter une ligne 

Vue fournit également un raccourci pour nous permettre d’utiliser @ à la place de v-on: comme je l’ai montré dans le code ci-dessus. Pour le gestionnaire, nous pouvons spécifier n'importe quelle méthode à partir de notre instance Vue.

Propriétés calculées

Il ne reste plus qu'à afficher le total général au bas de la facture. Potentiellement, nous pourrions le faire dans le modèle lui-même: comme je l’ai mentionné plus tôt, Vue nous permet de mettre toute instruction JavaScript entre accolades. Cependant, il est bien préférable de garder quelque chose de plus qu'une logique très basique dans nos modèles. C’est plus propre et plus facile à tester si nous gardons cette logique séparée.

Nous pourrions utiliser une autre méthode pour cela, mais je pense qu’une propriété calculée convient mieux. Semblable à la création de méthodes, nous transmettons à notre instance Vue un objet calculé contenant les fonctions dont nous voulons utiliser les résultats dans notre modèle:

 const app = new Vue ({
  // ...
  calculé: {
    total() {
      return this.items.reduce ((acc, item) => acc + (item.price * item.quantity), 0);
    }
  }
});

Nous pouvons maintenant référencer cette propriété calculée dans notre modèle:

  
   Total: $ {{total}} 

Comme vous l'avez peut-être déjà remarqué, les propriétés calculées peuvent être traitées comme s'il s'agissait de données. nous n’avons pas à les appeler avec des parenthèses. Mais l'utilisation des propriétés calculées présente un autre avantage: Vue est suffisamment intelligent pour mettre en cache la valeur renvoyée et ne réévalue la fonction que si l'une des propriétés de données dépend des modifications.

Si nous utilisions une méthode pour résumer le grand total , le calcul serait effectué à chaque fois que le modèle serait rendu. Comme nous utilisons une propriété calculée, le total n'est recalculé que si l'un des champs de la quantité de l'élément ou du élément est modifié.

Filtres

Vous avez peut-être repéré nous avoir un petit bug dans notre implémentation. Bien que les coûts unitaires soient des nombres entiers, notre total et les sous-totaux sont affichés sans les centimes. Ce que nous souhaitons réellement, c’est que ces chiffres soient toujours affichés avec deux décimales.

Plutôt que de modifier à la fois le code qui calcule les sous-totaux et le code qui calcule le total général, Vue nous fournit un moyen agréable de traiter les problèmes courants. Les tâches de formatage telles que celle-ci: filtres.

Comme vous l’auriez peut-être déjà deviné, pour créer un filtre, nous passons un objet avec cette clé dans notre instance Vue:

 const app = new Vue ({
  // ...
  filtres: {
    monnaie (valeur) {
      valeur de retour.toFixée (2);
    }
  }
});

Nous avons créé ici un filtre très simple appelé devise qui appelle àFixed (2) sur la valeur qu’il reçoit et renvoie le résultat. Nous pouvons l'appliquer à n'importe quelle sortie dans notre modèle, comme ceci:

 Total: $ {{total | devise}} 

Voici la démo Vue achevée:

Voir le stylo Vue Invoice de SitePoint ( @SitePoint ) sur CodePen .

Résumé

. 19659005] En comparant côte à côte les deux versions du code, quelques éléments ressortent de l'application Vue:

• La séparation claire entre l'interface utilisateur et la logique / les données qui la pilotent : le code est beaucoup plus simple. pour comprendre et se prêter à des tests plus faciles
• L’UI est déclarative : vous n’avez besoin que de vous préoccuper de ce que vous voulez voir, pas de la façon de manipuler le DOM pour le réaliser.

La taille (en Ko) ) des deux bibliothèques est presque identique. Bien sûr, jQuery pourrait être un peu allégé avec une construction personnalisée, mais même avec un projet relativement simple tel que notre exemple de facture, je pense que la facilité de développement et la lisibilité du code justifient la différence.

Vue peut également le faire. beaucoup plus que ce que nous avons couvert ici. Sa force réside dans la possibilité de créer des composants d’UI modulaires et réutilisables pouvant être composés dans des applications frontales sophistiquées. Si vous souhaitez approfondir votre connaissance de Vue, je vous recommande de consulter Bien démarrer avec le framework Vue.js 2.0 .

Nilson est un développeur Web full-stack qui travaille avec les ordinateurs et le Web depuis plus d'une décennie. Ancien technicien en matériel et administrateur de réseau. Nilson est actuellement cofondateur et développeur d'une société développant des applications Web pour le secteur de la construction. Vous pouvez également trouver Nilson sur les forums de SitePoint en tant que mentor.