Introduction à la création d'applications Web dans Vue.js en 2024

Si vous vous abonnez à un service à partir d'un lien sur cette page, Reeves and Sons Limited peut gagner une commission. Voir notre déclaration éthique.

Il existe tellement de frameworks JavaScript de nos jours qu'il peut être difficile de les suivre tous, et il est certainement peu probable que quiconque les maîtrise entièrement. Ce que cela signifie pour la plupart d'entre nous, c'est que nous devrons être sélectifs quant aux cadres de développement dans lesquels nous allons investir du temps dans l'apprentissage.

Dans cet article, nous allons jeter un coup d'œil à Vue.js, afin que vous puissiez décider vous-même s'il est susceptible de convenir au type de projets sur lesquels vous avez tendance à travailler et s'il vous convient.

Qu'est-ce que Vue.js?

Bien qu'il ne soit généralement pas écrit en majuscule, « Vue » est en réalité un acronyme pour Visual Understanding Environment. Son objectif principal est de faciliter le développement d'applications Web en réduisant la complexité du code. Il a beaucoup en commun avec React.js, mais la version actuelle de Vue s'affiche plus rapidement que React et semble être plus efficace.

Est-ce que Vue est difficile à apprendre?

Si vous êtes déjà un codeur expérimenté, vous ne devriez pas avoir beaucoup de difficulté à démarrer avec Vue, mais il ne serait pas juste de le décrire comme un langage pour débutants. Vous devez avoir une certaine expérience avec HTML, CSS et JavaScript pour créer quelque chose de pratique avec.

La courbe d'apprentissage avec Vue est un peu moins raide qu'avec React, et elle est beaucoup moins raide qu'avec Angular. Ce que l'on peut donc affirmer avec précision, c'est que Vue est relativement facile à apprendre par rapport à d'autres frameworks de développement populaires.

Comment Vue aide-t-il à atteindre les objectifs?

Cela varie un peu en fonction de votre objectif, mais en général, vous liez des blocs de code à des div HTML. Cette méthodologie facilite l'introduction de contenu interactif et dynamique par rapport au HTML, CSS et JavaScript standard.

D'un autre côté, vous ne pouvez pas vraiment faire plus dans Vue qu'en utilisant les méthodes les plus conventionnelles. Utiliser Vue consiste simplement à vous faciliter les choses dans la phase de développement, mais cela n'a pas beaucoup d'effet sur le résultat final, mis à part un impact mineur sur les performances dû au chargement du code du framework.

Vue offre un autre avantage: elle offre une modularité, ce qui signifie que vous pouvez réutiliser les composants que vous développez dans plusieurs projets.

Est-ce que Vue a des trucs cool dans sa manche?

C'est certainement le cas, et le meilleur d'entre eux est les effets de transition intégrés, qui vous permettent de prendre le contrôle de ce que d'autreswise être des structures CSS et JavaScript très gourmandes en code en utilisant seulement une ligne ou deux de code. Cela vous permet d'économiser du temps et des efforts lors de la création de vos applications.

Une autre fonctionnalité utile est le rendu natif pour des types d'appareils spécifiques tels qu'Android et iOS, afin que vous puissiez affiner vos applications pour les appareils sur lesquels elles s'exécutent sans trop de travail supplémentaire.

Commencer

Comme indiqué précédemment, Vue est facile à apprendre, mais ce n'est pas un langage pour débutants. Vous devez toujours vous y retrouver à l’intérieur d’un bloc de code.

Le problème est que comme la plupart des frameworks, la documentation est très paresseuse, et principalement dédiée à vous convaincre de l'utiliser. Beaucoup moins d'attention est accordée dans la documentation pour expliquer comment tout fonctionne ou pourquoi vous faites les choses d'une certaine manière. Pratiquement tous les exemples de frameworks officiels jamais créés omettentformation qu’il faut fouiller pendant des heures pour découvrir. C'est également un défaut partagé par la documentation et les exemples de Vue.

Pour faciliter la compréhension de ce que vous devez réellement faire pour recréer ce projet, procédez comme suit:

1. Ajouter un script référençant vue.js

Pour optimiser la vitesse, il est préférable de l'inclure après tout le contenu de votre page, mais juste avant la balise body de fermeture dans la source HTML. Vous pouvez également charger d'autres ressources de page dans cette section, et l'ordre de priorité de chargement détermine l'ordre dans lequel vous devez insérer chaque ressource.

Voici un exemple d'inclusion de vue.js à partir d'un CDN:

Et voici un exemple d'inclusion de vue.js depuis un répertoire sur votre propre serveur:

Sans cette référence à vue.js, rien de lié à Vue ne peut arriver.

2. Ajoutez les composants Vue dans votre corps HTML

C'est ce qui se passe avec ce code :

Pour l'instant, cela n'a pas beaucoup de sens, mais la partie Vue est l'élément vide "demo-grid", plus l'ajout d'une "v-directive" à l'entrée de la requête (dans ce cas, il s'agit de "v-model ", qui est utilisé pour lier le code Vue pour former des entrées).

3. Si le projet nécessite un modèle de composant, ajoutez-le au corps HTML.

Cette section de code est inhabituelle car elle ressemble à du code HTML normal dans une balise de script, ce qui déroutera la plupart des logiciels d'édition HTML (remarquez que les couleurs de l'indicateur sont incorrectes à certains endroits).

4. Ajouter l'instance Vue

Cela devrait être l'une des dernières choses à apparaître sur la page, car elle effectue une tâche de rendu dynamique. Cela offre certains avantages en matière d'optimisation par rapport à son ajout plus tôt dans la page.

  • La ligne 46 spécifie que le navigateur doit rechercher un composant sur la page appelé «demo-grid», et la ligne 47 spécifie que «# grid-template» doit être utilisé comme modèle pour le composant (c'est le code de modèle ajouté à l'étape 3 de la ligne 9 à la ligne 30).
  • Un bloc de la ligne 48 à la ligne 52 définit les propriétés du composant.
  • Les lignes 53 à 62 définissent une fonction permettant de trier les données de la table.
  • Les lignes 63 à 85 définissent une fonction de filtrage des données (à partir des résultats de la requête de recherche).
  • Les lignes 86 à 90 définissent une fonction permettant de mettre les mots en majuscule dans un ensemble de données.
  • Les lignes 91 à 97 définissent la méthode de tri des données.

5. Ajoutez le code de lancement avant la balise de script de fermeture

Si vous avez terminé les étapes 1 à 4 et ouvert le fichier dans le navigateur, tout ce que vous verrez est le champ de recherche et rien de plus. C'est parce que tout ce qui est nécessaire pour construire la table a été défini mais pas créé. Ainsi, à l’étape 5, nous ajoutons le code qui crée réellement la table définie par toutes les étapes précédentes.

  • La ligne 100 crée un nouvel objet Vue.
  • La ligne 101 spécifie l'élément auquel lier l'action.
  • Les lignes 102 à 111 fournissent les données d'objet qui seront liées à l'élément.

Essais

Après avoir défini et créé l'objet requis, vous êtes maintenant prêt à tester le résultat. Préparez-vous à être submergé, car voici ce que vous devriez voir dans le navigateur:

Que se passe-t-il? Pourquoi est-ce si ennuyeux ? C'est parce qu'aucun style n'est appliqué. Si nous utilisons le style par défaut de l'exemple JSFiddle, le tableau ressemblerait à ceci :

En tapant n'importe quoi dans la boîte de recherche (non sensible à la casse), les résultats seront filtrés en conséquence:

Cliquer sur un en-tête de colonne vous permettra de changer l'ordre d'affichage. Par exemple, cliquer sur l'en-tête de la colonne «Puissance» changera les résultats à afficher par ordre de niveau de puissance.

Améliorer et adapter

Un autre problème avec les exemples de framework est qu'ils n'incluent généralement pas grand-chose dansformation pour aider quelqu'un qui ne connaît pas la base de code à comprendre comment appliquer sur le terrain ce qu'il voit dans l'exemple. Vue fait un travail magnifique par rapport à Bootstrap (qui est notoirement sous-enformative), mais laisse encore beaucoup de questions sans réponse.

Voici quelques modifications que nous pourrions apporter à cette application pour changer son apparence et son action:

  • Stylez la table comme Bootstrap stripetableau d
  • Changer le nombre de colonnes
  • Changer les données en quelque chose de complètement différent

1. Ajout de Bootstrap

2. Envelopper l'élément dans une table Bootstrap

3. Ajustement de l'élément racine pour utiliser le modèle de disposition Bootstrap

4. Restyling les flèches

5. Modification des données

6. Essai

  • Non filtré et non trié

  • Trié par directive (croissant)

  • Trié par Utilisé pour (croissant)

  • Filtré pour "conditionnel"

  • Filtré pour «conditionnel» et trié par directive (croissant)

Réflexions finales

Espérons que ces exemples montrent clairement que nous avons construit deux applications avec une apparence et un contenu très différents à partir d'une tranche de code commune. Avec Vue, il est très facile de réutiliser votre code dans plusieurs projets et de potentiellement gagner un temps considérable.

image d'en-tête avec la permission de Aleksandar Savic

Bogdan Rancea

Bogdan est un membre fondateur d’Inspired Mag, ayant accumulé près de 14 années d’expérience 6 au cours de cette période. Dans ses temps libres, il aime étudier la musique classique et explorer les arts visuels. Il est également obsédé par les fixies. Il possède déjà 5.

Commentaires Réponses 0

Soyez sympa! Laissez un commentaire

Votre adresse email n'apparaitra pas. Les champs obligatoires sont marqués *

Note *

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..