Vue 3 en détails pour les débutants

1. Bienvenue dans le cours !: Hé, bienvenue dans ce cours. Ce cours va vous apprendre tout ce que vous devez savoir pour commencer avec Vue.js ainsi que toutes les fonctionnalités nouvelles et améliorées avec Vue version 3. Vous construirez ces quatre projets tout en apprenant à partir de plus de 130 leçons vidéo HD claires et organisées, chacune fournie avec des légendes et aussi le code source pour chaque étape du projet. Donc vous ne devriez pas avoir de problèmes si vous êtes coincé. Qui suis-je ? Je m'appelle Chris et je suis un développeur web du Royaume-Uni. J' ai construit mon premier site web il y a plus de 20 ans. Le web a beaucoup changé pendant ce temps, mais ma passion pour l'apprentissage et aussi l'enseignement de cela reste toujours. J' ai également utilisé Vue.js depuis les premiers jours, donc j'ai beaucoup d'expérience à la fois en utilisant pour mes propres sites Web et aussi avec l'enseignement de cela aussi. Je suis excité pour celle-là, et je te verrai en classe. 2. Ce dont vous aurez besoin pour ce cours: Pour commencer avec ce cours, il y a très peu de choses dont vous aurez besoin. Si vous regardez cette vidéo, les chances sont que vous avez déjà la plupart des choses dont vous avez besoin sont déjà configurées. Nous allons avoir besoin d'un navigateur Web et je vais utiliser Google Chrome tout au long de ce cours, mais vous pouvez utiliser n'importe quel autre navigateur majeur. Aussi pour éditer le code, nous aurons besoin d'un éditeur de texte. Je vais utiliser Visual Studio Code et vous pouvez trouver le lien juste ici. Ceci est également gratuit à utiliser aussi. S' il y a quelque chose dont nous avons besoin pendant le cours, nous le téléchargerons. Il n'y aura pas d'achats supplémentaires à faire, donc tout ce dont vous avez besoin est un désir d'apprendre Vue 3. Je vais commencer ça dans la prochaine vidéo. 3. Partagez votre travail sur Skillshare !: Lorsque vous suivez un cours, il est très important de ne pas prendre l'habitude de suivre un cours juste pour le plaisir de reprendre un autre cours. Prenez le temps de lire chaque leçon, revoir le code que vous écrivez et de réfléchir à la manière dont vous pourriez aborder ces solutions vous-même. Dans cet esprit, ce cours est basé sur des projets, ce qui vous donne l'opportunité de vraiment créer quelque chose de personnel et d'unique. Vous n'avez pas besoin de trop vous perdre et de vous éloigner de la classe Vous pouvez même prendre du recul une fois que vous avez terminé le cours et revenir et apporter des modifications au projet par la suite. Cela vous donnera vraiment une bonne chance de mettre en pratique ce que vous avez appris en classe. Pensez également à partager votre projet ici sur Skillshare. Non seulement je vais y jeter un coup d'œil, mais cela inspirera également les autres étudiants. Pour plus d'informations sur le projet de classe, rendez-vous dans l'onglet Projet et ressources, où vous pouvez non seulement télécharger votre projet, mais également voir d'autres projets de classe. Dans cet esprit, j'ai hâte de voir ce que vous créerez et téléchargerez ici sur Skillshare. 4. Qu'est-ce que Vue.js et que peut-il faire ?: À son plus fondamental Vue.js est un framework pour la construction d'interfaces utilisateur. Son travail principal est de gérer une partie de l'application de site Web avec laquelle l'utilisateur voit et interagit. Il prend certaines données et les affiche à l'utilisateur. Comme Vue est responsable de l'interface utilisateur, il a besoin de certaines données pour travailler avec. Les données qu'il reçoit peuvent venir sous n'importe quelle forme, par exemple à partir d'un serveur web, d'une API. Nous pouvons le stocker à l'intérieur de notre application et aussi à partir de l'entrée de l'utilisateur aussi. Pour les débutants, il peut être très convivial pour aller avec, seulement besoin de quelques connaissances HTML, CSS, et un peu de connaissances JavaScript. Dès que vous serez plus à l'aise avec Vue.js et pour les utilisateurs plus avancés, vous apprécierez également la rapidité et l'évolutivité de Vue. Avec un écosystème mature aussi qui étend le noyau Vue.js si nécessaire. Le noyau Vue.js lui-même est très léger et peut être utilisé du simple contrôle d'une seule partie d'un site Web, jusqu'à la gestion d'une application simple page complexe. Si vous n'êtes pas encore sûr de ce qu'est une application d'une seule page, il y en aura plus à ce sujet plus tard dans le cours. Au plus simple, imaginez si nous avions un site Web de portefeuille existant, qui a été créé avec seulement HTML et CSS. Plus loin, nous souhaiterons peut-être ajouter de nouvelles fonctionnalités ou sections à ce site, comme nos derniers tweets. Nous pourrions faire le long chemin et copier manuellement tous nos tweets dans notre fichier HTML chaque fois qu'il crée un nouveau post ou un nouveau tweet, ou nous aimerions probablement gérer cela avec l'API Twitter pour tirer dans nos messages récents automatiquement. Avec un tel cas d'utilisation, nous pourrions utiliser Vue.js pour contrôler juste une partie de notre site, ou même plusieurs parties si nous le voulions. Tout ce que nous devons faire est de lier le lien CDN Vue.js, qui est un lien vers la bibliothèque Vue. Le lien CDN est inséré dans un fichier HTML, comme avec n'importe quel autre lien CDN. Ensuite, nous pouvons accéder aux fonctionnalités Vue à partir d'un fichier JavaScript. Nous y reviendrons et essayerons très bientôt. En plus de contrôler une partie de l'interface utilisateur, Vue peut également contrôler notre application pleine page. Nous utiliserons un outil dans le prochain projet appelé la CLI Vue, qui nous permettra de créer ces applications, et comme je l'ai mentionné précédemment, nous avons besoin d'une source de données telle que certains produits et [inaudible] eux au-delà de la Vue qui peut alors les afficher à l'utilisateur de la manière que nous voulons, plus de gérer les changements de données et les mises à jour en cours de route également. 5. Présentation des modifications de Vue 3: Vue.js version 3 est une réécriture majeure. Un qui est né pour de multiples raisons. La base de code pour Vue 2 était rapide, efficace sur le plan des performances, mais il y a toujours lieu d'améliorer la conception actuelle. Menée par l'apprentissage et la découverte de nouvelles choses sur le projet, ainsi que la possibilité d'accéder maintenant aux fonctionnalités JavaScript plus récentes qui sont disponibles dans les navigateurs modernes, cette vidéo va vous donner un aperçu de certains des changements clés . Puis plus tard, lorsque nous lançons un peu plus de code Vue.JS avec une meilleure compréhension de la façon dont cela fonctionne, il y aura quelques sections plus dédiées pour nous fournir plus de détails. Peut-être que ce n'est pas ce qu'une tombe qui si une partie de cela n'a pas de sens pour le moment. Tout d'abord, je veux aborder une grosse idée fausse à propos de Vue 3. Depuis l'annonce de la nouvelle version, beaucoup de gens pensent que tout ce qu'ils savent à ce jour sur Vue est maintenant obsolète. Ce n'est pas vrai. Vous pouvez utiliser la bibliothèque Vue 3 et toujours droite applications Vue à peu près de la même manière que vous l'avez fait dans Vue 2. Beaucoup des changements ou des améliorations de performance sous le capot que le développeur n'est pas directement au courant, Vue 3 a aussi quelques fonctionnalités, mais celles-ci sont généralement supplémentaires. qui signifie que si vous avez des connaissances Vue jusqu'à présent, tout ceci est entièrement transférable. L' une des grandes améliorations de Vue version 3 est la performance. Cela a été amélioré de plusieurs façons, et l'un des éléments clés est l'utilisation d'une fonctionnalité ES6 appelée proxy. Il en résulte un système de détection des changements plus rapide et plus efficace. Il s'agit d'un élément clé de la réactivité Vue 3, qui est un processus de réaction de Vue aux changements et à la mise à jour au besoin. Par exemple, si un utilisateur a mis à jour une quantité d'article dans un panier, nous voudrions également que le prix total soit également mis à jour. C' est le processus de réaction à un changement. Dans Vue 2, toutes les données que nous avions lorsque nous téléchargeons sont automatiquement réactives, peuvent manquer certaines modifications de données, et il y a une autre partie de l'application qui s'appuie sur elle. Cette partie sera également mise à jour. Si l'utilisateur change son nom d'utilisateur, et cela a été affiché dans la section d'en-tête, il mettrait également à jour leur nom d'utilisateur automatique. l' une des mises en garde du système de réactivité Vue 2 était que si une nouvelle propriété était ajoutée à Vue.JS après le chargement de l'application, elle ne serait alors pas réactive. C' est quelque chose que les proxies ont résolu et nous les examinerons plus en détail plus tard. Réduire toute la taille du code peut également améliorer les choses aussi. Lorsque nous utilisons un framework, nous n'avons souvent pas besoin de toutes les fonctionnalités qu'il fournit. Ce qui signifie que lorsqu'une application se charge, nous pouvons télécharger du JavaScript ou des ressources supplémentaires dont nous n'avons pas besoin pour notre projet. Pour vous aider, Vue 3 est plus modulaire. Ainsi, un outillage plus moderne peut supprimer tout code inutile, mais en utilisant la taille du paquet. Une autre grande amélioration est une réécriture du DOM virtuel. Encore une fois, il y a une vidéo dédiée plus tard une fois que nous serons plus à l'aise avec Vue.JS, mais pour l'instant la mise à jour virtuelle dom signifie que vous pouvez maintenant vérifier plus efficacement quels éléments ont changé après une mise à jour. La bibliothèque Vue 2 a été écrite en JavaScript régulier. Au fil du temps, il a été réalisé qu'un projet de cette taille bénéficierait de l'introduction de types, ce qui contribuerait à réduire le risque de bogues. Même si la Vue 3 provoque être réécrit en utilisant typescript, les développeurs peuvent écrire du code même en JavaScript régulier, ou le dactylocript 2 maintenant entièrement pris en charge. Typescript était disponible dans Vue 2 met beaucoup plus profondément intégré dans Vue 3 et ne nécessite pas non plus [inaudible]. L' API de composition est probablement la fonctionnalité la plus parlée dans Vue version 3, et aussi la caractéristique qui a causé le plus de malentendus sur la façon dont Vue 3 va nous forcer à écrire des applications d'une manière complètement nouvelle. Comme mentionné précédemment, l'API de concurrence n'est pas destinée à remplacer tout ce que nous savons sur Vue jusqu'à présent. Il est destiné à être purement additif et nous donne un moyen rendre notre projet plus maintenable et réutilisable à mesure qu'ils grandissent. Nous allons plonger dans cette affaire beaucoup plus tard. En plus de cela, nous avons également quelques fonctionnalités Vue à explorer, telles que des portails, des fragments, suspense, et bien plus encore. La clé à emporter est Vue est toujours Vue, peu importe si c'est la version 2 ou 3, mais la version 3 a quelques améliorations de performance ainsi que quelques fonctionnalités supplémentaires que vous pouvez utiliser. Maintenant avoir un peu d'arrière-plan, passons à écrire du code Vue. 6. Code source du projet: Lorsque vous apprenez une nouvelle compétence et codez nos quatre projets, il y aura probablement un moment où vous serez coincé. Parfois, votre code ne fonctionnera pas, et vous ne pouvez pas repérer cette erreur. Maintenant, pour aider avec cela fourni avec le cours après chacune des conférences est le code source à chaque étape individuelle, et vous pouvez télécharger cela à partir de GitHub. A l'intérieur de GitHub et mon profil, qui est chrisdixon161, puis /vue-3-course. Ici, vous trouverez tout le code source du projet pour ce cours. Il devrait être assez facile de naviguer. En haut, nous avons les quatre premiers projets numérotés 1-4, et ceux-ci sont dans le même ordre que vous les prendrez pendant le cours. Par exemple, si vous avez collé sur le projet de portfolio, cliquez dessus, puis nous verrons dans l'ordre toutes les conférences qui vont passer par ces projets. Ils sont numérotés, donc nous avons le numéro 2, qui est le numéro de section et la vidéo 1, la section 2, la vidéo 2, puis le nom de la vidéo. Vous pouvez cliquer sur ceci, et voir le code final après cette vidéo, et aller dans n'importe lequel de ces fichiers. En plus de cela, si nous revenons à la racine de notre repo, nous avons également les fichiers de démarrage pour les quatre de notre projet. Les fichiers de démarrage vont s'assurer que nous sommes sur les mêmes numéros de version lors de la progression vous donnent un chemin fluide tout au long de ce cours, et nous allons jeter un oeil sur la façon de les configurer au fur et à mesure que nous progressons. Pour y accéder, nous devons cliquer sur ce bouton vert. Il y aura une liste déroulante, et vous pouvez télécharger ce dépôt complet sous forme de fichier ZIP. Ensuite, cela vous donnera accès à tous ces démarreurs et à tous les exemples de code aussi. Allez-y et téléchargez ceci, et placez-le quelque part pratique comme votre bureau, et nous pouvons récupérer les fichiers de démarrage lorsque nécessaire. 7. Section Intro - Premier aperçu de Vue.js: Pour lancer votre parcours d'apprentissage Vue, nous allons appliquer à un projet beaucoup de connaissances que nous apprendrons au cours de cette section. Ce projet sera relativement simple. Nous allons télécharger un HTML, démarrer un fichier, puis nous allons commencer le processus de conversion de ce fichier à utiliser Vue.js. Nous apprendrons tous les éléments fondamentaux que vous aurez besoin de connaître, tels que les événements que nous examinerons le cycle de vie de Vue, recherche de données, nous examinerons également les listes, méthodes et bien plus encore. Allons entrer et je te verrai dans la prochaine vidéo. 8. L'instance Vue: Dans une vidéo précédente, nous avons mentionné Vue.js et contrôlons soit toutes les parties d'une interface utilisateur. Pour obtenir une certaine expérience de Vue.js, nous allons maintenant prendre un site HTML simple, qui est un site personnel, et appliquer certains Vue.js pour créer une section de blog. Nous pouvons sauter dans Vue.js, le projet de démarrage est disponible pour télécharger à partir du référentiel GitHub. Pour trouver cela, vous devez vous diriger vers ce lien qui est github.com/chrisdixon161/vue-3-cours. Vous pouvez également le trouver comme un référentiel de broches à partir de mon profil. Une fois que vous serez dans cette section, nous aurons tout le code dont vous avez besoin pour ce cours. Actuellement, nous avons juste le démarrage du portfolio, mais votre version aura tout l'exemple de code qui est nécessaire pour d'autres projets, ainsi que le code final pour chaque vidéo afin que nous puissions comparer si vous êtes coincé. Ce que vous devrez faire est de télécharger tout ce référentiel. Donc, si vous allez dans la section de code, vous pouvez télécharger ceci sous forme de fichier zip. Ouvre ça. Ensuite, nous pouvons extraire toutes les informations dont nous avons besoin. Donc, il suffit de placer cela sur le bureau et d'ouvrir cela. De là, nous avons le démarreur de portfolio, qui est juste le HTML et CSS de base, que nous allons utiliser pour tester comment la vue fonctionne sur un projet simple. Ce que vous devrez faire est de renommer ceci, je vais juste garder ceci comme un portefeuille, puis garder ceci séparé du reste du code. Ouvrez ceci dans le code Visual Studio ou l'éditeur de votre choix. Puis à l'intérieur ici, tout va voir est une page d'index, qui est juste un HTML régulier que nous avons de notre section de tête, nous allons lier à une police, nous lions à une feuille de style fournie, nous avons une section d'en-tête de base qui a un titre, , puis quelques liens de navigation. Ensuite, nous avons cette section blog. Cette section de blog a juste deux articles HTML statiques, je vais faire cette dynamique avec Vue.js. L' important est maintenant en bas, vous avez un script qui est un lien vers le CDN Vue, donc il s'agit d'un lien vers la bibliothèque d'appels Vue que nous allons utiliser pour explorer certaines fonctionnalités Vue. Cela signifie que nous n'avons pas besoin de faire quelque chose de spécial comme le téléchargement de paquets. Tout ce que nous faisons ici est de le lier directement à Vue.js. Ensuite, nous pouvons inclure certaines des fonctionnalités dans notre projet. Pour commencer avec Vue.js, nous allons créer un nouveau fichier, qui va être un fichier JavaScript, et je vais appeler ceci le script.js. Nous pouvons lier cela comme n'importe quel script régulier en bas de notre HTML, et nous ajoutons l'attribut source qui va lier au script.js. Nous pouvons également ouvrir cette page d'index dans le navigateur, nous pouvons double-cliquer sur l'index ou le fichier HTML à l'intérieur de notre projet. Ou si vous utilisez un code Visual Studio, nous pouvons cliquer avec le bouton droit sur cet onglet, puis copier le chemin, coller ce dans. C' est le projet de démarrage, qui est juste HTML. Nous allons commencer par convertir ces sections HTML pour être contrôlées par Vue.js. Pour ce faire, nous nous dirigeons vers le fichier de script. La première chose que nous devons faire est de créer une nouvelle instance Vue. Nous le faisons avec Vue, capital V, puis utilisons un code de fonction pour CreateApp. Nous avons accès à Vue.CreateApp puisque nous utilisons le lien CDN en bas de notre page d'index. Dans les vidéos à venir, nous allons également passer un objet Options qui est une instance aussi. Mais pour l'instant, nous devons monter cette application Vue sur notre page d'index. Pour ce faire, nous devons dire à Vue exactement où nous voulons monter. Nous pourrions contrôler la page HTML complète si vous le vouliez. Tout peut monter sur un certain chemin si vous le vouliez. Par exemple, cette instance Vue va contrôler notre section de blog, qui est un wrapper pour tous nos articles. Aura cette section avec l'idée de blog, donc nous allons faire usage de cela et dire Vue.js que cette section est la partie du HTML que vous voulez contrôler. Ceci a le blog id, donc tout ce que nous devons faire est de passer à CreateApp, puis appeler la méthode mount où nous allons passer dans les éléments que vous voulez lier. C' est comme les sélecteurs CSS réguliers, donc si c'est une idée, nous utilisons le hachage, nous utilisons le [inaudible] ou nous pouvons cibler directement l'un de nos éléments par son nom, donc nous pourrions cibler cette section, et nous voulons cibler le blog. Bien que nous ciblons ici un élément de section, peu importe le type d'éléments que nous montons. Ça pourrait être la section du corps, ça pourrait être DIV, tout va bien. Nous pourrions également créer plusieurs instances Vue. Si nous avons dupliqué cela, nous pourrions à nouveau appeler Vue.CreateApp, mais cette fois pourrait monter dans une section différente. Par exemple, si nous voulions avoir cette instance Vue pour contrôler le blog, et ensuite nous voulions également contrôler la section d'en-tête, tout ce que nous devons faire est de passer dans notre sélecteur différent et allons-y pour l'élément d'en-tête, qui est la section d'en-tête qui contient notre titre de niveau un, côté de nos liens de navigation. Nous pouvons également changer ce titre pour être notre nom, et aussi le même pour le titre de la page aussi. Cela signifie que nous avons maintenant créé deux applications Vue distinctes qui sont complètement indépendantes et peuvent avoir leurs propres données, comme nous le verrons dans la prochaine vidéo. 9. Données et listes: Avec notre application maintenant montée, nous avons maintenant besoin de certaines données pour travailler. Pour ce faire, nous allons ajouter quelques options pour créer une application. À l'intérieur, nous allons passer un objet, et cet objet sera là où nous allons travailler à partir de maintenant. La première option qui va aller sur cet objet est la propriété data, dont les sons sont utilisés pour contenir les données de notre application, qui est parfois appelée état. State est une fonction qui va retourner un objet. Cela va contenir toutes nos propriétés de données, vous pouvez considérer comme un endroit pour stocker les informations dont notre application a besoin. Tout comme nous le ferions avec les variables. Si vous avez utilisé Vue 2 dans le passé, la propriété data pourrait être déclarée comme une fonction comme celle-ci ou aussi un objet, la fois la vue libre et doit maintenant toujours être déclarée comme une fonction. Retour à notre index, notre HTML. Rappelez-vous que nous avons une application Vue montée à la fois sur la section en-tête et aussi sur la section blog juste en dessous. Ce qui signifie que nous pouvons maintenant utiliser le contrôle Vue [inaudible] n'importe laquelle des données à l'intérieur de ces deux sections. Actuellement, nous travaillons dans, à l'intérieur de la section d'en-tête, ce qui signifie que nous pouvons afficher nos propriétés de données à l'intérieur de cette section d'en-tête. Le premier que je vais contrôler à partir de l'application Vue sera le titre du portefeuille. Donc si nous mettons notre nom dehors ici, et alors nous pouvons stocker ça dans une propriété appelée « nom ». Ce sera une chaîne, alors ajoutez-la à l'intérieur des guillemets. Maintenant, au lieu d'avoir ce « nom » en HTML codé en dur, nous pouvons maintenant utiliser cette propriété de données appelée nom. Je vais mettre ça n'importe où dans notre section d'en-tête. Nous pouvons utiliser les accolades doubles et ensuite accéder à notre propriété de nom. Passons au navigateur et vérifions que cela fonctionne toujours, puisque cela est lié ou monté à notre section d'en-tête, cette valeur de nom ne peut pas être utilisée nulle part en dehors de cela. Si vous allez juste en dessous de notre en-tête et essayez de sortir cette variable de nom ou dans le navigateur, nous voyons cela est sorti comme une chaîne régulière plutôt que d'être remplacé par le nom réel, propriété de données. Les avantages de déclarer nos données à l'intérieur de la section de données, plutôt que du HTML codé en dur, sont que les données sont réactives, ce qui signifie que si l'une des valeurs à l'intérieur de cette section changerait, toutes les sections HTML qui utilisent seront ensuite mises à jour instantanément. Ceci est un exemple assez simple utilisant une chaîne de texte. Mais que faire si nous avions plusieurs éléments, tels qu'un tableau ? Eh bien, nous avons trois valeurs à l'intérieur de notre liste non ordonnée. Avoir la maison, le portefeuille, et aussi la section me contacter. Revenons au script, nous pouvons maintenant voir à quoi cela ressemblerait comme une propriété de données. La deuxième valeur séparée par une virgule va être des liens. Je vais configurer cela comme un tableau. Ce premier sera à la maison. Le deuxième lien était portefeuille, et le troisième de me contacter. Comme il s'agit d'un tableau contenant plusieurs valeurs, nous avons quelques options sur la façon dont nous pouvons produire ceci. L' option la plus basique est de sortir ceci directement en tant que propriété de données. Nous pourrions afficher le nom des liens. Cela sera directement sorti comme une chaîne. Cependant, il est peu probable que ce soit ce que nous voulons. Au lieu de cela, nous pourrions accéder à chacun de ces liens individuellement. Tout comme un tableau régulier, nous pourrions utiliser les accolades doubles, accéder à nos liens, puis accéder à chaque lien individuel par le numéro d'index. La première valeur à l'intérieur d'un tableau est zéro, la seconde est la position un, et la troisième de me contacter. Il y aura aussi des liens. Encore une fois, cela fonctionnera parfaitement bien, mais c'est un long chemin de faire des choses si vous avez beaucoup d'éléments de tableau, une façon plus efficace de traiter les éléments de liste comme celui-ci est d'utiliser une boucle for. Jusqu' à notre liste non ordonnée, nous pouvons utiliser une boucle V for, qui va être un lien et des liens. Liens avec le S est la propriété de notre date stockée dans notre script, puis la valeur du lien sera mise à jour pour chaque boucle. Ainsi, la première fois que nous parcourons ces trois éléments, la valeur du lien sera définie à la maison. La deuxième fois qu'il passe en boucle sera réglé sur portfolio, et la troisième et dernière fois qu'il partira, ce sera mis à me contacter. v-for est une directive Vue.js, qui est un attribut spécial que nous ajoutons à notre HTML. Les directives commenceront par un préfixe V tiret. Et celui-ci permet à Vue.js de faire une boucle à travers une propriété de données particulière. Nous examinerons également d'autres directives au cours du cours. Puisque nous avons trois éléments à l'intérieur de notre tableau de liens, le contenu à l'intérieur ici sera répété trois fois. Donc efficacement, nous avons répété notre liste non ordonnée trois fois distinctes. Mais ce n'est pas ce que nous voulons non plus. Donc, au lieu de cela, nous pouvons découper la boucle v-for et à la place simplement répéter notre élément de liste trois fois. Nous pouvons supprimer les deuxième et troisième éléments de la liste, laissant un seul en place, que nous allons répéter pour chaque élément à l'intérieur des liens. Nous pouvons alors remplacer cela par notre variable de lien, enregistrer ceci, et nos trois liens et maintenant de nouveau en place. Donc, juste pour récapituler, nous avons trois éléments à l'intérieur des liens. La première fois que la boucle passe, le lien sera réglé sur la maison. Donc, cela sera remplacé par la maison. La deuxième fois qui sera remplacé par portefeuille et ainsi de suite. Les propriétés de données peuvent également être sur des types de données, tels que des booléens et aussi des nombres, ainsi que des objets que nous allons découvrir ensuite. 10. Faire une boucle avec des objets: Nous pouvons également travailler avec des objets dans Vue.js aussi. Nous allons le faire pour ajouter quelques messages à notre exemple. Pour cela, nous pouvons utiliser la deuxième instance Vue que nous avons créée pour notre section blog dans ce script. Nous ne pouvons pas configurer l'objet options pour le CreateApp qui est monté à travers notre section blog en tant qu'objet, et nous allons travailler avec la propriété de données une fois de plus. C' est une fonction comme ci-dessus, qui va retourner toutes les données que nous pouvons utiliser dans notre section blog. A l'intérieur, nous allons accéder à nos messages qui va être un tableau. Chacun de ces messages va être stocké à l'intérieur d'un objet qui va avoir un ID, un titre et la section du corps. Le premier ID sera la valeur d'un seul séparé par une virgule, le titre de l'article de blog. C' est juste [inaudible] de sorte que vous pouvez ajouter tout ce que vous voulez à ce billet de blog. Le troisième élément est le corps, qui est le contenu réel de notre billet de blog. Je vais récupérer le contenu de notre page d'index. En tant que chaîne, nous pouvons coller cela à l'intérieur de la section du corps. Si vous voyez des erreurs comme nous le voyons ici, ce serait parce que nous utilisons du texte multi-lignes. Nous pourrions passer par chacune de ces lignes individuellement et les amener à être tous sur la même ligne. Juste comme ça, mais ce n'est pas une façon efficace de faire les choses. Ou une autre façon de le faire est d'utiliser les backticks. Donc, plutôt que ces citations, nous pourrions les remplacer par l'icône de backtick. Cela va maintenant nous permettre d'utiliser du texte multi-lignes. Juste pour nous donner du contenu avec lequel travailler, je vais copier cet objet, puis je vais coller ceci dans un deuxième billet de blog. L' ID de deux, changez le titre. Celui-ci va utiliser le CDN Vue. Ensuite, le troisième, qui a l'ID de trois. Celui-ci sera la façon dont j'ai maîtrisé Vue, que tu pourras écrire quand tu auras terminé ce cours. Même si ces messages sont des objets, c'est toujours un tableau d'objets. Cela signifie que nous pouvons à nouveau utiliser la directive V-for dans notre HTML. Jusqu' à la section du blog que nous contrôlons avec cette instance Vue. Nous avons deux articles codés en dur. Pour plus de simplicité, supprimons le second. Nous pouvons maintenant utiliser une boucle V-for pour répéter cela autant de fois que nécessaire. Nous voulons répéter l'article. Nous pouvons donc ajouter la directive V-for. Cette fois-ci, ce sera publié dans les messages. Rappelez-vous que post est le nom de notre tableau et la variable post est le nom de chaque élément du tableau. Nous pouvons maintenant accéder à cet intérieur de notre article. A l'intérieur des accolades doubles, nous pouvons sortir notre poteau. Voyons à quoi cela ressemble dans le navigateur. Si nous sortons le post, c'est la valeur de notre objet post complet. Cela sera répété trois fois. Depuis que nous avons trois billets de blog distincts, est également unique. Nous avons l'ID d'un, l'ID de deux et l'ID de trois en bas. Plutôt que d'accéder à ce billet de blog complet, nous pouvons écrire ceci en accédant à l'une de ces propriétés. C' était le titre du poste. Nous pouvons y accéder avec post.title. Ensuite, au lieu de ce texte à l'intérieur des éléments p, nous pouvons accéder au post.body. Tout cela fonctionne maintenant parfaitement bien. Revenons à notre script, si vous deviez ajouter beaucoup plus de propriétés de données comme ceci. Notre instance Vue peut rapidement devenir vraiment bondée. Pour vous aider, nous pouvons également prendre notre tableau d' objets et le placer en dehors de l'instance Vue. Prenons tout le contenu du tableau, y compris les crochets. Prenez tout cela, en laissant juste la variable post. En dehors de l'instance Vue, nous pouvons créer une variable JavaScript régulière. C' est ce qu'on appelle les messages. Ensuite, nous pouvons définir cela égal à notre tableau. Ce tableau de post peut maintenant être référencé à l'intérieur de notre instance Vue. Ainsi, la propriété date de publication peut être égale à notre tableau de messages. Vérifions que cela fonctionne. Vers le navigateur. Le billet de blog gratuit est toujours en place. Je suis aussi, en utilisant la syntaxe de la propriété abrégée ES6, puisque le nom et la valeur sont tous les deux les mêmes, nous pouvons le raccourcir à la seule valeur, ce qui fonctionne également complètement bien. 11. Index et clés de liste: Pour le moment, nous ne modifions aucune de nos listes, donc Vue.js n'a pas vraiment beaucoup de travail à faire. Cependant, dans les applications du monde réel, nos données peuvent souvent changer, soit à partir de l'ajout de quelque chose dans un formulaire, soit à partir d'une mise à jour de notre serveur. Peut-être même un nouveau blogpost ajouté et mis à jour avec une API. Une fois que Vue reçoit ces mises à jour puisque nous avons utilisé la propriété data, elle mettra à jour notre HTML avec une nouvelle valeur puisque les propriétés de données sont réactives. C' est assez simple pour quelque chose comme une chaîne de texte, mais que se passe-t-il si nous avions des milliers de blogposts ? Imaginez que nous ayons supprimé ou mis à jour un droit au milieu, comment Vue.js traite-t-il cela ? La réponse est d'utiliser un attribut spécial appelé une clé. Je vais ajouter ceci à notre blogpost, qui est entouré dans l'article. Juste après notre boucle v-for, nous pouvons ajouter un attribut clé et définir cela égal à une valeur particulière. Cette clé est un moyen de fournir un identifiant unique à chacun de ces éléments de liste. Si nous avions des centaines, voire des milliers de blogposts, avoir cette clé unique permettra à Vue, js de mieux identifier chaque élément quand vient le temps de mettre à jour ou de réorganiser. Si nous n'utilisons jamais de clés, vous devrez vous référer à un algorithme pour détecter l'un de ces changements. Cette clé doit être unique, comme un identifiant de produit ou pour notre blog, nous avons également un identifiant unique pour chaque blogpost. Regardons. Nous avons un ID unique qui est stocké dans cette propriété ID. Nous pouvons passer dans le post.id. Si nous ajoutons un attribut juste comme ça, Vue.js lirait cette valeur clé comme une chaîne appelée post.id. Plutôt que d'extraire les valeurs réelles de la variable, qui est la valeur d'un, deux ou trois. Si nous devions insérer du JavaScript ou une variable, tout comme nous l'utilisons ici. Nous devons rendre cette clé dynamique. La façon de le faire est d'utiliser la directive v-bind. Ceci est un préfixe qui va dire à Vue.js de lire la valeur à l'intérieur ici comme une variable plutôt que la chaîne de textes qui est post id. Ceci est une autre directive Vue.js. Cela peut également être raccourci pour simplement utiliser le deux-points. C' est notre clé maintenant prise en charge. En outre, lors de l'utilisation de la directive v-for, nous pouvons également accéder au numéro d'index. C' est la position de chacun de nos éléments à l'intérieur du tableau. Notre premier blogpost est la position 0, puis la position 1 et ainsi de suite. Pour ce faire, nous pouvons envelopper notre variable à l'intérieur des crochets comme ceci. Nous pouvons toujours accéder au post, mais nous pouvons également accéder au numéro d'index 2. Si nous le voulions, nous pourrions produire l'indice. Encore une fois à l'intérieur des accolades doubles, nous avons la position 0, la position 1, puis la position 2. C' est aussi tout comme JavaScript, nous pouvons ajouter plus un. Il peut s'agir de la première valeur, de la deuxième valeur et ainsi de suite. Cela peut être utile pour des choses telles que la numérotation de nos articles que nous affichons. Eh bien, pour notre blog, l'exercice n'est pas nécessaire. Nous pouvons également supprimer cela aussi. Une des choses clés à noter est qu'il est recommandé de ne pas utiliser cette position d'index comme valeur pour notre clé. C' est parce que si aucune clé n'est fournie, nous utiliserons de toute façon la position de l'index. En plus de lier ces attributs clés, nous pouvons également lier d'autres attributs aussi, que nous allons jeter un oeil à la prochaine. 12. Attributs de la reliure: Nous avons eu un premier regard sur les attributs de liaison dans la dernière vidéo en utilisant la clé. Nous allons maintenant passer à regarder la classe de liaison et les attributs de style Vue. Pour ce faire, nous pouvons créer un DarkMode pour notre blog que l'utilisateur peut activer ou désactiver. Pour créer les styles pour ce DarkMode, nous devons passer à notre feuille de style, puis en bas, nous pouvons ajouter une classe DarkMode que nous allons activer ou désactiver. Ça va être assez simple. Nous pouvons créer l'arrière-plan et définir ceci sur une couleur plus foncée, celle que je vais utiliser sera 38383a. Pour compenser cela, nous allons changer la couleur pour être une valeur plus claire de whitesmoke. Pour appliquer ce DarkMode, nous allons ajouter ceci en tant que classe, et entourant tout notre contenu, comme la section d'en-tête et notre blog, nous avons cet élément div environnant. Dans la balise d'ouverture, juste à l'intérieur du corps, nous pouvons ajouter ceci comme une classe régulière et cela appliquera nos modifications. Cela fonctionne bien, mais nous avons besoin d'un moyen d'activer et de désactiver cela, et aussi d'intégrer cela dans notre application Vue. Actuellement, nous avons un petit problème qui est que nous utilisons Vue pour contrôler la section d'en-tête et aussi la section blog indépendamment. Mais lorsque nous bascutons uniquement DarkMode, nous voulons que cette classe soit appliquée au site complet. Nous pouvons simplifier les choses en fusionnant nos deux instances Vue. Pour ce faire, tout ce que nous avons à faire est de récupérer nos messages de la deuxième application, puis de coller cela dans la propriété de données de notre première section. Nous n'avons plus de données à l'intérieur ici, donc nous pouvons supprimer cette instance complète et ensuite nous allons monter ceci dans la section du corps. Cela signifie que l'instance Vue contrôle maintenant l'ensemble de notre page Web. La première étape pour permettre à cette classe d'être activée et désactivée consiste à définir cette propriété en tant que propriété de données. Une propriété de données va être une propriété booléenne, et je veux appeler ceci le DarkModeset, qui sera une valeur booléenne initiale de false. Pour basculer dynamiquement la classe DarkMode en fonction de cette propriété de données particulière, nous devons passer notre attribut de classe en tant qu'objet plutôt qu'en tant qu'attributs réguliers, comme ceci. A l'intérieur d'ici, nous devons ajouter un objet en utilisant les accolades. Nous voulons que cette classe sombre s'applique seulement si la propriété de données qui est DarkModeset va être égale à true. Actuellement, c'est faux, donc Vue.js n'appliquera pas cette classe sombre. Nous pouvons voir cela si nous actualisons le navigateur, la classe sombre ne s'applique plus. Mais si c'était pour basculer cela pour être vrai, Vue.js devrait alors appliquer notre classe. Mais si nous actualisons cela, nous ne voyons aucun changement, et c'est parce que tout comme lorsque nous définissons la propriété clé plus tôt, nous devons lier ceci comme une valeur dynamique. Actuellement, Vue.js lit ceci comme une chaîne, que nous pouvons voir si nous allons dans les outils de développement. Je vais cliquer avec le bouton droit de la souris et inspecter la « section Body », puis immédiatement à l'intérieur, nous voyons que notre classe est sortie sous forme de chaîne. Ce n'est pas une classe valide, donc ce que nous allons faire est d'utiliser la directive v bind. Ou tout comme tout à l'heure, on peut raccourcir ça pour être un deux-points. Maintenant, au lieu d'une chaîne, cela sera interprété comme JavaScript, et si nous actualisons les outils de développement, nous verrons que la classe de dark a maintenant été appliquée, et cela a également été appliqué à notre projet aussi. Parallèlement à cette classe, nous pouvons également ajouter des propriétés de données aux styles en ligne aussi. Supprimons ça. Je vais configurer une propriété de style régulier qui est juste HTML régulier. A l'intérieur, nous pouvons définir la valeur de couleur, allons-y pour une valeur de rose vif. C' est juste du HTML régulier, donc si nous actualisons cela sera alors appliqué à nos projets. Nous pouvons également déplacer cette propriété de couleur pour être une propriété de données aussi. À l'intérieur du script, définissons le TextColor pour être la valeur de chaîne de rose vif. Ensuite, comme nous l'avons fait avec les attributs de classe, nous devons passer ce style en tant qu'objet. La première étape consiste à entourer cela dans les accolades, puis remplacer cette chaîne de rose vif par notre propriété de données qui était TextColor. C' est une variable, donc nous devons lier cela en utilisant v bind ou le raccourci qui était le deux-points. Actualisez, et cette fois notre style a été appliqué à partir de la propriété data. Si nous avions plusieurs propriétés de style que nous voulions ajouter comme ceci, notre HTML pourrait rapidement devenir désordonné. Au lieu de cela, nous pourrions supprimer cela, en laissant dans les attributs de style, puis dans notre script, nous pouvons créer un objet de style en tant que propriété de données. Nous pouvons supprimer cela, et puis à la place, nous allons configurer notre darkMode.CSS en utilisant les mêmes styles que nous avons appliqués en bas. Commentons ceci et puis configurez notre arrière-plan qui était la valeur hexadécimale de 38383a. Aussi la couleur pour le texte, qui va être whitesmoke. Cet objet DarkMode peut désormais être placé directement en tant qu'attribut. Puisque sa valeur est déjà un objet, nous n'avons pas besoin d'y placer les accolades. Cela peut simplement être directement ajouté dans. Essayons ça. Notre DarkMode a maintenant été appliqué. Nous pouvons même ajouter plusieurs objets de style aussi, par exemple si nous voulions configurer une famille de polices de base ou certains styles de base, nous pouvons configurer un nouvel objet, et définissons FontFamily pour être la valeur du monospace. Si vous n'êtes pas familier à ajouter des propriétés CSS avec JavaScripts, toutes ces propriétés CSS doivent devenir un cas. Si nous utilisions CSS directement dans notre feuille de style, nous définirions la FontFamily tout en minuscules et séparés par les tirets. Au lieu de cela en JavaScript, nous définissons cela comme CamelCase de sorte chaque mot après le tout premier commence par une lettre majuscule. Maintenant, nous allons avoir ces objets de style multiples que nous voulons ajouter. Ceux-ci peuvent maintenant être placés dans un tableau. Nous pouvons passer entre crochets, puis notre deuxième objet, qui était la base, sauver ceci, et le style de nos deux objets ont été fusionnés. Si nous allons dans les outils de développement, nous pouvons le voir en survolant notre div principale. Ceci a notre couleur d'arrière-plan, il a le TextColor, puis notre FontFamily du deuxième objet JavaScript. 13. Mini Challenge - Liens dynamiques: En utilisant ce que nous avons appris jusqu'à présent, un mini défi pour essayer les choses vous-même. Ce que je voudrais que vous fassiez, c'est de passer à la section d'en-tête qui contient nos liens de navigation libres. Actuellement, chacun de ces liens a un attribut href qui pointe vers la barre oblique. Plutôt que d'avoir cela codé en dur, nous pourrions créer ceci comme un attribut dynamique, et définir la valeur href à l'intérieur de notre propriété de données. Si nous allons à nos scripts, un bon point de départ serait de remplacer ce tableau de liens par un tableau d'objets, tout comme ci-dessus où nous avons créé nos billets de blog comme un tableau d'objets, et il peut utiliser ce tableau comme un bon point de départ de vos liens. Ceci est le numéro 1 couvert. Ensuite, l'objet doit avoir la propriété URL avec un lien. Au lieu de l'ID, du titre et du corps que nous avons dans notre billet de blog, nous pouvons peut-être changer pour être l'ID, le nom et l'URL. L' URL peut être constituée, il peut s'agir d'un lien externe ou d'un lien interne vers une page fictive telle que le portefeuille de barres obliques. Mais maintenant, ne vous inquiétez pas si la page vers laquelle nous lions est en cours de création ou non. Tout ce qui nous inquiète, c'est de créer un lien dynamique. Ensuite, tout comme avec les billets de blog, numéro 3 est de faire une boucle à travers ce tableau en utilisant v-for et définir une clé unique. Enfin, en utilisant l'élément, nous allons créer un lien vers chaque page. Comme un indice, nous pouvons utiliser la directive v-bind que nous avons appris dans la dernière vidéo pour l'attribut href 2. 14. Liens dynamiques : ma solution: J' espère que cela s'est bien passé pour vous, et je vais maintenant relever ce défi et vous montrer ma solution. En commençant par le numéro 1, qui était de créer un objet contenant tous nos liens, comme nous l'avons fait avec le billet de blog. En dehors de l'instance de Vue, notre constante pour nos liens qui va être un tableau d'objets. Le premier est l'ID de 1, le nom qui va être notre maison. La troisième propriété sera pour notre URL, ce sera l'emplacement où nous allons lier. Le lien d'accueil va être le index.html séparé par une virgule. Nous avons besoin de deux liens supplémentaires, l'ID de 2 et celui-ci va lier à notre portefeuille, et l'URL va être portfolio.html. Comme mentionné dans la dernière vidéo, peu importe si cette page a été créée ou non, tout ce qui nous intéresse à ce stade est de créer un lien dynamique. Le troisième est pour me contacter dans le contact.html. Retirez le tableau de notre propriété de données et nous pouvons soit définir cela via des liens ou nous pouvons vous voir le raccourci ES6. Puisque ces deux mots sont les mêmes, cela prend soin de l'étape 1 et de l'étape 2, et pour l'étape 3, nous devons faire une boucle pour ces liens et je vais les mettre dans notre HTML. Plus dans notre page Index, nous avons déjà la configuration de la boucle for, donc cela est pris en charge. L' étape suivante consiste à ajouter huit clés dynamiques, qui va être link.id. Puisque link est maintenant un objet, nous devons également passer le nom et cela devrait toujours fonctionner dans le navigateur. Enfin, l'étape 4 consiste à utiliser l' <a> élément pour créer un href dynamique. Tout d'abord la directive v-bind, ou nous pouvons encore utiliser le raccourci qui est e deux-points, puis plutôt que la barre oblique, nous pouvons accéder au link.url. Je peux essayer tous les liens dans le navigateur, lien d' accueil sera toujours un lien vers cette page actuelle, le portfolio. Ce lien vers la barre oblique suivante portfolio.html et la barre oblique avant me contacter fonctionne aussi. Encore une fois, ne vous inquiétez pas si c'est un lien vers un fichier que nous n'avons pas créé, tout ce qui compte c'est que nos liens fonctionnent maintenant. 15. Expressions Javascript: Dans nos fichiers HTML, nous avons déjà utilisé les doubles étalonnages jusqu'à présent, également appelés interpolation pour extraire nos propriétés de données, et aussi à l'intérieur de nos boucles pour produire une variable aussi. Si nécessaire, ces doubles étalonnages peuvent également prendre en charge les expressions JavaScript. Un petit symbole pourrait les utiliser pour effectuer un calcul JavaScript, puis afficher le résultat. N' importe où à l'intérieur d'ici, passons juste en dessous de l'en-tête. Nous pouvons utiliser ces doubles étalonnages et créer un ajout simple tel que 1 plus 3. Si vous allez juste évaluer cette expression et ensuite sortir le résultat de 4, nous pourrions aussi utiliser nos expressions JavaScript, comme diviser ou nous pourrions dire 10 divisé par 2, la valeur de 5. Nous pouvons également utiliser des méthodes JavaScript intégrées. Par exemple, nous pourrions accéder à l'objet mathématique, puis sélectionner une méthode appelée aléatoire. Cela générera alors un nombre aléatoire entre zéro et un, chaque fois que nous rechargeons le navigateur. Nous pouvons également accéder à nos propriétés de données existantes, telles que le nom et le transformer en utilisant des méthodes JavaScript telles que ToupperCase. Il prendra alors notre nom d'origine, qui est placé dans une propriété date, puis transformera ceci en majuscules avant de sortir cela dans le navigateur. Nous pourrions aller encore plus loin à des choses étranges telles que l'opérateur ternaire JavaScript. Nous pourrions vérifier si le nom.length est supérieur à zéro. Ceci est actuellement vrai puisque nous avons plus de zéro caractères à l'intérieur de la chaîne. Si c'est vrai, ce que nous savons qu'il est, donc nous allons juste sortir une chaîne de bienvenue, suivi du nom de notre utilisateur. Si ce n'est pas le cas, nous utilisons le deux-points pour fournir une deuxième condition, qui sera « Welcome Invité ». C' est JavaScript régulier et ce n'est rien de spécifique à afficher JS. La seule implication de vue est que nous sortons cela en utilisant les doubles calibraces. Nous savons que notre nom.length est supérieur à zéro, donc nous voyons le message de bienvenue sur notre nom. Si nous devions créer une chaîne vide. Par exemple, si un utilisateur n'est pas connecté, nous verrons le message « Invité de bienvenue ». Une autre chose que nous pouvons faire est d'ajouter des expressions dans nos attributs dynamiques aussi, juste au-dessus de l'endroit où nous définissons cette propriété de style dynamique. Disons que nous voulions définir l'objet DarkMode uniquement si une certaine condition est vraie. À titre d'exemple aléatoire, nous pourrions dire que si 10 est inférieur à cinq, si c'est vrai, nous allons alors afficher le DarkMode, ou sinon, nous allons sortir une chaîne vide, ce qui signifie qu'aucune classe ne sera appliquée. Enregistrez ceci et actualisez. Dix est inférieur à cinq, donc le DarkMode ne sera pas appliqué si nous changeons cela pour être vrai, donc 10 est supérieur à cinq, DarkMode devrait maintenant être appliqué à notre projet, ou comme un exemple plus réaliste, de retour dans nos scripts. Nous avons cette propriété de jeu DarkMode. Nous pouvons maintenant utiliser ceci pour rendre conditionnellement notre DarkMode plutôt que cette valeur de nombre, nous pouvons dire « DarkModeset », ce qui est actuellement vrai, donc DarkMode restera activé. Si nous définissons ceci pour être faux, il devrait maintenant être supprimé. Nous pouvons également supprimer notre message de bienvenue. Activer et désactiver ce DarkMode manuellement n'est pas idéal. Dans la vidéo suivante, nous allons définir ceci pour réagir à un bouton. 16. Gestion d'événement: En plus des directives que nous avons examinées jusqu'à présent, qui incluent V4 et V Bind. Nous allons maintenant examiner une autre directive utile appelée V-on, qui nous permettra de réagir à certains événements. Cette directive V-on est également transmise à nos éléments, l'intérieur de la balise d'ouverture en tant qu'attribut, et nous allons l'utiliser pour changer entre le mode clair et le mode sombre. Lorsque l'utilisateur clique sur un bouton, nous ramène dans notre index.html. À l'intérieur de notre section de blog, nous allons ajouter un bouton HTML. Nous pouvons ensuite inclure à l'intérieur du côté ouvert de la V-on la directive, qui va écouter des événements de clic. Nous pouvons également écouter plus d'événements, tout comme dans JavaScript normal, tels que on-submit, on-mouseover, on-cube, etc. La seule différence est que nous supprimons le préfixe sur, ce qui signifie que pas dans des événements tels que sur la souris ne changerait simplement en mouseover. Cependant, à cette occasion, nous voulons écouter un clic sur ce bouton, puis à l'intérieur des citations, nous voulons réellement faire quelque chose lorsque ce bouton a été cliqué. Dans ce cas, nous voulons basculer entre le mode sombre, et nous avons cet ensemble comme une propriété de données appelée jeu de mode sombre. À l'intérieur, nous allons basculer la liste en définissant le mode sombre défini pour être égal à l'opposé. Le point d'exclamation signifie que si l'ensemble du mode sombre est actuellement vrai, cela le bascule pour être faux, et aussi le contraire s'applique aussi. Essayons ceci, en fait, nous devons ajouter du texte entre notre bouton aussi. Cliquez dessus, et cela va maintenant basculer notre mode sombre. Nous pouvons voir la sortie du jeu de mode sombre, si nous attrapons cela, et ensuite nous pouvons sortir ceci entre les accolades. Pour voir cela plus clair, cette valeur est actuellement définie sur false. Comme ça, ce sera vrai, faux, et ainsi de suite. En plus de cette syntaxe V-on, c'est aussi un raccourci, tout comme quand nous avons raccourci la liaison pour utiliser un deux-points, nous pouvons raccourcir V-on pour utiliser le symbole at, et cela fonctionnera exactement de la même manière. Ce bouton à bascule n'est pas le plus beau, donc au lieu de cela, nous allons le remplacer par une entité HTML. Nous pouvons ensuite basculer entre un fils et une icône de lune, en fonction de notre état de bascule. Les deux icônes que nous allons afficher vont remplacer ce texte à bascule. Tout d'abord, sortons nos deux icônes. Le premier est l'esperluette, le dur, puis 9788 suivi du point-virgule. Le second est l'esperluette, la dure, et c'est 9789. Cela nous donnera nos deux icônes dont nous avons besoin, mais nous ne voulons montrer qu'une d'entre elles à la fois. Nous pouvons utiliser l'opérateur ternaire JavaScript pour basculer entre ces deux icônes. Ouvrez les accolades doubles et nous pouvons vérifier si le mode sombre est actuellement vrai. Si c'est le cas, nous allons sortir sous forme de chaîne, la première icône, qui est le soleil. Si ce n'est pas le cas, on utilise le côlon et on passe ensuite sur la lune. Recharger. Nous sommes actuellement en mode lumière, donc nous voyons la lune. Cliquez dessus et cela passera au soleil. Comme nous l'avons mentionné précédemment en plus d'écouter nos événements de clic, nous pouvons également écouter plus d'événements, tels que mouseover, et cela devrait maintenant basculer notre état chaque fois que nous survolons ce bouton particulier. Cependant, pour cet exemple, un événement click a plus de sens. Je n'ai pas attribué d'expressions JavaScript directement dans l'événement click comme celui-ci, est correct pour de petits exemples, mais est généralement considéré comme préférable d'extraire cela de notre HTML et place dans une fonction ou une méthode, et c'est ce que nous allons découvrir ensuite. 17. Méthodes: À l'intérieur de Vue.CreateApp, jusqu'à présent, nous n'avons travaillé qu'à l'intérieur de cette section de données. Maintenant, nous allons ajouter une nouvelle section qui sera pour nos méthodes. Cela nous permettra de faire beaucoup de choses cool, comme changer nos données, et généralement rendre nos applications beaucoup plus interactives et utiles. Si vous êtes familier avec les fonctions en JavaScript, les méthodes font la même chose. Par exemple, ils ont la méthode name car ils font partie de cet objet. Alors que notre section de données a été configurée comme une fonction, notre méthode pour configurer comme un objet parce que nous allons les appeler manuellement. Assurez-vous que nous sommes en dehors de notre section de données. Faites défiler vers le bas jusqu'à l'accolade bouclée de fermeture. Ensuite, après cela, nous allons mettre en place nos méthodes, l'utiliser comme un objet. La première méthode que nous allons utiliser sera de basculer notre mode sombre. C' est parce que nous ne voulons pas trop de logique JavaScript remplacé dans notre fichier HTML. Nous allons abstraire le basculement de notre jeu de couleurs dans cette méthode. Découvrons ceci et collez ceci à l'intérieur de notre méthode. Ensuite, nous devons changer le mode sombre défini pour être this.DarkModeset. La raison pour laquelle nous utilisons ceci, ce mot-clé est parce que la section de données et aussi la section de méthode font partie de ce qu'on appelle l'API d'options. Les sections entre autres que nous examinerons bientôt ont accès à chaque propriété Vue en utilisant ce mot-clé. Par exemple, nos méthodes peuvent accéder à n'importe quoi de la section de données tant que nous utilisons ce mot-clé, donc pourraient accéder à this.name, this.links et aussi en retour la section de données peut appeler notre méthode, ou nous pourrions dire ceci. togglemode. Maintenant, tout ce qu'il reste à faire est d'appeler cette méthode à partir de notre page d'index. Passer le mode bascule, rafraîchir le navigateur, et maintenant nous pouvons toujours basculer entre nos deux versions de couleur pour cette fois en extrayant tout le code dans une méthode. 18. HTML brut: Si nous le voulions, nous pouvons également sortir HTML en utilisant Vue.js. De retour à l'intérieur de notre script.js et jusqu'au sommet, nous avons ce tableau de billets de blog. Disons que nous voulions formater le corps de ce billet de blog en ajoutant quelques éléments HTML à l'intérieur de ce texte. Par exemple, nous pourrions découper n'importe lequel de ces mots et ensuite créer les éléments forts. Remettre ce mot entre les deux. Nous pourrions également ajouter n'importe lequel des éléments aussi tels que la balise break, qui le placera ensuite sur une nouvelle ligne. Revenons au navigateur et voyons quel effet cela aura. Nous pouvons voir que nous n'obtenons pas tout à fait le résultat que nous voulons, les éléments forts et aussi la balise break vient d'être sortie dans le cadre d'une chaîne. C' est parce que nous sortons cela dans notre index.html entre ces accolades doubles. Ces accolades doubles afficheront la valeur sous forme de texte brut. Cela rend cette accolades bouclés pas bon choix pour le texte contenant des éléments HTML. Au lieu de cela, Vue fournit une nouvelle directive appelée V-HTML. Comme toujours, nous ajoutons nos directives en tant qu'attribut, et cela remplacera nos accolades doubles. Ceci est V-HTML et ensuite nous pouvons définir cela égal à notre post, le corps. Nous pouvons également supprimer cela, rafraîchir le navigateur. Notre étiquette forte a maintenant pris effet et aussi notre balise break aussi. Tout cela fonctionne très bien maintenant, mais pour des raisons de sécurité, nous devons être prudents lors de l'utilisation de V-HTML. Nous ne devrions injecter du HTML qu'à partir de sources fiables. Par exemple, nous ne devrions jamais utiliser le code HTML fourni par l'utilisateur final de notre site car cela pourrait entraîner des attaques de script intersite. Il est vraiment important lorsque nous utilisons cette directive que nous sommes complètement sûrs que cette source est sûre. C' est ainsi que nous pouvons utiliser V-HTML. Ensuite, nous allons découvrir les crochets de cycle de vie. 19. Cycle de vie de Vue: Lorsque nous créons notre instance d'aperçu supérieur Vue, il y a une série d'étapes qui se déroulent dans les coulisses. La documentation Vue a un très bon schéma de ce qui se passe exactement lorsque nous créons une nouvelle application Vue. Vous n'avez pas besoin de vous en souvenir ou de bien comprendre pour l'instant, mais sachez que nous pouvons exécuter du code à chaque étape de ce cycle de vie. Par exemple, en haut, nous voyons vue.CreateApp tout en passant nos options. C' est l'étape initiale que nous avons déjà examiné, et ensuite nous voulons cela au DOM avec app.mount. Une fois cette instance créée, nous avons accès au BeforeCreate et aux hooks créés. Ces crochets de cycle de vie peuvent être ajoutés à notre objet, que vous transmettez dans CreateApp en même temps que les données et les méthodes que nous utilisons actuellement. Jetons un coup d'oeil à ces deux premiers crochets de cycle de vie dans nos scripts. Parallèlement à nos données, nous allons d'abord examiner avant de créer. Le second séparé par une virgule est le crochet créé. À l'intérieur de ces deux crochets, nous pouvons ajouter n'importe quel code que vous voulez exécuter à ces deux premières étapes. Pour pouvoir voir exactement quand chacun de ces hooks fonctionnera, nous pouvons faire un journal de console. Le premier, je vais ajouter du texte de BeforeCreate, donc nous savons exactement quel journal de console est en cours d'exécution, et puis rappelez-vous en utilisant ce mot-clé, nous pouvons accéder à toutes les autres propriétés de notre instance Vue, qui a notre les actions des données. Nous pouvons produire la valeur de notre nom en utilisant this.name. Avec cela, nous pouvons également sortir cela à l'intérieur du crochet créé sur la console. Cliquez avec le bouton droit de la souris et inspectez, et surtout pour actualiser aussi. Nous voyons que le crochet de création avant renvoie une valeur de undefined. Mais en dessous de cela à l'intérieur du crochet créatif, nous avons accès à notre propriété de données. Pourquoi c'est ça ? Eh bien, ce n'est qu'à l'étape créée où Vue a fini de traiter et de mettre en place des choses sur notre objet d'options. Qui a nos données et méthodes. Ce qui se traduit par tout ce qui provient de notre instance Vue telle que nos propriétés de données à retourner comme indéfini à l'intérieur de la précédente crée hook. Cela signifie que nous ne l'utiliserions que pour quelque chose comme un appel d'API, qui n'est lié à aucune section au-dessus, telle que nos propriétés de données. Nous pouvons aussi voir cela si nous revenons au dessin. Nous pouvons voir à l'intérieur de cette section que nous n'avons pas accès à l'activité de la visionneuse jusqu'à ce qu'après le crochet BeforeCreate. Après cela, nous descendons ensuite à l'option de modèle, qui nous donne deux options distinctes. Nous allons jeter un oeil à cette option de modèle bientôt lorsque nous examinerons les composants. C' est essentiellement la section où nous sortons tout notre HTML, qui inclut les sections dynamiques avec un double accolades. Si cette option de modèle n'est pas disponible, elle descendra à notre section sur laquelle nous montons, et évaluera le contenu à l'intérieur d'ici. Après cela, nous avons une série d'étapes lorsque l'application a été montée sur le DOM, nous pouvons accéder avant montage ou dès que l'application a été montée. Une fois que l'application a été montée sur le DOM, nous pouvons également écouter les changements. Nous pouvons ensuite exécuter du code avant la mise à jour ou après la finalisation de la mise à jour. Les deux dernières étapes sont quand un composant est retiré du DOM et nous pouvons y accéder avant un crochet de montage et aussi le crochet non monté aussi. Ces deux dernières étapes sont utiles pour tout travail de nettoyage, peut-être envie de cesser d'écouter les événements, et c'est l'endroit pour le faire. Voyez comment tout cela fonctionne dans la pratique et maintenant nous allons faire un simple appel API pour obtenir des billets de blog d'une source externe. La source de ce billet de blog va être disponible à partir de l'espace réservé JSON. Ceci est une API très simple et critique que nous pouvons utiliser pour obtenir des exemples de données tels que nos billets de blog. Nous pouvons voir que nous pouvons obtenir des blogposts, nous pouvons obtenir des commentaires. Nous avons des albums, des photos, des todos, et aussi des utilisateurs. Nous allons accéder à la section /post, qui va retourner un échantillon de 100 articles de blog. C' est donc assez simple, nous ajoutons simplement /posts à la fin de cette URL. Cela retournera une liste de 100 billets de blog au format JSON, et nous pouvons également faire un appel à cette URL à partir d'une méthode Vue. Revenez à Visual Studio Code et dans notre script, nous pouvons appeler cela à l'intérieur de notre section de méthode, et la méthode que je vais appeler va être getposts. À l'intérieur, nous allons utiliser l'API Fetch pour faire un appel à cette URL. Collez ceci sous la forme d'une chaîne, et cette API de récupération est juste JavaScript régulier. Ça n'a rien à voir avec Vue JS. Nous pouvons ensuite stocker les données que nous avons récupérées à l'intérieur d'une variable appelée réponse. Puisque nous sommes en train de tendre la main à une API externe, ce sera un appel asynchrone. Cela signifie que les données que nous récupérons peuvent revenir en quelques millisecondes. Cela peut prendre cinq secondes, il peut ne pas revenir du tout. Donc, pour faire face à cela, nous pouvons faire usage d'un seul poids, qui est une fonctionnalité JavaScript. Ce qui nous permettra d'attendre les données pour revenir avant de faire quoi que ce soit avec. Pour ce faire, nous pouvons marquer notre méthode comme asynchrone. Donc, nous ajoutons le mot-clé asynchrone juste avant, puis nous allons attendre que nos données reviennent. Cela signifie que si nous essayons d'accéder à la variable de réponse avant que ces données ne reviennent, cela ne lancera pas d'erreur. Maintenant, cela nous laisse avec l'objet de réponse de notre appel d'API, et ensuite nous devons extraire le JSON de la réponse. Pour ce faire, nous allons accéder à notre réponse, puis appeler la méthode JSON. Cela va extraire le JSON de notre réponse, que nous pouvons stocker dans une constante ou une variable appelée données. Nous allons également [inaudible] ceci pour nous assurer que cela est terminé avant d'accéder à nos données, puis enregistrer ceci sur la console. Maintenant, avant d'aller plus loin, prenons du recul et réfléchissons à ce que nous voulons faire. Nous avons une liste de blogposts que nous récupérons de l'API, et ceci est stocké dans cette variable de données. Nous laissant deux choses que nous devons faire. abord, nous devons transmettre ces données à notre section de données et les ajouter à nos publications. La deuxième chose que nous devons faire est d'appeler réellement cette méthode. Comme nous l'avons regardé plus tôt, nous pourrions ajouter un bouton à nos sites et faire cet appel, ou ce ne serait pas une bonne utilisation. Au lieu de cela, nous voulons le faire automatiquement, et nous pourrions le faire à partir d'un crochet de cycle de vie. On peut utiliser le crochet BeForecReates. Puisque rappelez-vous que cela est appelé avant la création de l'application, de sorte que la méthode get post sera indéfinie. Nous pourrions utiliser monté une fois que l'application est montée sur le DOM, ou nous pourrions aller encore plus tôt et utiliser le crochet créé, que nous avons cherché avant. Nous n'avons plus besoin de ce BeForecReate, donc nous allons déplacer ceci et ensuite descendre à la section créée. Au lieu de faire un journal de console, nous allons appeler notre méthode GetPost, laquelle nous pouvons accéder avec this.getPots. Plus sur le navigateur, et nous pouvons ouvrir les outils de développement. Je vais dire que la réponse n'est pas définie, donc on a une erreur d'orthographe. On y va. Réponse. Rafraîchir. Voici notre journal de console avec 100 articles de blog différents. Chacun de ces billets de blog a un ID, a un corps, un titre, ainsi que l'ID utilisateur qui l'a créé. C' est exactement les mêmes données que nous avons déjà, plus cet identifiant d'utilisateur supplémentaire, que nous pouvons ignorer si nous ne voulons pas utiliser. Nous allons maintenant utiliser ces données pour remplacer les articles de blog gratuits que nous avons déjà. abord, nous allons annuler les billets de blog que nous avons déjà de notre propriété Data. Pour ce faire, nous pouvons faire défiler jusqu'à nos messages, puis définir ceci pour être un tableau vide, et nous pouvons maintenant mettre à jour ces messages à partir de notre méthode. Faites cela plutôt qu'un journal de console. Ce que nous allons faire est d'accéder à this.posts, et de définir cela à l'égalité de nos données. Vers le navigateur. Cela nous laisse maintenant avec un 100 articles de blog différents à l'intérieur de notre page. La raison pour laquelle cela fonctionne est que les données que nous avons obtenues de l'API, que nous aurions vu dans le journal de la console, sont structurées de la même manière que nos articles de blog originaux. Nous pouvons le voir à l'intérieur de notre page d'index. Dans la section du blog, nous avons accès au titre, au corps, et ceux-ci ont également un identifiant. Si les données qui sont revenus de notre API étaient légèrement différentes, par exemple, si la section du corps était intitulée contenu, tout ce que nous aurions besoin de faire est de changer cela à l'intérieur ici, et nous serons prêts à y aller. 20. Section Intro - les bases des composants: Lorsque vous travaillez avec des frameworks front-end ou des bibliothèques comme Vue.js, l' un des concepts les plus importants à apprendre est les composants. Dans les prochaines vidéos, nous allons découvrir comment Vue.js utilise les composants, ce qu'ils sont, les différents types de composants, puis nous pouvons examiner des choses telles que la façon dont nous pouvons transmettre des données entre ces composants. Commençons dans la vidéo suivante, et nous allons jeter un oeil à ce qu'est exactement un composant. 21. Que sont les composants ?: Vue.js et d'autres amis et frameworks ou bibliothèques ont ce concept de construction de nos applications en utilisant des composants. La raison derrière cela est de diviser notre application en petits morceaux, rendant notre projet plus facile à entretenir, à organiser et à déboguer. Mais qu'est-ce qu'un composant ? Eh bien, considérez cette image qui vient de notre projet à venir. Il s'agit d'une application de compte à rebours où nous allons ajouter des événements et ils seront affichés dans l'ordre de date. Nous pouvons également voir le nombre de jours de l'événement aussi. Nous pourrions construire cette application complètement dans le fichier App.vue. Mais même si ce n'est pas une application énorme, elle peut rapidement devenir surpeuplée et non organisée ou être dans un seul fichier. Pour vous aider à cela, nous pouvons diviser notre application en parties ou sections, comme notre bouton en haut, qui peut même faire partie du fichier App.vue ou nous pourrions les déplacer pour être un composant séparé. Aussi avec nos événements aussi, le code pour ceux-ci pourrait être retiré de ce fichier App.vue et placé dans un composant indépendant. Isoler ce code dans un composant comme celui-ci signifie maintenant que nous savons où chercher pour éditer ce code plutôt que de faire défiler un fichier volumineux. En outre, s'il y a un problème avec cette section d'événements, notre code est maintenant isolé aussi, ce qui aidera à résoudre le problème. Ce projet inclut également un formulaire que nous utiliserons pour ajouter un nouvel événement ou pour éditer un événement existant. Ce serait également un bon cas d'utilisation pour un composant. n'y a pas de règle difficile ou rapide pour déterminer exactement quel chemin nous devrions faire dans un composant, c'est quelque chose que vous devez juger vous-même quand un fichier devient volumineux ou entendu à maintenir. Cela peut être un bon signe que vous devez externaliser dans un composant séparé, ou vous pouvez également organiser par fonctionnalités comme nous le voyons ici avec ce formulaire d'édition. Le nombre de composants que nous créons n'entrave pas nos performances ou n'augmente pas la taille de la bulle, puisque nous utilisons le composant WebPart pour les regrouper complètement efficacement à la fin. C' est dans ce bundle que le navigateur utilise pour nos applications d'une seule page. 22. Premier aperçu des composants: Les diapositives précédentes utilisaient le concept de composants de fichier unique, c'est un composant qui joue dans un fichier dédié pour garder les choses plus organisées. Pour ce faire, nous avons besoin d'une configuration beaucoup plus sophistiquée que nous examinerons dans la section suivante. Ces composants placés dans son propre fichier sont probablement le type de composants le plus couramment utilisé. Mais d'abord, nous allons examiner différentes façons d' écrire ceci en commençant par le composant global. La première chose que je vais faire à l'intérieur de notre script.js est de stocker notre instance de vue à l'intérieur d'une constante appelée application. Maintenant, nous avons cette application stockée dans cette référence d'application. Nous allons ensuite utiliser ce mount d'appel, donc app.mount. Nous remonterons ensuite ça à la section du corps. Si nous actualisons le navigateur, nous ne voyons aucun changement à l'intérieur ici, mais maintenant, avoir cette référence séparée à notre application signifie que nous pouvons maintenant appeler une méthode appelée composant. Cette app.component prend deux arguments. Le premier est le nom que nous voulons donner à ce composant, et le mien va être app-header. Lorsque vous utilisez le lien CDN comme nous le sommes, le nom de ce composant doit être en minuscules, plus d'un mot, et séparé par des tirets. C' est parce que nous allons l'insérer dans notre HTML comme un élément régulier, donc nous ne voulons pas d'affrontements de noms. Cette convention de nommage signifie également que nous ne sommes pas en conflit avec éléments HTML normaux tels que l'en-tête, le nav, aussi un hv régulier par exemple. Après cela, le deuxième argument séparé par une virgule va être un objet. Cet objet est comme une mini application. Il peut avoir ses propres données, ses propres méthodes, et fondamentalement, tout ce que nous avons juste au-dessus dans notre instance de vue régulière. Parallèlement à cela, il a aussi un modèle qui est une chaîne, et ce sera le HTML que nous voulons sortir à l'intérieur du navigateur. Il peut s'agir de n'importe quel code HTML tel qu'un titre de niveau 1. Ajoutons juste du texte à l'intérieur ici pour l'instant. Maintenant, nous pouvons utiliser cet en-tête d'application à l'intérieur de notre page d'index comme un élément HTML normal. Commentons la section d'en-tête et ensuite nous pouvons la remplacer par nos éléments d'en-tête d'application, enregistrer, et ceci est maintenant sorti à la place de notre en-tête normal. Maintenant, nous savons que cela fonctionne, nous pouvons maintenant récupérer notre section d'en-tête régulière. Nous pouvons décommenter cela et découper cet endroit, et ensuite nous pouvons maintenant placer ceci comme chaîne de modèle. [ inaudible] de tous ces soulignements rouges, mais l'éditeur de texte met en évidence un problème. C' est parce que nous utilisons des guillemets pour entourer tout ce HTML. Cela fonctionne parfaitement lorsque nous utilisons une seule ligne de HTML, tout comme notre titre de niveau 1. Cependant, lorsque nous avons plusieurs lignes de HTML comme ceci, nous devons remplacer ces citations par les bacticks. Lorsque nous utilisons la vue CLI pour configurer notre projet bientôt, cela nous donnera une façon plus propre d'écrire notre code HTML à l'intérieur de ces composants. Mais pour l'instant déplacer vers le navigateur. Cela apparaît maintenant à l'intérieur d'une section d'en-tête, mais nous manquons les variables. Nous ne voyons plus de choses telles que nos sections dynamiques, qui est le nom, et aussi le lien juste en dessous. Pour que cela fonctionne, nous pouvons également configurer la section de données dont il a besoin pour ce modèle. Donc, faites défiler jusqu'à la section de données que nous avons utilisé. Nous avons besoin du nom et aussi du lien donc je vais les couper de l'instance de vue, puis les placer dans notre composant. Nous avons mis en place les données comme nous l'avons fait ci-dessus. C' est une fonction qui va retourner un objet et nous pouvons coller dans notre nom et nos liens. N' oubliez pas de séparer la section de données et le modèle par une virgule. Cela place maintenant nos données dans le navigateur, mais cette fois, à partir d'un composant. 23. Accessoires et réutilisation des composants: En plus d'isoler notre code, un autre avantage de l'utilisation de composants est qu'ils peuvent également être réutilisés. Non seulement cela, mais nous pouvons également réutiliser les mêmes composants et aussi lui transmettre des valeurs différentes. Pour voir cela, nous allons passer sur l'un de nos billets de blog en un composant. Nous pouvons couper ou remplacer la section complète de l'article de notre blog dans notre index.html. Comme dans la dernière vidéo, nous allons créer un nouveau composant. Encore une fois, assurez-vous que cela est juste au-dessus du montant. Donc encore une fois, c'est up.components et le premier argument va être le nom, que je vais appeler le blog-post, séparé par une virgule que nous passons dans notre objet. Cela va prendre dans notre modèle, qui est multi-ligne. Donc, encore une fois, nous utilisons les tiques arrière coller dans notre article. Pour notre simplicité, nous allons supprimer la boucle for. Nous pouvons également changer cela pour être simplement un titre et la section du corps. Donc, nous allons transmettre ça un seul message. Ensuite, comme nous l'avons fait avec le composant d'en-tête, nous allons publier notre nouveau billet de blog à l'intérieur du HTML. Cela va être placé à l'intérieur de notre section blog. Cette fois cependant, plutôt que d'avoir les données à l'intérieur du composant, comme nous l'avons fait avec la section d'en-tête. Cette fois, nous allons transmettre les données à ce composant en utilisant des accessoires. Les accessoires sont comme des attributs réguliers que nous pouvons utiliser pour envoyer les données dont le composant a besoin, et ce composant a besoin du titre et aussi du corps et la façon de le faire, tout comme un attribut, est d'aller dans la balise d'ouverture du blog postes. Tout d'abord, nous pouvons passer le titre et ce n'est que quelques exemples de données pour l'instant afin que nous puissions donner n'importe quel titre que vous voulez. Cela a aussi besoin de la section du corps, donc nous pouvons lui donner un deuxième attribut ou un second accessoire. Encore une fois, cela va être une chaîne simple. Puisqu' il s'agit d'un composé, nous pouvons également réutiliser ces deux éléments. Donc, copions et collez ceci dans. Modifiez le titre. Chaque fois que nous faisons cela et réutilisons les composants, chaque incidence de composant est indépendante des autres et possède également ses propres données, qui est également appelé état. Ce qui signifie que bien que nous ayons deux articles de blog distincts, ils ne seront pas en conflit les uns avec les autres. Donc nous avons passé nos deux accessoires, nous avons passé le titre et aussi le corps. Cependant, bien que ces variables ne soient pas automatiquement affectées à ces variables. Une chose que nous devons faire d'abord est de déclarer exactement quels accessoires ce composant s'attend à recevoir. Puisque nous recevons plusieurs accessoires, nous pouvons ajouter ceci comme un tableau, puis ajouter une virgule à la fin. Le premier accessoire est le titre, puis le second est le corps. Cela signifie maintenant que ces deux accessoires sont maintenant disponibles à l'intérieur de notre modèle. Essayons cela dans le navigateur. Lorsque je survole deux composants de post de blog, chacun avec des données indépendantes. Bien que cela fonctionne complètement bien, ce n'est pas un moyen efficace de créer, disons, 100 billets de blog. Donc, une meilleure façon de le faire serait de réutiliser ce composant avec une boucle V for. Retour à notre page d'index et plutôt que d'avoir dans deux articles de blog distincts, ce que nous allons faire est juste d'avoir notre seul billet de blog. Ensuite, nous pouvons utiliser un V pour boucle. A l'intérieur de cette boucle V for, nous voulons profiter des données que nous avons déjà. C' est tous les articles de blog que nous avons stockés ici. Donc, nous pouvons dire post, dans les messages passent dans une clé, qui va être notre post.id. Maintenant, plutôt que de transmettre notre titre et notre corps en texte brut, à la place, nous allons passer un accessoire ou un post, qui va être égal à notre poste de la boucle juste au-dessus. Comme il s'agit d'une variable, nous devons également lier cela en utilisant une syntaxe v bind. Ceci est passé comme le contenu de notre variable plutôt que la chaîne de post. Maintenant, ce billet de blog est passé un objet appelé post sur notre script sur jusqu'à nos composants. Au lieu de recevoir à la fois le titre et le corps, il reçoit maintenant le message en tant qu'objet. Ensuite, nous pouvons accéder au post.title et aussi au post.body. Vérifions ça. Notre composant de billet de blog est maintenant rétabli. Mais cette fois, ils ont toutes les données dont ils ont besoin qui ont été transmises comme un accessoire. 24. Composants locaux: Le type de composants utilisés jusqu'à présent avec cette app.component est classé comme un composant global, qui signifie qu'ils sont instantanément disponibles pour être utilisés n'importe où dans notre application. Cela inclut également les sous-composants. Par sous-composants, je veux dire les composants qui sont imbriqués à l'intérieur des autres. Par exemple, pas que cela ait beaucoup de sens, mais nous pourrions également placer nos composants d'en-tête à l'intérieur de ce billet de blog. Ce modèle est juste comme notre HTML, donc nous pourrions placer cela comme nous l'avons fait dans la page d'index, mais c'était l'en-tête d'application, et aussi fermer cela. Si nous sauvegardons ceci et actualisons notre projet, nous voyons que notre titre d'en-tête et nos liens de navigation sont disponibles dans chacun de nos articles de blog, et c'est parce qu'ils sont disponibles dans le monde entier. Donc, à moins que vous ne vouliez spécifiquement ce comportement, nous pouvons également restreindre l'utilisation des composants en les enregistrant localement. L' enregistrement local implique de s'éloigner de app.component et de créer des objets JavaScript réguliers. Ces objets doivent être créés au-dessus de Vue.CreateApp, et nous verrons pourquoi en un instant. Le premier sera pour notre AppHeader. Tout comme nous l'avons dit, ce sera un objet JavaScript régulier. Le deuxième composant était pour BlogPost. Maintenant, nous pouvons saisir le contenu de nos deux composants et les placer à l'intérieur de ces objets. Donc, le premier est le AppHeader, donc je vais faire défiler jusqu'à notre composant AppHeader, et ensuite nous pouvons copier tout le contenu à l'intérieur de ces accolades. Ne copiez pas cette accolade bouclée, nous allons simplement copier le contenu vers la section d'en-tête de fermeture. Prenons ceci et puis collez ceci à l'intérieur de notre objet. Le suivant est notre BlogPost, et nous pouvons faire exactement la même chose. Vous allez prendre les accessoires et aussi le gabarit. Ajoutez ceci à l'intérieur ici. Nous allons alors enregistrer notre intention. Ils utilisent ces composants à l'intérieur de Vue.CreateApp. Nous pouvons le faire en créant une section de composant, puis ajouter une virgule à la fin. Donc, le nom du premier composant va être blog-post, qui va être égal à notre objet que vous avez créé ci-dessus, qui est BlogPost. Séparé par une virgule, le second sera l'AppHeader. Nos composants sont maintenant enregistrés pour être utilisés à l'intérieur de notre page d'index. Quelques choses à noter d'abord, l'objet JavaScript, que nous créons ci-dessus, doit être déclaré au-dessus cette CreateApp afin que nous puissions ensuite y accéder à l'intérieur de nos composants. Si nous avons également plusieurs instances Vue, nous pouvons maintenant contrôler exactement quels composants nous voulons apparaître ou être disponibles dans chacun d'eux. Nous n'avons plus besoin de ces composants globaux en bas, donc je vais commenter l'AppHeader et aussi le BlogPost sur le navigateur. Rafraîchissez la page, ajoutez notre BlogPost, et apparaissez maintenant à côté de notre en-tête. Mais une chose à noter qu'à l'intérieur de chacun de nos BlogPost ne verrait plus cet AppHeader. Rappelez-vous d'avant, si nous faisons défiler jusqu'à nos composants, nous avons toujours en place ces composants AppHeader à l'intérieur de chaque BlogPost, mais nous ne le voyons plus dans le navigateur. Pourquoi c'est ça ? Eh bien, cet en-tête d'application est maintenant un sous-composant de notre BlogPost, et maintenant que nos composants sont locaux plutôt que globaux, nous n'avons plus accès à nos composants où nous le voulons. Si nous voulions utiliser cet AppHeader ou tout autre composant à l'intérieur d'ici, nous aurions également besoin de passer l'option components aussi. Tout comme nous l'avons fait à l'intérieur d'une Vue.CreateApp, nous pouvons également passer dans nos composants. Ceci, encore une fois, est un objet, et puis nous allons déclarer que nous utilisons cet en-tête d'application, qui va pointer vers l'objet AppHeader. Enregistrer et actualiser, et son enregistrement local place maintenant notre AppHeader dans chacun de ces BlogPosts. Bien sûr, nous n'avons pas besoin de cela pour notre projet, donc je vais supprimer ces composants et aussi la ligne de code à l'intérieur d'ici. Mais c'est un exemple si vous vouliez enregistrer localement un composant à l'intérieur d'un autre. Maintenant, nous comprenons plus sur Vue et les composants. Ensuite, nous allons découvrir une meilleure configuration à l'aide d'une CLI Vue avec le début de notre prochain projet. 25. Section Intro - Outils de construction et applications monopages: Importer Vue.js en tant que lien CDN est vraiment utile pour des projets simples ou pour commencer, tout savoir sur Vue. Mais pour les applications plus grandes ou plus réelles, nous voulons généralement utiliser une configuration plus sophistiquée. Cela nous permettra de décomposer nos applications en composants réutilisables, les placer dans des fichiers séparés et de créer des choses comme des applications d'une seule page. Pour ce faire, les prochaines vidéos vont se concentrer sur un outil appelé Vue CLI. 26. Applications monopages: Dans le projet précédent, nous avons examiné comment nous pouvons utiliser Vue.js pour travailler avec un seul chemin d'application. Nous pouvons prendre un site Web ou une application existante, créer une nouvelle instance Vue, puis la monter sur n'importe quel élément HTML sur lequel vous souhaitez l'utiliser. Aussi comme mentionné précédemment, nous pouvons également utiliser Vue.js pour contrôler notre front-end complet. Nous pouvons l'utiliser pour construire ce qu'on appelle l'application d'une seule page. Il s'agit d'une application qui est entièrement contrôlée par JavaScript et fonctionne à l'intérieur du navigateur. Avec la façon traditionnelle de créer des sites Web, peut cliquer sur un lien de page, tel que ce lien À propos. La page est alors demandée à partir d'un serveur Web, qui répond ensuite avec le contenu de la page, puis affichée dans le navigateur. Les applications d'une seule page fonctionnent différemment. Au lieu de demander des pages sur les actifs comme nous en avons besoin, Vue va construire notre application en paquets JavaScript. Lorsqu' un utilisateur visite pour la première fois une application d'une seule page, le bundle est ensuite téléchargé à partir du serveur. Ce pack JavaScript inclut le contenu de notre projet, comme nos pages, qui signifie que toute la navigation entre ces pages est gérée par JavaScript à l'intérieur du navigateur sans avoir à demander d'autres pages à partir du serveur, d'où le nom application de page unique. Comme toute approche de finesse, il a des avantages et des inconvénients. L' un des avantages est que la vitesse est vraiment rapide. Basculer entre les pages avec JavaScript est beaucoup plus rapide que demander une page à partir d'un serveur Web. Cela offre une excellente expérience utilisateur car il n'y a pas de chargement et la navigation dans notre application est presque instantanée. De plus, puisque ce bundle est stocké dans le navigateur, il peut également fonctionner hors ligne aussi. Il présente également quelques inconvénients, tels que le téléchargement d'un gros paquet peut être initialement plus lent lorsque l'utilisateur visite votre site pour la première fois. Cela peut être optimisé avec fractionnement du code et nous examinerons cela plus tard dans le cours. En outre, il n'est généralement pas considéré comme convivial SEO comme les pages générées par le serveur traditionnel. Puisque le contenu HTML renvoyé est minime et le reste du contenu est généré à l'intérieur du navigateur résultant en contenu qui est plus difficile à explorer par les moteurs de recherche, bien que les plus grandes entreprises de moteurs de recherche semblent avoir vraiment l'a amélioré récemment. En outre, comme note de côté, puisque JavaScript peut fonctionner à l'intérieur du navigateur et aussi du serveur aussi. Il est également possible d'utiliser Vue pour créer ce qu'on appelle une application de rendu côté serveur. Cela convertit notre application JavaScript pour être plus semblable à la façon traditionnelle de faire les choses, où nous demandons des pages lorsque cela est nécessaire. Il s'agit cependant d'un sujet plus avancé et qui n'est pas abordé dans ce cours. Il existe également un outil de cadre tel que Node.js qui vous aidera avec cela. Jetons ensuite un coup d'oeil à quelques outils qui nous aideront à créer ces types d'applications d'une seule page. 27. Le CLI de Vue: Dans le projet avec lequel nous travaillons jusqu'à présent, nous avons utilisé un lien CDN pour accéder aux fonctionnalités Vue JS. La configuration est parfaite pour les petits projets ou lorsque vous travaillez simplement avec une partie de notre site Web. Pour les projets de plus grande envergure, nous avons souvent besoin d'une meilleure configuration avec plus de fonctionnalités et d'outils. Pour vous aider, il y a la CLI Vue, qui est disponible sur cli.vuejs.org, qui a des plugins pour de nombreux outils populaires, qui a TypeScript, Babel, Testing, et aussi pour ajouter facilement des paquets dont nous pouvons avoir besoin comme le Routeur Vue. Même si vous n'avez pas l'intention d'utiliser beaucoup de fonctionnalités ou de plugins, vous voudrez probablement une configuration comme celle-ci qui nous permet d' utiliser des composants plus facilement et aussi de construire pour la production. Il inclut également des outils tels que Webpack afin que nous puissions regrouper tous nos fichiers et ressources pour créer ces applications d'une seule page. L' interface de ligne de commande est créée et maintenue par l'équipe de base de Vue JS. Bien que nous sachions que ce n'est pas nécessaire puisque nous avons déjà construit un projet Vue JS sans lui, il est généralement accepté comme moyen standard de créer des projets Vue JS. Si nous faisons défiler vers le bas, il y a une section de mise en route en bas pour nous installer à l'intérieur du terminal. Une chose à noter ici est que Node.js est nécessaire avant d'aller de l'avant et de le faire. Si Node.js n'est pas déjà installé, si vous voulez vous diriger vers nodejs.org, puis cliquez sur la version actuelle pour télécharger pour votre système d'exploitation. En outre, si cela fait un certain temps que vous avez mis à jour, cela peut également être utile de passer par le processus d'installation. C' est juste un cas de quelques clics. Node.js est un moyen pour nous d'exécuter JavaScript sur le serveur. Nous n'écrirons aucun code Node.js ou, en fait, aucun code lié au serveur. Ce n'est qu'une exigence dans les coulisses de la CLI Vue. Une fois que cela a été téléchargé, nous avons juste besoin de décompresser le paquet, puis il continue à travers le processus d'installation de votre système d'exploitation particulier. Tout fait. On peut fermer cette fenêtre. L' installation de Node comme celui-ci installera également npm, qui est le gestionnaire de paquets du Node, que nous utiliserons pour installer à la fois la CLI Vue et tous les paquets supplémentaires dont nous avons besoin pour nos projets. Pour aller de l'avant avec l'installation, vous devrez vous diriger vers le terminal. Vous pouvez utiliser n'importe quel terminal pour cela, tel que le terminal Mac intégré, vous pouvez utiliser Windows PowerShell et il y en a également un qui est intégré dans Visual Studio Code. Si vous ouvrez, sélectionnez l'option du terminal, puis allez dans « Nouveau terminal », qui ouvrira cela en bas de notre éditeur de texte. Fini, je vais utiliser iTerm pour ce projet. La première chose à faire est de vérifier que npm et Node sont tous les deux correctement installés. Nous pouvons d'abord taper noeud, puis tiret v. Cela nous reviendra la version actuelle des noeuds qui est installée. Ensuite, npm -v, qui retourne ensuite la version installée de npm. Ces deux commandes doivent renvoyer le numéro de version, mais si vous voyez une erreur, vous devrez installer correctement Node et npm avant de continuer. Retour à la page d'accueil Vue CLI, nous avons cette section d'installation en bas. Nous pouvons soit utiliser npm, soit le gestionnaire de paquets Yarn. il en soit, c'est très bien. Si vous n'avez pas encore configuré Yarn sur votre machine, je vous recommande d'utiliser la commande npm car cela ne nécessite pas d'installation supplémentaire. Copiez et collez ceci est terminé, appuyez sur « Entrée », et cela passera par le processus d'installation de la CLI. Si vous êtes un utilisateur Mac et que vous rencontrez des erreurs d'installation relatives aux autorisations, vous devrez peut-être ajouter le pseudo préfixe avant cette installation de npm, puis entrer le mot de passe lorsque vous y êtes invité. Ou encore mieux, vous pouvez également corriger les autorisations qui vous empêchent d'installer. Une fois que vous avez fait cela, nous pouvons utiliser la commande Vue create, suivie du nom de notre projet. Mais d'abord, nous allons utiliser la commande cd pour changer dans notre répertoire où nous voulons installer notre projet. Je vais changer dans le bureau, appuyez sur « Entrée ». Eh bien, vous pouvez placer ça n'importe où vous voulez. Nous pouvons ensuite utiliser Vue create et le nom du projet que je vais appeler la démo CLI, appuyez sur « Entrée ». Au moment de l'enregistrement, la Vue CLI nous donne l'option de Vue version 2 ou Vue 3, qui est également fournie avec la configuration Babel et ESLint pour nous. Sélectionnez « Vue 3". Aussi, rappelez-vous qu'à l'avenir, l'option pour Vue 2 peut ne pas être là. Parfois, les options changent, mais c'est généralement assez explicite. Il devrait maintenant nous laisser avec notre projet de démonstration sur le bureau. Maintenant, nous devons changer dans ce répertoire de démonstration. Comme il est dit, Babel peut utiliser cd pour changer de répertoire dans notre démo CLI. Maintenant, nous sommes à l'intérieur de cette démo, nous pouvons alors exécuter notre serveur de développement. Si vous utilisez un npm, nous pouvons taper npm servir, appuyez sur « Entrée ». En fait, c'est npm exécuter servir, appuyez sur « Entrée ». Cela va maintenant configurer notre serveur de développement. Une fois cela fait, il nous donnera un lien que vous pouvez maintenant ouvrir dans le navigateur. Voir le projet de démarrage toutes les configurations. Tout ce que nous devons faire maintenant pour éditer ceci est d'ouvrir ce projet à l'intérieur de notre éditeur de texte afin que nous puissions le brancher. Maintenant, nous sommes bons d'aller écrire dans notre code Vue JS. Ce projet, cependant, semble un peu différent de la structure précédente du projet. Ensuite, nous allons prendre un aperçu de ce qui est inclus dans cette configuration du projet. 28. Structure du projet: Je veux juste prendre quelques instants pour examiner la structure du projet, que nous venons de créer. Si nous regardons dans la barre latérale, nous verrons tous les fichiers et dossiers qui sont maintenant à l'intérieur de notre projet. Le premier dossier que nous voyons est les modules de noeud. Ce dossier est l'endroit où tous les modules MPM sont installés. Si vous avez déjà utilisé node, vous serez familier avec ce type de configuration. Généralement, les projets qui utilisent le nœud sont divisés en paquets. Chacun d'entre eux ajoute des fonctionnalités. Nous pouvons avoir un paquet, par exemple, qui met en forme les dates, un qui fait la validation de forme. Nous pouvons également ajouter nos propres paquets ici aussi, en utilisant MPM que nous venons de mettre en place. C' est là que des choses telles que les bibliothèques de code vue.js se trouvent, plutôt que de le lier au script CDN comme nous l'avons fait dans le premier projet. Si vous êtes familier avec tout cela, une installation MPM a été exécutée pour nous lorsque nous avons configuré le projet avec la CLI. Après cela, nous avons le dossier public qui contient nos fichiers statiques, tels que toutes les images que nous voulons utiliser, ainsi que tout HTML. Nous avons d'abord le favicon, qui est l'icône qui apparaîtra dans l'onglet du navigateur. Ensuite, nous avons le index.html. Si nous ouvrons ce index.html, nous ne voyons pas beaucoup de contenu à l'intérieur d'ici, et comme je l'ai mentionné dans la vidéo d'application d'une seule page, ces types d'applications ont une structure html minimale. Ensuite, le reste du code sera empaqueté et injecté dans ce div avec l'ID de App. Tout comme dans le premier projet où nous avons monté l'instance de vue sur un élément particulier en HTML. C' est l'emplacement de ce projet, lequel il sera monté. Nous verrons comment cela se fait très bientôt. Après cela, nous avons le dossier source. Ce dossier est l'endroit où nous faisons la majeure partie de notre travail. C' est là que nous serons dans la plupart de notre code pour ce projet. Ici, nous avons le dossier assets, c'est là que nous stockons les actifs pour le projet tels que tous les fichiers CSS toutes les icônes nos téléphones et nous pouvons également placer des images à l'intérieur d'ici aussi. Ci-dessous, le dossier des composants est quelque chose que nous examinerons plus en détail bientôt. Mais plutôt que de créer des composants comme nous l'avons vu dans la dernière section, nous pouvons les organiser en fichiers séparés. Et c'est là que nous allons les stocker. Le composant unique que nous avons configuré est cet exemple HelloWorld. Il s'agit d'un exemple de composant de fichier unique. Cette section est généralement divisée en trois sections. Tout d'abord, nous avons la section du modèle, qui va contenir notre code HTML. Ceci est similaire à la dernière section où nous avons créé nos composants globaux et locaux, nous avons eu la section de modèle comme une chaîne. Cependant, avec un seul composant de fichier, c'est beaucoup plus pratique puisque nous pouvons le mettre en page comme HTML ordinaire. Nous pouvons également utiliser les accolades doubles pour insérer nos données. Donc, tout ça devrait sembler assez familier. Si nous faisons défiler jusqu'à la fin de la section du modèle, nous avons alors une section de script. C' est en fait là que nous allons ajouter à la fois notre JavaScript et aussi notre code JS de vue. À l'intérieur de cette section par défaut d'exportation se trouve l'endroit où nous pouvons configurer des choses telles que nos données et nos méthodes. Puis enfin en bas, nous avons aussi une section de style où nous pourrions placer notre CSS, divisant notre code en composants de fichier unique comme celui-ci. Il est rendu possible en utilisant des outils de facturation tels que Web Park, qui regroupe tout ensemble, jette dans un fichier de sortie qui est ensuite utilisé pour la production. Ensuite, nous voyons le fichier App.vue, et c'est un fichier Vue spécial que vous pouvez considérer comme le fichier principal ou le composant principal. Tout comme avec l'exemple HelloWorld que nous venons de regarder, ce fichier a également une section de modèle, un script, et aussi la section de style aussi. Nous pourrions écrire notre code de projet complet à l'intérieur de ce seul fichier. Cependant, il deviendra très grand. Au lieu de cela, nous prenons généralement notre code et les divisons en composants plus petits. Puisque ces composants dans leur propre fichier séparé, nous avons besoin de les importer, comme nous le voyons ici, avant de pouvoir les utiliser dans notre modèle. Donc, avec tout ce code Vue.js en place, nous avons maintenant juste besoin d'un moyen de monter cela sur le dom. Nous avons déjà vu dans le index.html, nous avons ce point de montagne, qui est le div avec l'ID de App. Ce montage se fait dans le fichier suivant, qui est le main.js. C' est le fichier JavaScript principal pour notre projet et l'endroit où nous pouvons également ajouter des plugins comme le routeur. Puisque nous utilisons maintenant le module View MPM, nous allons maintenant devoir importer les parties de cette bibliothèque dont nous avons besoin. La partie principale dont nous avons besoin est cette CreateApp et nous utilisons les accolades. Nous importons donc seulement la section unique de la bibliothèque vue. Il s'agit également d'une importation nommée. Maintenant, nous avons accès à CreateApp. Nous pouvons l'utiliser comme nous l'avons fait dans le projet précédent , puis le monter sur la div avec l'ID de App, que nous venons de voir dans notre page d'index. Dans le projet précédent, nous avons ajouté un objet à CreateApp. Nous l'avons fait manuellement en passant un objet, puis nous enregistrons des choses telles que nos données. Mais maintenant à la place avec ce type de configuration, nous importons les composants racine, qui est l'App.vue. Ensuite, tous nos composants vont être imbriqués à l'intérieur d'ici. Tout cela peut sembler un peu complexe au début, mais tout ce que nous faisons généralement est de créer une page d'index ou un fichier HTML, puis de monter notre application de vue. La différence maintenant plutôt que de passer dans un objet, est que ce nouveau fichier d'application peut également contenir des composants, mais finalement ils sont tous imbriqués sous ce fichier App.vue unique. Après cela, nous avons le fichier gitignore. Si vous utilisez git pour le contrôle de version, nous avons un fichier pour dire quels fichiers nous ne voulons pas inclure dans gits, suivi d'un fichier de configuration babel, que nous pouvons utiliser pour ajouter des paramètres babel personnalisés. Babel est un outil utilisé pour transformer tout code JavaScript plus récent qui écrit dans la syntaxe de style plus ancien. Si le navigateur ne le supporte pas encore, le package.json est un fichier de configuration que nous avons dans les projets basés sur le nœud. Il contient des informations sur le projet telles que le nom et aussi tous les scripts que nous allons utiliser pour démarrer notre projet et aussi construire pour la production. Nous avons déjà utilisé ce script de service lorsque nous avons exécuté MPM run serve, démarrer notre serveur de développement. dépendances ci-dessous sont les principaux paquets dont notre projet a besoin et nous ne pouvons pas en ajouter plus à une date ultérieure aussi. Nous allons le lier au package Vue.js plutôt que d'utiliser un lien CDM. dépendances de développement sont des paquets dont nous n'avons besoin que pendant le développement, tels que le serveur de développement pour exécuter le projet et aussi des choses telles que eslint, qui vérifieront la qualité de notre code dans l'éditeur pendant le développement. Ceux-ci ne seront pas inclus lorsque nous pousserons notre site à la production et nous aurons un fichier de verrouillage que nous ne toucherons pas. Le mien est une version de fil, mais le vôtre peut ne pas être si vous étiez juste en utilisant MPM. Il s'agit d'un fichier généré automatiquement qui répertorie tous les paquets que nous utilisons, ainsi que toutes les dépendances sur les numéros de version exacts que nous avons installés. Enfin, une note rapide aussi, nous n'avons qu'une petite quantité de dépendances et de dépendances de dev à l'intérieur d'un ici. Cependant, cela a entraîné beaucoup plus de modules Node. C' est parce que certains de ces paquets ont aussi des sous-dépendances. Ainsi, d'autres paquets sont également retirés avec MPM. Mais maintenant c'est un aperçu de notre projet de cours et nous nous familiariserons beaucoup plus à mesure que nous créerons notre prochain projet. 29. L'extension Vetur: Dans la vidéo précédente, ce fichier App.vue, entre autres, avait une syntaxe codée en couleur agréable à l'intérieur de notre éditeur de texte. Mais votre version peut être assez claire, tout comme nous le voyons ici. La mise en évidence de la syntaxe, entre autres fonctionnalités, a été créée à l'intérieur de Visual Studio Code par une nouvelle extension. Si vous utilisez Visual Studio Code, je vous recommande également d'installer cela également. Pour ce faire, allez dans l'onglet Extensions. Ensuite, nous pouvons chercher une extension appelée Vetur. Sélectionnez ceci, et vous devrez installer ceci et activer. Je l'ai déjà installé, donc je vais cliquer sur le bouton Activer. Ensuite, nous pouvons retourner dans notre App.vue. Vetur nous donne maintenant cette belle mise en évidence de la syntaxe pour rendre notre code beaucoup plus lisible, avec un peu de formatage et d'auto-complétion aussi. Si vous utilisez Visual Studio Code, je vous recommande d'installer cette extension, mais beaucoup mieux l'expérience du développeur. 30. Section Intro - Projet de compte à rebours: Ces prochaines sections vont se concentrer sur la création d'un nouveau projet, qui est une application de compte à rebours d'événements. Nous allons utiliser la configuration de l'interface de ligne de commande Vue la plus sophistiquée, et aussi apprendre comment transmettre des données entre les composants, et aussi beaucoup plus de techniques que Vue a à offrir, telles que les observateurs, les propriétés calculées, et ainsi beaucoup plus. Passons à la vidéo suivante, où nous allons télécharger le démarreur, puis nous pouvons commencer à construire notre projet. 31. Téléchargement du projet de démarrage: Pour ce projet, j'ai fourni un modèle de démarrage qui est disponible au téléchargement à partir du référentiel GitHub. Dès le début, lorsque nous avons téléchargé le dépôt complet, mien enregistré sur le bureau en tant que vue-3-course-master. À l'intérieur, vous verrez beaucoup plus de dossiers. Pour celui qui vous intéressait, c'est une vue-compte à rebours. Glissons cela dans le code Visual Studio. Je vais commencer à travailler avec notre nouveau projet. Utiliser le projet de démarrage est exactement le même que le Vue-CLI-setup, que nous avons examiné dans la section précédente. Mais utiliser un projet de démarrage signifie que nous avons tous les mêmes numéros de version. Je vais également mettre à jour ceci quand il sera sûr de le faire. Dans un code Visual Studio, vous verrez tous les fichiers et dossiers familiers de la démo précédente. La seule différence est si nous allons au fichier App.vue. A l'intérieur de notre script, nous avons ce tableau de données d'événement. Ceci est un tableau d'objets que nous allons utiliser comme point de départ pour ce projet. Cela va juste, disons, je tapais quelques événements différents, donc nous pouvons voir cette information dans le navigateur. Mais très bientôt, nous allons créer ces événements. Nous les mettrons à jour et les supprimerons également de nos projets. Si vous le souhaitez, vous pouvez également modifier n'importe laquelle de ces informations d'événement, telles que les noms d'événement, les détails, toutes les couleurs d'arrière-plan. Mais une chose à noter, c'est ces dates. Très bientôt, nous allons avoir besoin d'une date d'événement qui dans le passé ou ont expiré. Nous en aurons besoin à l'avenir et nous aurons besoin pour nos jours aussi. Cela nous permettra de tester les choses quand nous arriverons à ce stade, mais nous y reviendrons très bientôt. Aussi pour garder la taille de téléchargement réduite, j'ai également supprimé les modules de noeud. Nous devrons aller sur le terminal et installer aussi cela. Si vous utilisez un terminal intégré à l'intérieur d'un code Visual Studio, vous allez à Terminal, Nouveau Terminal, et celui-ci serait ouvert à l'intérieur de votre dossier de projet. Si vous utilisez un terminal séparé, vous devrez utiliser la commande CD, qui va accéder à notre répertoire de projet. Le mien est enregistré sur le bureau. Pour commencer, nous allons CD dans le dossier du dépôt, qui est le vue-3-course-master. Ensuite, à partir d'ici, vous allez CD dans la vue Countdown Starter. Assurez-vous que vous êtes dans le bon dossier. Ensuite, nous allons installer les modules de noeud avec npm i. Npm i est abrégé pour installé. Cela attirera tous les paquets dont nous avons besoin pour ce projet. Une fois cela fait, nous pouvons démarrer le serveur de développement avec npm run serve. puis cela va ouvrir notre projet sur l'hôte local. Si nous Commande ou Contrôle cliquez, cela ouvrira cela à l'intérieur du navigateur. Tout en développant ce projet. Nous pouvons laisser ce serveur de développement en cours d'exécution. Mais si nous voulons fermer cela, tout ce que nous devons faire est d'appuyer sur Control-C, qui va fermer notre serveur de développement pour que nous ne puissions plus accéder à notre site. Ensuite, pour redémarrer les choses, nous lançons ensuite npm run serve une fois de plus. Nous pouvons maintenant accéder à notre projet une fois de plus dans le navigateur. 32. Composants de fichiers uniques: Plus tôt, lorsque nous avons examiné les composants, nous avions un aperçu de ce que nous allons construire maintenant, ainsi que de la structure des composants aussi. En utilisant cette configuration de l'interface de ligne de commande de vue, nous pouvons créer ces composants dans leur propre fichier pour les garder organisés en utilisant la méthode des composants de fichier unique. Ceci est possible puisque l'interface de ligne de commande utilise des outils tels que Web Park pour les regrouper tous pour la production. Nous ne sommes donc pas pénalisés pour avoir beaucoup de fichiers à télécharger pour l'utilisateur. Sur les choses à noter est que nous avons un dossier de composants, mais nous pouvons créer des composants n'importe où à l'intérieur de ce dossier source. Mais généralement, nous les regroupons dans le dossier des composants, donc c'est plus organisé. Maintenant, nous allons créer notre premier composant pour ce projet, qui va être l'événement.Vue. En tant que convention de dénomination, nous commençons généralement les noms de composants par une lettre majuscule. Ces besoins ont l'extension .vue. Cet événement va être le composant que nous allons utiliser pour chacun des événements énumérés. Ici, nous pouvons configurer les composants comme nous l'avons vu précédemment avec nos sections libres. Avoir la section du modèle. Nous avons la section script avec nos valeurs par défaut d'exportation. Puis enfin en bas de la section des styles. Cela fonctionne comme auparavant lorsque nous avons examiné les composants mondiaux et locaux. Nous passons sur la section du modèle de notre HTML. C' est beaucoup plus pratique maintenant puisque nous pouvons simplement l'écrire comme un fichier HTML ordinaire, plutôt que d'inclure un ceci comme une chaîne. Notre JavaScript entre dans l'action des scripts, inclut nos données, nos méthodes, accessoires, et d'autres aussi. Nous enveloppons ensuite cela dans une valeur par défaut d'exportation, afin que nous puissions importer tous les composants dans d'autres fichiers. La section de style, il peut être écrit comme une feuille de style régulière. Le CSS que nous écrivons s'applique à l'ensemble de notre application, pas seulement au modèle à l'intérieur de ce fichier. Toutefois, si vous voulez limiter cela à s'appliquer uniquement au fichier unique, nous avons les attributs étendus. En outre, si nous voulons utiliser d'autres langues aussi, nous pouvons ajouter ceci comme un attribut Lang, dans le chargeur approprié. Mets-en plus sur ça plus tard. Voir notre composant. Nous devons d'abord ajouter du contenu à l'intérieur du modèle. Maintenant, allons à notre event.vue et simplement ajouter des éléments AP avec le texte de salut. Pour le moment, notre composant événementiel n'est qu'un fichier Vue régulier. Pour le voir, nous devons le placer exactement là où nous voulons qu'il apparaisse. Rappelez-vous dès le début, nous avons dur à ce fichier App.vue, qui est le fichier principal Vue.js, qui est monté sur le DOM. Donc, ça veut dire que tout commence d'ici. Ce sera l'endroit où nous pouvons ajouter et enregistrer, notre composant à afficher. Tout d'abord, nous pourrions supprimer les composants HelloWorld. Nous pouvons également supprimer cela du dossier des composants. Ensuite, nous pouvons enregistrer notre nouveau fichier Event.vue. Faites défiler jusqu'à juste au-dessous de cet exemple d'objet. Ici, nous voyons que nous essayons toujours d'importer l'exemple HelloWorld. Où au lieu de cela nous voulons importer notre événement, qui est également à l'intérieur du dossier des composants. Nous devons ensuite enregistrer ce composant pour l'utiliser dans notre modèle. Pour ce faire, nous transmettons notre nom importé dans l'objet components. Avec cela maintenant enregistré, nous pouvons aller jusqu'au modèle. Ensuite, je vais mettre ceci entre les balises d'un modèle. Nous pouvons même le faire comme un élément HTML avec la balise d'ouverture et de fermeture. Ou nous pouvons également utiliser une balise à fermeture automatique, tout comme nous le ferions avec une image. Enregistrez ceci et nous voyons le texte de haut à l'intérieur du navigateur. C' est un autre des avantages de l'utilisation de la configuration de l'interface de ligne de commande Vue. Par défaut, il inclut le rechargement à chaud, donc si nous sauvegardons le projet, il sera instantanément mis à jour dans le navigateur. Nous ne voulons évidemment pas ce message de salut, donc nous allons passer à nos composants Event.vue, et les remplacer par nos données d'événement. Chacun de nos événements va être entouré d'un article, sorte que nous pouvons changer cela en un élément article. Ensuite, un div qui va avoir la classe de données. Ensuite, à côté de cela, nous allons avoir une deuxième div, et cela va avoir la classe de compte à rebours. Cela nous donnera la structure dont nous avons besoin pour nos événements. La section données va contenir le nom ainsi que les détails de nos événements. Ensuite, la section compte à rebours ci-dessous sera la section à droite, qui comptera à rebours le nombre de jours pour ces événements. Donc, d'abord à l'intérieur des données, le titre de niveau trois, qui va être pour le titre. Pour l'instant, nous pouvons juste code dur dans tous les cas à l'intérieur d'ici, comme une graduation, une classe de nom. Qui utilisera NCSS, très bientôt. éléments AP, qui va être les détails. Ensuite, nous pouvons coder du texte pour nos détails. Cela va être toute la structure de la section de données, donc jusqu'au compte à rebours. Cela sera divisé en deux sections : La première va être un div, qui contiendra un bouton. Ce bouton affichera simplement une croix afin que nous puissions supprimer l'événement. Le wrapper aura une classe de remove_btn_wrapper, alors nous pouvons placer notre bouton imbriqué à l'intérieur. Pour nous donner la croix, nous pouvons ajouter une petite entité h, qui est l'esperluette, le hachage, puis la valeur de 10060. Ce serait un point-virgule et une classe de bouton, mais je vais style dans lequel va être remove_btn. Nous allons bientôt ajouter un style, donc cette section de données est sur la gauche, puis cette section de compte à rebours est sur la droite. Pour l'instant cependant, si nous allons en dessous de ce remove_btn_wrapper, la prochaine chose est d'ajouter des éléments AP, qui sera le nombre de jours restant. Pour l'instant, ce serait une valeur codée en dur de 56, une balise de rupture, puis à l'intérieur des petits éléments, nous pouvons avoir les textes des jours restants. faisant défiler vers le bas pour l'instant, tout ce que nous avons à faire à l'intérieur de notre action de scripts, c'est de donner un nom à ces composants. Étant donné qu'un composant nommé ne pouvait pas aider avec le débogage, puisque le nom du composant peut apparaître à côté des messages, ainsi que dans les outils de développement Vue aussi. Puis enfin, je vais style section en bas, et cela va aussi avoir les attributs sculpter. Ces styles ne s'appliquent donc qu'à ce modèle. De haut en haut, tout l'événement est entouré des éléments de l'article. Les couleurs seront bientôt dynamiques, mais pour l'instant, nous pouvons définir une couleur de fond de gris ardoise clair. Cela fera également usage de la flexbox pour la mise en page afin d'afficher flex. Ensuite, cela nous permettra d'utiliser une ligne d'éléments puis de censurer notre contenu. Rayon de bordure d'un rem. Comme il y aura plusieurs événements, nous pouvons également ajouter une marge à l'extérieur de cet article d' un rem en haut et en bas et zéro à gauche et à droite. Certains rembourrage, qui est l'espace dans, à l'intérieur de l'événement de 0.2 rems sur le haut et le bas. Ensuite, une plus grande valeur d'un rem à gauche et à droite. La couleur du texte se démarque uniquement sur les arrière-plans plus sombres de la fumée blanche. Enfin le poids de la police de 300. Ensuite, nous avons imbriqué à l'intérieur de la section de données et aussi la section de compte à rebours. Ceux-ci vont faire usage de la flexbox afin que nous puissions ajouter un peu d'espace dans. Pour ce faire, nous pouvons d'abord appliquer une valeur flexible aux données. Il devrait être une valeur de trois. Ensuite, nous pouvons passer à la section du compte à rebours. Si nous définissons la valeur de flex à l'intérieur sur un, la section de données prendra maintenant trois fois l'espace de la section de compte à rebours. Après le centre-ville, le texte-aligner pour être au centre, la taille de la police de 1,6 rems. Puis une planche sur le côté gauche, qui va diviser nos deux sections. Nous pouvons le faire avec une bordure à gauche, qui sera d'un pixel de large et une ligne solide. Après cela, définissons la taille de police pour notre texte de nom et aussi les détails. Nous ne nommons que les sections sont un peu plus grandes afin que nous puissions définir la taille de la police à 1,8 rems. Ensuite, la section de détails, qui sera un peu plus petite, alors allons pour une taille de police de 1,6. La dernière section est de prendre soin de ce bouton supprimer et aussi le texte. Donc, tout d'abord, passons par le bouton réel. Si nous faisons défiler vers le haut, nous pouvons voir que cela a une classe de remove_btn. Arrière-plan transparent pour supprimer la couleur de fond blanc. Réglez le bouton large de la bordure aucun. Nous pouvons également changer le curseur pour être un pointeur. Lorsque l'utilisateur passe la souris sur ce bouton. Enfin, nous pouvons pousser ce bouton sur le côté droit, en définissant la ligne de texte sur le wrapper. Le wrapper avait la classe de remove_btn_wrapper. La seule propriété CSS est de définir la ligne de texte à droite. Cela nous donne maintenant la base dont nous avons besoin pour notre événement. Maintenant, nous pouvons utiliser une boucle for, pour parcourir cet événement et rendre le contenu plus dynamique. 33. Dynamiser nos événements: Inclus avec ce cours à l'intérieur du fichier App.vue, j'ai fourni un tableau d'objets. C' est notre EventData que nous allons maintenant utiliser pour faire une boucle et les fournir en tant qu'accessoires à notre composant d'événement. Actuellement, cela est commenté car si nous avons une variable comme celle-ci et que nous ne l'utilisons pas, le plugin ESLint que nous utilisons dans, lancera une erreur. Maintenant, on va utiliser ça. Nous pouvons sélectionner tout cela et décommenter tout cela. Nous pouvons le faire en même temps avec surbrillance , puis une commande ou un contrôle à côté de la barre oblique. Une chose à surveiller ici est que nous ne pouvons pas placer dans un code JavaScript que nous voulons à l'intérieur de cette section de script, mais Soul Vue le reconnaît, il doit également être présent à l'intérieur de la valeur par défaut d'exportation. Nous devons donc maintenant créer une propriété de date, puis lui assigner ce tableau. Créez cette section de données, puis à l'intérieur de la section de retours, nous allons créer une propriété de date appelée events. Cela va être égal à notre tableau, qui est EventData. Vue est maintenant au courant de cette EventData puisqu'elle est maintenant stockée à l'intérieur des événements. Nous pouvons maintenant aller à notre modèle et nous allons parcourir tous ces événements. Ensuite, il crée un nouveau composant pour chacun d'eux. Pour cela, nous allons créer une liste non ordonnée et créer un élément de liste pour produire chacun de nos événements. Cet élément de liste va être répété, donc nous pouvons utiliser v-for. Nous dirons « événement dans les événements ». En outre, cela nécessite une clé dynamique derrière elle. Nous avons une valeur unique pour chacun, qui est cet ID. Ensuite, nous pouvons déplacer nos composants d'événements à l'intérieur de cet élément de liste où nous allons passer notre événement en tant qu'accessoire. Utilisez un deux-points car cela prend des données dynamiques, et nous allons définir ce nom comme événement, qui sera égal à notre variable d'événement de la boucle. Enregistrez ceci et instantanément nous verrons que nous avons six événements différents dans le navigateur. Étant donné que nous avons six événements à l'intérieur de nos données d'événement, nous avons, cependant tous les mêmes informations, ont tous le même nom et aussi la même description, et la même date à. Pour résoudre ce problème, nous allons passer à notre composant Event.vue. La première étape consiste à recevoir ces données comme accessoires. Props est un tableau qui prend dans nos chaînes, et seul le prop que nous recevons est l'information d'événement. Nous pouvons maintenant l'utiliser dans notre modèle. Nous avons le nom de l'événement, alors ouvrez les accolades doubles, puis remplace par l'événement .name. C' est notre nom maintenant pris en charge. Ensuite, dans la section détaillée, supprimez ceci. C' était l'événement. details. Bien. Tout cela fonctionne, mais ceux-ci ont toujours la même couleur de fond. Si nous allons à nos EventData, nous pouvons voir qu'une couleur d'arrière-plan différente a été fournie pour chacun de ces événements. Nous pouvons maintenant utiliser cela dans notre composant d'événement en passant ceci comme une propriété de style dynamique et l'utiliser pour définir l'arrière-plan. À l'intérieur de l'article d'ouverture, nous pouvons utiliser le deux-points pour lier une section de style dynamique. Rappelez-vous, nos styles sont transmis comme un objet, nous devons donc ouvrir les accolades. A l'intérieur, nous allons définir l'arrière-plan pour être égal à notre event.background. Bien. Cela nous laisse juste avec le nombre de jours restants que nous allons revenir puisque nous n'avons pas besoin d'effectuer un calcul à partir de l'EventDate. Je vais également corriger le contraste de couleur aussi pour les arrière-plans comme ce jaune, où nous ne pouvons pas voir le texte qui a été superposé. Pour finir, nous allons juste ajouter un peu de CSS, tout d'abord, à notre liste dans la section de l'application et faire défiler vers le bas jusqu'à la section de style en bas. Les événements sont entourés de la liste non ordonnée, que nous allons définir pour avoir un remplissage zéro pour supprimer les paramètres par défaut du navigateur. Ensuite, chacun de ces événements est stocké dans l'élément de liste. Donc, nous allons définir le style de liste à zéro. Enfin, le curseur sera un pointeur chaque fois que je survolerai l'un de ces éléments de liste. Pour restreindre également la largeur maximale de ces événements, si nous étirons le navigateur, nous allons maintenant définir la largeur maximale à l'intérieur de ce wrapper d'application. Cette application est le wrapper pour toute notre application, et nous pouvons le voir si nous allons dans notre index.html. C' est la section juste ici où notre application est montée. Cela s'appliquera à l'échelle mondiale. Tout ce que je vais faire ici, c'est de définir la largeur maximale à 600 pixels. Ensuite, nous pouvons centrer cela avec marge zéro auto. Zero définira la marge tout en haut et en bas , puis auto appliquera toute la marge, qui est disponible également à gauche et à droite. 34. Calculer le nombre de jours restants: Pour chacun de nos événements, nous devons calculer le nombre de jours restant jusqu'à ce que l'événement se produise. Pour ce faire, nous allons créer un calcul basé sur la date actuelle, puis la date à l'intérieur de nos objets, donc cette propriété à l'intérieur de chacun de nos éléments. Une fois que vous avez ceci et les dates actuelles, nous pouvons alors déterminer la différence entre ces deux dates et ensuite convertir cela en nombre de jours. C' est à l'intérieur du [inaudible] que nous allons créer une méthode. Sous la section données, nous pouvons créer notre section de méthode, et le nom de la méthode sera Jours restants. jours restants vont prendre dans l'événement particulier que nous voulons calculer. Cela va bientôt calculer le nombre de jours restants. Mais d'abord, nous avons besoin d'un moyen d'appeler réellement cette méthode et aussi de fournir les données d'événement. Eh bien, nous ne pouvons pas tout faire en même temps dans notre modèle. Nous pouvons mettre en place une propriété qui va être transmise à nos événements. Ce sera dynamique, et ce sera le nombre de jours restant. Cela peut être défini sur l'ancienne méthode, qui est également appelée Days Left, où nous allons passer dans chaque événement individuel, qui est de notre boucle. Une chose à retenir ici, nous ne sommes pas en fait passer cette méthode comme un accessoire. Au lieu de cela, ce que nous allons faire est de passer le résultat de cette méthode, qui va être retourné. La façon dont nous pouvons le faire est d'appeler cette fonction, puis de fournir une section de retour à la fin. Nous allons retourner la valeur plutôt que la référence réelle à cette méthode. Vérifions d'abord que notre méthode fonctionne et nous recevons les données d'événement en faisant un journal de console. Faisons l'event.date et pour cela, nous allons avoir besoin d' aller dans les outils de développement du navigateur avec un clic droit et inspecter, ouvrir la console et maintenant nous voyons six dates différentes puisque nous appelons cette méthode pour chacun de nos événements, principalement cela fonctionne bien. Maintenant, nous devons travailler avec certaines méthodes de date JavaScript, et pour obtenir la date actuelle, nous pouvons utiliser date.now. d'abord, faisons cela à l'intérieur d'un journal de console et nous pouvons vérifier que nous avons toutes les informations dont nous avons besoin pour enregistrer les données maintenant. Ensuite, nous sommes peut rafraîchir le navigateur, et cela peut sembler assez déroutant, mais nous devons regarder chacun de ces inconvénients. Nous faisons deux journaux de console pour chaque fois que la méthode est appelée. Les deux premiers sont pour le premier événement, le troisième, le quatrième élément est pour le deuxième événement et ainsi de suite. Nous pouvons voir que les deux événements .date, qui est le premier sur la date.now est dans des formats complètement différents. La première date de l'événement est une chaîne, qui est l'année, le mois, et enfin le jour, puis en dessous de la date actuelle. La date actuelle va être formatée en quelques millisecondes depuis le 1er janvier 1970. Pour comparer ces deux, nous devons convertir la date de l'événement pour être dans le même format, et pour ce faire JavaScript nous fournit une méthode de date appelée Pass, on est de remplacer, encore une fois nous accèderons à l'objet date et appelons la méthode Call Pass. Où nous allons passer dans notre event.date, actualisez le navigateur et nous allons maintenant voir que chaque paire de dates que nous avons maintenant est dans le même format. C' est bien parce que cela signifie maintenant que nous pouvons comparer nos deux dates que nous avons. Nous devons construire cela en plusieurs étapes. La première étape consiste à déduire la date actuelle de la date de l'événement. Attrapez ceci et nous déduirons date.now. Cela nous donnera la différence que je vais stocker dans une constante appelée Temps. Tout comme les résultats à l'intérieur de la console cette fois, variable va également être stockée en millisecondes. Cette constante de temps est stockée en millisecondes, donc nous devons maintenant le convertir. Prenez toutes les constantes et pour convertir les millisecondes en secondes, nous divisons le résultat par 1000, ce qui nous donnera ensuite le nombre de secondes entre la date actuelle et la date de l'événement. Mais nous ne voulons pas le nombre de secondes. Ce que nous voulons faire, c'est convertir cela en nombre de jours. Pour convertir ces jours de secondes, nous devons d'abord multiplier cela par 60 secondes, puis encore une fois, nous allons multiplier cela par 60 minutes et enfin, nous allons multiplier cela par 24 puisque nous avons 24 heures par jour. Ce seront nos nouveaux résultats que nous pouvons stocker à l'intérieur d' une constante appelée Jours et nous assurer que l'éditeur de texte ne place pas ces crochets aux mauvais endroits. Nous devons fournir les parenthèses autour des chiffres. récapituler, nous avons le temps en millisecondes. Pour convertir cela en secondes, nous divisons ceci par 1000. Nous multiplions cela par le nombre de secondes dans un jour, le nombre de minutes dans un jour, puis le nombre d'heures dans un jour, ce qui donne le nombre de jours entre notre date actuelle et la date de l'événement. Nous pouvons faire un pas en dehors de ces deux en réduisant 60 multiplié par 60 au lieu de passer le résultat de 3.600. C' est exactement la même chose, mais juste une façon plus courte de faire les choses. La dernière chose à faire pour obtenir notre nombre de jours correctement formaté est d'arrondir ce nombre. Découpez le résultat de cela, utilisez une fonction mathématique appelée Seal, qui va arrondir notre nombre au nombre entier le plus proche. Passes [inaudible]. Nous pouvons nettoyer nos journaux de console et c'est ce nombre de jours que nous voulons revenir de cette méthode. C' est la valeur de retour qui va être transmise en tant que prop au composant d'événement. Passons à ce composant d'événement maintenant, nous pouvons recevoir ceci comme un accessoire à l'intérieur de notre tableau. Cet accessoire était encore jours, alors nous pouvons vérifier si cela fonctionne en sortant cela à l'intérieur de notre modèle. Au lieu de cette valeur codée en dur, supprimons ceci et la sortie prop qui restait jours. Au-dessus du navigateur et cela a maintenant changé pour chacun de nos événements. Notez qu'il verra à la fois des chiffres positifs et négatifs et c' est tout à fait normal et c'est quelque chose que nous aborderons bientôt. 35. Rendu conditionnel: Plus tôt, lorsque nous avons examiné ce tableau de données d'événement pour la première fois, j'ai recommandé que vous définissiez certaines des dates dans ces objets soient dans le passé et d'autres dans le futur. Si vous ne l'avez pas encore fait, ce sera le moment de le faire. C' est ce que je voudrais que vous fassiez : définissez au moins une date pour être dans le passé, une pour être avec la date d'aujourd'hui, une pour la date de demain et une autre avec une date future. Cela aidera à tester les choses très bientôt. Pour ce faire, nous allons utiliser le rendu conditionnel, ce qui est un moyen de montrer seulement quelque chose, comme notre événement, quand une certaine condition est remplie. Dans notre cas, la condition sera le nombre de jours restants, que nous avons configuré à partir de la dernière vidéo à l'intérieur de cette méthode. Si cela renvoie un nombre positif, cet événement n'a toujours pas lieu. Cependant, si elle renvoie un nombre négatif, nous savons que cette date est passée. qui signifie que nous pouvons cacher cela à l'utilisateur à l'intérieur du navigateur. Pour ce faire, nous allons passer à notre event.view, puis ouvrir à l'intérieur de la section d'ouverture de l'article. Nous pouvons afficher et masquer ces événements en utilisant une directive de vue appelée v-show.v-show est une autre directive et ne montrera cet élément que si cette condition est vraie. Par exemple, si 10 est supérieur à 1, c'est maintenant vrai et nos événements s'afficheront maintenant. Si nous disons que si 10 est égal à 1, ce n'est pas vrai, donc cela va maintenant supprimer nos événements. Mais au lieu de cela, ce que nous devons faire est de regarder ces jours gauche prop et de décider si c'est un nombre positif ou négatif. Pour d cela, nous pouvons utiliser une fonction JavaScript appelée Math.sign. Cela nous permettra de passer n'importe quel nombre et de récupérer soit un négatif, un positif ou un zéro. Nous pouvons voir ici avec les exemples, si nous passons dans la valeur de trois, obtiendra une sortie d'un. Si c'est négatif, nous obtiendrons la valeur de négatif. Si c'est zéro, nous obtenons la valeur de zéro. Peu importe la valeur du nombre que nous passons, nous allons seulement en récupérer un, un négatif, ou un zéro. Cela va être parfait pour l'utilisation dans notre v-show passons en math.Sign et puis nos jours gauche prop. Nous pouvons maintenant vérifier si cela est égal à négatif ou au projet. Les résultats que vous voyez ici dépendront la date que vous avez définie pour chacun de vos événements. Je n'ai actuellement qu'un seul événement qui est dans le passé, donc je ne vois qu'un dans le navigateur. Pour voir les événements qui n'ont pas encore lieu, nous pouvons changer cela pour être positif. Mais avec ces deux options, nous n'avons vu que cinq de nos six événements. C' est parce que nous avons fixé l'un de ces événements à la date d'aujourd'hui, ce qui signifie qu'il ne restera plus aucun jour. Pour faire face à cela, nous allons définir ceci pour ne pas être égal à négatif, qui va filtrer toutes les dates d'expiration et nous laisser avec la date qui sont soit aujourd'hui, soit n'importe quelle autre date dans le futur. La prochaine chose à prendre en charge est le texte, qui est les jours qui restent. Si le nombre de jours restant est nul, il devrait lire aujourd'hui, et pour tous les événements passés, il devrait lire il y a quelques jours. Nous pouvons, encore une fois, utiliser les jours restants prop, qui est EventReceive, et le combiner avec d'autres directives de vue appelées v-if et v-else. Au fur et à mesure qu'ils sonnent, ceux-ci fonctionnent comme les instructions JavaScript if-else. Nous fournissons deux sections de code appelées if et else. Si la condition est vraie, cette section s'exécutera. Si c'est faux, la section else qui s'exécutera à la place. En bas de ce modèle d'événement, nous avons ces éléments p, que je vais mettre à cette section juste au-dessus. Examinons d'abord les événements d'aujourd'hui. Ouvrez les éléments p et nous allons définir le texte pour être aujourd'hui. Alors, quelle condition voulons-nous afficher cet élément ? Eh bien, nous allons vérifier si le nombre de jours restant est égal à la valeur de zéro. Nous pouvons alors combiner cela avec une directive v-if et vérifier si le nombre de jours restant est égal à zéro. Si cela est vrai, cela va rendre le texte d'aujourd'hui pour cet événement particulier. Sauvegardez ceci, et nous n'avons qu'un seul événement qui est aujourd'hui, et nous voyons ce texte à l'intérieur ici. Cela laisse maintenant nos deux éléments p l'un à côté de l'autre, mais nous voulons seulement montrer l'un ou l'autre. Pour cela, nous pouvons ajouter la directive v-else à l'élément p suivant. Sauvegardez ceci, et maintenant nous ne voyons jamais qu'une de ces sections en fonction du nombre de jours restant. C' est une chose à prendre en compte lors de l'utilisation de v-if et v-else, la section v-else doit immédiatement suivre l'élément v-if, donc nous ne pouvions pas avoir quoi que ce soit entre les deux, comme une travée. Comme nous pouvons le voir, cela provoquera une erreur. Cela signifie maintenant que le premier élément d'aujourd'hui montrera si le nombre de jours est nul. Si l'événement est passé ou futur, le deuxième élément p s'affiche. A l'intérieur de ce second élément p, il y a quelques travaux supplémentaires que nous devons faire pour montrer les mots corrects. Tout d'abord, à l'intérieur de la petite section, nous avons ce mot de jours. Ce mot devrait être changé pour le mot jour s'il ne reste qu'un jour et que l'opérateur ternaire JavaScript va aider avec cela. Découpez ça, ouvrez les accolades. Nous pouvons vérifier si le nombre de jours restant est égal à un. Si c'est vrai, nous afficherons la chaîne du jour. Si ce n'est pas le cas, on dira les jours. C' est un point d'interrogation. Nous sauvegardons cela est tout dans notre travail et nous voyons un jour dans le navigateur, 59 jours et un 144 jours aussi. Nous devons aussi faire une chose similaire pour ce mot de « gauche ». Pour voir cela, si nous passons par là et modifions temporairement ceci pour être positif, tous les événements qui ont expiré, le texte devrait se lire « il y a quelques jours ». Supprimons le mot de « gauche », ouvrez les accolades doubles, et puis nous allons faire une chose similaire trop haut à l'endroit où nous utilisons les mathématiques.Signez pour vérifier si cela est un nombre positif ou négatif, comme dans les jours à gauche. Ensuite, nous allons vérifier si le numéro retourné n'est pas égal à négatif. Cela retournera vrai si la date est dans le futur, et nous pouvons sortir le texte qui va être « gauche ». Ou alternativement le texte de « ago ». Au-dessus du navigateur la section fonctionne maintenant, nous voyons « il y a 12 jours ». Changez ceci pour être négatif. Pour les événements futurs, il nous reste des jours. Autre chose que nous devons nous occuper c'est que si nous changeons ce chiffre pour être positif, pour tous les événements qui ont expiré, nous voyons encore 12 négatifs. Cela devrait être simplifié pour simplement dire « il y a 12 jours ». Pour cela, nous pouvons utiliser une autre fonction de mathématiques JavaScript, qui est appelée absolue. Si nous revenons sur le site de Mozilla et vers le bas dans la section méthode, nous avons cette maths.abs. Jusqu' à la section exemple, nous pouvons voir si nous passons un nombre négatif ou un nombre positif, cela retournera toujours la valeur absolue sans le symbole négatif et ce sera idéal pour notre cas d'utilisation. Retour à notre modèle et où nous sortons le nombre de jours restants. Nous allons maintenant passer ceci dans Math.abs, sauvegardez ceci, et maintenant notre numéro négatif devrait être supprimé. Vérifions simplement que les nombres positifs fonctionnent bien et tout cela fonctionne maintenant aussi. 36. Plus sur le rendu conditionnel: Jusqu' à présent, nous avons utilisé v-show, v-if et v-else pour montrer et cacher nos éléments. Mais quelle est la différence entre eux ? Jetons un coup d'oeil à ceci et à d'autres choses que nous pouvons faire avec le rendu conditionnel. Voici un exemple simple qui pourrait être utilisé sur une application bancaire ou similaire, qui demande à l'utilisateur de changer le mot de passe après un certain nombre de jours. Cet exemple simple ne serait pas bon si l'utilisateur a changé le mot de passe hier ou même il y a 10 minutes. Nous utiliserons des rendus conditionnels qui n'affichent ce message que si l'utilisateur n'a pas été connecté pendant plus de 100 jours par exemple . Cela fonctionnerait, mais la directive v-for a été répétée. Peut-être pas un gros problème pour ce petit exemple. Que se passe-t-il si une section complète s'appuyait sur cette condition qui doit ajouter cette directive à beaucoup d'éléments ? Une autre façon consiste à regrouper tous ces éléments à l'intérieur d'une balise de modèle. Nous pourrions alors ajouter la directive v-if à ce wrapper. Ça s'appliquerait à tout ce qui est à l'intérieur. Ce modèle pourrait également être un div, une section ou l'un des éléments. Pour le bénéfice de l'utilisation du modèle est qu'il ne sera pas rendu dans le navigateur. Le navigateur va lire le code comme nous le voyons en bas. Il agit comme un wrapper invisible donc nous n'interférerons pas avec le reste de notre code, optimisons les divs rapides inutiles. Dans la vidéo précédente, nous avons regardé l'utilisation v-if et v-else. Mais si on avait une troisième condition ? Autrement dit, nous pourrions également utiliser v-else-if. Dans cet exemple plus complexe, nous accueillons de nouveau l'utilisateur si le nombre de jours écoulés depuis la dernière connexion est inférieur à 50. Ensuite, v-else-if peut être attaché aux éléments simples suivants ou à un groupe d'éléments en utilisant le wrapper de gabarit. La section vérifie si le nombre de jours écoulés depuis la dernière connexion est compris entre 50 et 99, puis demandera à l'utilisateur de réinitialiser son mot de passe bientôt. Ensuite, en tant que dernière section, nous pouvons utiliser la directive else, et elle fonctionnera si les deux conditions ci-dessus n'ont pas été remplies. signifie que cela s'exécutera si l'utilisateur ne s'est pas connecté pendant cent jours ou plus. Nous leur demanderons ensuite de réinitialiser leur mot de passe. Nous pourrions également utiliser plusieurs sections v-else-if aussi, et c'est si nous avons plus de trois conditions que nous voulons vérifier comme nous pouvons le faire avec JavaScript régulier. Nous pouvons utiliser autant de ceux-ci que nous le voulons tant que chacun de ces éléments suit l'un de l'autre. Nous avons maintenant vu v-show et v-if comme différentes façons de rendre des éléments conditionnellement. Mais pourquoi la vue a-t-elle les deux façons quand elle semble faire la même chose à la surface ? En dessous de montrer et de cacher des choses, il y a quelques différences. Les éléments show sont toujours rendus dans le DOM. Même s'ils ne sont pas visibles, ils sont toujours là. Il utilise la propriété d'affichage CSS sous les hottes pour afficher et masquer. Il ne peut pas être utilisé en combinaison avec des éléments de gabarit comme wrapper, ni être utilisé en combinaison avec v-else. Puisque cette directive est toujours présente dans le DOM et que la propriété d'affichage CSS est utilisée pour basculer, c'est souvent un bon choix si nous nous attendons à ce qu'elle bascule régulièrement. V-if est plus un rendu conditionnel réel. Contrairement à v-show, v-if n'est pas toujours présent dans le DOM, place, il ne rend que si la condition est définie sur true. Si une condition devient fausse, toutes les sections et les contrôles seront complètement détruits, y compris tous les écouteurs d'événements ou les composants enfants. Comme il y a un coût légèrement plus élevé de compléter complètement ou de déplacer les sections, il peut être avantageux d'utiliser lorsque l'on s'attend à ce que la condition change moins fréquemment. Tous ont besoin de le démonter complètement du DOM. 37. Propriétés computed: Nous avons récemment créé cette section DaysLeft, qui a un peu de logique JavaScript imbriquée à l'intérieur. Même si tout ce code a parfaitement fonctionné, les choses commencent à devenir un peu désordonnées. Il peut être généralement recommandé d'extraire logique plus complexe de nos modèles lorsque cela est possible, laissant le modèle plus proche du HTML auquel il était destiné. Aide avec cela, nous ne pouvons pas externaliser cette logique dans notre section de script en tant que méthode. Faisons ça. Eh bien, les accessoires. Prévisualiser les méthodes et le nom de la méthode que je vais donner c'est la chaîne DaysLeft. Cela va être responsable du retour d'une chaîne qui remplacera tout le texte que nous voyons sur le côté droit. Il dira joursGauche, il y a quelques jours, selon le nombre de jours restants. Pour cela, nous pouvons réutiliser la plupart de la section entre ces petites balises, alors copiez les deux lignes de code à l'intérieur des accolades. Ceci peut maintenant être utilisé comme point de départ pour notre méthode. Nous ne sommes plus dans notre modèle, nous devons donc supprimer les accolades doubles pour chacune de ces sections. Aussi, puisque nous faisons maintenant référence à DaysLeft, et à ce chemin de notre instance Vue. Nous devons nous référer à cela avec this.daysLeft dans nos deux lignes de code. Ensuite, stockez chacune de ces lignes dans une constante. Ce sera soit le jour, soit le mot jours. Je ne veux pas appeler mon jour ou mes jours constants. Donc, cela est égal à cette valeur. Ensuite, une seconde constante, qui sera soit le mot gauche ou aller. Ensuite, nous pouvons retourner la valeur de ces deux mots combinés. Nous devons retourner quelque chose comme il y a quelques jours ou DaysLeft. Nous pouvons le faire en retournant la valeur. Ensuite, nous devons additionner ces deux constantes et les renvoyer à partir de la méthode, donc ce serait jour ou jours plus la valeur de left ou go. Nous pouvons maintenant appeler cette méthode à la place de l'endroit où nous découpons ces deux lignes de code. Entre les petites sections, nous ouvrons les accolades doubles, puis cela appelle notre méthode. Puisque nous voulons réellement exécuter cette fonction, nous l'appelons en utilisant les crochets. Cela sera remplacé par la nouvelle valeur de chaîne, qui va être retournée à partir de notre méthode. Cela nous laisse avec des modèles beaucoup plus propres, et nous pouvons également réutiliser le code ailleurs si nécessaire. Essayons ça. Vous voyez qu'il reste un jour, c'est tout ce que nous sommes confinés, et changez ça en un nombre positif. Cela devrait maintenant dire il y a quelques jours, le plus grand espace entre ces deux, tout ce que nous avons à faire est juste d'ajouter un espace à l'intérieur de notre chaîne. Après jour ou jours, et un espace et cela sera affiché dans le navigateur. C' est bon mais pas toujours la meilleure solution pour tous les cas, car une méthode doit être appelée manuellement, comme nous le faisons ici. La méthode ne sera appelée qu'une fois que le composant sera chargé. Si un jour passe et que le nombre de jours change, l'interface utilisateur ne sera pas mise à jour avec la nouvelle valeur, jusqu'à ce que nous actualisions la page ou appelions cette méthode manuellement. Les situations comme celle-ci, nous pourrions utiliser une propriété calculée. Calculé est une autre section qui est des options possibles API, que nous avons utilisé jusqu'à présent avec les données et les sections de méthodes. La structure est exactement la même que notre section méthode. Donc, tout ce que nous avons à faire est de changer cela pour être calculé. Je vais voir tout de suite cela provoque une erreur, qui est parce que contrairement à une méthode, nous n'avons pas besoin d'appeler cela en utilisant les crochets. Tout ce que nous devons faire est de fournir une référence qui est une propriété calculée et cela fonctionne toujours exactement la même chose. Une méthode et une propriété calculée ont la même apparence sur la surface. Nous appelons une méthode manuellement, mais une propriété calculée mettra automatiquement à jour le modèle si des changements se produisent à l'intérieur d'ici. Nous voyons actuellement à l'intérieur d'ici nous avons quelques données réactives, qui est this.DaysLeft. Si une propriété calculée contient des données réactives comme celle-ci, ou toute autre propriété ou méthode de données. Chaque fois que les données sont mises à jour, il met automatiquement à jour le modèle. Ce qui signifie que si DaysLeft change, notre modèle changera automatiquement en. Ces propriétés calculées sont également très efficaces, elles sont mises en cache et ne réévalueront que si quelque chose de réactif change. Si rien à l'intérieur d'ici ne change, [inaudible] cette propriété calculée entraînerait les résultats mis en cache retournés, ce qui rendrait très efficace à utiliser. Un autre exemple d'une propriété calculée serait de modifier le contraste de couleur entre nos arrière-plans d'événements et notre texte. Si nous revenons à un résultat négatif, le fond jaune est difficile à lire, et aussi un peu pour le vert aussi. Pour les événements qui ont ces deux jeux d'arrière-plan, nous allons assombrir la couleur du texte. Ce sera également une propriété calculée donc juste après notre chaîne DaysLeft, la deuxième propriété calculée va être appelée ChangeContrast. C' est notre [inaudible] tout comme une méthode et tout comme notre précédente section calculée. La première étape consiste à mettre en place une constante qui va être un tableau avec nos deux couleurs de fond. J' appellerai ça les arrière-plans à faible contraste. Si vous modifiez l'une des couleurs à utiliser avec vos événements, cela peut également changer les valeurs à l'intérieur d'ici aussi. Les valeurs jaune et verte seront f9f970, puis le deuxième élément du tableau est 68ee94. Ne vous inquiétez pas si vous voyez une erreur à ce stade. Cela signifie simplement que nous avons créé ce tableau, mais nous ne l'avons pas encore utilisé. Ensuite, nous devons vérifier si cet événement actuel a l'un de ces deux jeux d'arrière-plan, nous avons l'événement passé comme un accessoire. Chacun de ces événements possède une propriété d'arrière-plan. Ce qui signifie que vous pouvez maintenant vérifier si notre event.background inclut l'une de ces couleurs de tableau. La façon de ce faire est d'accéder à une méthode de tableau JavaScript appelée includes. moyen de le faire est d'accéder à notre tableau qui est des arrière-plans à faible contraste, puis appeler une méthode JavaScript appelée includes. Cela débarquera saisir toutes les valeurs à l'intérieur d'ici, et vérifier si inclut une valeur particulière. Une valeur particulière que nous voulons vérifier est l' event.background puisque cela est également à l'intérieur de notre instance de vue, nous utilisons ce mot-clé avant d'appeler event.background. Une propriété calculée doit toujours renvoyer une nouvelle valeur. Cette nouvelle valeur sera true ou false, selon que cette couleur est incluse comme arrière-plan de l'événement. Ainsi, nous pouvons appeler cette propriété calculée ChangeContrast. A l'intérieur des accolades doubles ou des endroits juste en dessous de notre article de clôture. Ceci, et plus au navigateur, sorte que le jaune est un peu difficile à voir, mais vraiment sélectionner tous. On voit que le jaune est vrai. Nous sommes faux pour les autres couleurs. Ce vert est également montré faux alors voyons ce qui se passe ici. C' est 68ee94, on peut juste comparer ça. C' était la conférence, je pense que c'est juste à cause des lettres majuscules. Alors changeons cela, en faisant de cela une correspondance exacte. Maintenant, cela est réglé sur deux comme prévu. Nous ne voulons pas seulement afficher la valeur de true ou false donc dans notre modèle. Une meilleure utilisation serait d'appliquer une couleur de texte sombre uniquement si cela aboutit à true. Nous avons déjà examiné la façon de le faire en utilisant un attribut de style lié. Ceci est déjà réglé pour chacun de nos articles séparés par une virgule. Nous pouvons également définir la propriété de couleur CSS, en fonction de la valeur de ChangeContrast. Si ChangeContrast doit être égal à deux, nous utiliserons l'opérateur ternaire JavaScript, le basculement entre deux couleurs différentes. Si c'est vrai, la couleur que nous voulons placer est une valeur hexadécimale de 45 avant qu'elle ne tombe. Si c'est faux, ce qui signifie que nous ne sommes pas sur les arrière-plans à faible contraste. Nous pouvons ensuite définir la couleur de la police pour être la valeur de la fumée blanche. Enregistrer et la couleur du texte a maintenant été mise à jour pour l'arrière-plan jaune et aussi vert. Les avantages de l'utilisation d'une propriété calculée ici sont que plus tard, nous allons permettre à l'utilisateur d'éditer chacun de ces événements, y compris la couleur d'arrière-plan, ce qui signifie qu'il surveillera toute modification de l'arrière-plan, , puis mettez à jour la couleur si nécessaire. 38. Watchers et nœuds racine multiples (fragments): Outre les propriétés de l'ordinateur, UJS nous offre également une autre façon de surveiller les changements de données. Ensuite, en exécutant du code après cela s'est produit, c'est en utilisant un observateur. Pour ce faire, nous devons ajouter la propriété watch à notre objet options dans le fichier App.Vue, nos données et de nos méthodes. Nous pouvons placer dans notre section de montre comme un objet. À l'intérieur, nous allons passer dans une fonction de rappel, qui fonctionne lorsque l'une des données que nous regardons et va changer. Nous pouvons regarder quand une propriété de données, un accessoire ou même une propriété calculée change en nommant la fonction de rappel à la valeur que vous voulez regarder. Ainsi, par exemple, si nous avions une propriété de données appelée DarkModeset, qui était initialement définie sur false, nous nommerions alors notre observateur d'après cette propriété que nous observons. Donc, pour celui-ci, ce sera DarkModeset, puis nous exécuterions du code à l'intérieur. Donc, vous feriez mieux de voir cet exemple, nous pouvons également ajouter un bouton qui va basculer entre true et false. Ouvrez le modèle en haut, configurez le bouton avec un écouteur d'événement au clic, qui va définir DarkModeset pour être égal à l'opposé, puis je vais mettre la valeur juste en dessous pour vérifier que cela fonctionne. Je devrais maintenant être capable de basculer la liste entre true et false. Une autre chose que nous avons fait ici est également tiré parti d'une autre fonctionnalité libre Vue, qui est plusieurs nœuds racine, également appelés fragments. Ici, à l'intérieur de notre modèle, nous avons placé un bouton à côté de notre liste non ordonnée. Donc efficacement, nous avons deux racines ou nœuds parents. Auparavant, lors de l'utilisation de Vue 2, nous devions envelopper tout ce contenu dans un seul élément parent. Donc, par exemple, il faudrait utiliser un div ou un wrapper similaire, puis placer notre code à l'intérieur. Ceci n'est plus requis dans Vue version 3, et cela évite d'ajouter des wrappers inutiles dans notre HTML. Revenons à notre watcher qui a été configuré, nous pouvons également transmettre à notre watcher la valeur, qui sera la valeur après que les données ont changé. Je veux nommer ça comme val, mais ça peut être tout ce que tu préfères. Nous pouvons voir cela avec un journal de console, puis ouvrir les outils de développement. Nous n'avons rien affiché dans le navigateur, mais si nous cliquons sur le bouton bascule, cela reflétera alors les données après que cela a changé. Donc, c'est maintenant vrai, cliquez dessus à nouveau. Ceci est maintenant changé en faux. Cela nous donne maintenant la possibilité d'exécuter le code que vous voulez après que quelque chose soit changé. Il nous donne également accès à la nouvelle valeur. Mais que faire si nous voulions également accéder à l'ancienne valeur avant que le changement ne se produise. Cela, nous pouvons passer en deux paramètres. Encore une fois, nous les noms de notre choix. Ainsi, le premier peut être la nouvelle valeur, puis le second, l'ancienne valeur. Placez les deux à l'intérieur de notre journal de console. Ouvrez les outils de développement. Maintenant, si nous cliquons sur « Basculer », cela nous donnera maintenant accès à la nouvelle et aussi aux anciennes valeurs. Donc, c'est ainsi qu'un observateur fonctionne au plus simple, et cela est souvent suffisant pour couvrir autant de cas utilisés. Mais il y a aussi quelques autres options disponibles et aussi quelques cas Edge aussi. [ inaudible] veulent regarder un objet ou un tableau, voyons cela en changeant ceci pour regarder notre tableau d'événements. Maintenant, nous pouvons essayer d'ajouter un nouvel événement et voir ce qui se passe lorsque nous essayons de mettre à jour ceci. Revenez donc à notre modèle, et cette fois nous allons accéder à nos événements. Puis peut pousser à la fin un nouvel événement. Nous pouvons saisir n'importe lequel de ces événements comme un modèle, coller ceci et juste changer certains détails, ce sera le numéro sept. Puisque nous sommes à l'intérieur de ces guillemets doubles, nous devons savoir utiliser les guillemets simples à l'intérieur de cet objet. Alors passez par chacun de ceux-ci et changez les guillemets doubles pour être simples. Ensuite, une fois que nous avons fini avec cela, nous pouvons maintenant tous mettre la valeur des événements. Enregistrez ce fichier. Nous voyons que nous avons toutes les valeurs de un à six. Cliquez sur un bouton. Notre sept objet est en train d'être ajouté. Ouvrez les outils de développement, cliquez sur « Actualiser ». Voyons ce qui se passe avec notre observateur. Cliquez sur « Basculer ». Maintenant, notre septième événement a été ajouté, mais nous ne voyons rien à l'intérieur de la console. Même si nous surveillons toujours l'ancien et les nouveaux événements, et essayons également de le connecter à la console juste ici, Cela signifie maintenant que notre observateur semble ne pas réagir à des changements. Cela se produit lorsque nous regardons un tableau ou un objet. Si vous êtes familier avec la façon dont JavaScript gère les types primitifs et de référence, cela aura plus de sens pour le moment. Si ce n'est pas le cas, cela est couvert dans une vidéo de réactivité ultérieure. Pour l'instant cependant, vous devrez comprendre que lorsque nous faisons référence à un objet ou à un tableau, toute modification des éléments ou des propriétés de l'objet imbriquées à l'intérieur ne déclenchera pas de mise à jour. Pour que ce watcher soit déclenché, nous aurions besoin de remplacer le tableau complet ou l'objet, plutôt que l'une des propriétés que nous avons à l'intérieur. Ou bien, nous pouvons passer dans une option profonde qui dira à Vue juste de surveiller également tous les changements qui sont imbriqués à l'intérieur. Pour passer cet objet profond, nous devons également changer la façon dont nous construisons notre observateur. Plutôt que de configurer une fonction de rappel comme nous l'avons ici, nous devons également changer cela pour être un objet. Cet objet signifie maintenant que nous surveillons toujours l'un de ces événements. Nous pouvons maintenant passer certaines options. La première propriété est cette option profonde, que nous allons définir sur true. Séparé par une virgule, nous ajoutons ensuite notre fonction de gestionnaire, qui va s'exécuter à chaque fois que ces données d'événement changent, et c'est à l'intérieur de cette méthode de gestionnaire, qui va remplacer notre fonction de rappel. Donc, tout comme avec tout cela, peut également prendre dans la valeur que vous pouvez vous connecter à la console, actualiser et ouvrir les outils de développement. Maintenant, lorsque nous ajoutons nos événements supplémentaires, cela est maintenant reflété dans la console. Ouvrez ceci et cliquez sur la section du tableau, et nous avons sept objets différents. Notez également ici à l'intérieur de notre watcher, nous ne transmettons au gestionnaire qu'un seul paramètre. Cela est à nouveau dû au fait que nous regardons un objet ou un tableau. Nous n'avons maintenant accès qu'à la nouvelle valeur, plutôt qu'à l'ancienne valeur. Une autre propriété que nous pouvons ajouter à ce watcher est Immédiate. L' option Immédiate nous permettra d'exécuter le watcher dès que notre composant se charge, ainsi que l'un des changements. Donc, actuellement, laissez-moi rafraîchir le navigateur. Nous voyons que ce watcher n'est pas exécuté immédiatement tant que nous n'avons pas apporté des modifications à ces données. Si nous voulions que ce watcher fonctionne également dès que le composant se charge, nous passons l'option Immédiate, puis nous allons définir ceci sur true. Testez ceci, ouvrez le navigateur, actualisez. Nous voyons que le watcher est exécuté immédiatement, et peut également cliquer sur le bouton « Basculer » aussi. Il se passe un peu ici et vous vous demandez peut-être pourquoi Vue nous fournit à la fois le watcher et les options calculées. Lorsque les deux semblent faire des choses similaires à la surface. Eh bien, il y a en fait quelques différences clés entre ces deux options, que nous allons découvrir ensuite. 39. Computed ou Watchers ?: Lors du premier démarrage avec Vue JS, il peut être déroutant pourquoi la propriété calculée et le watcher existent tous les deux quand ils semblent faire une chose similaire sur ce dont vous avez besoin pour un changement, puis exécuter du code. Mais il y a quelques différences clés et l'une d'entre elles est si vous voulez surveiller plusieurs éléments de données. La documentation View montre ce bel exemple où nous avons le prénom et le nom de famille. Nous n'aurions pas besoin de créer deux montres pour le prénom et le nom de famille pour construire le nom complet dont nous avons besoin. Dans ce cas, une propriété calculée serait mieux car nous pouvons référencer plusieurs éléments de données réactives et il fonctionnera si l'un de ces changements. Compte tenu de ce même exemple, remarquez ici que nous prenons certaines données, puis renvoyez-la une nouvelle valeur. Comme nous le savons, cette valeur peut être accessible n'importe où dans notre modèle en utilisant le nom calculé de create full name. Ceci est parfaitement valide avec une propriété calculée sur la bonne façon de l'utiliser. Mais nous ne devrions pas essayer de les utiliser pour modifier des données ou des états externes, comme tout ce qui se trouve à l'intérieur de nos propriétés de données, car cela entraîne ce qu'on appelle un effet secondaire, qui va ensuite lancer une erreur. La clé ici est d'utiliser une propriété calculée lorsque nous voulons observer un changement de données, puis retourner une nouvelle valeur. Ensuite, si nous voulons mettre à jour nos données, ou notre état, cela devrait alors être fait en utilisant un observateur. Pour résumer, nous pouvons utiliser une propriété watch lorsque nous voulons exécuter une fonction lorsque les données changent. Mais au lieu de cela, si nous voulons retourner une nouvelle valeur qui est calculée sur certaines données existantes, nous utiliserons alors une valeur calculée. Également calculé nous permet de regarder plusieurs sources de données, beaucoup plus efficacement aussi. Comme nous l'avons vu dans la dernière diapositive, nous ne devrions pas utiliser une propriété calculée pour muter directement l'état, ni l'utiliser pour des opérations asynchrones. Autrement dit, si nous avions une tâches asynchrones telles que le maïs de certaines données API, ce qui peut prendre un certain temps pour revenir du serveur. Un observateur est la voie à suivre. Comme nous l'avons déjà vu, les propriétés calculées sont également directement accessibles à partir du modèle. Nous pouvons donc utiliser notre sortie, la nouvelle valeur de retour. Une autre différence est que les propriétés calculées ne sont pas également mises en cache. Imaginez qu'une propriété de date est observée par une propriété sous montre calculée ? Si la propriété data est ensuite mise à jour, eh bien, la valeur est la même qu'elle était auparavant. Une propriété calculée ne sera pas recalculée car la valeur n'a pas changé. Cependant, la propriété watch exécutera toujours la fonction de rappel, indépendamment. Comme vous pouvez le voir, les deux ont leurs utilisations et leurs avantages, la fois pour différents cas d'utilisation. 40. Commande et bascule des événements passés: À l'intérieur de notre event.vue en haut du modèle, nous avons été manuellement basculer entre les événements du passé et du futur en changeant this-show assis dans. Mais maintenant, nous allons changer cela en ajoutant un bouton, faites ceci suit. Parallèlement à cela, nous allons également ajouter une propriété calculée, nous allons organiser ces événements dans l'ordre de date à. Juste avant de le faire, nous pouvons également supprimer les données de la vidéo précédente montres. Puisque nous n'avons pas besoin de cela pour notre projet, nous n'avons pas besoin de la section watch, cela peut être supprimé, la propriété set de mode sombre, ainsi que de la section de notre modèle qui était le bouton, ainsi que de la sortie des événements. Donc, dans cette section app.vue, commençons par le bouton bascule en ajoutant une nouvelle propriété de données qui va s'appeler ShowPastevents. Ce sera une valeur booléenne qui sera initialement définie sur false, puis ouvrez le modèle. Nous pouvons également transmettre cela à nos composants d'événement. Assurez-vous que c'est aussi dynamique, donc nous allons utiliser le deux-points pour lier le nom propre de ShowPastevents, qui sera également égal à la valeur portant le même nom. Puisque ces données sont une propriété, également besoin de passer à notre event.vue et de passer cela dans nos accessoires. Cet accessoire peut maintenant être utilisé à l'intérieur de notre modèle pour montrer et cacher chacun de ces événements, et à l'intérieur du v-show, directement nous allons passer dans l'opérateur O. Il montre également l'événement si notre accessoire ShowPastevents est égal à true. Nous avons actuellement cet ensemble à false, alors basculons cela dans la section de données. Si nous faisons cela vrai, actualisez le navigateur et maintenant tous les événements précédents s' afficheront également à, tout est dans notre travail. Donc maintenant, nous devons introduire un bouton qui va changer cela pour nous à l'intérieur du modèle app.vue et juste au-dessus de notre liste non ordonnée, donc cela apparaît en haut de notre application. Crée un nouveau div avec la classe d'options. Ce sera le wrapper pour notre bouton côté d'autres boutons que nous ajouterons plus tard. Le bouton va écouter un événement de clic où nous allons basculer la valeur de ShowPastevents. Ce bouton a également besoin d'un nom afin que nous puissions le voir dans le navigateur. Ensuite, sur le navigateur, nous allons essayer aussi notre bouton, et cela va maintenant basculer entre l'affichage et le masquage des événements passés. Nous reviendrons sur ce bouton plus tard et ajouterons un style, mais maintenant nous allons ajouter une propriété calculée pour organiser ces événements dans l'ordre de date. Nous pouvons voir ici que celui qui est aujourd'hui devrait être au sommet, nous devrions alors voir le jour qui reste, 59. Donc, ces événements ne sont pas en ordre actuellement. Ce fichier app.vue contient tous nos événements qui sont stockés dans cette propriété de données. Au lieu de maintenant en boucle à travers ces directement, d'abord, nous allons configurer une propriété calculée qui va les réorganiser dans le bon ordre, puis retourner le tableau d'événements nouvellement arrangés. Pour cela, nous allons avoir besoin d'une section calculée avec une propriété appelée événements de commande. Ce que nous voulons faire dans cette section calculée est de saisir tous nos événements et de réorganiser la commande. Comme nous le savons dans les vidéos précédentes, nous ne pouvons pas manipuler directement l'état, donc nous ne pouvons pas modifier la valeur à l'intérieur de cette propriété de données. Donc, au lieu de cela, ce que nous allons faire est de créer une variable locale qui va être la copie de ces événements. Donc, une constante appelée EventStoOrder. L' ensemble est égal à une copie en utilisant this.events. Les propriétés calculées doivent retourner quelque chose, un [inaudible] avec une valeur de cet EventStoOrder après avoir appelé la méthode de tri JavaScript. Si notre tableau d'événements n'incluait aucun objet et était beaucoup plus simple, et qu'il était composé de choses telles que des chaînes de texte ou même des nombres, ce serait tout ce que nous aurons à faire, car par défaut, les valeurs lorsque nous utilisons la méthode de tri sont convertis en chaînes et seront triés par ordre alphabétique dans l'ordre croissant. Mais notre cas est un peu plus complexe. Nous avons un tableau d'objets et nous devons les trier par la propriété date. Pour ce faire, nous pouvons passer dans la méthode de tri une fonction de comparaison facultative. Cela va comparer deux éléments dans notre tableau à tout moment. Les noms que nous donnons à ces deux éléments sont entièrement à nous, et nous pouvons les transmettre comme une fonction flèche. Donc en passant tous les noms de variables pour nos deux éléments à comparer. Je veux simplement appeler ceci a et b. Cela va maintenant parcourir tous nos objets à l'intérieur de ce tableau, puis le comparer à un autre moment. J' aurai accès à ces deux objets qui sont comparés à ces variables a et b, ce qui signifie que nous pouvons comparer les dates de chacun. Tout d'abord, nous allons vérifier si la propriété day sur l'objet a est supérieure à la propriété day sur l'objet b. Si c'est vrai, nous allons utiliser l'opérateur ternaire JavaScript, qui retournera une valeur de 1. Si c'est faux, nous retournerons ensuite la valeur de négatif. C' est le nombre positif ou négatif va réorganiser nos objets en définissant la position de l'index. Ainsi, lors de la comparaison de ces dates, si l'une d'entre elles est plus élevée, elle sera ensuite poussée vers le haut de la position de l'index avec un nombre positif. Sinon, il sera poussé vers le bas avec le nombre négatif, puis une fois qu'il aura terminé le tri en comparant tous les éléments de notre tableau, nous reviendrons ensuite au tableau d'origine dans le nouvel ordre, que nous pouvons ensuite utiliser dans notre modèle pour travers à la place de nos événements originaux. Maintenant, nous allons saisir les événements de commande jusqu'à notre liste non ordonnée, puis parcourir ceci à la place de notre propriété de données, enregistrer ceci, et instantanément, nos événements et maintenant mis à jour dans le bon ordre. En haut, nous avons tous les événements précédents qui sont passés, nous avons l'événement d'aujourd'hui, et ensuite ceux-ci sont maintenant commandés du plus près au plus loin, et ils devraient également fonctionner si nous cachons des événements précédents. Aussi, je connais les avantages de la façon dont nous manquons dans une propriété calculée. Plus tard, si l'utilisateur modifie la date de l'un de ces événements, cela recalcule également l'ordre sur. 41. Téléport: Pour le moment, notre application a des événements codés en dur. Mais bientôt, nous allons permettre à l'utilisateur d'ajouter nouveaux événements et aussi de modifier les événements existants. Vous allez le faire en ajoutant un formulaire, ce formulaire pourrait être un composant, et il pourrait même être placé sur sa propre page. Un scénario courant est cependant de placer le formulaire dans un modèle pop-up. Cela signifie que l'utilisateur reste sur la même page, mais le formulaire apparaîtra sur le contenu. Selon la structure HTML, les modaux peuvent être difficiles à positionner en utilisant CSS, n'importe quel téléport pourrait aider avec cela. Comme un exemple à l'intérieur du fichier App.vue, par le haut de notre modèle, imaginez que nous avions un élément de formulaire comme celui-ci, dans ce je vais juste dire ajouter de nouveaux événements. Pour créer cela en tant que modal pop-up, nous n'aurions pas besoin d'appliquer du CSS. Actuellement, ce formulaire est juste commencer en haut des composants, mais généralement nous voulons un pop-up modal sur le reste du contenu. Souvent, nous faisons cela en définissant la propriété de position CSS pour être égale à absolue, tout élément qui est défini pour être absolu, cherchera un élément parent qui est défini pour être relatif, puis utilisera ce conteneur relatif pour référence à partir de. Pour le moment, ce n'est pas un problème énorme puisque nous sommes ici à l'intérieur des composants de haut niveau. Eh bien, si ce formulaire était profondément imbriqué à l'intérieur de beaucoup de composants différents et beaucoup d'emballages différents, il deviendra une tâche CSS plus complexe. Le positionnement modal exactement où nous le voulons, pour aider à cela, la fonctionnalité de téléportation nous permettra de garder ce code à l'intérieur du modèle pour le rendre ailleurs. Cela offre certains avantages, tels que nous pouvons garder cette structure HTML de formulaires à l'intérieur des mêmes composants que les données de formulaire ou sa logique. Il peut toujours accéder à n'importe quoi de nos sections de vue telles que nos données et nos méthodes, mais au lieu d'être rendu à l'intérieur de ce composant, sa sortie dans une partie différente peut être n'importe où comme d'autres composants, remplir un modal, il peut être un avantage pour placer cela à l'intérieur de l'index racine ou du fichier HTML. Si nous allons dans le dossier public, ceci est contenu à l'intérieur d'ici. Cette page d'index a notre conteneur d'application principal, c'est là que le reste de votre application est injecté. Comme nous venons de le mentionner, nous pouvons téléporter notre formulaire à n'importe lequel de ces composants imbriqués. Ou alternativement, nous pourrions ajouter cela à la section du corps ou peut même téléporter est beaucoup différents éléments tout à fait. J' ai eu un div différent avec l'ID de modal. Nous pourrions téléporter ce code de formulaire et des endroits à l'intérieur de cette section div, qui signifie est complètement indépendant du reste de la structure imbriquée. Cela entraînerait notre forme ou toute autre section que nous voulions que le téléport ait un wrappers gauche et aussi le code entourant à traiter, et aussi un autre avantage qui est lié aux formulaires. Si vous savez ce qu'est la propagation des événements, vous devez également supprimer cela car il n'a maintenant pas de passage élémentaire. Nous avons maintenant cet élément à monter aussi, mais comment l'ajouter à la section ? Eh bien, pour ce faire, nous allons découper notre section de formulaire. Ensuite, imbriquez ceci à l'intérieur des balises de téléportation. Dans la balise de téléport d'ouverture, nous pouvons ensuite passer deux attributs qui vont lier à nos éléments. C' est comme lorsque nous utilisons un sélecteur de requête ou lorsque nous sélectionnons un élément avec CSS, ce qui signifie que nous utilisons le dur pour un id, et ce sont l'id de modal. Enregistrez ceci et maintenant sur le navigateur, rappelez-vous d'avant que nous avons ajouté le téléport au formulaire, apparaissait en haut du navigateur. Maintenant, si nous actualisons et faisons défiler vers le bas, ce formulaire est maintenant placé au bas de notre projet, qui signifie que notre téléport prend effet. Ce sera finalement un formulaire pop-up, donc nous avons maintenant besoin d'une propriété de données. Nous pouvons activer et désactiver cela à la section de données, dit obey propriété de données, qui va être une valeur booléenne appelée showForm. Cela aura également besoin d'un bouton dans notre modèle, et nous pouvons ajouter cela à l'intérieur de notre wrapper d'options, donc juste après le premier bouton, nous allons ajouter un deuxième bouton, mais notre CSS, nous pouvons ajouter la classe de AddNew. Cela va également écouter pour un clic. Tout comme ci-dessus lorsque nous avons basculé la propriété data, nous ferons exactement la même chose pour ShowForm, et entre le bas, nous allons également ajouter une entité HTML, qui sera l'icône plus. Le symbole plus est composé des esperluettes, du hachage 43 et d'un point-virgule. Ensuite, nous allons afficher et masquer ce formulaire en fonction de si cette propriété de données ShowForm est dite vraie ou fausse. Nous pouvons le faire en utilisant v-if. Sauvegardez ceci, et maintenant nous pouvons tester cela dans le navigateur. Vous avez l'icône plus, cliquez dessus, voir ajouter de nouveaux événements, cliquez à nouveau dessus, et cela a maintenant été supprimé. Cet effet sera également plus clair si nous ouvrons les outils de développement du navigateur, ouvrez la section du corps. Maintenant, à l'intérieur ici, nous pouvons voir la div avec l'id de l'application et aussi la div avec l'id de modal. Ce sont les deux sections que nous avons à l'intérieur de notre page d'index. Maintenant, si nous ouvrons le modal, nous voyons la forme imbriquée à l'intérieur. Cependant, si nous basculez la liste en cliquant sur un bouton, cela réagit maintenant à notre état vrai ou faux. Il y a aussi beaucoup d'autres utilisations aussi pour le téléportation telles que l'affichage de messages à l'utilisateur, info-bulles, ou simplement généralement placer du contenu dans d'autres endroits, donc nous ne sommes pas limités par notre composant actuel. Dans la section à venir, nous allons utiliser ce formulaire que nous venons d'ajouter aux deux modifications et ajouter également de nouveaux événements. 42. Section Intro - Formes, événements et modificateurs: Ces prochaines vidéos vont se concentrer sur une partie vraiment importante de, non seulement Vue.js, mais le développement web en général, et c'est la gestion des formulaires. Nous allons jeter un oeil à beaucoup de choses telles que l'émission de données, sauvegarde vers un composant parent, la validation de tous les formulaires, également lier nos données avec Vue.js, et aussi d'autres choses telles que propagation d' événements et la façon dont nous pouvons gérer ceci avec des modificateurs. 43. Notre composant de formulaire: Étant donné que Vue.js a cette idée de créer des modèles dans nos composants de fichier unique, création d'un formulaire est généralement la même qu'avec le HTML standard. Nous avons besoin d'un formulaire qui va nous permettre à la fois d'ajouter un nouvel événement et aussi d'éditer tous les événements existants. Nous pourrions soit créer deux formes de ceci, soit ces deux opérations peuvent utiliser les mêmes composants de formulaire si nous le voulions. Tout d'abord, créons un composant. Donc, je vais ouvrir le dossier source dans les composants, puis notre nouveau fichier s'appellera AdduPateForm ; encore une fois avec l'extension .vue. Maintenant, nous pouvons passer à l'App.vue et ensuite nous pouvons enregistrer ce fichier afin que nous puissions l'utiliser à la place de ce formulaire que nous avons créé à l'intérieur du script. Sous notre objet, nous pouvons créer une nouvelle importation, mais cette fois notre importation va importer notre addUpdateForm. Tout comme l'événement ci-dessus, il s'agit de composants ./. Ensuite, si nous allons dans cela, nous avons le formulaire AdduPateForm. N' oubliez pas de l'enregistrer également à l'intérieur des composants. Ensuite, jusqu'au téléport en haut de notre modèle, nous allons donc remplacer cette section de formulaire. Rappelez-vous que cela a la section v-if, donc nous pouvons basculer ces composants sur un désactivé. Nous devons également apporter cela à notre nouveau composant, donc je vais placer tous les composants à l'intérieur du modal qui va également inclure les déclarations conditionnelles v-if de show form. Avec cela maintenant en place, nous n'avons plus besoin de cette section de formulaire juste au-dessus. Nous allons ajouter toutes les entrées de formulaire à l'intérieur de nos nouveaux composants. Ensuite, nous pouvons commencer comme d'habitude avec le modèle pour notre HTML, puis l'imbriquer dans une section div qui va avoir la classe de form_ wrapper. Nous pouvons alors placer notre forme, la nicher à l'intérieur. La raison pour laquelle nous avons ce formulaire enveloppant notre formulaire est parce qu'il va nous aider plus tard lorsque nous stylisons ce modal. Nous allons avoir ce rappeur de formulaire comme arrière-plan plus sombre, donc il couvre tout le reste du contenu lorsque ce modal est actif. Ensuite, cette section de formulaire aura un arrière-plan plus léger donc cela va superposer cette div. La première section va être entourée dans un div, et ce sera pour notre entrée de formulaire de nom. Ce sera le nom de l'événement tel que l'obtention du diplôme. Tout d'abord, l'étiquette qui va être pour la section nom, et cela aura l'étiquette de nom. L' entrée, le type de texte. L' ID pour cela va être le nom qui correspond à nos quatre attributs. Le suivant, si nous vérifions notre objet, celui-ci sera pour les détails et nous en avons besoin d'un pour la date, puis d'un pour la couleur de fond. Copions cette section div puisque cette prochaine sera également l'entrée avec le type de texte, mais cette fois, ce sera pour les détails ; l' étiquette aussi des détails et aussi l'ID correspondant. Sur le navigateur, nous pouvons vérifier que cela fonctionne en cliquant sur notre bouton et faites défiler vers le bas, et nous avons nos deux entrées de formulaire. Le prochain juste en dessous sera pour notre service de date, nous aurons l'entrée avec le type de date. Cela nous donnera un sélecteur de date pour sélectionner la date de l'événement. Cette étiquette est aussi la date, ainsi que le texte de l'étiquette aussi. Maintenant, cela laisse juste la couleur de fond, et pour cela, nous avons six options différentes pour nos six exemples d'événements. Je vais utiliser les mêmes six couleurs que nous avons utilisées à l'intérieur d'ici. Pour choisir entre l'un de ces éléments, nous allons utiliser une entrée de sélection. Cela aura également un wrapper div pour garder le style cohérent, aussi l'étiquette pour l'arrière-plan. Mais cette fois, cela aura les entrées de sélection HTML. Select a une ouverture et une balise de fermeture afin que nous puissions ajouter toutes les options que nous avons besoin de sélectionner entre les deux. C' est ID est tellement est l'étiquette de fond, et puis nous avons nos six options différentes que nous allons inclure et la première valeur est la couleur hexadécimale de F34949. C' est pour notre option rouge. La deuxième option était pour notre couleur rose et ceci a la valeur hexadécimale de F07949, et le texte de rose. La troisième option sera pour la valeur pourpre, qui a la couleur hexadécimale de 997AF0. Pour le bleu, c'est 7AD3F0. Ensuite, nous allons ajouter une option verte, et la couleur verte que je vais utiliser est 68EE94. L' option pour le jaune, ce sera une valeur de F9F970. Enfin, nous allons également ajouter une option pour la couleur orange, et cette valeur hexadécimale va être EB980F ; n'importe quel texte d'orange. C' est maintenant toutes les options dont nous avons besoin et pour finir toute forme, nous allons juste placer un div en bas avec le bouton, afin que nous puissions ajouter un nouvel événement. Mais maintenant ce bouton ne va rien faire, nous allons juste ajouter le texte d'ajouter. Nous pouvons aller sur le navigateur et vérifier que tout fonctionne, donc je vais activer cela. Nous avons nos entrées de texte, le sélecteur de dates, afin que nous puissions sélectionner une date pour l'événement. J' ai l'option Sélectionner avec toutes nos différentes valeurs de couleur, et enfin le bouton en bas. Très bientôt, nous allons jeter un oeil sur la façon dont nous pouvons extraire les valeurs de cette entrée de formulaire et placer cela dans nos données. Mais ensuite, nous allons revenir à ce formulaire et ajouter du style, et le transformer en un modal popup. 44. Styliser et positionner le Form Modal: Comme ancien créé dans la dernière vidéo, maintenant besoin d'un peu de style dans non seulement le rendre un peu plus agréable, mais aussi de faire cette superposition tout le reste du contenu. Rappelez-vous, dans la dernière vidéo, Nous avons créé ce formulaire. Nous avons également ajouté cette div en tant que wrapper. Cela va nous permettre de créer un effet modal et ce wrapper va étirer toute la hauteur sur toute la largeur de la page. Il aura une couleur de fond plus foncée, ce qui va nous donner l'effet d'une apparition sur le reste du contenu. Et puis en plus de cette section sombre, nous allons ensuite intégrer notre formulaire, qui va être centré dans la page et avoir également une couleur de fond plus claire pour le faire ressortir. Pour ce faire en bas, nous allons souffler notre modèle, créer notre section de style. Il peut également être étendu aux styles appliqués uniquement à ce composant particulier. Donc, tout d'abord, nous allons cibler l'enveloppe de formulaire, qui entoure toute notre forme et nous lui donnerons cette couleur d'arrière-plan plus foncée. Donc, pour lui donner cette couleur de fond plus sombre, allaient ajouter une valeur RGBA. Cela va d'abord nous permettre de créer la couleur foncée de 000. Et puis le quatrième canal, qui est l'alpha, nous permettra d'ajouter la valeur d'opacité de 0,7, ce qui est similaire à 70 pour cent de capacité. Et cela va s'assurer que nos antécédents seront légèrement transparents. Maintenant, ce sera une couleur d'arrière-plan plus sombre, mais nous pouvons toujours voir le contenu en arrière-plan. Ensuite, nous allons faire un peu de positionnement afin que nous puissions disposer ceci pour être la pleine largeur et la pleine hauteur de la page. abord, nous allons retirer cela du flux du reste du contenu par certainement la valeur de position pour être absolue. Ensuite, nous pouvons utiliser les quatre valeurs de haut, droite, de bas et de gauche, ce qui va étendre nos composants de formulaire aux quatre côtés de la page. Nous pouvons le faire avec la valeur supérieure de zéro, la valeur droite de zéro, et ensuite aussi la même chose pour le bas et aussi la gauche. Maintenant, si nous passons et ouvrons notre modèle, nous voyons que la couleur de fond plus foncée a été définie, mais elle est légèrement transparente. Cela s'étend également aux quatre côtés du navigateur. Actuellement, bien que tous les formulaires placés dans le coin supérieur gauche. Pour déplacer cela au centre de la page, nous allons utiliser la flexbox CSS. Donc, nous allons commencer par le type d'affichage de flex, puis nous pouvons définir le contenu de justification pour être au centre, ce qui nous donnera l'alignement sur la page. Maintenant, nous pouvons définir l'alignement vertical avec des éléments d'alignement. C' est maintenant comme le faire avec le formulaire Wrapper et maintenant nous pouvons passer au style de la section de formulaire réelle. Pour faire ce qui est remarquable, nous allons lui donner une couleur de fond blanc. Et aussi rendre cela un peu plus large et aussi plus grand. Donc, nous allons définir la largeur minimale à 60 pour cent de la largeur de la fenêtre avec 60 vw. Puis aussi la hauteur minimale de 40 pour cent de la hauteur de la clôture. Un peu de rembourrage pour ajouter de l'espace, à l'intérieur du formulaire. Allons de l'avant à Rem, puis arrondissons les coins avec un rayon de frontière. Bien. Ça va maintenant quelque part. Ensuite, nous allons passer à chacune de ces entrées de formulaire. Rappelez-vous d'en haut lorsque nous avons créé l'une de ces entrées, elles étaient toutes entourées dans une section div. Donc, nous allons d'abord sélectionner notre formulaire et ensuite nous allons cibler n'importe quel div qui suit immédiatement. Ceux-ci auront le type d'affichage de flex. Donc, s'ils sont empilés verticalement, ils auront la direction de flexion des espaces de colonne. Nous pouvons appliquer une certaine marge sur le haut et le bas d'un Rem et garder la valeur de la marge à gauche et à droite à zéro. Ensuite, la taille de police de 1.6 Rem, puis en se déplaçant plus loin à l'intérieur de cette section de formulaire, si nous allons dans nos divs, nous aurons alors le style d'entrée à l'intérieur d'ici. Alors passons au bas de notre section de style. Nous allons cibler toute la section de formulaire et toute entrée qui est à l'intérieur. abord, ajoutons une marge sur le haut et le bas de ces entrées, qui va les espacer à partir de l'étiquette 0.6 Rems en haut et en bas et zéro à gauche et à droite. Donc, je rembourre à nouveau la valeur, 0.6 Rems en haut et en bas. Puis un Rem à gauche et à droite. La valeur d'un Rem à gauche et à droite, nous donnera un peu d'espacement lorsque nous tapons dans l'entrée. C' est l'espacement que nous voyons sur le côté gauche. Les bordures de nos entrées de formulaire, nous les définirons comme un pixel, comme un gris et une ligne pleine. Pour correspondre à l'enveloppe de formulaire externe. Nous allons également définir le rayon de la bordure à 0.3 Rem aussi. Cela va s'appliquer à nos entrées de formulaire libre. Pour que cela reste cohérent, nous pouvons également l'appliquer à notre entrée select, et nous le ferons en l'ajoutant pour la même section, séparée par une virgule. Enfin, nous avons le bouton de formulaire en bas. Donc d'abord la couleur de fond, qui sera RVB, et la valeur rouge de un, deux, trois, la valeur verte de un, neuf quatre, et la valeur bleue de un, deux, trois. La largeur, je vais définir ceci sur 100 Pixels. Retirez la bordure, ajoutez un peu d'espace interne avec le rembourrage de 0,6 Rem, un rayon de bord correspondant de 0,3. Enfin, nous définirons également la taille de la police à 16 Pixels. allons également tonifier la couleur noire OC pour l'étiquette, et nous pouvons le faire juste en bas et la couleur de fond pour cela. Donc, la couleur du texte, commençons par une couleur noire, puis nous pouvons sélectionner une couleur plus claire en survolant cela et choisir une valeur éclairée dans le sélecteur de couleurs. Une fois que vous avez une couleur qui vous satisfait, donnez à ce fichier une sauvegarde. Maintenant, si nous passons au navigateur, notre style est maintenant terminé. Vous pouvez également jouer avec cela si vous le souhaitez et changer le style de la mise en page. C' est très bien aussi. Mais une chose à noter ici est que si nous essayons cliquer maintenant sur ce bouton à bascule en haut, notre formulaire ne sera plus fermé. Cela se produit parce que notre enveloppe modale, ou en particulier, notre enveloppe modale , que nous avons ici, est maintenant prise ou couvre toute la largeur et la hauteur de la page, qui couvre maintenant le reste du contenu. Pour résoudre ce problème, nous allons ensuite ajouter un bouton fermé à l'intérieur du modal et regarder comment nous pouvons le faire avec des événements personnalisés. 45. Émettre des événements personnalisés: Nous avons maintenant un formulaire mais ce formulaire est bloqué ouvert jusqu'à ce que nous actualisions la page puisque nous n'avons plus accès à ce bouton à bascule derrière ce modal. Le correctif, nous allons ajouter une petite croix dans le coin supérieur de notre modal que nous utilisons pour cliquer sur pour fermer cela. Nous allons le faire à l'intérieur de notre addUpdateForm juste à l'intérieur de cet élément de formulaire d'ouverture. Donc, ajoutons une span, cela aura une classe de close avec une entité HTML qui est l'esperluette, un hachage 10060, et un point-virgule. Cela va nous donner une croix rouge à laquelle nous pouvons maintenant descendre et ajouter un peu de style à. La première chose à faire est ce formulaire qui est le wrapper direct, nous allons définir ceci pour utiliser la boîte flex afin que nous puissions aligner cela en haut à droite, en bas à la section formulaire, nous pouvons définir le type d'affichage sur bas à la section formulaire, être flex, et alors tous les éléments sont empilés les uns sur les autres, nous pouvons changer la direction de flexion, la colonne. Puisque le wrapper utilise maintenant la boîte flexible, nous pouvons maintenant contrôler ce bouton de fermeture avec align-self. Faisons ça tout en haut. Ce bouton a la classe de close. Align-self poussera cet élément individuel à l'extrême droite si nous définissons la valeur à fin flexible. Pour que l'utilisateur sache que c'est cliquable, nous pouvons également définir le curseur pour être un pointeur. Cela laisse maintenant notre croix exactement là où nous voulons qu'elle soit. Cette croix est maintenant en place, mais cela nous laisse aussi avec quelque chose que nous devons résoudre. Cette croix est placée à l'intérieur de notre composant addUpdateForm, mais elle est basculée à partir de notre composant App.vue parent. Pour le moment, notre application est structurée comme ça. Nous avons le App.vue, qui a notre AddUpdateForm, ainsi que les composants d'événement imbriqués à l'intérieur. À partir de cette App.vue, nous aurons un bouton qui bascule ce formulaire pour l'afficher et le cacher comme notre modale pop-up. Cela fonctionne parce que ShowForm est aussi à l'intérieur de App.vue et ceci est utilisé pour afficher et masquer le composant de formulaire. Mais qu'en est-il de cette croix que nous venons d'ajouter ? Ceci est placé à l'intérieur du composant, mais la propriété ShowForm dates que nous devons modifier est dans le parent, App.vue. Nous savons déjà comment transmettre des données d'un composant parent à un enfant en utilisant des accessoires. Et l'inverse ? Nous voulons changer les données ShowForm pour être false, mais cette fois, à partir du composant AddUpdateForm. Pour ce faire, nous pouvons émettre un événement personnalisé de l'enfant jusqu'au composant du parent. De retour dans l'App.vue, savait comment utiliser un événement régulier tel qu'un donjon ou un événement click. Nous utilisons click pour basculer le formulaire en utilisant v-if. En plus de ces éléments réguliers, nous pouvons également créer notre propre événement personnalisé. Tout comme ici à l'intérieur de notre composant AddUpdateForm, au lieu d'un clic, nous écoutons nos propres événements appelés close-form. Pour ces noms d'événements, il est recommandé d'utiliser des mots minuscules séparés par un tiret. Puisque cet événement est transmis au composant enfant, c'est à l'intérieur de cet enfant que nous allons l'appeler. Tout d'abord, nous ajoutons la liste des événements à un tableau émet. Ceci est nouveau dans Vue 3, nous ne les avons pas déclarés précédemment dans la version 2. Le [inaudible] est comme ceci particulièrement à côté de nos accessoires, nous permet de voir facilement quelles données entrent dans le composant, puis quelles données sont émises vers le composant. A l'intérieur du gabarit, nous organisons notre croix rouge en utilisant la travée. Lorsque nous cliquons dessus, nous déclenchons notre événement personnalisé en utilisant le symbole dollar émet qui définira ShowForm sur false. Par conséquent, en cachant notre formulaire à l'intérieur de notre demande. C' est exactement ce que nous allons faire maintenant. À partir de App.vue, nous allons aller à la section du modèle où nous pouvons configurer notre événement personnalisé, passer ceci à notre AdduPateForm. Comme nous venons de le voir, cet événement va être appelé de forme rapprochée. Lorsque cela est déclenché, nous allons définir ShowForm pour être égal à false. Ceci est transmis à AddUpdateForm donc nous allons nous diriger ici, et ensuite nous pouvons ajouter ceci à un tableau d'émission. Nous n'avons pas actuellement de section de script donc nous pouvons créer cela maintenant, assurant également d'ajouter la valeur par défaut d'exportation, et nous passons ceci à l'intérieur d'un tableau. Il devrait maintenant nous donner accès à notre boucle d'événements personnalisée à l'intérieur du modèle. La plage que nous venons d'ajouter pour notre croix exécutera alors du code lorsque l'utilisateur clique sur ce bouton, et le code que vous voulez exécuter est cet événement d'émission. Nous pouvons y accéder avec ce symbole dollar point émettre, puis passer le nom de notre événement qui est proche. Ce préfixe de symbole dollar signifie que c'est une des méthodes intégrées de Vue JS de propriétés, et nous en verrons plus au cours du cours. Enregistrez ce fichier et plus dans le navigateur, c'est actualiser, ouvrez notre formulaire, cliquez sur la croix, et cela va maintenant déclencher notre événement personnalisé dans le composant parent. 46. Lier les entrées du formulaire: Nous avons également plus d'événements personnalisés à émettre, tels que l'ajout de nouvelles entrées à notre tableau, modification d'événements existants, et également les supprimer. Avant de pouvoir ajouter et modifier nos événements, nous avons besoin d'un moyen de capturer ce que l'utilisateur tape dans tous ces champs de formulaire. Une vue nous fournit une directive pour ce modèle appelé v-model. Cela signifie que nous pouvons configurer une propriété de données qui va contenir toutes les valeurs dans lesquelles l'utilisateur tape, comme ce nom. Pour ce faire, nous allons au formulaire AddUpdate, puis dans notre section de script. Nous avons besoin d'une propriété de données qui va contenir toutes ces valeurs dans lesquelles l'utilisateur tape. abord, commençons par le nom que nous pouvons initialement définir sur une chaîne vide. Pour voir cela en action, nous pouvons également sortir ce nom, boucle à l'intérieur du modèle. Maintenant, pour saisir la valeur qui a été ajoutée dans notre entrée de nom et stocker cela à l'intérieur de notre propriété de données, nous allons ajouter la directive que nous venons de mentionner, qui est v-model, puis nous assignons ceci à notre nom et à notre propriété de données. Nous pouvons maintenant donner un coup de pouce si nous ouvrons le formulaire et tapons quoi que ce soit à l'intérieur ici. Lorsque nous tapons à l'intérieur de ce champ, nous pouvons voir que cette valeur est mise à jour dans notre modèle. La bonne chose à propos de v-model est qu'il met également en place une liaison de données bidirectionnelle. Cela signifie que non seulement l'entrée met à jour notre propriété de données, mais cela fonctionne également dans l'autre sens. Il ajoute à notre section de nom au lieu de passer une chaîne vide. Si cela avait une valeur initiale juste comme ça, nous pouvons alors enregistrer ceci et plus dans le navigateur. Maintenant, sous notre forme, cela accepte maintenant la valeur initiale qui est transmise à partir de notre propriété de données et cela peut également être mis à jour. Cette idée deviendra bientôt plus utile lorsque nous utilisons également ce formulaire pour éditer les événements existants. Il peut prendre toutes les données d'événement en cours, puis l'utilisateur peut mettre à jour à l'aide de ce formulaire. Aussi, lorsque nous utilisons le HTML régulier, nous avons quelques façons différentes de définir les valeurs initiales. Par exemple, si nous allons à la section détaillée de notre saisie de texte, nous pourrions définir la valeur initiale pour être tout ce que vous transmettez et nous pouvons voir ceci juste ici. C' est une façon de définir la valeur initiale avec des entrées basées sur le texte ou des cases à cocher, nous avons les attributs vérifiés et nous pouvons utiliser sélectionné pour les entrées sélectionnées. Cependant, lors de l'utilisation de Vue.js, toutes ces valeurs initiales seront ignorées et nous devrions plutôt utiliser v-model pour la valeur initiale si nous voulons en fournir une. Pour l'instant, concentrons-nous sur l'ajout de nouveaux événements. Pour cela, nous devons mettre en place un objet d'événement à la place de notre nom. Plutôt que de définir tous ces éléments individuellement, nous allons les regrouper dans un objet d'événement, cela peut également être remplacé à l'intérieur de notre sortie. Aussi notre v-model va maintenant être l'event.name. Copions aussi ceci et nous pouvons l'ajouter dans chacune de nos entrées. L' entrée pour nos détails sera event.details, la date, puis aussi l'arrière-plan aussi. Ceci est ajouté à l'intérieur du wrapper select et celui-ci est event.background. Voyons cela maintenant, nous devrions voir un objet que nous tapons dans chacun de nos champs. Le nom, les détails, la date, ainsi que la couleur de fond mettront à jour notre objet d'événement, ce qui nous laisse avec toutes les informations dont nous avons besoin pour créer un nouvel événement. 47. Émettre des données avec un événement personnalisé: Nous avons maintenant capturé les données de formulaire de l'utilisateur et stocké ces données dans cette propriété de données. Maintenant, nous allons utiliser ces données pour ajouter un nouvel événement à notre tableau. Actuellement, ces nouvelles données d'événement se trouvent dans le composant AddUpdateForm. Cependant, le tableau d'événements réels se trouve à l'intérieur de ce parent, App.vue, ce qui signifie que nous devons émettre une sauvegarde d'événement personnalisée à partir de notre formulaire. Mettons cela en place comme nous l'avons regardé précédemment dans l'App.vue. Allons à l'addUpdateForm. A l'intérieur d'ici, nous pouvons ajouter un nouvel attribut qui va être pour nos événements personnalisés. Ces événements personnalisés, nous pouvons donner à cela n'importe quel nom que vous voulez. Le mien va ajouter un nouvel événement. À peu près lorsque nous avons ajouté cet événement proche, nous définissons directement ces données ShowForm pour être égales à false. C' est très simple, mais notre ajout de nouvel événement aura quelques étapes supplémentaires. Donc, au lieu de gonfler ce modèle, nous pouvons à la place passer une méthode. Cette méthode doit alors être réglée dans notre section de script. Passons à la section des méthodes. En haut, nous pouvons placer dans notre méthode d'ajout. Cela va être responsable de pousser vers notre tableau d'événements. Avant d'aller plus loin, cependant, prenons un peu de recul et réfléchissons exactement à ce que nous voulons faire. Le travail de cette méthode est d'ajouter un nouvel événement à notre tableau , mais comment accèdez-vous à ces nouvelles données d'événement que vous voulez pousser ? Eh bien, cela peut être passé lorsque nous déclenchons l'événement personnalisé dans notre addUpdateForm. Tout d'abord, tout comme nous l'avons fait avec la forme rapprochée, nous devons ajouter ceci pour émet un tableau. Nous allons ensuite émettre ceci lorsque le bouton Ajouter est cliqué. C' est le bouton que vous voyez juste ici, et cela va déclencher nos événements personnalisés dans le bouton. Lorsque vous cliquez sur, cela va émettre nos événements personnalisés que nous passons en tant que premier paramètre, et ceci a été ajouté de nouveaux événements. La différence cette fois, cependant, lorsque nous avons émis un événement appelé close-form, cela n'avait aucune donnée que nous devions passer. Nous pouvons également supprimer ce mot-clé aussi, ce n'est pas nécessaire dans notre modèle. Mais comme un second argument, nous allons transmettre les données réelles qui sont les événements. Nous pourrions également extraire cela et placer une méthode appelée à l'intérieur d'ici si nous le voulions, mais c'est assez simple pour l'instant. Puisque nous transmettons maintenant cette information à côté de notre événement personnalisé, retournez dans App.vue, nous pouvons maintenant recevoir cette information à l'aide d'une variable spéciale appelée événement symbole dollar. Juste pour être aussi clair ici aussi, cela est toujours appelé événement symbole dollar. Nous n'avons pas seulement nommé cet événement puisque nous transmettons certaines informations sur l'événement. Si nous avions un utilisateur qui passera, cela serait toujours appelé événement de symbole dollar. Maintenant, cela est passé dans notre méthode add, il est maintenant disponible dans notre méthode ci-dessous. Nous recevrons cela comme nous le ferions normalement avec n'importe quel événement, donc nous pouvons lui donner n'importe quel nom que nous voulons. Nous pouvons tester si cela fonctionne avec un journal de console, et vérifier que nous recevons les informations d'événement de notre formulaire. Pour tester cela, nous devons actualiser et aller dans les outils de développement, ouvrir la console, puis nous pouvons essayer d'ajouter un nouvel événement. Peu importe les données que nous mettons pour l'instant, cela peut être n'importe quelle valeur, cliquez sur « Ajouter ». Ce qui vient de se passer là-bas, on ne voit rien à l'intérieur de la console, et maintenant, tous les formulaires sont fermés. Eh bien, si nous regardons de plus près et regardons cette flèche de rafraîchissement juste ici, nous pouvons ajouter le nouvel événement de formulaire. Regardez cette flèche disparaître si nous cliquons sur « Ajouter », cela actualise maintenant la page et efface également notre console. Cela se produit car le comportement par défaut du navigateur est d'actualiser lorsqu'un formulaire est soumis. Si vous avez déjà rencontré cela et travaillé avec d'autres bibliothèques ou travailler avec JavaScript, vous avez peut-être déjà écrit quelque chose comme event.preventDefault à l'intérieur de la méthode. Mais Vue fournit également un raccourci pour cela, et ceci est d'ajouter un modificateur d'événement que nous pouvons ajouter lorsque utilisons [inaudible] dans notre formulaire lorsque nous cliquons sur ce bouton. Revenons à AddUpdateForm, ici, nous utilisons la syntaxe V sur, et ensuite nous pouvons également appeler dot prevent. Ce modificateur d'événement devrait maintenant empêcher le comportement par défaut. Revenons au navigateur et testons cela. Ouvrez les outils de développement, cliquez sur « Ajouter », qui nous donne ensuite notre journal de console avec toutes les données du formulaire. Nous pouvons maintenant utiliser ces données pour pousser une nouvelle entrée dans notre tableau, mais une chose que nous devons également faire est d'ajouter un ID. Actuellement, nous avons le nom, les détails, les dates et les arrière-plans, mais rappelez-vous que chacun de ces événements a également besoin d'un identifiant unique. Si vous enregistrez cette entrée dans une base de données, nous obtiendrions souvent un ID unique de la base de données que nous pourrions ensuite utiliser. Mais pour plus de simplicité, je vais juste les numéroter dans l'ordre, comme nous l'avons fait avec nos échantillons de données. Pour ce faire, nous pouvons ajouter une nouvelle propriété à notre objet d'événement appelé ID, puis nous devons également savoir combien d'événements est actuellement à l'intérieur de notre tableau, puis ajouter un nombre à la fin. Si vous avez actuellement six événements, le prochain que nous ajoutons sera le numéro sept, numéro huit, et ainsi de suite. abord, nous pouvons saisir la longueur de notre tableau actuel avec this.events.length, puis définir cet ID pour être un supplémentaire. Ensuite, nous allons accéder à nos événements, puis appeler la méthode push JavaScript qui poussera nos nouveaux événements à la fin de ce tableau. Enfin, nous pouvons fermer notre formulaire. Donnons un coup d'envoi à ça. Cliquez sur « Ajouter », il y en a un que nous venons d'ajouter. Essayons un de plus. Nous allons pour la couleur différente cette fois et vérifions que tout est bien, ajoutez ceci. Maintenant, deux événements sont maintenant affichés dans le navigateur. 48. Émettre plusieurs événements: Nous ne sommes pas limités à ne l'émettre que dans un seul événement à partir de nos composants. Nous pouvons en émettre autant que nous le voulons. Dans le formulaire d'ajout de mise à jour, dans la section d' émission, nous aurons accès à plusieurs événements personnalisés, et nous pouvons les utiliser en même temps. Par exemple, dans la vue de mise à jour, lorsque nous ajoutons ce nouvel événement juste ici, plutôt que de fermer le formulaire en utilisant cette méthode, nous pourrions plutôt utiliser l'événement personnalisé sous forme fermée. Ensuite, pour ce faire, tout ce que nous avons à faire est d'aller à notre modèle, puis tout ce que nous avons à faire est d'ajouter une virgule et de passer dans notre deuxième événement personnalisé. Si nous devions utiliser plusieurs événements comme celui-ci, il peut également être plus propre de les extraire du modèle et de les déplacer vers des méthodes séparées. Quant à cela, n'oubliez pas que nous avons commenté ce formulaire de présentation de points. Donc maintenant, si cela ferme le formulaire après que nous avons soumis, serait maintenant savoir que cela émet plusieurs événements personnalisés. Encore une fois, les informations d'événement ont de l'importance, nous pouvons ajouter n'importe quelle donnée. Cliquez sur « Ajouter ». L'événement est maintenant affiché, et aussi notre formulaire a été fermé, mais cette fois, de nos événements personnalisés. 49. Modificateurs: Dans notre formulaire, nous avons abordé les modificateurs un peu plus tôt lorsque nous utilisons le mot-clé prevent, ce qui va empêcher le comportement par défaut du navigateur, qui est de rafraîchir lors de la soumission d'un formulaire. Il y a aussi d'autres modificateurs, que nous verrons pendant le cours avec les modificateurs clés. Les modificateurs de touches nous permettent de faire certaines choses lorsqu'une touche de clavier est pressée. Vous pourriez utiliser le cas serait de permettre à l'utilisateur de cliquer sur « Entrée », soumettre le formulaire, plutôt que d'avoir toujours à utiliser ce bouton « Ajouter ». Mais cela, nous pouvons copier cet événement click, puis le coller dans notre Form Wrapper. Copiez tout cela, cliquez sur « Section », puis faites défiler jusqu'à la balise de formulaire d'ouverture, collez-le dans. Maintenant, au lieu d'écouter un clic, nous allons écouter une clé. C' est quelque chose que nous savons déjà, mais la différence est que nous allons utiliser un modificateur pour dire exactement quelle clé nous voulons écouter. Plus dans la documentation de vue, avez une liste d'alias de clé commune que nous pouvons utiliser, tels que delete, escape , space, mais nous allons faire usage de enter. Bien sûr, cela ne couvre pas toutes les touches qui sont disponibles sur le clavier, ce ne sont que quelques-uns des alias vers les plus courants. Si nous voulions utiliser un bouton clé qui n'est pas répertorié ici, nous pourrions plutôt utiliser n'importe quel nom de clé valide, et nous pouvons voir une liste juste ici. Nous pouvons référencer n'importe laquelle de ces clés, comme page vers le bas, que nous voyons ici. Mais au lieu de le taper comme ça, nous devons tout faire en minuscules et le séparer par des tirets. Pour notre exemple, nous allons simplement utiliser la touche « Entrée », [inaudible] ceci juste après la touche. Essayons notre application et actualisons de nouveaux événements. Maintenant, pour que cela fonctionne, nous devons interagir avec tous les formulaires puisque nous avons ajouté ceci à l'élément de formulaire. Alors cliquez sur l'une de ces entrées, et à partir d'ici, nous pouvons appuyer sur « Entrée », qui va ensuite soumettre notre formulaire. 50. Valider notre formulaire: Passons maintenant à ajouter dans une certaine validation de formulaire à notre formulaire. Actuellement, si nous allons juste entrer et ajouter aucune valeur dans ces entrées, nous pouvons cliquer sur « Ajouter », et cela va alors soumettre un événement vide. Pour résoudre ce problème, nous allons d'abord passer par une méthode de validation qui vérifiera si tous les champs requis ont été remplis. Si ce n'est pas le cas, nous afficherons les messages d'erreur à l'utilisateur. Comme il ne peut pas y avoir plus d'un champ manquant, ceux-ci vont être stockés à l'intérieur d'un tableau. Donc, dans notre formulaire d'ajout de mise à jour, la première étape consiste à ajouter une nouvelle propriété de données qui va stocker ces erreurs. Pour passer ces erreurs, nous aurons alors besoin d'ajouter une méthode qui va valider toutes nos entrées de formulaire. Juste après la section de données, il s'agit de méthodes, et ce nom de méthode va être validé. Nous supposons que cela remplit toutes ces salles chaque fois que l'utilisateur clique sur le bouton Ajouter. Tout d'abord, nous voulons réinitialiser les erreurs précédentes. Nous pouvons le faire en définissant these.errors pour être à nouveau défini sur un tableau vide. Nous vérifierons ensuite notre formulaire. Nous avons eu des déclarations si. Le premier, nous allons vérifier si ce .events.name n'existe pas. Nous pouvons le faire en ajoutant le point d'exclamation. Ensuite, cette instruction if ne s'exécutera que si la propriété name n'existe pas. Nous pourrions alors ajouter le code que nous voulons exécuter dans ces accolades ou à la place, pour plus de simplicité, si nous gardons tout cela sur la même ligne. Cela fonctionnera bien aussi. Si ce nom n'existe pas, nous voulons envoyer un nouveau message à notre tableau d'erreurs. Nous allons d'abord accéder à ces e.errors et notre méthode push qui va ensuite pousser une nouvelle chaîne de texte, qui sera nom est nécessaire. Dupliquez ceci et nous pouvons maintenant faire la même chose pour les détails de l'événement. Nous avons ensuite également la date en arrière-plan que vous devez prendre en charge, alors dupliquez cela à nouveau. Celle-ci est la date. Puis enfin, l'arrière-plan. Vérifiez si cela fonctionne en sortant ces erreurs tableau dans notre modèle. Nous n'avons plus besoin de cette sortie d'informations d'événement, mais nous pouvons le remplacer par notre tableau d'erreurs. Pour voir cela, nous devons appeler notre méthode de validation à partir de ce bouton. Nous allons extraire tout ce code hors du gestionnaire de clic , puis placer cela dans une nouvelle méthode jusqu'aux méthodes en bas. abord, nous allons configurer notre nouvelle méthode qui consiste à ajouter l'événement, puis à coller à l'intérieur de notre section médiane. Supprimez la virgule entre les deux. Maintenant, puisque c'est à l'intérieur de notre JavaScript ou de notre section de vue, nous devons maintenant appeler émet avec ce préfixe, ligne 1 argent, ligne 2 et aussi quand nous accédons à l'événement. Maintenant, lorsque ce formulaire est soumis, la première chose que nous voulons faire est de passer par la méthode de validation. Ensuite, nous appellerons « add events » très bientôt. Aussi notre ajouter fond, nous allons ensuite appeler la méthode de validation. Également la même chose pour tout le wrapper de formulaire. Obtenez les résultats, puis appelez Valider. Maintenant, si nous passons à notre section de validation, ici nous allons avoir deux résultats. Le premier résultat va être que la forme a des erreurs. Nous ne voulons pas ajouter à l'événement. Le deuxième résultat est que tout va bien. Nous n'avons pas d'erreurs. Maintenant, nous voulons créer cet événement. Si c'est le cas et que nous n'avons pas d'erreurs, tout ce que nous voulons faire est d'appeler cette méthode d'événement add. Puisque cela vit également sur l'instance de vue, nous devons appeler ceci avec ce préfixe. Cependant, s'il y a des erreurs, nous ne voulons pas ajouter un nouvel événement. Au lieu de cela, ce que nous allons vouloir faire est de revenir à cette méthode de validation avant d'arriver à cette section ajouter des événements bien que nous puissions d'abord vérifier si this.errors, qui est notre tableau. Nous pouvons vérifier si la longueur est supérieure à zéro. Cela signifie que nous avons des erreurs et nous allons revenir hors de cette méthode de validation. Essayons cela dans le navigateur. Tout d'abord, si nous appuyons sur le bouton « Ajouter », cela appelle alors la méthode de validation, puis met à jour notre tableau d'erreurs avec nos quatre messages. Cela signifie que nos erreurs sont supérieures zéro et le mot-clé return s'assurera que vous sortiez de cette méthode de validation avant de pousser ces nouveaux événements. C'est très bien. Encore une fois, nous pouvons ajouter quelque chose dans le nom et les détails, cliquez sur « Ajouter ». Vous voyez que la date en arrière-plan est manquante. Essayons cela sans erreurs. Ajoutez la date en arrière-plan. Cela nous permet maintenant d'ajouter notre nouvel événement. La dernière étape consiste à afficher ces erreurs sous la forme d'une liste plutôt que d'un tableau. Pour ce faire plutôt que de simplement sortir nos erreurs en tant que propriété de date, irait à la place passer en boucle. Créez un wrapper div. Nous ne voulons montrer cette section que si notre errors.length va être supérieure à zéro. Si c'est le cas, nous les sortirons comme non ordonnés à la liste , puis sortirons chacune de ces erreurs en tant qu'élément de liste. Nous pouvons le faire avec v-for et ce sera une erreur dans les erreurs. Passez une clé dynamique qui peut être égale à notre erreur puisque chacun de nos messages d'erreur est unique. Ensuite, je vais mettre le message d'erreur. Essayons ceci lors des nouveaux événements et les messages d'erreur sortiront maintenant comme une liste non ordonnée. 51. Mettre à jour des événements: Bienvenue de retour. Maintenant, pour mettre à jour et supprimer l'un de ces événements, nous devons à nouveau utiliser nos événements personnalisés. Nous allons également utiliser ce même formulaire que nous avons utilisé pour ajouter un nouvel événement mais cette fois nous allons pré-remplir tous les détails du formulaire avec les détails de l'événement en cours. La première chose que nous devons faire avant d'entrer dans l'un de ces événements est d' activer un gestionnaire de clics sur l'un de ces événements. Une fois que nous avons cliqué sur ces événements, nous voulons que ce formulaire s'ouvre pour que l'utilisateur puisse ensuite modifier cet événement particulier. Maintenant, pour ce faire, nous allons écouter maintenant un clic dans app.view à l'intérieur de ce composant d'événement ou, en fait, cela est entouré dans l'élément de liste, donc nous pouvons également l'ajouter à l'enveloppe parent. Nous allons ajouter un écouteur de clic, puis nous allons déclencher une nouvelle méthode appelée SetForm. Le setForm va ensuite passer les détails de l'événement en cours. Nous saisissons les détails de l'événement de notre boucle. Chaque fois que nous cliquons sur l'un de ces éléments particuliers, il récupère ensuite les données de l'événement pour celui sur lequel nous avons cliqué. Jusqu' à la section de la méthode. Cette méthode doit maintenant faire deux choses. Il doit d'abord afficher le formulaire et également passer l'événement sélectionné à la propriété data. Cette propriété de données sera ensuite utilisée comme accessoire pour le composant de formulaire lui-même, ce qui signifie que nous avons toutes les données pour pré-remplir toutes les sections. Pour commencer notre méthode qui était setForm, nous recevons les détails de l'événement et une virgule à la fin. La première chose que nous voulons faire est de définir la propriété de données d'événement actuel que nous n'avons pas encore créée. Cela va être appelé événement courant. En fait, c'est un cas [inaudible]. Nous allons définir cela égal à l'événement qui est passé. S' il y a une erreur ou qu'aucune donnée n'est transmise, nous enverrons simplement un objet vide. Maintenant, nous allons définir cet événement actuel comme une propriété de données juste au-dessus et d'abord définir ceci sur un objet. Ce qui va se passer, c'est que nous allons cliquer sur cette section ou sur l'un de ces événements. Cela déclenchera alors cette méthode, nous allons ensuite passer ces données d'événement à l'événement courant, que nous pouvons ensuite passer à toutes les formes en seulement une seconde. Mais d'abord, nous devons réellement afficher ce formulaire. Nous pouvons le faire en activant cette propriété ShowForm. Nous voulons que cela soit vrai, donc le formulaire s' affichera sur le navigateur. Vérifions ça. Cliquez sur l'un de ces éléments, tout le formulaire apparaît, et tout cela semble fonctionner pour chacun de nos événements. Ce formulaire a maintenant besoin de ces données d'événement que nous avons stockées dans l'événement actuel. Nous pouvons saisir ceci et passer à notre modèle, puis passer ceci à notre addUpdateForm. Cela va être dynamique, donc nous avons besoin de la liaison. Le nom de la propriété sera l'événement courant, qui est également égal aux données de l'événement courant. Ouvert à la forme, nous pouvons maintenant ajouter dans notre tableau d'accessoires à l'intérieur de la valeur par défaut d'exportation. La seule prop que nous avons en ce moment sera l'actualité. Pour le moment, nous avons l'événement actuel qui est passé à ce formulaire. Nous avons l'objet événement qui est stocké dans les données. Cet objet d'événement utilise également v-model pour lier cela à l'ensemble de notre entrée de formulaire. Maintenant, pour passer cet événement actuel comme valeur initiale, nous devons d'abord définir cet événement pour être égal à notre événement actuel. Nous pouvons le faire dès que l'application se charge à l'intérieur du crochet monté où nous définirons this.event pour être égal à cet événement .current. Testons que tout cela fonctionne en cliquant sur l'un de ces événements et actualiser d'abord. Nous avons la remise des diplômes. Essayons l'anniversaire. La conférence. Aussi maintenant si nous allons dans notre icône plus pour ajouter le formulaire, la prochaine chose que nous allons faire est de basculer ce bouton en bas, actuellement nous voyons le bouton ajouter mais si nous allons dans la section d'édition, nous voyons toujours le bouton ajouter aussi. C' est parce qu'à l'intérieur du modèle, nous avons seulement le bouton d'ajout unique. Nous devons également dupliquer cela et créer un bouton de mise à jour. Ce sera pour la mise à jour. Cela doit également exécuter la même méthode de validation pour s'assurer que tous les champs de formulaire que nous utilisons sont toujours présents après leur enregistrement. Nous ne voulons afficher qu'un de ces boutons à la fois. La façon dont nous pouvons le faire est de vérifier si notre événement a une propriété id. C' est parce que la propriété id n'est ajoutée qu' une fois que nous avons enregistré, donc l'événement existe déjà, donc nous devons le mettre à jour. A l'intérieur du premier bouton qui est mise à jour, nous allons ajouter une section v-if, et cela va vérifier si le Currentevent.id existe. Si cette déclaration est vraie, nous verrons le bouton de mise à jour. Si ce n'est pas le cas, nous ajouterons la section el-section pour afficher le bouton Ajouter. Essayons ça. Nous allons au bouton Ajouter pour commencer. Nous verrons les deux ici parce que nous n'avons pas ajouté v-else. Nous en avons besoin parce que ce n'est pas seulement du JavaScript régulier. Je vais maintenant voir le bouton de mise à jour, donc tout fonctionne bien. Maintenant, revenez à nos deux boutons. Maintenant, ces deux boutons, un premier, appelant la méthode validate. Lorsque nous appelons ceci, il doit savoir si nous mettons à jour un événement ou si nous allons en ajouter un nouveau. Pour ce faire, nous allons passer une chaîne et pour celui-ci, ce sera mis à jour. Celui-ci sera ajouté. Maintenant, nous avons un type d'événement que vous voudrez exécuter après la validation. Transmettez ceci à notre méthode de validation. C' est un nom de variable que je vais appeler le type. Cela va passer par toute la validation. Avant d'aller de l'avant et d'ajouter un nouvel événement, nous ne voulons appeler cette méthode que si le type est égal à ajouter. Nous allons ajouter une instruction if. Si la variable externe est égale à ajouter, nous appellerons ensuite this.AddEvent. Sinon, nous allons ajouter une section el-, donc cela doit signifier que le type est mise à jour et donc nous voulons appeler une méthode différente qui va être appelée UpdateEvent. Mettre à jour notre événement va ressembler à cette méthode AddEvent, donc nous pouvons dupliquer cela pour commencer, il change pour être mis à jour. Nous n'avons pas encore créé d'événement de mise à jour personnalisée, nous allons donc laisser ce vide. Vous aurez également besoin de recevoir les nouveaux détails de l'événement et de fermer le formulaire, donc tout va bien. Nous allons maintenant créer cet événement personnalisé dans l'app.view jusqu'à la section addUpdateForm. Cela va suivre un modèle similaire à cette section ajouter un nouvel événement. Mais cette fois, c'est pour la mise à jour, donc nous allons ajouter un nouvel événement personnalisé appelé événement de mise à jour. Cela va déclencher une fonction de mise à jour et nous recevrons également les données d'événement. Mettons-en place maintenant dans nos méthodes. Cela prendra dans les détails de l'événement qui est passé. La première chose que nous devons faire lorsque nous mettons à jour un événement à l'intérieur de ces tableaux d'événements, nous voulons trouver la position d'index pour celui que nous voulons mettre à jour. La façon dont nous pouvons le faire est d'appeler this.event pour récupérer notre tableau complet, puis nous devons appeler une méthode de tableau JavaScript appelée FindIndex. Cela va alors appeler une fonction, et cette fonction va être appelée pour chaque élément à l'intérieur de notre tableau d'événements. Nous sommes effectivement en boucle à travers chacun d'eux, puis il exécute une fonction. Chaque fois que nous faisons une boucle à travers un événement individuel, nous allons ensuite stocker la valeur ou l'élément à l'intérieur de cette propriété el. C' est juste un nom de variable, donc vous pouvez appeler cela tout ce que vous voulez. Nous allons ensuite vérifier si cet élément.id va être égal à l'id qui est passé à partir de cet événement. Ceci est dans une constante appelée index. Cela devrait maintenant nous donner la position d'index de notre événement à l'intérieur de ce tableau d'événements. Si nous avons sélectionné le premier, ce sera la position de l'index zéro. Ce sera la position un, deux, trois, et ainsi de suite. Nous allons ensuite appeler this.events et saisir le particulier par le numéro d'index, puis le remplacer par notre nouvel objet d'événement. Tout ce qu'il reste à faire est d'appeler cet événement personnalisé à partir de notre composant. Dans le formulaire d'ajout de mise à jour, nous devons d'abord recevoir cela dans le tableau d'émission. Ensuite, cela est prêt à appeler de notre méthode. l'événement de mise à jour et nous pouvons remplacer cela par l'événement de mise à jour, disons ceci, et nous pouvons tester notre fonctionnalité de mise à jour. Allez dans n'importe lequel d'entre eux, nous pouvons éditer les détails. Cliquez sur la mise à jour, et ceci est maintenant enregistré. Essayons un autre. Je vais changer la couleur de fond pour être orange. Tout ça fonctionne bien. Faisons juste un résumé rapide parce que ça se passe beaucoup ici. Nous transmettons des données entre deux composants différents. La première chose que nous avons fait dans l' app.view était d'écouter un clic sur l'un de ces événements. Nous avons ensuite déclenché une méthode appelée setForm. Cela a également reçu les données de l'événement en cours. Maintenant, à l'intérieur de cette méthode, la première chose que nous avons fait était de définir une propriété de données appelée événement courant. Cela était égal à nos informations sur l'événement, puis il a également apparu le formulaire. Cet événement actuel remontant au sommet a ensuite été transmis à notre formulaire, qu'il a ensuite utilisé pour remplir toutes les sections à l'intérieur d'ici. Il l'a fait parce que nous l'avons assigné à notre propriété de données. Dès que ce composant a monté ce bouton de mise à jour, puis appelé la méthode validate. Ensuite, une fois que vous avez vérifié toute la validation, nous avons ensuite appelé soit la méthode add, soit la méthode update, que nous avons configurée juste au-dessus en utilisant nos événements personnalisés. Juste avant de passer à autre chose, nous allons également vérifier que la validation fonctionne ou la section mise à jour. Si nous supprimons un nom, le nom est requis et également les détails de l'événement sont également requis. Une chose à noter cependant, si nous actualisons cette application, l'application reviendra à la façon dont elle était à l'origine, puisque nous n'utilisons pas une base de données pour stocker tous ces événements dans. Ensuite, nous allons passer à la suppression effective ces événements lorsque l'utilisateur clique sur ce bouton. 52. Supprimer des événements et arrêter la propagation: Juste avant de passer à la suppression de nos événements à l'aide de ce bouton Cross, nous allons résoudre un petit problème que nous avons examiné dans la dernière vidéo. Maintenant, cette question a été mise en évidence. Si nous allons dans la section Ajouter un nouveau, nous verrons que nous n'avons aucun de ces formulaires pré-remplis. Cependant, si nous allons dans une section Edit, qui fonctionne complètement bien. Fermez ceci, et maintenant si nous revenons dans la section Ajouter, tous nos champs de formulaire de travail sont maintenant pré-remplis. Maintenant, la raison pour laquelle cela se produit est parce qu'une fois que vous ouvrez la section Edit, cela est défini dans l'app.view, notre propriété data, qui est CurrentEvent, et cela envoie ensuite cela aux données CurrentEvent. Maintenant, pour corriger cela, nous allons réinitialiser ceci à un objet vide lorsque nous fermons ce formulaire. Lorsque nous fermons ce formulaire, regardez tout en haut, tout ce que vous faites est de définir la propriété showForm pour être égale à false. Nous allons maintenant passer à une méthode, et nous pouvons également réinitialiser nos données CurrentEvent. On découpera ça, on l'utilisera dans un instant. Cette méthode va être appelée forme fermée, puis nous pouvons faire défiler vers le bas et créer ceci juste en dessous. formulaire fermé n'a pas besoin de prendre des données, tout ce que nous avons à faire est de le coller à nouveau. Maintenant, puisque nous sommes dans notre section vue, nous faisons référence à ceci avec ce mot-clé. Ensuite, nous réinitialiserons notre retour de données CurrentEvent pour être un objet vide. Essayons ceci, actualisez le navigateur. C' est vide. C'est bien. Puis de retour dans notre formulaire d'ajout, tout est maintenant vide. Maintenant, nous pouvons passer à la suppression de nos événements en utilisant ce bouton Cross. La suppression des événements suivra un modèle similaire de création d'un événement personnalisé, et le deux-points à partir des composants enfants. Cette fois cependant, il sera appelé à partir du composant d'événement plutôt que du formulaire. Au-dessus de l'event.view, où nous avons déjà ce bouton configuré, et très bientôt nous allons le connecter à un événement personnalisé. Regardez bien, c'est un événement personnalisé comme toujours dans l'app.view. abord, nous allons mettre en place une méthode que cet événement personnalisé va appeler. Cela va être appelé remove. Ce seront également des données d'événements passés, donc nous savons quels événements nous voulons supprimer. Maintenant, tout comme dans la section mise à jour, nous devons également trouver la position de l'index, donc nous savons lequel nous voulons supprimer de notre tableau. Nous pouvons copier ceci et coller ceci à l'intérieur d'ici, et nous ne pouvons utiliser cette position d'index que pour sélectionner l'événement correct. Nous allons d'abord sélectionner this.events, puis la méthode de tableau JavaScript, qui est appelée splice, va nous permettre de supprimer un élément particulier. Ça va prendre deux choses. Le premier sera la position de l'article que nous voulons supprimer. Nous savons que nous avons déjà ceci à partir de l'indice. Deuxièmement, le nombre d'éléments de cette position d'index. Nous voulons seulement supprimer l'événement unique, ce qui signifie que la valeur est un. Ensuite, nous faisons défiler jusqu'à nos modèles et à la section événements où nous voulons passer notre événement personnalisé. En tant qu'attribut, nous allons passer notre méthode cristalline, qui est remove-event. Cela sera égal à notre méthode remove, qui recevra également les données d'événement. L' étape suivante devrait être assez familière. Nous passons aux composants d'événement, puis nous allons ajouter notre tableau d'émissions. Cela émet tableau ne va actuellement prendre qu'un événement, et c'est l'événement remove. Jusqu' à notre bouton. Pour déclencher cela, nous devons écouter un clic. Ensuite, nous allons cliquer sur ce bouton, cela va alors appeler la méthode remove, qui va maintenant être configurée juste en dessous. Nous n'avons pas de section de méthode, donc nous devons configurer cela, puis configurer notre méthode remove où nous allons émettre notre événement personnalisé. Puisque nous sommes dans la section vue, nous devons l'appeler avec ce mot-clé. Entrez le nom de notre événement qui est remove-events. Ensuite, nous voulons transmettre les données d'événement. Nous avons déjà ceci sauvegardé en tant qu'accessoire, donc nous passons ceci comme deuxième argument. Essayons ça. Vers le navigateur et actualiser. Maintenant, si nous essayons de cliquer sur l'un de ces événements, nous pouvons voir en arrière-plan que l'événement a été supprimé. Nous verrons également ce formulaire apparaître. Essayons encore une fois. Nous allons retirer l'anniversaire, et nous pouvons voir à partir de l'arrière-plan que cela a disparu. Mais pourquoi voit-on cette forme ? Eh bien, c'est parce que même si dans ce composant, nous cliquons sur ce bouton. Ce bouton est imbriqué à l'intérieur de l'app.view et à l'intérieur de cette appair.view appairage, nous avons également cela entouré dans un écouteur de clic, qui déclenche SetForm. Ensuite, à l'intérieur de ShowForm si nous faisons défiler vers le bas, nous pouvons voir que nous avons défini dans this.showForm pour être égal à true. Pourquoi est-il appelé lorsque nous cliquons sur le bouton Supprimer ? Eh bien, la raison pour laquelle cela se produit est à cause de quelque chose appelé propagation d'événements. Ce n'est rien à voir avec Vue.js, juste quelque chose dont vous devriez généralement être conscient lors de l'utilisation de JavaScript. Oui, nous cliquons sur le bouton Supprimer qui est imbriqué à l'intérieur, mais cliquer sur un événement à l'intérieur du HTML déclencherait une réaction en chaîne. Pour voir cela, nous pouvons ouvrir les outils de développement. Cliquez avec le bouton droit et inspectez. Ce que nous devons trouver est ce bouton Supprimer, donc dans la section du corps, la section de l'application. Ensuite, à l'intérieur d'ici, nous avons une liste non ordonnée avec tous les événements, puis nous pouvons sélectionner l'un de nos éléments de liste. Si nous ouvrons cela, c'est dans un wrapper d'article, et le bouton est imbriqué dans la section compte à rebours juste ici. Comme nous pouvons le voir, cela met en est profondément imbriqué, il a des divs environnants, il a des éléments de liste. Dans l'ordre lister la section du corps, et il passe à travers le haut de l'arbre, qui est la fenêtre. Même si nous cliquons sur ce bouton, cela déclenchera une série de phases. Il commencera tout en haut et cela passera ensuite à travers tous les éléments jusqu'à ce qu'il atteigne notre bouton. C' est ce qu'on appelle la phase de capture. Ensuite, il atteint le bouton ou les éléments sur lesquels nous avons cliqué, et cela s'appelle la cible. Par conséquent, la scène est appelée la phase cible. Enfin, une fois qu'il atteint ce bouton, il remonte ensuite à travers tous les éléments parents un par un. Ce faisant, nous déclencherons également tous les événements sur le chemin du retour. Comme nous venons de le regarder, l'un de ces événements sur le chemin du retour ouvrira toujours le formulaire. Cette étape est appelée la phase bouillonnante. Maintenant, vous n'avez pas besoin de comprendre tout ça pour l'instant. Tout ce que vous devez comprendre est que lorsque nous cliquons sur un événement, il passe par tous les éléments DOM parents et nous allons déclencher d'autres le long du chemin aussi. Tout cela est appelé propagation d'événements. Vue.js nous fournit également un modificateur d'événement pour arrêter ce comportement si nécessaire. Plus dans l'event.view. Tout comme précédemment lorsque nous avons ajouté le modificateur de prévention qui a arrêté le comportement par défaut du navigateur, ce modificateur d'arrêt arrêtera cette propagation d'événement. Sauvegardons ceci et encore dans notre projet. Cliquez sur ceux-ci. Maintenant, ces événements sont supprimés avec succès. Juste pour finir les choses, je vais faire un petit refactor dans l'app.view. Pour le moment, à l'intérieur de cette méthode remove et aussi la mise à jour, nous dupliquons cette ligne de code. Pour éviter cela, plaçons cette ligne de code dans sa propre méthode réutilisable. Nous découpons ceci, et aussi celui-ci aussi, puis créons une nouvelle méthode appelée FindEventIndex, où nous pouvons coller dans cette ligne de code. Cette méthode a également besoin d'accès à notre événement, afin que nous puissions recadrer l'ID d'événement. Ou bien, nous pouvons simplifier cela et simplement passer l'ID des événements. Nous pouvons le faire appelé FindEventIndex, alors saisissons ceci et d'abord dans la méthode remove. Nous n'avons maintenant pas accès à cette constante d'index, nous allons donc la remplacer par un appel de méthode. Nous pouvons appeler FindEventIndex, où nous devons également le transmettre dans un ID valide que nous pouvons récupérer de l'Event.id. Cela doit également être appelé lorsque le mot-clé ce, et nous pouvons également copier cette section et remplacer la section de mise à jour où nous appelons l'index. On va coller ça. Maintenant, nous devons retourner la valeur de cette méthode. Au lieu de stocker cela à l'intérieur d'une constante, nous allons retourner son numéro d'index, qui sera alors disponible à l'intérieur de ces deux sections. Essayons ça. Tout d'abord, nous pouvons supprimer un événement, et cela fonctionne bien. Ensuite, la fonctionnalité de mise à jour, vous modifiez l'un des détails. Cliquez sur Mettre à jour, et cela fonctionne également très bien. 53. Section Intro - Validation et aperçu plus détaillé des props: Nous ne voulons pas seulement jeter des données anciennes dans les anciens composants. Nous voulons être plus précis sur le type de données que nous allons recevoir et les formats dans lesquels elles se trouvent. Sinon, nous pouvons obtenir des erreurs et nous ne voulons pas de celles dans notre application. Nous allons jeter un oeil à cela dans la prochaine vidéo, puis nous allons suivre en regardant quelque chose appelé attributs non-prop, qui est une façon différente de transmettre des données entre nos composants. 54. Validation d'un prop: Dans notre projet, les accessoires sont une partie importante de la façon dont tout fonctionne. C' est une bonne idée d'ajouter une certaine validation pour nous assurer que nous obtenons les informations correctes transmises par nos composants. À l'intérieur de ce fichier app.view principal, c'est le composant de niveau supérieur, donc cela n'est pas passé aucun accessoire. Pour commencer avec la validation prop, nous allons aller dans les composants events.view. La première chose que nous devons faire pour ajouter la validation est de changer ce tableau en un objet, c'est des résultats communs, et ensuite nous allons rétablir notre propriété props pour cette fois en tant qu'objet. Le premier que nous avons juste au-dessus est les événements. Sa validation de preuve la plus simple, elle ne peut pas simplement déclarer le type de données que nous attendons à recevoir. L' événement va être un objet. Ensuite, séparés par une virgule, nous avons les DaysLeft. Le DaysLeft va être un nombre. Ensuite, nous avons ShowPastevents. Le type de données pour ceci est un booléen. Ceci est juste un vrai ou faux simple, donc nous pouvons cacher les événements si les jours ont expiré. Nous pouvons également transmettre un type de données valide aussi, tels que tableau, fonction, symbole, date et chaîne. Essayons ça. Plus dans le navigateur, rafraîchir, nous voyons que tout fonctionne parfaitement bien. Ouvrez les outils de développement et nous pouvons vérifier qu'il n'y a pas de zones à l'intérieur de la console. Oui, tout va bien. Mais maintenant, si nous passons à l'app.view, nous allons apporter une modification aux données que nous transmettons à ce composant d'événement. Par exemple, passons à ShowPastevents qui est vrai ou faux. Maintenant, si nous supprimons la liaison, cela ne signifie pas que cela sera transmis comme une valeur de chaîne plutôt qu'un booléen. Ouvrez ceci, actualisez, et maintenant nous verrons un avertissement pour tous nos six événements différents. L' avertissement est le type de prop non valide, la vérification de type a échoué pour ShowPasteVents prop. Nous voyons que nous nous attendions à un booléen parce que c'est ce que nous avons mis à l'intérieur de nos composants. Mais on a eu une ficelle. Nous ne sommes pas limités à un seul type de données non plus. Si nous voulions accepter une chaîne à côté de ce booléen, tout ce que nous aurons à faire est de passer ceci en tant que tableau. C' est autour de cela à l'intérieur de ces crochets, puis séparés par une virgule acceptera également une valeur de chaîne. Rafraîchissez, et maintenant nos erreurs vont disparaître. Nous ne voulons pas booléen pour cet exemple particulier, donc nous pouvons supprimer les crochets et aussi à la liaison ici. Ces erreurs que vous voyez ne sont montrées que dans les développements et peuvent être vraiment utiles si nous faisons une erreur ou modifions nos données de façon inattendue. Nous ne pouvons pas aller encore plus loin en déclarant non seulement le type de données, ce que nous faisons actuellement, mais aussi pour restreindre les valeurs que vous recevez aussi, pour ce faire, nous pouvons passer des propriétés supplémentaires et le transformer en un objet, alors appelez-nous ceci et ajoutez l'accolade bouclée est de transformer cela en un objet, nous pouvons ensuite passer le type avec la propriété type. Ce que nous allons définir à nouveau cet accessoire pour être un objet, le DaysLeft, nous faisons la même chose pour cela et la propriété type, et aussi la même chose pour tous les booléens. Maintenant, ce sont tous des objets, ceux-ci peuvent maintenant accepter plusieurs propriétés. Par exemple, si nous voulions nous assurer que cet accessoire est nécessaire, nous pouvons définir cela pour être vrai. Aussi la même chose pour les DaysLeft. Cela signifie que cela devrait circuler dans une erreur si même l'une de ces propriétés n'est pas transmise à ces composants. Testez cela sur l'app.view, nous pouvons supprimer n'importe lequel d'entre eux. Allons pour les joursGauche. Appelons ça temporairement. Maintenant, dans le navigateur, nous voyons l'accessoire manquant ou requis de DaysLeft pour tous les six de nos événements. Plus dans l'event.view, remarquez ici comment nous avons laissé la propriété requise, à ShowPastevents. C' est parce que ce type d'accessoire est un booléen. Si nous ne faisions pas passer cet accessoire, une valeur booléenne sera toujours par défaut false de toute façon, ce qui signifie qu'elle semble toujours être présente de toute façon. C' est juste quelque chose à surveiller lors du passage d'accessoires booléens. Réinstaure rapidement ses DaysLeft et enregistrez ce fichier. Les accessoires peuvent également recevoir une valeur par défaut, que nous pouvons utiliser si aucune valeur n'est fournie. Maintenant, au lieu de dire que ce type d'accessoire doit être présent, nous pouvons également dire que si ce n'est pas présent, nous allons plutôt passer une valeur par défaut. C' est le type de nombre, et allons-y pour un nombre de 10. Cela ne fera actuellement aucune différence si nous actualisons le navigateur car nous transmettons toujours le prop vers ces composants. Mais encore une fois, si nous pouvions le faire, actualiser, bien que les événements vont maintenant revenir par défaut à 10 jours restants. Allons juste annuler ceci et enregistrer ce fichier. Cela fonctionne juste pour des choses telles que des nombres ou des chaînes, booléen lors de la validation des fonctions, les tableaux sont des objets. Nous devons passer cette propriété par défaut en tant que fonction. Notre événement est le type d'objet, donc nous pouvons essayer cela, supprimer la propriété requise, puis il change pour être la valeur par défaut. Pour cela, puisque c'est un objet, nous devons le configurer en tant que fonction. Ensuite, si aucun accessoire d'événement n'est passé, nous allons retourner cet objet par défaut. Cela doit avoir la même configuration que nous avons actuellement à l'intérieur ici. Nous avons l'ID, à chaque événement, qui donne juste quelques informations aléatoires. Nous avons le nom, qui est une valeur de chaîne, les détails de l'événement. Si c'est bien, sauvegardez ceci, et bien sûr cela ne devrait pas affecter quoi que ce soit que nous avons actuellement parce que nous recevons toujours l'accessoire de l'événement. Mais si nous supprimons cela, nous devrions maintenant lancer nos événements par défaut avec des données que nous transmettons ici. Ce que nous voulons réellement examiner est la propriété validator. Ajoutons simplement notre événement ici, puis revenons à nos événements. La propriété validator est une fonction personnalisée qui nous donne un moyen beaucoup plus flexible de valider nos accessoires. Il est disposé d'une manière similaire à notre fonction par défaut, mais au lieu de cela, nous le remplacons par validateur. Cette fonction prendra également une valeur, qui est la valeur de la prop qui est passée. Actuellement, ce sera l'événement. Nous pouvons maintenant valider cette valeur de n'importe quelle façon nous voulons utiliser JavaScripts. Par exemple, si nous voulions seulement autoriser un certain nom d'événement, nous pourrions faire quelque chose comme ça. Laissez configurer un tableau ouvert avec les noms d'événements à haute voix que vous voulez passer à travers ce validateur. Allons pour deux de notre nom actuel de l'événement. Nous avons un anniversaire, et nous avons aussi un Noël. Ensuite, nous pouvons utiliser la méthode JavaScript inclut pour vérifier si de nos événements inclut soit le titre d'anniversaire ou de Noël. Nous savons que les informations d'événement sont transmises à l'intérieur de cette valeur, sorte que nous pouvons accéder à nos objets, puis au nom de l'événement. Si l'un de nos événements inclut le titre d'anniversaire ou de Noël, nous voulons alors renvoyer cette valeur, et ce sera vrai ou faux. Sauvegardons ceci et revenons au navigateur dans les outils de développement. Nous allons maintenant voir que ce validateur a échoué pour nos quatre événements qui n' incluent pas le titre ou le nom de l'anniversaire ou de Noël. Nous n'avons pas besoin de cette fonction de validation à l'intérieur de ce projet, mais il est utile de savoir que c'est là et cela nous donne un moyen vraiment flexible de valider nos accessoires. Nous pouvons également ajouter la validation de type prop à notre addUpdateForm, faites défiler vers le bas jusqu'à notre action de scripts. Nous avons seulement le seul accessoire à l'intérieur ici, donc nous pouvons commenter cela, définir cette application a un objet, base dans nos événements actuels, qui a le type d'objet. Enregistrez ce fichier. Maintenant, si nous actualisons le navigateur, ouvrez la console, tout fonctionne maintenant toujours comme prévu. 55. Attributs non props: Dans le projet précédent, nous avons ajouté une option de mode sombre, et je vais maintenant faire quelque chose de similaire qui consiste à appliquer un mode grayMode. Si ce jeu de couleurs que vous avez actuellement est un peu trop pour l'utilisateur, cela devrait être assez familier, nous avons réduit en utilisant beaucoup des techniques que nous avons déjà utilisées. À partir de l'App.vue, nous avons d'abord besoin de quelques propriétés de données. À l'intérieur de la section des retours, le premier sera GrayModeset, il s' agit d'une valeur booléenne qui sera actuellement définie sur false. Puis aussi un objet GrayMode qui va contenir le schéma de couleurs, mais notre arrière-plan et aussi notre couleur de police. Ce sera pour notre silicium CSS, définissez d' abord la propriété de fond pour être gris ardoise clair. Ensuite aussi notre propriété de couleur pour le texte, et vous pouvez choisir n'importe quelle couleur que vous voulez et je vais aller pour une valeur hexadécimale de 454444. Passez aux modèles, cela nécessite également un bouton pour que nous puissions activer et désactiver cela. Je vais placer cela à l'intérieur de nos options div, et aussi entre ces deux boutons de couleur. La première étape est de, au moins maintenant pour un clic sur ce bouton, puis nous allons basculer ce GrayModeset pour être activé et désactivé. Tout comme nous l'avons fait ci-dessus avec les événements passés du spectacle, nous allons faire la même chose, mais cette fois pour GrayModeset. Nous allons définir ça pour être le contraire. Nous pourrions également ajouter du texte à l'intérieur d'ici, mais au lieu de cela, je vais utiliser une cacher mon entité, qui va être le soleil ou la lune. Pour rendre cette dynamique, nous avons besoin des accolades doubles et nous utiliserons également l'opérateur ternaire JavaScript. Si le mode gris est actuellement vrai, nous allons définir l'icône qui est la lune. Ainsi, l'icône de la lune est l'esperluette, la dure sur le nombre de 9788 ;. Si c'est faux, nous montrons l'image de la lune. Nous définissons cette valeur par défaut pour être false, donc nous voyons l'icône de la lune à l'intérieur d'ici. Cliquons sur cela, nous voyons le soleil. Donc, tout cela semble fonctionner très bien. Maintenant, les styles qui ont été configurés en tant que propriété de données, doivent maintenant être transmis à ces composants d'événement. Nous pouvons changer la couleur de fond et aussi le texte pour chacun de ces événements. Par le passé, nous avons transmis des accessoires à ces composants d'événement. Comme on le voit ici. Nous pourrions le faire encore une fois, mais cette fois, nous allons profiter des attributs non-prop. Cela fonctionne de la même manière que les accessoires que nous avons examinés dans le passé. Eh bien, au lieu d'entrer dans les composants, le modèle héritera automatiquement ces valeurs. Pour ces composants particuliers, l'article est les principaux éléments du wrapper, et tous les attributs à but non lucratif à transmettre seront automatiquement hérités par ce wrapper principal. Ils apparaissent également comme un attribut régulier à l'intérieur de la balise d'ouverture, donc si nous passons un attribut ID, cela ressemblerait à ceci. Supprimons cela et pour ce faire, nous allons revenir à l'app.vue des parents, et ensuite nous pouvons transmettre cela aux composants de l'événement. En utilisant le même exemple, nous allons définir l'ID égal à une chaîne, disons ceci et plus au navigateur, nous pouvons actualiser et ouvrir les outils de développement. Utilisez le sélecteur et choisissez l'un de ces événements. Ceux-ci sont stockés dans une liste non ordonnée, et si nous allons à l'intérieur de nos éléments de liste sur l'article, ceci autour d'un article a maintenant hérité de notre ID. Cela signifie que si nous passons à notre événement. Vue, nous n'avons plus besoin de les enregistrer comme nos accessoires, ils sont automatiquement hérités à l'intérieur du modèle. Maintenant, à titre d'exemple plus pratique, nous allons remplacer cet ID par les styles que vous définissez comme propriété de données. Nous combinons cela comme un attribut de style où nous allons transmettre nos arrière-plans et aussi notre couleur. A l'intérieur de la section données, nous avons cet ensemble à l'intérieur de notre objet GrayMode. Maintenant, nous ne voulons transmettre ces valeurs que si GrayModeset est vrai. Nous pouvons maintenant utiliser l'opérateur ternaire JavaScript pour déterminer si nous allons passer ceci tant qu'objet et nous pouvons le faire en utilisant l'opérateur ternaire JavaScript. Nous pouvons d'abord vérifier si GrayMode est défini. Si c'est le cas, nous allons ensuite passer notre objet, qui est GrayMode. Sinon, nous allons simplement passer une chaîne vide, donc aucun de ces styles ne s'appliquera. Donnons-le un aller au navigateur, et notre bascule fonctionne maintenant. À l'intérieur des outils de développement, nous pouvons voir cela si nous allons dans la section des éléments, votre liste non ordonnée, puis vers notre article où nous avons maintenant cette propriété de style dynamique, qui a la couleur de fond et aussi la couleur du texte aussi. Cliquez sur le Soleil, puis notre CSS régulier s'appliquerait. Maintenant, avec tout ce travail et nous allons juste appliquer un peu de style à ces trois boutons en haut, et le bouton Afficher les événements passés à côté de cette bascule va rester sur la gauche. Nous allons pousser ce bouton de vamp AddNew vers la droite. Faites-le dans l'App.vue, jusqu'aux trois boutons, et nous allons regrouper nos deux premiers boutons ensemble à l'intérieur d'un div. Donc nous pouvons les attraper, ajouter un div, et les placer à l'intérieur. Le style, et nous allons donner à cela une classe d'option sur les boutons du crâne. Cela signifie maintenant que notre classe d'options a maintenant ce div et aussi ce bouton. Nous pouvons utiliser la flexbox CSS pour définir l'alignement et ajouter un peu d'espacement entre ces deux sections. Section de style de réduction de l'échelle. Tout d'abord, ces options wrapper, le type d'affichage de flex, qui va maintenant peut-être nous ne pouvions pas définir le contenu justifié pour nous donner un peu d'espace entre. Cela nous donne maintenant l'espacement entre les deux, donc nous pouvons maintenant nous concentrer sur cette fois et pour ces boutons individuels, commençons par ce bouton AddNew. Si nous revenons à notre modèle, le bouton sur la droite, comme cette classe de AddNew. Ensuite, nos deux boutons sur la gauche ont cette classe de boutons d'option. Jusqu' à notre section style, allons d'abord pour le bouton AjouterNouveau. Nous pouvons le rendre un peu plus grand avec la taille de police de trois rems et aussi la couleur de la police, qui sera une valeur RVB. Donc le rouge est 92, le vert est 84, puis 84 pour le bleu aussi. Le curseur, ce sera un pointeur, donc il change lorsque l'utilisateur survolera ce bouton. Ensuite, supprimez également l'arrière-plan par défaut et aussi la bordure. Maintenant, le groupe d'options sur la gauche, qui avait la classe des boutons d'option. Ensuite, quand nous voulons cibler les deux boutons qui sont imbriqués à l'intérieur, commencez à un rembourrage de 0,5 rems en haut et en bas, puis à un rem à gauche et à droite. Cela rendra juste ces boutons un peu plus grands et pour ajouter également un peu d'espacement entre les deux, nous pouvons appliquer une certaine marge sur la droite, l'arrière-plan de aucun. Alors allons-y à la frontière. Tout d'abord, le rayon de bordure d'un rem nous donne les coins arrondis, puis la bordure réelle, qui va être de deux pixels de large, une couleur de bleu acier clair, et aussi une ligne solide. La taille de police de 1.2 rems et enfin le curseur, juste tellement est allé être un pointeur. La touche finale pour s'assurer également que nous avons un alignement vertical de nos deux boutons sur la gauche à tous les boutons sur la droite. Nous pouvons voir que cela le met un peu plus bas et la façon de corriger cela est à l'intérieur de l'enveloppe, et tout ce que nous devons faire à l'intérieur d'ici est de définir la propriété align items pour être au centre, qui s'alignent maintenant nos deux sections. Il y a aussi quelques autres choses à découvrir avec des attributs non-prop, et nous allons les découvrir ensuite. 56. Plus sur les attributs non prop: Nous savons maintenant comment passer des attributs de base non-prop, mais il y a aussi quelques autres choses que nous pouvons examiner aussi. L' une de ces choses est d'annuler l'héritage automatique. Nous savons à partir de la dernière vidéo que le composant enfant hérite automatiquement des attributs. Mais si nous ne voulons pas que cela se produise, nous avons le contrôle total sur cela. A l'intérieur du composant enfant, qui est l'Event.vue, nous descendons à notre section de script et nous pouvons ajouter une nouvelle propriété, qui est HeriitAttrs. Si nous définissons alors cette valeur sur false, cela signifie maintenant que notre template n' héritera pas automatiquement tous les attributs non-prop que nous transmettons. Nous pouvons prouver que cela fonctionne en basculant, mettons-le juste ici, et notre palette de couleurs reste exactement la même. Mais pourquoi voudrait-on faire ça ? Eh bien, disons, par exemple, nous ne voulons pas que tous ces attributs soient hérités à ce wrapper de niveau supérieur. Eh bien, nous ne sommes pas limités à utiliser simplement ce wrapper de haut niveau, Vue nous donne accès à ces attributs n'importe où à l'intérieur de ce modèle, et aussi dans notre section de script. Faisons cela en ajoutant le crochet monté, et dès que ce composant est monté, une fois qu'il se connecte à la console, la valeur de ceci. Attrs. Donc, si nous accédons à nos attributs à l'intérieur de notre section de script, nous utilisons le mot-clé 'this'. Si nous y accédons directement dans notre modèle, n'oubliez pas que nous n'avons pas besoin d'utiliser un mot-clé 'this', et nous pouvons y accéder directement sur la console. Vérifions ça. Rafraîchir. Nous avons maintenant six attributs différents. Parce que nous avons six événements différents, à l'intérieur d'ici, nous avons toujours accès à notre objet de style et nous pouvons accéder à tous les autres attributs non-prop qui sont transmis à cet événement. Cet attribut de symbole dollar est une propriété de vue intégrée. Nous sommes maintenant libres de l'utiliser partout où nous voulons. Par exemple, si nous voulions placer cela dans un div différent, nous pouvons le faire en utilisant v-bind. N' oubliez pas que nous n'héritons pas automatiquement de ceci, donc cet article n'a pas d'accès automatiquement. Maintenant, nous pouvons placer cela dans n'importe quelle autre section en utilisant v-bind, puis transmettre nos attributs dans la console. En haut de notre application se trouve l'objet d'options avec les trois boutons. Alors explosez ça, ouvrez la liste non ordonnée. Pour chaque événement, nous avons l'élément de liste, nous avons l'emballage de l'article, et donc notre article. Ensuite, la div avec la classe de données , basculez ce bouton. Ensuite, nous voyons notre attribut de style est maintenant ajouté à cette section avec ceci. Ceci est juste un exemple de la façon dont nous pouvons placer ces attributs dans n'importe quelle section de notre modèle. Quelque chose dont nous devons également être conscients est si nous avons plusieurs éléments de niveau racine. Pour voir cela, laissez supprimer notre v-bind. Si nous aussi, commenter nos attributs hérités. Maintenant, si nous revenons à notre modèle et si nous devions découper ce bouton de suppression, la section div complète, puis des endroits juste au-dessus de notre article. Rappelez-vous d'avant que cet article héritait automatiquement. Tous les attributs non-prop qui sont transmis, mais maintenant nous avons deux éléments l'un à côté de l'autre. Lequel hériterait automatiquement de ces attributs ? Eh bien, jetons un coup d'oeil dans le navigateur. Retour dans les outils de développement, dans la console. Rafraîchir. Nous voyons maintenant également certains messages d'erreur dans la console puisque l'héritage ne se produira que s'il y a un élément racine. Donc, il est logique que ce comportement existe, parce que si nous avons deux éléments à côté de l'autre comme celui-ci, Vue devrait deviner sur lequel monter. Nous allons ensuite résoudre cela en utilisant à nouveau notre syntaxe v-bind, puis dire Vue.js à quel de ces éléments nous voulons lier, tout comme avant de lier nos attributs. Ensuite, si nous revenons aux outils de développement, dans la console, nous ne voyons plus d'erreurs. La dernière chose que nous allons regarder est également un écouteur d'événement passant comme attributs aussi. Jusqu' à présent, si nous allons à notre App.vue, puis où nous rendons nos composants d'événements. Jusqu' à présent, nous n'avons regardé que le passage de données telles que des styles, mais passer un écouteur d'événement fonctionne exactement de la même manière. Si nous voulions écouter un événement, comme un clic, nous pouvons également le transmettre dans nos composants à @click. Ensuite, comme avec n'importe quel autre événement, nous pouvons alors déclencher une méthode, ou nous pouvons simplement faire du JavaScript simple, comme définir un mode gris pour être égal à vrai, enregistrer cela sur notre navigateur. Rappelez-vous dans l'événement .vue, nous lions actuellement ces attributs à ce bouton de suppression. Maintenant, si nous cliquons sur cette section de bouton de suppression, nous voyons la couleur de fond plus foncée est apparue, est-ce que nous définissons le mode gris pour être vrai. Nous pouvons également voir cela si nous passons aux outils de développement, où nous faisons toujours le journal de la console pour chacun de nos attributs. Si nous ouvrons ceci, puis c'est la section cible, vous voyez que nous avons cette propriété de style, mais aussi maintenant un gestionnaire d'événements OnClick. Maintenant, ce n'est qu'un exemple simple de la façon dont un écouteur de clic fonctionne avec des attributs non appropriés. Nous allons donc supprimer cela car nous n'avons pas besoin de cela dans notre projet. En outre, dans le cas, si nous basculez cela, nous passons toujours les attributs au bouton. Nous voulons que ceux-ci s'appliquent réellement à l'article donc nous allons supprimer tous les v-bind et ensuite passer ceci à notre article. Essayons cela en cliquant sur notre bascule, et tout fonctionne encore une fois. C' est ainsi que fonctionnent les attributs non-prop. Ensuite, nous allons jeter un oeil à d'autres façons de transmettre des données à l'aide de slots. 57. Section Intro - Emplacements et composants dynamiques: Jusqu' à présent, nous avons examiné différentes façons de transmettre des données entre nos composants. Nous avons examiné comment nous pouvons transmettre les accessoires d'un parent à un composant enfant, et comment nous pouvons omettre la sauvegarde d'événements personnalisés. Mais ensuite dans cette section, nous allons jeter un oeil à quelque chose appelé slots, qui est une façon vraiment flexible de transmettre des données entre nos composants. Mais aussi, nous aurons un nouveau projet de style qui est une application de tableau de bord. Ensuite, nous allons jeter un oeil sur la façon dont nous pouvons télécharger ceci et commencer. 58. Ce que nous allons construire et le projet de départ: Dans les prochaines sections, nous allons examiner différentes façons d'analyser les données entre nos composants. La section sera axée sur les créneaux horaires. Ensuite, dans la section suivante, nous allons jeter un oeil à quelque chose appelé Provider and Inject. Pour ce faire, nous avons un nouveau projet avec lequel commencer à travailler. C' est un tableau de bord que vous pouvez voir ici. On construira ça dans cette section. Pour commencer, nous avons une section d'aperçu, sur laquelle nous allons cliquer à partir de ce menu de gauche. Cela nous donnera alors accès à nos données qui seront séparées entre nos trois composantes. Nous aurons l'article vendu où nous analyserons les données, le total des ventes, et aussi, nous allons filtrer en fonction de l'article le plus vendu. Le lien suivant est pour nos commandes. Cela va parcourir toutes nos commandes et les afficher sur cette page ainsi que nos composants de vente totaux. Ceci sera réutilisé à partir de notre section Aperçu. De plus, cela aura également notre page best-sellers. Cela va à nouveau parcourir toutes nos commandes. Nous allons ensuite extraire tous les produits vendus et ensuite nous les totaliserons dans l'ordre de la quantité vendue. Ce projet nous permettra de mieux comprendre le fonctionnement des machines à sous à Vue. Comme pour les projets précédents, si vous allez dans le référentiel GitHub. À l'intérieur des téléchargements, vous disposez des données d'un tableau de bord. C' est comme les projets précédents où nous avons une configuration minimale de Vue CLI. peu près la seule différence est dans la source, nous avons supprimé les exemples Hello World. En outre, nous avons ce fichier orders. js. Ceci est un tableau d'objets et ce ne sont que quelques exemples de données, quelques exemples de commandes pour nous faire commencer à travailler avec nos données. Tout ce qu'il contient est un numéro ord ou un numéro de commande. Ensuite, nous avons une gamme d'articles qui ont été vendus pour cette commande. Pour commencer, une fois que vous avez téléchargé le démarreur, faites-le glisser dans votre éditeur de texte. Ensuite, nous pouvons exécuter l'installation de NPM. Allez dans le répertoire du projet, puis installez les modules avec l'installation de NPM. Ensuite, un serveur exécutera NPM run servir pour démarrer notre serveur de développement. Ensuite, ouvrez ceci dans le navigateur. Ensuite, nous allons mettre en place les composants et les pages dont nous allons avoir besoin pour ce projet.pa 59. Pages et composants du projet: Cette section va se concentrer sur quelque chose appelé slots et aussi sur les composants dynamiques. Pour travailler avec ces deux éléments, nous avons d'abord besoin d'un contenu avec lequel travailler. Rappelez-vous, plus tôt, nous avons dit que les composants peuvent être placés n'importe où à l'intérieur de notre dossier source. Nous n'avons pas seulement à les restreindre à un dossier de composants. Avec cela à l'esprit, je vais créer un nouveau dossier, encore une fois à l'intérieur de ce répertoire source, et cela va être appelé vues. Cela contient également des composants ou des fichiers .vue, mais il est courant d'avoir une vue ou un dossier de pages pour mieux organiser nos composants que nous allons utiliser pour nos pages principales. Donc, comme nous le voyons quand nous avons regardé la version finale, pages que nous avons à l'intérieur de notre application étaient la vue d'ensemble. Nous avions la page des ventes et aussi les best-sellers. Ce dossier de vues contient généralement ces types de fichiers que nous allons utiliser pour basculer entre quatre URL différentes. Compte tenu de cette structure de fichier, nous avons dans le dossier source , puis à l'intérieur d'un composant sur un dossier de vues. Les deux contiennent des composants de fichier unique .vue. Cette approche signifie que nous pouvons les organiser de sorte que les pages que nous allons basculer entre elles sont toutes regroupées. Ici, les trois pages que nous avons pour la maison, le contact et le compte sont également des liens à l'intérieur de notre en-tête. Ce qui signifie que si nous cliquons sur le compte, par exemple, le fichier account.vue sera alors affiché. Ces composants de page n'ont pas à contenir tout le contenu des pages. Ils peuvent également être décomposés et contenir plusieurs composants. Cet exemple en regard des composants utilisateur sur la page et ce composant peut également être réutilisé sur autant de pages que nécessaire. À notre application où nous pouvons commencer à mettre en place nos pages et nos composants réutilisables. Donc, tout d'abord, dans le dossier des composants, créez un nouveau fichier et ce sera pour notre best-seller.vue. Également à côté de cela, nous aurons également l'ItemsGold. N' oubliez pas que ce ne sont que les composants que nous allons placer dans nos pages. Après cela, le troisième sera pour SalesTotal, et enfin, le dernier composant dont nous avons besoin est pour notre Sidebar. Ok, fermez ça. Maintenant, à l'intérieur de nos vues, nous allons créer nos pages gratuites, que nous avons vues auparavant. Ainsi, la première sera pour les BestSellers, et ces pages ou ces vues auront également l'extension .vue, les Commandes, puis aussi notre page Aperçu. Ainsi, les fichiers .vue à l'intérieur de notre dossier vues et aussi ceux notre dossier de composants n'ont aucune différence autre que le fait qu'ils sont organisés en différents dossiers. Commençons donc par ajouter du contenu à nos vues. En commençant par les BestSellers, et tout ce que nous allons faire ici est d'ajouter notre modèle et tout ce qui va contenir pour l'instant est un titre de niveau 3, un style de fichier de classe de page-title, et celui-ci va être Best Sellers. Sélectionnez tout cela et copiez dans nos commandes, placez-le dans, collez le titre, puis le même pour la vue d'ensemble. Ensuite, nos composants. Pour être clair, le composant BestSeller sera pour les produits les plus vendus numéro 1 et la page BestSellers sera une liste de tous les articles best-seller du plus haut au plus bas. Donc, le modèle, encore une fois une balise d'article HTML, et cela aura une classe de statistiques. Nous allons utiliser cela dans la page Vue d'ensemble, donc nous aurons ceci comme un composant dans la gauche, puis nous avons l'ItemsGold, puis le SalesTotal aussi. Maintenant, donnons à ceci un titre de niveau 4 de l'article le plus vendu. Sélectionnez tout et copiez. Jusqu' à ItemsGold, nous pouvons coller ceci dans. Tout ce que vous avez à faire est de changer ce titre de niveau 4, l'ItemsGold. Ensuite, le SalesTotal, qui sera très similaire aussi qui aura le titre des ventes totales, et pour l'instant, nous allons laisser ceci signé par vide. Ok, bien. Maintenant, nous avons du contenu en place. Nous avons nos points de vue, toutes les pages, et aussi quelques composants. Dans la prochaine vidéo, nous allons jeter un oeil sur la façon dont nous pouvons transmettre des données à ces composants en utilisant des slots. 60. Introduction aux emplacements: Les vidéos précédentes se sont concentrées sur le passage de données entre les composants, l'utilisation d'accessoires et l'émission d'événements personnalisés. Ces prochaines vidéos vont vous montrer comment les machines à sous fonctionnent dans Vue.js, ce qui est un moyen vraiment flexible de transmettre des données dans nos applications. Cet exemple que nous avons examiné dans la dernière vidéo comprenait un composant de page, qui était le account.view. Nous réutilisons les composants imbriqués à l'intérieur, nous transmettons des informations dans ces composants en utilisant des accessoires, comme nous le voyons ici pour le nom de l'utilisateur. Une autre façon de sortir nos composants est d'utiliser une étiquette d'ouverture et de fermeture à la place du style de fermeture automatique d'avant. Ce style fonctionne également exactement de la même manière. Pour ce style nous laisse également maintenant la possibilité d' ajouter des choses entre nos balises de composants. Il passerait dans un titre de niveau 3, mais que se passe-t-il exactement avec ce titre entre nos tags ? Eh bien, c'est à nous de décider. Si nous ne faisons rien, le contenu est ignoré ou nous pouvons utiliser des slots pour utiliser ces données dans nos composants utilisateurs. En regardant notre modèle de composants utilisateur sur la droite, nous avons un autre élément qui contient une liste d'éléments gratuits, et tout cela est assez standard. Jetez un oeil au-dessus de ce nav, et nous avons ce qu'on appelle une fente. Slot agit comme un support pour le contenu que nous passons en elle entre les composants d'ouverture et de fermeture balises, et dans notre cas, il était un titre de niveau 3. Cet élément de fente est très flexible et peut être placé n'importe où à l'intérieur du modèle de notre composant. Cette approche peut vous aider à réfléchir à pourquoi avons-nous même des créneaux horaires disponibles lorsque nous pouvons simplement transmettre des accessoires ? Eh bien, c'est une question très valable et très compréhensible, en regardant un exemple simple comme celui-ci. Mais il est aussi beaucoup plus de machines à sous et beaucoup plus de cas d'utilisation, et nous allons jeter un oeil à ceux-ci dans les prochaines vidéos. 61. Structure de la page de présentation: Vous voyez ces machines à sous en action à l'intérieur de notre projet. Nous avons d'abord besoin de contenu pour travailler. Actuellement, nous avons tous nos points de vue et la configuration de nos composants, mais nous n'avons rien enregistré sur la page pour l'instant. Pour ce faire, nous allons passer à notre App.vue. A l'intérieur, nous avons cette div avec la classe de app_wrapper. Cette classe pointe simplement vers certains styles qui va définir la famille de polices et aussi la couleur de la police de base. Ce que nous allons faire est d'ajouter une structure à cette application, ainsi que d'importer et d'enregistrer notre première page qui est la vue d'ensemble. Pour ce faire, nous importerons ceci comme tous les composants réguliers. Le nom est Overview et ceci est dem./. Ceci se trouve dans notre dossier Vues, puis le nom du composant est Overview. Configurez notre section Composants. À l'intérieur, nous n'avons qu'un seul composant pour l'instant, alors passe-le. Nous voyons une erreur parce que nous ne l'avons pas encore utilisé, mais nous allons d'abord ajouter notre structure à l'intérieur de notre app_wrapper. La première chose que nous allons faire est de créer une section d'en-tête, et cela va contenir un titre de niveau 1 avec le texte du tableau de bord de Chris. Cette section d'en-tête un div avec la classe de contenu, et cette section va contenir deux sections imbriquées. Le premier est la barre latérale avec des liens vers nos pages gratuites, puis sur le côté droit, nous aurons du contenu, qui correspond à chacune de ces pages sur lesquelles nous avons cliqué. Tout d'abord, l'élément de côté. Puis après cela, le principal. La section de côté pour l'instant va juste contenir trois liens différents. Nous n'avons pas besoin de href parce que nous allons le contrôler en utilisant la vue. Le premier lien est Vue d'ensemble. J' ai deux pages de plus, la seconde est Commandes, et la troisième est Best Sellers. C' est ça pour le bar d'côté. Ensuite, dans la section principale, ce que nous allons faire est, tout d'abord, passer à l'intérieur de ces petites étiquettes, et à l'intérieur d'ici nous allons passer quelques chapelures pour faire savoir à l'utilisateur exactement où ils sont sur notre site. Cela dirait, quelque chose comme tableau de bord/aperçu. Nous allons modifier cette section en fonction de la page sur laquelle nous sommes actuellement. Pour styliser cela, je vais également découper la section du tableau de bord et ajouter un élément span. Donc, nous allons donner à cela une couleur différente à l'intérieur de notre CSS. Après cela, le contenu de la page réelle, et pour l'instant, nous n'avons qu'un seul composant à afficher. Voici la vue d'ensemble, nous publierons quelques données à cette vue d'ensemble très bientôt. Mais pour l'instant, passons aux feuilles de style. Nous allons commencer par notre section d'en-tête. La section d'en-tête va avoir une couleur de fond blanc. Il va aussi faire usage de la flexbox css aussi. Tout d'abord, le fond qui est une couleur blanche. Ensuite, ajoutez une bordure en haut et aussi en bas. Ce sera un pixel, une ligne solide, puis la couleur de ddd. Cette ligne grise de Chris sur le haut, nous allons également en ajouter un en bas, et puis bientôt nous allons également ajouter une ligne verticale qui va séparer notre contenu de page de la barre latérale seulement. Dupliquez ceci. Je vais également en ajouter un sur le fond. Après notre section d'en-tête, nous avons notre section de contenu, qui est la div entourant à la fois la section côté et aussi la section principale. C' est essentiellement tout le contenu sous notre en-tête. Pour styliser ceci et positionner ceci, nous allons définir l'heure d'affichage pour être flexible. La direction de flexbox par défaut est brute lors de l'utilisation de flexbox. Maintenant, ces deux sections apparaîtront côte à côte. Pour définir la largeur de chaque, un, nous allons utiliser à nouveau les polices flexbox, et la section de côté peut avoir la valeur flex de 1, puis la section principale aura la valeur flex de 3. Cela signifie que la section principale prendra trois fois la largeur de la barre latérale, au-dessus de la barre de côté la valeur flex de 1. Mais aussi beaucoup dans le boarder, mais cette fois cela va être vertical. Ensuite, nous devons placer cette bordure sur la droite, et c'est notre ligne juste là, et nous devons nous assurer que cette ligne est la pleine hauteur de la page. Ce que nous allons faire pour cette section est de définir la hauteur minimale à 100 % de la fenêtre d'affichage. Cette ligne va maintenant tout en bas. Maintenant, à notre section principale de sur la droite, il a le wrapper principal. La valeur flex de 3, donc cela prend environ trois fois l'espace disponible de la barre latérale, puis une valeur de remplissage de 1ram. La dernière chose à faire dans cette section est également de changer la couleur de nos chapelures. Donc nous allons maintenant entourer le tableau de bord avec cette classe de bleu. Nous pouvons maintenant l'utiliser pour définir la couleur. La couleur du texte aura une valeur RVB de 25, 149 et 243. Nous pouvons également espacer à l'intérieur de ce dossier /2 de HTML tout ce que nous devons faire est d'ajouter un espace juste avant et après et là nous allons. Cela nous donne maintenant une base pour commencer à explorer nos machines à sous dans la prochaine vidéo. 62. Emplacements en pratique: Dans les diapositives un peu plus tôt, nous avons découvert que nous pouvons transmettre des données à un composant enfant en les transmettant entre les composants, en ouvrant et en fermant des balises. Cette méthode est appelée slots, et nous allons maintenant configurer un contenu de slot. La page que nous avons actuellement mis à l'intérieur de ici est cette vue d'ensemble que nous avons enregistré dans l'App.vue. Cette page affiche maintenant nos trois composants du best-seller, l'article vendu, ainsi que le total des ventes. Comme ici dans la version finale. Bien que cela, nous devons d'abord les enregistrer dans notre fichier overview.vue. Nous allons entrer ici et pour ce faire, nous allons créer notre section de script, puis enregistrer nos trois composants. La première importation sera pour les articles vendus. Cela va être de l'emplacement qui est.. /composants, puis dans les articles vendus composants, ce qui change. En outre, nous pouvons remplacer cela par le symbole @, et ceci est un raccourci vers le dossier source. Nous devons dupliquer ça deux fois de plus. Le second est pour le total des ventes, modifiez le chemin d'accès du fichier. Le troisième est le best-seller. Jusqu'à l'exportation. La première chose est de créer un nom pour ce composant, et le mien sera la vue d'ensemble. Enregistrez ensuite nos trois composants afin que nous puissions les utiliser à l'intérieur de notre modèle. Nous avons des articles vendus, le total des ventes, et aussi le best-seller. Pour les afficher, nous allons créer une nouvelle section juste en dessous de notre titre. Cette section va ensuite afficher nos trois composants et ensuite nous imbriquerons entre notre contenu de fente. Le premier est des articles vendus et ferme également. Le second concerne le total des ventes, puis le best-seller. Sauvegardez ceci et nous voyons les titres de nos trois composants, qui commenceront à l'intérieur de notre rubrique de niveau 4. Maintenant, nous allons passer notre contenu de fente entre chacun de ces éléments. Tout comme nous le voyons sur la version finale, nous avons les articles vendus, le total des ventes, et aussi l'article le plus vendu, mais maintenant cela va juste être des données statiques. Mais très bientôt, nous allons saisir toutes ces valeurs qui sont contenues dans notre fichier orders.js. Retour à notre vue d'ensemble et entre les éléments vendus, nous allons passer nos données de fente. Cela peut être quelque chose comme du texte normal. Nous pouvons le passer dans des éléments HTML et aussi voir des données js entre des accolades doubles aussi. Je vais juste sortir la travée, et la travée va aussi avoir une classe. Donc, nous pouvons appliquer un style, souvent du texte clair, placer dans n'importe quelle valeur à l'intérieur ici et copier ceci. Le suivant est pour notre total de ventes, placer dans n'importe quel symbole monétaire et aussi toute valeur monétaire aussi. Enfin, le best-seller. Tout produit pour l'instant est très bien, je vais placer dans le sweat à capuche Vue en taille moyenne. Sauvegardez ceci, et pour le moment nous ne voyons rien dans le navigateur. C' est parce que nous devons d'abord dire à Vue.js exactement où nous voulons que ce contenu apparaisse dans nos composants. C'est assez facile à faire. Tout ce que nous devons faire est de passer à nos composants, puis ajouter les éléments de fente. C' est essentiellement une perspective pour le contenu que nous passons par ce composant. On peut aller n'importe où ici. Mais je vais placer ceci en dessous du titre de niveau 4, le même pour le total des ventes, comme dans notre fente. Nous voyons les valeurs qui apparaissent en dessous de chacun de nos titres, un best-seller. D' autres emplacements ici aussi, et cela apparaît maintenant sur la page. Bien. Maintenant, nous allons ajouter un peu de style dans la page de présentation. Au début, rappelez-vous, ces trois sections étaient entourées à l'intérieur de cette enveloppe de section. Faites-les passer à travers la page, tout comme nous le voyons ici, nous allons cibler cette section et définir le type d'affichage pour être flex. Pour ce faire, nous aurons besoin d'une section de style. Cela peut également être étendu, donc ne s'applique qu'à ce composant. [ inaudible] et définissez l'affichage sur flex. Un peu d'espacement, nous pouvons également profiter du contenu justifié et distribuer tout l'espace disponible pour être entre ces trois éléments. Placez également une bordure autour de ces trois sections, ajoutez une cible, ces en-têtes individuels et le contenu de la fente. Nous allons maintenant passer à l'App.vue. Cette section de style n'est pas étendue, de sorte que tous ces styles s'appliqueront à tous les composants, y compris les trois de ces sections. Commencez notre rubrique de niveau 4, qui est le titre de nos trois composants. Nous allons supprimer toute marge par défaut en définissant cette valeur à zéro, puis ajouter un remplissage au bas de ce titre pour nous donner plus d'espacement par rapport à notre contenu de slot. Ce contenu de fente avait également une classe. Si nous allons à la page d'aperçu et jusqu'aux modèles, cela avait la classe de texte clair. Prenons ça. Tout ce que nous allons faire dans cette section est de réduire le poids de la police à une valeur de 300. Pour appliquer la bordure autour de chacun de ces éléments, si nous allons dans le composant, chacun de ces articles a la classe de statistiques. À l'intérieur, nous allons définir la bordure pour être le poids d'un pixel, une ligne solide et une couleur gris clair, qui est ddd. Rayon de bordure de cinq pixels. Ensuite, un peu d'espace interne avec la valeur de remplissage, qui sera un 1rem. Bien. Laissons nos composants maintenant stylisés. Juste pour travailler avec cette section d'en-tête, je vais réduire le titre de niveau 1. C' est un peu trop grand, donc nous allons marquer l'en-tête H1, puis réduire la taille de la police. Essayons 1.4 rems, et cela semble mieux. Je peux aussi jouer avec la famille de polices aussi, je vais supprimer cela et le changer pour devenir Avenir, mais vous pouvez aussi le changer pour correspondre à votre style. C' est ainsi que nous pouvons utiliser les machines à sous à un niveau très basique. Dans la vidéo suivante, nous allons jeter un oeil à la portée des slots, et aussi à la façon de transmettre des données dynamiques. 63. Passer des données dynamiques & périmètre: Dans la dernière vidéo, nous avons regardé passer des données comme fente sous la forme d'un élément HTML. Cela peut être tout ce que nous voulons, y compris un texte brut et aussi un contenu dynamique aussi. Ces trois sections que nous avons ici des articles vendus, le total des ventes et le best-seller incluront tous du contenu dynamique comme accessoires de l'application parente. Maintenant, sur app.vue, nous allons maintenant mettre en place nos accessoires gratuits dans le composant de présentation. Le premier accessoire sera la quantité d'articles vendus, ce qui équivaut à 32. Ceci, encore une fois, peut être n'importe quelle valeur. Ça n'a pas d'importance pour l'instant. Lorsque nous traitons avec des nombres, nous devons également utiliser v-bind. Ceci est évalué comme une expression JavaScript plutôt qu'une valeur de chaîne. Ensuite, la valeur totale des ventes. Ajoutez quoi que ce soit à l'intérieur. Le troisième sera pour le best-seller. Cela n'a pas besoin d'utiliser v-bind car cela va juste être une valeur de chaîne. Comme ce sont des accessoires, nous devons également passer à notre composant d'aperçu et les enregistrer dans notre script. Nous pouvons également ajouter une validation simple. Donc, nous allons configurer ça comme un objet. Le premier est la valeur totale des ventes, et le type est le nombre. Le second est la quantité d'articles vendus. Cela aura également le type de nombre aussi. Le troisième est pour le best-seller. Celui-ci a le type de chaîne. Ces trois accessoires peuvent maintenant remplacer le contenu que nous avons passé dans notre fente. Le premier, enlever la première valeur de sept, et nous pouvons remplacer cela à l'intérieur des accolades doubles avec notre accessoire, qui était la quantité d'articles vendus. Le suivant, nous pouvons toujours laisser dans le symbole de la devise, mais remplacer la valeur par l'accessoire, qui était la valeur totale des ventes. Le troisième, pour notre best-seller, et ça manque, alors jetons un coup d'oeil. Ça veut juste être un b minuscule, et on y va. Tout cela fonctionne maintenant avec nos données dynamiques. Comme vous pouvez le voir, les emplacements ne se soucient pas si les données sont du texte, un élément HTML, ou même du contenu dynamique juste comme ça. Mais lors du passage de données dynamiques, comme nous sommes ici, quels composants ont accès à ces données ? À l'intérieur de notre aperçu, par exemple, nous avons cette quantité d'articles vendus prop. Ceci est à l'intérieur de notre composant d'aperçu, mais il est également rendu à l'intérieur de nos articles vendus composant aussi. Lequel de ces deux composants y a accès ? Eh bien, vous avez peut-être déjà deviné que puisque nous utilisons actuellement dans notre fichier d'aperçu, ce fichier a un accès complet à ces données. C'est exact. Mais qu'en est-il du composant enfant, qui est des articles vendus, où ces données sont rendues à l'intérieur de ? Eh bien, attrapons ceci et jetons un coup d'oeil dans le composant de l'article vendu. Ensuite, nous pouvons essayer de sortir cela à l'intérieur des accolades doubles. Nous ne voyons aucune donnée affichée maintenant, donc cela ne fonctionne pas. Mais que diriez-vous que cela soit disponible en tant qu'accessoire ? On pourrait essayer ça aussi. On pourrait placer dans le script. Nous pouvons voir que nous avons accès à cela via des accessoires. Celle-ci, nous n'avons toujours pas accès à ces données. Cela signifie maintenant que le composant enfant réel, qui affiche le contenu, n' est responsable que de la présenter dans le navigateur. Il n'a pas accès à nos variables. Ceux-ci ne sont disponibles que dans la portée du parent. Si nous voulions accéder à ces données à l'intérieur de ces deux composants, il y a un moyen que nous pouvons faire cela, et c'est par ce qu'on appelle une fente portée. Nous allons y jeter un coup d'oeil très bientôt. 64. Contenu fallback: Ici, nous avons cette machine à sous survivre le contenu qui a été transmis, mais que se passe-t-il si nous ajoutons quelque chose entre ces deux balises aussi ? Eh bien, nous le faisons si nous voulons fournir du contenu de secours pour montrer si rien n'est passé à la fente. Nous pouvons peut-être ajouter un message qui n'a pas de données disponibles. Plus sur le navigateur, nous ne voyons pas ce message tout de suite, mais si nous passons aux parents, qui est la vue d'ensemble, puis il supprime temporairement les éléments de span que nous transmettons à l'article vendu. Ceci est maintenant remplacé par ce message indiquant qu'aucune donnée n'est disponible. Ceci est utilisé pour tout contenu de secours si nous ne fournissons pas de données de slot à nos composants enfants, je veux annuler cela et enregistrer ce fichier, mais cela est utile pour un certain nombre de situations. Par exemple, nous ne pouvons pas toujours avoir des données de slot à transmettre aux composants enfants, surtout si nous réutilisons les composants plusieurs fois ou qu'il peut y avoir un retard dans la génération des données de slot, donc si ces données que nous avons placées dans un qu'il a peut-être été récupéré à partir d'une base de données ou d'une API. Pendant que nous attendons le retour de ces données, nous pouvons vouloir afficher un spinner de chargement ou un message d'espace réservé. En outre, si nous utilisons un composant, disons cinq fois dans notre projet, si les données doivent être les mêmes pour quatre d'entre eux, nous pourrions utiliser le contenu de secours fournir la valeur par défaut pour ces quatre composants. Ensuite, il a changé les cinquième composants en passant des données de fente. C' est vraiment simple mais vraiment utile aussi. Ensuite, nous continuerons à utiliser des fentes subjectives et découvrirons comment placer plusieurs fentes dans nos composants. 65. Emplacements nommés: Ici, dans notre page d'aperçu sur la gauche, à l'intérieur de chacun de ces trois composants, nous ne passons actuellement qu'un seul élément. C' est tout à fait bien, mais pour des situations plus complexes, passer beaucoup plus de contenu dans un seul emplacement peut ne pas être idéal. Pour ce cas d'utilisation, nous avons ce qu'on appelle la fente de nom. C' est une façon de distribuer ce contenu de slot dans différents emplacements dans les composants enfants. Nous pourrions avoir plusieurs lignes de codes, puis les placer dans nos composants à différents endroits. La première étape pour ce faire est de regrouper fondamentalement notre contenu à l'intérieur de l'élément template. Pour cela, nous allons créer notre premier modèle. Cela va transmettre une icône à ces trois composants enfants. Nous aurons notre premier modèle et nous ajouterons également un deuxième groupe à l'intérieur du modèle 2. Ce que nous allons faire ici à l'intérieur du deuxième modèle, c'est de saisir nos éléments de span originaux et de le déplacer dans la deuxième section. La première section que nous allons ajouter dans notre icône, et ce sera également un élément span. L' entité HTML de cette icône sera l'esperluette, le hachage, puis 128200 suivi de ce point-virgule. Puisqu' ils vont être des emplacements de noms, nous devons donner à chacun de ces modèles un nom unique. Nous pouvons le faire avec fente v. fente V est également une directive. Je vais appeler le premier l'icône. Ensuite, jusqu'au deuxième modèle, en ajoutant à nouveau fente v. Celui-ci sera pour la quantité. Donc, je vais faire une économie, et nous sommes entre les sections des articles vendus, donc si nous allons passer à ces composants, nous devons maintenant fournir nos deux emplacements où nous voulons qu'ils soient affichés. Pour commencer, l'icône va à un endroit à côté de notre tête de niveau 4. Ajout de notre emplacement, puis de déterminer quel contenu nous voulons être placé à l'intérieur ici, nous ajoutons les attributs de nom. Ce sera pour la section icône et la seconde pour la quantité. Fermez le navigateur et nous voyons notre icône et aussi notre quantité aussi. Si nous le voulions aussi, nous pourrions également omettre un de ces noms de machines à sous, et l'utiliser comme valeur par défaut. Cela ne laisse qu'un de nos emplacements avec un nom, et ce sera pour le contenu par défaut. La façon dont nous définissons ceci est de revenir à notre modèle, définissez ceci comme emplacement par défaut et cela fonctionne toujours exactement le même. Allons maintenant en bas et faisons de même pour notre total de ventes et pour le best-seller aussi. Ceux-ci ont besoin d'un modèle et nous pouvons faire apparaître cette valeur totale de vente , puis placer notre icône à l'intérieur de la première section. Ce sera aussi une travée, ne serait-ce que si celui-ci est l'esperluette, la dure 128176. Ajouter à notre modèle, en ajoutant la directive fente v et celui-ci est pour l'icône 2. Le second placé dans la directive fente v, et celui-ci peut rester comme l'emplacement par défaut jusqu'au best-seller et ce serait exactement le même. Les modèles et nous allons placer dans la fente v, est des éléments amusants pour l'icône réelle et l'entité pour cela est l'esperluette, le hachage 128293. Le dernier est nos slots par défaut. Nous aurons une plage et donnerons également à cela le nom, qui sera par défaut. Ok, alors on trouvera nos points de vente et le premier était pour le total des ventes. ce composant, placez dans l'emplacement de notre icône. Il a le nom de l'icône. Ensuite, nous pouvons laisser notre deuxième emplacement pour l'emplacement par défaut. Enfin, les adversaires best-seller feront la même chose que les deux derniers composants. Ajout de nos slots, en plaçant notre nom de l'icône et encore une fois, c'est le contenu par défaut 2. Bien. Nous pouvons voir dans le navigateur que nous avons toutes nos trois icônes et nous avons toujours le contenu qui est transmis. La dernière chose à regarder est un raccourci, que nous pouvons placer sur notre directive fente v. Si nous revenons à la vue d'ensemble, tout ce que nous devons faire pour raccourcir cela est de remplacer les fentes v par le dur. Nous pouvons le faire pour notre icône et aussi la fente par défaut 2, remplacer tous les six d'entre eux. Enregistrez notre fichier, et tout fonctionne toujours comme avant. 66. Emplacements délimités: Cela nous amène maintenant à Scoped slots. C' est là que les choses commencent à devenir un peu plus intéressantes en termes d'accès à nos données. Dans ce fichier overview.view, nous transmettons actuellement des données dynamiques à ces composants enfants, ou si c'était l'inverse et que ces données vivaient à l'intérieur de nos composants enfants, ce que nous voulions y accéder à l'intérieur de ce fichier. Eh bien, nous pouvons le faire avec des machines à sous Scoped. Plus tôt, nous avons ajouté un composant de barre latérale, mais nous n'avons pas encore ajouté de composants. Alors passons à cela et nous pouvons commencer à travailler à l'intérieur de notre sidebar.view, en plaçant notre modèle, cela va rendre nos liens libres à l'intérieur de la barre latérale, et aussi nous donner une chance de regarder les slots Scoped. Placer la navigation et la liste non ordonnée, alors nous pouvons faire une boucle à travers nos pages avec l'élément de liste. Nous n'avons pas encore créé ces pages, mais nous allons appeler ces pages, donc nous allons parcourir la page dans les pages, aussi lier une clé dynamique. Cela va simplement être la page, juste pour la simplicité. A l'intérieur d'ici, placez-le dans un élément de lien, et cela va juste sortir entre les accolades doubles, notre page. C' est tout ce dont nous avons besoin pour le modèle, donc en descendant à la section script, nous pouvons configurer notre propriété de données pour toutes les pages. Pages va être un tableau assez simple, donc nous allons juste commencer dans nos chaînes libres. Le premier était Overview, nous avons des commandes, ainsi que des meilleures ventes. Cela va être rendu et enregistré dans notre App.vue. Rendez-vous à notre script et nous pouvons d'abord importer nos nouveaux composants. Il s'agit de la barre latérale, qui est disponible à partir du chemin, qui est des composants slash point. Puis barre oblique avant. Enregistrez cela à l'intérieur des composants, puis nous pouvons l'utiliser dans notre modèle. L' endroit pour le faire sera à l'intérieur de la section de côté. Nous pouvons supprimer nos liens existants gratuits, puis les placer dans notre barre latérale. Bien, maintenant nous avons nos liens libres toujours affichés, mais maintenant ceux-ci proviennent de nos composants de la barre latérale. Mais allez à nos composants sidebar.vue, nous avons ce lien juste ici, qui est nos données dynamiques, qui vit dans ces composants enfants. Par exemple, imaginez si nous allons utiliser cette navigation plusieurs fois dans notre application. Nous pouvons souhaiter que ce lien soit stylé différemment à différents endroits ou qu'il existe différentes options de mise en page uniques. Comme nous le savons déjà, si nous devions découper cela et ensuite placer entre notre barre latérale, cela ne fonctionnera pas puisque la portée de cette page est à l'intérieur des composants de la barre latérale, pas cette app.vue. Si vous vouliez gérer cela, nous aurions besoin de faire usage de slots Scoped nous permettre de transmettre la boucle de retour de données à ses parents. abord dans le sidebar.vue, nous passons d'abord dans les composants de fente où nous voulons que ces données soient affichées. Nous voulons maintenant passer la sauvegarde de la variable de page aux parents. La façon dont nous pouvons le faire est de lier un attribut dynamique. Je ne veux pas garder cela cohérent et appeler cette page. Ces attributs sont appelés accessoires de fente. Nous pouvons maintenant accéder à ces attributs à l'intérieur des composants parents, qui est le app.vue. abord, nous allons envelopper ce lien à l'intérieur d' un modèle et lui assigner l'emplacement par défaut. Tout comme nous l'avons regardé dans la dernière vidéo, nous pouvons créer nos modèles, puis utiliser les slots ou le raccourci, qui est le hachage. Ensuite, donnez à cela l'emplacement par défaut où nous pouvons maintenant coller notre lien à l'intérieur. Cela ressemble à peu près le même que la dernière vidéo, mais la différence cette fois est ici, nous allons passer une valeur à fente v. Cette valeur est un nom de variable, que nous pouvons appeler tout ce que vous voulez. Pour garder cette description, je vais appeler ça SlotProps. Maintenant, en utilisant cette variable, nous avons accès aux données qui avaient été transmises de notre emplacement. Maintenant, nous aurons accès à cette page. Maintenant, au lieu d'accéder directement à notre page, nous devons d'abord accéder à nos accessoires de fente, puis aux attributs de page. Nous voyons tout de suite que nos pages gratuites apparaissent maintenant dans la barre latérale, donc nous obtenons maintenant ces données à partir de nos composants enfants. Alternativement, plutôt que d'accéder à tous nos accessoires sur cette variable, nous pouvons utiliser la destruction JavaScript. Nous pouvons extraire n'importe laquelle de nos variables ou de nos attributs, tels que notre page. Maintenant, nous pouvons y accéder directement dans notre modèle. C' est ainsi qu'un accessoire de fente fonctionne. Vous pouvez penser avec tout cela, pourquoi avons-nous une autre façon de transmettre des données alors que nous avons déjà tous les accessoires et les émet. Eh bien, il s'agit de nous donner en tant que développeur une flexibilité totale. fentes à portée ouverte ouvrent la porte à tant de choses différentes. Par exemple, si cette page avait une authentification utilisateur et que nous avions accès à notre utilisateur à partir de nos données. Par exemple, si nous avions une propriété de données comme celle-ci, et si cet exemple avait un objet utilisateur. Si vous ne vouliez afficher que certains liens, si l'utilisateur a été connecté, vous devrez alors transmettre ces objets utilisés vers les composants de la barre latérale via des accessoires. Cependant, en utilisant des slots Scoped, nous pourrions faire exactement la même configuration et nous pouvons vérifier si l'utilisateur est présent en plaçant ce v-if sur ce composant parent, nous pouvons vérifier si l'utilisateur existe avant de rendre l'un de nos liens. Un utilisateur existe actuellement. Si nous passons à null, cela supprimera alors nos liens libres. Ce n'est qu'un exemple pour éviter que ceux qui transmettent des accessoires aux composants enfants. Nous pouvons également supprimer cela car cela n'est pas nécessaire. Un autre exemple, si nous voulions louer ce composant à plusieurs endroits, nous pourrions dupliquer le contenu comme celui-ci et nous pourrions ajouter différentes classes à chacun de nos éléments de liste. Par exemple, cela pourrait être placé à l'intérieur de la barre latérale. On voudra peut-être que le style soit différent pour l'en-tête. Cela nous donnera la flexibilité d'ajouter peut-être un lien de couleur différent, nous pourrions également placer la navigation d'en-tête horizontalement sur la page, la barre latérale pourrait être verticale et nous avons toute la flexibilité de faire ce que nous voulons garder ces deux uniques. Supprimons ceci et terminons cette vidéo en ajoutant un peu de style à nos liens gratuits. [ inaudible] dans la barre latérale, créez cette section de style. Tout d'abord, passons à la liste non ordonnée. Nous pouvons supprimer les puces en définissant le style de liste sur aucun. Ensuite, il réinitialise tout remplissage par défaut à zéro. Ensuite, nous pouvons ajouter un peu d'espace à ces liens avec l'élément de liste en remplissant soudainement 10 pixels en haut et en bas, puis zéro à gauche et à droite. Il y a un espacement entre ces trois liens. 67. Page de commandes: Jusqu' à présent, nous n'avons travaillé que sur cette page Aperçu. Bientôt, nous allons utiliser des composants dynamiques, basculer entre ces trois pages. Mais d'abord, ajoutons notre contenu aux commandes et aux best-sellers. La page Commandes va être composée de deux sections. Pour la première section, nous placerons dans les composants totaux des ventes afin que nous puissions voir la valeur totale des ventes. Ensuite, ci-dessous cela va créer une nouvelle section qui va afficher toutes nos commandes. Passons à notre page Commandes, ouvrez la barre latérale, et ceci est dans la section Affichage. Notre première section, juste en dessous de la rubrique de niveau 3. Ce sera une fente qui sortira le contenu de nos ventes totales composants. Donnons-lui un nom de total. Nous le transmettrons via notre modèle dans un instant. La deuxième section, va être le wrapper pour notre deuxième emplacement, et ce sera pour la liste des commandes. Placez dans notre deuxième emplacement à l'intérieur ici. Nous n'avons pas besoin de lui donner un nom car cela peut hériter de la valeur par défaut. À côté de l'App.vue. Nous pouvons commencer à travailler sur cette page Commandes. Nous allons commenter cet aperçu, ainsi que l'enregistrement, puis le remplacer par nos importations pour nos commandes. Celui-ci se trouve dans le dossier Vues. Enregistre ceci à l'intérieur de la section du composant. Ensuite, revenez à nos modèles, nous allons commenter la section aperçu, et remplacez cela par nos commandes. Nous allons passer ce contenu de fente donc cela nécessite l'ouverture et la balise de fermeture. Nous avons deux emplacements de fente, donc cela nécessite deux modèles. Ces attributs de fente, pour le premier, pour être pour le total. Le second sera pour notre contenu par défaut, qui sera notre liste de commandes. Cette première section de modèle va contenir nos composants totaux de ventes, tout comme nous l'avons utilisé dans la vue d'ensemble. Si nous jetons un oeil à cette section, cela contient également des fentes à. Ici, nous transmettons notre icône, ainsi que la valeur totale des ventes. Pour garder cela cohérent, nous pouvons copier cette section complète des composants, puis en faire usage dans notre App.vue. Collez ceci dans. Cela devra également être enregistré et importé. Faisons ça maintenant. Importez notre total de ventes, barre oblique de points, et ceci est dans les Composants. Ensuite, nous saisissons le total de nos ventes. Puis, enfin, enregistrez ce composant. Disons qu'il y a quelqu'un d'autre ici à l'intérieur de sa page de commandes, aura maintenant le composant affiché. Nous pouvons voir l'icône mais nous n'avons pas encore transmis notre contenu dynamique, qui est la valeur totale des ventes. Faisons-le maintenant, si nous revenons à nos modèles à l'intérieur de l'App.vue. Plus tôt, lorsque nous avons créé la page Vue d'ensemble, nous avons transmis cette valeur totale des ventes en tant qu'accessoire. Ce n'était que quelques données factices, mais maintenant nous allons récupérer nos données réelles, qui sont fournies avec ce projet. Pour saisir cela à l'intérieur de la barre latérale, jetez un oeil pour le fichier Orders.js. Nous pouvons maintenant importer ceci, et parcourir toutes nos commandes pour extraire toutes les données dont nous avons besoin transmises à ces composants. Faites usage de cela, nous devons d'abord importer ce fichier, afin que nous puissions l'utiliser à l'intérieur de notre JavaScript. Nous pouvons importer nos commandes à partir de notre fichier de commandes. Il s'agit d'une importation nommée à l'intérieur de ces accolades. Cela nous permettra d'importer un seul membre à partir de notre fichier Commandes. Un seul membre que nous voulons importer est cette variable de commandes. Nous pouvons importer ceci parce que nous avons exporté ceci comme une constante. Si le fichier Commandes avait d'autres exportations, nous pourrions également les importer individuellement à l'intérieur ici, mais nous n'avons que ces commandes uniques. Ensuite, ce que nous devons faire est de faire défiler vers le bas et de créer notre section de données, afin que nous puissions utiliser cela dans la vue JS. Placez dans les commandes que nous venons d'importer. Maintenant, nous avons accès à cet intérieur de notre modèle. Pour les afficher correctement à l'intérieur de notre modèle, nous devons d'abord faire deux boucles. La première boucle va boucler chacune de nos commandes et ensuite, pour chaque commande, nous devons parcourir tous les éléments à l'intérieur de cette commande. Faisons cela maintenant, sur l'App.vue, faites défiler vers le haut. À l'intérieur de cette section de commande, recherchez ce deuxième modèle par défaut. C' est à l'intérieur ici que nous allons créer ces deux boucles. abord, un div wrapper qui aura la classe d'ordre, soulignement, wrapper. Ensuite, à l'intérieur de ce wrapper, un deuxième div qui va entourer chacune de nos commandes. Pour parcourir ces commandes, nous allons parcourir toutes les propriétés de données de commandes. Cela aura également besoin d'une clé dynamique que nous pouvons saisir de l'identifiant unique, qui est disponible pour chacune de ces commandes. Nous pouvons y accéder avec order.id. Maintenant, pour les structurer, ajoutons du texte en haut, et cela va afficher le numéro de commande. Nous savons que nous avons déjà accès à ce numéro de commande avec order.id. Nous pouvons placer cela à l'intérieur des accolades doubles, puis souffler chacun de ces numéros de commande. Créez une liste non commandée, que nous allons examiner à travers chacun de nos articles vendus. L' emballage. Ensuite, nous allons utiliser l'élément de liste pour créer une boucle v-for pour chacun de nos articles. Nous pouvons commencer chacun d'entre eux dans la variable qui est item, dans order.items. Trouver une clé dynamique. Maintenant, nous devons être prudents avec la clé pour chacun d'entre eux. Si nous examinons chacune de nos commandes, oubliez pas que le tableau d'articles contient le même produit dans l'une des commandes. Par conséquent, nous pourrions utiliser des identifiants en double. Maintenant, si nous utilisons une base de données, nous pourrions générer un identifiant unique. Mais à des fins de démonstration, puisque nous n'utilisons pas de base de données et n'avons pas accès à un identifiant unique. également pour accéder au numéro d'index et le combiner avec l'élément. Juste après l'article, prenez l'index. Place ceci comme clé. S' il s'agissait d'un véritable site de production, c'est probablement quelque chose à éviter. Vous devriez vraiment essayer de générer un identifiant unique pour chacun de ces produits. À des fins de démonstration, ce sera très bien. A l'intérieur ici va créer un élément P qui va sortir l'item.name. Ensuite, nous pouvons également produire le prix de l'article, juste après avec item.price. Donnez à cela une actualisation, vous verrez maintenant une liste de toutes nos commandes, et celles-ci sont maintenant formatées en tant que liste non ordonnée. Nous terminons ceci à notre fichier Orders.vue, où nous pouvons ajouter un peu de CSS. Tout d'abord, les puces de liste non ordonnées [inaudibles] avec le style de liste, permet de définir ceci comme non. Le style de police de l'italique. Puis l'emballage pour chacun de nos ordres, qui dur à la classe de l'ordre. Je suis rembourrage pour donner à cela un espacement de 10 pixels. Aussi, pour donner un certain espacement en haut et en bas, nous pouvons ajouter une marge de 10 pixels en haut et en bas, puis zéro à gauche et à droite. Un pensionnaire pour chacune de nos commandes d'un pixel. Une ligne solide. Je vais aller pour une valeur grise de DDD, border-rayon de cinq pixels. Enregistrez ceci et actualisez le navigateur. Maintenant, nous avons toutes nos commandes maintenant en place. 68. Page des meilleures ventes: Ensuite, nous avons notre page des meilleures ventes, sur laquelle nous allons travailler, et ceci est à l'intérieur du dossier vues. Actuellement, nous avons juste ce titre de niveau 3, mais ce que nous allons faire maintenant est de créer une table avec toutes nos données, que nous allons obtenir à partir de notre fichier orders.js. Pour obtenir cela, nous allons créer deux boucles. La première boucle va parcourir tous nos tableaux de commandes, et cela nous donnera chacun de ces ordres. Ensuite, notre deuxième boucle à l'intérieur va ensuite parcourir tous ces éléments, puis nous allons saisir chacun de ces éléments et pousser vers un nouveau tableau. Voici à quoi ressemblera notre nouveau tableau, nous allons extraire tous les produits de nos commandes, puis les pousser vers ce nouveau tableau. En plus de l'ID, du nom et du prix, nous ajouterons également un champ de quantité. Cela nous évitera d'avoir beaucoup de produits en double. Au lieu de cela, lorsque nous rencontrons un produit à l'intérieur de notre boucle, qui est déjà à l'intérieur de ce tableau, nous augmenterons le champ de quantité d'un. C' est la première étape, et la deuxième étape après cela est de réorganiser ce tableau avec la quantité la plus élevée à la plus basse. Passons à l'app.vue et nous allons créer ceci comme une propriété calculée juste sous les données, configurer ceci, et le nom calculé de SortedItems. La première étape consiste à créer notre nouveau tableau appelé SortedItems, et nous allons d'abord définir ce tableau pour être un tableau vide. L' étape suivante consiste à créer notre première boucle, qui va parcourir toutes nos commandes. Nous avons cela stocké ci-dessus dans les propriétés de l'état, donc nous pouvons accéder à this.orders, puis cartographier tous ces ordres, augmentant une fonction de rappel. Chaque article de ces commandes, nous allons stocker ceci à l'intérieur de la variable appelée ordre. Comme nous venons de le mentionner, nous allons prendre notre commande et ensuite nous allons créer une deuxième boucle à l'intérieur, qui va parcourir tous les éléments. Nous allons cartographier ces éléments, puis exécuter une fonction sur chacun de ces éléments. En outre, avant d'aller plus loin, rappelez-vous que les propriétés calculées devront toujours renvoyer une valeur. Donc, nous allons retourner notre nouveau tableau, qui est des éléments triés. Assurez-vous que c'est en dehors de nos boucles. Nous allons retourner cette valeur. sauvegarde à l'intérieur de cette boucle est l'endroit où nous allons pousser chacun de ces éléments dans ce nouveau tableau, mais juste avant de le faire, nous devons d'abord vérifier si cet élément est déjà à l'intérieur de ce tableau pour éviter tout doublons, et la façon de le faire est d'accéder à notre nouveau tableau, qui est des éléments triés. Nous pouvons appeler la méthode de recherche JavaScript. Cela exécutera une fonction pour chaque élément à l'intérieur de notre tableau, stockant chaque élément à l'intérieur de cette variable, que je vais appeler l'élément trié. Cette fonction sera responsable de vérifier si le item.id trié est égal à l'identifiant de l'élément de cette boucle en cours. Si l'identifiant de l'élément actuel que nous possédons correspond à l'un des ID qui sont à l'intérieur de ce tableau, cela retournera alors l'élément courant. Nous allons ensuite stocker ceci à l'intérieur d'un élément appelé constant existe. Ensuite, nous pouvons créer une instruction if juste en dessous pour vérifier si l'élément existe est vrai. Si c'est vrai, nous avons un article en double et tout ce que nous voulons faire est d'accéder à cet article, qui est article existe, puis sélectionnez le champ de quantité, incrémentant cela d'un et ensuite nous pouvons revenir hors de cette déclaration. Si cet élément n'existe pas, cela signifie que c'est la première fois que ce nouvel élément va être poussé dans notre tableau. Donc, ce que nous allons faire est de créer un nouvel objet appelé nouvel élément. Cela sera égal à notre article que nous possédons, et nous ajouterons également dans le champ quantité. La quantité sera une valeur initiale de un, puis en utilisant l'opérateur de propagation JavaScript, nous allons également transmettre la valeur de l'article aussi. Nous avons maintenant ce nouvel élément et la dernière chose à faire est de pousser cela à ce tableau. Juste après notre objet, prenez notre tableau d'éléments triés, puis accédez à la méthode push JavaScript, qui poussera notre nouvel élément. Essayons ça. Nous pouvons accéder à nos éléments triés propriété calculée à l'intérieur des accolades doubles, donc juste n'importe où dans notre modèle. On y va. Maintenant, plutôt que d'avoir chacun de nos produits répertoriés individuellement, nous avons maintenant augmenté la quantité. Premièrement, nous avons des objets cubiques. Nous avons des T-shirts gratuits, nous avons deux de nos petites chemises personnalisées, nous avons, quatre, les hoodies, puis l'un des chapeaux. Maintenant, ça marche. La dernière étape consiste à réorganiser les articles l'intérieur de ce tableau en fonction de la quantité la plus élevée vendue. Actuellement, nous avons la quantité libre. Ensuite, nous en avons deux, nous en avons quatre, et ensuite nous en avons un, donc ce n'est pas le cas. Nous pouvons les réorganiser juste avant de les renvoyer à partir de notre section calculée. Juste au-dessus de l'instruction return, accédez aux éléments triés, puis nous pouvons utiliser la méthode de tri JavaScript. La méthode de tri JavaScript va parcourir tous nos éléments triés, puis exécuter une fonction de comparaison. Cette fonction de comparaison prendra deux variables avec le nom de notre choix. Je vais juste appeler ceci A et B pour garder les choses simples, et ce sont les deux éléments actuels qui sont comparés. Mais je vais vérifier si la propriété de la quantité sur l'article A est supérieure à la quantité sur l'article B. En utilisant l'opérateur ternaire, nous allons alors définir la position de l'indice, si c'est vrai, pour être négative, si c'est faux, ce sera positif. Rappelez-vous, lorsque vous traitez des tableaux, un nombre d'index inférieur apparaîtra en premier dans notre tableau, donc définir ce chiffre pour être négatif le poussera plus haut dans le tableau. Nous pouvons voir tout de suite dans le navigateur que la quantité de quatre est placée en premier, nous avons la quantité de trois, et enfin, notre chapeau de vue qui est la quantité d'un. Maintenant, nous avons toutes les données dont nous avons besoin, nous pouvons maintenant importer la page best-sellers à l'intérieur de cette app.vue. Nous allons également enregistrer ceci et l'afficher à l'intérieur du modèle. Duplions ceci, et celui-ci est pour nos best-sellers. Ajoutez ceci à nos composantes, mais je vais commenter nos composantes de vérification ainsi que la section la plus ancienne de notre modèle. Attrapez tout cela jusqu'à la balise de clôture, commentez ceci, et nous pouvons maintenant placer à l'intérieur de notre modèle nos best-sellers. C' est juste pour notre simplicité, sorte que nous pouvons nous concentrer sur un composant à la fois. Nous voyons une erreur à l'intérieur ici que le composant total des ventes n'est pas utilisé, donc nous pouvons également commenter cela. Aussi l'inscription, même cela avec notre page best-sellers. [ inaudible] haut, nous allons supprimer cette section calculée, puis configurer notre table à l'intérieur des best-sellers. Placez cela à l'intérieur de la balise d'ouverture et de fermeture, sorte que cela sera transmis comme contenu de fente. Tout d'abord, nous allons configurer notre section de table externe, l'en-tête de table pour nos titres, puis notre première ligne de tableau. À l'intérieur de cette ligne, nous allons placer dans notre premier élément de données à l'intérieur de l'en-tête du tableau, et ceci est pour la quantité vendue. L' en-tête de tableau suivant concerne le nom du produit, le troisième pour l'ID du produit, puis le prix du produit. Après la section tête, nous avons le corps de la table, et c'est à l'intérieur de cette section du corps de la table, nous allons fournir toutes les données de notre section calculée. Pour ce faire, nous allons créer une nouvelle ligne de tableau, et nous devons répéter cela pour chaque élément à l'intérieur de cette section calculée. [ inaudible] Pour Loop. Nous pouvons ajouter à notre article dans des articles triés. Donc, nous pourrions soit accéder à l'article complet comme celui-ci, soit nous pourrions également utiliser la structure et retirer l'identifiant, la quantité, le nom, et aussi le prix. Nous devons également lier une clé dynamique, et la clé dynamique pour cela peut être l'ID du produit. Ces quatre variables peuvent désormais être sorties sous forme de données de table. À l'intérieur de la ligne, les données de la table pour la première sont pour la quantité, et nous aurons le nom, l'ID, puis le prix. C' est toutes les données de fente que nous devons maintenant transmettre, alors passez à notre page best-sellers dans les vues, et nous allons sortir ceci comme un slot. Nous y sommes. Il y a un en-tête de table de mots et aussi nos données de table, et maintenant ces articles sont répertoriés de la quantité la plus élevée à la plus faible. Juste pour terminer cette page, dirigez-vous vers notre composant best-sellers où nous pouvons mettre en place des styles de base pour cette table. Tout d'abord, l'enveloppe de table, la bordure d'un pixel, une ligne solide, et la couleur de DDD. Aligner le texte avec le centre aligné du texte. Rayon de bordure de cinq pixels. Ensuite, nous allons également donner à cela un peu d'espace avec quelques valeurs de remplissage à l'intérieur des en-têtes de table et aussi les données de table aussi. Cela exclut désormais toutes nos données à l'intérieur de notre table. Ceci est maintenant notre page de best-sellers terminée. Dans la prochaine vidéo, nous allons jeter un oeil sur la façon dont nous pouvons basculer entre ces trois pages en utilisant des composants dynamiques. 69. Composants dynamiques: En travaillant sur nos trois pages jusqu'à maintenant, nous avons commenté chacune de ces pages, puis en avons ajouté une nouvelle sur laquelle travailler. Les grandes applications basculent souvent d'une page à l'autre en utilisant un routeur. Je vais le faire pour notre projet final de travail. Pour ce cas simple, nous allons configurer un composant dynamique pour gérer cela, ouvrir la Vue. Nous allons commenter notre composant final, qui est les best-sellers, puis le remplacer par les éléments de composant. Pour déclarer quelle page ou quels composants nous allons afficher dans cet emplacement de composant, nous pouvons ensuite lier la propriété is et définir cette valeur à une propriété de date appelée SelectedPage. Je vais juste l'appeler tout ce que vous voulez tant qu'il correspond à une propriété de date que nous allons créer maintenant. À cette fin, nous pouvons d'abord définir ceci sur notre première page, qui est la vue d'ensemble. La page sélectionnée sera mise à jour lorsque nous cliquerons sur l'un des liens de la barre latérale. Une chose à savoir lors de l'utilisation des composants dynamiques est Vue ne sait pas quel composant nous allons utiliser, donc il ne lancera pas d'erreur si nous avons des importations, que nous n'utilisons pas. Comme nous pouvons le voir ici, nous avons encore l'importation, les best-sellers. Nous ne l'utilisons pas actuellement dans le modèle. Pour rendre tous ces composants disponibles, nous allons décommenter la vue d'ensemble, les commandes, ainsi que le total des ventes, et la même chose lorsque nous enregistrons également nos composants. Puisque nous avons défini la SelectedPage, la vue d'ensemble, nous le voyons maintenant dans le navigateur. Maintenant, mettre à jour cette page, nous pouvons lister maintenant pour un clic sur l'un de ces liens latéraux, jusqu'à la section de la barre latérale et à l'intérieur de notre lien, liste maintenant pour un clic sur l'une de ces trois pages, nous allons définir la page sélectionnée pour être égale à la page qui est stockée à l'intérieur de cette variable juste ici. Nous pouvons avoir le même côté des ticks arrière qu'une chaîne de modèle. Donnons cela aller dans le navigateur. Rafraîchir. Comme vous pouvez le voir, la vue d'ensemble fonctionne bien, mais nous n'avons pas encore de données transmises. Les ordres, encore une fois, nous voyons juste le titre parce que nous n' avons pas transmis de données dynamiques pour l'instant. Les best-sellers, nous ne voyons rien lorsque nous cliquons sur cette page. Allons dans les outils de développement et voyons ce qui se passe. Dans la console, il indique que le nom de balise fourni par les best-sellers n'est pas un nom valide. N' oubliez pas que nous essayons de charger l'un de nos composants en fonction de ce nom de page. Essayez de faire une pause et prenez un moment pour réfléchir à ce qui pourrait être à l'origine de cette erreur. Si vous n'avez pas encore compris, la réponse est l'espace entre ces deux mots. Nous essayons de créer un lien vers une page, ce qui est le mieux, et un espace, puis des vendeurs. Mais si nous regardons le nom de notre page, cela n'a pas d'espace entre les deux. Le correctif est, nous devons supprimer tout espace blanc lors de l'appel de ces composants. Nous pouvons définir ce sera à l'intérieur de nos composants dynamiques. Une façon de le faire est d'utiliser une méthode de remplacement de chaîne JavaScript. Cela prendra notre chaîne d'existence qui est SelectedPage. Nous pouvons ensuite le modifier pour supprimer n'importe quel espace blanc, puis en retourner un nouveau. Appelez la méthode replace. Ensuite, nous pouvons placer dans une expression régulière JavaScript entre ces deux barres obliques. Lorsque les expressions régulières, la façon dont nous pouvons faire correspondre n'importe quel espace blanc est en utilisant la barre oblique inverse et le S, séparés par une virgule, nous allons alors remplacer cet espace blanc par une chaîne vide contenant aucun espace du tout. Sauvegardons ceci et essayons ceci. La vue d'ensemble, les commandes, et quand aussi la page des best-sellers apparaît aussi. Super. Nous pouvons maintenant changer de page, mais beaucoup de contenu est manquant. C' est parce que nous n'avons pas passé d'accessoires ou de contenu de fente à ces trois pages. Les composants dynamiques peuvent également accepter à la fois les accessoires et le contenu des fentes si nous le voulions. Mais rappelez-vous, chaque composant a des données différentes. Pour les accessoires, nous aurions besoin de passer tous les accessoires dont nous pourrions avoir besoin à l'intérieur de ce seul composant. En outre, si vous passez un contenu de slot, c'est également difficile car chaque composant a des données différentes. Bien que dans la section suivante, nous allons résoudre ces problèmes en utilisant une technique appelée fournir et injecter. 70. Section Intro - Fournir / injecter: Tout en travaillant avec Vue.js et en passant des données, nous devons transmettre les accessoires à chaque composant. Si nous avons un composant enfant qui est peut-être deux niveaux ou plus profond, nous devons passer tous les accessoires de notre parent, puis vers le bas à chacun des composants de base sur le chemin. Ceci est vraiment utile pour garder le contrôle de nos données, mais ce n'est pas toujours idéal. Ce Vue.js nous a couverts avec une technique appelée fournir et injecter, et nous allons jeter un oeil à cela au cours de cette section. 71. Qu'est-ce que Fournir / Injecter ?: Lorsque vous travaillez dans un monde idéal, nos données ou notre état n'auront pas à voyager très loin, comme a cette application ici qui communique avec les composants cal. C' est assez simple. Nous avons beaucoup d'options que nous avons examinées dans le passé, telles que la transmission de données en tant qu'accessoires et l'émission de sauvegarde avec des événements personnalisés. Aussi l'option d'utiliser les slots aussi, même cette application assez simple commence à obtenir composants imbriqués plus profondément qu'un niveau. Cette application JS de vue passe entre trois pages et notre page d'aperçu a imbriqué dans nos composants enfants gratuits. Si nos données se trouvaient dans l'app.vue principale, nous pourrions utiliser des accessoires pour les transmettre à toutes nos pages. Ensuite, nous pourrions également continuer à transmettre les accessoires des composants imbriqués à l'intérieur, et cette chaîne peut continuer sur autant de niveaux que nous le devons. Cela provoque cependant beaucoup de code supplémentaire. Nous devrons les enregistrer comme chaque composant, valider ces accessoires, puis les transmettre à l'enfant suivant en tant qu'attribut. Pour les transmettre, nous utilisons des événements personnalisés. Encore une fois, c'est vraiment bon pour les applications simples, mais pour de nombreux niveaux profonds, cela peut devenir une douleur. Ce serait beaucoup plus pratique si nous pouvions contourner tout cela et fournir les données directement dans n'importe quel composant enfant. Vue a une bibliothèque de gestion d'état disponible en tant que module séparé appelé Vuex, ce qui est vraiment bon et également maintenu par l'équipe principale vue.js. Cela fournit un stockage de données central, mais cela entraîne également le coût de l'installation et de la configuration d'un nouveau paquet. Il est assez facile à apprendre et aussi à utiliser, mais c'est quelque chose de plus dont nous n'avons pas vraiment besoin à ce stade. En outre, probablement mieux utilisé sur des applications à plus grande échelle. Alternativement, Vue dispose également d'une fonctionnalité intégrée appelée fournir et injecter. Le concept est que nous avons un fournisseur qui est utilisé pour fournir des données au reste de notre application et cela est placé dans n'importe quel composant parent. Ensuite, n'importe quel composant enfant ci-dessous à n'importe quel niveau peut être injecté avec ces données. Non seulement cela, mais un peu comme quand nous avons émis des événements personnalisés sauvegarder la chaîne. Nous pouvons également changer l'état dans le parent en déclenchant des méthodes. Ceci est fournir et injecter, que nous allons maintenant jeter un oeil au cours de cette section. 72. Configurer un fournisseur: Jetons maintenant un coup d'oeil à la façon dont nous pouvons configurer un fournisseur. Dans ce fichier App.vue, nous avons ce composant dynamique que nous avons récemment configuré, et cela va être responsable du rendu de l'une de nos pages gratuites, et chacune de ces pages nécessite des données différentes. Plutôt que de transmettre tous les accessoires pour couvrir toutes ces situations, nous pouvons plutôt utiliser fournir et injecter, placer les données correctes directement dans nos composants graphiques. abord, commençons par notre page d'aperçu, qui est notre première page, juste ici. À l'intérieur, cela rend nos composants gratuits, nous avons les articles vendus, le total des ventes, et le best-seller. Rappelez-vous que cela utilise des slots et que nous utilisons ces données qui sont transmises comme accessoires, donc à la place, ce que nous allons faire est de déplacer ces données directement sur les composants et ensuite nous allons accéder aux données dont nous avons besoin en utilisant fournir et injecter . Commençons par cet article vendu. Nous saisissons le contenu de la fente entre le modèle, ainsi que d'aller pour l'icône, puis dans les éléments vendus composants, nous pouvons remplacer notre fente, où c'est la sortie. Dans la vue d'ensemble, nous avons le deuxième morceau de contenu de slot, qui est pour la valeur par défaut, puis remplacer notre deuxième emplacement. Nous pouvons maintenant nettoyer ce composant d'articles vendus, et nous avons nos modèles et ensuite nous pouvons faire la même chose pour le total des ventes, sans l'icône, place dans la fente d'icône, puis même pour notre valeur totale des ventes, collez ceci dans notre slot par défaut et dans les composants, et exactement la même chose pour notre troisième composant aussi, l'icône du best-seller [inaudible] et aussi le contenu aussi. Ensuite, nettoyez notre composant best-seller. Maintenant, cela nous laisse avec nos composants de graphiques libres avec des données dynamiques, que nous devons maintenant transmettre. Ceci, nous pouvons ajouter un fournisseur dans l'un des composants paren et ne va toujours pas passer au fichier App.vue, puis dans la section de script. L' option de fournir est assez simple. Tout ce que nous avons à faire, c'est de fournir un objet. C' est un autre endroit où nous pouvons fournir toutes les données que vous souhaitez être disponibles dans l'un des composants du graphique. Nous savons déjà quelles données nous avons besoin. Nous avons besoin de la quantité d'articles vendus, nous avons besoin de la valeur totale des ventes, ainsi que du best-seller aussi. Mettons-les en place. Tout d'abord, la quantité d'articles vendus. Nous pouvons placer dans n'importe quelle valeur à l'intérieur d'ici pour l'instant et très bientôt nous obtiendrons cette valeur en utilisant notre fichier de commandes. Ensuite, nous avons besoin de la valeur totale des ventes. Cela va être une valeur à nouveau, et le troisième pour le best-seller, qui est une ficelle, vous voulez aller pour le sweat à capuche Vue en moyenne, et ce sont nos données fournies. Ensuite, nous examinerons comment nous pouvons accéder à ces données dans nos composants graphiques. 73. Injecter des données: À l'intérieur de notre fichier app.vue, nous avons maintenant cet objet fournit qui fournira toutes les données à l'intérieur de l'un des composants enfants. Ces données ne sont pas automatiquement héritées dans les composants enfants. Au lieu de cela, ce que nous devons faire est d'aller dans tous les composants, où nous voulons l'utiliser et ajouter un tableau d'injecteurs avec les propriétés que nous voulons accepter. Commençons par les articles vendus, où nous avons besoin de cette quantité d'articles vendus valeur. On peut commencer à avoir un script, comme quand on accepte des accessoires. À l'intérieur, nous allons configurer un tableau appelé inject. Ensuite, nous pouvons transmettre la valeur dont nous avons besoin, c'est-à-dire la quantité d'articles vendus. Si nous enregistrons cela, nous voyons maintenant que la valeur a été mise à jour dans le navigateur. Cela fonctionne parce que ces deux noms correspondront. Prenons la section de script, et nous allons placer cela aussi dans le total des ventes. Cela nécessite également la valeur totale des ventes qui est transmise. Enregistrez ceci, et cela apparaîtra maintenant. Et enfin, le best-seller. On y va. Mais comme nous le savons déjà, tout est juste actuellement des données statiques, mais il devrait être dynamique et basé sur notre fichier orders.js. Pour ce faire dans notre app.vue, nous allons maintenant définir ces deux premières valeurs pour être dynamiques en configurant une propriété calculée. Tout d'abord, allons-y pour la quantité d'articles vendus. Ils sont juste en dessous de nos articles triés, séparés par des virgules, nous allons configurer cela. Maintenant, cela nous laisse avec quelques options. Nous pourrions aller directement dans notre fichier orders.js. Tout comme nous l'avons fait précédemment, nous pouvons parcourir toutes les commandes et ensuite tous les articles de la commande, ou alternativement juste au-dessus, nous avons déjà nos articles triés, qui est un tableau de tous les articles que nous avons vendus. Au lieu de cela, nous pouvons l'utiliser, mais nous allons d'abord créer une nouvelle variable appelée quantité, et le configurer pour être une valeur initiale de zéro. Ensuite, pour obtenir cela, nous pouvons saisir notre propriété calculée qui a été triée éléments, boucle sur cela. Créez ensuite une fonction pour chaque élément. Nous parcourons tous ces articles vendus et nous avons cet objet, comme nous le voyons ici. N' oubliez pas que chacun de ces objets possède un champ de quantité. Ce que nous devons maintenant faire est de mettre à jour notre quantité avec le champ quantité de cet article. Alors prenez notre variable, puis nous pouvons ajouter en utilisant l'opérateur +=, l'item.quantity. Cet opérateur renouvelle automatiquement la quantité d'article à la valeur existante plutôt que de la remplacer. Ensuite, retournez notre quantité à partir de cette valeur calculée. Maintenant, nous pouvons utiliser ce nom ouvertement fournir des objets et remplacer la valeur codée en dur de 54 par la valeur de cette quantité de points d'articles vendus. Ensuite, la valeur totale des ventes. Je vais simplement [inaudible] ajouter une virgule, et configurer notre deuxième propriété calculée. Tout comme les deux vont créer une nouvelle variable, cette fois appelée total, et définir cette valeur à une valeur initiale de zéro. Encore une fois, pour celui-ci, nous avons quelques options. Nous pourrions une fois de plus vivre à travers nos articles triés. Nous pourrions faire quelque chose comme multiplier la quantité par le prix de l'article, ou nous pourrions aller directement à notre tableau de commandes. Ensuite, passez en revue nos commandes , passez en revue les articles, puis additionnez tous les prix. C' est ce que je vais faire, c'est-à-dire parcourir tous nos ordres. Nous faisons ceci .orders.map. Nous allons saisir chaque commande individuelle, puis boucle à travers la propriété items. Sélectionnez chaque élément. Ensuite, pour chaque article de l'une de nos commandes individuelles, nous allons saisir le champ de prix, mettre à jour notre total, puis retourner cette valeur totale. Maintenant, revenez à notre fournisseur, déplacez ça. Nous pouvons définir cette valeur pour être this.totalsalesvalue. Donnez ceci une sauvegarde et désactivez au navigateur. Nous ne voyons maintenant aucune donnée à l'intérieur d'ici. Allons voir l'inspecteur et voir ce qui se passe dans la console. Nous avons eu une erreur disant que nous ne pouvons pas lire la propriété de la quantité d'articles vendus. Maintenant, la raison pour laquelle nous voyons cette erreur est que lorsque nous référençons des propriétés de données ou des données dynamiques sur cet objet fournit, nous devons plutôt retourner ceci comme une fonction. Cette fonction est configurée comme la propriété data ci-dessus. Cela va retourner toutes nos valeurs qui incluent des données dynamiques. C' était tout à fait bien avant parce que tout ce que nous sortions était des données statiques telles que la chaîne et aussi nos nombres. Si nous transformons cela en une fonction, tout comme les données, nous allons saisir nos trois valeurs, puis les retourner de toutes les fonctions hors du navigateur. Nous voyons maintenant les articles vendus, mais nous manquons le total des ventes. Jetons un coup d'oeil. Nous avons cette valeur .totalsalesvalue de la quantité d'articles vendus. Je pense qu'on a peut-être juste besoin de placer ça dans la section calculée, donc on coupe ça. Si nous jetons un oeil à l'accolade de fermeture pour le calcul, nous avons juste besoin de placer cela à l'intérieur de la section droite, séparée par une virgule, et nous y allons. Enfin, nous avons cet article le plus vendu qui est actuellement transmis sous forme de chaîne. Maintenant, nous allons résoudre ce problème en accédant à nouveau aux articles triés, qui est un tableau de nos articles les plus vendus. Rappelez-vous que c'est la quantité la plus élevée vendue en premier. Tout ce que nous devons faire pour cela est d'accéder au tout premier élément à l'intérieur de notre tableau. Je vais découper la ficelle. Nous pouvons accéder à ce .sorteditems. Ensuite, accédez à ce premier qui est la quantité la plus vendue. Cela retournera notre objet complet pour cet article. Nous pouvons maintenant réduire cela dans les composants best-seller, et accéder directement à la propriété name. Maintenant, nos valeurs injectées gratuitement sont maintenant dans les composants corrects. 74. Mini défi : mettre à jour les pages commandes et meilleures ventes pour utiliser Fournir / Injecter: Nous avons maintenant converti notre page d'aperçu pour utiliser fournir et injecter. Ce que j'aimerais que vous fassiez maintenant, c'est d'aller l' avant et de faire de même pour les pages des commandes et des meilleures ventes. Maintenant, dans l'App.vue, nous avons encore commenté notre section best-seller et défilant vers le haut nous avons également cette section de commandes ici aussi. Nous avons déjà fait l'aperçu afin que nous puissions ignorer cela. Ce que je voudrais que vous fassiez, c'est de passer sur tout le contenu de la fente, que nous avons pour chaque page, dans les composants individuels, comme nous l'avons fait avec la vue d'ensemble où nous avons extrait tout le contenu dans le composants individuels. Ensuite, remplissez toutes les sections qui ont des données dynamiques telles que ce chemin, mis en place par fournir à l'intérieur de cette App.vue, puis injectez les données dans les composants requis des âges. Ils vont nous donner un coup d'envoi et ensuite je vais voir comment je l'ai fait. 75. Mettre à jour les pages de commandes et meilleures ventes pour utiliser Fournir / Injecter: Je vais lancer ça avec la page Commandes. Si nous faisons défiler jusqu'à la section commentée dans App.vue, commençons par cette section d'ordre. Je vais décommenter cela, donc c'est un peu plus clair ce que nous faisons. A l'intérieur d'ici, la première section ou la première fente que nous avons est cette section totale. Il contient le composant total des ventes. Ce que nous devons faire est de couper cela, puis aller à la page Commandes, et placer ceci à la place de notre emplacement total. Les Ordres.vue, c'est la fente avec le nom de Total. Coller dans nos composants. Maintenant, nous utilisons un composant. Ce que nous devons faire est également d'importer cela dans ce fichier aussi. Créons une section de script. Je vais juste faire sauter ça. Créez notre section de scripts et juste au-dessus de la valeur par défaut d'exportation, nous allons importer ce composant unique qui était le total des ventes. Le chemin d'accès du fichier est.. /composants, puis dans le total des ventes. Configurez notre sujet de composant. En passant dans ce total des ventes. Ensuite, sur App.vue, nous avons toujours cette section par défaut. Si je mets en évidence cela, nous pourrions maintenant saisir tout le div, qui est imbriqué à l'intérieur avec la classe de l'emballage d'ordre. Mettez ceci, je vais aller nettoyer ces composants de commandes et puis coller ceci dans notre fente. De là, nous considérons cette section qui a besoin d'accéder à toutes les commandes afin que nous puissions maintenant passer cela en utilisant elle fournit et injecter. abord, notre fournisseur, qui est dans l'App.vue, mis en place les commandes, ce qui est égal à ces deux commandes qui vit sur notre propriété de données. Sur les commandes. Vue, nous pouvons maintenant injecter ça dans notre script. Ceci est un tableau avec la valeur unique des commandes. Cela place maintenant nos commandes dans cette section. Nous verrons toujours cela parce que nous avons plus dans App.vue, nous mettons toujours dans ces composants commandes. Je vais commenter ceci et cliquer sur le lien Commandes. Tout fonctionne bien. À côté de notre page best-sellers, encore une fois, décommentons ceci afin que ce soit plus clair. Celui-ci est un peu plus simple. Nous n'avons que cette table. Code ça. Plus à la page Bestsellers.vue, et nous pouvons remplacer le contenu de la fente par notre table, cela a également besoin d'accéder à notre propriété informatique qui est triée articles. Passons ça à notre fournisseur. Éléments triés, qui va être égal à ce obtenu éléments triés, qui est une propriété informatique sur notre composant, qui est best-sellers Mettre en place un script. Tout ce que nous avons à faire pour cela est de configurer notre réseau d'injecteurs, qui va accepter les articles salés. Il y a notre table et nous pouvons nettoyer notre App.vue en supprimant l'un des anciens composants, laissant cette section dynamique. Nous n'avons pas besoin des best-sellers, nous n'avons pas besoin des commandes, et nous n'avons pas besoin de la section d'aperçu non plus. C' était un test, nous avons la vue d'ensemble des commandes et aussi les best-sellers aussi. 76. Mettre à jour le fournisseur à partir d'un composant enfant: Avec l'utilisation de fournir et d'injecter pour transmettre des données, nous pouvons également avoir besoin d'un moyen de changer d'état dans un composant parent à partir d'un enfant. Nous savons comment le faire en émettant un événement personnalisé. Mais lorsque vous utilisez fournit et injecter, la façon d'aborder cela est d'avoir une méthode dans le même fichier que le fournisseur, puis nous transmettons aux composants enfants, une référence à cette méthode que vous pouvez ensuite déclencher. Nous créons essentiellement une méthode dans un composant parent , puis l'appelons à partir d'un enfant qui voit une action. Nous allons comprendre la commutation de nos pages à partir des composants RH à l'intérieur de l'app.view. Nettoyons cette section de la barre latérale et supprimez tout le contenu de la fente. Cela va alors supprimer notre lien et nous pouvons maintenant le placer dans notre fichier sidebar.vue au lieu de nos slots, puisque nous ne recevons pas de données de slot, nous pouvons le remplacer par un lien. Ce lien va simplement sortir la page de notre boucle, et nous avons maintenant besoin de configurer une méthode dans l' app.view qui est déclenchée lorsque nous cliquons sur l'un de ces liens. Jusqu' à nos scripts va configurer la section de la méthode, et cette méthode va s'appeler ChangePage. Cela devra également prendre dans la page vers laquelle vous voulez basculer, puis tout ce que nous allons faire est de changer la propriété dates de SelectedPage pour être égale à cette valeur. Nous pouvons maintenant transmettre une référence à cette méthode à l'intérieur de notre fournisseur. Je vais garder ces cohérents et appeler aussi ce changePage, qui est égal à notre méthode du même nom. Nous voulons basculer cette page de modification à l'intérieur de la barre latérale, et tout comme nous transmettrons n'importe quelle donnée ou état, nous pouvons également l'ajouter dans un tableau d'injection. Maintenant, cette page a accès à toutes les méthodes ChangePage. Nous allons maintenant utiliser notre lien à l'intérieur du modèle pour écouter un clic et activer cette méthode, donc ceci maintenant pour un clic, c'est maintenant un nom de méthode de ChangePage. N' oubliez pas que cela doit également prendre dans la page vers laquelle vous voulez naviguer, et nous aurons accès à cela avec cette variable de page. Essayons cela sur le navigateur, avons la vue d'ensemble, les commandes, et aussi les best-sellers qui a maintenant été déclenché à partir de ce composant enfant. Vous finit, nous pouvons changer le curseur pour être un pointeur et nous survolons l'un de ces liens. Un style li est déjà configuré et tout ce que je dois faire est d'ajouter au curseur pour être un pointeur. Maintenant, tout cela fonctionne très bien, mais il y a quelque chose à savoir, qui est par défaut fournit et injecter n'est pas réactif. Cela signifie que si l'une de toutes les valeurs fournies change, les composants enfants ne seront pas mis à jour. Il y a deux façons que nous pouvons voir cela si nous faisons sur la réactivité, et notre application a une structure de composant qui n'est pas trop profonde. On pourrait utiliser des accessoires et émettre. Nous pourrions également utiliser fournit et injecter, définir les valeurs initiales pour les composants enfants une fois le téléchargement, ou alternativement, si nous voulions vraiment utiliser fournit et injecter, mais la réactivité était importante. Il y a un moyen de le faire lorsque nous combinons cela avec l'API de composition libre de vue, et c'est quelque chose que nous allons découvrir bientôt. 77. Section Intro - Introduction au routage: Lors de la construction de nos applications, nous avons souvent le cas d'utilisation pour basculer entre plusieurs pages. Pour cela, Vue nous a également couverts par la fourniture d'un paquet de routeur. Si votre routeur est créé et activement maintenu par l' équipe de base Vue.js afin que nous puissions être sûrs qu'il sera compatible avec votre version de Vue, ainsi que toutes les mises à jour, aussi. De plus, si vous passez d'une page à l'autre, le paquet relatif a également beaucoup d'autres fonctionnalités intéressantes, que nous allons découvrir dans cette prochaine section. 78. Ce que nous allons construire et le projet de départ: Bienvenue dans cette toute nouvelle section. Pour les prochaines sections, nous allons également avoir un nouveau projet appelé Creative Cards. Cela va être une application d'édition de carte et nous pouvons voir à partir de l'écran de démarrage ici nous avons la section d'en-tête, nous avons quelques liens vers les catégories populaires. Ensuite, nous avons toutes nos catégories disponibles listées ci-dessous. Tout ceci est généré dynamiquement à partir des données que nous avons dans notre application. Nous pouvons cliquer sur l'une de ces catégories et voir toutes les cartes disponibles, qui correspondent à cette catégorie actuelle. Si nous sélectionnons tous, nous voyons un lien pour toutes les cartes disponibles, que nous pouvons maintenant sélectionner pour modifier. Si nous cliquons sur l'un de ces éléments, nous sommes alors amenés à la vue d'édition. Nous pouvons sélectionner toutes les pages. Nous avons l'avant, l'intérieur gauche, l'intérieur droit, et aussi l'arrière aussi. De l'un de ces points de vue, nous avons l'intersection de sur la droite. Nous pouvons sélectionner de nouvelles images que vous souhaitez utiliser pour tous les arrière-plans. Nous pouvons échanger la position de cette image. Nous pouvons également supprimer l'image aussi si nous ne voulons pas en avoir pour cette page particulière. Nous pouvons également éditer ce texte et toutes les modifications que nous faisons sont reflétées dans l'aperçu sur la gauche. plus de cela, nous avons également un accès à toutes les options. Nous pouvons changer le type de police, nous pouvons changer le style de police. Nous pouvons changer la couleur et aussi le rendre gras, italique. Nous pouvons augmenter la taille de la section. Nous pouvons également définir l'alignement horizontal et vertical. C' est exactement la même chose pour l'une de nos pages. Tous ces éléments sont entièrement modifiables. Nous ne sommes pas coincés avec les valeurs par défaut qui sont fournies au premier clic sur cette carte. Cela sera également lié à une base de données, donc nous voulons être heureux. Nous pouvons ensuite cliquer sur le bouton Passer la commande et il enverra cette commande à une base de données. Avec une base de données, nous explorerons également de nouvelles fonctionnalités dans les prochaines sections, telles que les fonctions sans serveur, nous allons jeter un oeil au routeur vue, l'API de composition vue, et bien plus encore. Comme pour le reste du projet, si vous téléchargez le démarreur de la carte créative à partir du référentiel GitHub, si vous avez déjà le dossier dès le début du cours, vous pouvez y aller et ouvrir le démarreur de la carte créative. J' ai déjà navigué vers cela à l'intérieur du terminal et ouvert cela à l'intérieur du code Visual Studio. Pour commencer, nous avons un setter CLI de vue assez basique. Mais nous allons juste rester quelques ajouts pour ce projet à l'intérieur du point d'index HTML. J' ai ajouté un lien vers Google Fonts. La source contient directement à l'intérieur du dossier assets, quelques icônes et aussi quelques images que nous allons utiliser comme point de départ. Nous aurons un dossier de routeur et nous allons jeter un oeil à ce prochain. Mais probablement la partie la plus importante est ce point de données js. C' est un tableau de différentes cartes que nous allons utiliser comme point de départ pour ce projet. Ce sont les sections qui sont toutes entièrement modifiables. Lorsque nous changeons ces sections à l'intérieur d'ici, c'est un tableau qui contient des objets pour chacune de nos cartes. J' ai l'ID, le nom, et aussi les catégories auxquelles appartient cette carte et celles-ci sont toutes utilisées pour générer les catégories que vous voyez sur la page d'accueil juste ici. Après cela, un tableau de pages, nous avons l'avant, l'intérieur gauche, l'intérieur droit, et aussi l'arrière, une position d'image d'arrière-plan par défaut. Ensuite, nous sauterons dans les sections de cartes, ce sont les sections techniques avec toutes les données. Nous avons la hauteur, la couleur, et aussi la famille de polices, ainsi que toutes les autres options qui sont toutes modifiables à partir de notre menu. La seule chose que nous devons faire maintenant est de se diriger vers le terminal et exécuter l'installation de NPM en utilisant la commande NPM I. Cela installera tous les paquets de nœuds dont nous avons besoin pour ce projet. Et une fois cela fait, nous passons maintenant à la vidéo suivante où nous installerons le routeur vue. 79. Configurer le routeur de Vue: Si vous n'avez jamais utilisé de routeur auparavant, c'est un paquet que nous pouvons utiliser pour basculer entre nos pages ou nos vues. Puisque nous traitons des applications d'une seule page, nous n'avons pas la façon traditionnelle de changer les pages en les demandant à partir de ce serveur. Au lieu de cela, nous comptons sur un routeur qui mappera une URL à l'un de nos composants. C' est une façon beaucoup plus flexible et avancée de naviguer dans nos applications, la seule façon dont nous avons examiné dans le projet précédent lorsque nous avons mis en place un composant dynamique pour ce cas d'utilisation. ne s'agit pas seulement de changer de page cependant, il y a beaucoup plus de fonctionnalités, nous allons aussi juste passer à. De plus, le package vue-router est officiellement pris en charge et maintenu par l'équipe Core Vue.js. Il est donc profondément intégré, pris en charge et également tenu à jour. Il y a un lien CDN, mais puisque nous utilisons la vue CLI, l'installation est vraiment simple. Pour garder nos paquets sur la même version, le projet de démarrage que nous avons ici a déjà installé ce routeur. Nous pouvons voir cela dans le package.json dans les dépendances. Nous avons le vue-routeur qui est vraiment simple à ajouter, et si vous voulez ajouter ceci un projet différent que vous créez vous-même, yo u peut aller au terminal. N' oubliez pas qu'il est déjà installé, alors n'exécutez pas cette commande. Mais si vous l'utilisiez sur un projet différent, vous pourriez l'installer avec le vue-routeur, avec la commande d'un routeur vue add. Cela ajoutera le vue-routeur comme plug-in CLI, et vous donnera également la possibilité de configurer un mode historique, que nous examinerons plus tard. Pour ce projet particulier, nous n'avons pas encore configuré le mode historique quand inclure un nouveau routeur. Une fois l'exécution de la commande vue add router terminée, si vous allez dans le répertoire source, cela ajoutera un nouveau dossier. Le nouveau dossier est ce routeur juste ici, qui contient un fichier Index.js. Si nous regardons en haut, la première chose que nous ferons est d'importer les paquets dont nous avons besoin à partir du vue-router, nous parlerons bientôt des modes d'historique, mais c'est le paquet dont nous avons besoin pour créer un nouveau vue-routeur. Ensuite, en dessous de cela, nous importons tout composant que vous voulez basculer entre de notre routeur. Ici, nous avons l'importation de nos composants Home, qui est ajouté avec la CLI Vue. Il a créé un répertoire de vues avec le about, et aussi la page d'accueil pour commencer avec le routeur. Ensuite, nous avons un tableau de routes que nous voulons utiliser pour notre application. Chacun de ces objets contient un chemin d'accès. Nous avons le lien d'accueil et aussi le lien d'environ juste en dessous. Chacun de ces liens sera mappé à un composant particulier. Celui-ci le relie à nos composants domestiques. Si nous regardons le composant about, c'est un peu différent de celui juste au-dessus. Celui-ci utilise le fractionnement de code, et nous allons jeter un oeil à la façon de le faire plus tard. Nous créons ensuite un objet routeur qui contient n'importe quelle configuration dont nous avons besoin, comme l'historique que nous venons de mentionner précédemment. Nous passons aussi dans notre tableau de routes. Enfin, nous exportons notre fichier de routeur, donc cela peut être utilisé dans notre application de au main.js. Nous importons ensuite ce routeur exporté juste ici, puis ajoutons ceci à notre application avant que cela ne soit monté sur le fait. C' est une action qui va au terminal et démarre notre serveur de développement serait NPM exécuter servir. Ouvre ça. Nous avons maintenant deux liens en haut de la page, sur la page d'accueil, qui liens vers/, puis aussi sur cette page aussi. 80. Lien et vue du routeur: Nous avons maintenant deux liens en haut de la page. Nous avons le Home qui relie à la barre oblique avant. Puis aussi la page À propos de nous aussi. C' est beaucoup besoin de deux routes que nous avons vu dans le fichier du routeur juste ici, puis mappage à nos composants. L' interface de ligne de commande Vue est automatiquement ajoutée dans ces deux photos de routes. Mais en général, nous devons les ajouter dans nos cellules. Aussi, ces liens que vous voyez ici, si nous allons sur notre App.vue, la CLI a déjà ajouté ces deux liens dans les photos en utilisant le lien routeur. Le lien de routeur est un composant qui accepte les deux prop comme un attribut. C' est à l'intérieur ici que nous passons sur la route vers laquelle nous voulons naviguer. Nous pouvons placer ces liens de routeur dans n'importe quel composant ou n'importe quelle page que nous voulons. L' utilisation de ce lien de routeur est également préférable à l'utilisation des éléments HTML a standard pour diverses raisons. Si nous regardons les sorties de tous les outils de développement de navigateur, cliquez avec le bouton droit de la souris « Inspecter », ouvrez la section du corps, et jetez un oeil pour l'application dans la navigation. Nous voyons à la place de notre lien de routeur, nous avons ceci un élément, notre Accueil, et aussi le lien A propos. Il y a cependant une différence entre l'élément a qui a été ajouté automatiquement, parmi lequel nous nous ajoutons. Lorsque nous avons défini le mode historique, que nous allons jeter un coup d'oeil bientôt, ce lien qui a été ajouté interceptera tous les clics et empêchera le navigateur de rafraîchir automatiquement la page. Essayez d'utiliser un lien de routeur si possible, plutôt qu'un élément de lien HTML. En outre, si vous avez utilisé le routeur dans Vue version 2, vous avez peut-être également utilisé l'invite Tag juste comme ceci. Cela nous a permis de changer l'élément qui enveloppait notre lien, tout autre élément HTML tel qu'un élément de liste. Cependant, sachez que cela n'est pas disponible dans la dernière version du routeur, vous devrez donc le supprimer si vous l'avez sur des projets existants. Nous ne sommes pas seulement limités à passer une chaîne statique comme celle-ci, environ deux prop, nous pouvons également passer des données dynamiques aussi. Par exemple, nous pouvons avoir un utilisateur comme celui-ci. Créons une section de script avec notre valeur par défaut d'exportation, avec notre section de données, puis nous allons retourner un utilisateur. Cet utilisateur peut être un objet avec le nom et aussi un ID utilisateur. Nous pouvons alors faire cette dynamique avec le deux-points, puis passer dans une chaîne de modèle à l'intérieur du [inaudible]. Nous pouvons vouloir aller à un itinéraire, qui est l'utilisateur barre oblique, puis l'ID de l'utilisateur. Donnez ceci une sauvegarde, rafraîchir, et maintenant si nous cliquons sur « A propos », cela nous envoie à l'utilisateur/12345, et cela nous donne un ID de la flexibilité que nous avons lors de la sélection de nouvelles routes. Nous pouvons également étendre encore plus loin en passant dans un objet. Plutôt que notre chemin comme ça, nous pouvons passer dans notre objet. C' est plus simple, nous pouvons passer dans un chemin vers lequel nous voulons naviguer. Encore une fois, nous pouvons passer dans un chemin dynamique ou nous pouvons simplement ajouter une chaîne régulière. Cela devra également être dynamique, donc nous ajoutons la liaison. Même chose pour notre deuxième lien, nous pouvons ajouter dans le chemin. Maintenant, puisque nous avons un objet, nous pouvons également ajouter des propriétés supplémentaires. Pour l'instant, donnez ceci une sauvegarde et nous pouvons rafraîchir le navigateur, lien vers notre Accueil et aussi la page À propos de nous aussi, ou alternativement, au lieu de référencer un chemin comme celui-ci, nous pouvons également sortir du routeur et dans l'index ou js, puis utilisez le nom que nous avons déjà fourni ici. Nous avons le nom Accueil et aussi à propos de nous, l'un d'entre eux peut maintenant être utilisé sur notre lien de routeur. À l'intérieur de notre objet, nous pouvons remplacer notre chemin par la propriété name. Sur le premier était Home, et le second était A propos. Essayons ça, rafraîchissons. Il navigue toujours vers nos deux pages. Juste au-dessous de nos liens, nous pouvons voir le contenu de la page juste en dessous. La raison pour laquelle nous pouvons voir cela est à cause de cette vue de routeur qui a été placé sous nos liens. Cela agit comme un [inaudible] pour les composants que nous affichons actuellement. Nous pouvons placer cela n'importe où à l'intérieur de notre modèle. 81. Paramètres et requêtes: Le paquet de routeurs a plus à offrir que la simple commutation entre les composants. Il peut également être utilisé pour transmettre des données sous la forme de paramètres et aussi une chaîne de requête. abord, jetons un oeil aux paramètres ou paramètres, qui sont des variables pour une route donnée dans le lien de routeur, que nous avons juste ici. Nous pouvons ajouter nos paramètres à l'intérieur de ces deux objets. Donc juste après notre nom séparé par une virgule, ajoutez nos paramètres. A l'intérieur de cet objet, nous pouvons ajouter autant de paramètres que nous le voulons. Mais maintenant, je vais juste ajouter un identifiant d'utilisateur, qui est le nom. La valeur sera égale à user.id, que nous pouvons obtenir à partir de nos données. Ici, nous avons affaire à cette page d'accueil. Passons à la Vue, puis dans les composants home.vue. À l'intérieur, nous avons plusieurs façons d'accéder aux données de nos routeurs. A l'intérieur des accolades doubles, nous pouvons sortir cela avec le routeur de symbole dollar. Vers le lien d'accueil. Cela nous donne maintenant beaucoup d'informations sur le routeur. Nous pouvons en fait voir cela un peu plus facile si nous allons dans les outils de développement. Alors allez dans Inspecter, ouvrez ces composants personnels, et cela montre maintenant toutes nos informations de routage un peu plus structurées. Nous avons accès à des choses telles que l'itinéraire actuel. Nous pouvons voir toutes les requêtes ou tous les paramètres, tels que l'ID utilisateur que nous venons d'ajouter. Si nous faisons défiler vers le bas, nous avons beaucoup plus d'informations disponibles pour ce routeur, telles que toutes les options. Nous pouvons également voir toutes les routes que nous avons définies dans notre fichier de routeur. Nous avons le composant d'accueil qui est le chemin de la barre oblique avant. Ensuite, nous avons ceci à peu près un juste en dessous de deux. C' est ainsi que nous pouvons accéder à toutes les informations des routeurs. Nous pourrions également utiliser cela pour accéder aux paramètres [inaudibles], ou plutôt nous pourrions utiliser la route du symbole dollar, ce qui va filtrer beaucoup de ces informations et nous donner simplement accès aux informations de route actuelles. Nous pouvons déjà voir que c'est beaucoup plus simple. Nous pouvons voir sur cet objet que nous avons accès à nos paramètres. A l'intérieur, nous pouvons accéder aux paramètres de points. Sauvegardez ça. Maintenant avoir accès à notre identifiant utilisateur. Si nous voulions simplement accéder à cette valeur directement ou si vous aviez plusieurs paramètres, nous pouvons également y accéder par leur nom. Maintenant, cet identifiant d'utilisateur nous donnerait juste accès à la valeur. Le routeur peut également gérer les chaînes de requête. Si vous n'avez pas utilisé de chaîne de requête dans le passé, il s'agit d'un moyen de fournir des informations supplémentaires à l'intérieur d'une URL. Vous avez peut-être vu une URL qui ressemble à ceci. Nous avons un point d'interrogation, qui est utilisé pour séparer la requête de l'URL. Ensuite, nous aurons nos noms et nos valeurs comme ça. Maintenant, l'utilisateur, qui est égal à n'importe quelle valeur. Il s'agit d'une section. Nous pouvons également utiliser l'esperluette pour assister à plusieurs paramètres de requête. Ces chaînes de requête peuvent être consultées localement ou nous pouvons également les envoyer au serveur aussi. Un cas d'utilisation typique pour une chaîne de requête est utilisé avec un formulaire HTML. Nous pouvons voir cela si nous ajoutons un simple formulaire ou un modèle. Nous allons simplement garder cela simple à une entrée de nom. Ensuite, l'attribut name est important. On va appeler cet utilisateur. Cet attribut de nom est celui qui est affiché dans la chaîne de requête. On verra ça dans une seconde. Nous ajouterons également un emplacement. Encore une fois, une entrée avec le type de texte. Celui-ci peut avoir le nom de l'emplacement. Un bouton pour soumettre ceci avec le type de soumission. Maintenant sur le navigateur, si nous ajoutons un nom à l'intérieur ici, un emplacement, nous pouvons envoyer. Ceci est maintenant ajouté à l'URL sous la forme d'une chaîne de requête. Nous voyons l'utilisateur est égal à Chris et aussi l'emplacement à fois cet utilisateur et aussi cet emplacement est couvert de toutes les formes de ces attributs de nom. Toutes ses informations seront envoyées au serveur avec notre formulaire. Supprimons ceci et toutes ces chaînes de requête ont été ajoutées automatiquement ou peuvent être soumises sous forme. Mais nous pouvons aussi les ajouter manuellement. Si nous allons à notre app.vue, puis dans notre lien de routeur, est une configuration tout comme nos paramètres, nous pouvons ajouter une virgule. A l'intérieur de notre objet, configurez notre requête, où nous pouvons ajouter autant de chaînes de requête que nous le souhaiterions. Par exemple, nous pourrions ajouter un jeton avec ce lien à propos, enregistrez ceci. Cliquez sur le lien à propos, et ceci est ensuite ajouté à la fin de notre URL. Si nous voulions également accéder à l'une de ces informations, nous pourrions également y accéder directement à partir de notre modèle. Retour à nos composants personnels et toujours sur cet objet de route, au lieu d'accéder à nos paramètres, tout ce que vous avez à faire est d'accéder à notre requête, actualiser. Nous ne voyons rien à l'intérieur ici puisque nous avons ajouté ceci au lien about. Nous pouvons découper cela au sujet à cette fin et c'est notre requête. Nous pouvons également ajouter plusieurs requêtes, puis y accéder par leur nom, tel que ce jeton. C' est ainsi que nous pouvons accéder aux paramètres et à nos chaînes de requête. Dans la prochaine vidéo, nous allons jeter un oeil sur la façon dont nous pouvons faire correspondre les itinéraires dynamiques. 82. Faire correspondre les routes dynamiques: URL ne sont pas toujours aussi simples que ce que nous avons ici avec notre barre oblique avant et la barre oblique avant sur la route. Ils doivent également être plus dynamiques et contenir des données qui modifieront vos données, ce qui est différent pour chaque utilisateur. Par exemple, vous pouvez avoir un chemin qui ressemble à ceci, vous pouvez avoir des comptes barre oblique. Ce chemin serait simple pour le gestionnaire de routeurs, nous aurons juste besoin de mapper ceci à un composant de compte. Mais que se passe-t-il si nous voulions aussi transmettre l'ID utilisateur, ce lien vers un certain utilisateur comme celui-ci ? Ce serait beaucoup trop de travail pour créer une nouvelle route pour chaque utilisation que nous avons eue dans notre base de données, mais pour cela le routeur fournit ce qu'on appelle un segment dynamique qui est un moyen d'avoir partie de notre URL qui peut changer ces deux pointe vers les mêmes composants. A l'intérieur de notre fichier d'index de routeurs, la première chose que nous allons faire est d'importer un nouveau composant, nous ne l'avons pas encore créé mais le ferons dans un instant. Nous allons importer notre compte, ce serait le même emplacement que juste au-dessus, il sera dans le dossier views, et ce sera le compt.vue. Après cela, nous allons créer un objet path comme nous le voyons ici, alors ouvrez les accolades et le chemin pour cela, nous reviendrons vers vous dans une seconde. Nous allons avoir un nom de compte et également pointer vers nos composants que nous venons d'importer ce fichier de service et nous pouvons maintenant créer ces composants de compte à l'intérieur de notre dossier de vues. Ce sera assez simple pour l'instant, nous allons juste placer dans un titre de niveau 1 de mon compte. Je vais au routeur, nous pouvons maintenant créer notre chemin pour ce composant, donc nous voulons que ce mappage pour transférer les comptes slash, et ensuite nous voulons gérer toutes les sections dynamiques telles que notre ID utilisateur. Donc, ce que nous allons faire ici est fondamentalement passer dans une variable en utilisant le deux-points, nous pouvons lui donner un nom de notre choix, cela va nous permettre de capturer cette information si nécessaire. Dans notre cas, nous appellerons cela l'ID utilisateur, puis sur l'app.vue, nous devons créer un lien de routeur pour lier à nos nouveaux composants afin qu'il soit placé à la fin, l' ouverture et la fermeture des balises, puis à l'intérieur de la balise d'ouverture. Quand j'ai fait les deux accessoires, je ne vois aucun objet où le chemin, ce sera dynamique afin que nous puissions placer cela à l'intérieur des ticks arrière et nous voulons aller à avant compte slash et ensuite nous pouvons faire usage de nos objets utilisateur et lien vers l'ID. Donc, plus dans le navigateur, et nous avons également besoin d'ajouter un nom à l'intérieur d'ici, et nous pouvons également placer un de ces séparés en deux entre chacun de ces nom ce symbole de pipe. Rafraîchissez et cliquez maintenant sur nos comptes et notre section Mon compte s' affiche maintenant lorsque nous lions à cette section de compte qui inclut l'ID utilisateur dynamique. Si nous avons besoin d'accéder aux données à l'intérieur de cette section dynamique comme cet identifiant utilisateur, nous pouvons accéder à ces routes.params bizarres, comme nous l'avons vu plus tôt. Jusqu' au account.vue, ouvrez les doubles accolades accolades nous pouvons accéder aux informations de route actuelles, les paramètres qui nous donne maintenant accès à cette variable d'ID d'utilisateur que nous avons assis à l'intérieur de notre fichier de routeur. Aussi si nous voulions lier à cette route par le nom d'une app.view, nous pouvons le faire comme nous l'avons fait à la fois avec cette route domestique donc au lieu d'avoir un chemin juste comme celui-ci qui inclut une section dynamique, nous pouvons lier au nom de l'itinéraire qui était compte alors nous pouvons passer dans les paramètres comme nous le voyons ci-dessus qui était un objet. Nous devons passer l'ID utilisateur, qui est égal à user.id. Par cela, la page Accueil, A propos, et la page Compte fonctionne toujours aussi, nous pourrions également passer dans plusieurs paramètres et aussi avoir plusieurs dynamiques sections aussi. Ainsi, par exemple, si cette section de compte et ensuite continuer à lister tous les articles de blog pour cet utilisateur, nous pourrions alors également stocker n'importe lequel des billets de blog individuels dans huit segments dynamiques et cela fonctionne exactement de la même manière. Si nous allons à l'app.vue, nous pouvons passer dans un second paramètre. Celui-ci était le post et nous pouvons passer n'importe quel nom unique ici, rafraîchir, essayons ceci. Nous voyons que notre identifiant de poste est également disponible. 83. Routes imbriquées: À l'intérieur de notre fichier App.vue, nous gérons tous nos changements d'itinéraire avec ces liens, puis afficherons la page sélectionnée avec cette vue de routeur. Tout ça est bon. Et si nous ne voulions pas que toutes nos vues soient placées à cet endroit ? Par exemple, que faire si nous avions notre compte.Vue juste ici. Cela avait également quelques pages connexes, comme les commandes précédentes et aussi une section pour mettre à jour le profil. Nous pouvons souhaiter que ces deux nouvelles sections ne soient affichées qu'à l'intérieur de cette vue de compte. Mais si utilisé cas, nous avons ce qu'on appelle des routes imbriquées. Pour voir cela en action, nous devons créer de nouvelles pages à l'intérieur du dossier Vue. Créez un nouveau fichier. Le premier est le profil de mise à jour et le second est les commandes utilisateur. Un titre de base sera bien pour l'instant. Nous installons le gabarit avec un titre de niveau 1 qui correspond aux commandes précédentes. Nous pouvons enregistrer ceci et le copier sur le profil utilisateur. Bien sûr, nous avons également besoin de liens vers nos nouvelles pages. Donc, revenez au composant App.vue, configurez nos nouveaux liens de routeur pour mettre à jour le profil. Ensuite, la seconde est pour nos commandes précédentes. Comme nous venons de le mentionner, ces deux liens sont liés à notre page de compte, il peut donc être logique de les avoir sous le chemin du compte comme ceci. Nous pourrions avoir des comptes de barre oblique et des mises à jour de barre oblique. Nous pourrions aussi nicher à l'intérieur de notre profil. Incluons ceux-ci avec l'invite à, analysez dans notre objet qui inclut le chemin. Ce sera dynamique, donc nous avons besoin du backtick. Cela ira au compte barre oblique, puis à l'utilisateur spécifique .id, puis à la mise à jour de barre oblique. Prends ça. En même temps, mais celui-ci va passer aux commandes jusqu'à ce que nous ayons fini avec cette tête sur le fichier relatif où nous allons importer nos deux nouveaux composants. Ce dernier était le profil de mise à jour, et le dernier était les commandes des utilisateurs. Ensuite, nous pouvons configurer notre chemin de routeur juste en dessous. Une option consiste à créer deux nouvelles routes. Un qui pointe vers notre mise à jour de barre oblique et un qui pointe vers nos ordres de barre oblique. Ce n'est pas idéal [inaudible] puisque nous voulons toujours afficher les mêmes composants de compte, mais nous voulons que ces deux nouvelles pages soient imbriquées à l'intérieur. Pour faire face à cela, nous pouvons ajouter un tableau enfants. Cela déclarera quels composants doivent être imbriqués dans cette page de compte de niveau supérieur. Tout d'abord, nous n'avons pas besoin de cette section de poste afin que nous puissions supprimer cela. Ensuite, séparés par une virgule, nous pouvons ajouter dans notre tableau enfants. A l'intérieur, nous allons analyser un nouvel objet, qui est une nouvelle route, mais la différence est que la nouvelle route que vous analysez ici sera ce qui va à la fin de cette route [inaudible]. Par exemple, si nous voulions une mise à jour de barre oblique directe, nous allons simplement analyser le chemin comme mise à jour. Ensuite, une fois que l'utilisateur visite le compte barre oblique, barre oblique avant l'ID utilisateur, mise à jour barre oblique. Nous déclarons ensuite quels composants nous voulons rendre. Dans notre cas, c'est la page que nous venons de créer appelée profil de mise à jour. Ensuite, notre deuxième objet sera pour les ordres de barre oblique. Cela affichera le composant que nous venons d'importer, qui était des commandes utilisateur. Essayons ceci, actualisez le navigateur. Maintenant, nous voyons nos liens en haut, cliquez sur le profil de mise à jour. Cela ne nous mènera qu'aux composants du compte. Cependant, avec la section de mise à jour des barres obliques, nous pourrions essayer les commandes précédentes. Encore une fois, nous avons l'URL correcte et il me montre toujours les composants de compte. Comme vous pouvez le voir, nous voyons toujours ce composant principal du compte. Mais qu'en est-il des deux composants imbriqués à l'intérieur ? Eh bien, pour cela, nous devons dire à une Vue js exactement où nous voulons que ces deux composants soient affichés à l'intérieur de nos parents. Au compte. Vue. Eh bien, pour cela, nous pouvons également passer dans un composant de vue de routeur. Maintenant, lorsque nous basculons entre nos deux liens enfants, nous voyons également le contenu de ces composants aussi. 84. Cours actifs: Cela nous aidera également à mieux comprendre quelle route nous sommes actuellement sur. Les routes Vue ajoutent également des classes au lien actif. Juste avant de voir cela en action, passons à l'app.vue et supprimez rapidement nos paramètres inutilisés de ce lien de compte. Nous n'avons pas besoin de ce post puisque nous avons supprimé cela dans la dernière vidéo, et maintenant si nous allons sur le navigateur et aller dans les outils de développement, cliquez avec le bouton droit de la souris sur Inspecter. Nous devons ouvrir ceci dans la section NAV. Cela contient tous nos liens sur le haut, et si nous cliquons sur le lien Accueil, vous verrez que cette classe apparaîtra de router-link-active et aussi router-link-exact-active aussi. Essayons le sujet et ces classes est maintenant déplacé vers le lien about. Le compte, cela l'obtient aussi. Mais si nous cliquons sur « Mettre à jour le profil », nous voyons toujours nos deux classes sont ajoutées à notre lien Mettre à jour le profil, mais le lien compte a toujours cette classe routeur-lien-actif. De même si nous passons aux commandes précédentes, nos deux classes sont maintenant sur nos commandes précédentes, mais le lien routeur actif est toujours sur notre lien de compte, même si nous n'avons pas cliqué sur ce lien. C' est parce que ce routeur-lien-actif s'appliquera toujours même sur une correspondance partielle. Actuellement, nous sommes sur /account, l'ID utilisateur, puis /orders. Mais puisque le lien de compte commence également par /account, cela sera également considéré comme une correspondance. Router-Link-Exact-Active cependant est plus spécifique et il doit correspondre au chemin exact que nous sommes sur pour que cette classe s'applique. Si nous fermons cela et nous dirigeons vers l'app.vue, quand nous configurons également le ViewRouter, il a également ajouté quelques classes à l'intérieur d'ici aussi. Nous avons quelques classes pour notre navigation, et aussi, cette classe pour router-link-exact-active réglage de la couleur de notre lien. C' est pourquoi lorsque nous cliquons sur l'un de ces liens en haut, nous voyons cette couleur verte, même si nous n'avons pas mis cela nous-mêmes, à l'intérieur des feuilles de style, puisque c'est la classe exacte, vous ne définissez la couleur verte que lorsqu'il y a une correspondance exacte. Si nous devions, cependant, changer cela, le router-lien-actif, puisque notre chemin actuel commence par /account, cela correspondra également à ce lien de compte aussi. De même si nous cliquons sur les commandes précédentes, nous voyons nos deux liens sont actifs. On va faire ça. Le style ne s'appliquera désormais qu'à l'itinéraire exact sur lequel nous sommes. Donc, c'est juste quelque chose à prendre en compte et cela nous donne un bon contrôle sur le style de nos liens. 85. Pages de fallback: Il est également important de gérer ce qui se passe si l'utilisateur atterrit sur la mauvaise partie de notre application ou sur une page qui n'existe pas. Nous pouvons configurer une capture générale tous les composants tels qu'un suivi quatre page pour afficher si aucun itinéraire sur sont appariés. Pour le moment, si nous allons dans le navigateur et tapons une URL non reconnue, nous ne voyons aucun composant s'afficher dans le navigateur. Pour attraper cela, nous allons passer à nos vues et créer une nouvelle page appelée NotFound.vue. Juste un modèle simple ira bien avec un titre de niveau 1, et ce titre va juste dire page introuvable. Si nous le voulions, nous pourrions également placer dans des liens vers différentes parties pour l'application ou même rediriger vers la page d'accueil si nous le voulions. C' est bien pour cet exemple. Dites ceci et maintenant pour accéder à cela, nous devons passer à notre routeur, et en haut, nous allons importer ceci comme non trouvé. Ensuite, dans notre tableau de routeurs, créez un nouvel objet qui va gérer toutes les routes qui ne sont pas reconnues juste au-dessus. Il faudra aussi emprunter un chemin que nous allons jeter un oeil dans une seconde. Le nom, introuvable, et aussi les composants que vous venez d'importer, qui est également introuvable. Si vous avez utilisé view to dans le passé et utilisé un routeur pour attraper tous les chemins non reconnus, tout ce que nous aurions à faire est d'ajouter une étoile à l'intérieur ici, et cela rendrait alors nos composants NotFound pour tout chemin non reconnu. Cependant, bien que dans la vue 3, nous devons passer un paramètre personnalisé. Un paramètre personnalisé est exactement comme ceux que nous avons utilisés ci-dessus pour l'ID utilisateur, mais la différence cette fois est que nous avons également besoin de passer une expression régulière pour correspondre à n'importe quelle route non reconnue. Ajoutons notre paramètre personnalisé, que je vais appeler le chemin. Une erreur dans l'expression régulière, qui est le point et l'étoile, et cela correspondra à toutes les autres routes qui ne sont pas répertoriées ci-dessus. Je dirai cela, nous voyons que notre URL non reconnue rendra maintenant notre page composants introuvables. Nous pouvons également accéder à ces paramètres que nous avons juste ici à l'intérieur du composant. Pour ce faire, nous y accédons comme tous les autres paramètres du routeur. Nous ouvrons les accolades doubles, accédons à l'itinéraire actuel, puis sélectionnons les paramètres. Cela nous donne maintenant accès à cette variable de nom de chemin et aussi à la valeur aussi. Nous pourrions également accéder à plusieurs chemins comme ceci si nous avons ajouté une barre oblique avant puis un deuxième segment. Cependant, bien que cela ne fera que rendre une chaîne simple. Si nous voulions diviser les sections et y accéder individuellement, nous pouvons le répéter et créer un tableau de paramètres. Pour ce faire, tout ce que nous devons faire est d'aller à notre routeur, puis ajouter une étoile facultative à la toute fin, et surtout dire que nous voyons cela est converti en un tableau avec plusieurs valeurs. Cela nous donne maintenant la possibilité d'utiliser ces paramètres individuellement si nous en avions besoin, ou même naviguer dans ce chemin aussi. Nous n'avons pas besoin de beaucoup l'URL complète juste comme ça. Cela peut aussi être une section de notre URL. Par exemple, si c'était une barre oblique avant Admin, cela correspondrait à la section admin, puis nous pourrions utiliser la section catch-all pour tout ce qui suit. Cela nous permettrait alors d'être plus précis, et nous pourrions créer des composants personnalisés pour différentes pages, ce qui peut être faux. Pour ce cas d'utilisation, nous pourrions alors personnaliser notre page introuvable pour être plus personnelle pour cette route d'administration, nous pouvons peut-être ajouter quelques textes ou tout simplement aucune page d'administration trouvée, et ensuite nous pourrions également passer dans le routeur, laissez le l'utilisateur sait exactement sur quel chemin ils se trouvent. Puisque c'est dans la route admin, nous ne voyons pas cette page introuvable. Ce que nous devons faire est d'aller à l'administration slash puis placer dans importe quoi après que ce chemin ou la page introuvable est alors rendu, puis aussi notre message client juste en dessous. 86. Configurer les composants et les routes de notre projet: Bienvenue de retour. Nous avons maintenant eu un peu de temps pour jouer avec le routeur Vue et voir certaines de ses fonctionnalités. Maintenant, nous pouvons prendre ce que vous avez appris et l'appliquer à notre nouveau projet. Pour commencer, nous allons nettoyer cette suite quatre pages en supprimant le message, puis aller à notre fichier de routeur et rétablir cela pour couvrir toutes les pages introuvables. Ensuite, nous allons aller dans le dossier views et créer les quatre nouvelles pages dont nous avons besoin pour notre projet. Nous pouvons supprimer le sujet, nous n'avons pas besoin de cela, le compte, supprimer la page d'accueil. Nous allons même avoir besoin de composants NotFound, nous pouvons supprimer le UpdateProfile et aussi les UserOrders aussi. Pour l'instant, nous allons créer nos quatre nouvelles pages, et le premier fichier auquel nous allons accéder est le fichier Admin.vue. La page suivante sera pour l'AppHome. Le troisième concerne la catégorie. Ceci est une page pour afficher toutes nos cartes par catégorie. Puis enfin, le Create.vue, qui sera la vue que nous utilisons pour éditer la carte. Juste pour que nous puissions les voir pour l'instant, nous allons ajouter un modèle et un titre de niveau 1, et le titre de cette page a été créé. Nous pouvons copier ceci, coller ceci dans les trois autres pages. Celui-ci était catégorie, enregistrez ceci, et l'AppHome, et aussi l'Admin aussi. Nous utiliserons également le routeur pour basculer entre ces quatre vues. Alors dirigez-vous vers la page d'index des routeurs, je vais remplacer ces quatre pages par nos nouvelles pages. Le premier est pour l'administrateur, le second est l'AppHome, le troisième est pour créer, puis aussi la catégorie aussi. Les points d'entrée du routeur domestique vont être cet AppHome. Nous pouvons modifier cela, nous n'avons pas besoin de la page à propos, donc nous pouvons changer ceci pour être la catégorie, le nom de la catégorie aussi, puis remplacer cette importation dynamique par un composant régulier. Nous n'avons pas non plus besoin de la section de compte afin que nous puissions remplacer ceci par /create, le nom de create, le composant. Nous pouvons également supprimer le tableau enfants. Nous devons également créer un objet de plus, et celui-ci est pour notre route d'administration. Au-dessus de notre fichier app.vue principal , ici, nous allons supprimer tous les liens, en le laissant juste en place la vue du routeur, afin que nous puissions saisir cette div, qui est le wrapper, supprimez ceci. Cette application ne va pas avoir un menu de style traditionnel pour basculer entre ces pages. Au lieu de cela, nous naviguerons lorsque l'utilisateur clique sur une catégorie ou une carte particulière. Une fois la carte sélectionnée, nous utiliserons le routeur pour basculer entre ces pages de carte. Pour l'instant, nous pouvons tester les routes. Tout ce que nous avons à faire est d'aller à la fin de notre URL et de tester la catégorie. Aussi, créer, nous avons aussi la route d'administration. C' est aussi très bien. Puis enfin, la page d'accueil. Toutes ces routes sont désormais correctement mappées sur nos quatre pages. Nous avons également besoin d'un composant d'en-tête, afin que nous puissions le placer à l'intérieur du dossier de composants. Ouvrez ceci et nous avons toujours ce composant HelloWorld. Nous pouvons renommer ceci comme AppHeader.vue. Allons nettoyer ça. Je vais tout supprimer pour l'instant et placer dans le modèle, qui va contenir la section d'en-tête et aussi notre titre à l'intérieur d'un titre de cartes créatives de niveau 1. Après cela, une section de navigation, qui va contenir trois liens vers les catégories populaires. Créez donc une liste non ordonnée avec trois éléments de liste. Le premier élément de liste contiendra le lien du routeur. Passez dans l'accessoire à. Nous n'avons pas besoin de faire ces dynamiques car c'est juste une chaîne régulière de /category. Ensuite, nous allons accéder à la section anniversaire. Passez le texte de l'anniversaire. Nous pouvons également copier cet élément de liste et l'utiliser deux fois de plus. Le suivant va aller à l'itinéraire anniversaire, le texte, puis coller dans le troisième en bas. Ce sera Noël. Vous pouvez également changer ces catégories si vous le souhaitez, beaucoup plus facile si nous datons section différente. Quelle que soit la route que nous possédons, nous allons toujours afficher cet AppHeader principal, donc nous pouvons importer cela dans l'app.vue. Dans la section script, créez notre importation. Nous pouvons utiliser le symbole @ pour accéder à la source dans les composants, puis l'AppHeader. Enregistrez ceci juste en dessous, supprimez les données aussi. Nous n'avons pas besoin de cela des vidéos précédentes, donc nous pouvons supprimer cela. Ensuite, jusqu'au modèle, nous pouvons enregistrer cela juste au-dessus de la vue du routeur, sorte que cet AppHeader sera toujours affiché en haut. Ensuite, le contenu de notre vue de routeur sera placé juste en dessous. Bien. Donc, nous voyons maintenant l'en-tête, nous pouvons tester ces liens. Nous avons l'anniversaire, l'anniversaire, Noël, mais cet en-tête a besoin d'un peu de style. Vous pouvez placer tous les styles dans le composant d'en-tête si vous le souhaitez, mais je vais placer dans les styles de liste générale dans notre app.vue. En outre, la section n'aura pas l'attribut scope, donc cela s'appliquera à tous les éléments de liste de notre application. Suppression des styles de navigation, ceux-ci ont été ajoutés automatiquement à partir du routeur, accéder à la liste non ordonnée. Ensuite, à l'intérieur, nous allons juste réinitialiser les paramètres par défaut du navigateur en définissant la marge à zéro et aussi la même pour le remplissage aussi. Après cela, je vais lister les articles et aussi nos liens. Nous définissons la décoration de texte pour être nulle. Cela supprimera tous les soulignements de nos liens. Le style de liste est également nul, et pour supprimer également la couleur de lien par défaut, nous allons définir la couleur pour hériter du parent. D' accord. Ce ne sont que des réinitialisations générales et des valeurs par défaut pour nos éléments de liste, et pour les styles d'en-tête plus spécifiques, nous allons revenir à notre AppHeader, puis créer notre section de style. Cela peut également être défini. Tout d'abord, tout ce contenu était enveloppé dans cet en-tête. Je vais définir la famille de polices en utilisant une police Google, qui est à l'intérieur de notre page d'index. À partir des fichiers de démarrage à l'intérieur de notre page d'index, ceci est lié juste ici. Cela nous donne accès à deux styles de polices que nous pouvons utiliser dans notre projet. Vous pouvez également passer à Google Fonts, donc n'importe quel fournisseur de polices différent, et utiliser un style différent si vous préférez. Retour à notre section d'en-tête, une chute cursive, puis aussi l'espacement des lettres d'un pixel. Cela va juste ajouter un peu plus d'espace entre chacune de nos lettres. La taille de police de 18 pixels, une bordure en bas d'un pixel, une ligne pleine, et la couleur du gris clair, et les pixels tout remplissage également sur le fond qui va séparer le contenu de cette ligne. Ensuite, nous pouvons accéder à la boîte flexible pour déplacer ce titre vers la gauche, puis nos liens vers la droite. Flex d'affichage, l'espace entre justifierait contenu et l'alignement vertical avec les éléments alignés en les plaçant au centre. Très bientôt, ce titre de niveau 1 va également relier à l'itinéraire d'accueil, sorte que nous pouvons ajouter un curseur à notre h1. Le curseur du pointeur, et également supprimer toutes les marges par défaut ou l'en-tête. Plus à nos liens sur la droite, prenez la liste non ordonnée, puis nous pouvons définir les alignements avec le flex d'affichage. Étant donné que la direction de flexion par défaut est ligne lors de l'utilisation de la zone flexible, celles-ci sont désormais placées sur la page. Nous avons juste besoin d'un peu d'espace entre nos articles de liste. Nous pouvons le faire avec un peu de rembourrage à gauche de 0,5 rems, et maintenant, notre en-tête est tout complet. 87. Navigation programmée: Ces liens routeurs que nous avons utilisés jusqu'à présent dans notre projet nous permettent de changer à différents endroits en un clic. Auparavant, nous avons également brièvement examiné l'accès à l'instance de routeurs en utilisant le routeur de symbole dollar. Cela nous a donné accès à des choses telles que les paramètres de notre code. Ce routeur de symbole dollar expose également beaucoup de choses à suggérer la possibilité de naviguer en utilisant des méthodes telles que push. Cela signifie que nous pouvons également intégrer la navigation dans nos écouteurs de clic ou nos méthodes. Plus dans ce AppHeader.vue, nous avons ce titre de site dans le niveau sur rubrique et vraiment ce que nous voudrions est de relier à la page d'accueil et nous pourrions soit envelopper cela dans le lien du routeur ou naviguer par programme en accéder au routeur de symbole dollar lorsque nous cliquons dessus. Jetons un coup d'oeil à la façon dont nous pouvons le faire avec la méthode push des routeurs. À l'intérieur de l'intérieur ouvert, nous écouterons un clic comme nous le ferions normalement, et puis nous répondrons à cela en accédant au routeur qui a cette méthode push. À l'intérieur, nous pouvons ajouter un chemin vers lequel nous voulons naviguer, alors ajoutez la barre oblique avant, cliquez sur le titre de notre site et cela revient maintenant à notre page d'accueil. Ceci est également utile pour des choses telles que pousser l'utilisateur à la zone de compte après qu'il se soit connecté, car cela peut également être utilisé à l'intérieur d'une méthode aussi, la seule différence est que nous utilisions cela dans notre section de script, rappelez-vous, nous aurions besoin d'ajouter ce mot clé à l'avant. Jetons un coup d'oeil à quelque chose d'autre qui est la méthode de remplacement. Rafraîchir maintenant à l'anniversaire et puis notre titre est d'être est de travailler exactement la même chose, mais il y a une différence clé. Lorsque vous naviguez dans le navigateur, chaque page que nous visitons est ajoutée à l'historique précédent des entrées, c'est ainsi que le navigateur sait où naviguer lorsque nous cliquons sur ces boutons de retour et de transfert. Lorsque nous utilisons la méthode push que nous venons de rechercher auparavant, ces entrées sont également ajoutées à notre historique. Cependant, comme cela semble lorsque nous utilisons la méthode replace, tout comme nous le sommes maintenant, cela remplacera alors l'entrée actuelle plutôt que d'en ajouter une nouvelle. Nous pouvons vérifier si nous actualisons, nous irons à l'anniversaire, puis cliquez sur l'itinéraire de la maison et maintenant si nous cliquons sur le bouton de retour, nous allons maintenant le ramener au lien précédent, qui est l'anniversaire, parce que c'est remplacé. Si nous revenons à la méthode push et faisons exactement la même chose, rafraîchir, aller sur le lien d'anniversaire, retourner à notre maison et maintenant si cliquez sur le dos cela nous ramène à notre lien d'anniversaire d'origine puisque la barre oblique avant est en ajouté à la pile du navigateur plutôt que de remplacer la précédente. A côté de ce routeur a également une méthode go qui nous permettra de naviguer à travers les entrées du navigateur, donc plutôt que de naviguer dans un certain chemin juste comme celui-ci, nous pouvons faire du cycle en arrière ou en avant à travers autant d'entrées que vous le souhaitez. Si nous voulions revenir aux pages, nous pourrions utiliser négatif 2 et essayons ceci. Rentrez chez vous, cliquez sur anniversaire, anniversaire et Noël, puis cliquez sur le titre du site et nous sommes repris aux entrées qui était de retour à notre lien d'anniversaire. Si nous changeons ceci pour être positif 2, cliquez dessus, cela nous poussera ensuite vers l'avant vers les entrées, qui est de retour à notre lien de Noël. Ceci est utile si nous voulions revenir en arrière et en avant plusieurs pages, cependant, si nous voulions seulement revenir en arrière ou en avant pour une page, nous pourrions également remplacer cela par avant ou aussi en arrière. Cela fonctionnera exactement de la même manière que go, mais ne fonctionnera que pour une seule page. En plus de ceux-ci, il y a aussi d'autres méthodes que vous pouvez trouver dans les docs API si nécessaire, mais ce sont quelques-unes des plus courantes. Notre projet, nous allons laisser ceci comme push et lier ceci à la chaîne ou barre oblique, que nous allons lier à la page d'accueil. Ensuite, nous allons jeter un oeil aux différents types de modes d'historique que le routeur fournit. 88. Modes de routeur différents: Dans ce projet, nous utilisons un projet de démarrage qui est téléchargé à partir de GitHub. Il a déjà le routeur Vue installé. Mais en passant par le processus de configuration du routeur, on nous demande si nous voulions utiliser le mode historique. Son mode historique n'est pas inclus dans le démarrage de ce projet, donc nous sommes actuellement dans ce qu'on appelle le mode historique de hachage. C' est pourquoi nous avons ce hachage à l'intérieur de l'URL. Puisque nous utilisons une application d'une seule page, ce hachage est juste utilisé en interne. La partie après le hachage est l'itinéraire vers lequel vous voulez naviguer. Ici, nous naviguons /catégorie, puis notre catégorie sélectionnée. Avoir ce hachage à l'intérieur de l'URL cependant, peut avoir un impact négatif sur le référencement. Si c'est une préoccupation, nous pouvons changer le routeur pour utiliser le mode HTML5. Pour ce faire, nous allons effectuer cette modification dans le fichier d'index du routeur, puis faire défiler vers le bas. Au lieu de l'historique de hachage web, nous pouvons remplacer cela par CreateWebHistory. Nous devons également importer cela à partir du paquet du routeur. Jusqu' au sommet, nous pouvons remplacer la version de hachage par l'historique Web. Ceci et sur notre projet, nous pouvons tout supprimer après notre localhost par la navigation. Tout cela fonctionne exactement de la même manière, mais cette fois sans le hachage dans la navigation. Ça marche bien ici. Mais rappelez-vous que notre application est une seule page vers le haut, et tout le routage est géré sur le front end. Ceci, lors du déploiement de notre application, nous devons configurer le serveur pour toujours retourner notre page principale index.html. Avoir cette configuration permettra à notre routeur de gérer où nous devons être sur le front-end si l'utilisateur visite la mauvaise page ou un itinéraire dynamique. Nous examinerons comment configurer cela plus tard lorsque nous déployons notre application. De plus, puisque nous ne récupérons que la page principale index.html, nous devons également gérer les erreurs 404 aussi. Nous le faisons actuellement à l'intérieur de notre routeur, c'est l'itinéraire attrape-tout. Nous allons tester si cela fonctionne en allant à des liens non reconnus. Nous voyons toujours la « Page introuvable ». En outre, si nous cliquons sur l'un de nos liens en haut, nous obtenons le composant « Page non trouvée » puisque nous n'avons pas configuré la deuxième section juste après notre catégorie. Actuellement, ce que nous avons seulement est /category, donc c'est une route non reconnue. Mais si nous supprimons la dernière section, nous avons maintenant une correspondance du composant de catégorie. 89. Section Intro - API de composition: Bienvenue, vous êtes arrivé à la section API de composition. Cette API de composition est une fonctionnalité sans version de vue et quelque chose qui est probablement la partie la plus attendue de cette nouvelle bibliothèque. Nous allons jeter un oeil à la composition dès le début en utilisant des ensembles de fonctions, nous allons également l'intégrer dans notre application de cartes créatives. Nous allons examiner toutes les nouvelles fonctionnalités qui fournissent comment nous pouvons diviser notre code en fichiers composables, comment nous pouvons l'importer et le réutiliser. En outre, nous examinerons comment nous pouvons intégrer certaines des choses que nous connaissons déjà, telles que : différentes méthodes, comment nous pouvons créer des fonctions, comment nous pouvons créer des propriétés calculées, des observateurs, et aussi certaines des nouvelles fonctionnalités tels que les effets de montre, et comment ajouter de la réactivité. Je suis impatient de voir cette section et je vous verrai dans la prochaine vidéo. 90. Qu'est-ce que l'API de composition ?: Lorsque l'API Composition a été annoncée pour la première fois, elle a d'abord reçu un peu de commentaires négatifs dans la communauté Vue. Cela était principalement dû à un manque de compréhension des objectifs de l'API Composition. Nous pensions que l'équipe principale vue.js avait l'intention de remplacer l'API Options existante qui inclut des choses comme les données, les méthodes sur les sections calculées, et de le remplacer par une toute nouvelle chose à apprendre. Ce n'est pas le cas, cependant, la façon dont nous écrivons du code vue.js avec l'API Options est toujours complètement valide, et tout ce que nous avons couvert jusqu'à présent est essentiel dans l'apprentissage de vue.js. Avec Vue 3, cependant, l'API de composition est également fournie comme un moyen supplémentaire d'écrire du code Vue. Une composition inférieure est utilisée à la place de l'API Options existante. L' équipe Vue recommande d'utiliser l'API Composition uniquement lorsque votre projet existant devient volumineux, difficile à entretenir et difficile à naviguer en tant que développeur. En fait, les deux peuvent être utilisés ensemble dans les mêmes composants si nécessaire, ce qui rend le refactoring beaucoup plus fluide. La motivation derrière la composition était de faciliter l'organisation, la maintenance et la réutilisation de notre code. Les composants réutilisables nous mènent jusqu'à présent, mais le JavaScript réel à l'intérieur de ces composants peut être organisé d'une meilleure manière. Il aura un composant Vue typique qui a un utilisateur, des produits et un panier d'achat. Le code lié à l'utilisateur est dans la section de données, monté, il y a une méthode, et aussi une montre aussi. Nous avons également des produits dans les données, nous les récupérons en utilisant une méthode qui est appelée lorsque l'application monte, et le code restant est pour notre panier. L' utilisateur peut mettre à jour ou ajouter des produits au panier, il peut ensuite vérifier avec le contenu de ce panier, et nous avons également une section calculée pour afficher le panier uniquement si l'utilisateur a ajouté un article. C' est du code vue.js traditionnel et rien de mal à cela. Pourquoi introduire une nouvelle façon ? Comme mentionné précédemment, c'est bien jusqu'à ce que notre application devienne beaucoup plus grande. C' est un exemple assez simple où nous pouvons voir un aperçu de haut niveau de tout notre code, il a également été simplifié pour remplir cette page. Nous n'avons pas de code à l'intérieur de nos méthodes, et dans une application réelle, cet exemple simple pourrait facilement être 3-4 fois plus long. Un autre inconvénient est que notre code connexe est tout séparé. Toutes ces pièces associées ne sont pas collées ensemble et cela devient plus problématique à mesure que nos fichiers s'agrandissent. C' est l'une des choses que la composition vise à résoudre. Nous pouvons maintenant écrire du code plus comme JavaScript traditionnel et aussi regrouper notre code beaucoup plus facilement. En JavaScript régulier, nous pouvons écrire la section utilisateur comme ceci, en utilisant une constante [inaudible] l'objet d'utilisation, et une fonction pour obtenir l'utilisateur d'une base de données. Pour les produits, nous pourrions également avoir la gamme de produits et aussi une fonction pour obtenir les données dont nous avons besoin. Aussi, pour le panier lié allez à, peut-être un code qui chevauche la ligne, mais nous pouvons déjà voir que les regrouper ensemble pour rendre notre code beaucoup plus organisé. Mais où mettons-nous tout ce code ? Comme toujours, il se trouve dans notre section par défaut d'exportation. Les deux, nous l'enveloppons dans une fonction de configuration à l'intérieur d'ici, nous retournons ensuite tout ce que nous voulons ensuite être disponible pour utiliser dans notre modèle tel que nos constantes et nos fonctions. Nous ne laissons pas Vue derrière nous non plus avec cette nouvelle syntaxe de look. Nous avons toujours accès à des choses familières telles que les crochets de cycle de vie, en utilisant le préfixe on. Ici, nous voyons OnMounted pour obtenir l'utilisateur, ainsi que les produits lorsque le montage du composant. Nous importons également cela de la bibliothèque Vue en tant qu'importation nommée, signifie que nous n'importons que les pièces dont nous avons besoin. En outre, des choses familières comme les montres et calculées est également disponible. Dans cet exemple ici, nous importons calculé et enveloppons notre code show basket avec lui pour le garder à jour avec toutes les modifications. La deuxième chose que la composition vise à améliorer est la réutilisabilité. Ce refacteur que nous voyons n'a pas rendu les composants plus petits ou plus réutilisables, il a simplement regroupé les sections associées. Nous pouvons vouloir réutiliser les objets d'utilisation ainsi que les produits dans une autre partie de notre application. Les solutions actuelles incluent la possibilité d'obtenir ces données à un composant de niveau supérieur, puis de les transmettre en tant qu'accessoire. Bien que cela puisse devenir désordonné lorsque les composants sont profondément imbriqués, il peut également placer des composants de codage dans lesquels il n'a jamais été prévu d'être. Nous pourrions également utiliser une bibliothèque de gestion d'état comme Vuex qui est une bonne option et fournit un magasin central. Bien que ce soit quelque chose d'autre à apprendre et aussi une façon supplémentaire d'ajouter à notre projet, serait-il génial si Vue fournissait nativement une solution pour rendre notre code plus facilement accessible et réutilisable ? Grâce à la composition, cela est maintenant possible en déplaçant notre code réutilisable dans des fichiers séparés. Le nom du dossier est obtus, mais vous pouvez généralement le voir appelé composables où chaque section de notre code est ensuite placée dans un fichier JavaScript, utilisant généralement le préfixe d'utilisation, que nous pouvons ensuite importer dans n'importe quel composants qui doivent l'utiliser. Cela laisse nos composants beaucoup plus légers et plus réutilisables. Tout ce code peut sembler étrange et déroutant au début, surtout si vous êtes nouveau à Vue. Au début, cela m'a aussi fait, mais nous allons passer beaucoup de temps à écrire du code de composition dans les prochaines sections, donc vous aurez beaucoup de pratique et cela deviendra bientôt plus familier. 91. Configurer la composition: Dans les diapositives précédentes, nous avons examiné comment notre code de composition se trouve à l'intérieur d'une fonction de configuration. Définissons maintenant cela dans notre AppHome.vue, et ici, nous avons besoin d'un script avec notre valeur d'exportation par défaut. Ensuite, nous allons le passer dans notre fonction de configuration, qui ressemble exactement à ceci. Le programme d'installation est exécuté avant la création du composant. C' est ici où nous allons écrire notre code de composition dans une syntaxe plus JavaScript. Comme nous venons de le voir dans la vidéo précédente, cette page d'accueil sera le point d'entrée de notre utilisateur. Nous l'utiliserons pour afficher une liste de toutes les catégories disponibles pour nos cartes, l'anniversaire et l'anniversaire de l'enfant. Dans le fichier data.js fourni, ouvrons ceci, juste ici, chacune de nos cartes a une section de catégorie qui comprend un tableau. Ce sont ces données que nous allons parcourir pour chaque carte pour construire cette page. Nous aurons donc besoin de parcourir toutes nos cartes et ensuite nous allons créer une seconde boucle pour parcourir toutes les catégories, puis les enregistrer. Tout d'abord, importons ces données dont nous avons besoin dans ce composant. Juste en dessous du script, nous allons importer le tableau de cartes. Le chemin du fichier pour cela était.. /data. Nous définirons alors normalement les cartes pour être une propriété de données. Mais avec la composition, nous pouvons créer une constante JavaScript régulière ou variable. Alors mettons en place une constante appelée AllCards. Nous pouvons initialement mettre en place un tableau vide. En outre, nous avons besoin d'une deuxième variable que nous allons utiliser pour stocker toutes les catégories que nous trouvons. Nous allons parcourir toutes nos cartes. Donc ça va être poussé aussi. Nous allons créer un let et nous appellerons cela UniqueCategories. Nous pourrions configurer cela pour être une valeur initiale d'un tableau vide, ou encore mieux, nous pouvons remplacer cela par un nouvel ensemble. Un ensemble est une collection de valeurs, et tout comme un tableau, nous pouvons les boucler aussi. Mais la différence est qu'il n'acceptera que des valeurs uniques. Ce sont des idéaux dans certaines de nos cartes ont la même catégorie, donc nous ne voulons pas que ces données soient dupliquées. En outre, un objet set est JavaScript régulier et rien de lié à vue JS. Ensuite, nous pouvons créer une fonction appelée getUniqueCategories. Plus de fonctions dans la composition, elles peuvent également être écrites dans n'importe quel autre type JavaScript valide, comme les fonctions fléchées, si vous préférez. Au fur et à mesure que cette fonction sonne, cela va être responsable de l'assignation de toutes nos catégories à cette variable. Donc, pour commencer, on va prendre toutes les cartes. En fait, nous avons juste besoin d'assigner cela à des cartes plutôt que notre tableau, et ensuite nous pouvons les boucler avec ForEach comme une fonction et chaque élément stockera cela dans la variable appelée carte. N' oubliez pas que chaque carte à l'intérieur de notre fichier de données avait la propriété de ces catégories. Donc, nous allons créer une deuxième boucle où nous sélectionnons notre carte, puis les catégories, puis une deuxième boucle avec ForEach, qui prend dans la catégorie. Ensuite, nous voulons pousser cette catégorie à UniqueCategories. Maintenant, si UniqueCategories était un tableau, nous pourrions utiliser la méthode push JavaScript. Mais puisque nous avons configuré cela comme un ensemble, nous devons utiliser la méthode add passant dans la catégorie. Ensuite, en dehors de notre fonction, nous pouvons connecter cette console pour tester cela. Cela nous laisse maintenant avec notre fonction, mais maintenant, nous devons appeler cela le code à exécuter. Donc, pour ce faire, nous pouvons ajouter ceci pour attendre crochet de cycle de vie OnMounted où nous lui transmettons le nom de la fonction. Lorsque vous utilisez le crochet de cycle de vie, sorte que vous avez le même nom que nous avons utilisé précédemment tel que monté, mais pour la composition, nous ajoutons le préfixe on. En outre, lorsque vous utilisez l'une de ces fonctionnalités comme celle-ci, nous devons maintenant les importer individuellement à partir de la bibliothèque vue. Ainsi, nous pouvons importer, l'importation nommée le crochet de cycle de vie OnMounted à partir de la bibliothèque vue. Essayons cela et ouvrons les outils de développement du navigateur dans la console. Ici, nous voyons notre ensemble avec 11 valeurs. Ouvrons ça, et nous verrons 11 valeurs uniques. Donc tout est bon. Nous avons maintenant ce dont nous avons besoin, mais il serait également utile d'avoir une catégorie pour toutes les cartes aussi, et nous pouvons également l'ajouter dans. Donc, en haut de notre fonction, notre boucle accèdera également à nos UniqueCategories, appelez la méthode add, puis nous allons ajouter la catégorie all, actualiser, nous avons maintenant 12 valeurs, qui inclut également tous les catégorie aussi. Enfin, nous pouvons revenir de la configuration de toutes les valeurs que nous voulons maintenant rendre disponibles pour utiliser dans notre modèle. Ce sera un objet, et la seule chose dont nous avons besoin pour revenir à notre modèle est UniqueCategories. Donc, ajoutez ceci, passez à notre modèle, nous pouvons supprimer notre titre de niveau 1 et placer dans une liste non ordonnée où nous allons parcourir toutes ces catégories. Donc, la classe de la grille wrapper, nous allons l'ajouter bientôt pour notre CSS, l'élément de liste, qui aura la classe de l'élément de catégorie. Nous pouvons également passer en v-for pour parcourir tous nos articles. Nous allons donc parcourir la catégorie dans les catégories comme dans une clé. Puisque nous utilisons set, chacune de nos catégories est unique. Donc, nous pouvons également utiliser cela comme une clé. Entre l'élément de liste, nous pouvons créer ceci dans un lien en passant le lien de routeur. Cela prend l'invite à et en passant tout l'objet où le nom du lien va être catégorie, nous avons mis en place dans notre fichier d'index de routeurs, nous allons regarder, c'est juste ici. En fait, nous devons utiliser un C majuscule pour ce nom. En outre, passez dans notre objet de paramètres à l'endroit où la catégorie va être égale à ou catégorie de notre boucle v-for. Donc, cela va maintenant lier à la catégorie barre oblique avant puis barre oblique avant le nom de notre catégorie unique aussi. Ce lien nécessite également du texte entre le composant de liaison du routeur. Donc en passant notre catégorie entre les accolades doubles. En fait, cela veut juste être des catégories uniques. C' est bien le nom que nous revenons de la composition. Puisque nous passons maintenant des paramètres à cette route, nous devons également parcourir le fichier d'index des routeurs et ajouter également un segment dynamique appelé catégorie. Donc maintenant, si nous actualisons le navigateur, nous ne voyons rien à l'écran. Maintenant, cela semble étrange parce que nous savons que nous avons les catégories parce que nous les avons connectées à la console juste ici et nous avons vu 12 valeurs uniques. Eh bien, la raison pour laquelle cela se produit est à cause du crochet OnMounted. Au début de cette vidéo, nous avons mentionné que la configuration est exécutée avant la création du composant. Mais onMounted est appelé après cela. Cela signifie que nous passons initialement UniqueCategories juste ici comme un ensemble vide. Initialement, c'est la valeur qui est retournée à notre modèle. Donc, nous sommes en boucle à travers une valeur vide. Cela signifie essentiellement que nous devons appeler notre fonction getUniqueCategories avant cette phase montée. Une option consiste à supprimer le crochet OnMounted et à l'appeler comme une fonction JavaScript régulière. Puisque nous n'utilisons plus onMounted, nous pouvons également commenter cela et aussi le navigateur, actualiser cela, nous voyons maintenant nos UniqueCategories. Si nous cliquons sur l'un de ces éléments, nous voyons notre composant de catégorie, puis nous le prenons à l'URL correcte. Ou bien, si nous n'avions pas besoin d'appeler cette fonction à tout moment, nous pouvons également déplacer le wrapper de fonction et laisser le code s'exécuter à l'intérieur de la configuration. Sauvegardez ceci, et sur notre page d'accueil, cela fonctionne également exactement la même chose. La possibilité d'ajouter du code comme celui-ci pour s'exécuter sur la configuration signifie avec la composition, nous n'avons plus besoin de créer avant et aussi des crochets de cycle de vie créés. Ces deux mesures ont maintenant été supprimées en faveur de cette approche. 92. Types de référence primitifs et de référence: Pour vous aider à mieux comprendre la réactivité, nous allons d'abord examiner la différence entre les types primitifs et de référence en JavaScript. Si vous êtes déjà à l'aise avec la différence, vous pouvez passer à la vidéo suivante. Si ce n'est pas le cas, cette vidéo vous aidera à vous préparer pour les prochaines vidéos. Vous n'avez pas besoin de taper ceci ou de suivre ce codage, mais il y a quelque chose que je veux vous montrer pour vous aider à mieux comprendre ce que nous allons regarder, et pour voir cela, nous allons passer à l'app.vue, puis descendre à nos scripts. Ce que je suis à propos de vous montrer, c'est de passer un objet simple comme accessoire. A l'intérieur de cette app.vue, nous allons créer une section de données. Cela ressemblera assez à ce que nous avions dans les premières vidéos. Nous allons juste retourner un nouvel objet avec un utilisateur. Cet utilisateur va créer une propriété name et aussi, un ID utilisateur. Jusqu' au modèle, le seul composant auquel nous devons transmettre les accessoires est cet en-tête d'application, alors passons nos accessoires à cela. L' utilisateur est égal à l'utilisateur. Ceci, et puis nous pouvons passer à ces composants d'en-tête d'application et nous allons généralement faire quelque chose comme ça. Nous allons créer une section de script. Configurez les accessoires. Si comme un objet ou un tableau. Nous allons garder cela simple et simplement passer ceci comme un tableau. Nous accepterons alors peut-être ces accessoires à l'intérieur de la section data, où nous pourrions définir une propriété date telle que l'objet use pour être égale à notre prop, qui est this.user. Maintenant, cela reçoit notre prop utilisateur et stocke cela localement dans les composants afin que nous puissions ensuite modifier cela, peut-être en utilisant un formulaire avec V-model. Faisons cela n'importe où dans nos modèles. Configurez une entrée basée sur le texte. Nous pourrions mettre en place un modèle V, lié à notre objet utilisateur. Allons chercher le nom. Faites-le et nous voyons notre entrée et notre nom comme prévu, mais si nous revenons à notre app.vue où nous avons ces données originales, sortons rapidement ceci. Vous avez besoin de deux accolades accolades placées dans l'utilisateur. Maintenant, nous avons nos données à deux endroits. Nous avons les données originales de notre app.vue. Ensuite, ici, nous avons les accessoires qui ont été copiés à l'intérieur de cet en-tête d'application. Donnons un coup d'envoi à ça. Nous pouvons modifier notre entrée. Ajoutons quelque chose ici à l'intérieur d'ici. Nous voyons dès que nous mettons à jour cet en-tête d'application, que aussi, les données à l'intérieur de l'app.vue parent sont également mises à jour. Maintenant, cela peut sembler un peu étrange parce que nous avons transmis cela comme accessoires, nous avons ensuite pris une copie, et nous devrions maintenant seulement modifier les données de notre en-tête d'application. Normalement, nous nous attendrions à ce que ce comportement se produise uniquement si nous émettions un événement personnalisé pour modifier les données à l'intérieur des parents. Mais cela le fait automatiquement. Jetons un coup d'oeil à un autre exemple de retour dans l'app.vue. L' utilisation de l'objet passera un nom d'utilisateur simple, qui est juste une chaîne simple, et maintenant ouvrir l'en-tête de l'application, nous pouvons également passer cela comme accessoires. Nom d'utilisateur pour être égal au nom d'utilisateur, et également sortir cela à l'intérieur de notre application. Passez à l'en-tête. Passez ceci dans notre tableau. Nous ferons la même chose que notre objet, le transmettrons dans nos données. Le UserNameProp sera égal à this.username. Nous allons également dupliquer l'entrée, le type de texte, et cette fois, nous allons V-model à UserNameProp. Maintenant, si nous essayons de modifier ce nom d'utilisateur, sinon quoi que ce soit, cette fois, il n'y a pas de changements dans les composants parents. Pourtant, si nous faisons cela à notre objet d'origine, nous voyons que les composants parents seront mis à jour. Cela peut sembler étrange au début, mais ce n'est pas une nouvelle fonctionnalité JS. C' est quelque chose lié à JavaScript et aux types de données, qui peuvent être placés en deux groupes et ces groupes sont appelés types primitifs et objets. types d'objets en JavaScript sont considérés comme des fonctions, des tableaux et un objet lui-même. primitives sont des données qui n'est pas un objet et des types de chaîne, booléenne, nombre, undefined, symbole et BigInt. La partie qui nous intéresse est à l'intérieur de cet en-tête d'application, vous aurez les deux accessoires de l'utilisateur, et le nom d'utilisateur, puis nous prenons suffisamment de copies de ces deux valeurs. La différence est que ces deux valeurs entrent dans nos deux groupes. Ce premier est une référence d'objet et le second est une primitive. Ce courant est un type de chaîne et c'est là que réside la différence. Lorsque nous copions une valeur primitive, tout comme nous le faisons, nous copions dans ce nom d'utilisateur, chaque copie possède sa propre valeur unique. Vous pouvez considérer cela comme deux valeurs distinctes, c'est pourquoi lorsque nous mettons à jour notre entrée et notre nom d'utilisateur, l'original n'est pas affecté. Les types d'objets, cependant, comme nous l'avons avec notre utilisateur, se comporteront différemment. Même lorsque nous prenons une copie d' un objet sur les objets qui pointent vers la même valeur en mémoire, même s'ils se trouvent dans des composants et des emplacements différents. Ceci est également connu comme un type de référence puisque toutes les variables font référence à la même chose et c'est pour cette raison que nous voyons le nom d'origine mis à jour. Cela nous laisse avec une question, pourquoi utiliser des choses telles que l'émission pour fournir des mises à jour dans les composants parents ? Pourquoi ne pas toujours passer des types d'objets ? Après tout, cela économiserait beaucoup de code. C' est une question raisonnable et rien ne vous empêche de le faire si vous le souhaitez, en particulier sur un projet plus petit et plus facile à gérer. Cependant, il est généralement recommandé d'éviter cela si possible, car cela peut commencer à prêter à confusion si plusieurs sources mutent le même objet. Une option consiste à faire un clone profond de l'original tout en continuant d'utiliser les techniques telles que l'émission pour modifier uniquement les données à l'intérieur du composant parent. Nous pourrions également aplatir ou réorganiser nos données pour les utiliser comme objets ou nous pourrions restructurer nos accessoires pour ne transmettre que les propriétés de l'objet plutôt que l'objet complet. Une autre option consiste également à transmettre uniquement l'objet en tant que valeur initiale à l'enfant, puis à modifier une autre propriété date sur le parent. Quelle que soit l'option que nous choisissons, la clé est de rendre les mises à jour plus prévisibles et de nous assurer que nous savons quels composants ou quelles méthodes ont changé nos données à un moment donné, plutôt que de deviner quelle référence aux données a causé les mises à jour. Si tout cela est complètement nouveau, cela peut sembler un peu déroutant, mais la chose clé à retenir est une primitive, tout comme une simple chaîne ou un nombre, ressemble plus à une copie indépendante. Mais un type d'objet comme celui-ci pointera toujours vers l'objet d'origine. Maintenant, nous n'avons pas besoin de tout cela dans notre projet, c'est juste pour notre démonstration, donc nous pouvons supprimer tous ces éléments, inclure des entrées dans app.vue Nous n'avons pas besoin ces accessoires et nous pouvons aussi supprimer nos propriétés de données. Cette compréhension des références d'objets et des primitives deviendra plus utile dans les vidéos à venir, où nous chercherons à rendre nos données de composition réactives. 93. Introduction rapide aux proxies: La réactivité libre est créée à l'aide d'une fonction ES6 appelée proxies. Vue 2 utilise une fonctionnalité ES5 appelée Object.DefineProperty, qui a créé les getters et setters pour mettre à jour nos données. Ces mises en garde, l'une d'entre elles était d' une nouvelle propriété de données a été ajoutée après le chargement de l'application, elle ne devient pas automatiquement réactive. Nous pourrions modifier les propriétés de données existantes, mais pas en ajouter dynamiquement de nouvelles. Ceci est résolu avec des proxies. Un proxy est comme un wrapper pour un objet. Ce wrapper nous permet de l'intercepter et d'apporter des modifications avant d'effectuer une mise à jour. Les procurations peuvent être un sujet complexe, mais je vais vous donner un aperçu rapide pour que vous ayez une compréhension de base. Dans ce composant App.vue, ajoutons un exemple simple à notre script. Pour intercepter un objet et apporter quelques modifications, nous avons d'abord besoin d'un objet avec lequel travailler. En dehors de notre valeur par défaut d'exportation, je veux créer un état appelé constant, et le configurer pour être un objet, en passant une propriété utilisateur et aussi une occupation. Ensuite, nous pouvons configurer un proxy avec un nouveau proxy, capital P, qui prendra les cibles et l'objet gestionnaire. Cela peut constante appelée proxy. Cette cible que nous voyons ici est l'objet original que nous voulons proxy. Nous pouvons nommer ceci comme état, tout comme notre objet juste au-dessus, c'est la cible que nous voulons intercepter, puis un gestionnaire qui est un objet à configurer ou nous voulons faire à cet objet cible original. Configurez aussi cela aussi, gestionnaire contre, et donc ce serait un objet. Après que cela crée un journal de console, je suis à nouveau, va sortir le contenu en proxy. Rappelez-vous, c'est notre point proxy vers l'objet original que vous transmettez juste ici. C' est notre état. Cela nous donne maintenant accès à toutes ces propriétés telles que l'utilisateur et aussi la profession. abord, essayons l'utilisateur, allons avec le navigateur, nous pouvons aller dans la console, ouvrir ceci. Maintenant, nous voyons le nom d'utilisateur de Chris, le métier. On y va. Comme vous pouvez vous y attendre ici, nous voyons l'utilisateur original sur l'occupation originale. Puisque ce gestionnaire n'est pas encore configuré pour créer des modifications, son gestionnaire a un certain nombre de fonctions que nous pouvons utiliser. Ceux-ci sont parfois appelés accessoires. L' une de ces fonctions est get. Ceci est utilisé pour obtenir l'une de nos valeurs de propriété. Passez les cibles et l'accessoire, puis nous pouvons faire quelques journaux de console pour voir exactement quelles données nous avons pour chacune d'entre elles. Va chercher la cible. Alors celui-ci est pour l'accessoire. Enregistrez ceci et actualisez la console. Tout d'abord, nous voyons les cibles, et si nous ouvrons cela, nous voyons l'utilisateur et aussi l'occupation. Puisque cette cible est l'objet original, après cela, nous allons voir l'accessoire, qui est l'occupation, et cet accessoire est la propriété individuelle que nous sélectionnons, dans notre cas, nous sélectionnons l'occupation. Cela indiquera toute occupation à l'intérieur de la console. La cible est l'objet d'état global. Ensuite, le prop est la propriété individuelle de cet objet. Maintenant, nous avons accès à toutes ces informations. Nous pouvons maintenant intercepter ces valeurs et leur faire ce que nous voulons. Par exemple, nous pourrions retourner l'accessoire d'origine, qui est ToupPerCase. Enregistrer et actualiser. Nous voyons l'occupation qui est maintenant majuscule. C' est ainsi qu'un proxy fonctionne. Il prend la cible ou l'objet original, puis il interceptera cet objet et saisira l'une des valeurs. Nous pouvons faire ce que nous voulons pour ces valeurs. A côté de gets, il y a aussi un gestionnaire de fonctions, un tel ensemble, qui est utilisé pour définir les nouvelles valeurs de propriété. Tout ce que nous voyons ici est juste un JavaScript régulier. Comment tout cela fonctionne-t-il avec un Vue.js ? Eh bien, tout ce que nous ajoutons à une section de données est automatiquement converti en proxy. Tout ce que nous ajoutons dans une section de données ici sera automatiquement converti pour être un proxy de l'objet original. Tout comme ce gestionnaire get juste ici, Vue ajoutera également sa propre fonction de gestionnaire, c'est-à-dire proxy, qui a des getters et setters pour permettre à Vue.js de suivre et de mettre à jour les données chaque fois qu'il y a un changement. C' est ainsi que cela fonctionne pour toutes les propriétés de données. Mais qu'en est-il des variables régulières que nous créons avec la composition ? Eh bien, pour ce cas d'utilisation, Vue fournit également quelques rappeurs pour ajouter de la réactivité. Nous allons jeter un coup d'oeil à ces vidéos à venir. 94. Utiliser Reactive & isReactive: Pour lancer les choses pour cette vidéo dans le fichier app.vue, nous pouvons supprimer toute la démo proxy de la dernière vidéo. Supprimez tout ce qui est jusqu'à cet objet de date. Maintenant, nous allons jeter un oeil sur la façon dont nous pouvons ajouter réactivité aux données de notre API de composition. Nous avons des propriétés de données que nous utilisons jusqu'à présent sur l'objet options. Par défaut, tout est réactif. Ce qui signifie que si nous apportons des modifications à ces données, toutes les autres parties de notre application qui s'appuient sur ces données seront également mises à jour dans V3. Comme mentionné dans la dernière vidéo. C' est parce que VGS convertira ces propriétés en proxy lors de l'utilisation de la composition. Maintenant, ces variables que nous déclarons ne sont pas automatiquement réactives, tout comme lorsque nous créons des variables avec JavaScript régulier. Ce sont ceux que vous avez ajoutés à l'intérieur de la fonction de configuration à l'intérieur de votre application d'accueil. Tout comme les catégories uniques et toutes les cartes. You free est beaucoup plus modulaire que V version 2. Nous devons d'abord importer le paquet de réactivité, que nous devons faire à partir de la bibliothèque de vues. Cela signifie que nous importons uniquement la pièce que nous utilisons réellement dans notre application. Voyons comment cela fonctionne dans la composition. A l'intérieur de cette maison d'application et aussi à l'intérieur de la fonction de configuration. Nous pouvons créer un objet JavaScript pour contenir certaines propriétés de données. Appelons ces données, et définissons cela égal à un objet. Ce nom de données est complètement différent et n'est pas lié à une propriété de dates régulières. A l'intérieur, nous pouvons ajouter quelques propriétés à cela et nous irons pour le nom et aussi une occupation. Maintenant, à la minute, nous n'avons rien à mettre à jour cet objet de données. Pour simuler une mise à jour et vérifier cela, nous allons créer une fonction setTimeout juste en dessous. Nous voulons que cette fonction fonctionne toutes les trois secondes, sorte que vous puissiez passer en 3 000 millisecondes. Ensuite, nous allons vouloir faire pour accéder à l'objet de données, puis il a changé les données à l'intérieur, telles que la profession, ou accéder aux données, la profession. On peut fixer ça à la retraite. Vous vérifiez si cela fonctionne. Nous pouvons renvoyer nos objets de données de notre composition. Cela signifie maintenant que si nous faisons défiler jusqu'au modèle, nous pouvons maintenant l'utiliser à l'intérieur de notre code. Puisqu' il s'agit d'un exemple, nous pouvons le placer n'importe où. C' est accéder à nos données, Dots occupation, Actualiser le navigateur. Nous voyons le texte d'un développeur web. Si nous attendons trois secondes, nous ne voyons aucune mise à jour de ce code. Même si nous devrions changer cela en retraite après trois secondes. Même si nous changeons cela après trois secondes, c'est juste avec JavaScript régulier, l'interface utilisateur ne sera pas mise à jour. Pour cela, nous devons dire à VGS que nous voulons que ces données soient réactives. Cette première technique que nous allons jeter un oeil pour le faire est d'importer, le paquet réactif. abord, comme je l'ai mentionné précédemment, la vue est modulaire, donc nous devons importer cela à partir de la bibliothèque de vues. C' est ce qu'on appelle réactif. Nous pouvons ensuite utiliser ce paquet réactif comme un wrapper pour toutes nos données. Nous allons découper cet objet en réactif. Ensuite, à l'intérieur, nous pouvons coller dans notre objet, rafraîchir le navigateur. Maintenant, après trois secondes, notre interface utilisateur est maintenant mise à jour avec ces nouvelles données en utilisant ce wrapper réactif. Toute donnée qui se trouve à l'intérieur de laquelle change ou est mis à jour, il notifiera alors toute autre partie de l'application qui s'appuie sur ce. Dans notre cas, l'Occupation. Cela se produit parce que la vue prendra une copie réactive de cet objet d'origine, puis elle l'enveloppera dans un proxy. Reactive est également utilisé dans les coulisses pour convertir des objets lorsque nous utilisons les propriétés de données avec l'API d'options. Si vous souhaitez effectuer une vérification pour voir si un objet était réactif. Nous avons également accès à Est réactif à. Cela peut également être importé à partir de la bibliothèque de vues. Est réactif peut maintenant être utilisé pour vérifier si un objet est un objet JavaScript normal, ou s'il s'agit d'un proxy réactif. Vous voyez que celui-ci crée un journal de console, l'accès est réactif. Ensuite, nous pouvons transmettre nos données, ouvrir les outils de développement dans la console. Nous pouvons voir que c'est vrai. Cependant, bien qu'à l'intérieur de notre configuration, nous avons également accès à nos cartes qui utilisent un objet régulier. Au lieu de cela, si nous plaçons dans toutes les cartes, actualiser, nous voyons maintenant le résultat de false puisque toutes les cartes sont un objet JavaScript régulier plutôt qu'un proxy réactif. C' est ainsi que nous pouvons utiliser réactif. View fournit également une fonctionnalité jamais réactivité appelée Raf, que nous allons maintenant jeter un coup d'oeil. 95. Ajouter la réactivité avec Ref: objets réactifs, comme celui-ci, sont idéaux si nous avons plusieurs propriétés, tout comme nous le faisons ici, surtout s'ils sont également liés et que nous voulons les regrouper ensemble. Mais qu'en est-il des valeurs plus simples comme les chaînes ou les nombres ? Si nous avions juste une seule valeur comme une primitive, disons un utilisateur, qui était égal à une chaîne, nous pourrions également placer notre propriété utilisateur sur un objet, juste comme celui-ci, puis utiliser réactif, ou pour un seul comme celle-ci, il peut être plus pratique d'utiliser une référence. Maintenant, pour voir un ref en action, nous devons également importer cela à partir de la bibliothèque de vues, et puis tout comme réactif ci-dessus, nous utilisons également ref comme wrapper, donc quand nous pouvons découper cela et envelopper cela à l'intérieur de notre ref. Pour l'utiliser dans notre modèle, nous devons également retourner cela de la configuration, et ajoutons ceci à notre modèle, et définissons notre utilisateur pour être égal à cet utilisateur que nous venons de retourner. D' accord. Donc, nous voyons maintenant notre utilisateur à l'intérieur du navigateur, mais nous devons également tester la réactivité aussi. On peut le faire à l'intérieur de notre délai d'attente. Au lieu de mettre à jour nos données, nous pouvons maintenant mettre à jour le nom d'utilisateur. Donc, ceci et actualiser le navigateur. Nous voyons une erreur que nous essayons de mettre à jour l'utilisateur, mais il s'agit d'une constante. Donc, c'est assez juste. Nous pouvons changer cela pour être laissé et voir ce qui se passe, et après trois secondes, nous ne voyons aucune mise à jour de ce nom d'utilisateur. Maintenant, cela peut sembler étrange, mais il y a une raison pour laquelle cela se produit. Dans les coulisses, notre valeur utilisateur, que nous avons ici, est également convertie en un objet réactif, et pour accéder à la valeur de notre objet, elle nous donne une propriété appelée valeur, et nous devons faire référence à chaque fois que nous veulent accéder à notre utilisateur. Donc, pour accéder au nom à l'intérieur d'ici, nous devons accéder à user.value. Enregistrez et actualisez le navigateur. Trois secondes plus tard, notre utilisateur est maintenant mis à jour. Cette propriété de valeur doit toujours être utilisée lorsque vous travaillez à l'intérieur de la section JavaScript. Cependant, dans le modèle, juste ici, comme nous pouvons le voir, nous n'avons pas besoin de l'utiliser à l'intérieur du modèle. Lorsque vous accédez à une valeur de référence à l'intérieur du modèle, la valeur est automatiquement déballée pour nous. Maintenant, avec ref et réactif, cela nous laisse maintenant deux options quand il s'agit de rendre les valeurs réactives, et de toute façon, nous finissons avec un objet réactif. L' utilisation exacte pour l'un ou l'autre est assez flexible, à la fois en règle générale. J' utilise réactif quand je veux regrouper plusieurs propriétés ou valeurs dans un objet comme la syntaxe, puis utiliser ref, juste comme ceci, et nous allons une seule valeur autonome telle qu'une chaîne, un nombre, ou même un seul objet aussi. Mais encore une fois, le cas d'utilisation de ces deux est assez flexible et c'est à nous en tant que développeur que nous préférons utiliser dans notre projet. 96. Destructurer et toRefs: Nous avons des objets réactifs comme nous l'avons ici. Parfois, vous pouvez vouloir retirer une seule valeur de cet objet. Par exemple, si j'avais un e-mail, eh bien, ce cas d'utilisation et surtout si nous avons besoin d'accéder à plusieurs valeurs, nous pouvons souvent utiliser la destruction JavaScript. Tout comme ça, nous pourrions configurer une constante appelée email et extraire ceci de notre objet de données. Cela va maintenant extraire la propriété email et l'enregistrer dans la variable email. Nous pourrions également accéder à plusieurs valeurs si nous voulions aussi le nom juste comme ça, nous pourrions accéder à l'e-mail et aussi à ces variables de nom aussi. C' est assez commun et c'est juste du JavaScript régulier. Mais voyons ce qui se passe lorsque nous essayons de rendre cela à notre modèle. abord, nous devons retourner cela de notre objet, et jusqu'à notre modèle. abord, changeons ceci pour être notre objet de données complet, puis après cela, notre e-mail. Encore une fois, nous pouvons faire défiler jusqu'à notre délai d'expiration défini et simuler une mise à jour en modifiant nos données. Ce que nous allons faire ici est d'accéder à notre objet de données et de mettre à jour la propriété e-mail. Ça peut être n'importe quelle chaîne. Vers le navigateur et actualiser. Trois secondes plus tard, notre objet de données d'origine que nous avons ici, est maintenant mis à jour. Cependant, notre copie qui est stockée à l'intérieur de cette propriété e-mail est toujours la valeur d'origine. Cela arrive parce que lorsque nous détruisons des valeurs d'un objet comme celui-ci, il perdra toute sa réactivité. qui signifie que les mises à jour que nous faisons l'objet d'origine ne seront pas transmises à cette variable. Si nous voulions encore utiliser la structuration comme celle-ci, nous nous accrocherons toujours à la réactivité. Nous pouvons envelopper cet objet de données avec quelque chose appelé TOREFS. Ouvrez l'importation, nous allons l'importer, puis l'utiliser comme un wrapper à nos données. Essayons ceci, enregistrez ceci, et actualisons le navigateur. Après trois secondes, notre e-mail sur l'objet de données est mis à jour, ainsi que la copie aussi. Ce que nous faisons ici avec Torefs est de convertir efficacement toutes ces propriétés sur notre objet pour utiliser ref. Cela signifie que nous pouvons garder la réactivité de sorte que si l'une de ces données change, notre copie sera également mise à jour. 97. Lecture seule: Parfois, nous pouvons avoir besoin d'attendre pour contrôler exactement quels composants peuvent mettre à jour nos données. Si nous avons un objet réactif qui a été partagé entre plusieurs composants, nous pouvons vouloir qu'ils lisent tous les données ou autorisent seulement certains d'entre eux à les mettre à jour. Pour cela, nous avons disponible en lecture seule, qui prend un objet. Il peut s'agir d'un objet JavaScript normal ou réactif, qui utilise ref ou réactif, puis renvoie un proxy en lecture seule à l'original. Encore une fois, nous devons importer cela à partir de la bibliothèque vue. Dans l'AppHome, dans notre déclaration d'importation, passez en lecture seule. Ensuite, ce que nous allons faire est de prendre une copie en lecture seule de nos données, stocker ceci dans une constante appelée ReadOnlyData. Ensuite, comme nous l'avons fait avec réactive et avec isReactive, nous l'utilisons ensuite comme un wrapper, passant en lecture seule, et ensuite nous voulons envelopper nos données d'en haut. Nous avons maintenant ces nouvelles données, que nous pouvons revenir de notre configuration et ensuite nous pouvons sortir cette boucle tout en haut. Allons nettoyer ça. Tout d'abord, nous allons taper en lecture seule, puis nous afficherons notre objet en lecture seule sur la propriété e-mail. Aussi l'utilisateur, afin que nous puissions tester l'objet original, fonctionne toujours. Nous pouvons sortir le data.email. Jusqu' à notre setTimeout où nous simulons une mise à jour. A l'intérieur d'ici, nous sommes toujours en train de mettre à jour l'objet réactif d'origine et certainement la nouvelle adresse e-mail. Alors allons dans le navigateur et actualisons et voyons ce qui se passe. Après trois secondes, la version en lecture seule et l'original ont été mises à jour. Cela signifie donc que la copie est toujours réactive. Voyons ce qui se passe si nous essayons de mettre à jour la copie dans le Timeout plutôt que les données. Nous allons changer ceci pour être ReadOnlyData. Enregistrez ceci et actualisez. Trois secondes plus tard, rien ne se passe. Cette mise à jour échouera maintenant car la copie est en lecture seule, ce qui nous permet de protéger toutes les données que nous ne voulons pas modifier dans nos composants, ou les données que vous voudrez peut-être contrôler de plus près. 98. Computed: Les propriétés calculées sont également disponibles dans la composition et nous pouvons maintenant les utiliser pour filtrer nos cartes par catégorie sélectionnée. Plus dans les composants AppHome.vue, haut dans le modèle, nous avons un lien qui lie à notre catégorie, puis barre oblique avant nos paramètres. En fait, cela peut être raccourci et voir la fois le même nom et aussi sur la page d'index de notre routeur. Nous avons déjà configuré un chemin pour gérer cela, puis affichez notre composant Catégorie. C' est maintenant à l'intérieur de cette catégorie que nous pouvons maintenant gérer, en filtrant ces cartes par catégorie cliquée. Juste en dessous du modèle, nous allons créer une section de script, puis nous allons créer une section de configuration qui va gérer tout notre code de composition. Nous devons accéder à toutes les cartes disponibles pour pouvoir filtrer. Nous pouvons aussi le rendre réactif en important ref. abord, nous allons importer toutes nos cartes et nous les importerons à partir d'une barre oblique à points et dans nos données. Comme cela sera réactif, nous allons également importer la référence de la bibliothèque vue vers le bas vers la configuration. Nous pouvons maintenant importer nos cartes dans vue JS, stocker ceci à l'intérieur d'une constante appelée AllCards, comme dans la ref comme un wrapper, et nous allons envelopper nos cartes. Juste comme mesure temporaire, nous allons mettre en place une constante appelée catégorie. Cela va stocker dans la catégorie qui utilisent les clics sur tels que Voyage, Halloween, ou anniversaire. Mais nous allons bientôt obtenir cela à partir des paramètres d'URL. Maintenant, nous allons définir ça pour être tout. Ensuite, nous pouvons configurer une propriété calculée qui surveille cette catégorie et quand elle change, elle retournera ensuite les cartes filtrées vers le bas. Nous configurons cela comme une variable ou une constante et une fois que j'appelle mon dans CardsByCategory, puis nous pouvons attribuer cela à une valeur calculée. A l'intérieur, nous passons dans une fonction qui fonctionnera chaque fois que les données changent. Puisque nous utilisons maintenant calculé, cela doit également être importé à partir de la bibliothèque vue. Maintenant, à l'intérieur, nous pouvons retourner l'une des deux valeurs. Tout d'abord, si la catégorie est égale à tous, tout ce que nous voulons faire est de retourner toutes les cartes disponibles. Nous ne voulons pas effectuer de filtrage. Nous allons d'abord vérifier si la catégorie est égale à tous. Si c'est le cas, nous retournerons ensuite les données, qui sont les AllCards. Comme il s'agit d'une référence réactive, nous devons également renvoyer la valeur. Si cela n'est pas égal à tous, cela signifie que nous avons cliqué sur une catégorie et que nous avons un filtrage que nous devons faire. Au lieu de cela, nous retournerons AllCards.Value, appelez la méthode de filtre JavaScript. Cela va ensuite parcourir toutes nos cartes et ensuite nous allons exécuter une fonction pour chacune d'elles. Cela ne retournera que la version filtrée de toutes les cartes. Maintenant, nous devons passer la carte individuelle et effectuer un test pour chacun. Le test que nous allons ajouter est de parcourir la carte, sélectionner les catégories, puis nous voulons vérifier si la catégorie inclut une certaine valeur. La catégorie que nous voulons vérifier est cette catégorie juste ici. Juste pour récapituler, nous allons parcourir toutes nos cartes et ensuite nous allons retourner une version filtrée. La façon dont nous filtrons est en sélectionnant chaque carte individuelle en boucle à travers les catégories et en vérifiant si elle inclut la catégorie sélectionnée ci-dessus. Juste avant notre fermeture, mettez une accolade. Nous rendrons ensuite ça. Nous pouvons l'utiliser dans notre modèle, jusqu'au sommet. À l'intérieur de l'en-tête Category, ce que nous allons faire est de sélectionner le routeur ou l'itinéraire actuel. Ensuite, lorsque nous cliquons sur l'un de ces, nous pouvons ensuite prendre en catégorie barre oblique avant et ensuite nous pouvons accéder aux paramètres individuels. Sélectionnez les paramètres et celui qui nous intéresse est la catégorie. Assurez-vous que cela est orthographié correctement. Voir anniversaire, mari, femme. Ensuite, ci-dessous, nous pouvons vérifier notre propriété informatique fonctionne en sortant les CardsByCategory. Tout d'abord, nous allons cliquer sur l'un de ces liens, nous allons voir une liste de toutes nos cartes. Maintenant, nous ne voyons pas la version filtrée juste ici parce que nous avons défini la catégorie pour être tout. Nous changeons cela pour être toute autre valeur telle que l'anniversaire. Nous ne devrions maintenant voir que les cartes qui ont été filtrées par catégorie d'anniversaire. On peut en essayer un de plus. C'est par femme, rafraîchir, et on peut voir la catégorie de la carte numéro 1. Inclut la catégorie de femme. Maintenant, nous savons que ça marche. Passons maintenant au modèle. Je vais mettre ceci dans une liste non ordonnée, une classe pour le CSS qui va être grille et ceci est appelé wrapper. Ensuite, un élément de liste qui inclura la boucle for, qui sera carte dans CardsByCategory, une clé. Chacune de nos cartes a accès à une pièce d'identité unique. C' est une clé idéale à utiliser. Entre cet élément de liste, nous pouvons également permettre à l'utilisateur de cliquer sur cette carte et ensuite nous la transmettons à l'écran d'édition. Cela nécessitera un lien de routeur. Maintenant, nous allons garder les choses simples et nous allons sortir la card.name. Il a également besoin de la propriété à. Nous allons juste lier ceci à la page d'accueil. Sauvegardez sur le navigateur, cliquez sur l'un de ces, puis nous le ramenons à la page d'accueil. Maintenant, tout cela fonctionne et un peu plus tard, nous reviendrons à cela et nous allons lier ces cartes à l'écran d'édition. 99. Fonctions de composition autonomes: À l'intérieur de ce fichier category.view, ce code de composition que nous avons écrit jusqu'à présent ne résout qu'une des préoccupations, qui est que nous pouvons maintenant regrouper le code lié. Par exemple, nous avons cette variable de catégorie, et nous l'avons organisée et placée à côté de notre section calculée, qui repose sur cette variable. Avec les options API par exemple, cette catégorie serait une propriété de données. Ensuite, nous pouvons avoir cette section calculée beaucoup plus bas dans notre composant. Un autre avantage que la composition vise à résoudre est la réutilisabilité et l'organisation. Même si nous n'avons pas encore écrit beaucoup de code pour ce projet, nous avons déjà vu quelques doublons. Par exemple, ici, dans la catégorie, nous importons des cartes, puis les affectons à cette constante. Dans la maison de l'application, nous importons les cartes, puis un peu plus bas, nous faisons exactement la même chose juste ici. Pour vous aider, nous pouvons extraire notre code de composition en fonctions autonomes. Ceux-ci peuvent également être placés dans leurs propres fichiers distincts. Pour voir cela irait sur la barre latérale, dans la source, eh bien nous allons créer un nouveau dossier appelé composables. Ce nom de dossier est totalement à nous, mais il est courant d'enregistrer ce composables nommé. Ensuite, à l'intérieur, nous allons créer un nouveau fichier JavaScript. Nous voulons que le nom du fichier soit descriptif, et encore une fois, le nom est totalement à nous de décider. Mais la convention de nommage commune jusqu'à présent semble être d'avoir le préfixe d'utilisation, donc nous aurons des noms pour nos projets tels que UseCards et aussi UseCategories. Celui-ci sera pour UseCard, et c'est un fichier JavaScript régulier, donc nous utilisons l'extension the.js. A l'intérieur de ce fichier, nous allons exporter la fonction par défaut. Je veux donner le même nom que notre fichier, qui est UseCard. Cela signifie maintenant que nous pouvons extraire tout le code de composition de n'importe laquelle de nos sections de configuration et le placer dans cette fonction. Nous pouvons ensuite l'importer et avoir accès à toutes les données et à toutes les fonctions que nous plaçons à l'intérieur. Pour l'instant, nous allons sélectionner AllCards, copions ceci, puis collez-le dans notre fonction. Nous devons également avoir accès à nos données et importer également la référence de la bibliothèque vue. Tout comme ici, nous allons apporter ces deux endroits d'importation en dehors de la fonction et nous n'avons pas besoin de calcul. Nous ne reprendrons aucune des sections liées à la catégorie parce qu'elles vont entrer dans leur propre composable séparé. Tout ce fichier est responsable de faire est de récupérer les cartes initiales de notre fichier de données, puis tout comme quand nous l'utilisons dans nos composants, nous allons retourner un objet. Cela va donner à nos composants l'accès à toutes les données, toutes les variables, toutes les méthodes que nous avons dans cette fonction. C' est assez simple, tout ce que nous avons c'est AllCards, donc nous pouvons le retourner. Pour le moment, ce fichier ne fait rien et il est juste assis là et nous pouvons l'importer quand nous en avons besoin. Mais ensuite, créons un nouveau fichier, qui est pour le code lié à notre catégorie. Par conséquent, nous allons lui donner un nom descriptif appelé UseCategory, avec l'extension js. Configurez notre export par défaut avec le même nom que le fichier. Cela a également besoin de retourner quelque chose aussi. Pour recommencer dans l'accueil de l'application, ce composant obtient une liste de toutes nos catégories qui juste ici. Ensuite, dans la catégorie, nous obtenons les cartes individuelles pour cette catégorie sélectionnée. Il serait logique d'extraire tout ce code lié à cette catégorie à partir de ces deux fichiers, puis de le placer dans notre nouveau composable. Je me dirige vers l'UseCategory et pour commencer, nous allons avoir besoin d'accéder à toutes nos cartes qui sont à l'intérieur de ces UseCards. Rappelez-vous que nous avons exporté ceci et que nous le renvoyons de notre objet. Maintenant, nous pouvons importer ceci dans notre composable, qui était UseCard. Le chemin d'accès au fichier est. /UseCards, et c'est l'une des bonnes choses à propos des composables. Nous pouvons réutiliser les données entre chacun de nos fichiers. Ici, nous avons effectivement importé la fonction complète de UseCards. Maintenant, nous voulons retirer la variable AllCards. Maintenant, nous allons stocker ceci dans une constante, c'est AllCards, et ensuite nous allons extraire ceci de notre fonction UseCards. Nous pouvons maintenant commencer à apporter tout notre code lié à la catégorie , sauf si nous allons dans l'accueil de l'application. Nous avons déjà nos sections AllCards, alors prenez les UniqueCategories et aussi la boucle juste en dessous. Nous pouvons découper cela puis le placer juste en dessous de AllCards. Ensuite, nous devons également retourner un UniqueCategories. Avec cela maintenant extrait dans son propre fichier, nous pouvons revenir à l'accueil de l'application ou à tout autre composant qui a besoin de cette information et l'importer pour l'utiliser. Goodness app home a un peu d'exemple de code, donc nous pouvons supprimer tout cela de la fonction de configuration. On n'a pas besoin de AllCards. Je vais supprimer nos déclarations de retour pour l'instant. Nous n'avons pas besoin des données, donc nous supprimons toutes ces importations. L' importation dont nous avons besoin maintenant est notre UseCategory. Ceci importe notre fonction UseCategory, et le chemin du fichier était la source, qui est le symbole at. Nous allons aller dans le dossier composable, puis dans UseCategory, et nous assurer que cela est orthographié correctement, UseCategory. Cette fonction UseCategory exporte nos UniqueCategories, et maintenant nous pouvons aller dans notre section de configuration et installer à l'intérieur d'une constante. C' est extraire UniqueCategories de cette fonction UseCategory. Rendre cela disponible dans notre modèle, nous devons également retourner cela et ouvrir notre modèle. Rappelez-vous, nous allons utiliser cette UniqueCategories à l'intérieur de cette boucle v-for. Essayons ceci, actualisons, maintenant nous ne voyons rien dans le navigateur, alors jetons un oeil à l'intérieur des outils de développement dans la console. Nous voyons que Allcards.foreach n'est pas une fonction. Maintenant, cela se passe dans notre fichier useCategory.js. Ici, nous essayons de faire une boucle sur AllCards, et cela est jeté en flèche parce que lorsque nous avons écrit la première section, constante AllCards ne faisait pas usage de refs. Mais ici, à l'intérieur de AllCards. Si nous passons à la section où cela est créé, nous ouvrons ceci dans une référence, cela signifie maintenant que nous devons accéder à AllCards.Value, et cela devrait maintenant résoudre le problème. Nous voyons toujours une flèche ne peut pas lire la propriété, e-mail et cela est probablement à partir du modèle. Pourtant, nous pouvons également supprimer cela, suffit d'en essayer plus, et il y a toutes nos catégories maintenant de retour à l'écran. Mais cette fois à partir d'une fonction de composition. 100. Mini défi : déplacer les cartes par catégorie: Bien que tout ce nouveau code puisse sembler beaucoup à prendre, mais comme pour la plupart des choses, il faut juste un peu de pratique. C' était aussi déroutant pour moi au début quand j'ai commencé à apprendre tout ce nouveau code de composition. Mais à la fin de ce projet, nous aurons beaucoup plus de pratique dès maintenant, où nous allons également passer sur le code de cette catégorie.vue. Ce que je voudrais que vous fassiez est de regarder cette section de configuration, nous allons supprimer tout le code lié à la catégorie et déplacer ceci vers notre composable UseCategory. Le code connexe dont nous avons besoin est cette constante. Nous aurons également besoin des cartes par catégorie. Vous devrez également importer la section calculée et déplacer tout ce code, comme nous l'avons fait dans la dernière vidéo avec AppHome. Ensuite, vous devez nettoyer ce composant pour supprimer tout code inutilisé, et aussi importer notre fichier de composition, comme nous l'avons fait dans la dernière vidéo. Alors donnez ça un coup de pouce, et si vous êtes coincé, je vais courir à travers cela dans la prochaine vidéo. 101. Déplacer les cartes par catégorie: Passons maintenant à travers le passage sur le code lié à la catégorie de cette catégorie DotVue. Si vous êtes sûr que le vôtre fonctionne correctement et que vous l'avez terminé avec succès dans la dernière vidéo, vous pouvez ignorer cette vidéo. Pour commencer, nous avons besoin de ces constantes de catégorie ainsi que de notre section calculée aussi. Découpez ceci, allez dans l'UseCategory, collez-le dans. Ensuite, nous devons également retourner les CardsByCategory, donc je vais l'utiliser dans plus de fichiers. Cela fait également usage de calculés, donc nous avons également besoin d'importer cette, seulement la bibliothèque Vue. Enregistrez ce fichier, et revenez à la catégorie, nous devons maintenant nettoyer tout le code inutilisé. Nous n'avons pas besoin des AllCards, nous n'avons pas besoin des données, nous pouvons également supprimer notre importation de bibliothèque Vue et le remplacer par notre UseCategory. Le symbole @ pour le dossier source, composables, UseCategory vers le bas à travers la configuration. Tout cela à l'intérieur d'une constante, et rappelez-vous plus dans l'UseCategory nous pouvons maintenant retourner dans notre CardsByCategory, afin que nous puissions importer cela à l'intérieur des accolades. Nous importons manqué de notre fonction qui était UseCategory. Nous retournons toujours cette CardsByCategory et l'utilisons dans un modèle. Sauvegardons ce fichier et essayons ceci. Lorsque nous cliquons sur l'une de ces catégories, nous voyons que l'en-tête de la catégorie est en train de changer. Actuellement, nous n'avons toujours que les mêmes cartes pour chacune, parce que nous avons défini cette catégorie dans notre composable. Mais c'est quelque chose que nous aborderons dans la prochaine vidéo, où nous examinons comment nous pouvons accéder à un routeur à l'intérieur de ces fichiers. 102. Accéder au routeur: Pour le moment, lorsque nous cliquons sur l'un de ces liens ici, nous sommes amenés à la page des catégories, mais nous voyons toujours les mêmes cartes pour chacun d'eux. Donc, cette catégorie d'enfants affichera toujours un anniversaire. Allez voyager, nous verrons les mêmes cartes. C' est parce que dans notre utilisation category.Js, où vous définissez la catégorie, si elle est une valeur fixe, cette catégorie fixe signifie que les valeurs sont toujours les mêmes quelle que soit la catégorie sur laquelle nous cliquons. Dans cette vidéo cependant, nous allons remplacer ceci et la rendre plus dynamique en y accédant, les paramètres d'URL. Donc, actuellement, nous avons ce paramètre de voyage. Nous cliquons sur l'un de ces éléments. Ceux-ci apparaîtront toujours à l'intérieur de l'URL. Donc, ce que nous allons faire maintenant est d'attraper ce paramètre, puis de le fournir à notre section calculée. Où nous allons le faire est en accédant au routeur dans la catégorie.vue. Donc, chaque fois que nous appelons causé par catégorie, nous allons passer un paramètre à cette fonction, et ensuite nous pouvons l'utiliser à l'intérieur d'ici, au lieu de cette valeur codée en dur. Donc, nous allons travailler en passant notre routeur à cette fonction. Avec l'API Options, nous pourrions faire quelque chose comme ça. Nous pourrions accéder à this.router.params, et cela fonctionnera parfaitement défini avec l'API Options. Toutefois, lors de l'utilisation de la composition, ce mot-clé n'est pas disponible. Nous devons donc accéder au routeur d'une manière différente. Pour cela, le paquet de vue relatif nous permet d'importer des fonctions à partir du paquet de routeur. Nous pouvons accéder à UserOuter entièrement objet routeur complet ou UserRoute pour les informations de routeur actuel. abord, nous devons importer cela à partir du package de routeur de vue. Donc, le premier était UserRoute, et le second était UserOuter, et ceci provient du paquet VueRouter. Pour accéder aux deux dans une configuration, nous allons ensuite les installer à l'intérieur des consonnes. Donc, le premier est le routeur, qui est égal à UserOuter. C' est une fonction donc il doit l'appeler. Le second est l'itinéraire individuel et la plus grande partie est égale à UserRoute. Ces deux constantes fonctionneront maintenant comme précédemment lorsqu'on accède à $Router pour le paquet de routeur complet et le $Route, qui est la route actuelle sur laquelle nous sommes, par conséquent, nous avons toujours accès à toutes ces mêmes choses telles que router.push, où nous pouvons naviguer à travers une nouvelle page. Eh bien, c'est là que nous avons seulement besoin d'accéder à l'itinéraire actuel puisque nous voulons, sélectionner les paramètres. Donc, nous pouvons supprimer le routeur et aussi l'importation aussi, et nous pouvons vérifier que nous avons toutes les informations dont nous avons besoin avec console.log. Passez dans le route.params. Actualisez et ouvrez les outils de développement, dans la console. Avoir l'anniversaire, que nous voyons juste ici, et aussi le mariage aussi. Donc maintenant, nous pouvons utiliser cela avec le console.log, et nous pouvons maintenant passer cela à notre fonction quand nous l'appelons. Donc, le route.params, et nous voulons accéder au paramètre de catégorie. Maintenant, passons à utiliser la catégorie où nous pouvons maintenant passer cela dans notre fonction. Puisque nous avons nommé cette catégorie, nous pouvons également supprimer notre constante de catégorie d'en bas, et maintenant à la place de cette section calculée, nous allons utiliser la catégorie qui est passée à cette fonction. Essayons ça. Vers le navigateur. Allons-y pour femme. On verra celui qu'on avait juste avant. Fêter. Tout. Voyage. Donc, tout cela fonctionne actuellement, mais si nous cliquons sur nos liens gratuits sur le haut, cliquez sur tous ces liens et nos cartes restent exactement les mêmes. Donc, actuellement, ces trois liens de navigation ne fonctionnent pas, mais c'est quelque chose que nous allons corriger très bientôt. 103. Watch et WatchEffect: Nous avons découvert dans la dernière vidéo que lorsque nous cliquons sur l'un de ces liens de catégorie, tout fonctionne bien et filtre nos cartes par catégorie sélectionnée. Cependant, si nous cliquons sur l'un de ces liens de navigation, le premier se chargera correctement à partir de la page d'accueil, mais si nous essayons de basculer entre ces liens de catégorie, nous ne voyons pas d'autres mises à jour. Cela se produit à cause du routeur de vue, et la raison est que lorsque nous sommes sur la page d'accueil, comme ceci, et que nous cliquons sur l'une de ces catégories, nous passons du composant d'accueil au composant de catégorie. Ce changement de route ou de composant provoque notre composant à re-rendu, donc, une fois de plus, appelant notre fonction de catégorie. Mais quand nous sommes déjà sur le composant de catégorie comme ça et que nous basculons entre ces liens de navigation gratuits, nous restons sur ce composant de catégorie, mais il suffit de changer maintenant les paramètres. Lorsque nous faisons quelque chose comme ça, les routes de vue ne rendront pas les composants parce que nous sommes toujours sur ce composant de catégorie, et pour des raisons de performance, il ne sera pas re-rendu ces composants juste pour un changement de paramètres. Puisque le routeur de vue ne rendra pas ces composants pour un changement de paramètres, nous devons maintenant faire attention à cela manuellement. Nous avons déjà regardé un observateur pendant ce cours, et ils peuvent également être utilisés avec la composition à côté d'une nouvelle version appelée WatchEffect de dans la catégorie d'utilisation composable. A l'intérieur de cette fonction, nous recevrons un nouveau nom de catégorie à partir des paramètres du routeur, puis à l'intérieur de notre section calculée, nous renvoyons les cartes basées sur cette catégorie, et nous passons cette catégorie à notre fichier juste ici. Puisque ce composant category.vue n' est pas re-rendu lorsque nous cliquons sur ces liens de navigation, ce que nous allons faire est de supprimer cette section juste ici et d'utiliser un routeur directement à l'intérieur de notre composable, ce nous permettra alors de placer un observateur sur ce routeur ou plus spécifiquement, sur les paramètres dont nous avons besoin, puis de déclencher les mises à jour une fois qu'il y a un changement dans ces paramètres. Pour ce faire, cela fonctionne comme nous avons regardé l'intérieur des composants, nous devons d'abord importer UserRoute à partir du vue.router, puis à l'intérieur de la fonction, nous allons enregistrer cela à l'intérieur d'une constante appelée route. Puisque nous accédons maintenant directement à ce routeur, nous pouvons également supprimer cela de notre catégorie.vue. Je vais supprimer cela, nous allons le passer à notre fonction, nous pouvons également supprimer l'importation du routeur et aussi la constante aussi. Puisque nous ne publions plus sur ce sujet, nous pouvons également supprimer cela de l'intérieur d'ici. Mais rappelez-vous que cette section calculée attend toujours une catégorie, donc nous pouvons maintenant en créer une localement pour remplacer celle que nous venons supprimer, donc la catégorie const. Cela sera également égal à route.parameter.category, mais cette fois nous allons rendre cela réactif en passant ceci à l'intérieur de ref, et tirez ceci juste au-dessus. Puisque cette catégorie est maintenant une référence, nous avons également besoin d'accéder à la valeur du point et aussi dans la section includes aussi. Quelque chose que nous devons noter ici est cette catégorie, elle va juste être signée avec la valeur initiale lorsque cela se charge. Nous devons ensuite surveiller manuellement les modifications apportées à ces paramètres, puis mettre à jour cette valeur. Pour le prouver, nous pouvons maintenant le connecter à la console juste en dessous, alors enregistrez la catégorie.value, ouvrez les outils de développement, actualisez la page, donc nous voyons l'anniversaire. Comme mentionné précédemment, si nous allons à la page d'accueil et puis cliquez sur une catégorie, nous voyons la bonne juste ici. Que faire si nous basculons entre ces trois liens en haut, nous voyons que la catégorie n'est pas mise à jour. Ce que nous devons maintenant faire est de surveiller le changement de ces paramètres, d'obtenir la catégorie, et comme cela est réactif, cela va ensuite relancer notre section calculée et ensuite mettre à jour nos composants. Pour cela, nous allons importer la montre de la vue-library et ensuite passer ceci à l'intérieur d'ici. Lorsque nous utilisons le watcher, nous composons toutes les données que nous voulons regarder, comme une référence ou une propriété réactive. Ici, si nous passons dans la catégorie, cette occasion cela ne serait d'aucune utilité, nous savons que cela ne fonctionnera pas parce que comme nous venons de vérifier dans la console, cette catégorie ne sera pas mise à jour quand il y a un changement de paramètres. Au lieu de cela, nous pouvons remplacer cela par une fonction getter, qui va retourner la valeur de notre routeur directement, accéder à la route.params.category, puis le séparer par une virgule, nous assistons à une fonction de rappel, qui est va fonctionner quand il y a un changement. C' est à l'intérieur de cette fonction de rappel où nous voulons mettre à jour la valeur de catégorie avec les nouveaux paramètres du routeur, donc category.value va être égal à route.params.category. Essayons cela sur le navigateur, et grâce à notre observateur, ces liens de navigation fonctionneront maintenant. Ce watcher que nous venons d'utiliser est le même que lorsque nous avons regardé plus tôt avec l'API d'options, mais il y a aussi un autre type, qui s'appelle WatchEffect. Avec cela, nous devons également importer cela. WatchEffect est un peu plus simple que la montre, et ça ressemble à ceci. A l'intérieur des parenthèses, nous pouvons ensuite passer n'importe quelle fonction que nous voulons exécuter, donc juste comme une démonstration, nous pourrions faire un journal de console, regarder la valeur de notre catégorie. Cette fonction à l'intérieur d'ici sera exécutée chaque fois que les données à l'intérieur changent. Dans notre cas, chaque fois que la valeur de la catégorie change, nous devrions voir un nouveau journal de console, sur la console, cliquez avec le bouton droit de la souris et inspecter, actualiser la page, et maintenant nous seulement itinéraire d'anniversaire, donc nous voyons cela courir par anniversaire Noël, et cet effet WatchEffect est maintenant relancé pour chaque changement de paramètre. WatchEffect est un peu comme une propriété calculée, nous passons dans une fonction qui est appelée une fois que toute propriété réactive à l'intérieur change, mais la différence est qu'il peut également effectuer des effets secondaires aussi. Donc, plutôt que nous avons calculé qui ne peut renvoyer qu'une valeur, WatchEffect d'autre part peut directement mettre à jour nos données ou notre état. Il y a aussi quelques différences entre montre et WatchEffect. Remarquez comment lorsque nous rechargeons le navigateur, nous voyons la catégorie immédiatement. Si nous retournons dans la console et actualisons, nous voyons qu'un journal de la console a été exécuté immédiatement même si nous n'avons cliqué sur aucun de ces liens. Cela est dû au fait que WatchEffect s'exécutera immédiatement et aussi lorsque les données à l'intérieur changent. Cependant, la montre est considérée comme paresseuse et ne fonctionnera qu'en cas de changement de données. Une autre différence est que watch nous permettra également d'accéder aux valeurs précédentes et suivantes aussi, et nous les passons dans cette fonction de rappel. Si nous voulions y accéder, nous pourrions les transmettre avec des noms de variables alors nous avons accès à celles-ci à l'intérieur de notre fonction. Nous n'avons actuellement pas besoin d'accéder à WatchEffect pour nos projets, donc je vais supprimer cela, et nous aurons également besoin de supprimer l'importation trop juste pour récapituler à la fois la montre et aussi le WatchEffect, nous allons relancer lorsque les données observées changent. Comme nous venons de le voir, WatchEffect sera également exécuté immédiatement même s'il n'y a pas de changement de données, et nous l'avons déjà vu avec le journal de la console. Si nous avons besoin d'accéder aux valeurs précédentes et suivantes, nous pouvons le faire en les passant à la fonction de rappel des watchers et en les utilisant comme nous l'avons fait avec l'API des options. 104. Utiliser en parallèle de l'API Options: Nous savons déjà que la composition n'est pas destinée à remplacer complètement l'API des options. Mais que se passe-t-il si vous vouliez utiliser les deux en même temps ? À l'intérieur de nos composants d'application home dot view, nous avons cette fonction de configuration. Nous pouvons toujours analyser dans les sections à côté de notre fonction de configuration à partir de l'API d'options. Par exemple, si nous voulions accéder à des données, comme nous l'avons fait dans les projets précédents. Il peut être avantageux d'utiliser à la fois lors de la transition ou du refactorisation des options à la composition à mesure que votre application s'agrandit, ou même de déplacer progressivement une application de la vue 2 à la vue 3. Quelque chose que nous devons surveiller lorsque nous faisons cela, c'est que les données ne sont pas transférables dans les deux sens. [ inaudible] nous pouvons ajouter un nom à la fois aux données et à la configuration. Tout d'abord, une propriété name pour les données, puis créez une constante à l'intérieur de la configuration. Nous devons également retourner cela, afin que nous puissions l'utiliser à l'intérieur du modèle [inaudible]. Sortons maintenant correctement la valeur de nos données. Ça peut aller n'importe où. Analyse du nom qui est égal à notre propriété de données de nom. Voyez ça, nous devons aller sur le lien de la maison, c'est notre nom juste en bas comme prévu. Mais qu'en est-il de l'accès à notre code de composition à l'intérieur de nos propriétés de données ? Si nous voulions accéder à son nom complet ici, nous pourrions être tentés de faire quelque chose comme ça. On pourrait accéder à ce nom complet du point, essayer ceci. C' est notre nom complet qui provient de la fonction de configuration. Comme nous le voyons, la section des données a accès à notre code de composition. Cela s'applique également aux autres sections de l'API d'options, pas seulement aux données. Nous pourrions accéder à notre code d'installation à l'intérieur des méthodes et des ordinateurs, et cela fonctionnerait également. Mais qu'en est-il de l'inverse ? Encore une fois, essayons ça. Nous pouvons rétablir notre nom, puis nous pouvons essayer d'accéder à cette propriété de données à l'intérieur de la configuration ; ce nom de point. Nous devons également changer le nom pour être le nom complet, et nous voyons un écran vide. Percevoir toutes les erreurs à l'intérieur des outils de développement. Nous ne pouvons pas lire le nom de propriété de undefined. Ok, alors essayons sans ce mot-clé, rafraichir. Nous n'avons toujours pas accès à ce nom. Le problème que nous avons ici lorsque nous faisons les choses de cette façon est la fonction de configuration est résolue avant l'API des options. Par conséquent, la fonction de configuration ne peut accéder à aucune de nos propriétés de données. Ce mot-clé n'est pas non plus disponible dans une configuration. Si c'était le cas, il se comporterait différemment de la façon dont nous nous attendons à ce qu'il se comporte à l'intérieur de l'API d'options, donc il a été supprimé pour éviter toute confusion. Donc, juste pour être clair, nous ne pouvons pas utiliser ce mot-clé à l'intérieur de la fonction de configuration. Mais comme nous venons de le voir, cela fonctionne dans l'inverse, et nous pouvons accéder à nos propriétés de configuration à l'intérieur de nos données ou de notre API d'options. On peut nettoyer ce code. Nous n'avons pas besoin d'accéder au nom complet et de le déplacer de l'instruction return, la section de données, ainsi que de la sortie à l'intérieur du modèle. Ceci est une introduction à l'API de composition. Dans la section suivante, nous allons poursuivre notre projet, et nous aurons également beaucoup plus de pratique en utilisant la composition au fur et à mesure que nous progresserons dans ces vidéos. 105. Section Intro - Poursuivre notre projet: J' aime donner mes cours très pratiques et pratiques. Dans cette prochaine section, nous allons mettre toutes les connaissances de composition que nous avons apprises dans nos projets de cartes créatives. Nous allons pousser en saisissant la carte sélectionnée, sur laquelle l'utilisateur clique. On va récupérer les pages. Nous passerons d'une page à l'autre pour les cartes. Nous ajouterons nos entrées de texte pour nos sections, nos sorties de texte afin que l'utilisateur puisse les prévisualiser. Nous allons permettre aux sections d'être mises à jour, réarrangées, éditées, et bien plus encore. Ce sera une bonne occasion de renforcer nos connaissances en composition tout en construisant notre projet. Je te verrai là-dedans. 106. Relier à la carte sélectionnée et styliser la catégorie: Pour cette prochaine section, nous poursuivrons notre projet et renforcerons ce que nous avons appris jusqu'à présent sur Vue et la composition. En commençant par un peu de style pour les catégories, actuellement, nous avons deux fichiers qui ont besoin d'une mise en page de style de grille, et c'est la catégorie.vue. Nous avons cette classe d'enveloppe de grille, et cela va énumérer toutes nos cartes dans une mise en page de style de grille. La même chose dans l'AppHome, faites usage de la même classe juste ici. L' app.vue a une feuille de style en bas qui n'a pas l'attribut scope. Donc, je vais ajouter le style pour cette grille ici. Par conséquent, cela signifie qu'il s'appliquera à tous les composants qui utilisent cette classe. Donc, ajoutons ceci dans, et cela va aller à l'intérieur d'une requête multimédia. La mise en page du style de grille ne s'applique que lorsque nous obtenons plus de 600 pixels. La première requête média à laquelle nous allons appliquer ceci est la largeur minimale de 600 pixels. Prenez l'enveloppe de grille. Tout d'abord, afficher la grille, puis les colonnes du modèle de grille. Pour cette requête multimédia particulière, nous allons placer deux cartes côte à côte. Je vais régler ça pour être répété. Il faut le répéter deux fois. Ensuite, si nous passons dans une unité fractionnaire, ces deux colonnes prendront la même largeur disponible. Mettre de l'espace entre ces cartes sera également placé dans un espace de grille de 10 pixels. Au-dessus du navigateur, nous voyons maintenant la mise en page initiale de notre système de grille. En outre, si vous cliquez sur l'une de ces cartes, nous voyons la même chose s'applique à ce composant aussi. Ensuite, nous aurons plus d'espace disponible. Je vais ajouter une deuxième requête multimédia. Copions cette section, collez ceci juste en dessous. Pour cela, nous allons faire ce 1000 pixels. Nous avons déjà le type d'affichage déclaré et aussi l'écart de grille. Tout ce que nous devons faire à l'intérieur, c'est que les changements doivent être de trois colonnes de large. Ensuite, lorsque nous étirons cela à plus de 1 000 pixels, il passe ensuite à trois colonnes. Ensuite, revenez à la page d'accueil, nous allons définir des CSS plus spécifiques pour ce composant particulier dans l'AppHome. Mettez la section de style vers le bas. C' est juste CSS régulier. Chacun de ces éléments à l'intérieur de notre grille a la classe d'article de catégorie. Nous allons juste définir un dégradé d'arrière-plan autour chacun et ajouter un remplissage pour espacer chacune de ces catégories. Prenons ceci, l'article de la catégorie. L' arrière-plan va avoir dans un dégradé linéaire, ce qui nous permettra de passer entre deux couleurs. Les deux couleurs, je vais passer dans les valeurs RVB sur la première de 253, le vert, 207, et aussi 207 pour le bleu aussi. Séparée par une virgule, la deuxième valeur RVB sera rouge de 140, 140 pour le vert ainsi, et aussi 236 pour le bleu. Cela nous donne le dégradé du rose au violet, et aussi, la couleur est passée de haut en bas. Je vais juste compenser cela en plaçant dans un angle comme premier paramètre de 30 degrés. Cela va juste déplacer la couleur à huit angles différents. Ensuite, un peu de rembourrage pour donner à cela un peu d'espacement du texte de six rems en haut et en bas. Nous n'avons besoin de rien sur la gauche et la droite puisque nous utilisons cette disposition de grille. Cet article de catégorie applique des styles à chacun de nos articles de liste. Maintenant, pour ajouter un peu d'espace dans le haut de cette liste non ordonnée, je vais maintenant sélectionner la liste non ordonnée en place dans un rem de marge tout en haut. Cela nous donnera notre espace à partir de notre en-tête supérieur. Le texte de chacun d'entre eux est entouré dans ce lien de routeur. Rappelez-vous que le lien routeur produit un élément HTML. Nous pouvons également l'utiliser dans le CSS. Tout ce que nous allons faire ici, c'est de définir la taille de la police à 20 pixels. C'est un peu plus grand. Nous pouvons toujours cliquer sur ces derniers et passer à la catégorie individuelle aussi. Lorsque nous passons à cette page, cela est contrôlé par le composant category.vue. Actuellement, lorsque nous cliquons sur l'une de ces cartes individuelles, nous avons juste le lien du routeur pointant vers la barre oblique avant. Mais ce que nous voulons quand nous cliquons sur l'une de ces cartes plutôt que cela pour être pris aux cartes réelles afin que nous puissions éditer. L' écran d'édition de l'une de nos cartes est ce composant de création, que nous avons ajouté tôt. Maintenant, allons dans notre catégorie et nous pouvons changer ce lien de routeur pour être dynamique, fermer sur la barre latérale, puis y placer les backticks. Nous devons aller à la /create, a maintenant une variable qui va être la card.id. Rappelez-vous, nous avons obtenu cette variable de carte de cette boucle juste au-dessus. La première chose que nous voulons voir est la première page de cette carte. Ensuite, nous ajouterons également quelques liens vers cette page de création, qui nous permettra de basculer entre l'avant, l'intérieur gauche, l'intérieur droit, et aussi l'arrière aussi. Maintenant, avec ce lien en place, nous devons passer à la page d'index des routeurs, et aussi les changements créer un composant à. Plutôt que d'aller à /create, nous voulons également saisir nos variables, qui est l'identifiant de la carte et aussi la page actuelle. Le premier paramètre est pour notre id et le second pour la page. C'est mon résultat. Anniversaire, c'est la carte avec l'identifiant d'un, mais ensuite prise à la première page. Essayons Halloween. C'est la carte numéro 5. Tout fonctionne bien aussi. Nous allons nous concentrer sur cette vue créer dans la prochaine vidéo. Mais pour l'instant, revenons à cette section de catégorie où nous allons terminer cette grille en ajoutant une image d'aperçu plutôt que le nom de la carte. Dans le dossier assets, dans les images, nous avons cette section d'aperçu de la carte. Ceci a une image avec un aperçu de la première page de chacune de nos cartes. En outre, chacun a le titre avec l'identifiant correspondant pour cette carte particulière. Tout ce que nous devons faire est d'accéder à l'identifiant de la carte, puis de le lier à ce chemin de fichier. la section catégorie, plutôt que de sortir ce nom de carte, nous allons passer dans l'élément image, passer en v-bind à la source, puis à l'intérieur des backticks, nous pouvons ajouter notre URL dynamique. L' esperluette va lier à la source, dans le dossier assets, les images, les aperçus de la carte. Chacun de ces aperçus de carte a un nom qui lie à cette carte .id. En passant également le type de fichier aussi. Retour au navigateur, nous ne voyons aucune image s'afficher dans. On a une erreur d'orthographe. Réessayez, et nous ne voyons toujours aucune image pour cet affichage. Maintenant, cela se produit lorsque nous utilisons dans une image dynamique tout comme nous sommes ici. Nous pourrions placer dans une chaîne d'image statique sans variables, et cela fonctionnerait complètement bien. Par statique, nous voulons dire que si nous n'avons pas ce deux-points et la liaison, et que nous n'avons pas de variables à l'intérieur, nous pouvons simplement lier au 1.jpg avec les backticks. Celui-ci fonctionne très bien. Ce chemin de fichier dynamique échoue parce que dans les coulisses, nous utilisons dans ce qu'on appelle webpack. Webpack est utilisé pour regrouper tous nos fichiers et tous nos actifs du répertoire source en un seul paquet JavaScript. Ceci est tout paquet qui est servi au navigateur lorsque nous visitons notre site Web. Mais le problème est que lorsque ce chemin de fichier est dynamique, webpack ne sait pas que les résultats de cette variable sont compilés. À ce stade de compilation, il sait qu'il y a une variable ici, qui peut changer, mais il ne connaît pas encore la valeur exacte. Il y a deux façons de réparer ça. Nous pourrions déplacer les images dans le dossier public et cela fonctionnera très bien. Ou plutôt, nous pourrions autoriser webpack et lui dire que nous devons passer cette chaîne dynamique par rugosité dans require. Ce que nous devons faire pour cela est de mettre cette chaîne complète dans les backticks comme nécessaire. Ensuite, à l'intérieur des crochets, nous collons dans notre chaîne. Nous voyons tout de suite dans le navigateur, il aurait maintenant nos images sur l'écran. Bien sûr, ils sont très gros. Donc, ce que nous allons faire est de passer à l'app.vue et aussi cibler toutes les images qui sont sur notre application et de définir la largeur maximale à 100 pour cent. Sauve ça. Il laisse maintenant une belle disposition de grille pour nos cartes. 107. La vue Créer: Si vous cliquez sur l'une de ces cartes sélectionnées, vous pouvez désormais accéder à ce composant Créer. Cette page est ce que nous voulons maintenant travailler. On va le diviser en deux sections. La section gauche aura un aperçu de la carte, qui montrera les cartes initiales ainsi que toutes les modifications que nous ferons aussi. Ensuite, la section de droite sera utilisée pour éditer cette carte, y compris les images et aussi les sections de texte. Pour ces sections, pour l'aperçu et la section édition, nous allons créer deux nouveaux composants dans le dossier des composants pour les garder organisés, un dossier appelé carte. Cela regroupera tous nos composants liés à la carte. Un nouveau fichier. L'un est le cardedit.vue. En outre, le second, également dans le même dossier est pour l'aperçu de la carte. Maintenant, les deux vont juste avoir un modèle simple avec un titre de niveau 1. Celui-ci est l'aperçu de la carte. Prends ça et économise. Ensuite, on peut placer ça à l'intérieur du Cardedit. Comme nous venons de le mentionner, ces deux composants vont être affichés à l'intérieur de ce create.vue. Pour commencer à créer une section de script, qui va être utilisée pour importer ces deux composants, le premier, CardPreview dans la source, les composants, le nouveau dossier de carte et le CardPreview. Dupliquez ceci. Celui-ci est pour le Cardedit. À l'intérieur de l'exportation, nous enregistrerons ensuite nos composants. C' est tout ce dont nous avons besoin pour notre script pour l'instant. J' irais à notre modèle. Je vais créer un div avec la classe de card_wrapper. C' est le div wrapper principal pour les deux sections. Nous aurons l'aperçu sur la gauche et la section d'édition sur la droite. Cela signifie simplement que nous pourrions cibler la section avec notre style. Tout d'abord, la section de gauche, puis la section de droite. La gauche est pour CardPreview. Maintenant, placez la section Cardedit sur la droite. Voyons si tout va bien. Rafraîchir. Nous avons les composants CardPreview et Cardedit. Bien sûr, ceux-ci ne sont pas encore disposés à gauche et à droite parce que nous devons descendre à la section de style et ajouter du CSS à ce card_wrapper. Il va aussi être délimité. Pour commencer le type d'affichage de flex, et la direction de flexion par défaut est ligne, ce qui placera ces deux composants sur la page. En outre, ce wrapper principal va avoir une couleur d'arrière-plan. Nous allons obtenir le simple et opter pour une couleur gris clair de l'EEE, une ombre de boîte d'un pixel, un pixel, deux pixels. La couleur du DDD et l'ombre à insérer. Cela signifie que l'ombre sera placée à l'intérieur de notre section plutôt qu'à l'extérieur. Ensuite, nous allons jeter un oeil à la version finale et aller dans l'une de ces cartes. Nous voyons que cette section à gauche et la section à droite sont tous les deux égaux. Pour y parvenir, nous allons prendre notre card_wrapper, et chacun d'entre eux a été enveloppé dans une section. Rendez-les tous les deux égaux. Nous pouvons passer une valeur de flex d'un et aussi un peu de rembourrage à l'intérieur de 10 pixels. Rafraîchir. Maintenant, cette valeur flexible de 1 s'appliquera à ces deux sections, leur donnant un espacement égal. Maintenant, nous avons cette mise en page toutes les configurations. Dans la vidéo suivante, nous allons réellement afficher la carte sélectionnée sur cette page. 108. Récupérer la carte sélectionnée: En sélectionnant l'une de ces cartes dans notre grille, nous prenons ensuite cette vue magnifique, et nous avons également accès à l'ID de la carte sélectionnée. Cela signifie que nous pouvons l'utiliser pour obtenir la carte que nous devons afficher, et cela peut également aller à l'intérieur d'un fichier composable 2, dans la barre latérale, puis dans les composables, créer un nouveau fichier à l'intérieur ici appelé, utiliser la carte actuelle. Rappelez-vous que ceux-ci ont l'extension js. Configurez une exportation, avec la fonction par défaut appelée utiliser la carte actuelle. Le travail de cette fonction sera d'obtenir la carte sélectionnée, pour récupérer cela, nous devons également accéder à toutes nos cartes, afin que nous puissions filtrer la carte sélectionnée, nous pouvons éventuellement utiliser des cartes composables, dans cette section. Seul le chemin du fichier, qui sera slash point, et le nom de fichier d'utilisation Cartes. Rappelez-vous que l'utilisation Cartes a retourné à toutes les variables de cartes, maintenant nous devons revenir dans notre composable, puis extraire cela de notre fonction. Nous avons maintenant toutes nos cartes et ce que nous devons faire maintenant est de créer une seconde constante, qui va stocker la carte sélectionnée. Cette carte sélectionnée sera également un objet, nous pouvons passer dans un objet vide comme valeur initiale. Puisque nous utilisons une référence, nous devons également importer cela à partir de la bibliothèque de vues, et ensuite nous allons filtrer cette section toute la carte avec la carte sélectionnée. Prenez d'abord les cartes sélectionnées, et nous pouvons définir la valeur, pour être égal à toutes les cartes. Cette toute carte est également éruption dans un radeau 2, nous avons également besoin d'utiliser la valeur de point pour accéder au résultat, et utiliser la méthode de filtre JavaScript qui va prendre dans une fonction, qui va les filtrer si l'identifiant de point de carte est égal à quelque chose. Maintenant, nous avons juste mis ceci à une valeur statique de un, retour sur pour avoir un excellent point de composants. Nous pouvons maintenant vérifier que cela fonctionne en important ce composable, puis afficher cela à l'intérieur du modèle. Importez d'abord ceci. Il dit utiliser la carte actuelle, à partir du chemin du fichier dans les composables source, puis utiliser la carte actuelle, dans nos exportations, pour la fonction de configuration. En fait, nous avons oublié de faire une chose, et qu'une chose est terminée et utiliser les cartes actuelles, nous avons également besoin de retourner une valeur à utiliser dans nos composants, et la valeur de retour va être sélectionné carte, j'espère que vous avez repéré celui-ci, revenez à la section create dans la configuration. Va maintenant extraire ceci dans une constante. Pour afficher cela dans les modèles, cela doit également être retourné à partir de cette fonction, puis placez-le n'importe où dans le modèle ci-dessus, juste pour vérifier que cela fonctionne. Vérifions ça. Nous voyons une erreur dans notre composable, tout est défini, mais jamais utilisé. Nous pouvons aussi le compléter automatiquement. Rafraîchissez et voici notre carte sélectionnée. Bien, c'est tous les détails de notre carte avec l'ID 1, que nous avons mis juste ici. Mais remarquez comment notre objet de carte est également entouré dans ces crochets de tableau. C' est parce que nos données de toutes les cartes sont un tableau d'objets. Pour travailler avec ce seul objet, nous devons le retirer de ce tableau avec le découpage. Nous avons déjà dit que cette carte sélectionnée doit être un objet, et nous distribuons ces sorties de notre tableau, en l'entourant entre crochets. Rafraîchir et ces crochets sont maintenant partis. Ensuite, plutôt que d'utiliser la valeur codée en dur d'un, nous allons maintenant importer le routeur, et obtenir l'ID des paramètres. Importez d'abord ceci. Nous utilisons une voie égale. Ceci est à partir du paquet relatif de vue, puis stocker est dans une constante afin que nous puissions accéder à cet intérieur de notre fonction. Ces routes peuvent maintenant être utilisées pour accéder aux paramètres plutôt que ces valeurs codées en dur, paramètres de route, et le nom du paramètre que vous avez donné dans la page d'index des routeurs, était l'ID du navigateur, et il veut juste pour utiliser la route. La carte a maintenant disparu. Essayons un de plus. Maintenant, nous avions une carte sur l'écran juste avant, mais maintenant comme nous le remplaçons par notre routeur, nous ne voyons rien sur l'écran. Maintenant, c'est l'un d'entre eux, le développement web moments gotcha. Ce dont nous avons besoin ici, c'est un ID de carte, que nous obtenons avec le router.params.id. Nous avons besoin que ce soit un type de données de numéro. En fait, lorsque nous lisons quelque chose de nos paramètres d'URL, cela est retourné sous forme de chaîne. Nous pouvons voir cela si nous faisons un journal de console. Juste n'importe où dans ce fichier, accédez à la route params.id, et nous pouvons utiliser JavaScript pour suivre le type de données avec le type de dans la console, actualiser le navigateur et nous voyons le type de données est chaîne, et c'est pourquoi tous ne fonctionne pas parce que c'est la comparaison, avec l'égalité stricte que nous vérifions si le type de données de chaîne, est égal à ceci, qui est un nombre. On pourrait juste utiliser les doubles égaux comme ça. Cela ignorerait la différence de type de données, et utiliserait simplement la valeur. Ou alternativement, nous pourrions saisir ceci, envelopper ceci à l'intérieur de la fonction numérique, et cela convertirait la chaîne en un nombre, et cela fonctionnerait également à. Laissez-nous vérifier quelques cartes de plus. Ce sera le troisième. Nous voyons l'ID 3. Le cinquième, ID 5. Cela correspond également à. 109. Sélectionner la page actuelle: Dans la vidéo précédente, nous avons dit que cette page de création affiche toutes les informations de la carte sélectionnée. Mais en fait, pour ce point de vue, il suffit de montrer un certain élément de données. Rappelez-vous que notre carte est divisée en quatre pages. Nous avons l'avant, l'intérieur gauche, l'intérieur droit, et aussi la vue arrière. Lorsque nous éditons cette page, nous ne voulons voir qu'une de ces sections à la fois. Seulement lorsque nous cliquons sur ces cartes, nous sommes ensuite pris dans la vue, qui est le devant de la carte. Les données de ces quatre pages sont stockées dans le tableau de cette page juste ici, et récupérer la page exacte dont nous avons besoin à partir de ce tableau est ce que nous allons nous concentrer dans cette vidéo. Nous ajouterons ensuite des liens afin que vous puissiez basculer d'une page à l'autre. Pour redémarrer les choses dans le fichier de carte UseCurrent, lisez la constante pour stocker la page sélectionnée dans. Maintenant, nous n'avons pas besoin de ce journal de console. Cette constante va être stockée dans la page sélectionnée. Ce sera également dynamique et un type de date d' objets qui est fonction obey appelée get selected page. Cette fonction va définir notre page sélectionnée. C' est une référence, donc nous saisissons la valeur, et cela va être égal à notre carte sélectionnée, la valeur. Comme nous l'avons vu dans le navigateur, nous avons également besoin d'accéder au tableau de pages à l'intérieur ici. Nous devons ensuite obtenir le numéro d'index de la page sélectionnée. Nous avons quatre valeurs différentes pour l'avant, l'intérieur gauche, droite et arrière, donc cela pourrait être soit zéro, un, deux ou trois. Pour obtenir le numéro d'index pour la page particulière dont nous avons besoin, je vais le remettre à une fonction distincte, pour garder les choses propres. La fonction sera appelée get page index. Pour obtenir l'index de page dont nous avons besoin, nous devons saisir la carte sélectionnée, la valeur, les pages, puis utiliser une méthode de tableau JavaScript appelée find index. Find index va exécuter une fonction pour chacune de nos pages dans ces cartes. Chacune de nos pages sera stockée à l'intérieur de cette constante de page. Nous voulons vérifier si la page.name est égale à route. params.id. Pour résumer, nous accédons à toutes les pages de la carte sélectionnée. Nous utilisons ensuite n'importe quel JavaScript, find index méthode, et cela va vérifier si la page.name. Ce que vous pouvez voir si nous allons dans nos données, chacune de nos pages a sa propriété de nom telle que front, et nous comparons ce nom à la valeur à l'intérieur de tous les paramètres. En fait, plutôt que d'ID, celui-ci pour être la page, comme l'avant que nous avons juste ici. Cela retournera ensuite le numéro d'index, donc je dois le retourner de notre fonction. Nous pouvons accéder à cette valeur de retour, mon appel fonctionne maintenant à l'intérieur d'ici. Bien. Maintenant, nous avons cette fonction appelée get selected page, et maintenant nous avons besoin d'un moyen d'appeler cela. Eh bien, nous pouvons le faire en utilisant unmounted en supposant notre fonction appelée get selected page. Il monte et bind a été importé automatiquement lors de l'enregistrement, mais si le vôtre ne l'a pas fait, si vous deviez ajouter non monté à cette importation. Maintenant, nous devons également retourner notre page sélectionnée, afin que nous puissions l'utiliser dans le modèle. Et ajoutez également un point-virgule si cela provoque des problèmes, et plus à la création. vue. Maintenant, au lieu de rendre la carte sélectionnée complète, nous pouvons remplacer cela par la page sélectionnée, nous renvoyant, puis je vais mettre ceci à l'intérieur d'un modèle. Rafraîchir. Bien, il y a l'avant. Essayons le dos. Bien, à l'intérieur à droite. Excellent. Maintenant, cela fonctionne et nous pouvons maintenant configurer quelques liens dans la vidéo suivante pour basculer entre ces quatre pages. 110. Échanger les pages de cartes: Nous savons maintenant à partir de la dernière vidéo que nous pouvons récupérer la bonne page dont nous avons besoin à partir de l'URL. Maintenant, nous allons configurer quelques boutons pour basculer entre ces quatre pages. Ceci, un nouveau composant, un nouveau dossier de composants, puis dans le dossier de la carte. Celui-ci va être appelé page de commutation. Configurez les modèles que vous allez simplement vers le lien [inaudible] afin que nous puissions transmettre l'élément nav, la liste non ordonnée, puis nos éléments de liste vont être des wrappers pour le lien du routeur. Chacun de ces liens routeurs va lier aux quatre pages de notre carte. Passez dans l'accessoire à. Cela va se relier à l'avant, et nous allons jeter un coup d'oeil à cela dans une seconde. Mais maintenant une classe de sélection de page est relativement égale à la moitié du texte à l'avant, côté d'une icône à. Cette icône a été fournie avec ce cours et vous pouvez y accéder depuis le dossier assets. abord, le texte à l'intérieur de la plage d'essais, puis afficher l'icône avec l'image. Celui-ci n'a pas besoin d'être dynamique, nous avons juste besoin d'aller dans les actifs, dans les icônes. La même icône va être utilisée à l'avant et à l'arrière de la carte, donc celle-ci s'appelle front-back.svg. Placez dans un texte alt et nous pouvons maintenant dupliquer cela pour les trois liens restants. Copiez et collez l'élément de la liste complète. Cet élément de liste suivant est pour l'intérieur gauche. Le nom de l'icône est à l'intérieur à gauche. Le texte alt, copiez celui-ci, puis changez toutes ces occurrences à l'intérieur à droite. Nous avons le lien routeur, nous avons le texte, la source de l'image, le texte alt. Nous pouvons aussi corriger cette faute de frappe. Enfin, collez dans le dernier et ceci est pour le dos de la carte. Nous savons quoi faire maintenant, le lien du routeur, le texte. Rappelez-vous, celui-ci partage la même icône que l'avant, donc ce nom était avant arrière. Ensuite, enroulez ce dernier lien avec le texte alt. Enregistrez ce fichier et ce composant va être placé à l'intérieur de create.view. Importez d'abord ceci. Une fois que vous dupliquez le Cardedit, celui-ci est pour SwitchPage. Il y a le chemin et aussi l'importer dans notre objet de composants. Placez ce tout en haut. Vers le navigateur à l'avant, à l'intérieur à gauche. Cela change également l'URL, l'intérieur droit, l'arrière aussi. Remarquez comment chacun de ces liens remplace simplement la section de fin de notre URL. En effet, lorsque nous avons ajouté le lien de routeur, nous n'avons pas utilisé de barre oblique avant l'une de ces routes. Si nous avons utilisé une barre oblique, juste comme ça, cliquez sur le dos. Cela remplacera ensuite notre URL complète. Mais laisser cela dehors ne remplacera que la section sur laquelle nous sommes actuellement. Une autre chose à noter ici est que lorsque nous cliquons sur l'un de ces liens, la page sélectionnée n'est pas mise à jour. La raison pour laquelle cela ne se met pas à jour est la même raison que précédemment lorsque nous avons essayé de mettre à niveau ces liens de trois catégories. C' est parce que nous sommes toujours sur les mêmes composants de création, donc quand nous avons juste changé les paramètres comme nous sommes ici, aucune mise à jour ne se produira. Nous pouvons également corriger cela avec la même solution, qui consiste à ajouter un watcher, ou à UseCurrentCard tout en haut. Importer montre et nous pouvons surveiller un changement de paramètres. abord passer dans une fonction getter qui va surveiller tout changement de tous les paramètres du routeur, et en particulier, notre page. Ensuite, une fonction de rappel, qui va s'exécuter à chaque fois qu'il y a un changement, et sa fonction est déjà configurée juste au-dessus. Ceci, et ajoutez un point-virgule juste après notre observateur. Gardez ceci séparé de l'expression ci-dessous, puis sur le navigateur. Rafraîchir. Nous voyons l'avant parce que nous sommes seulement URL avant. A l'intérieur, à gauche, à l'intérieur à droite , et aussi, le dos fonctionne aussi. 111. Composant d'aperçu de la carte: Mais plus de ces composants create.vue et à l'intérieur ici, nous affichons la SelectedPage. Au lieu de montrer cela comme un objet, nous allons maintenant déplacer ceci et passer la page vers le bas comme accessoires à nos deux composants, qui était l'aperçu de la carte et aussi l'édition de la carte. abord, supprimez ceci, passez d'abord à l'aperçu de la carte, le nom propre de SelectedPage, qui est égal à SelectedPage. La même chose juste ci-dessous pour l'édition actuelle. Cet accessoire donnera à l'aperçu de la carte toutes les informations dont il a besoin pour afficher la carte et plus sur la droite, la section d'édition de la carte utilisera cet accessoire comme valeur initiale pour tous nos champs d'entrée. Si nous voulions, au lieu de mettre cela ici et de transmettre cela comme accessoires, Nous pourrions également importer ces directement dans nos deux composants aussi. Mais pour ça, je vais m'en tenir aux accessoires. Dans l'aperçu de la carte. Cela a besoin d'une section de script pour accepter ces accessoires, les passer dans notre objet. Le type, ces objets, et aussi, cela est nécessaire aussi. Jusqu' au modèle, nous n'avons pas besoin de ce titre de niveau 1. Au lieu de cela, remplacez ceci par un div et ce div va être le wrapper pour notre carte. Nous devons ajouter l'image de fond, comme nous le voyons si nous allons à la version finale, dans ces cartes. Ce sera le wrapper pour notre aperçu, et cela aura l'attribut style pour définir l'image d'arrière-plan. abord, une classe d'emballage d'aperçu de carte, puis lier un style dynamique, qui prendra dans un objet, et c'est à l'intérieur de l'objet de style où nous allons passer dans l'URL d'arrière-plan à l'intérieur des bactiques. Tout comme nous le pouvions avec CSS régulier, nous pouvons définir l'URL de fond. Mais parce que ce sera dynamique, nous devons aussi mettre cela à l'intérieur des bactiques, placer dans notre variable, qui est la SelectedPage de nos accessoires. Sélectionnez la propriété d'arrière-plan. Ensuite, la taille de l'arrière-plan, qui sera une chaîne régulière de 100 pour cent. Ensuite, la répétition de l'arrière-plan. Aussi, rappelez-vous, puisque nous faisons cela à l'intérieur de JavaScript, nous devons faire chacun de ces CamelCase. Si c'était CSS régulier, nous le ferions juste comme ça avec le trait d'union. Mais puisque nous utilisons JavaScript, nous devons faire chacun de ces CamelCase. La valeur pour cela ne sera pas répétée. Puis enfin, la position de fond. Ce sera également dynamique puisque nous avons cet ensemble à l'intérieur de nos données. Descendez au fichier de données. Nous avons saisi l'arrière-plan comme avant, mais maintenant nous allons prendre cette position d'arrière-plan. Ceci est également extrait de tous les accessoires. Maintenant, à l'intérieur de cette div, nous devons parcourir chacune de nos sections. Dans cette SelectedPage, nous allons aller voir cela à l'intérieur de nos données. Cette page d'accueil contient ce tableau de sections. La plupart des informations dans chacune de ces sections sont pour le style et CSS. Mais celui que nous allons utiliser pour afficher le texte réel d'une section est cette entrée utilisateur. Je vais placer à l'intérieur d'ici un div avec un v-for, passer dans la section dans SelectedPage.sections. Chacune de ces sections a un ID unique. Donc, la clé sera section.id. Pour vérifier que cela fonctionne, je vais mettre la section complète, rafraîchir. Nous pouvons à peu près voir une image d'arrière-plan et nos superpositions de texte. Mais nous devons aussi donner à cette image de fond une largeur et une hauteur. Retour aux composants, nous pouvons accéder à l'emballage d'aperçu de la carte. Ensuite, définissez une section de style en bas. Cela peut également être défini. Tout d'abord, la largeur de cette image va être fixée à 450 pixels, puis une hauteur de 600. Bien. Nous pouvons maintenant voir la taille complète de l'image. La dernière chose à faire est de définir la propriété overflow pour cette section et cela nous aidera plus tard si l'utilisateur augmente la hauteur de l'une de ces sections pour être supérieure à la carte. Super. Maintenant, tout ça fonctionne. Nous voyons aussi que le recto de la carte est le seul avec une image et que certaines de ces sections n'ont pas du tout de texte. Toutes ces sections de texte, nous ne voulons pas montrer l'objet complet comme ceci. Au lieu de cela, nous voulons juste sortir l'entrée de l'utilisateur, que vous pouvez le faire comme ceci, section.UserInput. Ok, super. Ce texte que nous superposons sera bientôt placé dans un composant séparé et nous lui appliquerons également toutes ces données supplémentaires telles que le style, ainsi que la mise en page. 112. Composant de sortie de texte: Ce que nous avons en ce moment, c'est cet aperçu de carte qui affiche une image de fond. Ensuite, juste ci-dessous pour chacune de nos sections sur cette page, il sortira ensuite l'entrée de l'utilisateur. On a tous vu quelque chose comme ça. Si nous allons à la première page, nous voyons l'image d'arrière-plan. Ensuite, le texte superposé pour les pages avec plusieurs sections de textes comme l'intérieur droit. Nous les voyons s'afficher juste ici. Ce texte n'est cependant pas destiné à être affiché comme du texte brut, comme ceci. Si nous allons au data.js, nous avons un tableau de sections avec un objet, et celui-ci particulier a cette entrée utilisateur juste ici. Ensuite, nous avons diverses choses pour le style et la mise en page. Pour les montrer, nous allons créer un nouveau composant pour afficher chacun de ces morceaux de texte dans la section du composant et dans la fiche. Ceci est le texte output.vue, le modèle, et juste un texte simple pour l'instant. Cela va être affiché à l'intérieur de notre aperçu de carte à la place de ce texte juste ici, dans l'action de scripts, importer ce fichier, qui est la sortie de texte. C' est dans le même dossier donc tout ce que nous avons à faire est. /, puis dans notre sortie de texte, enregistrez nos composants, et sauvegardez dans le modèle, nous n'avons pas besoin de cette section, nous n'utilisons plus les entrées. Remplacez ceci par notre nouveau composant. Bien sûr, cette sortie de texte a besoin de quelques données à afficher, donc nous allons envoyer le contenu complet de la section en tant qu'accessoire. C' est tout ce que nous avons à faire pour ce composant. Vers la sortie de texte. Les scripts, placer dans nos accessoires, et la section prop aura le type d'objet. Rappelez-vous, c'est le raccourci pour le type. Plutôt que d'avoir l'objet, je place le type comme ça. Tout comme dans l'aperçu de la carte, si nous sortons maintenant le contenu de la section, nous devrions également avoir accès aux entrées de l'utilisateur. Voyons voir. Bien. Nous avons les trois entrées utilisateur distinctes et aussi, la même chose pour les fronts de la carte aussi. Cela nous laisse dans la même position que le début de la vidéo. Nous avons juste la maison de texte brut, mais cette fois à partir d'un composant séparé. Nous pouvons maintenant utiliser ces valeurs CSS que nous voyons dans le fichier de données pour créer un objet CSS et l'appliquer à ce texte. abord, placez dans notre fonction de configuration et une constante pour stocker notre objet CSS. Gardez un œil sur tout changement. Nous allons utiliser une valeur calculée à l'intérieur de cette fonction de configuration. Nous allons passer une fonction et cette fonction va s'exécuter chaque fois que les données à l'intérieur changent. Tout comme lors de l'utilisation de l'API Options, cela doit également renvoyer des données, mais je vais juste placer dans un objet vide et nous reviendrons à cela dans une seconde. Avant d'oublier, le numéro de place renvoie l'action pour la configuration, où nous allons retourner notre objet CSS, parce que maintenant nous utilisons calculé, nous devons importer cela de la bibliothèque de vues dans notre objet CSS retourné. Ce sera un objet avec toutes ces propriétés CSS que nous pouvons tirer de cette section. Mais d'abord, nous avons quelques valeurs CSS statiques qui ne vont pas changer, mais juste une bordure qui entoure chacun de ces morceaux de texte afin que l'utilisateur connaisse la hauteur de la section comme une chaîne, la largeur d'un pixel, un pointillé une couleur grise, puis séparer chacun d'entre eux par une virgule. Le type d'affichage sera égal à flex. Ce type de flex nous permettra d'utiliser les propriétés flexbox, qui sont terminées dans ces données, et en particulier valeurs pour les alignements tels que JustifyContent et aligner les éléments. Puisque nous retournons maintenant l'objet CSS, nous pouvons tester cela fonctionne dans notre fichier texte. Une propriété de style CSS et définissez cela égal à notre objet. Si nous actualisons maintenant le navigateur, nous voyons la ligne pointillée, donc notre objet CSS prend maintenant effet. Le reste du style à appliquer à ce texte va être dynamique et basé sur les valeurs qui avaient été transmises par nos accessoires. Par exemple, la propriété de couleur CSS, nous pourrions normalement y accéder en utilisant l'objet options avec quelque chose comme this.section. Ensuite, nous pourrions accéder aux propriétés individuelles, mais n'oubliez pas que, en utilisant la composition seton, nous n'aurons plus accès à lire ce mot-clé. La façon de le faire dans la composition est de passer dans les accessoires à la configuration. Cela nous donnera alors un accès direct à nos accessoires, où nous pouvons accéder à la section, puis à l'une de nos valeurs sur cet objet de section, qui est la couleur. Ensuite, la hauteur de la section, props.section.hauteur. Puisque nous travaillons avec CSS, nous devons également ajouter la valeur de pixel. Après la hauteur, nous avons justifyContent, qui est égal à prompts.section.JustifyContent. Aligner les éléments. Ensuite, enregistrez cette section et testez cela dans le navigateur. Bien. Nous voyons que nous avons différentes hauteurs pour ces morceaux de texte. Nous avons une couleur différente. Vers l'avant. Bien, nous avons une hauteur juste ici aussi, et cela est également aligné au centre, donc nos propriétés flexbox prennent effet. Placons également dans la famille de polices et la taille de la police. Taille de la police. Placez dans la virgule, et nous voyons maintenant un texte plus grand, et aussi la famille de polices a été appliquée. Ne vous inquiétez pas de l'espacement entre ces sections ou de la partie inférieure de la page pour l'instant. Nous allons corriger cela avec CSS dans un peu. Bien que nous ayons maintenant terminé avec notre objet de style et cette section calculée gardera l'aperçu de la carte à jour. Lorsque nous mettons à jour la carte à partir de la section d'édition plus tard, toutes ces valeurs seront mises à jour dans notre fonction composable. Ensuite, les valeurs réactives seront transmises vers le bas de la chaîne à ce composant d'aperçu. 113. Composant d'édition de carte: Nous allons jeter un oeil à ce composant create.vue. Au début, nous avons passé dans le CardPreview et aussi le CardEdit. Nous avons également transmis la SelectedPage à ces deux composants. Dans une vidéo précédente, nous avons utilisé cette SelectedPage, en boucle dans chacune des sections, puis je vais mettre le texte dans chaque section. Nous allons faire une chose similaire pour le Cardedit, qui a aussi les mêmes accessoires. Pour cette fois, ça va être sur le côté droit. Le texte va être placé dans une zone de texte que l'utilisateur peut modifier. Nous pouvons également survoler cette section. Nous allons regarder un menu déroulant pour éditer l'un des styles également. Mais cette section, nous installons les composants cardedit.vue tôt. Travaillons sur ce composant en ajoutant d'abord notre action de scripts. J' ai besoin de prendre les accessoires comme un objet, passer dans la SelectedPage, qui est le type d'objet. Mais maintenant ce modèle sera assez simple. Nous sommes juste contenir la place dans un div, qui va contenir un v pour les attributs. Nous pouvons vivre à travers chacune des sections de notre SelectedPage. La clé, nous avons tous une clé unique pour chacune de ces sections que nous pouvons voir dans les données. Nous pouvons accéder à la section.id. Mais je vais passer dans la section.UserInput juste pour vérifier que tout fonctionne. Comme nous venons de le mentionner un peu plus tard, cela a été placé à l'intérieur d'une zone de texte afin que l'utilisateur puisse modifier ce texte, enregistrer ceci et le seul morceau de texte de cette carte est maintenant affiché tout sur la section d'édition. Essayons l'intérieur à droite. Tout cela fonctionne aussi. Une vidéo assez simple, mais nous avons maintenant le texte disponible à l'écran. Dans la vidéo suivante, nous allons remplacer ces entrées utilisateur par un composant séparé. 114. Composant d'entrée de texte et menu déroulant: Actuellement, dans la section Edition, nous sortons simplement les balises de chacune de ces sections, mais comme nous l'avons fait avec le côté aperçu, nous allons remplacer chacun de ces morceaux de texte ou chacun de ces avec des composants autonomes. Ce composant va contenir une zone de texte qui contiendra cette entrée utilisateur afin qu'ils puissent modifier le texte, qui s'affichera ensuite dans l'aperçu. Nous allons également placer dans un menu déroulant, afin que l'utilisateur puisse également modifier ce texte. Ils peuvent ajouter des styles différents et modifier également la disposition et le positionnement. Retour à la barre latérale, nous avons la sortie de texte pour le côté gauche. Nous allons donc créer une entrée de texte pour l'écran d'édition, un modèle, puis un div avec la classe du wrapper d'entrée de texte. Placez dans n'importe quel texte à l'intérieur ici et puis nous pouvons importer cela dans notre composant Code Edit. Jusqu' au script, la saisie de texte. Ceci dans le même dossier, donc ce sera une slash point entrée texte. Dernier dans les objets de composants, remplacez notre entrée utilisateur par ce nouveau composant. Il a également besoin des données de section complète, donc cela peut être un accessoire. Cela nous donne maintenant quelques informations à travailler avec, placer ces scripts section, les accessoires de la section, qui est le type d'objet, puis remplacer notre texte par la zone de texte, déplacer ces. Ensuite, définissez les colonnes par défaut sur 50, puis quatre lignes. Maintenant, voir cette entrée utilisateur à l'intérieur de sa zone de texte. Nous devons maintenant placer à l'intérieur du modèle V, mais rappelez-vous que nous ne pouvons pas muter directement les accessoires. Au lieu de cela, nous devons prendre une copie de cette section. Ensuite, nous pouvons l'utiliser pour notre modèle en V. Cela nous pouvons passer dans la configuration, en prenant les accessoires, puis une constante qui va être une copie appelée la section actuelle. Enveloppez ceci dans une référence. On va passer dans la section des accessoires. Importez cette référence depuis la bibliothèque View, puis renvoyez notre section actuelle de la configuration. Cette section actuelle est maintenant une copie de tous les accessoires, que nous pouvons maintenant utiliser à l'intérieur de v-model. La propriété de cette section est l'entrée utilisateur. Nous allons charger le navigateur et nous avons maintenant nos zones de texte libre, chacune avec les entrées de texte. Aussi, si vous vous demandez ce que ce cercle vert est sur la droite, il s'agit d'une extension Grammarly, qui est disponible pour aider avec toutes les erreurs de frappe. Quelque chose à noter ici lorsque nous tapons dans l'une de ces zones de texte est, l'aperçu actuel sera également mis à jour automatiquement aussi. Je n'ai pas admis d'événements personnalisés. Nous n'avons pas créé de fonctions pour mettre à jour cela, mais cela revient à la référence d'objet que nous avons discutée précédemment. Nous pourrions nous en tenir à cela et permettre à cela de se mettre à jour automatiquement, mais personnellement, je préfère casser la référence et faire une mise à jour manuelle juste pour que nous ayons un peu plus de contrôle sur les mises à jour, et cela le rend un peu plus prévisible. Pour casser cette référence, ce que nous allons faire est de descendre à la configuration et plutôt que de prendre directement une copie comme celle-ci. Nous allons découper ça, créer un nouvel objet, puis les répartir. On peut tester ça, rafraîchir. Maintenant, nous allons mettre à jour ces zones de texte. La section précédente n'est pas affectée. En plus d'obtenir dans ce texte à partir de la zone de texte, nous voulons également fournir un menu déroulant lorsque l'utilisateur passe la souris sur chacune de ces sections. Ce menu déroulant va contenir toutes les options pour changer des choses comme les polices, les couleurs, et aussi le positionnement. Ceci, créez un div à l'intérieur du modèle, juste en dessous de la zone de texte. Si vous dites classe de menu, nous avons besoin d'un moyen de contrôler ce menu qui apparaît. Nous allons ajouter les attributs V-show et définir cette valeur sur Afficher les options. Pour l'instant, juste quelques textes comme le menu est complètement correct. Ensuite, jusqu'à la fonction de configuration, nous pouvons maintenant configurer Show Options pour être une valeur initiale de false. Cela sera également réactif, alors passez la référence et la valeur initiale de false. Ensuite, nous devons retourner cela de notre fonction comme ceci. Nous ne voyons pas encore nos textes de menu. Nous avons besoin d'un moyen de définir cela pour être vrai lorsque la souris survole cette section. Pour cela, nous avons accès à l'événement mouse over. Lorsque la souris passe sur cette section div, nous allons définir, montrer les options pour être égales à true. Ensuite, nous utilisons également l'événement mouse out, qui va définir les options show pour être égales à false une fois que l'utilisateur déplace la souris loin de cette section. Par conséquent, cela va alors fermer le menu comme celui-ci et nous pouvons essayer cela. Sur l'une de ces sections est notre menu, qui disparaîtra alors lorsque nous nous éloignons du menu. Essayons celui-là. Cela fonctionne maintenant pour chacune de nos sections, et ce sont les composants de menu, que nous allons construire ensuite. 115. Ajouter des options de menu: Passons maintenant au menu pour chacune de ces entrées de texte. Nous avons déjà configuré un survol, qui affiche ensuite notre menu, et maintenant nous allons ajouter quelques options à ce menu. C' était un div que nous avons créé dans la dernière vidéo. Entouré à l'intérieur de cette div, nous allons placer dans trois nouvelles sections. Le premier sera un div avec la classe du menu en haut, le second, le menu au milieu, et le troisième, le menu en bas. Il y aura plusieurs options différentes que nous ajouterons à ce menu. Dans cette vidéo, nous allons nous concentrer sur ce menu en haut. Menu haut sera la rangée supérieure de nos options et contiendra la famille de polices. L' utilisateur peut modifier la taille de la police, la couleur de la police, ainsi que les options en gras et en italique. Nous passons d'abord notre option de sélection, qui va regrouper toutes nos familles de polices. Tout ce que nous devons faire en tant qu'attribut est de passer en v-model, qui va lier à notre section actuelle. Ensuite, la famille de polices. La première option. Ensuite, à l'intérieur des valeurs que nous devons écrire dans la famille de polices la même manière que vous seriez en CSS parce que cela va être poussé à notre objet de carte. Tout comme dans nos données, si nous recherchons la famille de polices, ce seront les valeurs finales que nous voyons ici. Le premier, je vais aller pour Times New Roman. Vous pouvez les modifier pour être n'importe quelle famille de polices que vous souhaitez. Aussi le texte d'affichage, dupliquez ceci. Le second de la Géorgie. Le numéro trois sera Arial. Allons un peu fou et ajoutons Comic Sans. Encore une fois, placez ceci exactement la même chose que vous le feriez avec CSS. La famille de polices Verdana pour le numéro cinq. Puis le dernier que je vais placer dans Courier New. D' accord. Essayons ceci, actualisez le navigateur. Il y a notre sélection avec toutes nos familles de polices. Ensuite, juste après cette sélection, nous plaçons dans un nouveau groupe de sélection. Celui-ci sera pour notre taille de police. Encore une fois, cela a besoin de v-model donc nous avons toutes les données pour pousser à notre objet de carte. Nous allons sélectionner la section en cours, puis cette fois la taille de la police. La première option de 1.6 rems. Ensuite, le texte de la normale. Ensuite, le texte de grand avec une valeur de deux rems. Le prochain sera pour 2.5 rems. Le texte est plus grand. Puis plus grand, qui va être trois rems. Ok, essayons ça. Bien. La troisième entrée va être une entrée avec le type de couleur. Modèle V à la section en cours et sélectionnez la couleur. D' accord. Alors ça, puis on y va. Cela nous laisse à présent avec l'italique et les élections audacieuses. Nous allons d'abord ajouter une étiquette. Celui-ci va être une case à cocher imbriquée à l'intérieur de notre sélection audacieuse. Analyse de l'entrée, le type de case à cocher, modèle V. Pour ces deux prochaines options, nous avons les options en gras et en italique, qui sont simplement fondées sur des valeurs. Ce que nous allons faire pour ceux-ci est d'ajouter une entrée à côté d'une image. Maintenant, la raison pour laquelle nous faisons cela est parce que l'image va être l'une des icônes que vous avez dans le dossier assets. Mais nous voulons toujours garder ces données à côté pour des raisons d'accessibilité. Cela signifie qu'il peut être lu par les lecteurs d'écran et aussi garder les interactions du clavier aussi. Mais dans le CSS en un peu, nous allons cacher cette entrée. Nous ne voyons que cette icône juste en dessous. Pour la source ajoutée dans les ressources, et ainsi des icônes. Nous avons une icône fournie qui s'appelle bold.svg et l'icône en gras de texte alt. Ensuite, nous avons également une case à cocher pour le est italique. Pour accélérer les choses, nous pouvons copier cette section, puis changer est gras pour être est italique. Le italic.svg, et aussi le texte alt aussi. Sauvegardez ça. Voyons où ça nous laisse. D' accord. Donc, il semble assez horrible à la minute, mais nous allons corriger cela avec CSS. Il y a nos cases à cocher à côté de nos icônes. Mais comme je l'ai déjà mentionné, nous cacherons cette case à cocher plus tard. Quelque chose à noter ici est, en particulier lorsque vous utilisez Chrome, il peut ne pas être la même dans différents navigateurs. Je crois que ce n'est pas avec Firefox, mais lors de l'utilisation du navigateur Chrome si nous cliquons sur ce sélecteur de couleurs, puis essayons de sélectionner sur les couleurs, tout le menu disparaîtra. Maintenant Chrome détient une énorme part de marché pour le marché des navigateurs, donc c'est évidemment quelque chose que nous voulons corriger. Que se passe-t-il ici lorsque nous passons de cette entrée de couleur au sélecteur de couleur réel ? Le sélecteur est une section distincte. Passer à cette nouvelle section signifie que nous quittons ce wrapper principal, cela déclenche alors l'événement mouse out, puis les masques ont des options. de contournement consiste à surveiller la souris qui quitte cette section du menu supérieur. Puis, une fois de plus, définissez toutes les options de la souris sur true. Ajoutez une souris, laissez les événements à l'intérieur ici. Nous allons définir les options Afficher V égal à true. Sauvegardez et testez ceci. Cliquez sur l'entrée. Maintenant, nous allons nous éloigner de cette section supérieure. L' option Afficher les options est toujours définie sur true, ce qui signifie que nous pouvons toujours voir nos entrées de couleur. Nous avons ceci maintenant corrigé. La dernière chose que nous devons faire est de vérifier si notre section actuelle est mise à jour avec l'une de ces entrées. Je vais placer cela à l'intérieur des accolades doubles dans le modèle. Tout ce que nous avons à faire, c'est d'amender notre texte. Nous voyons que les entrées de l'utilisateur sont modifiées. Cliquez sur ce gras, et cela va basculer ceci juste ici italique. La famille de polices est remplacée par Arial. Enfin, la taille de la police. Tout cela semble fonctionner, et dans la vidéo à venir, nous allons ajouter le reste de nos options de menu. 116. Options de menu Suite: En continuant avec cette section de menu déroulant, nous avons toujours la section centrale et aussi la section inférieure dans notre saisie de texte. Ensuite, si nous allons à ce menu dans la section du milieu, cela va contenir une flèche haut et une flèche bas. Mais maintenant, ils vont juste être un ensemble d'icônes, mais plus tard, ceux-ci déclencheraient une fonction. Pour changer la hauteur de la section, enveloppez-les dans un bouton, et l'icône se trouve également dans le dossier assets, dans les icônes. Celui-ci est la flèche up.svg, le texte alt aussi. Ensuite, le deuxième bouton est pour la flèche vers le bas. Sauver. On y va. Puis enfin, nous avons ce bouton Menu. Ce bouton Menu va être principalement l'alignement, sorte que nous pouvons déplacer le texte de haut en bas, et de gauche à droite aussi. Il s'agira de deux jeux de boutons radio, un pour l'alignement vertical et l'autre pour l'alignement horizontal. Donc, je vais passer une étiquette, qui va envelopper notre entrée avec le type de radio, le modèle, qui va modéliser à la section actuelle. Alors justifiez le contenu. Justifier le contenu contrôlera le positionnement sur la page de gauche à droite. Ensuite, nous passons une valeur. La valeur sera le texte que nous avons passé à notre objet de carte et cela doit être une des valeurs CSS de justification du contenu. Donc celui-ci sera flex-start. Ensuite, le nom de horizontal. Ce nom de horizontal sera utilisé pour relier les trois boutons horizontaux. Ensuite, nous aurons des liens verticaux pour l'alignement vertical. Tout comme nous l'avons fait ci-dessus avec la case à cocher, nous allons aussi cacher cette entrée radio et remplacer ceci par une icône. L' icône va dans les éléments de l'image et le chemin est dans les actifs. Dans les icônes. Le icon.svg gauche et le texte alt aussi. Donc celui-ci contrôle l'alignement gauche et nous allons copier ceci et coller ceci dans deux fois de plus, et le milieu est pour le centre. Donc, nous sommes toujours justifiés n'importe quel contenu, mais la valeur cette fois est centrale. Ces trois boutons sont liés, donc nous gardons le même nom d'horizontal. Cela signifie que l'utilisateur ne peut appuyer que sur l'un de ces boutons à la fois. L' image est le centre, le texte alt. Ensuite, le troisième définira le bon alignement ou en langage flex-box, ce sera la fin flex. L' image a le nom de droite, ainsi que le texte alt aussi. Maintenant, voyons si cela fonctionne bien dans le navigateur. Nous ne pouvons sélectionner qu'un d'entre eux à la fois car ils ont tous le même nom et ceux-ci mettent également à jour notre objet en haut. Donc le prochain groupe sera pour l'alignement vertical. Si nous copions l'un de ces, collez ceci juste en dessous, nous avons quelques changements supplémentaires à faire. Plutôt que de le définir JustifyContent, nous devons changer cela pour aligner les éléments. La première valeur est pour le flex-start, le nom de vertical. Cette icône est pour le haut. Puis il a dupliqué celui-ci deux fois de plus. Le suivant est pour le centre. L' icône a un nom de milieu. Le dernier est pour le fond, qui est la valeur flex-box de flex-end. L' image est bottom.svg. Enfin, le texte alt. Au menu. Ça a l'air plutôt mauvais maintenant, mais essayons ça. Pour chacun d'entre eux, nous voyons le flex-start, le capteur, et aussi l'extrémité flex-end aussi. Maintenant, nous avons ce menu en place et nous savons qu'il est maintenant lié à notre section actuelle. Ensuite, nous allons passer à l'amélioration du style. 117. Styliser le menu: Ce menu a maintenant besoin d'un style et aussi d'une mise en page, que nous voulons faire plus dans le textinput.view, commençant par cette rangée supérieure qui a la classe de menu en haut. Donc, je vais sauter tout en bas, créer la section de style, et également ajouter dans l'attribut scoped. Rappelez-vous que chacune de nos icônes est entourée de l'élément image, donc ce que nous allons faire pour cela est de définir la largeur maximale à 30 pixels. Le menu complet était entouré dans cette classe de menu et c'était un wrapper pour toutes nos entrées. Tout d'abord, définissons la position pour être absolue et en définissant cela comme absolu, cela flottera au-dessus de tout le reste du contenu plutôt que de pousser cela vers le bas. Ce que nous entendons par ceci, si vous allez à un projet, si vous avez plusieurs entrées, comme nous le faisons juste ici, les icônes apparaîtront sur n'importe quel contenu juste en dessous, plutôt que de pousser cela vers le bas de la page. L' arrière-plan. Vous pouvez choisir n'importe quelle couleur qui vous convient, mais je vais placer dans un dégradé linéaire de 30 degrés et les valeurs de RGB 253, 207, 207, ajouter une virgule, et la deuxième couleur de rouge, 140, vert 140 et bleu, 236. Cela a également besoin d'un rembourrage à l'intérieur et nous allons arrondir les coins en bas à gauche et en bas à droite aussi. Rembourrage de 10 pixels et le rayon du corps, nous voulons seulement l'appliquer à deux côtés, sorte que le haut sera zéro, puis trois pixels pour notre fond. D' accord. Ensuite, nous avons enveloppé chacun de nos rôles dans la classe de menu haut, menu, milieu et beaucoup de bas, et nous pouvons utiliser la flexbox CSS pour définir l'alignement sur la page. Toutes ces entrées sont différentes hauteurs, donc nous n'aurons pas besoin d'être sur la même ligne médiane à l'intérieur de notre style. Prenez notre menu haut et aussi, le menu bas, le type d'affichage all flex, puis aligner les éléments dans notre centre. Ensuite, cette rangée du milieu, où nous avons les flèches haut et bas, cela doit être sur la gauche du menu et nous pouvons le faire en définissant le type d'affichage sur flex. Prenez la section du milieu, définissez ceci sur flex, et en définissant cela sur flex, nous aurons les valeurs par défaut de ligne de flux et apparaîtrons également au début de la ligne. Maintenant, nous voulons également supprimer la bordure et l'arrière-plan de ces deux boutons aussi, et aussi changer le curseur pour être un pointeur. Nous pourrions aussi le faire à l'intérieur de ces mêmes composants, mais je vais placer cela à l'intérieur de l'app.vue, et par conséquent, cela s'appliquera également à d'autres boutons aussi. Alors attrapons notre bouton. Retirez l'arrière-plan, retirez la bordure avec aucun, le curseur de pointeur. La taille de la police de 14 pixels, puis supprimez tous les paddings par défaut avec une valeur de zéro. Rafraîchir. D'accord. Donc, cela veut peut-être aussi un peu d'espacement, alors revenez à notre entrée de texte. Prenez le menu milieu, et nous allons sélectionner l'image. La hauteur de 10 pixels, puis un peu de rembourrage. Nous ne voulons pas que ce rembourrage éloigne du bord gauche, nous allons donc appliquer le rembourrage en haut, en droite et en bas. On y va. Cela nous donne maintenant un peu plus d'espacement. Juste pour clarifier, lorsque nous avons ajouté ce style de bouton dans l'application, il n'est pas essentiel que nous placions des styles globaux à l'intérieur ici. Il peut simplement être un endroit pratique pour mettre des styles non délimités si nous n'avons pas une énorme quantité. Si nous avons beaucoup de styles différents, c'est peut-être une meilleure idée d'externaliser cela dans un fichier différent. La prochaine chose que nous allons faire est de retour dans notre saisie de texte et nous allons masquer les cases à cocher ainsi que les boutons radio aussi, même ajuster ces icônes. Souvenez-vous de plus tôt, nous avons dit que nous les laissons pour des raisons d'accessibilité et que l'utilisateur peut également utiliser les commandes du clavier. La raison pour laquelle ceux-ci sont encore accessibles et nous pouvons toujours les contrôler avec le clavier est que nous ne les supprimons pas complètement. Au lieu de cela, nous les cachons simplement avec CSS. Donc, la première étape est de sélectionner notre entrée avec le type de radio, puis aussi notre case à cocher aussi. Ce n'est donc plus visible. Nous allons définir l'opacité pour être égale à zéro, la largeur de zéro aussi, et aussi la hauteur. Voyons si ça marche. Bien. Ceux-ci sont maintenant supprimés et la prochaine chose que nous allons faire est de sélectionner l'image et faire du curseur un pointeur, et pour ce faire, nous allons saisir les deux, ajouter ceux-ci ci-dessous. Utilisez le sélecteur adjacent, qui est l'icône plus, et cela sélectionnera tous les éléments d'image qui suivent cette radio. La même chose pour la case à cocher. Le curseur doit être un pointeur. Cela ne changera pas lorsque nous survolons nos cases à cocher et nos boutons radio. [ inaudible] toutes les entrées de formulaire originales comme celle-ci, nous devons également gérer l'état vérifié et si nous cliquons sur l'un de ces éléments, nous ne voyons pas les boutons sont mis en surbrillance. Donc, si l'utilisateur naviguait avec un clavier, il n'aurait aucune idée de lequel est actuellement actif. Donc, pour corriger cela, nous devons également tenir compte de l'état vérifié. Alors prenez nos deux entrées et l'image. Ensuite, nous allons créer une nouvelle section juste en dessous, mais cette fois, nous allons cibler l'état de vérification. Maintenant, ce que nous allons faire à l'intérieur d'ici est de définir un contour lorsque une de ces images a été cliquée pour que l'utilisateur sache que celle-ci est sélectionnée, de deux pixels, d'une couleur unie, puis d'une couleur pour ce contour. Je vais aller pour la valeur rouge de 119, 123, et aussi 125. Cela se rapproche, mais ce n'est pas tout à fait là pour l'instant. Cela va placer un contour sur le bouton de l'image lorsqu'un utilisateur clique sur l'un d'eux, mais nous voulons également que ce contour apparaisse lorsque l'utilisateur utilise le bouton Tab du clavier pour parcourir ces boutons. Donc, encore une fois, nous allons copier les deux, ajouter une virgule, les coller à nouveau, mais cette fois, l'état de mise au point. Enregistrez ce fichier et plus dans le navigateur, vérifions ceci. la souris sur le menu et instantanément, nous voyons nos contours pour le premier groupe et aussi pour le deuxième groupe aussi. Nous pouvons sélectionner différentes valeurs et celles-ci seront également mises en évidence. Aussi si nous utilisons le bouton de l'onglet Clavier pour parcourir notre site Web, une fois que nous arrivons au menu, nous avons les options, le gras, italique, nos boutons ouverts, puis si nous appuyons sur « Tab » une fois de plus, nous pouvons utiliser les boutons gauche et droit du clavier pour notre premier groupe. Appuyez à nouveau sur « Tab », et le deuxième groupe devient actif. Bien. Juste pour terminer cela, nous allons également ajouter quelques styles à notre zone de texte, ainsi que ces boutons de sélection aussi. Tout d'abord, la zone de texte. Déplacez la bordure par défaut avec aucun. Un petit rayon ennuyé de trois pixels. La largeur de 100 pour cent. Le poids de la police de briquet. Cinq pixels de rembourrage. Aussi pour le dimensionnement, nous allons définir le dimensionnement de la boîte pour être égal à border-box. Puis enfin, ces entrées sélectionnées sont un peu groupées et tout ce que je vais faire est d'ajouter une marge à droite. Cinq pixels devraient être bien, et voilà. C' est le style maintenant terminé pour notre menu, et ensuite, nous allons configurer les mises à jour de la carte. 118. Mettre à jour la carte: Nous pouvons voir de tous ces objets sur les droits ici, que toutes ces sections mises à jour sont stockées à l'intérieur des composants de saisie de texte. Nous pouvons maintenant utiliser ces données pour mettre à jour la carte avec toutes ces nouvelles informations mises à jour. Un bon endroit pour le faire serait fini, à l'intérieur de la carte d'utilisation actuelle. Nous aurons notre carte sélectionnée, qui est notre principal objet de carte. Ce que nous allons faire est de créer une fonction pour sélectionner cette carte, puis nous obtiendrons la page particulière sur laquelle nous travaillons, puis mettre à jour la section à partir de laquelle ces données sont envoyées. Cette fonction va être appelée UpdateCard. Puisque cette carte est un radeau, nous avons attrapé la carte sélectionnée, accéder à la valeur, aller dans le tableau de pages, et l'élément dont vous voulez trouver ou la page que vous voulez trouver est disponible à partir de cette fonction juste au-dessus. Rappelez-vous, cela va obtenir le numéro d'index sélectionné à partir des paramètres des routeurs. On peut appeler cette fonction ici. Après cela, nous voulons mettre à jour une section particulière. Pour cette page, ce sera l'une de ces trois sections. Mais comment pouvons-nous savoir lequel on veut attraper ? Eh bien, actuellement, nous ne le faisons pas. Nous n'avons aucun moyen d'accéder à ces informations, donc nous allons devoir analyser cela lorsque nous appelons la fonction. Cela signifie que cette fonction recevra quelques données. Je vais appeler ça le SectionIndex. [ inaudible] Parallèlement à cela, nous devons également analyser les nouvelles données à cette fonction aussi, qui sera utilisée pour mettre à jour la carte. Nous définirons cette section particulière pour être égale à ces données. C' est tout ce que nous avons à faire pour cette fonction. Maintenant, nous pouvons retourner cela, et ensuite nous pouvons l'appeler avec notre sectionIndex, et aussi les données mises à jour. Placez la UpdatedCard dans notre objet de retour, et les composants que nous devons appeler cela, se trouvent à l'intérieur de la saisie de texte. Comme toujours, nous devons importer notre composable, qui est appelé UseCurrentCard et le chemin du fichier, utiliser le symbole at pour aller dans la source, le dossier composable, puis dans UseCurrentCard. Jusqu' à notre configuration, extrayez ceci dans une constante, et nous avons besoin d'extraire la fonction UpdateCard de la fonction qui est appelée UseCurrentCard. Nous avons maintenant notre fonction en place dans les composants actuels. Mais si nous pensons à cela, quand voulons-nous maintenant appeler cette fonction de mise à jour ? Comment voulons-nous vraiment faire ça ? Nous pourrions passer à la carte et lorsque ce composant se charge, nous pourrions exécuter cette fonction après un certain délai. Nous pourrions exécuter la fonction lorsque le menu est fermé et tant d'autres options. Mais une chose sensée peut être de faire attention à cette section actuelle. Rappelez-vous, toutes nos entrées d'en haut sont liées à cette section actuelle en utilisant le modèle V. Chaque fois qu'une de nos entrées change, les données de la section actuelle changeront aussi. Par conséquent, une option raisonnable peut être de surveiller les modifications apportées à cette section actuelle, puis il a appelé cette fonction de mise à jour. Cela devra importer l'effet de montre ou de montre. Je veux utiliser la montre, puisque l'effet de montre fonctionnera immédiatement, et nous n'avons pas vraiment besoin de cela. notre importation, après la référence, importez notre observateur, puis nous appelons ceci à l'intérieur de la configuration. Ensuite, nous analysons deux arguments dans ce watcher. La première est la donnée réelle que nous voulons regarder, et dans notre cas, c'est la section actuelle, séparée par une virgule. Nous voulons ensuite appeler notre fonction UpdateCard lorsque l'une de ces données change. Analyser cette fonction, et nous appellerons aussi cela. Rappelez-vous lorsque nous avons configuré cette fonction UpdateCard sur dans notre composable, il a également besoin de recevoir deux morceaux de données, l'index de section et aussi la nouvelle section à mettre à jour. Actuellement, nous n'avons pas encore cet index de section, donc nous reviendrons à cela. Mais nous avons les données mises à jour stockées dans notre section actuelle. Nous avons également besoin d'accéder à la valeur car elle est stockée à l'intérieur d'une référence. Cela nous laisse juste avec la tâche de trouver l'index de section actuel. Ce fichier actuel de l'entrée de texte n'a pas le numéro d'index, puisque tout ce que nous faisons est d'analyser dans cette section comme accessoires. Pour obtenir le numéro d'index réel pour cette section particulière, nous devons monter d'un niveau. Cette entrée de texte est appelée à partir de notre carte, composant d'édition. Donc, dans ce fichier comme composant de saisie de texte. Puisque nous parcourons toutes ces sections en boucle, nous pouvons également accéder au numéro d'index 2. Nous avons examiné la façon de le faire tôt. Nous écrivons ceci à l'intérieur des parenthèses, et nous pouvons également accéder au numéro d'index 2. Cela signifie que maintenant nous avons cet index, nous pouvons également le transmettre comme accessoires à notre composant d'entrée de texte. L' indice de section est égal à notre indice. Bon, maintenant revenons à l'entrée de texte et nous avons maintenant un deuxième accessoire à ajouter à cela, qui est l'index de section, qui est un type de nombre. Maintenant, nous pouvons analyser cela quand nous appelons notre fonction. Dans notre configuration, nous avons accès à tous les accessoires, puis à notre index de section. Aussi, assurez-vous simplement que nous regardons la section actuelle de la valeur 2 et plus sur le navigateur, voyons où nous en sommes maintenant avec notre projet. Il nous manque le texte à droite. Maintenant, allons dans la console et voyons ce qui se passe ici. Nous ne pouvons pas définir la propriété zéro de undefined et aucune utilisation de la carte actuelle. C' est notre fonction de carte de mise à jour, nous semblons avoir une erreur juste ici. Voyons ce qui se passe. Nous accédons à la carte sélectionnée la valeur dans les pages, l'index de la page. Nous savons que cela fonctionne parce que nous l'avons utilisé juste au-dessus lorsque nous obtenons la page sélectionnée. Tout ça fonctionne bien. Puis dans les sections. Je pense que cela devrait être juste une section avec un S sur les données. Oui, on a juste besoin d'un S à la fin de notre section. Espérons que nous revoyons notre texte. Bien. Maintenant, essayons d'éditer ce texte, et nous voyons une mise à jour. Ensuite, vous voyez un style de police, les alignements. Bien, cela fonctionne parce que lorsque nous mettons à jour la carte, la valeur de la carte est également réactive. Toute modification est ensuite transmise aux composants qui en ont besoin. C' est pourquoi nous voyons les mises à jour dans l'aperçu de la carte. Mais il y a deux options qui ne fonctionneront pas encore. C' est l'audacieux et l'italique. C' est parce que ces deux sont des cases à cocher qui vont être soit une valeur vraie ou une valeur fausse. Pour faire face à cela, nous allons passer à notre sortie de texte et créer deux nouveaux styles. Ces classes peuvent être activées ou désactivées. Le premier sera pour bold, qui va définir le CSS de la propriété wave pour bold, puis le second est pour italique. Nous allons définir le style de police pour être égal à italique jusqu'au sommet. Tous ont à l'intérieur de notre modèle est notre élément P pour notre texte. C' est ici où nous allons ajouter les classes dynamiques en tant qu'objet. À l'intérieur de cet objet, nous avons maintenant deux classes que vous voulez ajouter. Ce sont nos deux classes qui ont été mises en place en bas. Nous avons audacieux et nous avons l'italique. Maintenant, nous avons besoin d'un moyen d'activer ou de désactiver ces classes, selon que ces cases sont cochées. La façon de le faire, nous allons jeter un oeil à notre objet est que nous avons cette propriété est italique et est également audacieux. Les deux sont disponibles sur notre objet de section. Le premier est le point de section est en gras, puis le point de section est en italique. Cela signifie que si c'est vrai, notre classe audacieuse s'appliquera et aussi la même chose pour Italic aussi. Avant de terminer cela, disons ceci et essayons cela dans le navigateur. Changeons le texte, devenons en gras, et cela fonctionne aussi. Devenez italique et cela activera et désactivera la classe. Nous pouvons également voir si nous allons à différentes entrées de texte que toutes ces sections sont également complètement indépendantes. 119. Ajouter de nouvelles sections: Même si nous avons fourni à l'utilisateur quelques exemples de cartes d'édition, qui sont tous ceux utilisés ici. Nous voulons également les rendre plus flexibles en leur permettant également d'ajouter et de supprimer des sections, commençant par la section « Ajouter dans une nouvelle section de texte », qui est cette section juste ici. Nous allons permettre à l'utilisateur de cliquer sur un bouton et d'ajouter de nouvelles sections juste en dessous. Mais cela nous avons d'abord besoin d'un bouton sur lequel l'utilisateur peut cliquer. Je vais placer ça dans l'édition de la carte. Juste au-dessus de ce V pour boucle, placé dans un nouveau div avec la classe de l'enveloppe de section add. Basé sur un bouton et les effets d'ajouter une nouvelle section de texte. Nous ne voulons pas que l'utilisateur devienne fou et ajoute beaucoup de différentes sections de texte qui ne rentrent pas sur cette page. Donc, ce que nous allons faire est de restreindre l'utilisateur à n'ajouter qu'en quatre sections. À l'intérieur de la fonction, nous nous occuperons également de limiter cela à quatre sections. Mais sur le front-end à l'intérieur de notre modèle, nous allons seulement afficher ce bouton si le nombre de sections est inférieur à 4. Nous avons déjà accès à nos accessoires de page sélectionnés qui auront cette information, saisir la page complète dans les sections et nous pouvons vérifier si la longueur est inférieure à 4. Si c'est le cas, nous apprendrons qu'il affiche ce bouton. Nous avons ces clusters ici, je vais saisir ceci et descendre à la « Section Style », qui peut également être étendue. Avant de le faire, actualisons le navigateur et voyons où ce bouton est placé. Maintenant, cela nous laisse avec un problème. Nous voyons l'erreur de ne pas lire la longueur de la propriété indéfinie. Si nous prenons un peu de recul et réfléchissons à cela, certaines de nos pages n'ont aucune section du tout, comme certaines de l'arrière des cartes et certaines de l'intérieur gauche n'ont pas de sections de texte à afficher. Ici, nous essayons d'accéder à la propriété length de quelque chose qui n'existe pas. Pour faire face à cela, nous pouvons ajouter un point d'interrogation juste après les sections et c'est ce qu'on appelle le chaînage facultatif. C' est tout JavaScript et rien à voir avec VueJS. Ce chaînage facultatif est fondamentalement une façon de dire que parfois ces sections peuvent être là et parfois elles peuvent ne pas l'être. Nous sommes tout à fait conscients de cela, alors ne lancez pas d'erreur. Si nous enregistrons ceci et actualisons maintenant le navigateur, nous voyons que nous ne voyons aucun problème, même si nous n' avons pas de sections telles que ce dos de la page. Avec cette adresse, nous pouvons maintenant revenir à notre section style et nous allons placer cette « Ajouter une nouvelle section de texte » sur le côté droit. Cela fera usage de la flexbox, puis poussera vers la droite avec « Justifier Content Flex End ». Voyez tout de suite, ceci est poussé vers la droite de notre section. Cela nécessite également une certaine marge sur le fond. L' espace est hors du coup de contenu. Le coup de contenu est actuellement le sujet et nous n'avons plus d'utilité pour cela. Nous pouvons aller aux entrées de texte et aussi supprimer cela de notre modèle. Ce bouton et aussi les liens assez libres sur la conversation bénéficieraient également d'un état de vol stationnaire aussi. Lorsque l'utilisateur survole cette option, vous pouvez changer la couleur afin que l'utilisateur sache que c'est cliquable. Puisque nous voulons appliquer ceci à différentes sections, je vais placer cela dans la vue [inaudible]. Puisque cette section de style n'est pas portée, il suffit de souffler le bouton. Passez les états et aussi les mêmes pour tous les éléments de liste aussi. Une seule propriété pour cela définira la propriété color. Cette valeur RVB de 108108241. Votre état de vol stationnaire fonctionne maintenant car nous pouvons maintenant pousser avec la fonctionnalité pour ajouter une nouvelle section. Après cela, nous allons passer à ce que nous utilisons la carte actuelle et créer une fonction qui va mettre à jour notre carte sélectionnée. Vers le bas, créez une nouvelle fonction appelée « Ajouter une section ». Rappelez-vous avant de dire que nous allons limiter le nombre de sections à avant. Mais nous pouvons également nous occuper de cela au sommet de notre fonction. Nous pouvons vérifier si la page sélectionnée, la valeur, les sections, la longueur est supérieure ou égale à 4. Si c'est vrai, retournera alors hors de cette fonction sans exécuter les lignes de code, que nous sommes sur le point d'écrire. Ce que nous allons faire maintenant est de créer fondamentalement un nouvel objet, puis il pousse à notre carte sélectionnée pour garder la même structure que toutes les autres cartes, se diriger vers le point de données js, et copier l'un de ces objets de section. Mais à tous les magasins de fonction sur une constante appelée nouvelle section. C' est égal aux objets. Pour inviter l'utilisateur, nous allons définir l'entrée de l'utilisateur pour être « entrez votre texte ici ». Nous pouvons garder en place une hauteur par défaut, une couleur par défaut, famille de polices et toutes les autres options que nous pouvons conserver comme valeur par défaut. Vous pouvez également les modifier si vous le préférez. Ensuite, ce que nous devons maintenant faire est de sélectionner nos cartes complètes, aller dans la page sélectionnée, puis ajouter chaque nouvelle section. C' est très similaire à ce que nous faisons quand nous avons mis à jour la carte juste ici. Il suffit de souffler notre nouvelle section, recadrer la carte sélectionnée, la valeur dans les pages et nous pouvons accéder au numéro d'index avec notre fonction get page index. Appelez cette fonction dans les sections. Ensuite, nous allons pousser un nouvel élément dans ce tableau. Ce que nous voulons pousser, c'est cette nouvelle section. Retourner cette fonction en bas , puis revenir à notre édition de code où nous pouvons importer ce fichier et aussi accéder à notre fonction est utilisée pour exécuter la carte. Ceci provient de notre dossier composable. Puis interviews carte actuelle. Ensuite, nous avons besoin d'une fonction de configuration pour accéder à cette fonction à l'intérieur d'une constante. La fonction était à la section. Ceci est de l'utilisation de la carte actuelle et enfin ajouter section peut être retourné de notre configuration. [ inaudible] tous les clics peuvent appeler cette fonction qui est notre bouton, je clique, que nous appellerons notre fonction ajouter section. Essayons ça, rafraîchir. Cette page particulière comporte déjà trois sections. Nous essayons d'en ajouter un de plus. Ce sont les quatre sections et notre bouton disparaît maintenant. Essayons l'avant. Avoir une section, 234 et tout cela fonctionne maintenant. Les vidéos à venir, nous suivrons un modèle similaire sur l'utilisation des cartes actuelles. Nous allons créer une série de fonctions pour mettre à jour notre carte sélectionnée, puis appeler cette fonction à partir de nos composants particuliers. La prochaine sera de supprimer une de nos sections. 120. Supprimer des sections: Dans la dernière vidéo, nous avons configuré ce bouton pour ajouter une nouvelle section de texte à l'une de nos pages, et dans cette vidéo à venir, nous allons configurer un bouton pour supprimer l'une des sections aussi. Supprimer une section sera un peu plus simple que de les ajouter puisque si nous regardons nos données, à l'intérieur de l'une de nos pages, ces sections sont placées à l'intérieur d'un tableau. Celui-ci n'a qu'une seule section de texte, mais nous pourrions avoir jusqu'à quatre sections à l'intérieur d'ici. Pour les supprimer, il suffit de connaître le numéro d'index de la section que nous voulons supprimer. Ceci, nous allons créer une fonction dans UseCurrentCard. Allons donc vers le bas et créons notre fonction appelée RemoveSection. Comme nous venons de le mentionner, la RemoveSection devra également prendre dans la sectionIndex lorsque nous appelons cette fonction. Donc, tout comme ci-dessus lorsque nous avons ajouté une nouvelle section, nous devons également saisir la carte sélectionnée, aller dans la page courante, puis dans le tableau de sections. Donc on va bouger ça. Mais cette fois, plutôt que de pousser un nouvel élément dans le tableau, nous voulons utiliser la méthode JavaScript épissure. Avec l'épissure, nous devons lui transmettre deux valeurs. Le premier sera la position à l'intérieur du tableau de l'élément que nous voulons supprimer, et ce sera de la section Index, séparée par une virgule, le nombre d'éléments que nous voulons supprimer. Nous voulons juste supprimer la section unique. D' accord. Ensuite, retournez cette fonction. Cette fonction va être appelée à partir du composant de saisie de texte. Notre composable a déjà été importé, donc tout ce que nous avons à faire est d'importer ou d'extraire notre fonction, qui est RemoveSection. Aussi, le retour est de sorte que nous pouvons l'utiliser à l'intérieur de notre modèle. RemoveSection, comme nous venons de le voir aussi, nécessite le sectionIndex lorsque nous appelons cette fonction. Ce composant a déjà ceci disponible à l'intérieur des accessoires. Donc maintenant, nous pouvons aller jusqu'au haut de notre modèle et juste au-dessus de la zone de texte, créer une nouvelle section qui va envelopper notre bouton pour supprimer la section. Pour le style, placez dans la classe, text-input-header. Ensuite, à l'intérieur, nous allons placer dans un bouton. A côté de ce bouton de suppression, nous ajouterons également certains des autres boutons plus tard aussi. Mais maintenant, nous avons juste besoin du bouton unique avec un x, qui va écouter un clic. Alors déclenche notre fonction. Passez dans le SectionIndex, qui est notre accessoire. Allez dans le navigateur et testez cela. Cliquez sur le X. Ceci est maintenant supprimé. Allons à une autre carte et retirons la carte du milieu. Puisque tout est réactif, suppression de ceux-ci mettra également à jour l'aperçu. Aussi juste comme une note de côté avant de terminer cette vidéo, si nous allons dans la console, nous voyons que nous sommes actuellement criés par la bibliothèque de vues parce que nous utilisons une fonction de montre et c'est juste à cause de la façon dont nous avons structuré cette Watcher. Si nous descendons, ce watcher attend une fonction de rappel comme deuxième valeur. Donc, pour supprimer celui-ci, ce que nous devons faire est de supprimer cette fonction directement. Créez une nouvelle fonction UpdateCard ci-dessous. Passe-le ça. Ensuite, nous pouvons simplement appeler cette mise à jour comme un rappel. Allez dans le navigateur. Ouvrez les outils de développement, dans la console, et cela se débarrasse maintenant de notre message d'erreur. 121. Réorganiser l'ordre des sections: Si nous avons plusieurs sections de texte comme nous le voyons ici, sur le côté droit, il peut être utile de placer également dans un bouton haut et bas pour réorganiser l'ordre des sections. Pour ce faire, nous allons aller jusqu'aux entrées de texte et ensuite il a besoin tout en haut. Dans la dernière vidéo, nous avons créé cette section. C' était pour notre en-tête. Ensuite, juste au-dessus de ce bouton, créez une nouvelle section div, qui sera un wrapper pour ces deux boutons haut et bas. Le premier, nous allons maintenant la liste pour un clic, qui va déclencher une fonction que nous n'avons pas encore créée, mais cela s'appellera UpdateSectionOrder. Cette fonction va prendre deux choses. Le premier sera le SectionIndex, qui provient des accessoires, et la fonction dont nous aurons besoin afin qu'il sache quelle section nous voulons déplacer. La deuxième valeur est la direction que nous voulons déplacer cette section. Donc, si nous pensons à cela, c'est un tableau. Donc, ce sera la position d'index 0, ce sera un, et ce sera deux. Donc, pour déplacer l'une de ces sections vers le haut, nous devons passer une section négative pour nous pousser dans le tableau. A l'intérieur de notre bouton, nous allons placer dans une icône à l'intérieur de l'élément image. La source est le symbole at dans les actifs, les icônes, et nous avons une icône appelée arrow-up.svg, le texte alt de flèche vers le haut, puis il dupliquer ce bouton pour le prochain et placer ceci juste après. Cela appellera la même fonction, mais cette fois nous aurons une fonction positive, la flèche vers le bas, et la même chose pour le texte alt. D' accord. Il y a nos deux boutons, mais cela a aussi besoin d'un peu de style. Cette section encapsulera tous les boutons en tant qu'en-tête de saisie de texte classique. Je vais attraper ça et le nicher à l'intérieur. Nous avons notre div et aussi ce bouton aussi. Nous pouvons faire usage de la flexbox et aussi de l'espace entre la propriété pour aligner cela sur la page. En bas dans la section style, j'ai fait notre classe. Tout d'abord, le type d'affichage du flex. Cela nous donnera la direction flexible par défaut de la ligne, donc cela sera placé sur la page. Juste par contenu, nous allons ajouter l'espace entre les deux, puis un peu de rembourrage sur le fond. Ensuite, réduisez la taille des images en ciblant le même wrapper, puis les éléments de l'image. Largeur de 15 pixels, ce qui réduira la taille de nos icônes. Un peu de rembourrage à droite de cinq pixels. Il suffit de jouer un peu d'espace entre chacune de ces icônes. D' accord. Maintenant, nous devons configurer cette fonction dans UseCurrentCard. En bas, fonction, appelez cette UpdateSectionOrder. Cela était également passé la sectionIndex comme première valeur, et la seconde était la direction, qui était soit positive, soit négative. Il est positif ou négatif un nombre que nous allons utiliser pour mettre à jour la position de l'index des sections. La première étape consiste à créer un tableau qui va contenir toutes les sections de cette page. Tout comme ci-dessus, nous pouvons accéder à nos sections avec cette partie du code, copier ceci. Juste en dessous de cela avant d'effectuer réellement ce commutateur, nous devons également vérifier si ce commutateur est réellement possible. Par là, nous voulons dire que si nous mettons à jour le haut et que nous cliquons sur le haut, cela n'a nulle part où aller. La même chose pour le bas aussi si nous cliquons sur le bas, nous n'avons pas de section ci-dessous pour le remplacer par. Donc, pour éviter cela, nous allons placer dans une déclaration if, coller dans nos sections. Ensuite, à l'intérieur, si nous passons dans notre SectionIndex plus la direction, alors nous allons vérifier si cela est égal à indéfini. D' accord. Donc, juste pour clarifier ce que nous faisons ici, nous saisissons toutes nos sections sur cette page. Nous voulons nous protéger contre ce soit la première ou la dernière section où ce que nous faisons est de saisir la section actuelle. Donc, si c'était le premier, il sera positionné zéro. Si l'utilisateur a cliqué sur le bouton haut, ce sera zéro, puis négatif. Si tel était le cas, cela équivaudrait à indéfini, donc ce serait alors vrai. Si SectionIndex, cependant, était notre toute dernière zone de texte, dans ce cas, ce sera la position d'index 2. Si la direction était positive, ce serait alors le numéro d'index 3, qui n'est pas disponible donc nous retournerions indéfini. Si même l'un d'entre eux est le cas, nous voulons le retourner de cette fonction sans mettre à jour nos sections. Sinon, la fonction continuera à fonctionner, et si nous atteignons cette étape, nous pouvons maintenant changer toutes les positions. C' est vraiment juste une question de changer les positions d'index de deux éléments de tableau. Ces deux éléments de tableau sont la section fiscale sur laquelle nous avons cliqué et aussi la section fiscale qui est à l'endroit où nous voulons le déplacer. C'est à ça que ça ressemble. Nous devons créer un tableau, qui est égal à un autre tableau. Nous allons définir notre taux de change pour être égal à un autre. Ce premier, qui est le tableau actuel, va prendre deux choses. abord, l'élément de tableau que nous voulons déplacer, auquel nous pouvons accéder avec tableau, puis en passant notre sectionIndex, puis séparé par une virgule, sélectionnez l'élément de tableau que nous voulons remplacer. Donc, nous allons attraper notre tableau, mais cette fois nous allons passer dans le SectionIndex plus la direction. Ensuite, nous faisons le contraire dans le deuxième tableau, donc nous basculons autour des positions. La première découverte est notre tableau, passez le SectionIndex plus la direction, puis remplace par le tableau SectionIndex, et renvoyez cela de notre fonction, puis importez cela dans notre entrée de texte. Nous accédons déjà à notre fonction UseCurrentCard, mais nous passons simplement notre UpdateSectionOrder. Ce nom correspond à la fonction qui est placée en haut. Donc, lorsque nous cliquons sur l'un de ces boutons, ils devraient maintenant mettre à jour nos numéros d'index. Essayons ceci dans l'une de nos sections. Maintenant, nous pouvons cliquer vers le bas sur la section supérieure, il se déplace maintenant vers le milieu. Cliquez à nouveau sur la section supérieure, et celui-ci, je vais échanger les numéros d'index. Regardez sur la section inférieure et cela fonctionne, et aussi tester contre nos gardes pour la section inférieure. Si on clique dessus, rien ne se passe. Si nous cliquons sur la boucle sur la section supérieure, cela fonctionne également très bien. Cela mettra également à jour la section d'édition et la section d'aperçu puisque tout est réactif, mais nous avons un petit problème cependant. Si nous allons à l'une de nos pages qui n'a pas de nouvelles sections, nous ajoutons quatre nouvelles sections ici. Cela peut être le numéro 1, le numéro 2, le numéro 3 et le numéro 4. Essayons de mettre à jour ceci. Si nous cliquons sur le bouton haut et vers le bas, nous ne voyons rien en cours de mise à jour sur ce côté d'édition. Maintenant, cela revient à quelque chose que nous avons appris plus tôt, qui est l'ajout de clés à notre boucle v-for. Lors de la mise à jour d'une liste d'éléments comme celui-ci, v aura besoin d'une clé unique pour être en mesure de mettre à jour efficacement. Nous n'avons pas encore placé d'identifiant sur nos nouvelles sections. Nous pouvons voir que cela ira à l'édition de la carte et dans notre boucle v-for. Chacune de ces clés repose sur un ID de section. Pour générer un ID pour cela, allez sur notre UseCurrentCard et nous pouvons placer dans un champ d'identification à l'intérieur de notre nouvelle section. Comment générons-nous un identifiant unique ? Si nous utilisons une base de données, ce serait relativement simple. La base de données en générerait une pour nous. Nous pourrions alors récupérer l'article sauvegardé et le stocker dans notre nouvelle section. Pour notre cas, nous devons en générer un à l'intérieur de l'application. Pour cela, nous allons importer un nouveau paquet, alors ouvrez le terminal. Hôte sur ce serveur avec Command ou Control C, puis nous allons installer un nouveau paquet avec npm, j'ai installé, et le nom du paquet est UUID. Ce paquet va générer un ID unique pour chacun des éléments. C' est vraiment simple à utiliser. Si nous allons en haut de ce fichier, nous allons importer ce module. Nous allons importer la version 4 en tant que uuidv4 de notre paquet, qui est UUID. Maintenant, nous avons importé notre version 4 et nous allons pouvoir y accéder avec cette variable juste ici. Maintenant, si nous allons à l'autre section et définissons cela égal à notre nom qui est uuidv4, puis appelons cette fonction afin que nous générions un nouvel ID. Essayons ça. Maintenant, nous devons redémarrer le serveur avec npm run serve, ouvrir le service et ajouter quatre nouvelles sections ; numéro 1, numéro 2, numéro 3, numéro 4. Cliquons vers le haut, cela va se déplacer vers le haut. Encore une fois, essayons. Tout cela fonctionne maintenant correctement. 122. Modifier la hauteur de section: Lorsque nous avons créé le menu lorsque nous survolons cette zone de texte, nous avons également ajouté quelques boutons pour augmenter ou diminuer la hauteur de la section. Nous pouvons maintenant l'utiliser et créer la fonction pour faire ce changement. Cela va rendre chacune de ces zones de texte encore plus petites ou plus grandes. Ce [inaudible] à notre menu, qui est à l'intérieur de la saisie de texte, et puis je vais faire une recherche pour le milieu du menu. C' est la section dont nous avons besoin, juste ici, nous avons nos boutons haut et bas. Le bouton qui doit [inaudible] pour un clic, qui va déclencher une fonction lorsque vous n'avez pas encore créé appelé hauteur de changement. Cette fonction va prendre le nombre de pixels que nous voulons augmenter ou diminuer la hauteur de. Je vais le placer à 100 bien que ce bouton augmente la hauteur de cette section. Au cours de cela, l'endroit est dans notre deuxième bouton mais cette fois nous allons diminuer la hauteur de 100 jusqu'à la configuration. Créons cette fonction. C' est en bas. C'était la hauteur de changement, qui acceptera la valeur et ce sera soit un positif ou un négatif 100 pixels. La première chose que nous voulons faire est de stocker la hauteur actuelle de la section ou nous pouvons extraire cela de notre section actuelle. C' est [inaudible] donc nous devons également accéder à la valeur, puis à la propriété height. Juste avant de mettre à jour cette section de la haute ville, nous allons passer un garde. Nous voulons éviter que la section soit trop petite ou trop grande. Après cela, nous allons vérifier si la section va être réduite à une hauteur de zéro ou augmentée au-dessus de 600 pixels, qui est la hauteur de cette carte. Pour ce faire, placez dans les instructions if, nous allons vérifier si la hauteur actuelle que nous avons juste au-dessus est actuellement égale à 100 pixels et la valeur est égale à 100 négatifs. Donc, cela vérifie si la hauteur actuelle de la zone de texte est 100 pixels et aussi si l'utilisateur a cliqué sur le bouton de diminution. Cela entraînera une hauteur actuelle égale à zéro. Nous ne voulons évidemment pas cela, donc nous devons vérifier contre cela et aussi le contraire si nous sommes à la hauteur maximale. Donc, si la hauteur actuelle est égale à 600 pixels, et aussi si la valeur qui est passée à cette fonction est égale à 100, si c'est le cas, nous allons retourner alter dysfonctionnement sans exécuter de code. Cela a jeté une erreur et je pense que nous avons juste besoin d' envelopper toute la section à l'intérieur des crochets. Mais si nous arrivons à ce stade ci-dessous, cela signifie que nous pouvons maintenant mettre à jour la hauteur. Pour mettre à jour cela, nous allons mettre à jour cette section actuelle, nous devons accéder à la valeur, puis à la propriété height, et nous allons définir ceci égal à notre hauteur actuelle plus la valeur, qui sera [inaudible] 100 pixels supérieur ou inférieur de 100 pixels. C' est en fait tout ce que nous devons faire pour cette fonction parce que si nous mettons à jour la section actuelle juste ici, nous avons déjà un observateur placé sur cela, qui mettra ensuite à jour notre composable. Cela signifie que nous avons juste besoin de retourner cela de toutes les fonctions, alors nous pouvons tester cela. Pour le premier, augmentez la taille, allons l'agrandir, et nous pouvons aussi diminuer la taille. Si nous continuons à cliquer, nous ne pouvons pas réduire cela moins de 100 pixels et aussi si nous augmentons cela, il atteint une taille maximale aussi. 123. Stylisation supplémentaire: Cette vidéo va se concentrer sur la finition de certaines touches CSS que nous devons ajouter à notre projet, commençant par la police dans app.vue. Actuellement, nous avons cette police qui est juste ici, et vous êtes libre d'utiliser celle-ci si vous préférez, ou toute autre famille de polices. Avec le projet de démarrage, si nous allons dans le index.html, à l'intérieur de la section d'en-tête, nous avons ce lien vers deux familles de polices différentes. Ce Merriweather est celui que je vais placer à l'intérieur de l' app.vue et nous avons déjà utilisé cette overblown tôt à l'intérieur de l'en-tête. Nous pouvons voir cela si nous allons dans l'en-tête de l'application. C' est la police que nous avons définie pour cette section. Mais revenons à l'app.view. Placons dans la police Merriweather, avec un repli Serif, juste au cas où il y aurait des problèmes de chargement de cette police. En outre, nous allons ajouter cette police à l'entrée, ainsi que la zone de texte aussi. Il suffit de copier ceci. La raison pour laquelle nous faisons cela est que par défaut, les entrées n'héritent pas automatiquement les polices. Donc, nous devons aussi les mettre comme ça. Sauvons ça. Cette nouvelle police est maintenant entrée en vigueur. À l'intérieur de cette vue de création, que vous pouvez voir juste ici, nous avons également quelques problèmes à résoudre. Nous avons ces énormes boutons de page qui ont besoin de s'aligner sur le haut, et aussi réduire la taille aussi. Nous avons également un espacement entre chacune de ces sections de texte et cela entraîne également la poussée des sections hors de la page, vers le composant de sortie de texte. Nous traiterons d'abord de ces sections de texte en supprimant toutes les marges par défaut et en tirant parti de la taille des boîtes. La section start est entièrement enveloppée dans l'élément p. La marge par défaut sera remise à zéro. Enregistrez ceci et vérifiez que cela fonctionne. Chacune de ces sections P est également entourée dans la frontière. Rappelez-vous lorsque nous ajoutons une bordure à n'importe quel élément HTML, il l'ajoutera également à la taille globale. Pour éviter cela, nous pouvons définir la taille de la boîte pour être border-box. La prochaine chose à faire est de sortir de ces quatre boutons pour changer les pages. Cela a son propre composant, qui est la SwitchPage.Vue. Nous aurons une liste assez standard non ordonnée. Nous pouvons utiliser la flexbox CSS à l'intérieur de la section Style. Il y a nos liens placés sur la page parce que la direction flexible par défaut est ligne et je pense que nous avons juste besoin de déplacer ces liens juste en dehors de la section de la carte. Nous pouvons voir ceux-ci ont cette couleur de fond gris. Mais nous allons juste aller à la section Créer, qui est dans les vues. Je pense que nous allons simplement soulever ces composants de page de commutation pour être en dehors de l'emballage. Cela sera placé juste au-dessus de toutes les sections de cartes. Si je passe au style à l'intérieur du composant de page de commutation, continuez à travailler avec la liste non ordonnée en ajoutant une marge en haut et en bas, de 1,6 grammes, puis zéro à gauche et à droite. La prochaine chose que nous devons faire est de réduire la taille de chacune de ces icônes et également aligner le texte au centre de cette icône. Chacun de ces liens avait la classe de sélection de page, et nous pouvons utiliser cette classe pour réduire cette taille d'icône. Tout d'abord, les alignements feront usage de la flexbox, puis définiront l'alignement vertical avec les éléments de ligne au centre. Il y a notre alignement vertical, et ensuite, une marge sur le côté droit de 10 pixels. Cela va nous donner un peu d'espacement sur le côté droit de chacun de ces liens. Ensuite, l'image. La largeur maximale de cette icône de cette image sera de 30 pixels. Cela devrait réduire la taille de nos icônes vers le bas. En outre, si nous ajoutons une marge à gauche, cela nous ajouterons un peu d'espace entre l'image et le texte. Bien. Ce projet semble maintenant un peu mieux, et vous êtes également libre d'aller de l'avant et de changer tous les styles que vous souhaitez juste quelques styles de base pour améliorer l'apparence globale et la sensation. Juste avant de terminer cette section, nous allons maintenant examiner l'utilisation de fournir et injecter avec l'API de composition. 124. Fournir et injecter avec la composition: Fournir et injecter est quelque chose que nous avons déjà examiné avoir une source de données dans un composant de niveau supérieur, puis l'injecter directement dans n' importe quel composant enfant sans avoir besoin de transmettre des accessoires à chaque niveau de composant. Nous pouvons également l'utiliser avec l'outil de composition. La fonction de configuration peut accepter soit fournir soit injecter. L' un des problèmes précédemment soulevés était que les données fournies n'étaient pas réactives. Lorsqu' il y a eu une modification des données à l'intérieur de ce fournisseur, aucun des composants enfants au-dessous qui s'y appuyait n'a pas été mis à jour. Mais maintenant, nous connaissons la vue libre, l'API de composition et aussi la réactivité, nous pouvons maintenant faire usage de cela pour résoudre ce problème. Plus sur les composants de vue de mise à jour et je vais vous montrer comment nous pouvons utiliser cela avec la composition. Rappelez-vous qu'un fournisseur peut être placé dans n'importe quel composant, pas seulement dans cette vue de mise à jour principale. Tout d'abord, nous avons besoin d'une fonction de configuration avec quelques données. Placez ceci à l'intérieur de notre section de script, puis à nos fins de démonstration, créez un objet utilisateur avec la propriété name et aussi l'occupation. Puisque c'est notre composant de haut niveau, nous allons placer dans le fournisseur à l'intérieur d'ici. Pour ce faire, nous devons importer cela à partir de la bibliothèque de vues. Ceci est fourni à partir de la bibliothèque de vues. Ensuite, jusqu'à la fonction de configuration que nous pouvons placer dans notre fournisseur, qui va prendre deux choses. Le premier est le nom de ces données, et c'est comme un nom de variable. Le suivant est l'utilisateur. Ensuite, séparés par une virgule, nous allons transmettre les données réelles que vous voulez envoyer. Dans notre cas, cela fait référence à nos objets utilisateur. A l'intérieur de l'un de ces composants enfants, lorsque nous injectons dans l'utilisateur, ce sont les données qu'il recevra. Pour enregistrer ce fichier, je vais passer à la sortie de texte. Nous avons déjà une fonction de configuration et nous avons également une importation juste ici, donc nous pouvons également importer injecter ici, et ensuite nous pouvons injecter cet objet utilisateur vers le bas à la configuration, créer une constante. Pour stocker cela, données utilisateur, accès injecter. Ensuite, quand il transmet les données que vous voulez injecter, et dans notre cas, nous donnons ce nom à l'utilisateur. Passez ceci sous forme de chaîne. Nous pouvons également ajouter une deuxième valeur facultative deux, qui est une valeur par défaut. Comme lorsque nous utilisons ces slots tôt lorsque nous avons ajouté un morceau de données par défaut ou de secours, je vais juste alterner une chaîne de données sans données disponibles. Le retour est une constante de données utilisateur vers le bas. Nous pouvons vérifier que cela fonctionne en sortant cela à l'intérieur de notre modèle, sur le navigateur et recharger ceci, et il y a notre objet en haut de chacun de nos composants de sortie de texte. Maintenant, la réactivité était un problème tôt lorsque nous avons examiné fournir et injecter, avec l'API d'options, voyons comment cela se compare avec la composition. Retour à notre application point vue, nous pouvons simuler les données obtenues avec set timeout comme fonction NA, que nous appellerons après trois secondes. Ce que je veux faire à l'intérieur d'ici est de commencer à utiliser des objets, accéder à la propriété name et définir ceci sur une valeur différente. On peut essayer ça avec un rafraîchissement. Donnez ça trois secondes. Nous ne voyons aucune mise à jour à l'intérieur de ce composant enfant. Même avec la composition fournit et injecter n'est pas réactif par défaut. Mais comme nous le savons déjà, la composition nous donne accès à des enveloppes réactives, sorte que nous pouvons utiliser soit rugueux ou réactifs. Dans cette occasion, je vais aller pour réactif, à l'intérieur de l'application point vue et tirer ceci. Cela va maintenant être un wrapper pour nos objets d'utilisation. Découpez le contenu de l'objet, placez en réactif, collez-le à l'intérieur des crochets. Enregistrez ceci encore et encore dans le navigateur, actualisez. Donnez-lui trois secondes, et notre nom est maintenant mis à jour. Si nous avions plusieurs morceaux de données à transmettre aux composants enfants, nous pourrions également mettre en place plusieurs fournisseurs, comme celui-ci ici, ou bien nous pourrions transmettre toutes nos données dans un gros objet réactif, et puis passez ceci au fournisseur. C' est ainsi que fournir et injecter fonctionne avec la composition. Nous n'avons pas besoin de cela pour nos projets, donc je vais supprimer la fonction de configuration, les importations, nous avons aussi l'injection à l'intérieur de la sortie de texte, déplacer les données utilisateur, l'importation, les données utilisateur, puis enfin, notre objet retourné. Les cas d'utilisation pour fournir et injecter peuvent ne pas être aussi courants maintenant, car nous avons également la possibilité d'utiliser des fichiers composables , puis de les importer directement dans des composants enfants. Mais ce n'est pas une option et une nouvelle façon de transmettre nos données, surtout si nous avons peut-être une application plus petite, nous ne prévoyons pas de diviser notre code en fichiers composables plus petits. Nous avons poussé à travers un peu de code de projet dans cette section, et notre projet est presque entièrement fonctionnel. Dans la section à venir, nous allons découvrir que quelques fonctionnalités plus cool de vue.js Et aussi le routeur de vue fournit. 125. Section Intro - Protections de navigation et chargement paresseux: Parfois, dans notre projet, nous ne voulons pas que l'utilisateur visite tous les endroits que nous avons ou nous voulons parfois fournir des vérifications pour voir si l'utilisateur est réellement autorisé sur un itinéraire donné. Dans cette prochaine section, nous allons jeter un oeil aux gardes de navigation, qui est fourni avec le routeur Vue. Nous allons également examiner une technique jamais vraiment utile appelée chargement paresseux, qui nous permettra de diviser notre application en morceaux plus petits pour améliorer le temps de chargement de la page. 126. Protections de navigation: cadre du package de routeur de vue que nous avons installé, nous pouvons utiliser des protecteurs de navigation lors du changement d'un itinéraire à l'autre. Vous pouvez penser à un garde de navigation comme quelqu'un debout à la porte d'un club, demandant de voir une pièce d'identité avant de pouvoir entrer. En termes de code, cette identification, il peut être quelque chose comme si l'utilisateur est connecté, s'il a les autorisations correctes ou même des choses comme permettre un utilisateur d'accéder à une zone de téléchargement s'il a acheté cet élément particulier. Nous pouvons essentiellement exécuter n'importe quel code que nous aimons avant ou après un changement de route. Il y a différents gardes disponibles, mais jetons un coup d'oeil à certains des plus communs, commençant par si nous voulons appliquer une garde contre toute notre route, avec cela, nous pouvons utiliser une garde globale qui est appelée AvanceEach. Nous faisons cela sur notre fichier de route, et ceci est à l'intérieur du routeur, puis le index.js. Sous la matrice de notre route, nous pouvons accéder à notre routeur avec ces constantes de routeur. Nous devons aller juste au-dessous de cela, nous pouvons alors accéder à ce routeur et ensuite appeler le garde, qui est avantEeach. BeforeEach est un garde de navigation mondial donc il s'appliquera à toutes les routes de notre projet. Quand est un changement, nous allons fournir une fonction de rappel, et c'est à l'intérieur de cette fonction que nous pouvons intercepter ce changement de route et ensuite il exécute du code. À titre d'exemple très basique, nous pouvons retourner false à l'intérieur cette fonction et cela arrêtera tout changement de route se produisant. Nous ne pouvons même pas charger notre application. Nous ne pouvons pas cliquer sur le bouton Accueil et aussi ces liens de catégorie ne fonctionnent pas non plus. Mais c'est à son plus basique. C' est ainsi que nous bloquons un changement de route et comme ce n'est pas très spécifique, cela s'appliquera à tous les changements de route. BeforeEach nous donne également accès aux détails de l'itinéraire, où vous allez et aussi à l'itinéraire que nous partons. Nous allons les transmettre dans nos fonctions avec et depuis. Comme cela semble, la valeur vers est l'itinéraire où vous allez et le départ est celui que nous partons. Voyons voir à quoi ils ressemblent. Passer les variables à, puis aussi les variables de partir. À la console. Ce sont nos deux objets. Le premier est l'itinéraire où vous allez et ce n'est que la route principale. Cela a du sens. Le second est les objets from, et puisque nous ne modifions pas les routes, c'est toujours une barre oblique par défaut par rapport à si nous supprimons l'instruction return et de basculer entre ses routes about. Nous passons de la page d'accueil à notre catégorie, et nous pouvons voir cette catégorie si nous cliquons sur la section, et nous nous engageons à partir de l'itinéraire d'origine. Ces objets nous donnent accès à des choses telles que le chemin complet de l'itinéraire, les requêtes, le nom de nos routes, les paramètres, et ceux-ci sont tous entièrement accessibles depuis notre fonction, et cette information signifie que nous pouvons être plus spécifiques avec quelles routes nous voulons garder. Par exemple, au lieu de regarder toutes nos routes à l'intérieur d'ici, nous pourrions surveiller la présence d'un utilisateur entrant dans une route admin. Nous pouvons ajouter une instruction if à l'intérieur d'ici et nous pouvons accéder à notre valeur à, puis sélectionner notre nom. Ce nom, comme la catégorie juste ici, est un nom que nous donnons à la route à l'intérieur de notre tableau juste au-dessus. On peut accéder à l'administrateur. Si to.name est égal à admin, et assurez-vous que c'est bien le nom d'en haut. Si cela est vrai, nous allons renvoyer une alerte à l'utilisateur avec le texte « Cette zone est réservée aux utilisateurs connectés uniquement. » Vérifions cela dans le navigateur. Nous n'utilisons aucune des variables, donc nous pouvons également supprimer cela. Tout l'itinéraire semblait fonctionner très bien, et passons à /Admin, et voici notre alerte. Une fois que nous cliquons sur « Okay », nous sommes toujours pris à cette voie d'administration. Actuellement, nous ne bloquons pas l'utilisateur, nous affichons simplement une alerte. En réalité, bien que nous voulions peut-être vérifier si l'utilisateur est connecté ou a des privilèges d'administrateur, plutôt que simplement une alerte. S' il n'y avait pas d'accès autorisé, nous pourrions soit retourner false, soit même retourner une méthode de redirection de routeur, telle que la méthode push, et la façon de le faire est d'accéder également à la variable relative, et alors nous avons toujours pour faire des choses telles que la méthode push que nous avons examinée plus tôt. Cela signifie que si l'utilisateur essaie d'accéder à cette route d'administration, nous pourrions alors les rediriger vers la page d'accueil. Nous sommes sur la page d'accueil pour le moment. Mais si nous allons à l'administrateur, Cela nous poussera ensuite à la page d'accueil. Avec cela avant chaque garde qui est exécuté avant le changement de route. Nous avons également AfterEach à, et c'est un crochet qui fonctionne une fois la navigation terminée. Comme la navigation a déjà eu lieu, il ne peut pas non plus apporter de modifications telles que la redirection ou le blocage de l'itinéraire. Ou au lieu de cela, nous pouvons peut-être l'utiliser pour des choses telles que le suivi des visites d'un utilisateur à une page particulière ou même la modification de certains détails de la page après son chargement. Il peut également prendre en charge les données vers et depuis si nécessaire et ces deux gardes sont considérés comme globaux car ils fonctionneront pour chaque changement de navigation. Si nous ne voulions pas qu'ils soient globaux, nous pouvons aussi les placer directement sur un seul itinéraire. Je vais juste commenter cela et laisser ceci pour une référence. Mais nous pouvons également placer cela dans n'importe laquelle de nos routes de composants aussi. qui signifie que si nous voulions seulement protéger cette route d'administration par exemple, nous pourrions à la place placer directement un garde sur cet objet. Le garde pour cela est appelé avant d'entrer et puis nous configurons une méthode qui va s'exécuter chaque fois que nous essayons d'entrer dans cette route admin. Tout comme avant nous pouvons faire des choses telles que retourner un faux pour bloquer tout accès à cette route. La page d'accueil fonctionne, la catégorie travaille, la caisse fonctionne. Mais si nous essayons d'entrer dans l'administrateur, nous pouvons voir que le composant n'est pas chargé puisque nous n'avons pas le titre admin. Cela pourrait également prendre dans les variables vers et aussi de partir si nous avions besoin d'accéder à cette information. Mais de façon réaliste, nous ferions à nouveau quelque chose comme vérifier si l'utilisateur est connecté avant de charger réellement cette route. Nous n'avons actuellement pas accès à un utilisateur pour ce projet, mais nous pouvons en simuler un pour cet exemple. Juste au-dessus des routes qui seraient des constantes appelées connectées, qui seront initialement fausses. On peut alors utiliser ça à l'intérieur de notre garde. Au lieu de renvoyer false directement, nous allons d'abord vérifier si l'utilisateur n'est pas connecté avant de bloquer cette route. Rappelez-vous que c'est actuellement faux. Donc, si nous essayons de rafraîchir, nous ne voyons aucun accès à ces composants. Si nous changeons cela à true, nous avons maintenant accès à notre administrateur. Ce type de garde ne se déclenchera également que sur un changement de route complet. Ce qui signifie que le changement d'itinéraire doit déclencher un nouveau composant. Il ne fonctionnera pas si nous avons juste un changement de la requête ou le changement de paramètres dans l'URL. Tout comme auparavant, quand nous avons dû les modifier manuellement, passant presque d'une catégorie à l'autre. Eh bien, pour cet exemple, nous restons toujours sur les composants de la catégorie, mais nous changeons juste les paramètres. ce cas particulier, la garde ne fonctionnera pas puisque nous sommes sur les mêmes composants. Une autre chose utile que nous pouvons faire avec ces gardes est déplacer le code dans des fonctions autonomes, donc si j'avais une fonction qui vérifie si l'utilisateur est connecté. On pourrait alors extraire notre code de notre garde. Il va mettre les instructions if, placer cela dans notre fonction, et son nom de fonction peut maintenant être rapide garde en tant que tableau. Donc, pour cela, nous ne voulons pas exécuter cette méthode, plutôt passer dans un tableau un ancien nom de fonction. Sauvegardez ceci et nos itinéraires fonctionneront. Essayons de visiter l'administrateur. Nous pouvons y accéder puisque notre utilisation est vraie, change au faux, et cette fois il bloque notre accès. Si nécessaire, ces fonctions peuvent également prendre ces deux et cela à partir de données, si nous avons besoin d'accéder aux informations d'itinéraire. Un très bon cas d'utilisation pour ces fonctions est si nous avons plusieurs gardes sur différentes routes, et nous allons vouloir vérifier si l'utilisateur est connecté sur plus d'un. Cela signifie que, plutôt que de dupliquer ce code à l'intérieur de la fonction pour chacune de ces routes, nous pourrions plutôt réutiliser ces fonctions autant de fois que nous en avons besoin. Le dernier type de garde que je veux vous montrer est dans les gardes de composants. Tout comme ils sonnent, ils vont dans les fichiers de composants individuels, tels que notre composant admin. Donc, avant de faire cela, commentons cela, aussi tous les protègent de ces composants, et ensuite aussi notre variable connectée. Pour ceux-ci dans les gardes de composants, nous allons également coller avec le composant admin. Alors dirigez-vous vers cette page à l'intérieur des vues. Écrivez notre section de script. Le premier garde que nous allons regarder s'appelle Beforerouteleave. Comme il semble, cela va exécuter cette fonction avant que nous essayions de quitter une route particulière. Cela peut être utile pour inviter l'utilisateur à se déconnecter avant de quitter cette page particulière. Assurez-vous également qu'ils ont enregistré les modifications avant qu'elles ne soient perdues. À l'invite, l'utilisateur que nous allons accéder à la fenêtre, ils confirment, et cela va configurer un message de confirmation à l'utilisateur. Ce message sera une chaîne et je vais dire, « Voulez-vous vraiment partir ? » Vous avez des modifications non enregistrées. Il doit juste être un w en minuscules, puis stockera cela à l'intérieur d'une constante appelée confirmation. Cette boîte de confirmation va donner à l'utilisateur la possibilité de cliquer sur OK ou d'annuler, qui laissera cette constante soit vraie, soit fausse. Si c'est faux, nous allons annuler la navigation en retournant false. Cela semble fonctionner, actualisez la page d'administration. Maintenant, si nous essayons de cliquer sur un itinéraire différent, nous voyons la confirmation. Cliquez sur « Annuler » et cela sera défini sur false, donc nous retournerons false, et cela se traduit par rester sur cette page d'administration. Cependant, si nous essayons de faire un changement et cliquez sur « OK », nous confirmons alors que cela est correct à faire, puis nous allons de l'avant avec notre changement de route. Cela a également accès à et depuis si nous avons besoin d'accéder aux informations de l'itinéraire. Nous avons également accès à deux autres gardes que nous pouvons utiliser ; l' un est pour entrer dans la route, et l'autre est allé pour la mettre à jour. Le premier est BeforeRouteEnter, et voir cela, nous allons placer dans un journal de console. Celui-ci est entrée et une virgule. Le second est BeforeRouterUpdate, placé dans un journal de la console des mises à jour. Nous pouvons maintenant voir quand chacune de ces routes est exécutée. Enregistrez ceci et ouvrez les outils de développement. À notre administrateur. Nous ne voyons que ce message d'entrée, et même si vous continuez à actualiser, nous ne voyons pas le message de mise à jour est exécuté. Alors, qu'est-ce qui va déclencher ce message de mise à jour ? Eh bien, celui-ci s'exécute lorsque la route se met à jour mais le même composant est réutilisé. Par exemple, si nous cliquons sur l'un de ces liens au-dessus, cela confirmera cela. Lorsque nous basculons entre ces trois liens, nous restons sur cette même catégorie de composants, mais nous mettons simplement à jour la requête. Pour ce cas d'utilisation, cette BeforeRouteUpdate sera exécutée. Confirmez ceci à partir de [inaudible] ces deux protections de boutons, puis passez à notre page de catégorie. Ceci est à l'intérieur des vues et collez-le dans notre exportation. Rafraîchir. Nous voyons entrer, puisque nous sommes entrés dans le composant catalytique. Basculez entre ces trois pages, et vous voyez que la mise à jour est maintenant appelée. Les protections de composants peuvent également être exécutées à l'intérieur de la fonction de configuration, mais avec un petit réglage. abord, à l'intérieur de la catégorie, retirez ces deux gardes, puis revenez à nos composants d'administration. En utilisant la composition, nous devons d'abord les importer à partir du package de routeur de vue. Avec la composition, nous avons accès à BeforeRouteave et aussi BeforeRouteUpdate. La seule différence est que nous utilisons le préfixe on. Donc celui-ci sera sur Beforerouteleave. Ceci provient du routeur de vue, généralement la section L de sorte qu'il ne s'exécute pas, placé dans la fonction de configuration. Accès sur BeforeRouteave, qui va ensuite exécuter une fonction. Je vais juste utiliser le même exemple d'en haut. Collez ceci et décommentez ceci. Enregistrez ce fichier et dirigez-vous vers notre administrateur. Essayez de partir, annuler et nous restons sur la même page. Cliquez sur « OK », puis la navigation est terminée. Ces gardes sont vraiment utiles pour tant de raisons telles que la protection des accès non autorisés, redirection, et aussi écrire à travers pour simplement afficher dans un simple message à l'utilisateur. 127. Routes de chargement paresseux: Une autre fonctionnalité que Vue Router offre est Lazy Loading. Cela remonte au bundle JavaScript que nous avons discuté plus tôt. Notre application est décomposée en composants et fichiers plus petits, ce qui rend beaucoup plus facile pour nous le développeur d'écrire et de maintenir notre code. Des outils comme webpack, vont embonder tous nos composants et fichiers ensemble dans un grand fichier JavaScript, qui peut ensuite être lu par le navigateur. Comme vous pouvez l'imaginer sur de grands projets, ces paquets peuvent devenir vraiment gros et ralentir le temps de chargement de la page lors de la première visite. Pour le moment, si nous passons à notre fichier index.js de routeurs, nous importons dans tous les composants dont nous pourrions avoir besoin. Ainsi, lorsque les utilisateurs qui visitent notre site ne peuvent jamais cliquer sur l'un de ces liens ou pages, mais paieront toujours le prix en les téléchargeant dans le pack initial. chargement paresseux est le processus de diviser composants de ces routeurs en paquets ou morceaux séparés, et uniquement téléchargé lorsque nécessaire, ce qui entraîne une réduction de la taille initiale du faisceau. Bien sûr, il y aura un petit temps de téléchargement pour extraire les nouveaux composants lors de la visite d'un itinéraire. Mais si vous utilisez des composants efficacement, l'effet devrait être minime. À l'heure actuelle, tous ces composants sont importés à l'aide de la syntaxe d'importation standard. Avec le chargement paresseux ajouter, nous pouvons utiliser une syntaxe d'importation dynamique, qui est supportée par le routeur Vue, et nous le faisons en remplaçant chaque importation par une fonction. Juste avant de faire cela cependant, ouvrons les outils de développement à l'intérieur du navigateur, et nous pouvons voir à quoi les choses vont ressembler avant de faire ce changement. Allez dans l'onglet Réseau. La première chose que nous allons faire est de cliquer sur « Désactiver le cache », sorte que nous ne voyons aucun fichier enregistré. Pour cet exemple, nous nous soucions uniquement de C et de nos fichiers JavaScript. Nous pouvons donc cliquer sur le bouton « JavaScript » pour afficher uniquement les fichiers JavaScript. Le mien est déjà défini sur JavaScript, mais vous pouvez avoir tout ce lien sélectionné. Avec cette sélection, actualisez la page et nous voyons maintenant que nous avons téléchargé deux fichiers JavaScript distincts. Le premier de app.js est notre bundle JavaScript principal et le bundle des fournisseurs contient du code provenant de modules tiers, tels que les paquets MPM que nous plaçons dans notre projet. La chose clé à retenir ici est que nous n'avons qu'un seul bundle de projet principal, qui est le app.js. De retour à notre fichier de routeur, nous pouvons maintenant remplacer ces importations statiques par des importations dynamiques. abord, commentez ceci, puis nous allons créer une fonction pour chacun d'entre eux pour remplacer nos importations standard. Le premier est l'administrateur, puis définissez cela égal à une fonction, et la façon dont cela fonctionne est que toutes ces importations originales seront importées immédiatement. Cependant, une importation dynamique est placée à l'intérieur d'une fonction, et cette fonction ne sera appelée que si nécessaire. Plutôt que d'appeler notre importation directement, nous stockons ceci à l'intérieur d'une constante, saisissons le chemin du fichier, puis collons ceci sous forme de chaîne. Nous pourrions également remplacer ceci, le symbole @, et cela devrait fonctionner exactement de la même manière. J' ai dupliqué cela cinq fois de plus et la seconde est pour l'AppHome, collez le chemin. Le troisième est pour Create. Ensuite, nous avons la catégorie, puis la dernière est pasFound. Enregistrer cela presque voir quel effet cela a. Si nous actualisons le navigateur, nous voyons toujours nos deux fichiers d'origine, qui est notre bundle et le bundle du fournisseur, mais qui auraient maintenant renouvelé les fichiers JavaScript. Maintenant, il peut être difficile de savoir exactement ce que chacun de ces fichiers est, puisqu'ils ne sont qu'un nombre. Si nous cliquons sur ceux-ci et allons dans l'aperçu, nous voyons juste beaucoup de code JavaScript. Nous pouvons également remplacer ce nombre par un nom de morceau. Retour à notre routeur. La façon dont nous le faisons est d'ajouter un commentaire. Nous faisons cela juste à l'intérieur des instructions d'importation, et cela est structuré comme un commentaire CSS régulier. Le commentaire que nous devons placer à l'intérieur d'ici est le WebPackchunkName, puis nous donnons à ce morceau un nom de notre choix. Gardions cela cohérent et allons pour l'administrateur, et cela corrige. Ensuite, je vais copier ceci et remplacer le reste de notre importation. Le second est pour l'AppHome, Create, la catégorie, puis enfin le NotFound. Maintenant, ce WebPackchunkName est en place. Si nous allons dans le navigateur, nous voyons que nos noms sont maintenant placés à la place de ces fichiers numérotés. Ce bas qui est l'AppHome ne devrait pas être une surprise puisque nous sommes actuellement sur la page AppHome. Mais au-dessus de cela, nous voyons des fichiers différents. Nous voyons la catégorie et aussi le Create.js. Maintenant, cela peut sembler étrange parce que nous n'avons pas encore visité ces pages. Vous pouvez vous attendre à ce que, par exemple, la catégorie ne soit pas chargée tant que nous n'avons pas cliqué sur l'un de ces liens. Eh bien, cela se produit parce que par défaut, lors de l'utilisation de la CLI Vue, il utilisera une technique appelée prefetching, qui est comme vue anticipant les fichiers que nous pourrions avoir besoin ensuite. Puisque nous possédons déjà ces composants AppHome, Vue reconnaît alors que cette page nous allons lier à notre catégorie, puis créer des composants. Prévoit efficacement que nous aurons besoin de ces composants dans un certain temps. Le téléchargement de ces deux fichiers ne démarrera pas tant que le chargement de notre page initiale n'est pas terminé Nous n'affecterons donc pas le temps de chargement de la page. Si nous regardons de près, nous ne voyons pas non plus la page d'administration ou les composants NotFound et c'est parce que nous n'avons pas de liens directs vers ces deux composants à partir de cet AppHome. Si nous voulions voir cela, nous devrons aller à l'administrateur, qui téléchargera ensuite le admin.js. En outre, si nous passons à une route non reconnue, nous voyons que le composant NotFound est en cours de téléchargement. Cet administrateur dans ce NotFound n'est lié à aucun des composants, donc nous ne voyons aucun préchargement pour cette page. Ce chargement paresseux est un moyen vraiment efficace de charger nos composants et d'améliorer le temps de chargement initial de la page. Une autre fonctionnalité utile est nos composants que téléchargés veut. Par exemple, ces composants NotFound ne seront téléchargés à partir du serveur que la première fois qu'il est nécessaire, puis toute visite future de cette page servira ensuite une version mise en cache pour plus d'efficacité afin de ne pas télécharger un fichier multiple fois. C' est ainsi que nous pouvons utiliser Lazy Loading dans notre routeur Vue. Ensuite, nous voulons jeter un oeil à la façon dont nous pouvons regrouper des morceaux connexes. 128. Regrouper des routes en blocs: Dans la vidéo précédente, nous avons donné un nom à chacun de ces import dynamique en mettant un commentaire. Chacune de ces importations est appelée un morceau, et en plus d'utiliser ce commentaire pour nommer nos fichiers importés, nous pouvons également l'utiliser pour regrouper des morceaux à. Un exemple peut être si nous avions une barre de navigation, nous pourrions regrouper toutes les pages dans les liens de la barre de navigation aussi et les télécharger toutes ensemble. La façon de le faire est de donner à chaque composant que nous voulons grouper le même nom de morceau. Actuellement, même si nous avons prérécupéré les morceaux, la catégorie sur les composants create le télécharge toujours séparément. Si nous voulions les regrouper, tout ce que vous avez à faire est de leur donner le même nom de groupe. Par exemple, un groupe de cartes. La même chose pour la catégorie. Ensuite, revenez à l'onglet de votre réseau et actualisez. Nous voyons comme avant, nous avons l'Apphome qui est paresseux chargé, mais au-dessus de cela, nous ne voyons plus nos importations séparées ou créer et aussi notre catégorie. Au lieu de cela, nous avons ce groupe de cartes qui contient le contenu de nos deux morceaux. L' utilisation est pour regrouper des morceaux comme celui-ci varie en fonction de la structure de votre projet, mais cela peut être vraiment utile pour regrouper ensemble les composants dont vous avez besoin en même temps. Cette technique nous donne vraiment beaucoup de flexibilité pour contrôler quels composants sont téléchargés à tout moment. 129. Section Intro - Télécharger des images: Bienvenue dans cette section des images. Dans ces prochaines vidéos, nous allons voir comment nous pouvons permettre à l'utilisateur de télécharger une nouvelle image sur l'une de nos quatre pages de cartes. Cette image sera un fond comme ceux que nous avons vus sur les échantillons de cartes. Ces images seront téléchargées, nous allons lire le contenu du fichier, nous les enregistrerons dans Cloudinary, nous mettrons à jour notre aperçu de la carte, et à côté de tout cela, nous allons également voir comment nous pouvons supprimer les images existantes et aussi les repositionner aussi. Je te verrai là-dedans. 130. Composant de téléchargement d'une image: Cette prochaine section sera axée sur les images de la carte. Chaque page, nous plaçons un composant d'image sur le côté édition et cela va rester juste au-dessus de nos composants de saisie de texte. Nous aurons ceci en haut, ce qui signifie que nous pouvons télécharger une nouvelle image sur n'importe laquelle de ces pages. Si nous avons déjà une image comme nous l'avons sur la couverture avant ici, nous pouvons également remplacer cette image aussi. Cette image de composant faible va envoyer l'image du Cloudinaire. Nous allons également afficher une petite image d'aperçu une fois que nous avons sélectionné ceci, et aussi cela sera mis à jour dans la carte Vue 2. Pour commencer, nous avons besoin d'un composant de ceci dans le dossier de la carte, puis nous appellerons ceci le téléchargement d'image. Configurez les modèles. Ce composant entier sera entouré dans la div avec la classe de l'emballage de téléchargement d'image. A l'intérieur de cette div, un front de niveau avec le texte de l'image, et puis avec cela, nous utilisons toute la taille d'image recommandée. Nous resterons 450 pixels par 600 pixels, ce qui correspond bien à la carte. Ensuite, une entrée et le type de cette entrée doivent être classés afin que l'utilisateur puisse sélectionner n'importe quel fichier image à partir de ses propres éléments d'ordinateur et d'image. Mais maintenant ça va être vide, nous n'avons pas besoin d'une source. La source sera définie très prochainement à partir du fichier que l'utilisateur télécharge. Cela va être une petite image de prévisualisation, donc cela nous donnera la classe d'image de prévisualisation, un div avec la classe des modèles d'image, c'est un wrapper pour une série de boutons que nous allons voir comment repositionner le images vers le haut, le milieu, et le bas de la carte, ainsi que d'un bouton pour supprimer ces deux. Le haut, le milieu et les boutons du bas vont être regroupés en un div à droite dans le premier bouton et chacun de ces boutons va avoir une icône. Donc nous pouvons aller dans les actifs, dans le dossier des icônes. Celui-ci est le top.svg, le texte entier du sélecteur de haut de l'image, et puis nous le ferons deux fois de plus. L' icône pour cela, encore une fois dans les actifs, dans les icônes. Celui-ci est le middle.svg. Le dernier bouton est pour le bas. L' icône pour ceci est le bottom.svg, le dernier texte alt est le bas de l'image. Tous les trois de ces boutons sont regroupés à l'intérieur de cette div. Si nous allons juste au-dessous de cela, nous allons ajouter un quatrième et dernier bouton qui sera de supprimer l'image sélectionnée. La classe de remove_btn. Je veux configurer cela pour déclencher une fonction plus tard dans cette section. Mais maintenant, c'est toute l'action des modèles que nous devons afficher à l' écran et nous voulons que ce composant de téléchargement d'image s'affiche en haut de cette section d'édition. Alors allez sur le cardedit.vue, importez notre composant avec le nom de téléchargement d'image. Le chemin du fichier est dans les composants, cela a été stocké dans le dossier de la carte, et sélectionnez notre téléchargement d'image, placez-le à l'intérieur de l'objet de composants, puis affichez ceci en haut de notre modèle. Plus sur le navigateur, il y a notre image, télécharger des composants, et ils devraient afficher pour chacune de toutes les pages. Cela, bien sûr, a aussi besoin d'un style. Nous devons aligner tout ce contenu et aussi réduire la taille de ces boutons. Nous voulons également que cela se fonde avec les entrées de texte juste dessous afin que nous ajoutions des styles partagés communs à ces deux sections. Le téléchargement d'image que nous venons de créer a cette classe de wrapper de téléchargement d'image, et les entrées de texte qui sont juste en dessous ont cette classe de wrapper d'entrée de texte. Nous pouvons maintenant appliquer certains styles partagés dans app.vue à ces deux sections. Donc, jusqu'au bas de la section de style, le premier est le wrapper de téléchargement d'image, puis sélectionnez également le wrapper de saisie de texte. Donc, pour cela, nous allons placer un peu de rembourrage à l'intérieur de l'élément, peu d'espacement sur le fond de chacun de ces éléments avec une marge, une ombre de boîte, et nous allons aussi arrondir les coins. Tout d'abord, 10 pixels espacés sur les quatre côtés. Donc marge, qui ne va s'appliquer qu'au bas de 10 pixels, une ombre de boîte d'un pixel, un pixel, deux, deux. La couleur qui est DDD, qui sera une couleur grise, et je veux que cette ombre de boîte soit à l'intérieur donc nous allons définir ceci pour être encart. Cela nous donne cet effet de l'ombre d'un pixel sur la droite et aussi le bas et cela se fond également à deux pixels en haut sur la gauche. Nous allons courir ces coins avec le rayon de la frontière. Juste un petit ira bien, les trois pixels. Cela nous donne maintenant l'effet que ce sont toutes des sections distinctes. Maintenant, nous allons revenir à notre composant de téléchargement d'images et appliquer certains styles qui ne s'appliquent maintenant qu'à cette image de faible composant. Donc, le style qui va également être portée. Tout d'abord, poussez tout le contenu vers la gauche en sélectionnant le wrapper, qui était le wrapper de téléchargement d'image. Ligne supplémentaire à gauche, puis ensuite, nous allons ajouter un peu d'espace entre ces trois boutons et aussi réduire la taille de l'icône à, nous allons aller au modèle. Tous ces quatre boutons sont entourés dans cette classe de boutons d'image. Donc, si nous définissons ce Cluster B, un type d'affichage de flex, ce groupe de boutons apparaîtra à côté de notre bouton Supprimer. La classe des boutons d'image, le type d'affichage de flex, puis les espaces avec justifier contenu et placer l'espace entre, comme notre bouton maintenant à côté de ces trois icônes. Ensuite, nous réduirons la taille de ces trois images. Ceux-ci étaient dans le même wrapper qui est les boutons de l'image, mais nous ne l'appliquerons qu'aux images. La largeur de 30 pixels. Ceci est maintenant un peu plus petit sur le titre de niveau 4 qui est le texte de l'image. Le poids de la police de 300, et nous allons juste réduire la taille de ceci afin que nous puissions voir cela mieux. Cela nous donnera juste le texte plus léger. Aussi une certaine marge de 10 pixels en haut et en bas, et zéro à gauche et à droite. En descendant, nous avons également besoin d'espace entre cette entrée de fichier et nos images libres. Donc, sélectionnez notre entrée et ensuite nous pouvons placer dans le type qui est égal à fichier, et le style ne s'appliquera qu'à toutes les entrées de fichier. Coller une marge de zéro en haut, zéro à droite, 10 pixels en bas, puis zéro à gauche, puis un peu d'espace entre ces boutons, saisir tous nos éléments de bouton, puis une certaine marge à droite de cinq pixels. Bien. La prochaine chose que nous allons faire est de changer la couleur de ce bouton Supprimer et aussi la couleur du survol en bas de tous les styles. Ce sont la classe de remove_btn. La seule propriété que nous devons ajouter à l'intérieur d'ici est la couleur, ajouter une valeur RVB de 208, 90 et 90 pour le bleu, ce qui nous donne la couleur rouge que nous voyons ici. Puis enfin, l'état de vol stationnaire. Donc, je vais dupliquer cela, mais cette fois, ciblez l'état du vol stationnaire et modifiez la couleur RVB pour être 123, 44 et 44, ce qui est juste une couleur rouge légèrement plus foncé que nous pouvons voir si nous survolons ce bouton. C' est tout maintenant pour les visuels de notre composant de téléchargement d'images. Ensuite, nous avons besoin d'un endroit pour réellement stocker ces images que l'utilisateur télécharge. Pour cela, nous allons jeter un oeil à un service appelé Cloudinary. 131. Configurer Cloudinary: Nous avons maintenant besoin d'un endroit sûr pour télécharger et stocker nos images. Un service populaire que j'utilise pour beaucoup de mon propre site est Cloudinary, que vous pouvez trouver ici sur cloudinary.com. Cloudinary est un service d'hébergement pour les vidéos et les images, et il a également beaucoup de grandes fonctionnalités à telles que la capacité transformer nos images et également servir les images de taille correcte, ainsi que les formats pour l'appareil utilisateur. J' ai déjà un compte dit à propos de Cloudinary, mais si vous n'avez jamais utilisé cela, allez-y et créez un compte gratuit. Il est gratuit de s'inscrire, et nous donne également une énorme allocation gratuite d'environ 20 000 téléchargements d'images gratuits. Une fois connecté, vous serez redirigé vers la zone du tableau de bord, qui ressemblera à ceci. Eh bien, avant de télécharger des images sur Cloudinary, nous devons d'abord configurer un préréglage. Un préréglage est un ensemble de valeurs par défaut avec des images que nous téléchargeons pour transformer la taille et le format. Nous pouvons définir cela à partir de nos paramètres. Les paramètres sont accessibles à partir de ce bouton juste ici, puis allez dans la section de téléchargement. Descendez. Ici, nous allons configurer et télécharger des préréglages. En haut, nous avons ce nom prédéfini de téléchargement, ce qui va être important. Je vais copier ceci avec Commande ou Contrôle C, puis aller à notre image, télécharger des composants. Nous allons simplement créer une section de script pour l'instant, puis placer ceci en haut comme un commentaire. La première option que nous avons est le mode de signature. Posséder l'option Signé et Envois non signés. L' option Signé consiste à utiliser un serveur Web, concevoir les images avec notre secret Cloudinary, que nous avons vu juste avant dans le tableau de bord. Ou nous avons la version Unsigned, que nous allons utiliser, ce qui signifie que nous pouvons télécharger directement depuis le navigateur sans avoir besoin du secret. Si nous le voulions, nous pouvons également créer un dossier dédié où nous allons placer dans ces images. Allons chercher les cartes. Le reste, nous allons nous laisser par défaut, puis nous diriger vers la section de l'analyse des médias. Cette section est si nous voulons télécharger nos images avec des balises. Si nous voulons ajouter n'importe quel type d'IA comme la détection de visage, si nous voulons extraire du texte des images, et beaucoup plus de fonctionnalités avancées, dont nous n'avons pas besoin actuellement. Ci-dessous, nous avons les manipulations d'image. Cela nous donnera la chance de configurer toutes les tailles d'image par défaut et aussi les formats, et même d'ajouter une rotation ou un rayon de coin à lorsque nous téléchargeons cette image. Laissons tous ces paramètres par défaut, puis enregistrez ces préréglages. Assurez-vous d'avoir pris note de ce nom prédéfini et de l'avoir ajouté à votre projet. Ensuite, nous allons faire nos premiers pas vers le téléchargement cette image en lisant le contenu du fichier uploader. 132. Lire des objets de fichiers et prévisualiser: Ensuite fait une fonction pour télécharger cette image. Nous pourrions ajouter ce fichier composable bidirectionnel si nous le voulions. Mais puisque nous avons seulement besoin de cela dans ce composant de téléchargement d'image, nous voulons placer cela à l'intérieur d'ici. Donc, nous avons un script que nous avons ajouté dans la dernière section, et placer dans une fonction de configuration, afin que nous puissions ajouter du code de composition. La fonction dont nous avons besoin sera appelée Upload File, et cela devra également prendre les détails de l'événement aussi. Les détails de cet événement seront transmis lorsque nous téléchargerons une image à partir de ce fichier de téléchargement d'image. Nous n'avons pas besoin de passer cela manuellement. Cela sera automatiquement reçu de notre entrée, et nous pouvons y accéder à l'intérieur de notre fonction. Donc, retournons aussi cela, et nous pouvons maintenant appeler cette fonction dans notre entrée de fichier. Pour ce faire, nous allons la liste maintenant pour une modification, puis exécuter notre fonction. Cette modification sera exécutée une fois que l'image aura été téléchargée. Revenons à notre fonction, nous pouvons voir quelles informations sont incluses avec cet événement en faisant un journal de console. Enregistrez ce fichier et plus dans le navigateur dans la console. Maintenant à partir d'ici pour voir cette course, nous devons télécharger une image. Vous pouvez utiliser de nouvelles images si vous préférez. Bon d'avoir une liste de toutes les images qui sont utilisées dans ce cours. Donc, je vais sélectionner l'un d'entre eux, qui entrera une fonction et aussi notre journal de console si nous ouvrons cela, tête dans la cible, puis dans les fichiers. À partir de là, nous ne téléchargeons que dans une image à la fois. Donc, notre image sera toujours ce premier fichier dans ce tableau à la position d'index zéro. Nous voyons des choses telles que le nom du fichier, la taille du fichier, et aussi qu'il s'agit d'une image PNG. Nous avons donc les informations dont nous avons besoin, mais ensuite nous avons besoin d'un moyen de lire réellement ces données de fichier et pour cela, JavaScript a ce qu'on appelle un objet de lecteur de fichiers. Donc, en dessous de notre journal de console. Obéissons constante pour stocker cela dans le lecteur froid. Ceci est égal à un nouvel objet de lecteur de fichiers JavaScript. L' objet de lecture de fichier est capable de lire le contenu du fichier à partir de l'ordinateur de l'utilisateur. Cette image peut être utilisée pour définir une petite image d'aperçu, qui a été configurée plus tôt dans le modèle. Il s'agit de l'élément image vide qui n'a actuellement pas de source. Pour définir la source, nous allons configurer des données réactives. Cela va importer le paquet réactif de la vue, puis à l'intérieur de la fonction de configuration, mettre en place un état d'appel constant, qui contiendra toutes les données dont nous avons besoin pour cette image. Nous allons également envelopper cela dans le wrapper réactif et le placer dans un objet. La première propriété que nous allons ajouter ici est pour l'aperçu de l'image. Actuellement, cela va juste être une chaîne vide, mais nous allons mettre à jour ceci à partir de notre lecteur de fichiers. Une fois que nous faisons cela, cela sera réglé sur la source de l'image à l'intérieur du modèle. Donc, nous devons aussi retourner notre état. Passez ceci dans notre objet, et maintenant nous allons combiner cela à l'intérieur des éléments de l'image. Placez dans la source, et cela sera égal à notre objet d'état, puis la propriété d'aperçu de l'image. Actuellement, bien sûr, cela ne fonctionnera pas, car il est défini pour être une chaîne vide. Nous devons donc mettre à jour ceci avec le contenu de notre lecteur de fichiers. Le fichier lu a diverses propriétés et méthodes auxquelles nous pouvons accéder maintenant aider avec cela. Mais avant de mettre à jour l'aperçu de l'image, nous devons d'abord nous assurer que le fichier a terminé la lecture. Donc, si nous avons une très grande image qui a été téléchargée, cette étape de lecture peut prendre un certain temps, et donc vous vérifiez ceci. Nous allons d'abord accéder à notre lecteur, puis utiliser la propriété onload. Cela signifie qu'une fois que le lecteur de fichier a fini de lire notre objet image, cela va alors déclencher une fonction et c'est à l'intérieur de cette fonction que nous voulons mettre à jour notre aperçu de l'image de point d'état pour être égal aux résultats de point de lecteur. Cela s'exécutera une fois l'opération de lecture terminée, mais nous n'avons pas encore commencé à lire le contenu du fichier. Tout ce que nous avons fait est de créer un nouvel objet de lecteur de fichiers vide. Pour réellement lire le fichier, nous avons une méthode disponible appelée lire comme URL de données. Donc, sélectionnez notre lecteur, objectif, lire comme URL de données, et les données de fichier que nous voulons lire sont ce que nous venons de voir à l'intérieur de la console. Donc c'était à l'intérieur de l'événement, à l'intérieur de la cible. Les fichiers qui était un tableau, et nous téléchargeons toujours seulement dans un seul fichier. Donc, ce sera toujours la position zéro. D' accord. Donc, une fois que cela a terminé la lecture du fichier, cela exécutera alors notre fonction onload, qui mettra ensuite à jour notre aperçu de l'image. Vérifions ça. Actualisez le navigateur et sélectionnez l'une de ces images. Ouvre ça. Nous pouvons voir que notre aperçu d'image fonctionne maintenant, et vous pouvez également restreindre la taille de cette image, aussi. Surtout si nous avons une grande image comme celle-ci. Ce serait également une bonne idée de gérer les problèmes de lecture potentiels, aussi, et d'envoyer un nouveau message à l'utilisateur. Cela nous pouvons placer un message dans notre état, et la valeur vide initiale, et juste avant la propriété onload, nous pouvons également gérer toutes les erreurs avec l'erreur. Donc reader.onerror. Cette propriété va également déclencher une fonction, c'est comme ci-dessus, où nous allons mettre à jour notre state.message pour être égal à une nouvelle chaîne. Ce message est à nous, mais en plaçant quelque chose de descriptif, par exemple, il y a eu un problème lors du téléchargement de votre message, veuillez réessayer. Ok, nous n'avons pas besoin de retourner quoi que ce soit puisque nous avons déjà retourné notre objet d'état complet. Tout ce que nous devons faire est de placer dans un élément de texte, que je vais mettre comme state.message et aussi un conditionnel aussi pour afficher ce message uniquement si le message existe. Bien, cela permettra à l'utilisateur de savoir s'il y a eu une erreur lors du téléchargement de l'image. Maintenant, nous savons que ce lecteur d'image fonctionne correctement. Ensuite, nous l'utiliserons pour enregistrer nos images dans Cloudinary. 133. Télécharger le fichier d'image: La première vidéo nous a donné accès à l'image téléchargée de l'utilisateur. Nous avons ensuite commencé l'aperçu de l'image pour que l'utilisateur puisse voir. Maintenant, nous allons enregistrer ça à Cloudinary. Une fois que Cloudinary aura reçu ces images, nous lui attribuerons également une URL unique. Nous allons également enregistrer bientôt cette URL sur notre objet de carte. Nous allons le faire à l'intérieur de notre fonction de téléchargement de fichier, juste en dessous où nous lisons le fichier réel. Puisque nous envoyons des données à un autre emplacement, nous pouvons gérer cela en utilisant try and catch, qui gérera toutes les erreurs. Puis attraper qui prendra toutes les erreurs. S' il y a une erreur, nous lancerons une nouvelle erreur, en passant ce message d'erreur. Jusqu' à la section try, la première chose que nous allons faire ici est de créer un nouvel objet FormData. Un objet FormData est un moyen de construire des ensembles de paires de valeurs clés dans un format correct qui est nécessaire pour l'envoyer à un serveur. Ces paires de valeurs clés contiendront nos préréglages Cloudinary, ainsi que le fichier image que nous voulons envoyer. Nous allons également garder cela en synchronisation avec notre état, donc juste au-dessus de l'endroit où nous avons notre objet d'état. Aussi le FormData, qui sera initialement nul. Nous pouvons ensuite mettre à jour nos FormData avec le contenu de cet objet. Donc, ce sera State.FormData. Définissez cette valeur égale à notre objet qui est actuellement vide. Mais pour ajouter du contenu à ce FormData ou quelques paires de valeurs clés, nous pouvons utiliser la méthode append, qui ressemblera à ceci. Nous accédons à notre State.FormData. Ensuite, nous pouvons appeler append à passer nos paires de valeurs clés. L' une des choses que nous devons télécharger avec cette image est le upload_preset. C' est la clé du nom, puis séparée par une virgule, la valeur est le préréglage, que nous recevons de Cloudinary. Enveloppez ceci, et placez-le sous forme de chaîne. Dupliquez ceci et la deuxième paire de valeur clé va être pour notre fichier image. Le fichier est disponible à partir d'event.target. Son FormData va maintenant être utilisé pour envoyer le Cloudinaire. Mais nous avons d'abord besoin d'un moyen d'envoyer cette demande. Pour cela, je vais utiliser un paquet appelé axios. Axios est un paquet pour faire des requêtes web, et nous pouvons l'installer en utilisant npm. Ouvrez le terminal, fermez ceci avec le contrôle C, puis installez-le dans notre projet avec npm. Installez toute la main courte i, puis le nom du paquet qui est axios. Une fois cela fait, redémarrez le serveur avec npm run serve. Retour à notre composant, et pour utiliser ce paquet axios, nous devons d'abord l'importer. Donc, importez axios. Comme il s'agit d'un module de nœud, nous n'avons pas besoin d'ajouter le chemin d'accès du fichier. Nous pouvons simplement ajouter le nom du paquet. Retour à notre fonction, axios, maintenant nous avons besoin de certaines choses pour faire cette demande et envoyer ces données à Cloudinary. Je vais stocker tout ça à l'intérieur d'un objet. Donc const ImageRequestData. Configurez cet objet où nous allons passer en trois choses. Tout d'abord, l'URL, la méthode, et aussi les données. Tout d'abord, nous avons l'URL, et c'est l'emplacement où nous voulons envoyer cette image, et c'est l'API Cloudinary, passer ceci comme une chaîne, qui est https://api.cloudinary.com/, l'API , qui est v1_1. Ensuite, nous devons pointer vers notre propre compte, revenir sur le tableau de bord Cloudinary. Nous pouvons obtenir cela à partir des détails de notre compte. C' est le nom de Cloud qui est tout en haut. Copiez ceci et ceci à la fin de notre URL, puis /upload. Par cela, nous avons la méthode, et c'est une demande de poste puisque nous publions des données. Ensuite, enfin, les données, qui sont les données réelles que nous voulons envoyer. Nous avons déjà cela stocké dans notre State.FormData. Bien. C'est tout ce dont nous avons besoin pour faire une requête axios. Donc, nous allons appeler la bibliothèque axios, puis transmettre ces données de requête d'image. Si vous le souhaitez, vous pouvez passer un objet directement ici, plutôt que de créer un objet séparé. Mais personnellement, je pense que c'est une approche plus propre. Couper cette faute de frappe avant d'aller plus loin ? Ok, dis ça. Revenons à notre projet, actualisez ceci. Maintenant, si nous téléchargeons un nouveau fichier, utilisez n'importe quelle image s'ouvre. Voici notre aperçu sur Cloudinary et dans la Médiathèque. Rappelez-vous que lorsque nous avons configuré le préréglage, nous avons également mis en place ces dossiers de cartes. Alors, allez là-dedans. Là, nous voyons notre image, et maintenant nous savons que cela fonctionne. Dans la vidéo suivante, nous allons saisir l'URL de nos images, qui est attribuée à cette image par Cloudinary, puis configurer une fonction de mise à jour pour enregistrer ceci dans notre objet de carte. 134. Enregistrer l'URL de l'image sur notre carte: Auparavant, nous avons fait une demande axios pour enregistrer nos images dans Cloudinary. Cette image ou l'URL de cette image devra également être enregistrée dans notre objet de carte. Mais comment pouvons-nous obtenir cette image dans notre objet de carte ? Eh bien, nous pouvons transmettre une référence URL, qui est fournie par Cloudinary. Lorsque nous voyons nos cartes juste ici, nous avons cette section d'URL de copie. Si nous copions ceci, collez-le dans un nouvel onglet, et ceci est un lien direct vers notre image. Ceci est fourni pour toutes les images que vous téléchargez dans Cloudinary, mais nous n'avons pas besoin de copier manuellement toutes les URL comme celle-ci. Au lieu de cela, lorsque nous faisons cette demande de poste avec axios, nous obtenons une réponse que nous pouvons ensuite stocker à l'intérieur d'un objet et accéder à ces données, donc nous ne savons pas combien de temps il faudra pour sauvegarder cette image et récupérer une réponse. Nous pouvons également faire usage de async/await. Async/AWAIT nous permettra d'attendre les données qui reviennent du serveur avant de les enregistrer dans nos constantes, cela nous empêchera d'essayer d'accéder aux données enregistrées ici, avant qu'elles ne soient réellement retournées. Nous attendrons que ces données reviennent, et que nous puissions utiliser ce mot-clé. Nous devons également marquer notre fonction comme asynchrone. Nous pouvons enregistrer notre réponse à la console et voir quelles données sont retournées dans notre projet. Téléchargez un nouveau fichier, puisque nous l'envoyons au serveur et qu'il doit être retourné, nous devrons peut-être attendre quelques secondes pour que cela se produise. Une fois que cela est sauvegardé et que nous obtenons une réponse, nous voyons notre journal de console juste ici. Les données dont nous avons besoin se trouvent à l'intérieur de cette section de données, et cela contiendra ensuite notre URL, et c'est cette URL que nous devons enregistrer dans notre objet de carte. Nous n'avons pas encore créé de fonction pour effectuer cette mise à jour, mais nous pouvons le placer à l'intérieur de notre composant pour l'instant, supprimer le journal de la console, et cette fonction s'appellera UpdateImage. En passant l'URL qui est stockée à l'intérieur de la réponse, les données, puis l'URL, cette fonction va être placée à l'intérieur de notre UseCurrentCard composable avec les autres fonctions de mise à jour. Nous devons également importer ceci pour le haut. Importez la carte UseCurrentCard à partir de ce chemin d'accès de fichier, qui est les composables, puis dans UseCurrentCard. Avant de pouvoir appeler cette fonction, que nous faisons juste ici, nous devons également extraire cela de notre fichier dans la configuration. Enregistrez-le comme une constante, qui s'appellera UpdateImage, de notre fonction UseCurrentCard au fichier UseCurrentCard, nous allons maintenant devoir configurer cette UpdateImage. Maintenant, en bas, écrivez cette fonction et pour mettre à jour la carte, cela doit prendre l'URL, que nous passons quand nous appelons cette fonction juste ici. Maintenant, pour mettre à jour cette carte, nous allons utiliser une technique similaire que nous avons utilisée dans la fonction de mise à jour juste au-dessus. Nous prenons la carte sélectionnée, puis la page en cours. Je vais copier ceci, à cet intervalle de fonction. Nous n'avons pas besoin d'aller dans les sections parce que si nous regardons notre carte directement à l'intérieur de nos pages, est l'endroit où nous avons l'image d'arrière-plan stockée, qui signifie que nous avons juste besoin de mettre à jour cette propriété d'arrière-plan, donc comme ceci. Je mets cela égal à l'URL qui est passée à cette fonction, retourne cela de notre fonction, et maintenant nous pouvons tester cela dans le navigateur. Ce que nous voulons voir ici, c'est, maintenant quand nous sélectionnons un nouveau fichier, nous voyons l'aperçu, il est enregistré dans Cloudinary, et cela devrait également mettre à jour notre aperçu actuel aussi, puisque cela est tenu à jour avec nos données réactives, laissez utilisent un fichier. Notre fonction est déclenchée et notre aperçu de carte est maintenant mis à jour avec cette nouvelle URL d'image. Ces images peuvent également être placées sur différentes pages. Si nous sélectionnons une image différente pour cette page, celle-ci sera complètement indépendante de toutes les autres pages. Bien. Maintenant, quand tout cela fonctionne. Dans la vidéo suivante, nous allons nous concentrer sur ces trois boutons d'alignement pour aligner cette image, le haut, le milieu ou le bas de cette carte. 135. Repositionner l'image: A l'intérieur de notre composant ImageUpload plus tôt lorsque nous configurons le modèle, nous avons placé en trois boutons pour repositionner l'image, le haut, le milieu ou le bas de la page sélectionnée. Pour que ces boutons fonctionnent, nous devons [inaudible] cliquer sur l'un de ces boutons, puis exécuter une fonction. La fonction que nous n'avons pas encore configurée, mais cela s'appellera RepositionImage, qui prendra soit le haut, le milieu, ou le bas. Prenons ceci, copions ceci, et placez-le dans notre deuxième bouton, comme dans cette chaîne de milieu, le troisième s'appelle le bas. plus de la UseCurrentCard composable, nous pouvons maintenant configurer cela vers le bas. C' était RepositionImage, comme dans la position. Ce sera très similaire à notre fonction juste au-dessus. Mais cette fois-ci, plutôt que de mettre à jour notre arrière-plan, nous allons mettre à jour la BackgroundPosition et définir cette égalité à notre position, qui est passée à toutes les fonctions. Aussi, si nous voulions juste au-dessus dans cette fonction UpdateImage, nous pourrions également passer cela dans et configurer une position par défaut pour cette image, comme le centre, puis retourner notre fonction. Donc, ce retour à l'image upload, nous importons déjà notre composable. Nous avons également besoin de la fonction qui était RepositionImage, puis retourner cette fonction de notre configuration. Cela correspond au nom de la fonction que nous appelons chaque fois que nous cliquons sur ces trois boutons. Essayons ça. Actuellement, pour les images de taille correcte que nous avons ici, les boutons ne fonctionneront pas pour ce cas particulier parce que nous avons une image pleine taille. Mais si nous allons choisir « Fichier » et insérer une petite image, qui ne couvre pas toute la hauteur de la carte, nous pouvons maintenant essayer tous ces boutons. Nous voyons tout de suite que la position est au centre, en haut, et la position du milieu ne fonctionne pas. Ça doit juste être au centre. Essayons ça. Nous devons télécharger à nouveau le fichier. Nous essayons encore ça. [ inaudible] le haut, le centre, et aussi le bas, ce qui résout notre problème. La raison pour laquelle cela fonctionne parce que dans les composants CardPreview, nous avons configuré cela comme une propriété de style. Ouvrez ceci et dans le modèle tôt lorsque nous définissons l'arrière-plan, nous avons également ajouté la propriété BackgroundPosition et comme tout est réactif, ceci est également mis à jour avec la nouvelle position chaque fois que les données changent. 136. Supprimer des images: La dernière chose à faire avec nos images est de les retirer de cette carte. Ça ne devrait pas être trop ennuyeux. Tout ce que nous devons faire est de le définir par fonction, qui va sélectionner l'arrière-plan et définir ceci comme une chaîne vide. Comme pour le reste de la mise à jour, dirigez-vous vers la UseCurrentCard où nous pouvons configurer une fonction. RemoveImage. Ce sera très similaire à l'UpdateImage, donc nous pouvons copier cette ligne de code, coller ceci dans. Mais cette fois, au lieu de définir l'URL, cela va être une chaîne vide. C' est tout ce qu'on a à faire. Retourne cette fonction. Ensuite, nous pouvons placer cela dans le composant ImageUpload, enregistrer ceci comme une constante. Avec cette fonction, nous pourrions également renvoyer cette partie de notre configuration et l'appeler directement à partir de notre bouton de suppression. Mais à la place, ce que nous allons faire est de mettre en place une nouvelle fonction appelée remove et c'est parce que non seulement nous voulons appeler cette fonction, nous devrons également effacer l'aperçu de l'image aussi. Configurez ça. La fonction appelée remove. Nous allons d'abord accéder à notre état et à l'ImagePreview et réinitialiser ceci pour être une chaîne vide. Cela supprimera l'image d'aperçu plus petite que nous voyons à l'intérieur de l'écran d'édition. Ensuite, nous pouvons appeler notre fonction importée. Retournez cela de notre configuration. Nous avons déjà une configuration remove_btn à l'intérieur du modèle. Nous pouvons [inaudible] @click, qui va appeler cette fonction. Je vais essayer cela dans le navigateur. Cliquez sur « Supprimer ». Notre image a disparu. Nous allons essayer de télécharger une image. Cliquez sur « Supprimer ». Cela supprimera toujours l'image, laissant notre fonctionnalité d'image toutes maintenant terminée. 137. Déploiement sur Netlify: La première étape vers le déploiement de notre application sur le web est de construire notre projet pour notre production. Nous pouvons créer ce bundle pour la production en utilisant la commande build, que vous pouvez voir si nous allons à package.json, dans la barre latérale. Ouvrez ceci, et jusqu' à présent, pour exécuter notre projet, nous avons exécuté NPM run servi, qui commencera avec notre serveur de développement, et cela nous donnera également des choses telles que des messages d'erreur pendant le développement, mais nous ne voulons pas voir des choses comme ça pendant la production. Au lieu de cela, ce que nous voulons faire est de construire une version prête à la production de notre application, qui est un paquet JavaScript. Nous pouvons le faire avec la commande juste en dessous, qui est build, et nous, encore une fois, exécutons ceci à partir du Terminal. Ce que nous devons faire est d'appuyer sur « Control » et « C » pour fermer le Terminal, et cette fois, MPM exécuter build, et cela commencera à construire notre projet et tous les fichiers seront placés à l'intérieur d'un dossier de disque. On verra ça dans une seconde quand ça finira. Nous pouvons maintenant dire ceci à propos du haut de notre barre latérale. Ce dossier de disque contient une version prête à la production de notre application, contenant tous nos CSS, nos images, ainsi que nos paquets JavaScript. Pour JavaScript, nous ouvrons ceci, contient notre bundle dont nous avons parlé précédemment, ou plusieurs paquets si nous utilisons le chargement paresseux, comme nous sommes ici. Nous verrons donc des choses comme nos packs d'administration, nos packs d'applications, notre page d'accueil d'applications, nos groupes de cartes que nous configurons pour les groupes de morceaux. Nous voyons la page introuvable, et ce sont tous des fichiers de bundle JavaScript plomb qui pourraient être téléchargés individuellement ou ensemble à partir du navigateur. Ces fichiers sont également minifiés et optimisés pour la production, et nous supprimons également des éléments tels que les messages d'erreur et les avertissements que nous voyons pendant le développement. Nous pouvons maintenant prendre ce dossier de disque et l'utiliser pour déployer sur un service d'hébergement. Le service d'hébergement que je vais vous montrer sera sur netlify.com. Il y a beaucoup de grands fournisseurs d'hébergement là-bas, mais c'est vraiment populaire et facile de commencer avec, et il y a aussi une version gratuite généreuse aussi. Pour utiliser cet hébergement, je vais ouvrir le terminal et utiliser l'interface de ligne de commande Netlify. Si vous n'avez pas utilisé l'interface de ligne de commande Netlify par le passé, nous devons l'installer globalement. Nous faisons cela avec MPM, installez. C' est le NetLify_CLI, puis nous devons utiliser l'indicateur -g pour installer cela globalement. Je l'ai déjà installé, donc je ne vais pas appuyer sur Entrée, et si vous voyez des autorisations, des erreurs, où un réglage de cette option, vous devrez peut-être corriger ces autorisations ou utiliser le pseudoprefix pour l'installer en tant qu'administrateur. Une fois que nous avons accès à cela, une fois installé, nous pouvons alors utiliser diverses commandes Netlify, et celle que nous voulons utiliser est la commande de déploiement. Assurez-vous que vous êtes à l'intérieur du dossier du projet, appuyez sur « Entrée », et si c'est la première fois que vous utilisez Netlify, vous devrez peut-être vous connecter ou créer un nouveau compte si vous n'en avez pas encore. Une fois que vous vous êtes inscrit et que vous avez vérifié votre e-mail, vous serez redirigé vers la zone de compte dans le navigateur, où vous pouvez également créer un nouveau projet. Ne faites pas cela dans le navigateur puisque nous allons le faire ici à l'intérieur du Terminal. Vous pouvez également être invité à autoriser dans Netlify CLI lors de votre première utilisation également. Je suis déjà connecté depuis que je l'ai utilisé plusieurs fois dans le passé. Revenons donc à ce Terminal, nous devons répondre à quelques questions simples pour commencer. Tout d'abord, nous n'avons pas encore de nouveau site, donc nous allons en créer un à l'intérieur de Netlify. J' ai déjà configuré les noms de mon équipe dans Netlify, donc je vais cliquer sur « Entrée ». Nous pouvons également ajouter un nom de site si nous le voulons. Ceci est facultatif. Nous pouvons également cliquer sur « Enter » et Netlify en générera un pour nous. Ensuite, le répertoire public, et c'est l'emplacement à l'intérieur de notre projet où notre site nouvellement construit va être stocké. Nous voyons juste que le nôtre est stocké dans le dossier du disque. Donc, je vais appuyer sur « Entrée », et cela permettra de déployer un site Web brouillon. Ici, si nous étirons simplement cela un peu plus large, nous avons un site Web, une URL brouillon, ouvrez ce brouillon URL à l'intérieur du navigateur, et puis nous voyons une URL en direct qui affiche notre site Web. Nous pouvons cliquer autour et vérifier que tout fonctionne. Tout ça a l'air bien jusqu'à présent. On voit notre carte. Nous pouvons également éditer et nous voyons toutes les différentes pages et catégories aussi. Cependant, à la fin de notre URL principale, essayons d'entrer dans l'administrateur. Eh bien, nous voyons la page introuvable, et aussi, si nous allons à une URL non reconnue, nous voyons le même message. L' erreur est que nous avons construit une application d'une seule page, signifie que lorsque nous visitons cette application, nous obtiendrons un seul paquet JavaScript, que nous connaissons déjà. Nous naviguons ensuite dans nos pages d'applications sur le frontend à l'aide du routeur. Lorsque nous tapons dans /admin ou en fait, nous faisons une requête au serveur et nous nous attendons à ce que cette page soit disponible. Cependant, comme nous le savons, nous avons une application d'une seule page, nous n'avons pas plusieurs pages à demander du serveur. Au lieu de cela, lorsque nous utilisons des choses comme le lien du routeur, cela interceptera la section juste ici et trouvera ensuite la partie exacte du JavaScript que nous devons afficher à l'intérieur du navigateur. La solution pour cela lors de l'utilisation d'applications d'une seule page est d'ignorer toute demande de page supplémentaire et toujours retourner notre page d'accueil principale. Ensuite, sur le frontend, notre routeur peut alors prendre soin de toutes les pages qui doivent être affichées. Faites ceci et ne servez cette page d'accueil que sur n'importe quelle demande. C' est assez simple à faire. Rendez-vous dans le dossier dist nouvellement créé, et à l'intérieur de la racine de notre dossier disque, créez un nouveau fichier, appelé _redirections. La syntaxe pour ne renvoyer que notre page d'accueil ressemble à ceci. C' est /* /index.html, puis 200. Cela indique au serveur Web quelle que soit la page que nous essayons de demander, ne jamais retourner à la maison index.html principal, ainsi que le code d'état du service de 200, qui signifie que tout va bien. Toujours renvoyer ce message correct signifie que nous avons besoin de gérer toutes les erreurs sur le frontend et nous le faisons avec notre composant non trouvé. Donnez à ce fichier une sauvegarde et nous pouvons redéployer votre application, que nous allons effacer le Terminal et exécuter netlify deploy une seconde fois. Le répertoire publié est toujours dist. Ensuite, appelez le brouillon, et nous voyons que toutes les pages fonctionnent toujours. Si nous essayons d'aller à la barre oblique, alors toutes les demandes de page supplémentaires. Netlify répond ensuite avec notre page d'index principale. Ensuite, le routeur vue reconnaît que nous avons le composant admin à charger, et c'est pourquoi nous voyons l'administrateur à l'écran. Essayons la page 404 avec un itinéraire non reconnu et nous verrons la page introuvable. Ok, bien. Une fois que nous sommes heureux que tout fonctionne, nous pouvons maintenant nous débarrasser de ce brouillon d'URL et générer une version de production en direct. La façon dont nous le faisons est, une fois de plus, d'exécuter Netlify deploy, mais cette fois-ci —prod pour le signaler. Nous sommes heureux de tout ce que nous voyons et nous voulons enfin pousser cela à la production. On y va. Notre déploiement est maintenant en ligne, et nous voyons l'URL de notre site Web plutôt que le brouillon. Ouvre ça. Il y a notre version finie. Testez nos routes non reconnues une fois de plus. On y va. Si nous allons également dans notre compte Netlify, connectez-vous si vous le souhaitez, nous voyons maintenant nos sites juste ici. Cliquez dessus, et c'est la même URL que nous venons de voir dans le navigateur. Ceci est un lien en direct et il sera disponible pour tout le monde à voir sur le web. Nous pouvons également accéder à nos paramètres de domaine. Si vous voulez un nom personnalisé dans les options, nous pouvons modifier le nom, et vous pouvez également le modifier pour être quelque chose de plus descriptif, tant que le nom n'a pas été utilisé par quelqu'un d'autre dans le passé. Cela aura également l'extension .netlify.app lorsque nous utilisons ce plan gratuit. Vous pouvez également utiliser un domaine entièrement personnalisé si vous en avez déjà un. Vous pouvez également en acheter un auprès de Netlify. Enfin, Netlify rend également très facile d'avoir un site sécurisé par défaut, nous pouvons voir, si nous cliquons dessus, nous avons le symbole du cadenas juste ici. Par défaut, notre site est chargé avec un certificat SSL, ce qui signifie que notre site est sécurisé. Nous pouvons également voir cela en bas de nos paramètres, sous le HTTPS. Si vous avez également téléchargé un domaine personnalisé, vous pouvez également l'activer gratuitement. C' est notre site maintenant déployé sur le web, que vous pouvez maintenant partager avec vos amis et votre famille. 138. Merci !: Bienvenue, vous êtes arrivé jusqu'à la fin. Félicitations pour avoir été aussi loin. J' espère vraiment que vous avez apprécié le cours et que vous en avez tiré beaucoup, et que vous avez également apprécié la construction des projets. C' est tout pour l'instant. Continuez à apprendre, continuez à construire des choses, et je vous verrai dans la prochaine.