Vue.js - avancé

- Aborder les bonnes pratiques - Développer des composants réutilisables - Améliorer les performances de vos applications - Comprendre les render functions (Vue.js sans templates!) - Déveloper des mixins pour développer plus vite - Avoir une approche plus déclarative - Appréhender le Server Side Rendering avec Nuxt. Les programmes, pré-requis et objectifs sont régulièrement mis à jour afin d'être au plus proche des avancées de la technologie. Vous pouvez consulter la dernière version en suivant le lien internet du programme : https://www.humancoders.com/formations/vue-js-avance

Les programmes, pré-requis et objectifs sont régulièrement mis à jour afin d'être au plus proche des avancées de la technologie. Vous pouvez consulter la dernière version en suivant le lien internet du programme : https://www.humancoders.com/formations/vue-js-avance Jour 1: Créer des Composants wrappers avec des slots Composants - Nommage et bonnes pratiques - Props: validation, surcharge Mise en pratique : début du Moviez (plateforme de recherche de films) - Events: payloads, casing Mise en pratique : rating des films - Usage de $attrs $listeners - Two way binding - Comprendre le modifier .sync Mise en pratique : appliquer au Rating - v-model sur les composants - Customisation - Encore plus loin avec les computed setter - Composition - Slots - Slots nommés - Slots scopés Mises en pratique : composants de recherche - Display cards as results (scoped slots) - Responsible for fetching data - Named slot when no results - Use the v-for in slot - Usage de template - Cas pour les slots scopés - Cas pour les v-for Jour 2: Ecrire votre propre composant à base de render functions Render functions - Le Virtual DOM, createElement/h - Les composants dynamiques - Bonnes pratiques lazy loading de composants - createElement - Les options - Passer des props - Passer des events - modifiers - Slots - Attributs spéciaux - slot - ref - key - directives Mise en pratique : rating en render function - Redistribution de $slots et $scopedSlots - Usage de scoped slots pour de la logique Mise en pratique : reimplement vue-promised - Autres usages - vue-virtual-scroller - vue-local-scope - Media queries - 3D - Vue canvas avec vue-konva Composants fonctionnels - Quand est ce que les utiliser - Caveats - Pas d'instance - Re rendering - Evénements Mise en pratique : montrer la différence de performance pour MovieCard Comment marche la compilation de template Astuces pour débugger Jour 3: Tests et Composition API - Les Mixins - Pourquoi l'api de Composition est meilleur - Usage dans Vue 2.x - setup dans les composants - Accès global via Vue.prototype Mise en pratique : simple \$t function to translate keys - keep-alive - Cas d'usage - Include / exclude Mise en pratique : refonte du composant de recherche avec l'api de composition - Abstraction - Réutilisation - Tests unitaires - Jest + @vue/test-utils - mount ou shallowMount? - Comment aller plus vite avec les Snapshot testing Mises en pratique : tests - MovieCard - Composant Search - Mocking de plugins - Mocking du store - Mocking du router.

Attestation d'acquis ou de compétences;Attestation de suivi de présence

- Connaissances de HTML et CSS - Une bonne connaissance de Javascript - Avoir develope des projets avec Vue.js, peu importe la taille - Avoir utilise au moins une fois des fichiers `.vue` Les programmes, pre-requis et objectifs sont regulierement mis a jour afin d etre au plus proche des avancees de la technologie. Vous pouvez consulter la derniere version en suivant le lien internet du programme : https://www.humancoders.com/formations/vue-js-avance