Formation Vue.js

Catégories :

Web

Avis :

A propos de cette formation

VueJS est une librairie qui permet de créer des interfaces web interactives en se reposant sur le principe des composants webs. Il propose un système de data-binding réactif capable de détecter automatiquement les changements d’états du composant.

Cette formation vous aidera à concevoir des applications front-end orientées composants et facile à maîtriser.

Programme de la formation

Rappels

ECMAScript
let et const remplacent var
Arrow functions (fonctions lambda)
Templates (gabarits)
Objets littéraux
- Méthodes
- Valeurs implicites
- Noms de propriétés dynamiques
Clonage d’objets
Symboles
Registre des symboles
Collections et dictionnaires (Set et Map)
Spread operator
for … of
Paramètres de fonctions par défaut
Destructuring – Affectation par décomposition
Promises
Babel et Webpack
Le transpileur Babel
Le module bundler Webpack

Premiers pas avec Vue.js

Principes clés de Vue.js
Roadmap des prochaines versions
Préparation de l’environnement de développement
L’éditeur de code Visual Studio Code
Récupération du source/CDN de VueJS
Le squelette de départ
Installation d’un serveur Web avec NPM
Le modèle MVVM de Vue.js
Un premier projet Vue.js
Propriétés calculées
Computed vs methods
Data binding
Noeud texte
Installer Vue.js Devtools dans Google Chrome
Binding bidirectionnel
Utilisation conjointe des directives v-model et v-bind
La directive v-html
Gestion évènementielle
L’objet $event dans la gestion évènementielle
Les fonctions preventDefault() et stopPropagation() de l’objet $event
Suffixes stop et prevent de Vue
Affichage des langages dans une liste à puces
Deux paramètres dans la directive v-for
Arguments dynamiques
Abréviations
Directive v-for pour parcourir des objets JSON
Gestion des évènements clavier
La directive v-cloak
La directive v-once
Classes conditionnelles
Première étape
Gestion des évènements clavier
Afficher du code HTML conditionnellement

Les composants Vue.js

Composant global
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 la propriété data du modèle
Passer des données de la Vue aux composants enfants
Local vs global
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 o Slots simples
- Slots nommés
- Slots nommés
- Slots avec portée (scoped slots)
Filtres
- Filtres définis localement
- Filtres définis globalement
Propriétés calculées (computed properties)
Observateurs (watchers)
Requêtes asynchrones dans un observateur
Animations et transitions
Transitions d’entrée et de sortie
- Avec VueJS
- Avec des classes CSS
- Avec animate.css
- Avec JavaScript
- Transitions d’entrée et de sortie non simultanées
- Transitions entre éléments
- Transitions de listes

Les applications SPA (Single Page Applications)

Création d’une application SPA avec vue-router
Allure du lien actif
Indicateurs de navigation o Indicateurs de navigation globaux
- Indicateurs de navigation par route
- Indicateurs de navigation par composant
Routage – Transition entre les pages

L'interface en ligne de commande Vue-Cli

L’outil Vue-Cli
Architecture de l’application
Les fichiers .vue
Création et modification d’une application avec Vue-Cli
Fonctions de rendu (Render Methods)
Templates vs render functions & JSX
Vue-Cli et JSX
- Installation de Vue-Cli 3 et de Sass-loader
- Création d’un projet JSX
Composants fonctionnels
Plusieurs paramètres dans la fonction render()
Transmission des évènements dans un composant fonctionnel

Le gestionnaire d'état Vuex

Installation de Vuex
Une première application 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 locaux et globaux
Plugins
Directives personnalisées
Support de TypeScript dans Vue-Cli 3
Rendre son code robuste grâce aux Prop typées
Compilation et optimisation des performances
Server-side rendering (SSR)
NuxtJS
Développement d’applications mobiles

Autres formateurs

Alexandre

Développeur et formateur Web Open source et CMS

Denis

Développeur et formateur Java

Evan

Lead-développeur .NET et formateur en gestion de projet

Avis

Avis et commentaires extraits des évaluations remplies par chaque stagiaire en fin de formation.

0 Rated 0 out of 0 Ratings

5 stars 0

4 stars 0

3 stars 0

2 stars 0

1 stars 0

Members

Lorem Ipsn gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auci elit consequat ipsutis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit.