Alphorm.com Formation Vue.js : Maitriser les bases
Cette formation Vue JS est destinée aux développeur front-end et back-end désirant découvrir ce framework Javascript front-end populaire pour sa simplicité d’utilisation. A la fin de cette formation Vue JS 3, vous serez capable de développer des applications web côté front-end, d’utiliser des APIs externes, de créer un projet de Todo List, d’utiliser Vue CLI pour créer des applications Vue JS en ligne de commande, de créer et d’utiliser des composants et de vous servir de Vue Router qui vous permettra de mettre en place simplement un système de routing pour votre application Vue JS. Nous commencerons par installer les outils nécessaires au développement d’applications avec Vue JS, comme l’éditeur de code VSCode et ses extensions indispensables pour développer avec Vue. Nous installerons également, NodeJS et NPM, Vue Devtools, ainsi qu’un terminal. Nous partirons ensuite à la découverte de Vue JS 3, en créant notre première instance. Nous découvrirons la propriété data, les méthodes, la boucle for, nous verrons comment lier les évènements, utiliser des conditions pour rendre du contenu, changer l’état des éléments, insérer du HTML, écouter le changement des données, valider un formulaire et comment fonctionne le cycle de vie d’une application Vue JS. Puis nous mettrons en pratique ce que l’on aura appris au travers du développement de A à Z d’une application concrète de Todo List. Nous installerons ensuite Vue CLI afin de créer des applications pros en ligne de commande. Nous étudierons au passage la structure des dossiers générés par Vue CLI. Nous passerons ensuite aux composants, éléments indispensables dans le développement d’une application Vue JS. Nous verrons comment créer et importer des composant de manière globale et de manière locale, comment utiliser des composant à l’intérieur d’autres composant pour éviter d’avoir à dupliquer du code. Nous verrons comment importer du CSS, comment passer des données d’un composant à un autre, comment utiliser les slots et les propriétés calculées. Aujourd’hui les APIs sont utilisées dans la plupart des applications, nous verrons donc comment consommer une API avec Vue JS. Nous verrons comment utiliser Vue JS et Axios, un client HTTP Javascript qui nous permettra de créer, mettre à jour, lire et supprimer des données d’une API externe. Nous implémenterons entre autres, une galerie d’images récupérées d’une API. Dans la dernière partie de cette formation Vue JS, nous découvrirons et utiliserons Vue Router au travers du développement d’une application récupérant des menus avec des ingrédients, contenants textes et photos. Nous installerons une application avec Vue CLI avec Vue Router. Nous verrons ensuite comment créer des routes pour notre application, comment les utiliser pour les liens internes à une application Vue JS. Nous verrons comment fonctionne le mode History avec Vue Router, nous verrons également comment importer un composant dynamiquement afin de gagner en performance.
Recommandé
Recommandé
Contenu connexe
Similaire à Alphorm.com Formation Vue.js : Maitriser les bases
Similaire à Alphorm.com Formation Vue.js : Maitriser les bases (20)
Plus de Alphorm
Plus de Alphorm (20)
Alphorm.com Formation Vue.js : Maitriser les bases
- 1. Formation Vue.js Maitriser les bases Une formation Fabien LE CORRE
- 2. Plan de la formation Une formation Introduction 1. Installation et préparation du terrain 2. Découverte des bases de Vue 3 3. Projet de TODO List avec Vue 3 4. Découverte de Vue CLI 5. Utiliser les composants 6. Consommer une API avec Vue 3 7. Utiliser Vue Router avec Vue 3 Conclusion
- 3. Public concerné Une formation Développeur Front-end ou Back-end qui veulent découvrir un Framework Javascript Front-end populaire et facile à prendre en main, afain de développer des applications web dynamiques
- 4. Connaissances requises Une formation HTML5/CSS Bases de Javascript
- 6. Présentation du projet Une formation Fabien LE CORRE
- 7. Une formation Plan Installation et préparation Découverte des bases Coder une Todolist Utiliser Vue CLI Utiliser les composants Consommer une API Utiliser Vue Router Conclusion
- 8. Une formation Présentation des outils NodeJS NPM ou Yarn Atom Microsoft Visual Studio Code Terminal / iTerm / Hyper Vue DevTool
- 9. Installer VS Code et les extensions Une formation Fabien LE CORRE
- 10. Installer NodeJS et NPM Une formation Fabien LE CORRE
- 11. Installer Vue devtools Une formation Fabien LE CORRE
- 12. Installer un terminal Une formation Fabien LE CORRE
- 13. Créer sa première instance Vue Une formation Fabien LE CORRE
- 14. Utiliser la propriété data Une formation Fabien LE CORRE
- 15. Utiliser des méthodes Une formation Fabien LE CORRE
- 16. Utiliser la boucle v-for Une formation Fabien LE CORRE
- 17. Utiliser v-bind Une formation Fabien LE CORRE
- 18. Utiliser v-on Une formation Fabien LE CORRE
- 19. Utiliser v-if Une formation Fabien LE CORRE
- 20. Utiliser v-model Une formation Fabien LE CORRE
- 21. Changer un état au click Une formation Fabien LE CORRE
- 22. Insérer du HTML dans une chaîne de caractères Une formation Fabien LE CORRE
- 23. Comprendre les lifecycle hooks Une formation Fabien LE CORRE
- 24. Utiliser watch pour écouter les données Une formation Fabien LE CORRE
- 25. Traiter et valider un formulaire Une formation Fabien LE CORRE
- 26. Mettre en place le Starter Kit Une formation Fabien LE CORRE
- 27. Lister les tâches d'un tableau Une formation Fabien LE CORRE
- 28. Gérer le changement d'état Une formation Fabien LE CORRE
- 29. Valider le formulaire Une formation Fabien LE CORRE
- 30. Ajouter une nouvelle tâche Une formation Fabien LE CORRE
- 31. Supprimer toutes les tâches Une formation Fabien LE CORRE
- 32. Stocker les tâches avec le local storage Une formation Fabien LE CORRE
- 33. Récupérer les tâches du local storage Une formation Fabien LE CORRE
- 34. Mettre à jour le local storage lors de modifications Une formation Fabien LE CORRE
- 35. Utiliser l'attribut ref pour remettre le focus sur un champ Une formation Fabien LE CORRE
- 36. Utiliser le hook mounted pour mettre le focus au chargement Une formation Fabien LE CORRE
- 37. Supprimer une tâche particulière Une formation Fabien LE CORRE
- 38. Installer Vue CLI Une formation Fabien LE CORRE
- 39. Créer une app Vue avec Vue CLI Une formation Fabien LE CORRE
- 40. Comprendre les fichiers Une formation Fabien LE CORRE
- 41. Créer et importer un composant globalement Une formation Fabien LE CORRE
- 42. Utiliser plusieurs composants de manière globale Une formation Fabien LE CORRE
- 43. Importer une feuille de style extérieur avec Boostrap Une formation Fabien LE CORRE
- 44. Importer Bootstrap via NPM Une formation Fabien LE CORRE
- 45. Importer un fichier CSS local Une formation Fabien LE CORRE
- 46. Importer un composant localement Une formation Fabien LE CORRE
- 47. Importer un composant enfant Une formation Fabien LE CORRE
- 48. Passer des data avec les props Une formation Fabien LE CORRE
- 49. Emettre avec $emit Une formation Fabien LE CORRE
- 50. Découvrir les slots Une formation Fabien LE CORRE
- 51. Utiliser computed Une formation Fabien LE CORRE
- 52. Installer Bootstrap et Axios Une formation Fabien LE CORRE
- 53. Faire un premier appel à une API avec Vue3 et Axios Une formation Fabien LE CORRE
- 54. Afficher les résultats récupérés via l'API Une formation Fabien LE CORRE
- 55. Installer un nouveau projet et Vue Axios Une formation Fabien LE CORRE
- 56. Créer un composant pour les photos et l'importer Une formation Fabien LE CORRE
- 57. Récupérer les photos et afficher une photo Une formation Fabien LE CORRE
- 58. Créer un composant avec un formulaire d'ajout Une formation Fabien LE CORRE
- 59. Poster un nouveau post vers l'API avec Axios Une formation Fabien LE CORRE
- 60. Mettre à jour des données de l'API avec Axios Une formation Fabien LE CORRE
- 61. Supprimer un post via l'API avec Axios Une formation Fabien LE CORRE
- 62. Présentation de Vue Router Une formation Fabien LE CORRE
- 63. Installer une application avec Vue Router avec Vue CLI Une formation Fabien LE CORRE
- 64. Créer et utiliser plusieurs routes avec Vue Router Une formation Fabien LE CORRE
- 65. Comprendre le mode History avec Vue Router Une formation Fabien LE CORRE
- 66. Importer dynamiquement un composant pour le Lazy Loading Une formation Fabien LE CORRE
- 67. Créer un composant pour la navigation Une formation Fabien LE CORRE
- 68. Découvrir et modifier la class active des liens Une formation Fabien LE CORRE
- 69. Découvrir et récupérer les paramètres d'URL Une formation Fabien LE CORRE
- 70. Comprendre et utiliser les routes nommées Une formation Fabien LE CORRE
- 71. Créer un menu dynamique Une formation Fabien LE CORRE
- 72. Ajouter un slug dans les paramètres d'URL Une formation Fabien LE CORRE
- 73. Utiliser une props dans une route Une formation Fabien LE CORRE
- 74. Lister les données en relation Une formation Fabien LE CORRE
- 75. Afficher les détails d'un ingrédient Une formation Fabien LE CORRE
- 76. Implémenter un bouton de retour en arrière Une formation Fabien LE CORRE
- 77. Créer un effet de transition lors de la navigation Une formation Fabien LE CORRE
- 78. Traiter les URL non trouvées Une formation Fabien LE CORRE
- 79. Implémenter une redirection si aucune ressource n'est trouvée Une formation Fabien LE CORRE
- 80. Récupérer les query params des URL Une formation Fabien LE CORRE
- 81. Conclusion Une formation Fabien LE CORRE
- 82. Une formation Installation et préparation Découverte des bases Coder une Todolist Utiliser Vue CLI Utiliser les composants Consommer une API Utiliser Vue Router Conclusion Bilan