Faire le pas de jQuery à Vue

Les développeurs qui utilisent JQuery depuis longtemps et qui se sont récemment tournés vers Vue peuvent être intéressés par le processus de migration des deux.

Tout d'abord, je dois être clair, je ne vous recommande pas de renoncer à jQuery. Bien que cette déclaration soit populaire maintenant, j'ai moi-même écrit un article similaire il y a quelques années («comment puis-je (pas) utiliser jQuery»). Si jQuery peut répondre à vos besoins et que vos utilisateurs finaux peuvent utiliser votre site Web en douceur, continuez à l'utiliser.

Ce guide est principalement destiné aux développeurs qui ont de nombreuses années d'expérience en utilisant jQuery et qui veulent apprendre à accomplir les mêmes tâches dans Vue. Je vais donc me concentrer sur ce que je pense être le cas d'utilisation "de base" de jQuery. Je ne couvrirais pas toutes les fonctionnalités possibles, mais j'ai plutôt adopté l'approche "Je fais souvent [x] avec jQuery", qui pourrait être plus résonnant pour ceux qui envisagent d'apprendre Vue. (Soit dit en passant, notez également que la façon dont j'écris les exemples n'est qu'un moyen d'accomplir la tâche. JQuery et Vue offrent plusieurs façons d'atteindre le même objectif, ce qui est une bonne chose!)

Voyons donc certaines tâches avancées que nous pourrions nous tourner vers JQuery:

• Trouver des éléments dans le DOM (pour les opérer plus tard)
• Modifier le contenu dans le DOM (par exemple, le texte d'un paragraphe ou la classe d'un bouton)
• Lire et définir les valeurs de formulaire
• Vérification du formulaire (en fait juste une combinaison de ce qui précède)
• Résultats de l'appel et du traitement de l'AJAX
• Gestion des événements (par exemple, effectuez une action lorsqu'un bouton est cliqué)
• Mesurer ou changer le style d'un élément

Bien sûr, JQuery a bien plus que cela, mais ces utilisations (au moins à mon avis) couvrent les cas d'utilisation les plus courants. Notez également qu'il existe de nombreuses corrélations croisées dans la liste ci-dessus. Alors, devrions-nous commencer par comparer chaque fonctionnalité une par une? Non, ne t'inquiète pas. Présentons d'abord les principales différences des applications VUE.

Définissez «la portée de l'action» de Vue

Lorsque nous ajoutons jQuery à la page, nous ajoutons en fait un couteau suisse à notre code JavaScript pour gérer les tâches de développement Web courantes. Nous pouvons exécuter n'importe quel cas d'utilisation dans n'importe quel ordre que nous pensons approprié. Par exemple, un client peut avoir besoin de vérification du formulaire aujourd'hui, puis, dans environ un mois, demandez à ajouter un formulaire de recherche basé sur l'Ajax à l'en-tête du site Web.

Vue a une différence significative à cet égard. Lors du démarrage d'un projet VUE, nous définissons d'abord la "région" sur laquelle nous voulons nous concentrer dans le DOM. Voyons donc une page Web prototype simple:

<header>
  Contenu de l'en-tête fantaisie</header>
<div id="sidebar">
  Un contenu de barre latérale</div>

<main>
  <p id="main-content">
    Contenu du site Web principal, contenu très important ...
  </p>
  <div id="loginForm">
    Bien sûr, il y a aussi un formulaire de connexion</div>
</main>

Dans une application jQuery typique, nous pourrions écrire du code pour gérer les en-têtes, les barres latérales, les formulaires de connexion, etc. Pas grand-chose:

 $ (document) .ready (function () {

  $ ('en-tête') // faire quelque chose ...

  $ ('# sidebar') // faire quelque chose ...

  $ ('# liginform') // faire quelque chose ...

});

Dans l'application VUE, nous spécifions d'abord quoi traiter. Supposons que notre client demande d'abord d'ajouter une validation à l'élément de connexion. Notre code VUE spécifiera ceci:

 Nouveau Vue ({
  el: '#loginform',
  // Le code est là ...
});

Cela signifie que si le client décide plus tard d'ajouter quelque chose à la barre latérale, nous ajoutons généralement une deuxième application Vue:

 Nouveau Vue ({
  el: '#loginform',
  // Le code est là ...
});

Nouveau Vue ({
  el: '#sidebar',
  // Le code est là ...
});

Est-ce une mauvaise chose? Absolument pas. Nous avons immédiatement acquis les avantages de l'emballage. Si nous utilisons accidentellement des variables avec des noms communs (nous l'avons tous fait), nous n'avons pas à nous soucier de la conflit avec d'autres parties du code. Lorsqu'un client ajoute plus tard une autre demande, séparez notre ensemble unique et logique de codes VUE comme celui-ci, afin que nous puissions être assurés qu'il interférera les uns avec les autres.

Donc, c'est une bonne chose. Mais quand j'ai commencé à utiliser Vue, cela m'a donné une pause. Maintenant, regardons nos cas d'utilisation.

Trouver des éléments dans DOM

Un autre aspect intéressant ou effrayant que vous trouverez est de savoir comment «trouver des éléments dans le DOM». C'est un peu vague, mais considérons un exemple spécifique. Nous avons un bouton et lorsqu'il est cliqué, nous faisons quelque chose. Voici un exemple simplifié:

 <button id="myButton">Cliquez sur moi!</button>

 $ (document) .ready (function () {

  $ ('# MyButton'). Cliquez sur (fonction () {
    alerte (1);
  });

});

Comparons maintenant à la façon dont Vue implémente:

<div id="app">
  <button>Cliquez sur moi!</button>
</div>

const app = new Vue ({
  El: '#App',
  Méthodes: {
    dosomething: function () {
      alerte (1);
    }
  }
});

Les applications Vue sont verbeuses, mais sachez comment connecter directement les opérations ("cliquez") entre les balises et les fonctions à appeler. Le code de Vue n'a aucune association avec le DOM (sauf la partie EL, où nous définissons où il doit fonctionner). C'est facilement l'une des choses qui m'ont le plus convaincu de Vue - il est plus facile de comprendre ce qui se passe. De plus, je n'ai pas à m'inquiéter trop de la valeur d'identification et du sélecteur. Si je change la classe ou l'ID du bouton, je n'ai pas besoin de revenir à mon code et de m'inquiéter de mettre à jour le sélecteur.

Voyons un autre exemple: trouver et modifier du texte dans le DOM. Imaginez qu'après avoir cliqué sur le bouton, le texte d'une autre partie du DOM sera désormais modifié.

 <button id="myButton">Cliquez sur moi!</button>

$ (document) .ready (function () {

  $ ('# MyButton'). Cliquez sur (fonction () {
    $ ('# Result'). Texte ('Vous avez cliqué sur moi, merci!');
  });

});

J'ai ajouté une nouvelle portée, et maintenant lorsque le bouton est cliqué, nous utilisons un autre sélecteur pour le trouver et utilisez la méthode de l'utilitaire JQuery pour modifier le texte à l'intérieur. Considérez maintenant la version Vue:

<div id="app">
  <button>Cliquez sur moi!</button>
  <span>{{resultText}}</span>
</div>

const app = new Vue ({
  El: '#App',
  données: {
    resultText: ''
  },
  Méthodes: {
    dosomething: function () {
      this.resultText = 'Vous avez cliqué sur moi, merci! ';;
    }
  }
});

Dans cet exemple, nous utilisons le langage du modèle de Vue (lignes en surbrillance) pour spécifier que nous voulons rendre une variable à l'intérieur de la portée, dans ce cas ResultText. Maintenant, lorsque le bouton est cliqué, nous modifions la valeur et le texte interne de la portée changera automatiquement.

Soit dit en passant, Vue prend en charge l'abréviation de l'attribut V-on, de sorte que les boutons de l'exemple peuvent être remplacés par @ click = "dosomething".

Lire et écrire des variables de forme

Les formulaires de traitement sont probablement l'une des choses les plus courantes et les plus utiles que nous pouvons faire avec JavaScript. Même avant JavaScript, la plupart de mes premiers "développement Web" écrivaient des scripts Perl pour gérer les soumissions de formulaires. En tant que moyen principal d'accepter la saisie des utilisateurs, les formulaires ont été essentiels pour le Web et peuvent toujours être le cas pendant un certain temps. Voyons un exemple jQuery simple qui lit certains champs de formulaire et définit un autre champ:

= Demander la somme

$ (document) .ready (function () {
  Soit $ first = $ ('# premier');
  Soit $ second = $ ('# second');
  Soit $ sum = $ ('# sum');
  Soit $ bouton = $ ('# sumbutton');

  $ Button.on ('click', fonction (e) {
    E.PreventDefault ();
    Soit Total = ParseInt ($ first.val (), 10) ParseInt ($ second.val (), 10);
    $ sum.val (total);
  });
});

Ce code montre comment jQuery lit et écrit via la méthode Val (). Nous finissons par prendre quatre éléments (les trois champs et boutons de formulaire) à partir du DOM et en utilisant des opérations mathématiques simples pour générer les résultats. Considérez maintenant la version Vue:

= Demander la somme

Nouveau Vue ({
  el: '#myform',
  données: {
    Premièrement: 0,
    Deuxième: 0,
    Sum: 0
  },
  Méthodes: {
    dosum: function () {
      this.sum = this.first this.second;
    }
  }
})

Cela introduit des raccourcis Vue intéressants. Premièrement, le modèle V est la façon dont Vue crée la liaison des données bidirectionnelles entre les valeurs dans DOM et JavaScript. Les variables de blocs de données seront automatiquement synchronisées avec le champ de formulaire. Modifiez les données et le formulaire sera mis à jour. Modifiez le formulaire et les données seront mises à jour. .Number est un drapeau qui demande à Vue de traiter les valeurs de chaîne héréditaires d'un champ de formulaire comme nombres. Si nous l'omettre et faire l'opération d'addition, nous verrons l'ajout de chaîne au lieu de l'opération arithmétique. J'utilise JavaScript depuis près d'un siècle et je gâche toujours cela.

Une autre "compétence" intelligente est @ click.prevent. Tout d'abord, @Click définit le gestionnaire de clics du bouton, puis le .Prevent empêche en partie le navigateur de soumettre le comportement par défaut du formulaire (équivalent à event.PreventDefault ()).

Le dernier point est l'ajout de la méthode dosum lié au bouton. Notez qu'il utilise simplement des variables de données (Vue est fournie dans cette portée).

Bien que ce soit surtout mon sentiment personnel, j'aime vraiment le manque de sélecteurs de requête dans les scripts lorsqu'il est écrit en Vue et comment HTML peut rendre plus clair ce qu'il fait.

Enfin, nous pouvons même nous débarrasser complètement du bouton:

=

Nouveau Vue ({
  el: '#myform',
  données: {
    Premièrement: 0,
    Deuxième: 0
  },
  calculé: {
    sum: function () {
      Renvoyez ceci.
    }
  }
})

Une fonctionnalité plus fraîche de Vue est les propriétés calculées. Ce sont des mannequins qui s'identifient lorsque leurs valeurs dérivées sont mises à jour. Dans le code ci-dessus, SUM sera mis à jour dès que les deux champs de formulaire modifient. Cela fonctionne en dehors des champs de formulaire. Nous pouvons rendre la somme comme ceci:

 Le total est {{sum}}.

Utilisation de l'Ajax

Comme il est facile de faire en utilisant l'Ajax, ce qui est louable. En fait, je peux dire que j'ai utilisé Ajax de la manière "native" probablement une seule fois au total. (Si vous êtes curieux, vous pouvez consulter la spécification de XMLHttpRequest et peut être heureux que vous l'avez évité vous-même.) La méthode $ .get (... ...) de JQuery fonctionne dans de nombreux cas, et $ .ajax () facilite également la tâche lorsque quelque chose de plus complexe est nécessaire. Une autre chose que JQuery fait bien est la façon dont il gère les demandes JSONP. Bien que la plupart des JSONP ne soient pas requis maintenant en utilisant CORS, JSONP est un moyen de gérer les demandes des API sur différents domaines.

Alors, qu'est-ce que Vue a fait pour que vous puissiez vous faciliter l'Ajax? Rien!

OK, cela semble horrible, mais ce n'est pas le cas. Il existe de nombreuses options disponibles pour gérer les demandes HTTP, et Vue.js adopte une approche plus agnostique qui nous permet aux développeurs de décider par eux-mêmes comment le gérer. Alors oui, cela signifie plus de travail, mais nous avons d'excellentes options.

La première chose à considérer est Axios, une bibliothèque basée sur les promesses qui est très populaire dans la communauté Vue. Voici un exemple simple de celui-ci en action (tiré de sa lecture):

 axios.get ('/ user? id = 12345')
  .Then (fonction (réponse) {
    // console.log (réponse);
  })
  .Catch (fonction (erreur) {
    // Gire l'erreur Console.log (erreur);
  })
  .Then (function () {
    // Exécute toujours});

Axios prend certainement en charge les demandes de poste et permet de spécifier les en-têtes ainsi que de nombreuses autres options.

Bien qu'Axios soit très populaire parmi les développeurs VUE, je ne l'aime pas vraiment. (Du moins pas encore.) Au lieu de cela, je préfère aller chercher. Fetch n'est pas une bibliothèque externe, mais une manière Web standard d'exécuter les demandes HTTP. Fetch est bien pris en charge dans environ 90% des navigateurs, mais cela signifie qu'il n'est pas complètement sûr, mais nous pouvons toujours utiliser Polyfill si nécessaire.

Bien que cela dépasse complètement le champ d'application de ce dont nous discutons ici, Kingsley Silas a écrit un excellent guide sur l'utilisation d'Axios et Fetch with React.

Comme Axios, Fetch est également basé sur la promesse et a une API amicale:

 fetch ('http://example.com/movies.json')
  .Then (fonction (réponse) {
    retour réponse.json ();
  })
  .Then (function (myjson) {
    console.log (json.stringify (myjson));
  });

Axios et Fetch couvrent tous les types de demandes HTTP, donc l'un ou l'autre convient à un nombre de besoins. Regardons une comparaison simple. Il s'agit d'une simple démonstration jQuery utilisant l'API Star Wars.

<h1 id="Films-Star-Wars"> Films Star Wars</h1>

$ (document) .ready (function () {
  $ .get ('https://swapi.com/api/films', fonction (res) {
    LET LIST = '';
    résultat.results.ForEach (fonction (r) {
      liste = `

$ {R.Title}

`; }); $ ('# films'). html (liste); }); });

Dans l'exemple ci-dessus, j'utilise $ .get pour accéder à l'API et je reviens à la liste de films. J'utilise ensuite ces données pour générer une liste de titres en tant qu'éléments de balise Li et les insérer tous dans le bloc UL.

Maintenant, considérons un exemple en utilisant Vue:

<div id="app">
  <h1 id="Films-Star-Wars">Films Star Wars</h1>
  <ul><li v-for="film in films">{{film.title}}</li></ul>
</div>

const app = new Vue ({
  El: '#App',
  données: {
    Films: []
  },
  créé () {
    fetch ('https://swapi.com/api/films')
      .Then (res => res.json ())
      .Then (res => {
        this.films = result.results;
      });
  }
})

Cette meilleure partie est probablement l'utilisation de modèles V-FOR. Notez que Vue ne se soucie pas de la mise en page (au moins JavaScript). Les données sont tirées de l'API. Il est attribué une variable. La disposition est responsable de l'afficher. J'ai toujours détesté utiliser HTML dans mon javascript, et bien que JQuery ait des solutions à ce problème, la cuisiner en Vue en fait un choix naturel.

Un exemple complet (bien qu'un peu trivial)

Pour une compréhension plus approfondie, considérons un exemple plus réaliste. Nos clients nous ont demandé de créer une interface de recherche frontale compatible de haut niveau et compatible Ajax pour l'API du produit. La liste des fonctions comprend:

• Prend en charge le filtrage par nom et catégorie de produit
• Vérification du formulaire, nous obligeant à fournir des termes de recherche ou des catégories
• Lorsque l'API accédez, affichez un message à l'utilisateur et désactivez le bouton Soumettre
• Une fois terminé, le rapport de traitement ne montre pas de produits ou de correspondances répertoriées

Commençons par la version jQuery. Le premier est HTML:

recherche catégorie tous nourriture jeu recherche

Il y a une forme avec nos deux filtres et deux div. L'un est utilisé comme état temporaire lors de la recherche ou de la déclaration d'une erreur, et l'autre est utilisé pour rendre le résultat. Maintenant, vérifiez le code.

 // ... (le code est trop long, omis ici) ...

Le code crée d'abord un ensemble de variables pour chaque projet DOM que nous voulons utiliser: champs de formulaire, boutons et div. Le cœur de la logique est situé dans le gestionnaire de clics du bouton. Nous vérifions et si tout fonctionne, alors publions des demandes à l'API. Lorsqu'il revient, s'il n'y a pas de correspondance, nous rendons le résultat ou affichons le message.

Considérons maintenant la version Vue. Encore une fois, commençons par la mise en page:

<div id="app">
  <form>
    <p>
      <label for="search">recherche</label>
      <input type="text" v-model="search" id="search">
    </p>
    <p>
      <label for="category">catégorie</label>
      <select v-model="category" id="category">
        <option value="">tous</option>
        <option value="Food">nourriture</option>
        <option value="Games">jeu</option>
      </select>
    </p>
    <button :disabled="searchBtnDisabled">recherche</button>
  </form>

  <div v-html="status"></div>
  <ul v-if="results"><li v-for="result in results">{{result.name}}</li></ul>
</div>

À partir du haut, les modifications incluent:

• Enveloppez la disposition dans une div pour que Vue sache où travailler.
• Utilisez le modèle V pour les champs de formulaire pour traiter facilement les données.
• Utilisez @ click.prevent pour gérer les principales opérations de recherche.
• Utilisation: désactivé pour lier l'état désactivé du bouton à une valeur dans l'application Vue (nous verrons ce qu'il fera plus tard).
• La valeur d'état est légèrement différente de l'exemple précédent. Alors que jQuery a une méthode spécifique pour définir du texte dans un projet DOM et une autre méthode pour HTML, Vue doit utiliser V-HTML lors de l'attribution de HTML à la valeur à rendre. Si nous essayons d'utiliser {{Status}} avec HTML, la balise sera échappée.
• Enfin, l'itération est traitée à l'aide de V-si conditionnellement rendu avec V-For.

Regardons maintenant le code.

 // ... (le code est trop long, omis ici) ...

Le premier bloc de code qui mérite d'être mentionné est un ensemble de champs de données. Certaines map pour former des champs, tandis que d'autres mappent les résultats, les messages d'état, etc. La méthode de recherche de produits de recherche gère la plupart des mêmes choses que dans la version jQuery, mais en général, il y a beaucoup moins de code directement lié au DOM. Par exemple, même si nous savons que les résultats sont répertoriés dans une liste non ordonnée, le code lui-même ne s'en soucie pas. Il attribue simplement la valeur et la balise est responsable de le rendu. Dans l'ensemble, le code JavaScript se concentre davantage sur la logique que le code jQuery, qui "ressent" une meilleure séparation des préoccupations.

JQuery est parti, Vue dure pour toujours!

Ok, c'est un peu exagéré. Comme je l'ai dit au début, si vous aimez utiliser jQuery et cela fonctionne pour vous, je ne pense absolument pas que vous devriez changer quoi que ce soit.

Cependant, je peux dire que Vue se sent comme une bonne "prochaine étape" pour les personnes habituées à utiliser jQuery. Vue prend en charge des applications complexes et possède de puissants outils de ligne de commande pour les projets d'échafaudage et de construction. Mais pour des tâches plus simples, Vue est devenue mon outil de développement incontournable comme une bonne alternative "moderne jQuery"!

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!