Vue.js - avancé par Human Coders

Jour 1: Créer des Composants wrappers avec des slots
Composants
Nommage et bonnes pratiques
Props: validation, surcharge
TP Début du Moviez (plateforme de recherche de films)
Events: payloads, casing
TP Rating des films
Usage de #0x24#attrs #0x24#listeners
Two way binding
Comprendre le modifier .sync
TP Appliquer au Rating
v
- model sur les composants
Customisation
Encore plus loin avec les computed setter
Composition
Slots
Slots nommés
Slots scopés
TP Composant 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
Create Element
Les options
Passer des props
Passer des events
Modifiers
Slots
Attributs spéciaux
Slot
Ref
Key
Directives
TP Rating en render function
Redistribution de #0x24#slots et #0x24#scopedSlots
Usage de scoped slots pour de la logique
TP Reimplement vue
- promised
Autres usages
Vue
- virtual
- scroller
Vue
- local
- scope
Media queries: https://github.com/flatanimals/vue
- media
- queries
3D: https://github.com/fritx/vue
- threejs
Vue canvas: https://github.com/konvajs/vue
- konva
Composants fonctionnels
Quand est ce que les utiliser
Caveats
Pas d'instance
Re rendering
Evénements
TP 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
TP simple #0x5c##0x24#t function to translate keys
Keep
- alive
Cas d'usage
Include / exclude
TP Refonte du composant de recherche avec l'api de composition
Abstraction
Réutilisation
Tests unitaires
Jest + #0x40#vue/test
- utils
Mount ou shallowMount ?
Comment aller plus vite avec les Snapshot testing
TP Tests
MovieCard
Composant Search
Mocking de plugins
Mocking du store
Mocking du router

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