IB : 07. Vue.js - Développement d'applications web

EN PRÉSENTIEL / A DISTANCE

1. Présentation de Vue.js

• Principes fondamentaux de Vue.js
• Comparaison avec d'autres frameworks (React, Angular)
• Utilisation de vue-cdn, vue-cli et de Vite
• Créer et tester une première application
• Architecture de projet

Atelier :

• Installation de Vue.js, configuration et mise en place d'un projet Vue.js avec Vue CLI et Vite,

2. LES FICHIERS DE COMPOSANTS

• Les Single File Components (fichier.vue) :
• Créer un composant :  API Option vs API composition.
• Lier un composant à l’application
• Le template
• Structuration et modularisation du code avec les modules ES (ECMAScript)
• L’encapsulation de style

Atelier :

• Création de composants SFC et les lier à une application.

3. LES SYNTAXES D'INTERPOLATION

• Les données du composants (propriété data de l’API Option)
• Introduction au Reactive API de l’APIComposition : Présentation de ref et reactive.
• Opérateur moustache (interpolation) et expression JS
• Injecter du texte (v-text) et du HTML (v-html)
• Injecter sans prendre en compte les changements (v-once)
• Insérer un composant (balise de composant)

Atelier :

• Interpoler différents types de variables (tableaux, objets, chaînes de caractères contenant une balise HTML…).

4. RENDU CONDITIONNEL 

• Les directives v-if, v-else et v-else-if
• Affichage avec existence dans le DOM permanente avec v-show
• Utiliser v-if avec la balise template

Atelier :

• Affichage conditionnel en fonction de la valeur d’une variable.

5. AFFICHAGE DE LISTE

• La directive v-for et ses syntaxes (in / of)
• L’attribut key
• Immutabilité des éléments de tableau
• Créer un range
• Utiliser v-for avec la balise template
• Priorité entre v-if et v-for

Atelier :

• Créer une liste d'éléments avec v-for.

6. LIER DES ATTRIBUTS

• Lier un attribut avec v-bind
• Class-binding avec v-bind:class
• Style-binding avec v-bind:style (prefixer automatique)
• Les arguments dynamiques (v-bind[...])
• Syntaxe raccourcis (:attribut)

Atelier :

• Créer un composant avec des classes conditionnelles qui changent en fonction de l'état du composant.

7. GERER LES EVENEMENTS

• La directive v-on,
• Les modificateurs d’événement (stop, prevent, ...)
• Les modificateurs de touches (enter, space, ...)
• Créer des méthodes pour gérer vos événements
• Les arguments dynamiques (v-on[...])
• Syntaxe raccourcis (@event)
• La gestion des événements avec l’API Composition.
• Hooks : événements liés au cycle de vie d’un composant (created, mounted, updated…)

Atelier :

• Créer un composant qui affiche un message différent à chaque étape de son cycle de vie

8. LES FORMULAIRES

• Les directives v-model
• Liaison de valeur (checkbox, radio, select)
• Les modificateurs (lazy, number, ...)
• Les librairies de validation de formulaires tels que : vuelidate, vee-validate, yup...

Atelier :

• Lier des valeurs de formulaire avec les nouvelles directives.

9. LES COMPOSANTS AVANCES

• Passer des données à un composant avec v-bind
• Mise en cache de méthodes avec les propriétés calculées : methods VS computed, usage avec le Composition API
• Les watchers (watch) : Utilisation des hooks de watch dans le Composition API.
• Emettre des événements depuis un composant enfant : $emit (API Option), defineEmits (API Composition), utilisation avec v-model.
• Les slots nommés et les slots dynamiques
• Passer des données à un composant enfant : props (API Option), defineProps (API Composition)
• Passer des données aux composants enfants : provide, inject.
• Les différentes solutions pour communiquer avec le backend (fetch, axios, websockets…)

Atelier :

• Utilisation des slots, props et $emits pour la communication entre un composant parent et enfant.

10. ROUTING ET NAVIGATION

• Installation et mise en place de vue-router
• Configuration du router
• Les routes
• Les liens (router-link)
• Les vues (router-view)
• Gérer les paramètres (utiliser les props)
• Redirections et alias
• Les navigations imbriquées

Atelier :

• Créer un menu dynamique

11. GERER L'ETAT DE SON APPLICATION AVEC PINIA

• Introduction à Pinia
• Installation et mise en place de Pinia
• Création du store
• Définition et accès a l’état
• Définition et accès aux actions
• Mutualiser les accès avec les getters
• Gérer des mutations asynchrones avec les actions

Atelier :

• Créez un store avec Pinia pour gérer l'état global d’une application

APRÈS LA SESSION

Retrouvez sur le Learning Hub ib :

• Des vidéocasts pour revenir sur les points clés de la formation
• Des vidéos-tutos pour vous accompagner dans la mise en œuvre de vos acquis

LES PLUS DE LA FORMATION

• La formation permet aux participants de configurer, tester et structurer des projets Vue.js avec les API Composition et Option, en utilisant des Single File Components.
• Toutes nos formations sont animées par des consultants-formateurs expérimentés et reconnus par leurs pairs.
• Répartition théorie/pratique : 45% / 55%
• Cette formation se compose d’une alternance d’apports théoriques, de travaux pratiques, de démonstrations, de phases d’échanges entre participants et de synthèses de la part du formateur.