Vue.js

Développer une application web avec Vue.js

  • Filière :

    Développement logiciel

  • Sous-filière :

    Technos Web (PHP, JS...)

  • Référence

    DW-VUE

  • Durée

    3 jours (21 h)

  • Prix unitaire HT

    1 950 € HT

Objectifs pédagogiques

  • Comprendre les principes de VueJS
  • Savoir choisir les briques utiles à une SPA
  • Être capable de développer une SPA avec VueJS

Public cible

  • developpeurs

Pré-requis

Bonne connaissance de JavaScript

Programme de la formation

Avant de commencer

  • ECMAScript
  • let et const remplacent var
  • Arrow functions (fonctions lambda)
  • Templates (gabarits)
  • Objets littéraux
  • Clonage d’objets
  • Symboles
  • Registre des symboles
  • Collections et dictionnaires
  • Spread operator
  • for … of
  • Paramètres de fonctions par défaut
  • Destructuring – Affectation par décomposition
  • Promises (promesses)
  • Babel et Webpack
  • Le transpileur Babel
  • Le module bundler Webpack

Premiers pas avec Vue.js

  • Principes clés de Vue.js
  • Roadmap des prochaines versions
  • Préparation de l’environnement de développement
  • Le squelette de départ
  • Installation d’un serveur Web avec NPM
  • Le modèle MVVM de Vue.js
  • Un premier projet Vue.js
  • Propriétés calculées
  • computed vs methods
  • Data binding
  • Noeud texte
  • Installer Vue.js Devtools dans Chrome
  • Binding bidirectionnel
  • Utilisation conjointe des directives v-model et v-bind
  • La directive v-html
  • Gestion évènementielle
  • L’objet $event dans la gestion évènementielle
  • Les fonctions preventDefault() et stopPropagation() de l’objet $event
  • Suffixes stop et prevent de Vue
  • Affichage des langages dans une liste à puces
  • Deux paramètres dans la directive v-for
  • Arguments dynamiques
  • Abréviations
  • Directive v-for pour parcourir des objets JSON
  • Gestion des évènements clavier
  • La directive v-cloak
  • La directive v-once
  • Classes conditionnelles
  • Gestion des styles inline
  • Afficher du code HTML conditionnellement
  • Mise en forme de l’affichage avec Bootstrap

Les composants Vue.js

  • Composant global
  • Un premier composant global
  • Un premier composant local
  • Ajouter des données dans un composant
  • Ajouter des méthodes dans un composant
  • Passer des données aux composants enfants avec des props
  • Accès à une prop dans la propriété data du modèle
  • Passer des données de la Vue aux composants enfants
  • Local vs global
  • Custom-events – Envoi de messages au parent par un composant avec $emit
  • Lifecycle Hooks
  • Organiser une application en hiérarchie de composants
  • Passer des données à un composant avec des slots (Slots simples, nommés, avec portée)
  • Filtres (locaux et globaux)
  • Propriétés calculées (computed properties)
  • Observateurs (watchers)
  • Requêtes asynchrones dans un observateur
  • Animations et transitions

Les applications SPA (Single Page
Applications)

  • Création d’une application SPA avec vue-router
  • Allure du lien actif
  • Indicateurs de navigation – Vue Router Navigation Guards
  • Indicateurs de navigation globaux
  • Indicateurs de navigation par route
  • Indicateurs de navigation par composant
  • Routage – Transition entre les pages

L’interface en ligne de commande Vue-Cli

  • L’outil Vue-Cli
  • Architecture de l’application
  • Les fichiers .vue
  • App.vue
  • Main.js
  • components/HelloWorld.vue
  • Création et modification d’une application avec Vue-Cli
  • Une deuxième application avec Vue-Cli
  • Mise en forme des données avec Bootstrap
  • Fonctions de rendu (Render Methods)
  • Templates vs render functions & JSX
  • Vue-Cli et JSX
  • Installation de Vue-Cli 3 et de Sass-loader
  • Création d’un projet JSX
  • Composants fonctionnels
  • Plusieurs paramètres dans la fonction render()
  • Transmission des évènements dans un composant fonctionnel

Le gestionnaire d’état Vuex

  • Installation de Vuex
  • Une première application Vuex
  • Accès aux méthodes du store dans les composants
  • Accès à l’état du store dans les composants
  • L’option plugins de Vuex
  • Alternative à Vuex
  • Vuex et les formulaires
  • Validation d’un formulaire dans VueJS

Plus loin avec Vue.js

  • Mixins (locaux, globaux)
  • Plugins
  • Directives personnalisées – Un premier exemple
  • Directive personnalisée avec arguments
  • Rendre son code robuste grâce aux Prop typées
  • NuxtJS
  • test.vue
  • Développement d’applications mobiles

Qualité

Cette formation est accessible aux personnes en situation de handicap, nous contacter en cas de besoin d’informations complémentaires.

Programme mis à jour le