book

Apprendre Vue

by Maya Shavin

November 2024

Intermediate to advanced

350 pages

8h 36m

French

O'Reilly Media, Inc.

Book available

Read now

Unlock full access

Conventions utilisées dans ce livreUtiliser des exemples de codeApprentissage en ligne O'ReillyComment nous contacterRemerciements
Qu'est-ce que Vue.js ?Les avantages de Vue dans le développement web moderneInstallation de Node.jsNPMFilOutils pour les développeurs VueVite.js comme outil de gestion des constructeursCréer une nouvelle application VueStructure du dépôt de fichiersRésumé
DOM virtuel sous le capotLe problème de la mise à jour de la mise en pageQu'est-ce que le DOM virtuel ?Comment fonctionne le DOM virtuel dans Vue ?L'instance de l'application Vue et l'API des optionsExplorer l'API des optionsLa syntaxe du modèleCréation d'un état local avec des propriétés de donnéesComment fonctionne la réactivité dans Vue ?Reliure à deux voies avec modèle en VUtilisation du modificateur v-model.lazyLier des données réactives et transmettre des données accessoires avec v-bindLiaison avec les attributs de classe et de styleItération de la collecte de données à l'aide de v-forItérer à travers les propriétés d'un objetRendre la liaison de l'élément unique avec l'attribut KeyAjouter un récepteur d'événements aux éléments avec v-onTraiter les événements avec les modificateurs d'événements v-onDétecter les événements du clavier avec les modificateurs de code de toucheÉléments de rendu conditionnel avec v-if, v-else et v-else-ifAffichage conditionnel d'éléments avec v-showAffichage dynamique du code HTML avec v-htmlAffichage du contenu textuel avec v-textOptimiser les rendus avec v-once et v-memoEnregistrer un composant globalementRésumé
Vue Structure des composants à fichier uniqueUtilisation de defineComponent() pour la prise en charge de Typescript.Crochets de cycle de vie des composantsconfigurationavant la créationcrééavant le montagemontésavant la mise à jourmis à jouravant le démontagenon montéMéthodesPropriétés calculéesVeilleursObserver les changements dans les propriétés imbriquéesUtilisation de la méthode this.$watch()Le pouvoir des machines à sousUtilisation de slots nommés avec Template Tag et v-slot AttributeComprendre RefsPartage de la configuration des composants avec les mixinsComposants de stylisme à portée de mainAppliquer une feuille de style CSS à un composant enfant dans les styles scopés.Appliquer des styles étendus au contenu des fentesAccéder à la valeur des données d'un composant dans une balise de style avec la pseudo-classe v-bind()Styliser les composants avec les modules CSSRésumé
Composants imbriqués et flux de données dans VueUtilisation d'accessoires pour transmettre des données aux composants enfantsDéclarer des types Prop avec validation et valeurs par défautDéclarer des éléments avec une vérification de type personnaliséeDéclaration des accessoires à l'aide de defineProps() et de withDefaults()Communication entre les composants avec des événements personnalisésDéfinition d'événements personnalisés à l'aide de defineEmits()Communiquer entre les composants avec le modèle provide/injectUtilisation de provide pour transmettre des donnéesUtiliser inject pour recevoir des donnéesAPI de téléportationMise en œuvre d'une modale avec Teleport et l'élément <dialog>.Problème de rendu en utilisant la téléportationRésumé
Configurer des composants avec l'API de compositionManipuler les données avec ref() et reactive()Utilisation de ref()Utilisation de reactive()Utilisation des crochets de cycle de vieComprendre les observateurs dans l'API de compositionUtilisation de computed()Création de tes composables réutilisablesRésumé
Qu'est-ce qu'Axios ?Installation d'AxiosCharger des données avec Lifecycle Hooks et AxiosRequêtes de données asynchrones en temps réel : le défiCréation d'un composant Fetch réutilisableConnecte ton application à une base de données externeRésumé
La fonction Render et JSXUtilisation de la fonction de renduUtilisation de la fonction h pour créer un VNodeÉcriture de JavaScript XML dans la fonction de renduComposante fonctionnelleDéfinir les props et les emits pour les composants fonctionnelsAjout de fonctionnalités personnalisées de manière globale avec les plugins Vue.Rendu dynamique à l'aide de la balise <component>.Maintenir l'instance du composant en vie avec <keep-alive>Résumé
Qu'est-ce que le routage ?Utilisation de Vue RouterInstallation de Vue RouterDéfinir les itinérairesCréation d'une instance de routeurBrancher l'instance du routeur dans l'application VueRendre la page actuelle avec le composant RouterViewConstruis une barre de navigation avec le composant RouterLinkTransmettre des données entre les itinérairesDécouplage des paramètres de l'itinéraire à l'aide d'accessoiresComprendre les protections de navigationGarde de navigation globaleGarde-corps de navigation au niveau de l'itinéraireProtections de routeur au niveau des composantsCréation d'itinéraires imbriquésCréer des itinéraires dynamiquesAller en arrière et en avant avec l'instance du routeur.Traitement des itinéraires inconnusRésumé
Comprendre la gestion des états dans VueComprendre PiniaCréation d'un magasin de pizzas pour Pizza HouseCréation d'un magasin de paniers pour Pizza HouseUtilisation de la boutique en ligne dans un composantAjouter des articles au panier à partir de la galerie des pizzasAfficher les articles du panier avec des actionsRetirer des articles du panierTest unitaire Pinia StoresAbonnement Effets secondaires sur les changements de magasinRésumé

Comprendre les transitions et les animations CSSComposant de transition dans Vue.jsUtilisation d'attributs de classe de transition personnalisésAjout d'un effet de transition sur le rendu initial avec appearTransition de construction pour un groupe d'élémentsCréer des transitions d'itinérairesUtilisation des événements de transition pour contrôler l'animationRésumé
Introduction aux tests unitaires et aux tests E2EVitest comme outil de test unitaireConfiguration de Vitest à l'aide des paramètres et du fichier de configurationRédiger ton premier testTester les produits composables qui ne font pas partie du cycle de vieTester les composables avec Lifecycle HookTester les composants à l'aide des outils de test de VueTester les interactions et les événements d'un composantUtiliser Vitest avec une interface graphiqueUtilisation de Vitest avec un Coverage RunnerTest de bout en bout avec PlaywrightJSDébogage des tests E2E à l'aide de l'extension de test Playwright pour VSCodeRésumé
CI/CD dans le développement de logicielsIntégration continueLivraison continueDéploiement continuPipeline CI/CD avec les actions GitHubDéploiement continu avec NetlifyDéploiement avec Netlify CLIRésumé
Rendu côté client dans VueRendu côté serveur (SSR)Rendu côté serveur avec Nuxt.JsGénérateur statique latéral (SSG)Dernières paroles

Content preview from Apprendre Vue

Chapitre 5. API de composition

Cet ouvrage a été traduit à l'aide de l'IA. Tes réactions et tes commentaires sont les bienvenus : translation-feedback@oreilly.com

Dans le chapitre précédent, tu as appris à composer des composants Vue à l'aide de l'API Options classique. Bien qu'il s'agisse de l'API la plus courante pour composer des composants Vue depuis Vue 2, l'utilisation de l'API Options peut entraîner une complexité inutile du code, une illisibilité pour le code de composants volumineux et une réutilisation de la logique entre eux. Pour de tels cas d'utilisation, ce chapitre présente une approche alternative pour composer des composants Vue, l'API de composition.

Dans ce chapitre, nous allons explorer les différents crochets de composition pour créer un élément fonctionnel avec état dans Vue. Nous apprendrons également à combiner l'API Options et l'API Composition pour un meilleur contrôle réactif et pour composer nos propres composables réutilisables pour notre application.

Configuration des composants avec l'API de composition

Composer des composants à l'aide de l'API Options est une pratique courante dans Vue. Cependant, dans de nombreux cas, nous voulons réutiliser une partie de la logique du composant sans nous soucier du chevauchement des données et des méthodes comme dans les mixins.¹Il est également possible d'obtenir un composant plus lisible et mieux organisé. L'API de composition peut être utile dans de tels scénarios .

Introduite dans Vue 3.0, l'API Composition ...