Formation Vue.js
Vue.js est un framework de développement front-end JavaScript open-source qui vise à faciliter la création d'applications web. Il a été créé en 2014 par Evan You, un développeur web formé à Google. Vue.js s'inspire de frameworks tels que AngularJS et React, mais se distingue par sa légèreté et sa simplicité d'utilisation. Il est particulièrement apprécié pour son approche "progressive", qui permet de l'utiliser de manière progressive dans une application existante, plutôt que de tout refaire depuis le début. Vue.js se compose principalement de trois éléments : un moteur de template pour la création de l'interface utilisateur, un mécanisme de data binding pour synchroniser l'interface avec les données, et un système de gestion de l'état de l'application.
Objectifs pédagogiques
- Maitriser l’environnement du développeur JS
- Comprendre les principes clés de Vue.js
- Savoir développer une SPA avec Vue.js
- Connaître les outils indispensables au développement d'applications web dynamiques avec Vue.js
- Appliquer les bonnes pratiques à un projet Vue.js
Pré-requis
- Avoir une bonne connaissance pratique de HTML
- Maîtrise et de JavaScript (ES5 minimum)
Public
- Développeurs
- Chefs de projets
Programme
Jour 1
Rappels sur JavaScript
- Les types et variables
- Les fonctions
- Le modèle asynchrone
- La programmation orienté objet
- ECMAScript 6 à ECMAScript Next
Introduction à Vue.js
- Création d'un projet avec Vue CLI
- Monter une application dans le DOM
- Reactive Rendering
- Vue Devtools pour débogguer
Syntaxe de template
- Interpolation
- Rendu conditionnel avec v-if
- Boucles avec v-for
- Réagir aux événements avec v-bind
- Les propriétés calculées
- Les classes conditionnelles
- Two-way binding avec v-model
Jour 2
Composants Vue.js
- Quand créer un composant Vue.js ?
- Récupérer les props
- Créer et manipuler le state via des méthodes
- Emettre des événements et des données associées au parent
- Echanger avec le serveur avec axios
- Refactoriser son code avec les fichiers .vue
Vue Router
- Créer des routes et des liens dans une Single Page Application
- Passer des paramètres
- Imbriquer les routes
- Sécuriser les accès avec les Guards
- Intercepter les erreurs 404 avec les Wildcards
Jour 3
VueX
- Création d’un store VueX
- Accéder au state avec les getters functions
- Modifier le state avec les mutations
- Utiliser Vue Tools pour débogguer
- Gérer le code asynchrone avec les actions
Vue.js Avancé
- Utilisation des slots
- Le JSX pour certains composants
- Render Props
- Composants dynamiques
- Composants Asynchrones
Méthodes mobilisées
- Un formateur validé par nos équipes techniques et pédagogiques sera présent pendant toute la durée de la formation
- Pour les formations en présentiel, une salle de formation sera mise à disposition et équipée d'ordinateurs portables, d'un accès Wi-Fi, d'un projecteur et d'un tableau blanc. En distanciel la session sera suivie sur Zoom ou autre outil de visioconférence sur demande (Teams, Webex, Google Meet...).
- Un support de cours en version numérique sera remis à chaque participant
Modalités d’évaluation
- Questions orales ou écrites (QCM)
- Exercices pratiques
- Auto-positionnement en amont et aval de la formation