La formation en détail

Objectifs

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

Pré-requis

Débutant