Ferme la recherche

Vue.js - avancé

Descriptif

Durée de la formation

Durée 21 heures
En centre 21 heures

Session

du 05 oct. 2020 au 12 oct. 2020  - Paris - 12ème (75)
+ autres sessions
du 05 oct. 2020 au 12 oct. 2020  - Paris - 12ème (75)
du 16 nov. 2020 au 18 nov. 2020  - Paris - 12ème (75)

Objectif de la formation

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

Description de la formation

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

Conditions d'accès

Connaissances de HTML et CSS
Une bonne connaissance de Javascript
Avoir développé des projets avec Vue.js, peu importe la taille
Avoir utilisé au moins une fois des fichiers .vue
Ordinateur portable à apporter

Validation

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

Donne accès au(x) métier(s) suivant(s)

Etudes et developpement informatique (voir la fiche métier)

Et après la formation ?

Retour à l'emploi des anciens stagiaires

CORRECT

Conseils
Les questions à poser avant de choisir un centre de formation
  • Quels sont les profils des anciens stagiaires (niveau de formation, expérience professionnelle) ?
  • Est-il possible de visiter le centre ?
  • Quel type de public accueillez-vous en formation (salariés, demandeurs d’emploi, particuliers) ?
  • Peut-on obtenir une liste de ces anciens stagiaires pour les interroger sur cette formation ?
  • Comment aidez-vous les stagiaires à trouver un emploi ?

Human Coders

Lieu de formation

Salle Villa Lemons
5 Impasse Mousset
Paris - 12ème

Calculez votre itinéraire

Centre de formation

Human Coders
17 Rue Galilée
75016, Paris 16e

Toutes les formations et avis pour Human Coders