Recherche avancée
Par formation
Par date
Par ville
logo HUB Formation
Organisme de Formation
aux Technologies et métiers de L'informatique
La pédagogie au service de la technologie
Accueil > Vue.js

Vue.js

Des bases solides pour développer des applications avec Vue.js

Vue.js (aussi appelé plus simplement Vue), est un framework JavaScript open-source utilisé pour construire des interfaces utilisateur.

Par son pragmatisme, sa puissance et sa versatilité, Vue.js s’est rapidement imposé comme un framework web majeur.

Objectifs

  • Maîtriser les concepts d’architecture clé de Vue.js
  • Développer l’interface graphique d’applications web ou de Single Page Application complètes avec Vue.js
  • Mettre en oeuvre les outils de développement spécifiques à Vue.js
  • Mettre en oeuvre les plugins Vue.js majeurs

Public

  • Développeurs, intégrateurs, architectes logiciel, chefs de projet technique

Prérequis

  • Connaissances de base en développement logiciel
  • Connaissances du langage HTML et CSS
  • Avoir suivi ou avoir des connaissances équivalentes aux cours:
    • JavaScript: les fondamentaux du langage
    • JavaScript: développer des applications web

Programme de la formation

Introduction à Vue.js

  • Principes et philosophie de Vue.js
  • Comparaison avec les autres frameworks majeurs
  • Roadmap
  • Installer Vue.js
  • Ateliers:  Installation de Vue.js, Quick win: prise en main de Vue.js

Core Library

  • L’instance de Vue, son cycle de vie et ses propriétés $
  • Le système de réactivité
  • Le système de template et les interpolations
  • Les directives
  • Ateliers:
    • Mise en oeuvre des propriétés réactives
    • Utilisation des directives: rendus conditionnels, listes, évènements, formulaires, style
    • Réagir au cycle de vie de l’instance Vue

Les composants

  • Définition d’un composant Vue
  • Enregistrement des composants
  • Props
  • Template, slots
  • Organisation arborescente et communication entre composants
  • Composants dynamiques
  • Animations et transitions
  • Ateliers: Création d’une vue unique constituée de plusieurs composants personnalisés

Réutilisabilité et composition

  • Mixins
  • Filtres
  • Plugins
  • Ateliers: Création et utilisation de mixins, filtres et plugins

Outillage

  • Vetur, client VSCode
  • Devtools, plugin pour navigateur
  • Vue CLI, RAD console
  • TypeScript
  • Ateliers: Mise en place d’un environnement de développement complet

Single View Components

  • Introduction aux Single File Components
  • Les différentes manières de créer des SFC
  • Ateliers: Création de Single File Component

Vue Router

  • Principes de Vue Routeur
  • Installation de Vue Routeur
  • Accès au routeur
  • Fonctionnalités du routeur: matching de route dynamique, routes imbriqués, navigation programmatique,…
  • Gardes de navigation
  • Ateliers: Création d’une Single Page Application avec Vue Routeur

Vuex

  • Architecture de Vuex et State management pattern
  • Installation de Vuex
  • Mettre en oeuvre Vuex
  • Librairies alternatives
  • Ateliers: Gestion centralisée de l’état d’une application avec Vuex