Remplacement de jQuery avec Vue –

  
   $ 
  
   $ 0.00 

 $ ('table'). on ('mouseup keyup', 'input [type=number]', calculateTotaux);

 function calculateSubtotal (row) {
  const $ row = $ (ligne);
  Entrées const = $ row.find ('entrée');
  const sous-total = entrées [1] .value * entrées [2] .value;

  $ row.find ('td: last'). text (formatAsCurrency (sous-total));

  retourner le sous-total;
}

 function formatAsCurrency (amount) {
  return `$$ {Number (amount) .toFixed (2)}`;
}

 $ ('.btn-add-row' ) .on ('clic', () => {
  const $ lastRow = $ ('. item: last');
  const $ newRow = $ lastRow.clone ();

  $ newRow.find ('input'). val ('');
  $ newRow.find ('td: last'). text ('$ 0.00');
  $ newRow.insertAfter ($ lastRow);

  $ newRow.find ('input: first'). focus ();
});

 const app = new Vue ({
  el: 'table'
});

. Pour notre exemple de facture, nous donnerons le contrôle de vue de la table HTML.

Data

Ajoutons également les données pour les trois lignes d'exemple à notre instance de 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'endroit où nous stockons l'état de notre application. Cela inclut non seulement les données avec lesquelles nous voulons que notre application travaille, mais également les informations sur l'état de l'interface utilisateur (par exemple, quelle section est actuellement active dans un groupe d'onglets ou si un accordéon est développé ou contracté).

Vue nous encourage à garder l'état de notre application séparé de sa présentation (ie le DOM) et centralisé en un seul endroit – une seule source de vérité.

Modifier le modèle

Maintenant, configurons notre modèle pour afficher les éléments de notre objet de données. Comme nous l'avons dit à Vue, nous voulons contrôler la table, nous pouvons utiliser sa syntaxe de template dans le HTML pour dire à Vue comment la rendre et la manipuler.

En utilisant l'attribut v-for peut rendre un bloc de 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 passerez à la construction v-for vous permettant de référencer chaque élément à l'intérieur de la boucle – dans ce cas, item . Comme Vue observe toutes les propriétés de l'objet data il ré-affichera dynamiquement le balisage comme le contenu de items . Tout ce que nous avons à faire est d'ajouter ou supprimer des éléments à l'état de notre application, et Vue prend soin de mettre à jour l'interface utilisateur.

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

 $ 

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

Ici, nous utilisons 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 des entrées mettra à jour les propriétés correspondantes sur le modèle d'article, et vice versa.

Dans la dernière cellule, nous utilisons des doubles accolades {{}} pour sortir du texte . Nous pouvons utiliser n'importe quelle expression JavaScript valide dans les accolades, donc nous multiplions deux de nos propriétés d'objet ensemble et produisons le résultat. Une fois que Vue observe notre modèle de données, une modification de l'une de ces propriétés entraînera une réévaluation automatique de l'expression.

Événements et méthodes

Nous avons maintenant configuré notre modèle pour afficher nos éléments collection, mais comment allons-nous ajouter de nouvelles lignes? Comme Vue rendra tout ce qui est dans éléments pour rendre une ligne vide, nous avons juste besoin de pousser un objet avec les valeurs par défaut que nous voulons dans le tableau items . que nous pouvons accéder à partir de notre modèle, nous devons les passer à notre instance de 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 items :

 methods: {
  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'occurrence de Vue elle-même, donc nous pouvons accéder aux propriétés de notre objet et d'autres méthodes, comme . 19659007] Donc, maintenant que nous avons notre méthode, comment l'appelons-nous quand on clique sur le bouton Ajouter une ligne ? La syntaxe pour ajouter des écouteurs d'événement à un élément du modèle est v-on: nom-événement .

  Ajouter une ligne 

Vue fournit également un raccourci pour nous afin que nous puissions 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 de notre instance de Vue.

Propriétés calculées

Maintenant tout ce que nous devons faire est d'afficher le total général en 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 déclaration JavaScript entre accolades. Cependant, il est préférable de ne rien ajouter à la logique très basique de 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. Similaire à la création de méthodes, nous transmettons à notre objet 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 + (article.prix * article.quantité), 0);
    }
  }
});

Maintenant, nous pouvons 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 si elles étaient des données; nous ne devons pas les appeler avec des parenthèses. Mais, l'utilisation de propriétés calculées a un autre avantage: Vue est assez intelligent pour mettre en cache la valeur renvoyée et réévaluer la fonction uniquement si l'une des propriétés de données dépend des changements.

Si nous utilisions une méthode pour résumer Total général, le calcul sera effectué chaque fois que le modèle a été rendu. Comme nous utilisons une propriété calculée, le total n'est recalculé que si l'un des champs ou prix de l'élément est modifié

Filtres

Vous avez peut-être détecté avoir un petit bug dans notre implémentation. Alors que les coûts unitaires sont des nombres entiers, notre total et nos sous-totaux sont affichés sans les centimes. Ce que nous voulons vraiment, 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 une bonne façon de traiter

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

 const app = new Vue ({
  // ...
  filtres: {
    devise (valeur) {
      return value.toFixed (2);
    }
  }
});

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

 Total: $ {{total | devise}} 

Voici la démo de Vue terminée:

Voir le stylo Vue Facture par SitePoint ( @SitePoint ) le CodePen .

Résumé [19659004] En comparant les deux versions du code côte à côte, deux choses ressortent de l'application Vue:

• La séparation claire entre l'interface utilisateur et la logique / données qui la pilotent : le code est beaucoup plus facile pour comprendre, et se prête à des tests plus faciles
• L'interface utilisateur est déclarative : vous avez seulement besoin de vous préoccuper de ce que vous voulez voir, pas comment manipuler le DOM pour l'atteindre.

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

Vue peut aussi faire beaucoup plus que nous avons couvert ici. Sa force réside dans le fait de vous permettre de créer des composants d'interface utilisateur modulaires et réutilisables qui peuvent être composés dans des applications frontales sophistiquées. Si vous êtes intéressé à plonger plus profondément dans Vue, je vous recommande de vérifier Se lever et courir avec le cadre 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. Un ancien technicien du matériel et administrateur réseau. Nilson est actuellement co-fondateur et développeur d'une société développant des applications web pour l'industrie de la construction. Vous pouvez également trouver Nilson sur les forums SitePoint en tant que mentor.