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

Préface

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

Le framework JavaScript joue un rôle important dans le développement moderne de frontend web. Lors du développement de projets Web, les entreprises choisissent un cadre pour diverses raisons, notamment la qualité du produit final, le coût du développement, la norme de codage et la facilité de développement. Par conséquent, apprendre à travailler avec un framework JavaScript, tel que Vue, est essentiel pour tout développeur web moderne (ou développeur frontend ou développeur full stack).

Ce livre s'adresse aux programmeurs qui souhaitent apprendre et développer des applications Web à l'aide de la bibliothèque Vue, en JavaScript et TypeScript, de bout en bout. Il se concentre uniquement sur la façon dont Vue et son écosystème peuvent t'aider à construire des applications Web évolutives et interactives dans le sens le plus simple et le plus confortable. Tout en couvrant les bases, nous aborderons également Vue Router et Pinia pour la gestion des états, les tests, l'animation, le déploiement et le rendu côté serveur, afin de nous assurer que tu es prêt à aller de l'avant et à commencer à développer des projets Vue complexes dès maintenant.

Ce n'est pas grave si tu n'es pas familier avec Vue ou avec le concept de DOM virtuel. Ce livre ne suppose aucune connaissance préalable de Vue ou de tout autre framework similaire. Je vais te présenter et te ...