AJC FORMATION : 07. Vue.js - Développement d'applications web

Introduction

• SPA et les frameworks JavaScript
• Vue.js, un framework progressif
• Data Driven Interfaces
• Ecosystème
• Réactivité basique avec l’interpolation et v-bind
• Conditionnelles
• Boucles
• Evénements

Les bases

• Instance Vue
• Templating
  • Interpolation
  • Attributs
  • Directives
  • Filtres
• Comparatif Vue vs jQuery
• v-model
  • Inputs Natifs
• Boucler sur de la donnée
• Rendering conditionnel
• Manipuler des classes
• Propriétés calculées
• Écoute d'événements

Travaux pratiques avec un annuaire : Listing d’éléments; Ajout, suppression et édition les éléments d’une liste; Ajout de filtres par catégorie

Les  Composants

• Rôle du composant dans une SPA
• Props
• Evénements
• Slots
• Composants dynamiques

Travaux pratiques : Utilisation des composants dans son application : Single File Components: Création d'un composant pour l'affichage; Faire communiquer les composants entre eux

Vue CLI

• Qu’est-ce que Vue CLI ?
• Comment l’utiliser ?

Travaux pratiques : Migration le projet vers le CLI

Extensions

• Mixins
• Plugins

Travaux pratiques : Utilisation d’un plugin

Cycle de vie

• Les différentes étapes
• Manipulation de la donnée

Mise en pratique : Manipulation de la donnée distante

Routing avec vue-router

• Vue Router
  • Routes
  • Modes
  • Lien
  • La vue principale

Travaux pratiques : Mise en place d’un routeur dans l'annuaire

Notions avancées

• Transitions visuelles
  • Les transitions CSS
  • Transitions de listes avec Vue
  • Transitions dynamiques

Travaux pratiques : Ajout d’animations dans la liste

Un state global avec Vuex

• Que est ce qu'un Store
  • Pourquoi et quand l’utiliser ?
  • Limites et alternatives
• VueX
  • State
  • Getters
  • Mutations
  • Actions
  • Modules