Formation Vue.js

Formation Vue.js

Catégories :
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

Développeur et formateur Web Open source et CMS

Développeur et formateur Java

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.

Total number of students in course: