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 2. Comment fonctionne Vue : Les bases

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 les outils essentiels pour construire une application Vue et tu as également créé ta première application Vue, te préparant ainsi à l'étape suivante : apprendre comment fonctionne Vue en écrivant du code Vue.

Ce chapitre te présente les concepts du modèle d'objets documentaires virtuels (DOM virtuel) et les principes fondamentaux de l'écriture d'un composant Vue avec l'API Options de Vue. Il explore également d'autres directives Vue et le mécanisme de réactivité de Vue. À la fin du chapitre, tu comprendras le fonctionnement de Vue et tu seras en mesure d'écrire et d'enregistrer un composant Vue pour l'utiliser dans ton application.

DOM virtuel sous le capot

Vue ne travaille pas directement avec le modèle d'objet de document (DOM). Au lieu de cela, il implémente son DOM virtuel pour optimiser les performances de l'application sur le site d'exécution.

Pour acquérir une solide compréhension du fonctionnement du DOM virtuel, nous commençons par le concept du DOM.

Le DOM représente le contenu du document HTML (ou XML) sur le web, sous la forme d'une structure de données arborescente en mémoire (comme le montre la figure 2-1). Il agit comme une interface de programmation qui relie la page web et le code de programmation réel (tel que JavaScript). Les balises, telles ...