Introduction à Vue.js
Informations pratiques
- 2 jours
- En présentiel
- Horaires 9h-12h30 / 13h30-17h
- Salles de formation accessibles aux personnes à mobilité réduite
- Téléchargez le livret d'accueil
Besoin de plus d'informations ?
Objectifs pédagogiques
Vue.js est un framework JS permettant de créer des interfaces utilisateurs dynamiques. Il est facile à prendre en main, flexible et modulaire : il peut être utilisé de façon très minimale, ou dans une application complète de type Single Page Application ou Progressive Web App. Sa communauté et son écosystème en font un outil de choix pour construire des applications robustes et évolutives.
Avec cette formation vous comprendrez comment Vue fonctionne, prendrez en main toutes ses fonctionnalités ainsi que ses plugins Vue-Router et Vuex. Nous étudierons ensemble les bonnes pratiques, les pièges à éviter pour gagner du temps ainsi que les axes d’optimisation et d’amélioration dans le cadre d’un projet construit sur ce framework.
Pré-requis
- Bonnes connaissances en JavaScript
- Des connaissances en ES6 sont un plus
- Ordinateur portable à apporter
Programme
Le JavaScript moderne
- Déclaration de variables
- Déstructuration
- Fonctions fléchées
- Valeurs par défaut
- Les classes
- Interpolation
- Utilisation et création de promesses
- Manipulation d’objets
- Les module
Première rencontre avec le framework Vue.js
- La réactivité
- Les limites de la réactivité
- Le DOM virtuel
L’instance Vue, le cœur du système
- Intégration minimale dans une page HTML
- Le fichier main.js
- Le composant principal
Les Single File Components
- Structure d’un fichier
- Philosophie des composants Vue
La création d’un projet Vue.js
- Les outils pour développer
- Découverte de l’outil vue-cli
- TypeScript
- Class components
- Vue UI
- Architecture de dossiers et fichier
Les plugins
- Utilisation d’un plugin tiers
- Création de plugin
Focus sur les composants Vue
- Le template
- Les données réactives
- Les propriétés calculées
- Les méthodes
- Rendu conditionnel
- Les listes
- Créer des directives
- Les observateurs
- Les styles
- Les événements
- Le cycle de vie d’un composant Vue
Communication entre les composants
- Importer et utiliser des composants
- Les props
- Les attributs non props
- Émettre et écouter un événement
- Le bus d’événement global
- Écouter des événements natifs
- La modification de props
- Accès à l’instance Vue principale
- Accès à l’instance Vue parente
- Références aux composants enfants
- Injection de dépendances
Fonctionnalités plus avancées
- Quelques modules usuels
- Les slots
- Les liaisons de formulaire
- Les Mixins
- Composants dynamiques
- Vue Router
- Transitions et animations
Aller plus loin
- Organiser et ré-organiser son code quand l’application grossit
- Optimisation des performances
- Créer une PWA avec Vue
Financement
Organisme de formation référencé Qualiopi (cliquez sur le lien), nos formations sont éligibles aux financements de vos OPCO dans la catégorie OF (Organisme de Formation)
Nos formateurs
Partez à la découverte de notre équipe !
Grégory COPIN
Directeur technique
Grégory est directeur technique chez Les-Tilleuls.coop et, avec ses 20 ans d’expérience, il peut vous accompagner sur l'architecture, le coaching ou former vos équipes à React, Vue.js, Svelte, Sylius, les tests ou les outils de versionning. S'il préfère les technologies frontend, il est également à l'aise sur la gestion d'API, les sites e-commerce et l'utilisation de CMS, sur lesquels il publie régulièrement des articles ou anime des conférences.