Introduction à Vue.js

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.

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

Nos formations sont éligibles à divers financements. Découvrez-les.

Qualiopi

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)

Notre équipe de formation

Découvrez notre équipe

Marion AGÉ

CEO

Marion est co-gérante et directrice technique chez Les-Tilleuls.coop. Experte en développement e-commerce, Symfony/API Platform et Vue.js, elle aime travailler à apporter une architecture et des solutions à des besoins métiers complexes en accompagnant les équipes dans leur quotidien.

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.