Formation : Vue.js 3 – Développement d’applications Web

Développer une application Single Page App (SPA) complète avec le Framework JavaScript Vue.js

 

  • Principes fondamentaux de Vue.js
  • Comparaison avec d’autres Framework (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
  • 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
  • Les données du composants (propriété data de l’API Option)
  • Introduction au Reactive API de l’API
  • Composition : 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…)
  • 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

 

  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Introduction à Pinia
  • Installation et mise en place de Pinia
  • Création du store
  • Définition et accès à 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éer un store avec Pinia pour gérer l’état global d’une application

Durée : 16h
Horaires : soirs / week-ends
Groupes de 5 à 10 personnes

Contacts
Localisation
Nous suivre

S'inscrire

Formation Développement Web avec HTML5, CSS3, JavaScript, PHP et MySQL