Formation Vue JS 2 : Reprenez le contrôle de vos interfaces

Découvrez toutes les possibilités du framework front-end Vue JS 2 dans cette formation professionnelle et complète. Créez de belles interfaces simples et évolutives.


Description de la formation

Faites une mise à jour de vos compétences front-end grâce à cette formation sur VUE JS 2.

Vue est un framework JavaScript, qui permet de créer des interfaces web ainsi que des applications web, à la fois maintenables et évolutives.

Devenu très populaire fin 2016, ce framework sorti en février 2014, a su gagner des points grâce à sa facilité d'utilisation et ses outils front-end modernes.

C'est un savant mélange d'AngularJS et de React.

Ce framework, parfois catégorisé comme une bibliothèque, a su prendre le meilleur des deux mondes en ne gardant que les bons côtés de React et AngularJS.

Il est notamment utilisé sur des gros sites tels que Gitlab, Alibaba (Amazon chinois), Carrefour, Behance, Xiaomi...

Il s'utilise seul, aussi facilement que jQuery, ou avec webpack, babeljs ou encore tout autre outil JavaScript robuste et moderne.

Grâce à sa flexibilité et son système de composant, vous pouvez l'utiliser sur un site existant ou créer une SPA (Single Page Application) complète dialoguant avec une API Rest.

 


Objectifs pédagogiques

- Comprendre l'écosystème et les bases de Vue - Afficher et manipuler des données avec une API - Comprendre comment utiliser le router et centraliser des données avec Vuex - Utiliser des plugins et composants externes - Comprendre comment mettre en place de l’authentification - Créer une version light de Google Keep

Public visé

- Développeur informatique - Architecte technique / DevOps - Intégrateur web / designer web - Manager technique

Prérequis de la formation

- Connaissances du JavaScript (notions en ES6 fortement recommandé) - Connaissances du HTML et CSS

Programme de la formation (personnalisable)

Introduction

  • Qu’est-ce que Vue ? framework, bibliothèque, comprendre cet écosystème
  • Différences entre SPA et site dynamique classique (MPA)

Les fondamentaux

  • Créer des instances et afficher des données
  • Comprendre la réactivité et les directives
  • Manipuler les classes, styles et autres attributs HTML du DOM
  • Ajouter des conditions et boucles dans le template
  • Ajouter et réagir à des événements dans le template
  • Gérer les formulaires, comprendre la directive v-model
  • Comprendre les composants et créer un composant basique
  • TP : créer un décompte à partir d’une date

Les notions avancées

  • Comprendre l’instance Vue en profondeur : les hooks
  • Comprendre la différence entre computed, methods et watch
  • Comprendre la réactivité en profondeur : les limites et travers
  • Comprendre les événements en profondeur : les modifiers
  • Comprendre le v-model en profondeur : le sucre syntaxique
  • Comprendre les composants en profondeur : validations, slots
  • Communiquer entre composants
  • Comprendre les mixins et filtres
  • Créer ses propres directives
  • Créer des transitions et animations
  • TP : créer un google keep simple

Créer une SPA grâce à Vue Router, Vuex et une API Rest

  • Comprendre comment utiliser des APIs Rest avec Vue
  • Comprendre la différence entre router front et back
  • Créer des pages avec URL fixe ou dynamique grâce à Vue Router
  • Persister et partager des données entre composants avec Vuex et le localStorage

Industrialiser son code avec Vue CLI et Webpack

  • Comprendre à quoi sert la CLI et comment l’utiliser
  • Comprendre Webpack
  • Optimiser son éditeur de code
  • Comprendre les monofichier .vue (SFC single file component)
  • Comprendre les renders functions et son rôle dans les SFC
  • Comprendre comment créer une architecture
  • Comprendre comment ajouter de l’authentification
  • Comprendre comment ajouter un framework UI
  • Connaître les plugins les plus utiles pour créer des applications web avec Vue