Introduction au composant Teleport
Objectifs
L'objectif principal de cette vidéo est d'enseigner l'utilisation du composant Teleport de Vue JS 3 pour déplacer une partie du modèle d'un composant vers une autre localisation dans le DOM.
Résumé
Découvrez comment utiliser le composant Teleport dans Vue JS 3 pour déplacer des éléments du DOM.
Description
En règle générale, les applications créées avec Vue JS consistent en un ensemble de composants imbriqués. Chaque composant comporte des comportements et des méthodes associées. L'application prend forme dans une arborescence complexe de composants. Mais il est parfois plus cohérent de déplacer une partie du modèle, par exemple vers la racine de l'application ou même hors de la balise contrôlée par Vue JS.
Vue JS 3 introduit un composant spécifique, Teleport, qui permet de réaliser cette opération. Dans cette leçon, nous allons examiner une application simple contenant un seul composant nommé bonjour. Ce composant inclut deux paragraphes dans son template. Nous apprendrons à déplacer le deuxième paragraphe vers la fin du body à l'aide de Teleport.
Nous discuterons également de l'attribut disabled de Teleport, qui permet de contrôler dynamiquement le déplacement du contenu via des propriétés du modèle. Un exemple détaillé avec un bouton changeant la valeur de la propriété démontrera cette fonctionnalité.
Questions fréquentes
Programme détaillé
Module 1 - Premiers pas en Vue3
Module 2 - Les composants Vue JS
Module 3 - Les applications SPA (Single Page Applications)
Module 4 - L'interface en ligne de commande Vue-Cli
Module 5 - Le gestionnaire d'état Vuex
Module 6 - Le gestionnaire d'état Pinia
Module 7 - Persistance des données avec Firebase
Module 8 - Plus loin avec Vue.js 3
