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

Il existe actuellement de nombreux frameworks JavaScript, il peut être difficile de les suivre tous, et il est certainement improbable que quiconque les maîtrise complètement. Pour la plupart d'entre nous, cela signifie que nous devrons choisir les cadres de développement sur lesquels nous allons investir du temps dans l'apprentissage.

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

Qu'est-ce que Vue.js?

Bien que ce ne soit généralement pas capitalisé, «Vue» est 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 est plus rapide 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 correct de le décrire comme une langue pour débutant. Vous devez avoir une certaine expérience en HTML, CSS et JavaScript pour pouvoir réaliser quoi que ce soit de concret.

La courbe d'apprentissage avec Vue est un peu moins raide qu'avec React et beaucoup moins raide qu'avec Angular. Donc, ce qui peut être précisé, c’est que Vue est relativement facile à apprendre par rapport aux 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'autre part, vous ne pouvez pas vraiment faire plus dans Vue que vous ne pourriez le faire en utilisant des méthodes plus conventionnelles. L'utilisation de Vue consiste simplement à vous faciliter la tâche lors de 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 d'infrastructure.

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 le cas, et le meilleur de ceux-ci est les effets de transition intégrés, qui vous permettent de prendre le contrôle de structures CSS et JavaScript très gourmandes en code et très gourmandes en code, en utilisant juste une ligne ou deux de code. Cela vous fait gagner du temps et des efforts lors de la création de vos applications.

Une autre fonctionnalité utile est le rendu natif pour des types de périphériques spécifiques tels qu'Android et iOS. Vous pouvez ainsi ajuster vos applications pour les périphériques sur lesquels elles fonctionnent sans trop de travail supplémentaire.

Commencer

Comme indiqué précédemment, Vue est facile à apprendre, mais ce n'est pas la langue d'un débutant. Vous devez toujours vous familiariser avec un bloc de code.

Le problème est que, comme dans la plupart des frameworks, la documentation est très paresseuse et principalement dédiée à vous convaincre de l’utiliser. La documentation accorde moins d'attention à l'explication du fonctionnement de tout ou de la raison pour laquelle vous faites les choses d'une certaine manière. Pratiquement chaque exemple de cadre officiel jamais créé laisse de côté des informations vitales que vous devez fouiller pendant des heures pour les découvrir. C'est une faille partagée 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 l'optimisation de 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. Il est également possible que d'autres ressources de page se chargent 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 le moment cela n’a pas beaucoup de sens, mais la partie Vue est l’élément vide «démo-grille», plus l’ajout d’une «directive-v» à l’entrée de la requête (dans ce cas, il s’agit du «modèle-v ”, 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 il effectue une tâche de rendu dynamique. Cela offre des avantages d'optimisation par rapport à l'ajouter plus tôt dans la page.

  • La ligne 46 indique que le navigateur doit rechercher un composant sur la page appelé «grille de démonstration» et la ligne 47 indique que «# grid-template» doit être utilisé comme modèle pour le composant (il s'agit du 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 exécuté les étapes 1 à 4 et avez ouvert le fichier dans le navigateur, vous ne verrez que le champ de recherche et rien de plus. C'est parce que tout le nécessaire pour construire la table a été défini mais pas créé. Ainsi, à l'étape 5, nous ajoutons le code qui crée 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.

Dépistage

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'il n'y a pas de style 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:

En cliquant sur un en-tête de colonne, vous pourrez changer l'ordre d'affichage. Par exemple, un clic sur l'en-tête de colonne "Puissance" modifiera les résultats à afficher dans l'ordre du 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 beaucoup d'informations pour aider une personne non familiarisée avec la base de code à comprendre comment appliquer sur le terrain ce qu'ils voient dans l'exemple. Vue fait un travail magnifique par rapport à Bootstrap (qui est notoirement sous-informatif), mais laisse encore beaucoup de questions sans réponses.

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

  • Style de la table comme une table à rayures Bootstrap
  • 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

Avatar

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.