Vue.js

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