Formation VUE.JS Vue.js Initiation
Objectifs
Maîtriser l’environnement de travail, créer une instance, utiliser des méthodes et lire les données.
Utiliser le data-binding, les directives comme v-on, les Events Modifiers et les Keys Modifiers.
Installer Vue CLI, créer et importer des composants, et utiliser les Props et les lifecycle hooks.
Créer des formulaires simples, gérer les checkbox et les Select Box, et envoyer des données.
Créer une to-do-list et une application météo avec Vue.js.
Configurer le routing, définir les chemins dynamiques et les paramètres des routes, et créer un système de blog.
Pré-requis
Participants
Programme de formation
INTRODUCTION VUE.JS
Présentation du Framework Vue.js
Introduction et ressources
DECOUVERTE DES BASES DE VUE.JS
Mise en place de l'environnement de travail
Créer une instance
Utiliser des méthodes
Lire les données
Le data-binding
La directive "v-on"
Les "Events Modifiers"
Les "Keys Modifiers"
V-model pour lier les inputs
Insérer de l'HTML brut
Utiliser "Computed"
Utiliser "Watch"
Les syntaxes raccourcis
Réaliser un "toggle" en CSS avec Vue
Utiliser du CSS dans les templates
Inline style CSS
Les conditions
Faire un rendu conditionnel
Réaliser une boucle "v-for"
Double boucle
Les instances multiples et $mount
Introduction aux composants
DEVELOPPEMENT AVEC LES COMPOSANTS ET VUE CLI
Installation avec le Vue CLI
Définition des fichiers
Trucs et astuces sans "syntax highlighting"
Créer et importer un composant
CSS dans fichier séparé
Les Props
Utiliser les Props par l'enfant
Validation des Props
Utiliser un Framework CSS
Valeurs primitives VS Refs
Envoyer des données enfant | parents
Les bus à événements
Les "lifecycle hooks" ou "lifecycle methods"
Les Slots
Création d'un système d'onglets
Composants dynamiques
Une fenêtre modale Vue.js
LES FORMULAIRES
Créer un formulaire simple avec des inputs
Trucs et astuces formulaire
Gérer les checkbox
Gérer les Select Box
Envoyer les données
CRÉER UNE TO-DO-LIST
Projet : Création d'une to-do-list
Ressources
LE ROUTING AVEC VUE.JS
Configuration
Définition Hash / History
Les liens
Chemin dynamique
Les paramètres des routes
Projet : Création système de blog
Ressources projet
PROJET : CRÉER UNE APPLICATION METEO AVEC VUE.JS
Configuration
Mise en place générale + template
Appel de l'API
Modèle logique