Salut ! J'aimerais poursuivre mon apprentissage de Vue.JS. Maintenant que je maitrise les bases et que je connais webpack et vue-cli, la prochaine étape est d'apprendre à utiliser les composants. C'est bien cela ? C'est en effet celle que je te recommande.
Mais alors, c'est quoi les composants ?Les composants sont des morceaux de code réutilisables. Ils ont à minima :
- Un nom
- Un template
Tu te rappelles peut être que dans le premier cours sur Vue.JS 3 on avait travaillé sur un root component (soit le composant racine en Français). Étant donné que c'est le root component, il n'a pas de nom. Mais on peut dire qu'il a un template : tout ce qu'on met dans le container Vue (#app souvent) !
Le but des composants est de pouvoir faire une application avec Vue plus maintenable, plus propre. On s'en sert pour séparer les logiques du code.
Prenons un exemple pour mieux comprendre. Imagine la page d'accueil d'un site one page suivante :
- En haut une barre de navigation avec un dropdown
- En dessous un carousel
- Ensuite un menu à onglets pour voir les différentes offres
- Une partie "équipe" qui présente les membres de l'équipe. Au clic sur l'un d'eux, une modale s'ouvre
- Un footer
On voit bien qu'on aura besoin d'utiliser JS à minima sur les 3 parties centrales (en soit, on pourrait utiliser du CSS uniquement, mais dans la pratique le JS nous offre plus de modularité et de simplicité). Cependant, chacune de ces 3 parties est indépendante et il ne serait pas "propre", pas "pratique" de gérer ces 3 parties dans le root component.
Pourquoi ce ne serait pas propre ni pratique ? Imagine que tu utilises le menu à onglets ou le carousel sur une autre page : tu es obligé de tout recoder. En programmation on déteste réécrire du code, on doit appliquer le DRY : Don't Repeat Yourself (ne te répète pas). On dit même que les meilleurs développeurs sont les plus fainéants, dans le sens où ce sont ceux qui cherchent à faire le code le plus efficace en un minimum de lignes (et donc en le moins de répétitions).
Aussi, si tu travailles avec d'autres développeurs, si on fait des composants, chacun peut travailler sur sa partie. Si on fait tout dans le root component, cela devient très difficile de travailler à plusieurs.
Enfin, dans le cadre d'une Single Page App (SPA), on rappelle qu'il n'y a pas de rechargement de page au clic sur un lien. En fait ce qui se passe, c'est qu'on change de composant quand on clic sur un lien : les composants font office de "page" !
En bref : les composants sont essentiels dans Vue. J'espère t'en avoir convaincu !
Pré-requis pour profiter pleinement de ce cours :
- Maitriser les bases de Vue.JS 3 : [accéder au cours]
- Avoir paramétré un bundler (comme Webpack) pour Vue 3 OU vue-cli OU vite
J'ai les prérequis ! Et tu m'as convaincu sur l'utilité des composants. Mais du coup, comment créons-nous des composants ? On va utiliser là l'API de l'Application de Vue.JS 3 avec une méthode nommée component :
{"language":"text/javascript","content":"const app = Vue.createApp({})\n\napp.component('slider', {\n \tdata() {\n\t\treturn {\n\t\t\tslides:[\n\t\t\t\t'Flower',\n\t\t\t\t'Animal',\n\t\t\t\t'Space'\n\t\t\t],\n\t\t\tindex:0\n\t\t}\n\t},\n\tmethods:{\n\t\tslide(operation) {\n\t\t\t// Car % n'est pas le modulo mathématique en JS\n // on doit faire un code un peu compliqué\n // pour gérer les nombres négatifs\n this.index = (((this.index + operation)%this.slides.length)+this.slides.length)%this.slides.length\n\t\t}\n\t},\n template: `\n\t<div>\n \t<button @click=\"slide(-1)\">Aller à gauche</button>\n\t\t<button @click=\"slide(1)\">Aller à droite</button>\n\t\t<template v-for=\"(slide, key) in slides\" :key=\"key\">\n\t\t\t<div v-if=\"index == key\">\n\t\t\t\t{{ slide }}\n\t\t\t</div>\n\t\t</template>\n\t</div>`\n})","filename":""}
Oh mais ça marche comme notre root component ! Exactement, sauf qu'on renseigne le template directement dans un attribut nommé "template".
Pour utiliser ce composant, rien de plus simple. Il nous suffit d'appeler dans notre élément container la balise qui porte le nom du composant. Attention, on doit monter notre application qu'après avoir défini tous nos composants, comme suit :
{"language":"text/html","content":"<body>\n\t<main id=\"app\">\n\t\t<!-- J'utilise mon composant -->\n\t\t<slider></slider>\n\t</main>\n\t<script src=\"https://unpkg.com/vue@next\"></script>\n\t<script>\n\t\tconst app = Vue.createApp({})\n\n\t\tapp.component('slider', {\n\t\t \tdata() {\n\t\t\t\treturn {\n\t\t\t\t\tslides:[\n\t\t\t\t\t\t'Flower',\n\t\t\t\t\t\t'Animal',\n\t\t\t\t\t\t'Space'\n\t\t\t\t\t],\n\t\t\t\t\tindex:0\n\t\t\t\t}\n\t\t\t},\n\t\t\tmethods:{\n\t\t\t\tslide(operation) {\n\t\t\t\t\tthis.index = (((this.index + operation)%this.slides.length)+this.slides.length)%this.slides.length\n\t\t\t\t}\n\t\t\t},\n\t\t template: `\n\t\t\t<div>\n\t\t \t<button @click=\"slide(-1)\">Aller à gauche</button>\n\t\t\t\t<button @click=\"slide(1)\">Aller à droite</button>\n\t\t\t\t<template v-for=\"(slide, key) in slides\" :key=\"key\">\n\t\t\t\t\t<div v-if=\"index == key\">\n\t\t\t\t\t\t{{ slide }}\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t</div>`\n\t\t})\n\t\t\n\t\t// Je monte mon application APRÈS avoir défini app.component\n\t\tapp.mount('#app')\n\t</script>\n</body>","filename":"index.html"}
Ça marche ! J'ai créé mon premier composant ! En effet, et pas un des moindres : un slider !
Comme je le disais, un composant est réutilisable. Ainsi :
{"language":"text/html","content":"<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n\t<meta charset=\"utf-8\">\n\t<title>Les composants avec Vue.JS 3 : Introduction</title>\n</head>\n<body>\n\t<main id=\"app\">\n\t\t<h1>Un premier slider</h1>\n\t\t<slider></slider>\n\t\t<h2>Un autre slider</h2>\n\t\t<slider></slider>\n\t\t<h3>Et un troisième...</h3>\n\t\t<slider></slider>\n\t</main>\n\t<script src=\"https://unpkg.com/vue@next\"></script>\n\t<script>\n\t\tconst app = Vue.createApp({})\n\n\t\tapp.component('slider', {\n\t\t \tdata() {\n\t\t\t\treturn {\n\t\t\t\t\tslides:[\n\t\t\t\t\t\t'Flower',\n\t\t\t\t\t\t'Animal',\n\t\t\t\t\t\t'Space'\n\t\t\t\t\t],\n\t\t\t\t\tindex:0\n\t\t\t\t}\n\t\t\t},\n\t\t\tmethods:{\n\t\t\t\tslide(operation) {\n\t\t\t\t\tthis.index = (((this.index + operation)%this.slides.length)+this.slides.length)%this.slides.length\n\t\t\t\t}\n\t\t\t},\n\t\t template: `\n\t\t\t<div>\n\t\t \t<button @click=\"slide(-1)\">Aller à gauche</button>\n\t\t\t\t<button @click=\"slide(1)\">Aller à droite</button>\n\t\t\t\t<template v-for=\"(slide, key) in slides\" :key=\"key\">\n\t\t\t\t\t<div v-if=\"index == key\">\n\t\t\t\t\t\t{{ slide }}\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t</div>`\n\t\t})\n\n\t\tapp.mount('#app')\n\t</script>\n</body>\n</html>","filename":"index.html"}
Cependant, cette syntaxe n'est pas celle la plus utilisée ni celle recommandée par Vue. Non, en général, on va utiliser des Single File Component ou en bon Français des composants "monofichiers". Ainsi, on aura un seul et unique composant défini par fichier. C'est ce que nous allons voir dans la partie juste après ! Pour que tout fonctionne bien, je te laisse préparer un dossier généré par vue-cli ou équivalent (vue vite, bundler comme webpack...)
Ok j'ai compris ! Je prépare mon dossier avec vue-cli.J'ai terminé cette partie