Ce cours a été complètement mis à jour en février 2023 !
Bonjour :). Après avoir lu les cours sur Javascript, je me sens prêt à aller plus loin et j'ai décidé d'apprendre un framework. Vue.JS m'a paru être un bon choix !D'abord, je te félicite dans ta démarche ! Apprendre un framework ne peut que être utile une fois qu'on a bien compris l'utilise d'un langage.
Vue.JS est parfait pour s'initier aux frameworks JS. Cela ne signifie pas qu'il n'est pas puissant et utilisé que dans un cadre scolaire, non. Cela signifie que c'est un framework professionnel, intuitif et simple à prendre en main.
J'ai bien choisi alors. Vue.JS 3 est la dernière version, pourrais-tu m'apprendre à utiliser ce framework ? Sans problème ;). On va aborder dans ce cours les bases dans ce cas. Je réaliserai d'autres cours plus tard concernant des concepts plus avancés !
Par contre, j'ai envie de te présenter ce framework sous un angle très concret. Tout au long du tutoriel je te présenterai des exemples pratiques et nous aurons un fil directeur que tu découvriras au fil des chapitres... Une petite mise en bouche : nous gérerons des photos provenant d'une API.
Ça me plait bien ! Prérequis pour participer à ce cours :
- Évidemment, connaitre HTML/CSS
- Connaitre javascript et savoir coder en utilisant ce langage à un niveau correct (ce [cours] peut être un bon début mais n'est pas suffisant)
- Avoir déjà utilisé npm et webpack serait un plus
- Savoir manipuler des tableaux et objets en JS
- Connaitre fetch
- Comprendre les mots fonctions, promesses, callback, argument, instance, classe, dans le cadre du JS
À la fin de cours, tu seras capable de faire plein de choses avec Vue.JS 3 déjà, notamment :
- Gérer des données de manière réactive
- Comprendre le cycle de vie de Vue
- Utiliser les crochets
- Utiliser des propriétés calculées et des observateurs
- Consommer une API
- Réagir aux évènements
- Interagir avec le DOM et modifier du style
- Utiliser les directives
- Afficher des listes
- Gérer des formulaires
Installation de Vue.JS
Pour utiliser le framework, nous devons installer le code nécessaire. Pour cela, 3 solutions s'offrent à nous :
- Utiliser le CDN
- Utiliser un bundler et le package vue via NPM
- Utiliser vue-cli (un outil tout-en-un de Vue pour déployer de grosses SPA)
C'est quoi une SPA ? Et que va-t-on utiliser nous ? Une SPA est l'abréviation de Single Page App. Ce sont des applications composées d'une seule page. Du moins, en l'apparence : il n'y pas de rechargement du navigateur quand on clique sur un lien, mais on change bien de code en réalité derrière ! C'est de plus en plus courant.
Nous allons utiliser pour commencer le CDN. Si tu sais déjà utiliser webpack par exemple, tu peux installer Vue3 via npm et paramétrer ton bundler comme souhaité ! De toute façon ne t'en fais pas, un tutoriel concernant Webpack verra bientôt le jour (ou a peut être déjà vu le jour selon la date à laquelle tu lis cette phrase !).
{"language":"text/html","content":"<!DOCTYPE html>\n<html lang=\"fr\">\n\n<head>\n <meta charset=\"utf-8\">\n <title>Mes premiers pas avec Vue 3</title>\n</head>\n\n<body>\n <script src=\"https://unpkg.com/vue@3/dist/vue.global.js\"></script>\n</body>\n\n</html>","filename":"index.html"}
Mais cette page n'affiche rien ! C'est normal, je n'ai rien fait ! J'ai simplement chargé Vue.JS dans ma balise script.
La première des choses à faire pour utiliser Vue.JS sur notre page est de définir un container, c'est à dire un élément qui déterminera la portée de Vue.JS sur notre page. On peut avoir autant de container que souhaité, mais en général, notamment lorsqu'on utilise les SPA, on a un container global qu'on appellera "app" (et dans ce cas là, "composant racine" (root component), mais nous parlerons des composants en temps voulu ;)). Pour indiquer à Vue notre container, nous devons utiliser les méthodes Vue.createApp() et Vue.createApp().mount().
{"language":"text/html","content":"<!DOCTYPE html>\n<html lang=\"fr\">\n\n<head>\n <meta charset=\"utf-8\">\n <title>Mes premiers pas avec Vue 3</title>\n</head>\n\n<body>\n <main id=\"app\">\n <!-- Mon container -->\n </main>\n\n <script src=\"https://unpkg.com/vue@3/dist/vue.global.js\"></script>\n <script>\n const { createApp } = Vue\n createApp({\n // Plein de choses magiques à venir...\n }).mount('#app')\n </script>\n</body>\n\n</html>","filename":"index.html"}
Mais pourquoi on n'a pas mis directement le container comme étant <body> ? Hé bien parce qu'on ne peut pas, c'est tout ! Vue.JS ne permet pas l'utilisation de body comme élément container.
Ok, et que met-on dans l'objet qu'on a défini comme vide dans la méthode createApp ? J'ai compris que mount() servait à lier notre container, mais dans la méthode createApp, on ne fait rien ? C'est ici qu'on mettra tout notre code. Nos données, nos méthodes... Par exemple :
{"language":"text/html","content":"<!DOCTYPE html>\n<html lang=\"fr\">\n\n<head>\n <meta charset=\"utf-8\">\n <title>Mes premiers pas avec Vue 3</title>\n</head>\n\n<body>\n <main id=\"app\">\n Voici les cours sur Vue.JS :\n <ul>\n <li v-for=\"(tuto, key) in tutorials\" :key=\"key\">\n {{ tuto }}\n </li>\n </ul>\n </main>\n\n <script src=\"https://unpkg.com/vue@3/dist/vue.global.js\"></script>\n <script>\n const { createApp } = Vue\n createApp({\n data() {\n return {\n tutorials: ['Les bases de Vue 3', 'Les composants avec Vue 3', 'Aller plus loin avec Vue 3']\n }\n }\n }).mount('#app')\n </script>\n</body>\n\n</html>","filename":"index.html"}
Oula, mais je ne comprends rien !Ne t'en fais pas, on va justement tout apprendre durant ce cours ! Avant d'aller plus loin, sache qu'une autre syntaxe est possible, tirant profit des modules (désormais compatible avec tous les navigateurs les plus courants nativement).
{"language":"text/html","content":"<!DOCTYPE html>\n<html lang=\"fr\">\n\n<head>\n <meta charset=\"utf-8\">\n <title>Mes premiers pas avec Vue 3</title>\n</head>\n\n<body>\n <main id=\"app\">\n Voici les cours sur Vue.JS :\n <ul>\n <li v-for=\"(tuto, key) in tutorials\" :key=\"key\">\n {{ tuto }}\n </li>\n </ul>\n </main>\n\n <script type=\"module\">\n import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'\n createApp({\n data() {\n return {\n tutorials: ['Les bases de Vue 3', 'Les composants avec Vue 3', 'Aller plus loin avec Vue 3']\n }\n }\n }).mount('#app')\n </script>\n</body>\n\n</html>","filename":"index.html"}
Bien. Maintenant que nous avons vu tout ça, nous allons pouvoir rentrer dans le vif du sujet. Prêt ?
Je te suis ! J'ai terminé cette partie