Objectifs

• Créer des interface utilisateur réactives
• Ajouter des fonctionnalités à un projet Web existant
• Créer des applications Web SPA (monopage)
• Créer des applications pour mobiles (Android et iOS)
• Acquérir toutes les bases nécessaires pour bien programmer en Vue js 3
• Apprendre à hiérarchiser une application à l'aide de composants
• Utiliser l'interface en ligne de commande Vue-Cli (création d'applications, render methods, JSX, composants fonctionnels).
• Faciliter la communication entre composants avec le gestionnaire d'état Vuex, ou avec des observable.
• Utiliser l'API de composition pour faciliter la communication entre les composants des applications de grande envergure
• Créer des plugins pour Vue JS
• Utiliser des mixins et des directives personnalisées
• Déplacer le modèle des composants avec teleport

Public

Programmeurs JavaScript qui veulent apprendre à utiliser Vue JS 3

Pré-requis

Connaissances en HTML5, en CSS et en JavaScript ES6 alias TypeScript pour être à l'aise dans cette formation.

Post-Formation

Méthodes

Formation basée sur l'apprentissage

Programme

Principes clés de Vue.js

    Préparation de l'environnement de développement
    Le modèle MVVM de Vue.js
    Un premier projet Vue.js
    Un deuxième exemple
    Propriétés calculés
    Data bindin
    innerHTML et nœud texte
    Binding bidirectionnel
    Utilisation conjointe des directives v-model et v-bind
    Gestion événementielle
    L'objet $event dans la gestion évènementielle
    Les fonctions stopPropagation() et preventDefault() de l'objet $event
    Suffixes stop et prevent de Vue
    La directive v-for
    Arguments dynamiques
    Directive v-for pour parcourir des objets JSON
    Gestion des évènements clavier
    La directive v-cloak
    La directive v-once
    Classes conditionnelles
    Gestion des styles inline
    Afficher du code HTML conditionnellement
    Super challenge - Partie 1
    Super challenge - Partie 2
    Super challenge - Partie 3

Les Composants Vue JS

    Introduction aux composants Vue JS
    Un premier composant local
    Ajouter des données dans un composant
    Ajouter des méthodes dans un composant
    Passer des données aux composants enfants avec des props
    Accès à une prop dans le modèle du composant
    Passer des données de l'application aux composants enfants
    Custom-events - Envoi de messages au parent par un composant avec $emit
    Lifecycle Hooks
    Organiser une application en hiérarchie de composants
    Passer des données à un composant avec des slots
    Slots nommés
    Slots avec portée (scoped slots)
    Filtres
    Observateurs (watchers)
    Requêtes asynchrones dans un observateur
    Animations et transitions en JavaScript
    Transitions d'entrée et de sortie avec VueJS
    Transitions d'entrée et de sortie non simultanées
    Transitions entre éléments
    Transitions de listes
    Transitions d'entrée et de sortie avec animate.css
    Animations en JavaScript

Les Applications SPA

    Création d'une application SPA avec vue-router
    Indicateurs de navigation - Vue Router Navigation Guards
    Routage – Transition entre les pages    

L'interface en ligne de commande Vue-Cli

    Premiers pas avec Vue-Cli
    Architecture de l'application
    Création et modification d'une application avec Vue-Cli
    Une deuxième application avec Vue-Cli
    Fonctions de rendu (Render Functions)
    Templates vs render functions & JSX
    Composants fonctionnels
    Utilisation des paramètres props et context

Le Gestionnaire d'état Vuex

    Premiers pas avec Vuex
    Accès aux méthodes du store dans les composants
    Accès à l'état du store dans les composants
    L'option plugins de Vuex
    Alternative à Vuex
    Vuex et les formulaires
    Validation d'un formulaire dans VueJS

Plus loin avec Vue.js

    Mixins
    Mixin global
    Plugins
    Directives personnalisées
    Rendre son code robuste grâce aux props typées
    Développement d'applications mobiles
    Le composant Teleport
    L'API de composition
    Deuxième approche – Utilisation de la fonction reactive()
    Troisième approche – Utilisation de la fonction computed()
    Quatrième approche – Externalisation du calcul réactif
    Vue 3 et TypeScript

Environnement

Linux, Windows

Mot-clés

TypeScript, javascript, Framework, MVVM, NodeJS