Alphorm.com Formation Vue JS 3 : Exploiter la Composition API
0 j'aime726 vues
La formation sur Vue.js 3, animée par Fabien Le Corre, se concentre sur l'exploitation de la Composition API pour améliorer la réactivité et la modularité des composants. Elle aborde divers sujets tels que vite.js, les directives personnalisées, les computed et watch, ainsi que l'intégration de pinia et firebase/firestore. Destinée aux développeurs ayant des bases en Vue.js, cette formation met en avant des techniques pour écrire un code plus propre et réutilisable.
Alphorm.com Formation Vue JS 3 : Exploiter la Composition API
- 1. Formation Vue JS 3 Exploiter la Composition API Une formation Fabien LE CORRE
- 2. Une formation Plan de la formation Introduction 1. Découverte de la composition API 2. La réactivité avec la composition API 3. Vite.js pour aller plus vite 4. Custom directives 5. Computed et Watch avec la composition API 6. Vue Router avec la composition API 7. Teleport pour téléporter les éléments 8. Emit avec la composition API 9. Les props avec la composition API 10. Provide / Inject 11. Les composables 12. Vue Use 13. Pinia 14. Firebase / Firestore Conclusion
- 3. Une formation Public concerné Développeurs ayant des bases de Vue JS et désireux de découvrir les formidables possibilités offertes par la composition API de Vue JS 3
- 4. Une formation Connaissances requises HTML/CSS Javascript Des bases en Vue JS
- 6. Présentation du projet Une formation Fabien LE CORRE
- 7. Une formation Présentation des outils VsCode Terminal / iTerm / Hyper NodeJS NPM / Yarn Vue dev tool
- 8. Découvrir la composition API Vue.js 3 Une formation Fabien LE CORRE
- 9. Une formation La Composition API C'est un nouveau moyen d'écrire des composants Vue, apparu avec Vue 3 et c'est une alternative à l'option API que nous avons utilisée dans la première formation
- 10. Une formation Mon code est obsolète ? Non! La composition API a été pensée pour être un ajout qui fonctionnera en plus de l'option API De plus les concepts que vous connaissez déjà avec l'option API reste les mêmes avec la composition API
- 11. Une formation Les avantages Un code plus propre, plus facile à lire et à maintenir On va pouvoir également réutiliser du code plus facilement Cela peut s'avérer vraiment utile sur une application avec des centaines de composants
- 12. Implémenter une fonctionnalité avec l'API option Une formation Fabien LE CORRE
- 13. Convertir une fonctionnalité avec la composition API Une formation Fabien LE CORRE
- 14. Simplifier les composants avec script setup Une formation Fabien LE CORRE
- 15. Découvrir les cycles de vie avec la composition API Une formation Fabien LE CORRE
- 16. Implémenter la réactivité sur les data primitives avec Ref Une formation Fabien LE CORRE
- 17. Implémenter la réactivité avec Reactive Une formation Fabien LE CORRE
- 18. Vérifier si une valeur est réactive avec isRef Une formation Fabien LE CORRE
- 19. Vérifier si un objet est réactif avec isReactive Une formation Fabien LE CORRE
- 20. Empêcher la mutation d'un objet réactif avec readonly Une formation Fabien LE CORRE
- 21. Vérifier si un objet est en lecture seule avec isReadonly Une formation Fabien LE CORRE
- 22. Découvrir les Refs de Template Une formation Fabien LE CORRE
- 23. Créer une Ref sur une propriété d'un objet réactif avec toRef Une formation Fabien LE CORRE
- 24. Déstructurer un objet réactif avec toRefs Une formation Fabien LE CORRE
- 25. Afficher un objet réactif en brut avec toRaw Une formation Fabien LE CORRE
- 26. Découvrir Vite.js Une formation Fabien LE CORRE
- 27. Installer une application avec Vite Une formation Fabien LE CORRE
- 28. Découvrir la structure de l'application Une formation Fabien LE CORRE
- 29. Ajouter une route au router Une formation Fabien LE CORRE
- 30. Implémenter une custom directive locale avec la composition API Une formation Fabien LE CORRE
- 31. Implémenter une custom directive locale avec argument Une formation Fabien LE CORRE
- 32. Implémenter une custom directive globale avec la composition API Une formation Fabien LE CORRE
- 33. Implémenter une custom directive globale avec argument Une formation Fabien LE CORRE
- 34. Créer un compteur de caractère avec Computed Une formation Fabien LE CORRE
- 35. Détecter si le compteur dépasse une limite avec Watch Une formation Fabien LE CORRE
- 36. Créer une route et une view pour lister des articles Une formation Fabien LE CORRE
- 37. Récupérer l'ID d'un article dans l'URL avec Vue Router et la composition API Une formation Fabien LE CORRE
- 38. Accéder aux paramètres de routes dans script setup avec le composable useRoute Une formation Fabien LE CORRE
- 39. Utiliser le composable useRouter pour rediriger Une formation Fabien LE CORRE
- 40. Découvrir Teleport Une formation Fabien LE CORRE
- 41. Téléporter un élément avec Teleport Une formation Fabien LE CORRE
- 42. Utiliser Teleport pour afficher une notification Une formation Fabien LE CORRE
- 43. Utiliser Teleport dans un composant enfant Une formation Fabien LE CORRE
- 44. Utiliser emit avec la composition API Une formation Fabien LE CORRE
- 45. Créer nos composants Une formation Fabien LE CORRE
- 46. Afficher nos composants dynamiquement Une formation Fabien LE CORRE
- 47. Garder en vie un composant inactif avec KeepAlive Une formation Fabien LE CORRE
- 48. Définir et transmettre une props Une formation Fabien LE CORRE
- 49. Assigner des props de manière dynamique Une formation Fabien LE CORRE
- 50. Utiliser les props dynamiques dans une boucle v-for Une formation Fabien LE CORRE
- 51. Fournir les data au composant enfant avec provide Une formation Fabien LE CORRE
- 52. Utiliser les data avec inject Une formation Fabien LE CORRE
- 53. Découvrir les composables Une formation Fabien LE CORRE
- 54. Créer un composable Une formation Fabien LE CORRE
- 55. Utiliser un composable Une formation Fabien LE CORRE
- 56. Réutiliser un composable Une formation Fabien LE CORRE
- 57. Découvrir VueUse Une formation Fabien LE CORRE
- 58. Utiliser VueUse avec Vue 3 Une formation Fabien LE CORRE
- 59. Binder automatiquement avec le composant sans rendu Une formation Fabien LE CORRE
- 60. Présentation du projet et de Pinia Une formation Fabien LE CORRE
- 61. Installer une application avec Pinia Une formation Fabien LE CORRE
- 62. Installer et importer Bootstrap et Boostrap Icons Une formation Fabien LE CORRE
- 63. Intégrer le template à l'application Une formation Fabien LE CORRE
- 64. Découper l'application en composants Une formation Fabien LE CORRE
- 65. Créer et définir un State Une formation Fabien LE CORRE
- 66. Utiliser le State dans un composant Une formation Fabien LE CORRE
- 67. Utiliser les getters avec Pinia Une formation Fabien LE CORRE
- 68. Lister les projets du state Une formation Fabien LE CORRE
- 69. Utiliser les actions pour supprimer Une formation Fabien LE CORRE
- 70. Utiliser Vue UUID Une formation Fabien LE CORRE
- 71. Valider le formulaire et afficher les erreurs Une formation Fabien LE CORRE
- 72. Découvrir Firebase et Firestore Une formation Fabien LE CORRE
- 73. Créer un nouveau projet Firebase Une formation Fabien LE CORRE
- 74. Créer et installer une nouvelle application Une formation Fabien LE CORRE
- 75. Créer une base de données Firestore en mode test Une formation Fabien LE CORRE
- 76. Ajouter une nouvelle collection Une formation Fabien LE CORRE
- 77. Connecter la base de données à notre application Une formation Fabien LE CORRE
- 78. Récupérer les données depuis la base Firestore Une formation Fabien LE CORRE
- 79. Implémenter le temps réel avec la base de données Une formation Fabien LE CORRE
- 80. Ajouter des données à la base Firestore Une formation Fabien LE CORRE
- 81. Supprimer des données de la base Firestore Une formation Fabien LE CORRE
- 82. Mettre à jour des données de la base Firestore Une formation Fabien LE CORRE
- 83. Conclusion Une formation Fabien LE CORRE
- 84. Une formation Découverte de la composition API La réactivité Aller plus vite avec Vite! Custom directives Computed et Watch Vue Router avec la composition API Teleport : téléporter les éléments Emit avec la composition API Les composants dynamiques Les props avec la composition API Provide et Inject Les composables Vue Use Pinia Firebase / Firestore Bilan