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