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

Overview

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

Apprends les concepts fondamentaux de Vue.js, le framework JavaScript moderne qui permet de créer des applications et des interfaces frontales à partir de zéro. Avec des exemples concis, pratiques et clairs, ce livre guide pas à pas les développeurs web à travers les outils et les bibliothèques de l'écosystème Vue.js et leur montre comment créer des applications complètes pour des projets web du monde réel.

Tu apprendras à gérer la communication des données entre les composants avec l'architecture Pinia, à développer un système de routage gérable pour un projet frontal afin de contrôler le flux de l'application, et à produire des effets d'animation de base pour créer une meilleure expérience utilisateur.

Ce livre te montre également comment :

Créer des systèmes de composants réutilisables et légers à l'aide de Vue.js.
Apporter de la réactivité à ton application statique existante.
Mettre en place un projet à l'aide de Vite.js, un outil de construction pour la gestion du code des projets frontaux.
Construire un système de gestion d'état interactif pour une application frontale avec Pinia
Connecter des données externes du serveur à ton application Vue
Contrôler le flux de l'application avec un routage statique et dynamique en utilisant Vue Router
Teste entièrement ton application à l'aide de Vitest et Playwright