Vue.JS

Cours de formation en ligne sur Google Meet + Cours au format PDF

25.00$

Add to Wishlist
Add to Wishlist
Compare
Catégorie :

Cette formation a pour objectif de vous apprendre à créer une application Web dynamique et performante avec le framework Vue.js 3.

Dans cette formation Vue.js 3, vous découvrirez par la pratique les bases de Vue.js et son environnement de développement. Le projet fil rouge consistant à créer un annuaire de films vous permettra d’aborder toutes les notions clés du framework et de les mettre vous-même en application.

La formation s’adresse à toute personne souhaitant découvrir ce framework et ayant des notions en JavaScript, HTML et CSS.
Vous ressortirez de cette formation Vue.js avec une vision nouvelle sur ce que peut être une application web, que vous soyez habitué à développer en JavaScript pur ou avec des librairies comme jQuery.

 

Les objectifs

  • Comprendre les caractéristiques d’une Single Page App
  • Découvrir la philosophie et le fonctionnement du framework Vue.js
  • Prototyper une application web avec le framework progressif Vue.js
  • Savoir utiliser les outils de développements Vue.js dans un navigateur, un IDE et un terminal
  • Réutiliser du code grâce aux composants

Pré-requis

  • Minimum d’expérience avec JavaScript, HTML et CSS
  • Ordinateur portable à apporter

Le programme de la formation Vue.js

chapitre 1: une application web simple avec Vue

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
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

Mises en pratique avec un annuaire de films :
– Listing d’éléments d’un catalogue
– Ajouter, supprimer et éditer les éléments d’une liste
– Ajout de filtres par catégories

chapitre 2 : une application faite de composants

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

Mises en pratique – Utiliser 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 ?

Mise en pratique : migrer le projet vers le CLI

chapitre 3 : routeur, plugins et API

Extensions
  • Mixins
  • Plugins

Mise en pratique : utiliser un plugin

Cycle de vie

Mise en pratique : manipuler de la donnée distante

Routing avec vue-router
  • Vue Router
    • Routes
    • Modes
    • Lien
    • La vue principale

Mise en pratique : mise en place d’un routeur dans l’annuaire

Bonus

En fonction des profils des stagiaires, et du temps restants, les notions suivantes pourront être abordées.

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

Mise en pratique : 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



Produits apparentés