Appuyez sur Entrée pour voir vos résultats ou Echap pour annuler.

Apprendre Vue.js rapidement

Salut les devs 😀 Je prends un break de la sĂ©rie DIY. Je reviendrai avec une suite trĂšs ludique dans 2 semaines. Aujourd’hui, j’aimerais vous prĂ©senter le framework Vue.js de façon simple et rapide pour que vous puissiez vous faire une tĂȘte sur ce dernier.

Les sources de cet article sont disponibles sur GitHub.

Vue, c’est quoi?

Une est un framework JavaScript frontend dĂ©veloppĂ© par Evan You, un ancien de Google qui a participĂ© au dĂ©veloppement d’AngularJS (i.e. : version 1.x). En gros, l’objectif Ă©tait de prendre le meilleur d’Angular et de crĂ©er un framework vraiment lĂ©ger.

À l’instar d’Angular (i.e. : 2+), Vue propose du routage, des composants, du partage de portĂ©e (scope) et autres fonctionnalitĂ©s utiles pour le dĂ©veloppement d’applications complexes.

Il a Ă©tĂ© crĂ©Ă© en 2014 et en est Ă  la version 2.5.17 (au moment d’Ă©crire ceci).

DĂ©marrer un nouveau projet

Avant de partir, il nous faut @vue/cli qui nous permettra de gĂ©nĂ©rer la structure de base du projet. Contrairement Ă  @angular/cli, le client en invite de commande de Vue.js est trĂšs limitĂ© et gĂ©nĂšre un tout petit peu de code poubelle qu’il faudra se dĂ©partir.

Cette commande installera le client vue dans vos dépendances globales sur votre poste. Ensuite, créer un nouveau projet vue :

Choisir simplement les options par dĂ©faut! Comme tout bon cli, cette commande prend quelques minutes Ă  exĂ©cuter. Lorsque ce sera terminĂ©e, il nous faudra ajouter le routeur aux dĂ©pendances pour obtenir l’application monopage tant convoitĂ©e. Pour se faire, naviguer dans le rĂ©pertoire crĂ©Ă© par la commande prĂ©cĂ©dente et exĂ©cuter :

La structure

Une fois le tout complété, vous devriez obtenir une arborescence de fichiers qui ressemble à ceci :

 

Rapidement, public contient les fichiers statiques qui ne font pas partie du projet, contrairement Ă  src/assets qui contiendra les images de l’application et autres fichiers. Le fichier index.html ne fait pas partie de Vue, mais c’est le point d’entrĂ©e principal.

Un peu plus bas, vous avez le main.js qui sert Ă  dĂ©marrer l’application Vue. En thĂ©orie, vous ne devriez pas avoir le modifier.

Sous le main.js, vous trouverez router.js qui est la dĂ©finition des routes. Si vous l’ouvrez, vous verrez que c’est trĂšs simple. Par dĂ©faut, @vue/cli crĂ©e deux routes et deux vues, soit deux composants de navigation :

Si vous regardez dans le répertoire views, vous verrez deux fichiers « .vue » qui correspondent à ces composants de navigation.

De plus, Ă  la racine du rĂ©pertoire src, vous trouverez un fichier App.vue qui est le composant principal d’application. Vous l’aurez compris, on se retrouve avec une hiĂ©rarchie de composants, comme ceci :

La structure d’un fichier « .vue »

Les fichiers « .vue » ont une structure particuliĂšre. Ils contiennent le code de la vue HTML, du composant en JavaScript ainsi que les styles propres au composant. Voici le plus simple exemple d’un composant :

Création des classes utilitaires

Dans un premier temps, crĂ©ons les classes qui n’ont aucun lien avec Vue, soit notre service pour manipuler les todos dans le LocalStorage ainsi que l’objet ToDo.

CrĂ©ation d’un composant

Dans cet exemple, une application de todo, il y aura 3 composants de page et 2 composants rĂ©guliers. Les 3 pages sont : l’accueil, la crĂ©ation d’un todo et la liste des todos sauvegardĂ©s. Ces derniers sont persistĂ©s dans le LocalStorage du navigateur.

Puisque les composants de page utilisent les composants réguliers, commençons par ces derniers. Le premier sera le ToDoForm dont voici le code HTML :

Il y a quelques trucs intéressants ici. La directive v-if permet de rendre ou non un élément en se basant sur un booléen. Les variables showErrorMessage et showSuccessMessage sont déclarées dans le composant JS ci-dessous.

Sur l’Ă©lĂ©ment de formulaire, la directive v-on permet d’y attacher un Ă©vĂ©nement. Vue nous offre aussi des paramĂštres de directive pour les Ă©vĂ©nements pour faciliter le travail, par exemple prevent qui execute event.preventDefault() pour Ă©viter une soumission du formulaire au backend. La fonction handleClickCreateButton est dĂ©clarĂ©e ci-dessous.

Dernier point, v-model permet de faire un 2-way binding entre une propriété du composant JS et la vue HTML.

Ce code est celui du composant JS dĂ©clarĂ© dans le mĂȘme fichier ToDoForm.vue. On peut voir qu’il y a 3 propriĂ©tĂ©s intĂ©ressantes Ă  l’objet exportĂ© : data, methods et components.

La propriĂ©tĂ© data doit ĂȘtre une fonction. Elle permet d’initialiser l’Ă©tat initial du composant. Le retour de cette fonction est un objet JSON dont les clĂ©s et valeurs seront exposĂ©es dans la vue HTML pour l’affichage.

La propriĂ©tĂ© methods, quant Ă  elle, doit ĂȘtre un objet. Elle liste les mĂ©thodes accessibles dans la vue HTML pour la gestion des Ă©vĂ©nements.

Finalement, components est aussi un objet dont la clĂ© et la valeur sont respectivement un nom de composant et une instance de ce dernier, dans le cas oĂč nous aurions Ă  utiliser un sous-composant. Nous verrons comment plus loin.

Utilisation du composant dans une vue

Créons une vue de page appelée ToDoCreation.vue dont le code composant JS serait :

On importe simplement le composant, puis on le dĂ©clare dans l’objet components. Ceci nous permet de l’utiliser dans la vue :

Le composant de liste des todos

Pour démontrer le prochain concept, nous allons utiliser une vue qui affichera la liste des todos créés dans un tableau avec v-for :

Comme vous pouvez le constater, v-for nous permet de boucler dans une collection et rend une variable disponible pour chaque élément du tableau. La directive v-bind:key permet de définir une clé unique pour chaque ligne pour permettre un rafraßchissement optimal de la vue lorsque les données changent.

Dans notre composant JS, il nous faut simplement récupérer les todos via le service, puis rendre une variable disponible à la vue via la fonction data du composant :

Le principe est le mĂȘme pour l’intĂ©gration de ce composant dans une vue de page, je vous laisse visiter GitHub pour le code source 🙂

Configuration du routeur

Pour que nous puissions utiliser les vues de page via une URL spĂ©cifique, il nous faut configurer le routeur. Il n’y a rien d’intĂ©ressant Ă  expliquer, ça fonctionne comme la plupart des routeurs frontend :

Composant d’application

Finalement, il ne reste qu’Ă  dĂ©finir oĂč les composants de page seront injectĂ©s ainsi qu’ajouter un menu de navigation. Ceci se fait dans le App.vue :

TrÚs simplement, le composant de page ( ToDoCreation ou ToDoList) sera injecté dans router-view et les router-link produiront des liens de navigation pour le routeur!

Conclusion

Aujourd’hui, vous avez appris le 2-way binding, l’intĂ©gration d’un routeur, la gestion des Ă©vĂ©nements et la hiĂ©rarchisation des composants en utilisant le framework Vue.js. Si vous avez des commentaires ou des suggestions pour de futurs articles, n’hĂ©sitez pas Ă  m’en faire part sur les rĂ©seaux sociaux ou dans les commentaires ci-dessous.

Merci de nous lire chaque semaine! Si vous avez aimé celui-ci, partagez-le avec vos collÚgues et amis. Nous sommes fiers de pouvoir vous offrir du contenu gratuit et sans publicité et ce, chaque semaine depuis pratiquement 2 ans.

À +

Suivez-nous par courriel!

Saisissez votre adresse courriel pour vous abonner au blog d'Ezo et recevoir une notification de chaque nouvel article par email.

Rejoignez 13 autres abonnés