Comment remplacer jQuery par Vue

Données

Ajoutons également les données pertinentes de trois exemples de lignes à notre instance Vue:

<tr> class="item">
  <td><input type="text" v-model="item.description" /></td>
  <td><input type="number" v-model="item.price" /></td>
  <td><input type="number" v-model="item.quantity" /></td>
  <td><pre class="brush:php;toolbar:false"><code class="language-javascript">$('table').on('mouseup keyup', 'input[type=number]', calculateTotals);

L'attribut de données est l'endroit où nous stockons l'état d'application. Cela inclut non seulement toutes les données que nous souhaitons que l'application utilise, mais aussi des informations sur l'état de l'interface utilisateur (par exemple, la partie actuellement active du groupe TAB, ou si l'accordéon est élargie ou effondrée).

Vue nous encourage à séparer l'état de l'application de sa représentation (c'est-à-dire le DOM) et à concentrer en un seul endroit - une seule source de fait.

Modifier le modèle

Définissons maintenant notre modèle pour afficher les éléments de notre objet de données. Puisque nous avons dit à Vue que nous voulions qu'il contrôle le tableau, nous pouvons utiliser sa syntaxe de modèle dans HTML pour dire à Vue comment le rendre et le manipuler.

En utilisant la propriété V-FOR, nous pouvons rendre un morceau de HTML pour chaque élément du tableau des éléments:

function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}

Vue répétera cette balise pour chaque élément que nous passons au tableau (ou objet) construit par V-FOR, nous permettant de référencer chaque élément dans la boucle - dans cet élément de cas. Étant donné que Vue observe toutes les propriétés de l'objet Data, il remettra dynamiquement le balisage à mesure que le contenu des éléments change. Nous devons simplement ajouter ou supprimer des éléments à l'état de l'application et Vue sera responsable de la mise à jour de l'interface utilisateur.

Nous devons également ajouter une boîte d'entrée afin que l'utilisateur puisse remplir la description de l'élément, le prix unitaire et la quantité:

function calculateSubtotal(row) {
  const $row = $(row);
  const inputs = $row.find('input');
  const subtotal = inputs[1].value * inputs[2].value;

  $row.find('td:last').text(formatAsCurrency(subtotal));

  return subtotal;
}

Ici, nous utilisons la propriété du modèle V pour définir la liaison bidirectionnelle entre l'entrée et les propriétés du modèle de projet. Cela signifie que toute modification de l'entrée mettra à jour les propriétés correspondantes sur le modèle de projet et vice versa.

Dans la dernière cellule, nous utilisons les doublures {{}} pour sortir du texte. Nous pouvons utiliser n'importe quelle expression JavaScript valide à l'intérieur des accolades, nous multiplions donc les deux propriétés du projet et sortions le résultat. De même, puisque Vue observe notre modèle de données, les modifications de l'une ou l'autre propriété entraîneront automatiquement le recalculé de l'expression.

Événements et méthodes

Maintenant, nous avons configuré le modèle pour rendre notre collection d'articles, mais comment ajouter de nouvelles lignes? Étant donné que Vue rendra quoi que ce soit dans les éléments, pour rendre les lignes vides, nous devons simplement pousser l'objet avec n'importe quelle valeur par défaut que nous voulons dans le tableau des éléments.

Pour créer des fonctions accessibles dans le modèle, nous devons les transmettre à notre instance VUE en tant que propriétés de l'objet méthodes:

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

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

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

  $newRow.find('input').val('');
  $newRow.find('td:last').text('<pre class="brush:php;toolbar:false"><code class="language-html"><🎜>

Notez que toute méthode que nous créons sera automatiquement liée à l'instance Vue elle-même, afin que nous puissions accéder aux propriétés et à d'autres méthodes dans l'objet de données en tant que propriétés de cela.

Donc, maintenant nous avons une méthode, comment l'appelons-nous lorsque nous cliquez sur le bouton "Ajouter la ligne"? La syntaxe pour ajouter des écouteurs d'événements aux éléments d'un modèle est V-on: Nom d'événement:

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

Vue nous fournit également un raccourci afin que nous puissions utiliser @ au lieu de V-on:, comme je l'ai fait dans le code ci-dessus. Pour les gestionnaires, nous pouvons spécifier n'importe quelle méthode dans l'instance Vue.

Propriétés informatiques

Maintenant, nous avons juste besoin d'afficher le total au bas de la facture. Nous pouvons probablement le faire dans le modèle lui-même: comme je l'ai mentionné plus tôt, Vue nous permet de placer toute instruction JavaScript entre les accolades bouclées. Cependant, il est préférable de garder quoi que ce soit au-delà de la logique très basique en dehors du modèle; si nous séparons la logique, il est plus clair et plus facile à tester.

Nous pouvons utiliser une autre méthode pour cela, mais je pense que les propriétés calculées sont plus appropriées. Semblable à la méthode de création, nous passons un objet calculé contenant des fonctions à notre instance VUE, et nous voulons que le résultat de ces fonctions soit utilisé dans le modèle:

<tr> class="item">
  <td><input type="text" v-model="item.description" /></td>
  <td><input type="number" v-model="item.price" /></td>
  <td><input type="number" v-model="item.quantity" /></td>
  <td><pre class="brush:php;toolbar:false"><code class="language-javascript">$('table').on('mouseup keyup', 'input[type=number]', calculateTotals);

Maintenant, nous pouvons référencer cette propriété calculée dans le modèle:

function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}

Comme vous l'avez peut-être remarqué, les propriétés calculées peuvent être traitées comme des données; Mais il y a un autre avantage à utiliser des propriétés calculées: Vue est suffisamment intelligente pour mettre en cache la valeur de retour et ne recalculera la fonction que si l'une des propriétés de données dépend des modifications.

Si nous utilisons des méthodes pour calculer le total, le calcul sera effectué chaque fois que le modèle est rendu. Parce que nous utilisons des propriétés calculées, le total ne sera recalculé que si la quantité ou le champ de prix de l'article change.

Filtre

Vous avez peut-être remarqué une petite erreur dans notre implémentation. Bien que le coût unitaire soit un entier, notre total et nos sous-totaux ne sont pas affichés lorsqu'ils sont affichés. Ce que nous voulons vraiment, c'est toujours afficher ces chiffres comme deux décimales.

Plutôt que de modifier le code qui calcule les sous-totaux et calcule les totaux, Vue nous fournit un bon moyen de gérer des tâches de mise en forme courantes comme celle-ci: filtres.

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

function calculateSubtotal(row) {
  const $row = $(row);
  const inputs = $row.find('input');
  const subtotal = inputs[1].value * inputs[2].value;

  $row.find('td:last').text(formatAsCurrency(subtotal));

  return subtotal;
}

Ici, nous créons un filtre très simple appelé devise qui appelle la valeur.tofixée (2) et renvoie le résultat. Nous pouvons l'appliquer à n'importe quelle sortie du modèle comme suit:

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

Ce qui suit est la démo Vue complète: Codepen Link

Résumé

Comparez les deux versions du code côte à côte, et plusieurs aspects de l'application Vue sont proéminents:

• Effacer la séparation entre l'interface utilisateur et la logique / les données qui les entraîne: le code est plus facile à comprendre et plus facile à tester.
• L'interface utilisateur est déclarative: il vous suffit de vous soucier de ce que vous voulez voir, sans prêter attention à la façon de faire fonctionner le DOM pour le mettre en œuvre.

Les tailles (en KB) des deux bibliothèques sont presque les mêmes. Bien sûr, vous pouvez rationaliser JQuery avec une version personnalisée, mais même pour des projets relativement simples comme notre exemple de facture, je pense que la facilité de développement et la lisibilité du code justifient cette différence.

Vue peut faire beaucoup de choses que nous n'avons pas introduites ici. Son avantage est qu'il vous permet de créer des composants d'interface utilisateur modulaires et réutilisables qui peuvent être combinés en applications de frontend complexes. Si vous êtes intéressé à connaître Vue en profondeur, je vous suggère de consulter la mise en service avec le cadre Vue.js 2.0.

FAQ sur le remplacement de jQuery par Vue

Quelle est la principale différence entre jQuery et Vue.js?

jQuery est une bibliothèque JavaScript rapide, compacte et riche en fonctionnalités. Il facilite la traversée et la manipulation des documents HTML, le traitement des événements et les animations, et son API facile à utiliser peut fonctionner dans une variété de navigateurs. Vue.js, en revanche, est un cadre JavaScript progressif pour la création d'interfaces utilisateur. Contrairement à d'autres cadres globaux, la conception de Vue a une adoptabilité incrémentielle dès le début. La bibliothèque de base se concentre uniquement sur les couches de vue, est facile à démarrer et s'intègre à d'autres bibliothèques ou à des projets existants.

Pourquoi devrais-je envisager de remplacer jQuery par Vue.js?

Bien que JQuery soit un outil fiable depuis de nombreuses années, Vue.js fournit un moyen plus moderne et complet de créer des applications Web. Vue.js est basé sur des composants, ce qui favorise la réutilisabilité et la maintenabilité. Il a également un écosystème plus fort avec des outils tels que la gestion de l'État, le routage, etc. De plus, Vue.js a un DOM virtuel qui peut améliorer les performances dans certains cas.

Comment convertir le code jQuery en Vue.js?

La conversion du code jQuery en Vue.js nécessite une compréhension des méthodes et des propriétés équivalentes Vue.js des fonctions jQuery. Par exemple, vous utiliserez le crochet de cycle de vie monté () de Vue au lieu de $ (document) .ready () de jQuery. De même, vous utiliserez Axios ou Fetch de Vue au lieu de $ .ajax () de jQuery pour les demandes HTTP.

Puis-je utiliser jQuery et Vue.js dans un projet?

Bien que techniquement puisse utiliser JQuery et Vue.js, cela n'est généralement pas recommandé. Le mélange des deux peut conduire à la confusion du code et aux conflits potentiels, car les deux bibliothèques essaient de gérer le DOM selon leurs propres termes. Il est préférable d'utiliser complètement l'un d'eux.

Comment gérer les événements dans Vue.js, par rapport à jQuery?

Dans jQuery, vous joignez généralement un écouteur d'événements à un élément en utilisant des méthodes telles que .click (), .on () ou .bind (). Dans Vue.js, vous utilisez la directive V-on (ou son abréviation @) pour écouter les événements DOM et exécuter un javascript lorsqu'il est déclenché.

Comment fonctionne la liaison des données dans Vue.js par rapport à jQuery?

jQuery n'a pas de liaison de données intégrée. Vous sélectionnez manuellement un élément et mettez à jour son contenu. Au contraire, Vue.js possède un puissant système de liaison des données. Vous pouvez utiliser la directive du modèle V pour créer des liaisons de données bidirectionnelles sur l'entrée de formulaire, TextArea et Select Elements.

Comment animer les éléments de Vue.js, par rapport à jQuery?

jQuery a des méthodes d'animation intégrées, telles que .fadein (), .slideUp (), etc. Vue.js, en revanche, fournit des composants de conversion qui permettent une plus grande flexibilité lors de l'animation des éléments dans et hors du DOM.

Comment faire des demandes HTTP dans Vue.js, par rapport à jQuery?

Dans jQuery, vous utilisez généralement la méthode $ .ajax () pour faire des demandes HTTP. Vue.js n'a pas cette méthode intégrée, mais vous pouvez utiliser des bibliothèques comme les API modernes (comme Fetch) ou Axios pour faire des demandes HTTP.

Comment Vue.js gère-t-il la réactivité par rapport à jQuery?

jQuery n'a pas de système réactif intégré. Lorsque vos données changent, vous mettez à jour manuellement le DOM. Vue.js, en revanche, a un système de données réactif. La vue est automatiquement mise à jour lorsque vous modifiez les données.

Comment remplacer le plugin jQuery par le composant Vue.js?

De nombreux plugins jQuery peuvent être remplacés par des composants Vue.js. Vue.js possède un écosystème riche qui fournit des milliers de composants open source disponibles. Vous pouvez également créer vos propres composants personnalisés. Cela améliore la réutilisabilité et la maintenabilité du code.

Veuillez noter que j'ai réécrit la sortie selon vos exigences et conservé le format et l'emplacement d'origine de toutes les images. Comme je n'ai pas accès à Codepen, je ne peux pas fournir le lien Codepen réel, veuillez créer et remplacer l'espace réservé "[Codepen Link]".

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!