Vue JS 3 : API de composition (avec Pinia et Vite)

1. Bienvenue !: Si vous connaissez déjà U2 et l'API d'options, ce cours vous apprendra tout ce que vous devez savoir pour passer à V3 et à l'incroyable nouvelle API de composition. m'appelle Danny, je suis développeur d' applications en Inde et je crée un budget, la finance personnelle la mieux notée pour iOS, Android, Mac ou Windows. Et j'ai passé les 12 derniers mois à créer 42, qui est basé sur U3 et l'API de composition dans ce cours, vous commencerez par apprendre les principales différences entre l'API Options et l'API de composition en créant une application API d'options simples et en la convertissant en API de composition. Vous maîtriserez ensuite toutes les bases, y compris données réactives avec des radeaux et des objets réactifs, des méthodes, des propriétés calculées et des montres, des crochets de cycle de vie, des directives, un routeur de vue, des composants enfants, y compris les nouvelles méthodes. Enfin, les cultures émettent et composants dynamiques de valeur modale composables, comment les créer à partir de zéro et comment les importer à partir de la bibliothèque d'utilisation de la vue et vous apprendrez gestion de l'état à l'aide de penny sur l'incroyable successeur à voir x après avoir appris ces bases. Vous allez donc créer une application réelle appelée boule de notes à partir de zéro, qui dispose de capacités de foule complètes. Il utilise la gestion d'un centime ou d'un faux état et démontre des nouvelles réelles de toutes les bases que vous avez apprises plus tôt. Après ce cours, vous serez en mesure de créer vos propres trois nouvelles applications entièrement basées sur l'API de composition, entièrement à partir de zéro. Ce cours nécessite une compréhension de base si vous réglez les options API, HTML, CSS et JavaScript. Veuillez consulter les vidéos de prévisualisation et j'ai hâte de vous voir dans le cours. 2. Introduction [Module 1]: Bonjour, là. Je m'appelle Danny Cano. Bienvenue dans ce cours, Vue.js trois API de composition avec un penny sur VT. Si vous connaissez déjà la V2 et l'API des options. Et ce cours vous apprendra tout ce que vous devez savoir pour passer à B3 et commencer à utiliser B3 et l'API de composition. Voici à peu près ce que nous allons faire dans ce cours. Dans le module 1, je vais vous présenter le cours. Expliquez en quoi consiste l'API de composition. Vous montrer la configuration de mon éditeur, qui est du code VS, y compris l'installation de toutes les extensions que je vais utiliser. Je vais installer les outils de développement Vue pour nous aider dans notre développement. Dans le module deux, nous allons vous présenter le site de documentation V3. Nous allons installer NodeJS pour commencer à créer des applications V3. Et nous allons créer un projet de vue à l'aide du dernier outil de génération avec VTE. Ensuite, nous allons préparer ce projet pour que nous commencions à apprendre les bases. Dans le module trois, nous allons examiner les principales différences entre l'API d'options et l'API de composition. Nous allons créer une application API d'options très simple pour nous rappeler comment fonctionne l'API d'options. Ensuite, nous allons convertir cette application API d'options simples pour utiliser plutôt l' API Composition. Cela nous donnera un moyen très rapide et simple de voir les principales différences entre les deux approches. Ensuite, nous allons examiner les différences entre les deux modèles différents que nous pouvons utiliser avec l'API de composition, qui est l'ancien modèle de fonction de configuration et la configuration de script la plus récente et supérieure. motif. Dans le module quatre, nous allons tout savoir sur les données. Nous allons en savoir plus sur les données réactives , y compris les réfs et les objets réactifs. Nous allons en apprendre davantage sur la liaison bidirectionnelle et nous allons examiner les données non réactives. Le module cinq est axé sur les méthodes. Nous allons en apprendre davantage sur les méthodes, les propriétés calculées et les montres. Dans le module 6, nous allons tout savoir sur la façon dont nous utilisons différemment les crochets de cycle de vie dans l'API de composition, y compris les crochets fondus, les crochets activés, les faucils mis à jour et la façon dont nous pouvons utiliser plusieurs crochets de le même type au sein d'un seul composant. Dans le module sept, nous allons tout savoir sur les directives de l'API de composition. Nous allons apprendre comment créer des directives personnalisées locales , locales pour un composant individuel. Ensuite, nous allons examiner comment créer des directives client mondiales, qui peuvent être utilisées par n'importe quel composant de notre application. Dans le module huit, nous apprendrons comment nous utilisons Vue Router différemment dans l'API de composition, y compris comment utiliser les itinéraires du dollar, les objecter pour afficher informations de notre routeur dans notre et les nouveaux itinéraires américains et utiliser routeur composable. Dans le module neuf, nous allons en apprendre davantage sur les listes utilisant la v4, le nouveau composant de téléportation incroyable. Nous allons apprendre à utiliser réfs de modèle pour pouvoir accéder aux éléments qui se trouvent dans notre composant, puis faire quelque chose avec cet élément lorsque notre composant a été chargé, exemple la mise au point d'une entrée, Nous allons également apprendre comment utiliser la coche suivante à l'aide de l'API de composition. Module 10, nous allons tout savoir sur les composants enfants, y compris sur la façon de transmettre du contenu à un composant enfant à l'aide d'emplacements. Il peut transmettre des données à des composants enfants à l'aide d'accessoires. Comment émettre un événement client d'un composant enfant vers un composant parent à l'aide d'émissions, comment faire en sorte qu'un composant enfant modifie une propriété de données sur son composant parent à l'aide la valeur modale et mettre à jour la valeur du modèle, nous allons examiner les composants dynamiques qui nous permettent de changer le composant utilisé dans une partie particulière de notre application. Et nous allons examiner comment fournir des données d'un composant parent à tous ses composants descendants à l'aide d'injections de fourniture. Module 11, vous apprendrez tout sur le composable, qui est l'une des nouvelles fonctionnalités les plus excitantes avec B3, nous allons d'abord répondre à la question, qu'est-ce qu'un composant ? Ensuite, nous allons créer un composant personnalisé qui nous permettra de partager des données réactives, des méthodes non liées entre nos composants. Ensuite, nous allons également installer et configurer un composant à partir de la bibliothèque de vues. Dans le module 12, nous allons tout savoir sur la gestion de l'état à l'aide de Pena, qui est actuellement la référence en matière gestion d' état dans les applications API de composition v3, nous allons d'abord répondre à la question, qu'est-ce que la gestion de l'État ? Nous allons examiner trois approches différentes gestion de l'État dans une perspective trois en utilisant soit quelques sous composables. Et nous allons examiner les différences entre eux. Ensuite, nous allons tout savoir sur l'état avec Penn. L'état est l'endroit où nous stockons toutes nos propriétés de données, un magasin de vidéos. Nous allons maintenant tout savoir sur les actions avec Penny. Et les actions sont des méthodes qui se trouvent dans notre magasin qui nous permettent de modifier les données qui se trouvent dans notre état. Ensuite, nous allons en apprendre davantage sur les getters, qui nous permettent d'obtenir des données de notre état, les modifier d'une manière ou d'une autre, puis de rendre ces données disponibles pour tous nos composants. À ce stade, nous aurons couvert toutes les bases de Fe3 et de l'API de composition. Je vais mettre toutes ces connaissances en pratique en créant une application réelle appelée Nope balls, une application de prise de notes que nous allons rendre réactive et présentable à l'aide de la bibliothèque CSS Bohmer. Je vais vous présenter l'application de note Paul. Ensuite, nous allons créer un tout nouveau projet l'aide du dernier outil de création de vues. Encore une fois, en utilisant V8, nous allons installer Vue Router manuellement à partir de zéro et le configurer à partir de zéro. Ensuite, dans le module 14, nous allons travailler sur la conception de notre application l'aide de la bibliothèque CSS. Nous allons installer Bohmer, créer une belle conception de barre de navigation réactive, qui affiche directement des liens vers les pages A2 sur le bureau, affichera ensuite un menu burger sur mobile. Ensuite, nous allons travailler sur la conception de notre page de notes. Dans le module 15. Je vais ajouter des méthodes de données et des composants enfants à notre application. Nous allons configurer les données et les méthodes d'ajout d'une nouvelle note. Nous allons créer un composant enfant pour nos notes. Nous allons transmettre des données à ce composant enfant à l'aide d'accessoires. Nous allons configurer une propriété calculée et nous allons ajouter la possibilité de supprimer un nœud. Module 16. Nous allons installer un centime et tout mettre en place complètement à partir de zéro. Nous allons également créer un composant réutilisable, que nous allons utiliser sur plusieurs pages de notre application. Une fois que nous aurons installé des sous, nous allons configurer les états de notre application où nous allons stocker toutes nos données de notes. Ensuite, nous allons configurer quelques actions pour ajouter, supprimer et mettre à jour une note. Ensuite, nous allons créer un lecteur dans la porte de notre Penny pour obtenir le contenu d'une note en fonction de l'ID d'une note. Ensuite, nous allons créer une deuxième page, une page Stats, qui affichera des statistiques basées sur nos données de notes. Je vais mettre en place quelques nouveaux getters pour le faire. Nous allons également créer un composant réutilisable, que nous allons utiliser sur plusieurs pages de notre application. Nous allons rendre ce composant réutilisable personnalisable à l'aide d'accessoires. Dans le module 17, nous allons ajouter des directives, des montres et des bulles composables à nos bulles de notes d'application. Nous allons ajouter une directive qui nous permettra de focaliser automatiquement une zone de texte. Je vais rendre cette directive globale et l'utiliser sur plusieurs pages. Nous allons mettre en place un observateur. Nous allons créer un composant personnalisé qui nous permettra de partager des données réactives et des méthodes associées entre les pages. Ensuite, nous allons améliorer ce composant en lui permettant d'accepter plusieurs paramètres. Et nous allons également ajouter un composant à partir de la bibliothèque d'utilisation de la vue, le clic hors composable. Enfin, dans le module 18, je suis un modal de suppression de notre application, qui s'affichera lorsque nous tenterons de supprimer une note. Et nous allons nous demander de confirmer que nous allons mettre en place le modal, rendre présentable. Nous allons permettre à ce modal de modifier les données son composant de page parent en utilisant valeur modale et la mise à jour de la valeur du modèle Nous allons réutiliser le clic hors composant de la vue utiliser pour que nous puissions cliquer en dehors de ce modal pour le fermer, nous allons configurer une pyramidale de contrôle du clavier afin que nous puissions appuyer sur Escape pour fermer le modal dans le processus de cette opération, nous allons également utiliser certains crochets du cycle de vie. 3. Qu'est-ce que l'API de composition ?: L'API de composition est la plus grande nouvelle fonctionnalité fournie avec V3. Mais qu'est-ce que l'API de composition ? Eh bien, cela nous offre une nouvelle façon de créer des composants de vue, une alternative à l'API Options. Maintenant, nous pouvons toujours utiliser l'API d'options dans v3 ups, mais j'envisagerais d'utiliser exclusivement l'API de composition, en particulier sur des applications plus complexes et des composants de visualisation. L'API de composition résout deux problèmes principaux que nous rencontrons parfois avec les applications API d' options, en particulier les UPS plus compliquées. Premièrement, il nous permet de regrouper plus facilement le code pertinent dans les sections scripts de nos composants de vue. Et numéro deux, il nous permet de réutiliser plus facilement notre code dans nos données réactives, nos méthodes et montres, etc., en utilisant composable. Pour le démontrer en premier, jetons un coup d'œil à ce code API Options. Dans l'API Options, nous avons notre exportation par défaut, et toutes nos différentes options sont séparées par des options. Je veux dire des choses comme les méthodes de données, les crochets du cycle de vie. Dans cet exemple, nous avons deux ensembles de données totalement indépendants. Nous avons une propriété de nom d'utilisateur hors propriété pour déterminer si un modal est affiché ou non. Ensuite, dans notre option méthodes, nous avons une méthode pour mettre à jour le nom d'utilisateur et une méthode pour afficher le modal en modifiant cette propriété de données. Nous disposons également d'un crochet de cycle de vie, le crochet monté, qui déclenchera ces deux méthodes. Cependant, tout le code pertinent est séparé. Le nom d'utilisateur apparaît. La méthode du nom d'utilisateur ici. Le déclencheur de cette méthode dans ce Hawk Down fondu ici. Cela signifie que dans les composants plus complexes, nous devons faire beaucoup de défilement vers le haut et vers le bas vers les méthodes de données , les propriétés calculées, les crochets du cycle afin de travailler sur le code associé. L'API de composition résout ce problème en permettant à va de supprimer toutes ces options et en permettant de regrouper tout notre code logiquement. Jetons un coup d'œil à une version API de composition de ce code. Dans cet exemple, nous faisons exactement la même chose. Nous configurons des variables de données réactives pour notre nom d'utilisateur et nos propriétés de dates affichées modales avec la configuration de méthodes de manipulation ces propriétés de données continuaient de déclencher ces méthodes dans le crochet monté ici et ici. Sauf que cette fois-ci, tous nos codes pertinents sont regroupés. Tout le code lié au nom d'utilisateur est regroupé ici. Sur tout le code lié au modal est regroupé ici avec l' API de composition, il n'y a pas que les propriétés de données, les méthodes et les hooks du cycle de vie. Nous pouvons nous regrouper, nous pouvons tout regrouper, qu'il s'agisse de calculs, de propriétés, montres, de directives, etc. Cela nous facilite grandement la vie, surtout lorsque nous travaillons sur des composants beaucoup plus compliqués et plus longs. Le deuxième problème, et non l'API de composition résout, est qu'il est beaucoup plus facile pour nous de réutiliser le code entre nos composants en utilisant composable dans l'API Options, nous pourrions partager du code entre les composants en utilisant des mixins. Jetons un coup d'œil à notre exemple de code API d' options. Encore une fois, supposons que nous voulions réutiliser la propriété de données du nom d'utilisateur et notre méthode de mise à jour Username sur plusieurs composants de l'API Options, nous pourrions extraire ce code dans un mixin, comme celui-ci, où nous avons littéralement simplement copié la propriété de données du nom sur la méthode octet username et la mettre dans un mixin. Nous pouvons ensuite importer ce mixin dans un composant ou un tas de composants différents comme celui-ci, importer le nom d'utilisateur de mixage à partir de etc. Mais dans cet exemple, nous importons également un mixin différent qui n'est pas lié. Ce mélange modal est mélangé. Et vous pouvez voir que dans la discussion MTSU où tir à partir du nom d'utilisateur de mixage, cette méthode de mise à jour Username. Le problème, c'est qu'il n'est pas évident d'où vient cette méthode. Provient-il du mélange de noms d'utilisateur ou provient-il des lacs modaux si vous n'êtes pas familier avec le projet sur lequel vous travaillez actuellement, vous ne serez peut-être pas en mesure de savoir où cette méthode vient de sans ouvrir réellement ces fichiers de mixage et je regarde à travers le code. Encore une fois, cela peut devenir un problème énorme dans applications de visualisation plus complexes où nous avons de nombreux composants différents, de nombreux mélanges différents étant utilisés. Examinons à nouveau notre exemple d'API de composition. Disons que nous voulons faire la même chose. Nous voulons extraire la variable de données du nom d'utilisateur, et nous voulons extraire cette méthode Username mise à jour où nous pouvons les découper et les coller dans un composant, qui ressemblerait à ceci. Dans une fonction composable, nous n'exportons que la fonction. Et vous pouvez dire que nous avons notre variable de données de nom d'utilisateur et notre méthode de mise à jour du nom d'utilisateur. Et nous pouvons ensuite importer ce composant dans n'importe quel composant de vue que nous voulons. Comme cela, nous importons simplement la fonction de niveau racine que nous avons exportée. Ensuite, nous pouvons utiliser la structuration pour extraire uniquement les éléments dont nous avons besoin de ce composant. Dans ce cas, nous extrayons la variable de données du nom d'utilisateur et la méthode de mise à jour Username. Maintenant, lorsque nous utilisons quelque chose de notre composable, comme dans ce crochet monté, nous lançons la méthode Username de mise à jour. Nous pouvons voir exactement d'où vient cette méthode. Encore une fois, cela devient un énorme avantage avec l'API de composition, en particulier sur les applications et les composants de visualisation beaucoup plus complexes . J'espère que cela explique les avantages considérables de l'API de composition par rapport à l'API d'options. 4. Paramètres éditeur et configuration logicielle: Vous pouvez utiliser n'importe quel éditeur que vous voulez pour ce cours, mais je vais utiliser VS Code parce qu'il est gratuit et qu'il possède un tas d'extensions différentes qui vont nous faciliter la vie. Si vous souhaitez que la même configuration soit effectuée, suivez la procédure. Vous voulez aller à code dot Visual Studio.com. Il suffit de le télécharger. Si vous utilisez Windows, vous devrez peut-être exécuter un programme d'installation, mais sur un Mac, il vous donnera un fichier zip avec une application que vous pouvez simplement glisser dans le dossier des applications. Je vais juste récupérer le dossier Applications et le faire glisser là-haut. Nous devrions maintenant pouvoir le lancer. Cliquez sur Ouvrir. Nous pouvons maintenant voir l' installation par défaut du code VS. Je vais juste faire glisser un projet de vue là-dedans juste pour démontrer certaines des extensions que nous allons utiliser. Bien que vous n' ayez pas besoin de le faire. Mais si vous avez un projet de vue, comment l'ont-ils fait glisser ? Je vais faire glisser ce test de vue vers le haut, qui est essentiellement l'application de vue par défaut construite avec le dernier outil de construction. Avec ça que nous utiliserons plus tard, je vais cliquer sur les vérités et ensuite oui. Je vais juste l' agrandir un peu. Zoom avant en appuyant sur Command Plus Autoriser. Le raccourci peut être différent sous Windows. Installons quelques extensions. Nous voulons cliquer là-dessus ici avec ces petits carrés. Il s'agit du magasin d'extension. Sur les deux premières extensions se trouvent un thème d'icônes et un thème global pour rendre le candidat un peu plus joli, mais ceux-ci sont tout simplement facultatifs. Donc, vous voulez chercher du matériel, j'appelle thème. Nous voulons celui-ci ici. Cliquez sur Installer. Ensuite, nous voulons choisir le thème des icônes matérielles dans cette liste déroulante. Et maintenant, si nous revenons à l'Explorateur, vous verrez que dans notre Explorateur, nous avons ici ces belles icônes pour tous nos différents types de fichiers, tels que cette jolie petite icône View. Revenons au magasin d' extensions et je vais chercher le thème make apps. Et c'est la même chose que j'utilise, mais c'est entièrement facultatif. Je vais cliquer là-dessus. Cliquez sur Installer. Choisissez le nom des maquillages dans le menu déroulant. C'est un thème décontracté, facile pour les yeux avec une belle coloration syntaxique douce. Comme vous pouvez le voir ici. Si vous n'aimez pas ce thème, il existe un site Web où vous pouvez parcourir tous les différents thèmes. Vous voulez y aller. Vs Code themes.com. Vous pouvez trouver jusqu' aux différents thèmes clairs et sombres ici. Il suffit d'en choisir un qui vous plait. Je vais juste fermer ça, retourner au magasin d'extension. Nous allons installer une extension appelée action dupliquée. Je vais juste chercher ça. C'est celui-là ici. Cliquez sur Installer. Ce que cela fera, c'est si nous revenons à notre explorateur, cliquons avec le bouton droit sur un fichier, nous avons maintenant cette option pour dupliquer un fichier ou un répertoire, qui est vraiment pratique lorsque vous travaillez sur des applications de visualisation car vous veulent souvent simplement dupliquer un composant, puis le modifier. Et je reviendrai à nouveau dans le magasin d'extensions par défaut, comme vous l'avez vu précédemment. Les composants de la vue n' ont pas l'air très jolis. Et ils ont dit : « Nous allons régler ça avec la prochaine extension. Et nous voulons rechercher l'extension view volar, APAC. Nous devons faire défiler un peu vers le bas pour trouver la bonne. C'est celui-là par frère January. Je vais l'installer. Il y a un tas d' extensions différentes par TEA, qui est un format de code que je vais en fait désactiver parce que je ne suis pas vraiment fan des formats de code est étiquette alternée qui va renommez automatiquement les attaques. Si nous renommons la cible d'ouverture, renommez la balise de fermeture pour nous. Nous avons quelques extraits de code JavaScript, une balise de fermeture automatique, qui fermera automatiquement les balises HTML, puis un tas d'autres. Les principaux que nous voulons ici à ces deux-là en bas, ils vont nous donner une belle mise en surbrillance syntaxique, charge de la langue, des extraits de vues et des choses comme ça. Je veux l'installer, et c'est maintenant installé, mais je vais en fait désactiver certaines de ces extensions ajoutées. Je vais effacer le champ de recherche et nous pourrions parcourir nos extensions installées ici. Je vais désactiver plus jolie, ce qui, d'ailleurs, je crois, peut interférer avec la prochaine extension que nous allons installer, mais vous pouvez le laisser bras si vous préférez et voir si cela fonctionne pour vous. Je vais désactiver CSS lint parce que nous n' allons pas faire de TypeScript dans ce cours. Beaucoup de choses à ce sujet. Je cliquerai donc sur ce bouton Recharger requis pour recharger l'application. Vous verrez que nous avons maintenant cette magnifique mise en surbrillance syntaxique pour nos composants de vue. La dernière extension que je vais installer s'appelle les attributs HTML fractionnés. Lorsque nous travaillons sur des applications de vue, nous avons souvent des éléments de composants de vue avec des tonnes d'attributs, de directives et de gestionnaires de clics différents , tout cela. Ceux-ci peuvent être assez longs et nous voulons souvent le faire dans chaque attribut sur une nouvelle ligne comme celle-ci, ce qui prend vraiment beaucoup de temps pour le faire manuellement. Eh bien, cette extension va le faire pour nous. Je vais rechercher des attributs HTML fractionnés. C'est celui-là avec l'icône verte. Je vais l'installer. Je vais modifier les paramètres par défaut de cette extension. Je vais faire défiler cette description à la section des paramètres ici. Les sels ou l'option détermineront l'ordre des attributs. Vous pouvez donc voir que nous mettons attributs plus importants comme Vf et Vi. Modèle Vi en haut et attributs moins importants comme l' ID de classe plus bas vers le bas. Je vais donc sélectionner ce tableau et le copier. Ensuite, je vais passer à l'engrenage des paramètres , puis aux paramètres d'extension. Je vais cocher cette case ici, qui placera notre support de fermeture sur une nouvelle ligne, ce que je préfère. Et puis sous ordre d'assaut, je vais cliquer sur Modifier dans settings.js. Normalement, lot cette option forestière, mais ce n'est pas le cas. Nous allons donc devoir le faire manuellement. Beaucoup de virgules ici après cette dernière option, sortez quelques guillemets. Et nous allons taper dans l'ordre de tri des points des attributs HTML fractionnés , ce n'est pas automatiquement complété cette forêt. Ensuite, je vais sélectionner ce tableau. Collez celui que nous avons copié depuis la page des paramètres. Gardez ça. Et maintenant, si nous revenons à ce fichier app.vue, si je sélectionne cette balise d'image, qui est une balise à fermeture automatique, et phi sont l'extension avec Control Alt Shift et a. Au fait, vous pouvez modifier cela raccourci clavier si vous le souhaitez. Vous dites qu'il scinde instantanément tous nos attributs sur de nouvelles lignes. Il fera également l' inverse. Si je sélectionne ceci et que phi est à nouveau l'extension, cela les remettra sur une seule ligne. Voyons que la commande de sels fonctionne. Donc beaucoup d' attribut de modèle V à la fin MyVar. Espérons que si nous exécutons l'extension, ce modèle V sera placé en haut, c' est-à-dire que je vais juste annuler toutes mes modifications ici. Gardez ça. Je pense que c'est toutes les extensions que je vais utiliser. Nous allons également utiliser beaucoup le terminal dans VS Code pour basculer le terminal, suffit d'appuyer sur Control et Buck malade et cela apparaîtra comme ça. Et vous pouvez également le faire disparaître avec le même raccourci, vos invites peuvent sembler un peu différentes, mais ne vous inquiétez pas, tout devrait toujours fonctionner. 5. Vue Devtools: La prochaine chose que nous voulons installer est des outils de profondeur de vue, qui nous aideront à déboguer nos applications Vue, surtout lorsque nous commençons à travailler avec un penny, plus tard, vous voulez aller à l'exploration, accompagner de petits points, plus d'outils et d'extensions. Un angle par rapport à ce menu à gauche. Puis ouvrez Chrome Web Store. Rechercher des outils de vue, de développement. Il y a trois extensions différentes ici. Au moment où j'enregistre cela, nous devons utiliser la version bêta pour les UPS V3. Mais comme vous le regardez dans le futur que dans la version de sortie, celle-ci pourrait fonctionner. Je vous suggère donc d'essayer la version version version et je pensais que cela ne fonctionne pas, puis d'essayer la version bêta, mais je vais installer la version bêta. Cliquez sur Ajouter à l' extension Chrome qui est maintenant installée. Il suffit de vérifier que ça marche. Lançons une vue dans le navigateur. Je vais ouvrir le projet que j'avais ouvert auparavant. Aller au terminal et exécuter npm run dev, n'a pas fonctionné. Je pense que c'est parce que je n'ai pas installé les dépendances. Je vais donc lancer npm install en premier. Exécutez ensuite la commande npm run dev et cliquez sur ce lien ici. Il peut désormais voir cette application de vue de base s'exécutant dans le navigateur. Launch, les outils de développement. Nous pouvons simplement accéder à nos outils de développement Chrome en accédant à View Developer, Developer Tools. Vous pouvez également utiliser le raccourci clavier. Si nous cliquons sur cette petite flèche, vous devriez avoir une option d'affichage. Et c'est là que vit notre point de vue DevTools. Et vous pouvez voir tous nos composants ici. Nous pouvons également voir les données relatives aux composants. Donc, ce composant Helloworld coûte la propriété message, la valeur de vous l'avez fait. Je vais juste zoomer un peu les outils de développement. Et cela sera particulièrement utile plus tard lorsque nous commencerons à travailler avec la direction de Penn State. 6. Vue 3 Docs et installez Node.js [Module 2]: Bon, commençons maintenant par créer une nouvelle vue de projets. Tout d'abord, passons au site de view doc. Je vais juste voir Google V3. Joe sur le site Web du V3. Au moment où j'enregistre cela, les View Docs ou sur le point d' être massivement rebondissant. Je vais utiliser la nouvelle version des documents dans ce cours car elle nous montre comment construire un projet View trois avec V8 à l'aide du dernier outil de construction. Pour passer à la prochaine version de la documentation, je vais passer à la barre d'adresse. Je viens de changer cette v3 en mise en scène. Nous voyons maintenant la magnifique nouvelle documentation. Si vous voyez déjà cela, alors d'une certaine manière, vous l'êtes. Ensuite, nous voulons cliquer sur Installer. Faites défiler un peu vers le bas. Avant de pouvoir créer un nouveau projet Vue, nous devons nous assurer que Node.js est installé. Si vous ne l'avez pas installé, cliquez sur ce lien. Vous voudrez probablement installer celui de gauche ici. Et vous voulez simplement le télécharger et l'installer. Ou, si vous préférez, vous pouvez utiliser outils de gestion des versions de nœuds tels que nvm. 7. Créer un projet de vue: Revenons à la page View Docs et créons notre première vue trois projets avec VT avec le dernier outil de construction. Pour créer un nouveau projet, il suffit exécuter cette commande dans notre terminal. Je vais juste zoomer un peu, NPM dedans, voir les dernières. Je vais copier ce code VS et aller au terminal. Et encore une fois, nous pouvons le basculer avec le commandement et le dos malades. Je vais coller cette commande. Lancez-le. En passant, vous voulez vous assurer que vous êtes dans le dossier dans lequel vous stockez vos projets. Nous devons installer ce dernier package Create View. Donc, je vais juste taper mes deux, permettez ça. Il va nous demander ici quelques options pour le nom du projet, qui sera également le nom du dossier. Je vais utiliser les bases de l'API de composition Vue car nous allons l'utiliser pour apprendre toutes les bases de la v3 et de l'API de composition. Je vais choisir le nœud pour TypeScript pour prendre en charge JSX. Je vais choisir oui pour ajouter Vue Router à notre application plus tard dans le cours, lorsque nous créerons notre application de cours, boules de notes, nous allons choisir des notes, cette option. Et je vais vous montrer comment installer Vue Router manuellement à partir de zéro. Mais pour plus de simplicité, pendant que nous apprenons les bases, je vais choisir Oui et l'outil de construction pour le faire suit automatiquement. Encore une fois pour avis, je vais choisir oui, bien que plus tard dans le cours, je vais vous montrer comment ajouter une opinion à une vue manuelle de trois projets. Je vais choisir de retester savoir à Chypre, savoir à ES lint. Vous pouvez envisager d'utiliser ES lint dans vos propres projets. Mais pour plus de simplicité, je vais choisir savoir juste pour les besoins de ce cours afin que vous ne receviez pas beaucoup d'erreurs de linting gênantes. Mais si vous voulez vraiment choisir oui, alors vous pouvez le faire, mais je vais choisir Non. C'est fini. Vous pouvez voir qu'il a échafaudé notre projet très rapidement et il nous indique comment commencer. Nous devons céder dans le dossier qu'il a créé, exécuter NPM install pour installer les dépendances et npm run dev pour lancer l'application dans le navigateur. Donc, je vais juste sauter sur le Finder. Je peux voir que le dossier est créé ici. Je vais donc faire glisser ça dans VS Code. Ouvrez à nouveau le terminal, exécutez NPM install pour installer les dépendances. Terminons et nous pouvons lancer l'application avec npm run dev. Nous pouvons voir cette URL ici. Nous commandons et cliquez dessus. Nous pouvons maintenant voir que les V3 et V2 de base commencent à s' enrouler dans le navigateur. 8. Configuration du projet: simplifions autant que possible ce projet pour nous permettre de pratiquer facilement les bases de la v3 et de l'API de composition. Tout d'abord, je voulais simplement changer le titre qui apparaît en haut, qui indique actuellement VTE. Je vais donc passer à index.html, changer le texte de cette balise de titre pour afficher les bases de l'API de composition. Gardez ça. Et nous voyons cette mise à jour instantanément, ce qui va fermer cela. Et maintenant, simplifions nos pages ou nos points de vue. Actuellement, nous n'avons que deux pages ou vues, la vue d'accueil et la vue. Nous allons d'abord simplifier l' ensemble de la vue, je vais aller à la source et aux vues, à la vue d' accueil, à la vue par points. Je vais juste arrêter l' apparition de ce message en choisissant Ne plus afficher. Je vais juste fermer ça. Et parfois, je vais cacher la barre latérale ici. Si vous souhaitez le masquer, vous pouvez accéder à Affichage et apparence et basculer cette barre latérale d'affichage ou vous pouvez utiliser le raccourci clavier. Je vais juste cacher ça pour l'instant. Je vais supprimer cette balise de script. Je vais tout supprimer dans les balises du modèle et commencer une div avec une classe de maison. À l'intérieur de cela, allouez un cap H1. Il suffit de mettre le texte à la maison et de le sauvegarder. Nous pouvons maintenant voir qu'il est mis à jour. Que je vais copier ce code. Accédez à la vue à propos du point Vue dans le même dossier. Il suffit de coller sur tout ce qui est ici. Je vais changer la classe pour environ. Modifiez également le texte de l'en-tête à propos. Gardez ça. Et nous avons maintenant deux points de vue très simples. Débarrassez-vous de tout ça au sommet. Et c'est tout. Notre composant de vue racine, qui est app.vue dans source app.vue. Je vais donc ouvrir ça en haut de la barre latérale. Combien vas-tu cacher le terminal aussi. Nous n'avons pas besoin de voir le terminal la plupart du temps. Tout ce que je veux vraiment dans notre mise en page, c'est cette navigation ici pour que nous puissions accéder à nos pages. Et c'est cet élément de navigation ici avec ces deux composants de liaison de routeur. Je vais donc copier cet élément de navigation dans ces deux liaisons de routeur. Et puis je vais sélectionner l'ensemble de cet en-tête. Il suffit de les coller par-dessus. Corrigez l'indentation. Nous devons nous assurer de quitter ce composant de vue du routeur car il nous permet d'afficher nos vues réelles, notre vue d'accueil et notre vue. Je vais sauver ça. C'est joli et simple. Je vais supprimer la section script et l'enregistrer. Je vais supprimer certains de ces styles, mais pas tous parce que certains d'entre eux ont l'air assez égaux. Si nous traînons cela, nous pouvons voir qu'au-delà d'une certaine résolution, tout est bougé. Je vais donc simplement supprimer les styles qui le font. Si nous faisons défiler cette section de style vers le bas, nous pouvons voir cette requête multimédia ici avec la largeur minimale définie sur 100 à quatre pixels. Je vais juste m'effondrer en cliquant sur cette petite flèche à côté de ça. Sélectionnez l'ensemble de cette requête multimédia. Il suffit de supprimer cela et de l'enregistrer. Et maintenant, si nous augmentons la largeur du navigateur, il faut rester le même, ce que nous n'avons besoin d'aucun des composants dans le dossier des composants. Maintenant, je vais passer aux composants source. Je vais sélectionner tout ce qui se trouve dans le dossier de ces composants en cliquant sur le premier élément, maintenant la touche Maj enfoncée et en cliquant sur le bas, puis cliquez avec le bouton droit sur Supprimer. Débarrasse-toi de ça. Nous voyons cette flèche, mais si nous rechargeons simplement la page , l'erreur disparaît. Et nous avons maintenant une application super simple que nous pouvons utiliser pour commencer à apprendre les bases de v3 et de l'API de composition. Commençons donc à apprendre les bases. 9. Options API vs API de composition [Module 3]: Créons un décompte vraiment simple à l'aide de l' API d'options, puis convertissez-le en API de composition. Cela nous aidera à voir rapidement les différences entre les deux approches. Et nous le ferons sur notre point de vue. Je vais passer aux vues source sur la vue d'accueil, la vue par points. Je vais juste me débarrasser de cette position. Je vais juste faire une plongée avec un bouton et un compteur. Beaucoup, un élément bouton avec une classe de btn avec le texte moins. Ensuite, je vais dupliquer ça. Changez le texte sur Plus. Et puis, au milieu, nous ajouterons une plage avec une classe de dénombrements. Pour l'instant, je vais juste mettre 0 là-dedans et sauver ça. Pensons juste à quelques styles pour mettre ça au centre, pour le rendre un peu plus joli. Ajoutons un bloc de style. Va cibler cette div à domicile qui vient d'être envoyée à tout. Ne maintenez donc pas l'alignement du texte au centre. Gardez ça. Un peu de rembourrage. Donc, notre conseiller n'est pas arrêté contre le nav. Définissez le rembourrage sur 20 pixels et enregistrez-le. Augmentons simplement la taille de ces boutons et du compteur et faisons un peu d'espace entre tout. Je vais donc cibler la classe Button sur la classe du conseil. Définissez la taille de la police sur 14 pixels. Gardez ça. Et je vais régler la marge à dix pixels, sauf ça. Ça a l'air plutôt décent. 10. Options API - Données et méthodes: Configurons quelques données et méthodes pour que cela fonctionne à l'aide de l'API options. Nous devons ajouter notre section de script. Et à l'intérieur de cela, nous devons ajouter notre valeur par défaut d'exportation. Commençons par configurer nos données. Pour ce compteur, nous devons ajouter une méthode de données qui renvoie un objet. Nous pouvons placer toutes nos propriétés de données ici. Beaucoup de biens appelés conseiller, définissez cela sur 0, sauvegardez ça. Nous devrions pouvoir l'utiliser dans notre modèle. Maintenant, débarrassez-vous de ce 0, nos doubles accolades bouclées. Et nous allons juste mettre un comptoir ici et sauver ça. Si je change cela maintenant, nous devrions le voir être mis à jour dans le modèle que nous faisons. Je vais remettre ça à 0. Configurons maintenant quelques méthodes pour augmenter et diminuer ce compteur. Je vais ajouter un gestionnaire de clics à ce bouton. Ce bouton Plus. clic est égal à déclencher une méthode appelée compteur d'augmentation. Créons cette méthode. Donc après notre méthode de données, beaucoup de virgules, puis nous devons ajouter notre objet méthodes. Et nous allons créer cette méthode, augmenter le nombre de tout ce que nous voulons faire c'est augmenter cette propriété de compteur d'une. Donc, pour accéder à nos propriétés de données, nous pouvons simplement faire ces points et ensuite conseiller. Et nous pouvons simplement faire plus pour l'augmenter d'un. Je vais sauver ça et voyons si ça fonctionne encore. Nous pouvons augmenter le compteur. Maintenant, nous avons juste besoin d'une méthode pour diminuer le conseiller. Donc beaucoup de virgules ici et je vais dupliquer cette méthode, renommer pour diminuer le compteur, juste changer le code par ce compteur de points moins moins pour diminuer cette propriété de conseil. Et puis je copierai ce gestionnaire de clics à partir du bouton plus et je l'ajouterai au bouton moins et je viens de changer le nom de la méthode pour diminuer le nombre et l'enregistrer. Et nous pouvons maintenant augmenter et diminuer notre compteur. 11. Convertissez en API de composition: Passons à cette application simple à l'aide de l'API de composition. Et une chose importante à noter est que tout ce qui se trouve dans le modèle reste le même. Nous n'avons pas besoin de modifier quoi que ce soit dans le modèle. En général, avec l'API de composition, tout ce qui se trouve dans le modèle fonctionne exactement de la même manière. Nous utilisons les propriétés des données, méthodes des propriétés calculées exactement de la même manière. Le seul endroit où nous faisons les choses différemment est dans la section Script. Je vais commenter cette section de script d'API Options. Pour l'instant. Beaucoup de commentaires d'ouverture en haut, puis de commentaires de clôture en bas. Ajoutons une nouvelle section de script dans laquelle nous utiliserons les scripts de l'API Composition. Nous pouvons maintenant utiliser l'API Composition avec deux modèles différents. Il y a le modèle de fonction d'installation, qui était le modèle d'origine, qui est apparu sur l' API de composition. Et puis nous avons le deuxième modèle, qui est le schéma de configuration du script, qui a été publié plus tard est beaucoup mieux. Mais pour l'instant, utilisons simplement le modèle de fonction de configuration d'origine. Bien que nous aimions utiliser le modèle de configuration de script supérieur. Pour utiliser le modèle de fonction de configuration, encore une fois, nous devons ajouter notre valeur par défaut d'exportation. Mais nous n'ajoutons pas d'options telles que les méthodes de données, etc. Nous ajoutons plutôt une fonction de configuration comme celle-ci et nous plaçons tout notre code ici. Fondamentalement, toutes nos propriétés de données, méthodes, propriétés calculées , montres, etc. vont toutes entrer dans cette fonction de configuration. 12. API de composition - Données et méthodes: Configurons une variable de données réactives pour notre compteur. Maintenant, dans l'API de composition, il existe deux principaux types de données réactives. Nous avons des réfs et des objets réactifs. Je vais en parler plus en détail plus tard dans le cours. En fait, un objet réactif nous permet de créer un objet de données avec un tas de propriétés de données associées à l'intérieur de l'objet. Tandis que RF est généralement utilisé pour des éléments de données simples, tels qu'une chaîne et un tableau ou un nombre. Il est donc logique d' utiliser un rugueux pour cela, pour configurer un href, nous pouvons simplement créer une constante et lui donner un nom. Quel que soit le nom que nous utilisons, c'est le nom disponible dans le modèle a. Nous allons donc appeler ce compteur, car c'est le nom que nous avons utilisé dans notre modèle ici. Et nous voulons définir cette valeur égale à la méthode ref comme celle-ci. Ensuite, nous pouvons passer notre valeur initiale à l'intérieur de cette méthode. Définissons donc cela sur 0 au départ parce que nous utilisons cette méthode ref, nous devons importer cette méthode depuis la vue. Au-dessus de notre exportation, nous devons donc importer de vue. Maintenant, ce représentant du conseil n'est pas encore disponible dans notre modèle. Nous devons également le renvoyer lorsque nous utilisons la fonction de configuration, la placer au bas de notre fonction de configuration, nous devons ajouter une déclaration de retour. Cette instruction de retour doit toujours rester en bas de la fonction de configuration. Et ensuite, nous devons simplement renvoyer cette réf du conseil, comme ceci et sauver ça. Et j'espère que ce compteur devrait être espéré en haut maintenant que nous pouvons voir 0 sur la page. Et si nous modifions la valeur de cette href et que nous l' enregistrons, nous pouvons voir qu'elle est mise à jour sur le modèle. Je vais juste remettre ça à 0 et l'enregistrer. Nous devons maintenant ajouter nos méthodes de compteur réduit et d'augmentation des compteurs. Et pour ce faire, il suffit de créer des fonctions nommées n'importe où dans cette fonction de configuration. Ensuite, nous devons les retourner comme nous retournons ce compteur réf. Créons donc une méthode pour augmenter le compteur. Nous pouvons donc soit le faire comme ça avec le mot-clé de fonction, la fonction augmente. Conseiller. Nous pouvons faire un compteur d'augmentation nommé constant, que nous définissons égal à une fonction comme celle-ci, qui est la méthode que j'utilise habituellement. Tout ce que nous voulons faire, c'est augmenter cette référence de compteur d'un. Et vous pourriez penser que nous pourrions simplement faire compter plus, plus. Mais en fait, cela ne fonctionnera pas avec l' API de composition car lorsque nous créons un brut, ils créent réellement un objet et la valeur de notre ref est stockée dans une propriété appelée value. Donc pour y accéder, nous devons en fait faire une valeur de point de conseiller, et nous pouvons ensuite refaire plus plus, afin d'utiliser cette méthode dans notre modèle, nous devons le renvoyer. On peut donc juste le penser à cet objet de retour comme ce compteur d'augmentation. Comme nous avons déjà OK click handler ici, qui lance la même méthode, cela devrait fonctionner. Je vais donc l'enregistrer, cliquer sur le bouton Plus et cela fonctionne. Il suffit maintenant de créer la méthode du compteur réduit. Je vais dupliquer cette méthode de calcium augmenté, renommer pour diminuer le compteur et changer simplement le plus plus en moins afin qu'il diminue la valeur du compteur d'un. Et encore une fois, nous devons le renvoyer beaucoup dans notre déclaration de retour ici, diminuer delta, sauf cela. Et j'espère que les deux boutons devraient fonctionner, mais tout fonctionne. 13. Configuration des script - Une façon plus facile !: Dans quelques trois points une nouvelle syntaxe ou un nouveau modèle pour l' API de composition a été introduit, c' est-à-dire le modèle ou la syntaxe de configuration du script. La configuration des scripts nous permet de rendre nos composants beaucoup plus simples, moins encombrants et plus faciles à gérer, nous permet de nous débarrasser de l'exportation par défaut, débarrasser de la fonction de configuration et, surtout, Débarrassez-vous de la déclaration de retour. Avec la configuration des scripts A2, nous n'avons plus à nous soucier de nous assurer que toutes nos propriétés de données, méthodes, propriétés calculées, etc. sont renvoyées. Maintenant, sur un composant simple comme celui-ci, cela peut ne pas faire beaucoup de différence, mais cela complique vraiment avec des centaines de composants qui ont chacun des sons de propriétés de données différentes, méthodes, observateurs, propriétés calculées, etc. Cela nous facilite vraiment la vie de ne pas avoir à constamment mettre à jour cette déclaration de retour chaque fois que nous modifions nos propriétés de données, méthodes, ou renommez-les, etc. Pour moi, Fujitsu, qui travaille actuellement, a passé une journée entière convertir environ 100 composants de ce modèle de fonction d'installation nouveau script modèle de configuration. Et c'était une journée vraiment ennuyeuse, mais cela en valait la peine car maintenant l'application est beaucoup plus facile à travailler. Au fait, le schéma de configuration du script est le modèle que je vais utiliser pour le reste du cours parce que c'est beaucoup plus simple et c'est le modèle recommandé par l'équipe Vue. Nous allons donc convertir ce code en nouveau modèle de configuration de script. Je vais commenter cette section de script. Nous allons ajouter une nouvelle section de script ici. Nous n'avons plus besoin d' ajouter notre valeur par défaut d'exportation, et nous n'avons pas besoin d'ajouter cette fonction de configuration. Il suffit d'ajouter un attribut à cette balise de script d'ouverture comme celle-ci. Nous pouvons maintenant placer tout notre code ici, toutes nos propriétés de données, méthodes, etc. Et nous n'avons même pas besoin de les renvoyer. Il suffit de copier nos deux méthodes sur notre réf du conseil à partir de l'ancien code. Collez-le directement ici et fixez simplement l'indentation. Nous devons encore importer cette méthode de référence depuis la vue. Je vais donc copier ça. Nous plaçons simplement toutes nos entrées en haut de cette section de script. Et maintenant, nous n'avons plus besoin de renvoyer nos données ou nos méthodes. Toutes les propriétés ou méthodes de données sont des propriétés calculées que nous déclarons au niveau supérieur de cette balise de script seront automatiquement disponibles dans notre modèle. Donc, si je garde ça maintenant, ça devrait fonctionner tout de suite. Encore. Il fonctionne toujours. Nous avons maintenant réduit notre section de script, disons, 21 lignes à seulement 11 lignes. Nous avons massivement simplifié notre code et nous n'avons plus à nous soucier de cette déclaration de retour embêtante. 14. Réfs [Module 4]: Il existe trois principaux types de données que nous pouvons utiliser dans une application API de composition. Les représentants, que nous avons déjà ajoutés dans cette application, des objets réactifs et des données non réactives. Nous avons déjà couvert les réfs. En gros, nous mettons simplement en place une constante ou un ensemble de variables égal à la méthode ref que nous devons importer à partir de vue, puis simplement transmettre la valeur initiale. Nous pouvons apporter des modifications à cette valeur en accédant la propriété value de la constante que nous avons configurée, nous ne pouvons pas autant de représentants que nous le voulons. Nous allons donc en ajouter un autre. Supposons que nous voulions un titre pour notre compteur et que nous voulons pouvoir modifier ce titre par programmation, tout avec une liaison bidirectionnelle. Ajoutons un autre représentant ici. Nous pourrions faire des comptages const au titre, définir cela égal à une méthode ref, passer une valeur initiale de, disons mon compteur. Ou nous pouvons le montrer en éliminant le mot-clé const, puis en ajoutant une virgule après la première const. Encore une fois, nous n'avons pas besoin de retourner cette constante. Il devrait être immédiatement disponible dans notre modèle. Ajoutons donc la balise H3, cette div va sortir ce titre. Donc, deux accolades bouclées, contre le titre, sauvez ça. Nous pouvons maintenant voir ce titre sur le modèle pour clarifier un peu ce qu'est ce titre, je vais juste ajouter un point-virgule après ce titre. Maintenant, si nous modifions la valeur de ce graphique, nous devrions voir la mise à jour du titre, ce que nous faisons. 15. Lien à double voie: la plupart des cas, la liaison de données bidirectionnelle fonctionne exactement de la même manière dans l'API de composition que dans l'API Options. Juste pour le démontrer, ajoutons une entrée à notre page, ce ajoutons une entrée à notre page, qui nous permet de modifier ce titre de compteur que nous avons stocké dans cette référence de données après cette div avec notre compteur et nos boutons beaucoup de div avec une classe d'édition. Et puis à l'intérieur, je vais ajouter un titre h4 avec le texte, éditer le compteur, le titre, les deux-points, puis beaucoup. Et sauvegardez ça. Je vais juste ajouter un peu de marge au sommet de cette div. Je vais sauter jusqu'à ce que nous y soyons. Supprimons simplement tous ces anciens commentaires. Et je vais passer à la section du script. Target, la classe d'édition, que nous venons de commencer à ce creux, et beaucoup de marge, au-dessus de 60 pixels et sauvegarder cela. Lions maintenant cette entrée au compteur, ce compteur titre rref. Pour ce faire, nous pouvons simplement passer à cette entrée et ajouter une directive de modèle V. Il suffit de le définir comme égal à ce nombre de const, le titre, le titre du conseil. Dis-le ça. Nous pouvons maintenant voir notre compte du titre dans cette entrée. Et si nous le modifions, il ne s'agit pas de mettre à jour l'en-tête ici. Peut-être que nous avons juste besoin d'actualiser, essayer encore une fois si nous modifions le titre de la rubrique dans cette entrée, nous le voyons mis à jour dans notre rubrique ou nous le payons. 16. Objets réactifs: Nous pouvons constater que les réfs sont pratiques pour stocker de simples éléments de données indépendants, tels qu'un nombre ou une chaîne, ou peut-être un tableau ou un booléen. Mais que se passe-t-il si nous voulons stocker un tas de données différentes reliées ensemble dans un seul objet ? Un peu comme nous l'avons fait avec la méthode de données dans Options API Apps. Eh bien, nous pouvons le faire avec un objet réactif. Supposons que nous voulions stocker notre comptoir et notre titre de conseiller ensemble dans un seul objet. Puisque ces données sont liées , nous pourrions le faire avec un objet réactif. Pour configurer un objet réactif, nous créons à nouveau une const ou nous pouvons utiliser une variable. Maintenant, nous donnons un nom à ce nom pour que nous puissions appeler ça des données de conseiller. Et nous avons défini cela comme égal à la méthode réactive. Nous devons l'importer de vue. Nous pouvons donc simplement ajouter cela à notre objet d'importation ici, réactif. Nous pouvons simplement passer un objet dans cette méthode réactive et nous pouvons placer toutes nos propriétés de données ici. Créons une propriété appelée Count for our counter, donnez-lui une valeur initiale de 0. Et puis beaucoup de propriété appelée titre, le titre, et je vais régler ça sur mon compteur, sauf ça. Utilisons les données de ces objets réactifs dans notre modèle plutôt que celles de ces références. Si nous voulons utiliser le conseiller qui se trouve dans ces objets réactifs ici, nous pouvons simplement compter les points de données du conseiller. Si nous voulons utiliser le titre, il se trouve dans les objets réactifs. Nous pouvons simplement changer cela dans cette balise de titre en titre de point de données du conseiller. Mettons également à jour ce modèle V. Pour utiliser ces objets réactifs. Je vais définir ce modèle V pour conseiller les données, les points, le titre, et je vais le sauvegarder et le recharger. Et voyons si notre titre est épuisé. Ok, oui, ça fonctionne toujours sur la liaison de données bidirectionnelle fonctionne toujours aussi et les comptes ou fonctionne, on peut voir 0 affiché là. Et si je modifie la valeur du nombre de points de données de compteur, nous pouvons le voir être mis à jour. Cependant, ces bas ne fonctionnent pas. Et c'est parce que ces méthodes, la méthode accrue du conseil et la méthode du conseiller diminué, manipulent toujours cette href et non pas la réduction qui se trouve dans notre objet réactif. Nous allons donc mettre à jour ces méthodes. Au lieu de compter ou de valeur de point plus plus, nous pouvons simplement faire des données de conseillers, nombre de points plus plus. Ensuite, dans la méthode du conseil diminué, nous pouvons simplement faire le nombre de données, nombre de points moins moins. Notez que nous n'avons pas besoin d'utiliser la valeur de point lorsque nous utilisons des données contenues dans des objets réactifs, nous utilisons simplement le nom de la propriété droite, nombre de points de données du conseiller. Maintenant, sauvegardons cela et voyons si ces boutons fonctionnent. Oui, ça marche à nouveau maintenant, nous n'utilisons plus ces réfs. Le code Vs nous montre qu'en les grisant un peu. Nous allons donc simplement les commenter. Puisque nous n'utilisons plus cette méthode ref depuis la vue, nous pouvons la supprimer de cette instruction d'importation comme ça et l'enregistrer. 17. Données non réactives: Dans nos vues, nous voulons parfois disposer d'une propriété de données qui n'a pas besoin d'être réactive. Cela est facile à faire avec l'API de composition. Et je recommande que toutes les propriétés de données votre composant qui n'ont pas besoin d'être réactives, vous devez les rendre non réactives, car cela améliorera les performances de votre application. Supposons que nous voulions stocker le titre de notre application dans une variable de données, mais nous n'avons pas besoin qu'elle soit réactive. Nous n'avons pas besoin de pouvoir modifier la valeur de ce titre par programmation et le voir mis à jour sur le modèle. Il suffit de configurer une constante ou une variable. Je vais donc créer une constante appelée titre. Il suffit de définir cette valeur égale à une chaîne. Donc je n'utilise pas un réactif, c'est juste une constante standard de bog qui est définie sur une chaîne. Je vais mettre cette corde à mon incroyable Kaltura et sauver ça. Cette constante devrait maintenant être disponible dans notre modèle. Je vais sauter au gabarit à l' intérieur de cette div avec la classe de la maison. H2 produira cette constante, donc deux accolades bouclées. Et puis à l'extérieur, ça sauvera ça. Et nous pouvons maintenant voir notre titre sur la page. Et si nous changeons cette chaîne à mon ok, contrecarrer, ce qui a un peu plus de raison, alors nous voyons cette mise à jour sur la page. 18. Méthodes [Module 5]: Nous avons déjà appris comment ajouter des méthodes à notre composant. Voyons rapidement comment transmettre des paramètres aux méthodes. abord, je vais simplement supprimer ces commentaires d'avant. Disons donc que nous voulons pouvoir augmenter notre compteur d'un nombre spécifique plutôt que d'un seul. Eh bien, nous pourrions passer le nombre que nous voulons augmenter d'un paramètre sur nos homologues croissants. Ici, nous pouvons simplement commencer les parenthèses nom de notre méthode en passant une valeur. Passons juste en un pour l'instant. Et si nous passons à notre méthode de compteur augmenté, nous pouvons maintenant recevoir ce paramètre comme celui-ci. En raccourci, nous pourrions simplement supprimer ces parenthèses si nous le voulons. Il suffit de vous déconnecter pour vous assurer qu'il passe par console.log et le montant. Gardez ça. Je vais juste ouvrir les DevTools Chrome. Vous pouvez soit accéder à View in Chrome Developer Tools, soit utiliser le raccourci clavier sur la console ici. Si je clique sur le nombre accru, oui, on peut voir ce numéro un être verrouillé. Ajustons la logique et notre méthode de compteur augmenté afin qu'elle augmente le nombre dans nos objets réactifs de la quantité que nous transmettons au lieu d'un seul. Ainsi, nous pouvons soit faire des dénombrements de points de données égaux aux données, au nombre points plus la quantité, soit en raccourci, nous pourrions faire des comptages de points de données plus une quantité égale à la quantité. Je vais sauver ça. Assurez-vous que cela fonctionne toujours. Pourtant, je travaille toujours. Nous pourrions maintenant ajouter un deuxième Boltzmann pour augmenter le compteur de deux. Je vais revenir au modèle et je vais dupliquer ce bouton de compteur d'augmentation, mais nous passerons à cette méthode. Je vais simplement changer le texte de ce bouton en plus, plus. Gardez ça, et je vais juste faire un petit zoom arrière. Maintenant, lorsque nous cliquons sur ce bouton, nous pouvons voir que notre compteur est augmenté de deux. Eh bien, ce bouton continue de l'augmenter d'un seul. Je vais simplement faire défiler vers le bas et supprimer ce console.log. Faisons de même pour notre diminution du cancer. Je vais dupliquer ce bouton de compteur réduit. Dans le deuxième bouton, nous transmettrons la valeur 1, puis, dans le premier bouton, la valeur sera transmise pour changer le texte du bouton à moins. Si tel est le cas, nous devons mettre à jour cette méthode de conseiller réduite. Encore une fois, nous pouvons faire le nombre de points de données du Conseil égal nombre de points de données moins le montant. Ou nous n'avions pas besoin de transmettre la quantité de fosse ici. Ou en raccourci, nous pouvons faire le nombre de points de données du Conseil moins un montant égal à un montant. Alors, sauvegardons cela et voyons si cela fonctionne. Il suffit de faire glisser la console sur un peu. Ce bouton réduit le compteur d'un. Ce bouton le diminue de deux. Au fait, si vous souhaitez accéder à l'objet événement, nous pourrions le faire en passant simplement un deuxième paramètre à notre méthode. Je le transmettrai à celui-ci ici. Sur ce point doit être nommé événement Dollar. Et maintenant, si nous passons à notre méthode de conseiller accrue, il faudra remettre les parenthèses. Puisqu'il y aura deux paramètres, nous pouvons ensuite passer l'objet de l'événement comme ça. Vous pouvez utiliser n'importe quel nom que vous voulez, mais je vais simplement utiliser un. Maintenant, nous devrions pouvoir vous déconnecter. Et lorsque nous cliquons sur cette tension augmentée d'une tension, on peut dire que l' objet événement est déconnecté. Et nous pouvons ensuite accéder à l' élément sur lequel on a cliqué, l' endroit où se trouvait le curseur, etc. Avant de passer à autre chose, supprimons simplement ce console.log. 19. Propriétés calculées: Les propriétés calculées sont des propriétés généralement générées à partir de données réactives, qui sont mises en cache et mises à jour uniquement lorsque des dépendances changent. Par exemple, nous pourrions créer une propriété calculée qui prend la valeur de ce compteur, la manipule d'une manière ou d'une autre. La valeur de notre propriété calculée ne sera régénérée que lorsque le compteur change. Rappelons-nous donc comment nous avons ajouté des propriétés calculées à l'aide de l'API options. Je vais passer au bas de cette section de script et ajouter une autre section de script. La valeur par défaut de l'exportation. L'API des options. Nous avons dû ajouter une option calculée. Nous avons dû placer toutes nos propriétés calculées ici, comme ma propriété calculée. Ensuite, nous effectuerions une logique basée sur une propriété de données. Ensuite, nous retournerions quelque chose. Cela signifie que toutes nos propriétés calculées devaient être regroupées dans cet objet calculé. Cependant, avec l'API de composition, nous pouvons créer une propriété calculée littéralement n'importe où dans notre section de script. Cela est vraiment utile, surtout sur les composants plus volumineux car cela signifie que nous pouvons regrouper tous nos codes pertinents ensemble, ce que j' ai démontré dans le premier module. Comme je l'ai dit dans le premier module, c'est l'un des principaux avantages de l'API de composition. Le fait qu'il nous permette de regrouper tous nos codes associés, qu'il s'agisse de propriétés de données, de méthodes, propriétés calculées , de montres, de cycle de vie, de crochets, etc. Commentons cet exemple d'API Options ici. Nous ajouterons une propriété calculée à notre code API de composition. Maintenant, pour créer une propriété calculée, nous devons importer la méthode calculée depuis la vue. Nous pouvons simplement commencer cela jusqu'à notre entrée ici, calculée par des virgules. Et maintenant, configurons une propriété calculée qui détermine si le compteur est pair ou impair. Et ensuite, espacez cela sur la page. Tout d'abord, installons le narco après cette div avec tous nos boutons et le compteur, beaucoup de balises de paragraphe, et j'ajouterai simplement le texte. Ce comptoir est bizarre. Bonjour, Nous allons rendre ce mot étrange dynamique en utilisant notre propriété informatique. Je vais sauver ça. Défilons un peu vers le bas. Et encore une fois, nous pouvons créer notre propriété informatique où nous le voulons. Je suppose qu'il est logique de le placer après un objet réactif sans données. Pour créer une propriété calculée, il suffit de lancer la méthode calculée. Dans ce contexte, nous devons simplement adopter une méthode comme celle-ci. Ensuite, nous devons retourner quelque chose. Pour utiliser cette propriété d'ordinateur, nous devons l'attribuer à une constante ou à une variable. Je vais donc attribuer cela à une constante appelée impair ou pair. Oups, je l'ai mal orthographié. Impair ou pair. Nous pouvons utiliser le reste de l'opérateur pour déterminer si un nombre est pair ou impair. Nous pouvons donc simplement faire IF et ensuite accéder à nos comptes. Nous pouvons donc simplement faire le nombre de points de données. Si le nombre de points de données du compteur est égal à 0, reste deux est égal à 0. En d'autres termes, si nous divisons la valeur de notre compte par deux et que nous obtenons le reste, eh bien, si c'est un nombre pair et que nous le divisons par deux, le reste sera 0. Et nous savons que le nombre est égal. Si c'est le cas, nous pouvons même revenir. Sinon. Sinon, on peut juste revenir bizarrement. Maintenant, nous pouvons simplement nous débarrasser de tout cela si nous voulons sentir que cela n'arrivera jamais à cette ligne. Si cette première ligne est vraie, je vais me débarrasser du mot autre sur Save que cette propriété calculée est maintenant prête à être utilisée dans notre modèle. Je vais sauter sur le marché où nous venons de commencer ce paragraphe. Supprimez le mot impair, un double accolade, sortez simplement notre propriété calculée impair ou pair. Gardez ça. Nous pouvons voir que le conseiller est égal à 0 et il dit que ce compteur est égal. Nous l'augmentons d'un. Et ça dit des rabais ou c'est bizarre. Nous l'avons réglé à deux et c'est encore une fois, etc. 20. Une note sur les filtres: Si vous vous demandez comment faire des filtres avec V3 sur l'API de composition , ils ont été supprimés de la V3. Si vous n'avez que Google affiche trois filtres sur cette page à partir du guide de migration, nous pouvons voir qu'ils ont effectivement été supprimés. En vue de, nous pourrions ajouter un objet Filters à notre exportation par défaut. Et nous pourrions créer un filtre qui accepterait la valeur, puis retournerait autre chose. Ensuite, nous pourrions utiliser ce filtre dans notre modèle en ajoutant simplement un tuyau suivi du nom du filtre. Si nous faisons défiler jusqu'à l'a3x, mettez à jour, les impulsions sont supprimées, ne sont plus prises en charge. Nous recommandons plutôt de les remplacer par des appels de méthode ou des propriétés calculées. Maintenant, ce n'est pas un gros problème car nous pouvons facilement obtenir les mêmes fonctionnalités qu'un filtre en utilisant des propriétés ou des méthodes calculées. En fait, ce que nous avons fait ici avec cet étrange ou même est un peu comme un filtre. Nous prenons une valeur et produisons quelque chose en fonction de cette valeur. Mais l'une des choses pratiques concernant les murs de filtres, nous pourrions facilement créer un filtre global, l'utiliser dans notre application. Disons donc que nous avions une application qui affichait de la monnaie sur de nombreuses pages différentes. Nous pourrions créer un filtre qui convertirait un nombre en chaîne de devises formatée avec un dollar au début et peut-être quelques virgules pour séparer les zéros. Cependant, si V3, nous pouvons atteindre la même chose en créant une propriété calculée ou une méthode permettant de rendre cette propriété ou cette méthode calculée globale à l'aide de composable. Et puis nous pouvons facilement utiliser cette fonctionnalité toute façon, moi dans notre application. Et nous en apprendrons plus à ce sujet plus tard dans le cours lorsque nous aborderons le composant. 21. Regarder: Les montres nous permettent essentiellement de regarder une propriété de données réactives et elles font quelque chose chaque fois qu'elle change. Rappelons-nous simplement comment nous avons fait cela avec l'API options. Je vais donc proposer ce commentaire de clôture ici. Disons que nous avions une méthode de données. Dans ce cas, nous avions une propriété count définie sur 0 au départ. Ensuite, nous voulons regarder ce compte et disons faire quelque chose quand il atteint une valeur particulière, où nous devrions ajouter une option de montre, objet à exporter. Et ensuite, nous pourrions ajouter un observateur pour regarder ces chiffres comme ça. Nous pourrions créer une méthode appelée count. Nous pouvons passer deux paramètres, le nouveau compte sur l'ancien compte. Ensuite, nous pouvons faire quelque chose chaque fois que le compte change, nous pourrions faire quelque chose comme si vous comptez est égal à 20, puis nous pourrions alerter un message. Encore une fois, avec l'API d' options, toutes nos montres doivent être regroupées à l'intérieur de cet objet de montre. Cela signifie que ces montres sont souvent nombreuses, nombreuses lignes de code loin des données réelles avec lesquelles elles travaillent. Cependant, avec l'API de composition, nous pouvons configurer nos montres partout où nous le voulons dans notre section de script, ce qui signifie que nous pouvons facilement regrouper les montres avec leurs données pertinentes. Je vais juste déposer ce commentaire de clôture et placer à nouveau au bas de la section de script, faisons-le. L'API de composition met en place moins un observateur, ce qui est notre nombre et notre alerte lorsqu'il atteint 20. Pour utiliser un observateur, nous devons importer la méthode de montre de vue. Et il est logique de placer notre observateur après les données que nous allons regarder. Nous allons donc placer ce coup pour créer l'observateur. Nous voulons juste tirer la méthode de la montre. Le premier paramètre devrait être l'élément de données réactives que nous allons surveiller si notre conseil était dans une référence, tel que const count est égal à ref comme ça, alors nous pourrions simplement passer le premier. paramètre. Bien que notre compteur se trouve dans un objet réactif, il s'agit en fait d'une propriété de données imbriquée. Et nous ne pouvons pas vraiment compter les points de données des conseillers. Ça ne va pas marcher. Nous devons donc utiliser un getter à la place pour saisir cette propriété de données imbriquées pour nous. Et nous pourrions le faire comme ça pour que nous puissions simplement faire parenthèses puis un symbole de flèche, puis nous pouvons simplement ajouter la propriété de données imbriquées que nous voulons saisir, c' est-à-dire les données du conseiller, le nombre de points. Et puis pour le deuxième paramètre, nous ajoutons une méthode, parenthèses, puis des accolades fléchées. Et encore une fois, nous pouvons accéder à la nouvelle valeur et à l'ancienne valeur ici. Donc, de nouveaux comptes, des vieux comptes. Je vais juste me débarrasser de ce compte REF que nous avons ajouté. Nous devrions donc pouvoir les verrouiller maintenant, une déconnexion, nouveau compte, enregistrer cela, recharger la page. Et si nous changeons de compteur, nous pouvons voir que notre observateur est viré et nous pouvons voir un nouveau compte un dans la console. Et chaque fois qu'il change, observateur sera renvoyé à nouveau. Affichons des alertes si notre compteur atteint 20. Nous pouvons simplement le faire si le nouveau décompte est égal à 20, alerte. C'est le chemin à parcourir. Vous avez atteint 20 ans. Puisque nous n' utilisons pas l'ancien compte, nous n'avons pas besoin de le déclarer ici, donc je vais m'en débarrasser et sauvegarder cela. Et voyons si cela fonctionne. Alors, j'espère que lorsque nous arriverons à 20 ans, nous disons une alerte. 22. Croquets de cycle de vie - Monté [Module 6]: Les crochets de cycle de vie nous permettent d'exécuter du code à différentes étapes du cycle de vie de nos composants. Nous pouvons exécuter du code lorsqu' un composant est monté, comme dans le cas où il est chargé dans le navigateur. Ou nous pouvons exécuter du code lorsqu'il est démonté en tant que déchargé du navigateur. Et rappelons simplement comment nous utilisons hooks du cycle de vie dans l'API Options. Je vais de nouveau faire défiler vers le bas jusqu'à la section Script. Il suffit d'attraper le commentaire de clôture et de le coller en haut. Dans l'API Options, nous ajouterions des hooks comme celui-ci. Pour ajouter un crochet monté, par exemple, il suffit d'ajouter une méthode montée à notre exportation par défaut comme celle-ci. Ensuite, on pourrait faire des trucs. Lorsque le composant est chargé. Nous pourrions ajouter un crochet non monté comme celui-ci. Effectuez des opérations lorsque le composant est déchargé du navigateur. Et maintenant, il suffit de coller quelques journaux de console ici. Console.log monté et console.log monté et sauvegarder cela. Et cela fonctionnera encore d'ailleurs, nous pouvons réellement combiner l' API de composition avec l'API d'options. Vous verrez que si je recharge la page, nous pouvons voir que le montage est verrouillé dans la console. Et si je quitte la page, vous pouvez voir le démontage étant verrouillé car notre vue d'accueil a été supprimée du navigateur. Cependant, je ne recommande pas d'utiliser à la fois l'API de composition et l'API d'options en même temps. Premièrement, cela rend nos composants vraiment désordonnés et incohérents. Et le numéro deux est difficile à communiquer entre les différentes sections de scripts. Par exemple, dans notre code API options, nous ne pouvons pas accéder aux propriétés de données qui se trouvent dans la balise de script API de composition. Mais de toute façon, car avec l'API d'options, nous ne pouvions ajouter qu' un crochet de chaque type, un crochet monté et un crochet monté. Cela signifie que nous en avons souvent besoin pour regrouper beaucoup de logiques non liées dans ces faucillons. Mais dans l'API de composition nous ne pouvons pas autant de crochets que nous le voulons, autant de crochets montés que nous le voulons et autant de crochets non montés que nous le voulons. Et nous pouvons placer cela partout où nous voulons dans notre section Scripts. Commentons simplement cette section de script d'API Options. Une fois encore. Ajoutons tous les supports qu'il accroche à ce composant. Ils sont par ordre d'exécution. Le premier est le crochet de montage avant, qui sera déclenché juste avant le chargement du composant dans le navigateur. Pour ce faire dans l'API de composition, nous avons juste pensé à une méthode appelée avant le montage. Ensuite, nous passons une méthode dans cette méthode, nous pouvons coller ici tout notre code que nous voulons déclencher avant que le composant ne soit monté. Je vais juste me déconnecter avant et ensuite je vais dupliquer ça. Et ensuite, nous avons le crochet non monté à ajouter comme ça. Ensuite, nous avons le R&B pour crochet non monté. Donc, avant de démonter. Au fait, je fais simplement une sélection multiple ici en maintenant la touche Alt enfoncée, en sélectionnant les textes, en maintenant la touche Alt enfoncée puis en sélectionnant les autres textes. Enfin, nous avons le crochet non monté. Pour cela, nous ajoutons une méthode appelée non montée. Pour utiliser ces crochets, nous devons les importer de vue. Je vais donc faire une sélection multiple ici et sélectionner tous ces noms de méthodes et les copier. Et passez à notre importation, ajoutez une virgule et collez-les dans. Et puis je vais simplement rejoindre cela ensemble en appuyant sur Command Shift et payez pour afficher la palette de commandes. Je pense que le raccourci est différent sous Windows, il suffit de lancer la commande jointure lignes. Ensuite, je commencerai juste quelques virgules entre eux. Gardons ça et voyons si ça marche. Je vais recharger la page. Et oui, on peut voir avant que le montage ne soit verrouillé, puis sur le support, il est verrouillé. Et si nous passons à la page à propos, nous pouvons voir avant que le Mount soit verrouillé et que le démontage soit verrouillé. Une chose à savoir est qu' il n'y a pas de hooks créés ou créés avant dans l'API de composition. Et c'est parce que le code que nous mettons au niveau racine des balises de script sera effectivement déclenché à ce stade. Ainsi, tout ce code de notre section script est effectivement déclenché avant la création du composant. 23. Hooks actives: Voyons comment nous ne pouvons pas l'activer sur hooks désactivés avec l'API de composition. Nous faisons cela de la même manière. Je vais juste dupliquer ça sur un crochet monté. Nous ajoutons simplement le crochet activé, nous allons simplement nous déconnecter sur activé. Et ensuite, pour le crochet désactivé, nous utilisons simplement le bouton désactivé. Encore une fois, nous devons les ajouter à notre importation ou il semble que code VS soit automatiquement ajouté. Il suffit de les ajouter ici. Si ce n'est pas le cas. Je garderai que maintenant ces crochets ne seront tirés que si nos composants sont maintenus en vie. Cela signifie que le composant continue de fonctionner en arrière-plan, même s'il n'est pas affiché sur la page. Pour ce faire, nous devons envelopper notre composant de vue routeur dans des balises Keep-Alive. Nous voulons passer à app.vue. Nous voulons envelopper cette vue de routeur dans des balises Keep-Alive. Nous pouvons soit utiliser un boîtier de tableau de bord comme celui-ci. Nous pouvons utiliser l'affaire Pascal. J'utiliserai le cas Pascal car c'est ce que nous utilisons partout dans notre AP. Je veux juste coller cette vue de routeur à l'intérieur de ces balises. Gardez ça. En fait, nous faisons cela différemment dans V3 car nous voyons cet avertissement ici. vue Router ne peut plus être utilisée directement à l'intérieur de la transition ou à la place des accessoires de fente de maintien en vie. Et cela nous donne ici un petit exemple de la façon de le faire. Nous pouvons simplement copier ceci, le coller ici. Il devrait maintenant garder vivants tous les composants qui sont chargés dans cette vue de routeur et nous devrions voir qu'ils sont activés et désactivés dans le travail de Hook. Je vais donc l'enregistrer et recharger l'application. On peut le voir activé là. Si nous quittons cette page, permettez-moi de voir également l' espoir désactivé qui est viré. Maintenant, je ne veux pas garder les pages en vie là-dedans, donc je vais juste annuler tout ce que nous avons changé dans app.vue pour que nous ayons simplement notre composant de vue routeur tout seul. Et ensuite, je garderai ça. 24. Croquets mis à jour: Nous avons également les crochets mis à jour qui sont déclenchés chaque fois que notre modèle change. Par exemple, chaque fois que notre conseil change, ajoutons ces crochets à ce composant Vue de la vue d'accueil. Et c'est un peu désordonné maintenant. Je vais donc retirer tous ces crochets et retirer les entrées de ces crochets. Aller ajouter un crochet avant la mise à jour. Nous allons juste nous déconnecter avant de procéder à la mise à jour. Ce crochet sera déclenché juste avant la mise à jour du modèle. Donc, si nous cliquons sur ce bouton sur les changements de compteur, celui-ci sera déclenché juste avant la mise à jour du modèle. Ensuite, nous avons le crochet mis à jour qui sera déclenché au moment où le modèle mis à jour et nous allons simplement nous déconnecter lors de la mise à jour. En fait, mon BOD n'est pas entièrement mis à jour, il est entièrement mis à jour. Je vais juste arranger ça. Une fois encore. Nous devons les importer. activera ensuite avant les mises à jour, mises à jour à partir de la vue et sauvegardera cela. Si nous le rechargeons, vous pouvez dire que ces crochets ne sont pas déclenchés lors du premier chargement du composant. Si je clique sur ce bouton et le compteur augmente et que notre modèle change, nous pouvons voir ces crochets être déclenchés premier le crochet avant la mise à jour, suivi du crochet mis à jour. 25. Plusieurs crochets !: Avant de passer à autre chose, démontrons simplement ajout de plusieurs crochets du même type. Je vais juste supprimer ces crochets mis à jour. Je vais retirer les entrées. Retirez les crochets naturels. Supposons que nous voulions faire certaines choses liées au titre de notre application lorsque le composant est chargé pour la première fois. Nous voulons également faire certaines choses liées à notre compteur lorsque le composant est chargé pour la première fois. On peut donc juste s'arrêter à des faucillons non fondus. Importons à partir de la vue montée. Et après le titre de notre application, nous ne pouvons pas être démontés. Je vais juste me déconnecter, faire des trucs liés au titre. Et puis disons que nous voulons faire des choses liées au compteur lorsque le composant est monté, puis nous pourrions ajouter cela ici. Nous pouvons donc simplement coller dans une autre discussion. Je vais simplement changer le texte de ce journal pour faire des choses liées au compteur. Gardez ça. De cette façon, avec l'API de composition, nous pouvons conserver tous nos crochets avec le code associé, surtout si nous utilisons des commentaires pour séparer nos différentes sections de code. Ce que je fais souvent dans les composants de vue, c'est que j'ajoute un commentaire de bloc comme celui-ci. Je vais simplement ajouter un commentaire pour nos commentaires. Ensuite, déplacez ça vers le haut. Retrait. Et puis beaucoup, un petit commentaire pour le titre de notre application. Nous allons placer les appels de titre de l'application et le crochet non monté qui y est associé sous ce commentaire. Et puis beaucoup de commentaires sur un bloc de taupe pour le conseil. Je vais placer tout le code relatif à notre conseil sous ce commentaire. Et je vais sauver ça. Même si ce composant n'est pas particulièrement compliqué, nous commençons déjà à voir les avantages que l'API de composition nous apporte en termes de maintien de notre logique associée, plutôt que d'être dispersée. à travers les différentes options, ce que nous devons faire lorsque nous utilisions l'API options. 26. Directives personnalisées locales [Module 7]: Vue.js est suivi. Directives prêtes à l' emploi telles que V model, V show, v-if, etc. Mais nous pouvons créer nos propres directives personnalisées pour ajouter des fonctionnalités aux éléments afin que nous puissions faire quelque chose un élément une fois qu'il est ont été créés ou montés. L'exemple classique consiste à créer une directive dont l'autofocus est un champ de saisie. Créons donc une sauvegarde directe qui concentre également cette importation sur notre vue d'accueil. Je vais passer à la vue d'accueil dans les vues source et la vue d' accueil par points. Et rappelons-nous comment nous y parvenons. La méthode API des options. Je vais décommenter le code API des options. L'API des options. Nous avons dû ajouter une option de directives, qui est un objet. Nous pourrions placer toutes nos directives ici. Créons une directive de mise au point automatique. On pourrait donc appeler ça l'autofocus. Et encore une fois, nous avons défini cela sur un objet. À l'intérieur, nous pouvons ajouter tous les crochets que nous voulons, tels que créés ou montés. Ajoutons donc un crochet monté. Nous pouvons accéder à l'élément en passant ce paramètre l. Et ensuite, nous pouvons faire quelque chose avec cet élément. Dans ce cas, nous voulons le focaliser afin de pouvoir faire le point L dot. Je vais sauver ça. Nous devrions maintenant pouvoir utiliser cette directive en fonction de nos commentaires. Et nous avons juste besoin de nous préparer et quel que soit le nom que nous avons utilisé ici avec v dash. Si je saute à l' entrée qui est ici, nous devrions être en mesure d' ajouter un tiret v, également de se concentrer. Cela devrait toujours fonctionner même si nous utilisons l'API d'options ici. Si je recharge la page maintenant, vous pouvez voir qu'elle est également concentrée sur cette entrée avec l'API options. Toutes nos directives locales ont dû être placées dans ces objets de directives, ce qui, encore une fois, comme je ne cesse de le dire avec l'API options, cela conduit souvent à la dispersion du code associé sur de nombreuses lignes de code. Alors qu'avec l'API de composition, nous pouvons créer une directive locale n'importe où dans une fonction de configuration. Commentons notre code API d'options et faisons cela de la manière de l'API de composition. Je vais simplement commenter cette section de script sur Jupiter dans notre section scripts API de composition. Sur le bouton, je vais ajouter un autre de ces commentaires de bloc appelé directives. Pour créer une directive, nous devons créer une const. Le nom de cette cause doit être camelcase et il doit commencer par une minuscule v. Nous pourrions appeler ce V également focus. Quel que soit le nom que nous utilisons ici déterminera l'attribut que nous utilisons réellement, bien qu'il soit converti en casse de tableau de bord comme celui-ci. V autofocus, CamelCase devient autofocus v dash lorsque nous l' utilisons sur le modèle. Quoi qu'il en soit, nous voulons définir cela sur un objet. À l'intérieur, nous pouvons ajouter un crochet de cycle de vie tel que créé. Et nous définissons cela comme une propriété définie sur une méthode comme celle-ci. Nous pouvons ensuite faire quelque chose avec l'élément auquel nous avons ajouté cette directive dans ce fauc créé. Et nous pouvons également utiliser tous les autres livres, comme avant monté et monté avant la mise à jour. Mise à jour avant sur le support. Monté. Mais pour cela, utilisons à nouveau le crochet monté. Nous pouvons simplement utiliser le même code que nous avions fait auparavant pour concentrer la mise au point simple de l dot. Nous avons déjà ajouté cette directive à la version simple. J'espère que cela devrait fonctionner maintenant, je vais simplement recharger la page et pourtant il est toujours automatiquement focalisé cette entrée. Mais maintenant, nous avons la liberté de placer cette directive locale partout où nous le voulons dans notre section Scripts. 27. Directives personnalisées mondiales: instant, nous ne pouvons utiliser cette directive autofocus V sur ce composant particulier, la vue d' accueil par points. Si nous voulons pouvoir utiliser cette directive dans l'ensemble de Sarah sur différents composants, nous pouvons prendre notre directive, la placer dans son propre fichier et créer une directive personnalisée globale. Passons donc à l'Explorateur de fichiers et nous allons créer un dossier dans lequel nous pourrons placer nos directives personnalisées. Je vais donc créer un nouveau dossier dans le dossier source appelé directives. Je vais créer un nouveau fichier. Et prenons ce fichier du même nom que notre directive. Donc, l'autofocus V est. Et d'ailleurs, si vous rencontrez des problèmes avec l'espacement des tabulations ici, car tous ces fichiers de ce projet nous créé un espace d'habitat de deux espaces. Vous pouvez constater que lorsque vous créez un nouveau fichier, il est défini sur quatre espaces, car c'est la valeur par défaut dans le code VS. Si vous voulez résoudre ce problème, accédez simplement au code, aux préférences et aux paramètres. Il suffit de modifier ce paramètre de taille de robinet sur deux. Et vous devrez peut-être simplement supprimer ce fichier et le recréer également, ce fichier autofocus V. Mais de toute façon, passons notre directive dans ce fichier. Je reviendrai à la vue à la maison. Maintenant, nous pouvons simplement couper ce code. Je vais également supprimer le commentaire. Nous pouvons passer à l'autofocus JS et simplement le coller. Et tout ce que nous avons à faire pour rendre cela disponible dans d'autres fichiers, c'est d'exporter cette constante. Nous pouvons donc commencer à exporter et sauvegarder cela. Maintenant, si nous revenons à la vue complète des points de vue, nous pouvons maintenant importer cette directive et l'utiliser. Je vais juste sauter jusqu'à la section impulsion. Pour importer cette directive. Nous pouvons simplement importer l'autofocus à partir de directives obliques slash v autofocus. Nous avons déjà une directive ajoutée à cette impulsion, et cela devrait donc, espérons-le, fonctionner. Je vais recharger la page mais elle fonctionne toujours, sauf qu'il s'agit maintenant d'une directive globale que nous pouvons utiliser n'importe où. Juste pour démontrer que nous allons ajouter une zone de texte à notre page À propos. Nous allons donc ouvrir les vues À propos de la source de page sur bu.edu, beaucoup de zone de texte. Après cette rubrique. Ensuite, nous devons ajouter une section de configuration de script, beaucoup de commentaires pour les importations. Ensuite, je copierai simplement le code d'importation à partir de la vue de points de vue, collerai là-dedans, et nous devrions maintenant pouvoir l'utiliser ici également. Ajoutons-le donc à cette zone de texte v autofocus. Enregistrez ce rechargement. Et pourtant, il fonctionne ici aussi. Nous avons maintenant une directive globale pratique que nous pouvons utiliser n'importe où dans notre application. 28. Vue Router - $route - 1ère Partie [Module 8]: Voyons comment nous faisons les choses différemment avec Vue Router dans l'API de composition. Vous pouvez maintenant vous souvenir des objets dollar routes que nous pourrions utiliser pour accéder à éléments tels que le chemin d'itinéraire actuel ou les paramètres d' itinéraire dans l'API Options. Eh bien, nous pouvons toujours utiliser ces objets racine dollar dans notre modèle lorsque nous utilisons l'API de composition. Pour démontrer cela, créons une page détaillée de publication qui accepte un paramètre ID. Ensuite, nous utiliserons l'objet dollar roots pour afficher cet ID sur la page détaillée de cette publication. Mais avant de le faire , modifions cette page À propos par une page de publications, laquelle nous ajouterons plus tard une liste de publications. Nous voulons accéder à notre fichier de routeur dans le routeur source index.js. Et au fait, je vais vous montrer comment configurer le routeur de vue à partir de zéro plus tard dans le cours lorsque nous créerons nos boules de notes. Mais dans ce projet, tout a été mis en place pour nous. Nous ne vous inquiétons pas, je vais vous montrer comment mettre tout ça en place à partir de zéro. Vous pouvez mieux comprendre ce qui se passe ici si vous ne connaissez pas déjà Vue Router. Mais de toute façon, ajustons cette page À propos et en faisons une page de publications. Je vais donc changer le chemin vers les barres obliques. Je vais changer le nom en messages et je vais me débarrasser de ce tas de commentaires. Et nous allons plutôt importer un composant appelé Affichage des messages. Je vais sauver ça. Cela va casser notre application car elle recherche ce composant qui n'existe pas. Alors ouvrons notre explorateur, sautons dans les vues et nous allons le renommer à propos de Vue point vue en publications. La vue des points fonctionne maintenant à nouveau. Et maintenant, mettons à jour nos liens de navigation en haut. Ils sont dans app.vue, source app.vue. Nous voulons modifier ce deuxième lien de routeur pour accéder aux postes obliques de chemin. Et nous voulons également changer le texte en publications. Sauf cela, nous devrions maintenant pouvoir discuter de la page des publications. Ajustons donc un peu cette page de messages. vues source et la vue de dessus des publications modifieront cette classe sur cette div racine, deux publications, et nous changerons le texte de cette rubrique, deux publications également. Gardez ça un peu. Nous allons ajouter une liste de liens vers certains articles. Eh bien, tout d'abord, mettons en place un itinéraire pour page détaillée de nos publications. Nous allons donc revenir à index.js dans le dossier du routeur. Et je vais ajouter une virgule après cet itinéraire de publication , puis dupliquer cela. Et nous allons définir le chemin vers la publication des détails. Et nous voulons cet itinéraire, et nous voulons que cet itinéraire accepte un paramètre nommé ID. Pour ce faire, nous pouvons simplement ajouter l'ID deux-points à la fin. Cela signifie que si nous allons à la barre oblique détaillée ID 1 , la valeur du paramètre ID que nous transmettons à cette route sera ID1. Ensuite, nous changerons le nom en détail de la publication, et nous modifierons le composant en vue détaillée de publication, vue de dessus. Et nous sauvegarderons cela à nouveau, cela brisera notre application car ce composant n'existe pas. Nous allons donc dupliquer le composant de vue de cette publication en cliquant dessus avec le bouton droit de la souris et en utilisant la commande de fichier ou de répertoire dupliqué, qui provient de l'extension d'action dupliquée que nous avons installée précédemment dans le cours. Nous allons dupliquer cela et nous l' appellerons affichage des détails. Je vais supprimer tout ce qui se trouve dans les balises de script sont supprimées. Zone de texte. Je vais changer cette classe en détails postdoctoraux. Modifiez le texte de l' en-tête en page de publication, enregistrez-le, rechargez la page, et cela ne fonctionne pas. Et c'est parce que je renomme ce composant de façon incorrecte. Il devrait être affiché vue détaillée par point de vue. Renommons cela encore une fois, il suffit de penser à la vision du monde à la fin. Ajoutons quelques liens vers cette page de publications pour que nous puissions accéder à notre page détaillée de publication et ensuite utiliser les itinéraires en dollars. Optez pour accéder à notre paramètre d' itinéraire. 29. $route - 2e partie: Ajoutons quelques liens vers notre page détaillée de publication. Sur cette page de messages, je vais passer aux vues sur la vue des messages, la vue par points. Et après celle-ci, je vais ajouter une liste non ordonnée. À l'intérieur, je vais ajouter une étiquette LI. Et puis à l'intérieur, je vais ajouter un lien de routeur à la liaison du routeur. Nous pouvons utiliser le boîtier de tableau de bord comme celui-ci, ou nous pouvons utiliser le cas Pascal. Et je vais utiliser l'affaire Pascal. À l'intérieur de la sortie, le texte publie une réponse, définit le chemin d'accès à ce lien de routeur. Nous pouvons simplement ajouter deux attributs et le définir sur notre chemin. Et si nous revenons à notre routeur de source de fichier index.js, le chemin que nous avons spécifié ici était barre oblique, poster une barre oblique détaillée, puis l'ID. Je vais donc définir ceci pour attribuer à la barre oblique de post detail id one. Et puis je vais dupliquer cette LI deux fois, changer les deux valeurs dans le deuxième lien en id2 à la fin, puis poster deux, puis la troisième, je vais la changer en trois, puis en poster trois. Sauvegardons cela et nous pouvons voir un lien vers ces publications. Commençons juste un peu de marge en bas. Beaucoup. Une section de style qui est étendue, ce qui signifie que tous les styles que nous mettons ici ne s'appliqueront qu'à ce composant particulier. Je vais donc ajouter un peu de marge inférieure à l'UL, marge, les 30 pixels inférieurs. Gardez ça. Voyons si ces liens fonctionnent. Et pourtant, nous sommes sur notre page de publication ou sur notre page détaillée de publication. Nous pouvons voir la barre oblique 1 dans la barre d'adresse. Et si nous revenons en arrière et que nous cliquons sur le deuxième, laissez-moi dire barre oblique id2 à la fin, nous pouvons maintenant utiliser les objets dollar routes dans notre modèle pour accéder à ce paramètre d'ID que nous transmettons. Ouvrons la page détaillée de la publication, la vue détaillée des publications, la vue par points. Laisse apparaître un paragraphe sous cette rubrique. Et je vais simplement demander au texte d'afficher le contenu des publications avec l'ID d'émail, ajouter des accolades doubles, une racine de dollar , des paramètres de points, puis le nom de notre paramètre, qui est ID point ID ici. Sauvons ça. Et nous pouvons dire afficher le contenu des publications avec un identifiant id2 ici. Si nous revenons en arrière et que nous cliquons sur le troisième message , nous voyons ID3. Et sortons rapidement du bouton arrière ici, j'ajouterai un autre paragraphe sur un lien de routeur avec les textes en arrière, juste pour ajouter une petite flèche gauche ici, nous allons utiliser une entité HTML, LT, qui sonne moins que puis un point-virgule. Ensuite, nous allons définir les deux valeurs de ce lien de routeur sur des postes obliques. Enregistrer ce bouton de retour ne fonctionne pas. Vous pouvez voir que l'accès aux objets dollar routes dans notre modèle est exactement le même dans l'API de composition que dans l'API Options. Mais comment pouvons-nous accéder aux informations de notre itinéraire dans notre section Scripts ? Eh bien, dans l'API Options, nous pourrions simplement faire cet accès racine à point dollar, toutes les mêmes informations. Nous pourrions utiliser cela à l'intérieur des méthodes les propriétés calculées sont des hooks du cycle ou dans l'API de composition, nous n'avons pas accès à cela. Nous n'avons pas accès à l'instance sur toutes les options, car nous n'avons aucune option. Dans l'API de composition, nous devons utiliser les vues trois, utiliser plutôt routage composable. 30. useRoute: Nous ne pouvons pas utiliser cette racine de dollar de points dans l'API de composition. Si je sauvegarde cela, nous constatons une erreur et nos épidémies. Enlevons donc ça. Faites cela à la manière de l'API de composition. Ajoutons un bouton à cette page qui déclenche une méthode lorsque nous cliquons dessus. Donc, après cette balise de paragraphe entre ces deux paragraphes, nous allons ajouter une div. À l'intérieur de ça. Je vais ajouter un bouton avec le texte Afficher l'ID de publication. Lorsque nous cliquons sur ce bouton, nous voulons afficher un LIT qui affiche l'ID de publication. Ajoutons un gestionnaire de clics à cela. Je vais donc cliquer sur Afficher publié. Créons beaucoup cette méthode. Cette méthode en tant que const, const, show posts est égal à une méthode. Pour l'instant, déconnectons-nous montrer l'ID de publication pour nous assurer que cela fonctionne. Enregistrez ce clic sur le bouton et nous pouvons dire montrer l'ID de publication dans la console. Maintenant, dans cette méthode, nous voulons afficher une alerte qui affiche l'ID de publication. Et encore une fois, on ne peut pas faire cette racine de dollar. Nous devons donc importer des vues nouvelles utiliser routage composable. Nous devons donc d'abord importer cela. Donc, importez utiliser l'itinéraire à partir du routeur de vue. Notez que nous signalons cela depuis Vue Router et non depuis la vue. Pour accéder à ce composant, nous devons l'affecter à une variable ou à une constante dans l'équipe View Team recommande d'utiliser le nom routage. Ainsi, beaucoup de concepts appelés « route settler » sont égaux aux parenthèses de routes américaines. Nous pouvons désormais accéder à ce composant à l'aide de cette constante de route. Et au fait, je vais entrer dans composant est plus détaillé plus tard dans le cours, y compris comment créer un composant personnalisé et comment importer des bibliothèques tierces telles que View utiliser. Mais de toute façon, nous pouvons maintenant utiliser cette ligne constante comme nous utiliserions ce dollar. Dans cette méthode, affichons une alerte. J'utiliserai des backticks pour afficher une chaîne de modèle ici, et nous allons juste sortir l' ID de ce post est Colab. Autorisez ensuite les accolades dollar et frisées afin que nous puissions produire quelque chose ici et que nous voulons afficher notre paramètre d'itinéraire ID. Donc, au lieu de cet ID de point de params de points, nous pouvons maintenant simplement faire l'ID de point params de point de route. Sauvegardons cela et voyons si cela fonctionne. Cliquez sur le bouton. Nous voyons l'alerte. L' idée de cet article est ID3, et cela fonctionne. Essayons sur un autre post, publions pour cliquer sur le bouton. L'idée de cet article est id2. 31. Utilisez-nous router: Dans l'API Options, nous pouvions gérer le routeur par programmation en utilisant ce routeur dot dollar. Par exemple, si nous voulions envoyer l'utilisateur à la page d'accueil, nous pourrions faire ce point de routeur à point dollar puis la barre oblique de chemin. Et cela les repousserait vers la page d'accueil. Mais encore une fois, dans l'API de composition, nous n'avons pas accès à cela. Nous devons donc utiliser le routeur américain composable de Vue Router. Débarrassons-nous de cette ligne. Importera le routeur d'utilisation à partir du routeur de vue. Et encore une fois, nous devons attribuer cela à une constante que nous appelons généralement routeur. Je vais donc dupliquer cette constante ici, changer en routeur et la modifier pour utiliser des parenthèses de routeur. Ajoutons maintenant un autre bouton à notre page après cette div avec le premier bouton. Ajoutons une autre div. Et puis un autre bouton avec le texte rentre à la maison. Dans trois secondes. Ajoutons un gestionnaire de clics à ce bouton. Cliquez sur égal à la maison en trois secondes. Et maintenant, créons cette méthode après cette méthode. Donc, const, rentrer à la maison en trois secondes équivaut à une fonction de flèche SetTimeout dans le code VS. Si vous tapez simplement un set, vous pouvez choisir cet extrait de fonction SetTimeout, qui autorisait ces étrangers. Je vais juste me débarrasser du point-virgule et nous allons régler le délai d'attente à 3 000 millisecondes trois secondes. Après ce délai d'attente de 3 secondes, nous souhaitons envoyer l' utilisateur à la page d'accueil. Et donc, au lieu de faire cette poussée de point de routeur de point, parenthèses obliques, nous pouvons maintenant simplement faire la barre oblique de point de routeur. Maintenant, gardons ça. Cliquez sur le bouton et attendez trois secondes. Je suis retourné sur la page d'accueil. Si nous voulons pousser l'utilisateur en fonction du nom de l'itinéraire au lieu de ce chemin explicite par nom, je veux dire le nom spécifié ici sur chacun de nos itinéraires dans index.js dans le dossier du routeur, alors nous pouvons le faire également. Nous pouvons simplement changer cela en routeur point push, puis un objet et leur nom. Et puis le nom de l' itinéraire vers lequel nous voulons nous rendre, qui est en minuscules. Enregistrez cela et voyez si cela fonctionne. Cliquez sur le bouton. Attendez trois secondes. Oui, ça fonctionne aussi. Ou si nous voulons envoyer l'utilisateur vers une page détaillée de publication particulière avec un identifiant particulier, nous pourrions également le faire. Je reviendrai donc à la page détaillée de la publication, un petit bouton. Je vais juste dupliquer cette div et ce bouton. Supposons que nous voulions envoyer l'utilisateur au premier message. La publication avec un identifiant d'identification 1. Je vais changer le texte à l'intérieur de ce bouton pour passer au premier message, changer le nom de la méthode pour passer aux premiers messages. Créons cette méthode. Je vais juste dupliquer celle-ci. Changez le nom pour passer à la première publication, supprimez le code à l'intérieur de cette méthode pour envoyer l'utilisateur à la page détaillée de la publication pour les publications avec un ID d'un, nous pouvons simplement faire un routeur point push puis un objet, définissez le nom pour afficher les détails. Ensuite, nous pouvons ajouter un objet params et définir l'ID pour l'enregistrer. Je suis actuellement sur la page détaillée de la publication des publications avec un ID de trois. Cliquons donc sur ce bouton, accédez au premier bouton de publication et nous sommes maintenant sur la page détaillée de la publication pour les publications avec un identifiant d'un. 32. Lists (v-for) [Module 9]: Les listes utilisant la directive V4 fonctionnent exactement de la même manière dans l'API de composition qu'auparavant. Mais juste pour le démontrer rapidement, sortons dynamiquement cette liste de messages en utilisant une courroupie de données et un AV pour dirigé. Passons donc à la page de nos publications. Donc, les vues source, la vue des messages, la vue par points. Et mettons en place un href où nous pouvons placer un tableau de messages. Je vais donc ajouter un nouveau commentaire ici, qui dit simplement que nous allons mettre en place une constante appelée posts, ce sera égal à un href. Nous devons importer la méthode ref depuis la vue. Je vais mettre ça en haut ici. L'importation depuis la vue placera un tableau à l'intérieur de cette href. Et chaque élément du tableau sera un objet avec quelques propriétés. Nous allons donc ajouter une propriété ID et définir cette première propriété pour ajouter une propriété title et la définir pour en publier une. Et puis beaucoup de virgules après cet objet, dupliquez cela deux fois. Il suffit de changer les ID deux sur le titre pour en poster deux pour le deuxième I M. et ensuite, pour le troisième élément, je vais définir l'ID sur ID3, définir le titre sur trois et l'enregistrer. Ce tableau de messages est maintenant disponible dans notre modèle. Utilisez-le pour recracher dynamiquement ces alliés avec nos liaisons de routeur en utilisant la directive V fall, je vais me débarrasser de tous les Alliés et les itinéraires sont liés. Donc, en dehors du premier, sauf cela, ajoutons une directive VFR à cette LI. Donc v4 publiant des messages. Cela va parcourir notre tableau de messages réf. Au fur et à mesure qu'il est en boucle, chaque objet sera disponible dans l'espace réservé spécifié ici, post. Et nous devons également ajouter une propriété clé, deux-points k égal. Et nous voulons régler cela sur quelque chose qui sera unique. Nous allons donc régler ça pour un post-doc tidy. Gardez ça. Et on peut maintenant voir trois poteaux crachés. Nous allons donc afficher le titre du post ici, qui sera un titre postdoc. Puis mettons à jour le lien et les deux accessoires. Je vais donc utiliser une chaîne de modèle en ajoutant quelques coches arrière autour de cela, me débarrassant de ID1 et en recrachant cela dynamiquement en ajoutant des accolades de dollar. Nous devons également ajouter un deux-points au début de cet accessoire. Et puis, à l'intérieur des accolades bouclées , l'ID est en ordre postdoc. Gardez ça, rechargez. Si nous cliquons sur Rome d'après-guerre, l'ID d'une page, gratuit, cliquez sur Post pour exécuter l'ID à deux pages. Vous pouvez dire qu'il n' y a absolument aucune différence en ce qui concerne les listes sous directive VFR dans l'API de composition. 33. Réfs de modèle: Parlons des réfs de modèles. Maintenant, je ne parle pas des références de données que nous utilisons pour certaines de nos données réactives. Je veux dire, comment, dans l'API Options, nous pourrions ajouter un attribut href à un élément, lui donner un nom. Et puis nous pourrions accéder à cet élément sur le composant est monté, puis y faire quelque chose pour qu'il soit mis au point ou hors classe ou déterminer la largeur des éléments ou quelque chose comme ça. Je vais juste enlever ça. Supposons maintenant que nous voulons accéder à cet élément de titre H2. Nous voulons déterminer la largeur de cet élément. Nous pourrions avoir besoin de la largeur de cet élément à des fins de conception réactive ou quelque chose du genre. Par exemple, nous devrons peut-être modifier la taille du texte, également mince si l'élément est trop large ou pas assez large. Dans l'API de composition, nous sommes toujours l' attribut href de l'élément que nous voulons cibler. Et vous pouvez utiliser n'importe quel nom que vous voulez. Mais la norme acceptée consiste à utiliser CamelCase avec le mot ref à la fin. Nous pourrions configurer cela, réf titre, économiser. Comment pouvons-nous accéder à cet élément lorsque ce composant est chargé ? Faites défiler l'écran jusqu'au titre de notre application ici. Maintenant, dans l'API Options, nous pourrions simplement faire ce point dollar refs, pointer un titre réf. Et nous pourrions alors accéder à l'élément et ensuite faire quelque chose avec lui, déterminer sa largeur ou autre. Cependant, dans l'API de composition, nous n'avons pas accès à ce dollar de points Fs, donc cela ne fonctionnera pas. Ce que nous devons faire, c'est configurer une const avec le même nom que notre référence, titre réf. Par conséquent, le titre de const est égal. Ensuite, nous devons définir cela à un peu confus, un href de données. Nous définissons cette méthode sur une méthode ref et nous définissons la valeur initiale à connaître. Et encore une fois, nous allons devoir importer cette méthode de référence depuis la vue. Nous allons donc l'ajouter à notre importation ici, virgule grossière, et nous pouvons maintenant accéder à cet élément par cette href. La valeur de cette constante est sortie composant est montée dans cette montagne, pris ce que nous pouvons faire est à l'extérieur, donc ref, valeur point, nous avons toujours besoin d' utiliser la valeur de point pour les références de modèle. Cela devrait nous donner accès à cet élément h2. Allons juste verrouiller ça pour l'instant. points de la console. Gardez ça. Et on pourrait dire que le cap est verrouillé dans la console. Si nous voulions obtenir la largeur de cet élément, nous pourrions simplement commencer la largeur de décalage des points jusqu'à la fin de cela. Je vais juste déconnecter une chaîne de modèle avec le texte. Le titre est accolade en dollars, puis je vais coller à nouveau ce code à l'extérieur. Par conséquent, valeur de point de référence, largeur de décalage des points. Et puis, après cela, je vais ajouter des pixels large et enregistrer cette recharge. Et nous pouvons voir ici que le cercle extérieur mesure 318 pixels large pour un redimensionnement gratuit de notre point d'accès. Et maintenant, il est dit que le titre mesure 453 pixels de large. 34. nextTick: La coche suivante nous permet d'attendre que le DOM soit mis à jour, puis de faire quelque chose. Par exemple, si nous cliquons sur le bouton Plus ici, notre compteur est mis à jour, le DOM est mis à jour. Notre coche suivante nous permet d'attendre que mise à jour du verrouillage dom soit terminée avant de faire autre chose. Disons que lorsque nous augmentons notre compteur, nous voulons attendre que la mise à jour du dom soit terminée. Avant de faire autre chose, je vais passer à notre méthode de compteur augmenté, qui se trouve ici dans l'API Options. Nous pourrions faire cette coche suivante , puis passer un rappel comme celui-ci, puis faire quelque chose après la mise à jour du DOM. Toutefois, cela ne fonctionnera pas dans l'API de composition. Si je l'enregistre et que je modifie, le compteur verra une erreur dans l'API de composition. Nous devons importer la méthode de tick suivante à partir de la vue. Je vais donc faire défiler jusqu'à notre déclaration d'importation et commencer la coche suivante jusqu'à la fin. Au lieu de ce dollar Alexis, on peut juste faire la prochaine coche. Ensuite, passez un rappel là-dessus. Ensuite, nous pourrons faire quelque chose lorsque le DOM aura été mis à jour. Alors faites quelque chose lorsque le compteur est mis à jour dans le point, enregistrez ça. Et si nous changeons de compteur, nous pouvons voir qu' étant verrouillé ou comme la prochaine coche est une fonction asynchrone, nous pouvons également utiliser async wait pour le faire. Pour ce faire, nous devons faire de notre compteur augmenté une fonction asynchrone comme celle-ci en ajoutant le mot-clé async ici. Au lieu de cette méthode avec le rappel, je vais juste m'en débarrasser. Nous pouvons maintenant juste attendre. Coche suivante. Mensons-nous que si nous sauvegardons cela, augmentons le compteur, nous pouvons dire que cela fonctionne encore. 35. Téléport - 1ère partie: V3 nous apporte une nouvelle fonctionnalité appelée téléport. Désormais, il ne s'agit pas spécifiquement d'une fonctionnalité API de composition. Nous pouvons en fait l'utiliser à la fois avec l'API de composition et l'API d'options exactement de la même manière dans n'importe quelle vue trois plus haut, cependant, je voulais la couvrir quand même, car c'est une fonctionnalité tellement incroyable, permet de déplacer un élément de son emplacement par défaut dans la décharge vers un autre endroit dans le chien, généralement en dehors de notre vue, comme en dehors de cette div avec un identifiant d'application, qui est la racine élément de notre vision vers le haut ou le téléporter vers une autre div, qui est un enfant du corps. C'est très pratique pour des éléments tels que les modaux, qui peuvent ne pas s'afficher correctement si nous les affichons quelque part profondément imbriqués dans notre arborescence DOM d'applications. Maintenant, cette page d'accueil est assez compliquée maintenant, tout comme la page des publications. Créons donc une nouvelle page où nous pourrons jouer avec téléportation. Je vais donc créer une nouvelle vue dans la source et vues appelées vue de dessus de la vue modale , balise de modèle dans beaucoup de div avec une classe de modaux. Ensuite, je vais commencer une balise H1 avec les modaux de texte. Sur Save, nous devons configurer un nouvel itinéraire pour cela. Nous voulons donc aller à la source et au routeur index.js. Nous allons juste dupliquer cet itinéraire de publication. Ensuite, je vais changer le chemin en barre oblique des modaux, changer le nom en modaux, changer le chemin vers le composant modale, vue de dessus. Et gardons cela pour que nous puissions accéder facilement à cette page. Ajoutons un lien vers notre navigation, qui se trouve dans source app.vue. Et ajoutons un nouveau lien de routeur après ce lien d'accueil. Je vais donc dupliquer ça. Définissez le chemin sur les modaux obliques, définissez également le texte sur des modaux. Gardez ça. Et voyons si nous pouvons y arriver. Et pourtant, nous sommes maintenant sur la page de ces modaux. Passons donc à la vue des points de vue modaux. Créons un bouton qui, lorsque nous cliquons, affichera un modal. Donc, après ce titre, beaucoup de boutons avec le texte montrent modal. Gardez ça. Et ajoutons un balisage pour un modal avec du texte sur un bouton qui le ferme. Donc beaucoup de div avec une classe de modal à l'intérieur, beaucoup de titre H1 avec le texte, c'est modal. Et puis beaucoup de paragraphe avec un peu de Lorem Ipsum dans VS Code, nous pouvons produire un peu de Lorem Ipsum en tapant simplement lorem et en appuyant sur Entrée sur cette abréviation Emmet. Et je suis beaucoup de boutons en dessous pour cacher le modal. Et je vais juste mettre le texte Masquer le modal et l'enregistrer. Et ajoutons quelques styles pour lui donner une couleur d'arrière-plan et un peu de rembourrage. Donc beaucoup de style tag. Ciblez la classe modale. Définissez l'arrière-plan sur beige, réglez le rembourrage sur dix pixels. Nous allons maintenant payer le loyer pour déterminer si ce modèle est affiché ou non. Beaucoup de nos balises de configuration de script, beaucoup de commentaires, qui disent simplement des modales, beaucoup de constantes appelées show modal et définissent cela égal à une ref avec une valeur initiale de false. Donc, si c'est faux, nous ne montrerons pas le modal. Et si c'est vrai, alors nous montrerons le modal et nous devons importer ref de vue. J'ajouterai un autre commentaire ici, qui ne fait que mentionner les entrées. Ensuite, nous importerons depuis la vue. Et cela permettra à la directive v-if d'atteindre cette div avec la classe de modal. Je vais diviser les attributs là-dessus avec l'extension d'attributs HTML fractionnés que nous avons installée plus tôt. V-Si vous affichez le modal, enregistrez cela et nous pouvons voir le modal disparaître. Et si nous changeons cette valeur en vraie, laissez-moi la voir apparaître à nouveau. Ramenons-le à faux. Modifions la valeur de cela sans boutons. Sur ce bouton show modal, nous ajouterons un gestionnaire de clics, qui définit show modal sur true. Et ça marche. Et puis sur ce bouton modal élevé, nous ajouterons un autre gestionnaire de clics, qui définit show modal sur false, enregistrez-le, voyez si cela fonctionne et cela fonctionne. Nous pouvons maintenant montrer et cacher ce modal. 36. Téléport - 2e partie: Ajoutons maintenant quelques styles à ce modèle pour le positionner absolument en plein écran. Je vais donc faire défiler vers la section style, définir la position sur absolue, définir la gauche sur 0, le haut sur 0, définir la largeur 100% et la hauteur à 100%. Gardez ça. On peut dire que cela n'a pas fonctionné. Je vais juste étirer un peu ça. Maintenant, la raison pour laquelle il n'a pas fonctionné est que cet élément modal a un élément ancêtre dont position est définie sur relative. Nous allons ouvrir le vidage et choisir notre élément racine, cette div avec un identifiant d'application. Regardez les styles que nous pouvons voir que cela a une position relative. C'est précisément la raison pour laquelle nous devons souvent utiliser le composant de téléportation. Et vous verrez si nous faisons glisser cette div pour être un enfant direct du corps, alors le modal est en plein écran, bien que cela ne semble pas tout à fait correct car je pense que nous devons ajouter un index Z pour être sûr il se trouve au-dessus de tout. Je vais donc revenir au style et à notre index souhaité d'un. Enregistrez cela, rechargez la page, affichez le modal et je vais le faire glisser vers la racine de notre page. Enfant du corps. Il dit que ça ressemble maintenant à ce que nous voulons. Nous pouvons maintenant utiliser le composant de téléportation pour téléporter cette div avec la classe de modal pour augmenter l'arborescence DOM, comme nous l'avons fait ici dans les outils de développement. Pour ce faire, tout ce que nous devons faire, je vais simplement recharger autour l'élément que nous voulons téléporter, c'est-à-dire cette div. Dans un composant de téléportation. Je vais juste sélectionner la div et la déplacer dans le téléport. Ensuite, nous ajoutons un attribut à que nous avons défini un sélecteur CSS pour déterminer où nous voulons distinguer cet élément deux. Si nous voulons simplement en faire un enfant direct du corps, nous pouvons simplement régler cela sur le corps. Je vais sauver ça. Et si nous rechargeons, j'ai mal orthographié ce qui devrait être téléporté, Dis ça encore et recharger. Et vous verrez que si nous montrons le modal maintenant, il ressemble maintenant à ce que nous voulons, car le composant de téléportation l'a téléporté pour être un enfant direct du corps. Ou si nous ne voulons pas distinguer cela au corps et que nous voulons l'envoyer à une div particulière, et nous pouvons le faire également. Passons simplement à notre page HTML à la racine de notre projet, index.html. Beaucoup de div après cette div avec un identifiant d'application, c'est là que notre vue se trouve là pour la classe des conteneurs de tableau de bord modaux. Gardez ça. Et maintenant, si nous revenons à la vue des points de vue modaux, nous pouvons passer à ce composant de téléport et simplement changer le conteneur à deux prop, deux modaux à points et enregistrer ce rechargement. Montrez le modal. Il déplace le modal vers le conteneur modals div que nous venons de commencer. Cependant, cela ne semble pas correct car tous les éléments de cette application se voient attribuer une position relative à cause de ce style astérisque ici, nous devrons peut-être remplacer ce style pour ce conteneur modals div. Nous pourrions le faire dans notre CSS de base. Si nous allons aux ressources source et au CSS de base, nous pouvons simplement sauter vers le bas. Les cibles sont modales, conteneurs. conteneur. Définissez la position sur initiale. Gardez ça. Maintenant, ça a l'air bien. 37. Composants enfants [Module 10]: Passons en revue les composants enfants de ce module. Étant donné que beaucoup de choses ont changé en ce qui concerne les composants enfants lorsque nous utilisons l'API Composition, en particulier la façon dont nous gérons les props émet la nouvelle valeur de modèle et à jour les composants dynamiques du modèle de valeur modale fournir une injection. Commençons par transformer ce modal en composant enfant. Je vais créer un nouveau fichier dans le dossier des composants source. Pour une raison quelconque, je n' ai pas ce dossier, donc je vais simplement créer des composants. Là-dedans. Je vais créer un nouveau fichier appelé vue modale. Beaucoup de balises de modèle sauvegardent cela. Et maintenant, passons à notre vue modales dans vues source et les vues modales. Découpons notre code modal y compris le composant de téléport, puis collons ce code dans notre modèle en mode point modal. Pour l'instant, je vais simplement supprimer la directive v-if. Ce gestionnaire de clics sur le bouton haut modal, car nous n'avons pas ces données ici. Je vais aussi mettre les styles des modaux bu.edu. Je vais mettre l'étiquette de style entière, coller dans le point modal Vue. Gardez ça. Importons maintenant ce bicomposant model.py dans la vue des points de vue modaux. Rappelons-nous simplement comment nous avons fait cela avec l'API options. Certaines balises de script supplémentaires sont autorisées par défaut pour l'exportation. Dans l'API Options, nous avons d'abord dû importer notre modal d'entrée de composants à partir de la vue de points modaux obliques de composants obliques. Et puis, dans notre exportation par défaut, nous avons dû ajouter un composant, des objets décalent là-dedans. Nous serions alors en mesure d'utiliser ce composant dans notre modèle. Cela devrait toujours fonctionner car n'oubliez pas que nous pouvons combiner l' API d'options avec l'API de composition. Bien que je ne le recommande pas si nous collons ce composant sur la page modal et que nous mettions ce compartiment v-if. Donc VF montre modal. Gardez ça. Cliquez sur le bouton. Nous pouvons voir notre modal dans l'API Options, ces objets composants ont toujours été un peu pénibles dans le livre car chaque fois que nous ajoutons un nouveau composant enfant ou que nous renommons un composant, nous devons toujours le conserver. objets composants mis à jour ou dans l'API de composition. Nous n'avons pas à nous inquiéter à ce sujet. Il ne nous reste plus qu'à importer notre composant et nous pouvons l'utiliser. Je vais juste commenter ce code. Faisons cela à la manière de l'API de composition. Et il ne nous reste plus qu'à importer ce composant. Je vais simplement copier cette déclaration d'importation, coller ici, et c'est tout ce que nous devons faire. Je vais donc sauvegarder ce rechargement. Nous pouvons maintenant voir que notre module modal et modal intégré ne fonctionne pas, mais ne vous inquiétez pas, nous allons résoudre ce problème plus tard. 38. Correction de vues Lazy-Loading: Avant de passer à autre chose, j'ai remarqué qu'il y a un très léger retard. La première fois que nous chargeons la page des modaux sur la page des messages, je ne la vois pas toujours, mais parfois je le vois. C'est un peu ennuyeux. Je vais juste arranger ça. Je vais passer à la source et au routeur index.js. Et la raison pour laquelle cela se produit est parce que nous chargeons ces composants paresseux. En d'autres termes, lorsque nous chargeons un composant comme celui-ci au lieu d'une porte importante au préalable, je l'ajoute simplement comme ceci. Ensuite, le composant n'est chargé en mémoire qu'au moment où nous visitons cet itinéraire, ce qui entraîne un très léger retard lorsque nous chargeons ces composants pour la première fois. Pour résoudre ce problème, nous pouvons simplement importer explicitement tous ces composants au préalable, comme nous l'avons fait avec la vue d'accueil par points. Je vais donc juste dupliquer cette ligne et la regarder trois fois. Ensuite, je ferai une sélection multiple en vue d'accueil. Je remplace cela par une vue modale. Et puis sur la prochaine, je vais faire une sélection multiple et la remplacer par des publications. Pour le dernier, je vais remplacer cela par vue détaillée des publications. Ensuite, je vais faire une sélection multiple sur ces trois noms en maintenant la touche Alt enfoncée. Et puis je vais faire plusieurs sélections ici sur chacune de ces méthodes qui chargent paresseux ces composants, il suffit de coller ces noms de composants. Je vais sauver ça. Nous ne devrions plus voir de retard et toutes nos pages devraient être chargées rapidement et rapidement. Même la première fois que nous les avons frappés. 39. Slots à l'emplacement: la plupart des cas, les slops fonctionnent exactement de la même manière dans l'API de composition. Juste pour démontrer que si nous passons à la vue modale par points, au lieu de coder en dur ce contenu dans ce composant modal w. Passons cela à partir de la vue par points des modèles de composants parents à l'aide d'un emplacement. Je vais donc passer à la vue modale par points. Coupez ce paragraphe et placez simplement un emplacement ici et enregistrez-le. Et puis dans la vue modales point Vue va coller le paragraphe ici que j'ai cuisiné auparavant. Enregistrons cette page juke-box qui sont modaux, cliquez sur le bouton. Et pourtant, ce contenu passe en utilisant notre slot et aussi les machines à sous nommées fonctionnent de la même manière. Je vais passer à la vue modale. Supposons que nous voulions passer le titre modal à l'aide d'un emplacement nommé. Je vais simplement supprimer ce texte et ajouter un autre emplacement ici. Nous allons donner à celui-ci un nom de titre. Gardez ça. Nous devrions maintenant pouvoir transmettre ce titre à l'aide d'un emplacement nommé. Pour ce faire, nous pouvons simplement ajouter une balise de modèle ici en tapant le concept que nous voulons envoyer à l'aide de cet emplacement, donc mon nouveau titre, puis à notre balise de modèle d'ouverture, nous devons ajouter v dash slot, deux-points, puis le nom de la loi américaine, et nous l'avons nommé le titre. Titre. Voyons si cela fonctionne. Oui, on peut y voir mon nouveau titre. Et nous pouvons également raccourcir ce bit deux-points de fente v tiret en utilisant un symbole de hachage à la place. Je dirai donc que je vais voir si cela fonctionne encore . Je travaille toujours. Vous pouvez voir que tout fonctionne exactement de la même manière qu' auparavant avec l'API options, la seule chose qui fonctionne différemment est la façon dont nous accédons par programmation aux données de nos machines à sous. Maintenant, si nous voulons accéder aux données de nos machines à sous dans le modèle, nous pouvons toujours le faire de la même manière qu'auparavant. Donc, après cette fente ici, je vais juste ajouter un pré-tag. Nous pouvons toujours accéder aux données de nos machines utilisant le mot-clé dollar slots, comme nous le pouvions dans l'API Options. Donc, si je veux laisser tomber les données liées à la fente de titre, je peux simplement faire le titre des points de dollar , puis les parenthèses. Gardez ça. Et nous pouvons voir toutes les données liées à notre créneau être recrachées. Toutefois, si nous voulons accéder à ces données par programmation dans notre section de script, c'est probablement quelque chose que vous aurez rarement à faire. Même si j'ai trouvé que je devais le faire une fois dans mon budget, je travaille sur eux. Nous devons le faire un peu différemment dans l'API de composition. Donc beaucoup de nos balises de configuration de script. Donc, dans l'API d'options, si nous voulions accéder à ces données de machines à sous, nous pourrions simplement faire ce titre de point dollar slots dot. Dans l'API de composition, nous devons importer notre composable de vue, qui est composé des slops américains. Ce que nous pouvons faire , c'est importer, utiliser des emplacements depuis la vue. Et ensuite, nous pouvons attribuer ce composant à une constante. Ainsi, les slots const égaux utilisent des parenthèses de slots, et nous pouvons ensuite accéder à nos données de slots à l'aide de cette constante de slots. Si nous voulions obtenir ce titre à nouveau, nous pourrions simplement faire le titre des points de fentes, des parenthèses. Et nous allons juste déconnecter ça. Console.log. Enregistrez cela, montrez le modal et nous pouvons maintenant dire que nos données de slots sont crachées dans la console. Encore une fois, ce n'est pas quelque chose dont vous aurez besoin très souvent, mais il y a de rares cas où vous le ferez. Avant de passer à autre chose, supprimons tout ce qui se trouve dans la section script ici. Et supprimons cette pré-balise que nous avons également ajoutée. 40. Accessoires: Voyons comment nous gérons les accessoires à l'aide de l'API de composition. Maintenant, la façon dont nous transmettons les accessoires d'un composant de vêtement à un composant enfant est exactement la même qu'avant. C'est uniquement la façon dont nous recevons les accessoires du composant enfant à partir du composant parent qui a été modifié. Passons donc à la vue modale, à la vue par points. Et supposons que nous voulions transmettre ce titre l'aide d'un accessoire plutôt que d'utiliser un slot nommé. Supprimons donc cette balise de modèle ici. Je vais diviser les attributs sur ce modal, et nous le transmettrons à l'aide d'un prop, afin que nous puissions ajouter une prop appelée title, puis passer notre titre. Donc, mon titre modal entre parenthèses via prop. Gardez ça. Passons maintenant à la vue des points modaux, et nous devons maintenant recevoir cette prop dans l'API Options. Je vais juste commencer une autre section de script, l'exportation par défaut. L'API des options. Nous avons ajouté une option d'accessoires. Nous pouvons définir ce paramètre sur un tableau ou un objet. Nous pourrions placer nos accessoires ici. Nous pourrions ajouter un prop titre, Settler A2, un objet. Et nous pourrions définir le type sur chaîne, car il va s' agir d'une chaîne. Si nous le voulons, nous pouvons définir une valeur par défaut si la prop n'a pas été spécifiée sur le composant parent. Nous pourrions donc définir la valeur par défaut pour connaître le titre spécifié. Sauf que cela fonctionne toujours comme mémoire, nous pouvons combiner les options largeur de l'API, l'API de composition. Je vais donc me débarrasser de cette fente ici. Et au lieu de cela, juste sortir. Regardez les accolades bouclées et le titre. Gardez ça. Et voyons si nous pouvons voir le titre dans notre modal. Pourtant, on peut voir le titre que mon titre modal est via prop. Cependant, nous le faisons un peu différemment en utilisant l'API de composition. Commentons cette section de script. Nous allons le faire à la manière de l'API de composition. Donc, d'abord, je vais ajouter un de ces commentaires de bloc, qui indique des invites. Pour recevoir nos accessoires à l'aide de l'API de composition, nous devons créer une constante appelée props et définir cette constante équivalente à une nouvelle méthode appelée invite de définition. Une chose à noter est que contrairement à la plupart des méthodes V telles que Raf et réactive, calculée, etc., nous n'avons pas besoin d' importer cette méthode props définie de vue. Il est simplement disponible automatiquement. Et maintenant, nous pouvons simplement définir nos accessoires de la même manière entre ces parenthèses. Nous pouvons les transmettre sous la forme d'un tableau comme celui-ci. Ou si vous voulez obtenir plus de précision et transmettre le type et la valeur par défaut, etc. de nos accessoires, alors nous pouvons passer un objet. À la place. Nous pouvons définir nos accessoires de la même manière. Je vais juste copier cet accessoire de titre que nous avons défini auparavant. Collez ça ici et enregistrez-le. Et j'espère que cela devrait fonctionner. Maintenant, je vais simplement recharger la page, montrer le modal. Et pourtant, nous pouvons voir que l' accessoire est en train de passer. Et vérifions simplement que notre valeur par défaut est passée si nous ne spécifions pas le composant parent. Je vais donc passer à la vue modale point Vue. Il suffit de supprimer cet accessoire de titre et de l'enregistrer. Et oui, on peut dire qu'aucun titre n'a été spécifié et je vais juste l'annuler, le remettre et le sauvegarder. Une chose à noter est que lorsque nous utilisons un accessoire dans notre gabarit, nous pouvons soit simplement utiliser le nom de chêne droit de l'accessoire. Nous avons ici le titre, et nous pouvons également utiliser le titre des points props, économiser. Vous pouvez voir que ces deux fonctions fonctionnent. Je vais juste remettre ça au titre. Cependant, si nous voulons accéder à notre prop dans notre section script, nous devons utiliser cette constante d'accessoires. Donc, si j'essaie de consoler le titre du journal , nous voyons une erreur. Cependant, si nous consolons le titre des points d'accessoires de journal , nous pouvons voir l' accessoire être verrouillé. Avant de passer à autre chose, supprimons simplement ce journal de console et sauvegardons cela. 41. Écoulements: Actuellement, nous ne pouvons pas fermer ce modal. Alors, comment obtenir ce bouton lorsque nous cliquons dessus pour fermer ce modal ? Eh bien, ce bouton est en mode point modal. Et si nous passons à son composant parent vue modales vue point vue, nous avons ce show modal ref. agit de déterminer si le modèle est affiché en haut. Ainsi, lorsque nous cliquons sur ce bouton sur le composant enfant, nous devons en quelque sorte remettre cette href modale, qui se trouve sur le composant parallèle, qui se trouve sur le composant parallèle, sur false afin de masquer le modal. Et l'une des façons de le faire consiste émettre un événement personnalisé. Permettez-moi de cliquer sur ce bouton, puis d'écouter cet événement sur le composant parent, sur ce composant modal. Et puis, lorsque nous recevons cet événement, nous pouvons simplement définir les parties modales de faux, celles qui cachent le modal. Passons donc à la vue de points modaux et émettrons un événement personnalisé lorsque nous cliquons sur ce bouton. Maintenant, dans l'API Options, je vais simplement décommenter ce code. Pendant une seconde. Nous avons dû ajouter un jeu d' options d'émission à un tableau. Et nous avons dû déclarer ici nos événements personnalisés, tels que cacher modal. Et nous ne serions pas en mesure de personnaliser l'événement à partir de notre modèle, mais nous déclarons nos limites différemment avec l'API de décomposition. Je vais donc juste commenter cela encore une fois. Ce que nous devons faire, je vais juste commencer un autre commentaire de bloc ici, qui dit émet. Ce que nous devons faire dans l'API de composition pour déclarer nos limites, c'est créer une constante appelée emit. Définissez cette valeur égale à une méthode appelée define. Émet. Un peu comme la méthode définie. Encore une fois, probablement pour trouver la méthode props, nous n'avons pas besoin d'importer cette méthode depuis la vue. Ensuite, nous passons simplement un tableau dans lequel nous pouvons déclarer tous nos événements personnalisés. Déclarons et émettons le nom de Hyde modal. Nous pouvons désormais émettre des événements cachés modaux depuis n'importe où dans notre modèle. Nous pouvons maintenant simplement passer à cet élément de bouton et ajouter un gestionnaire de clic , puis utiliser la méthode dollar emit et ensuite omettre cette méthode personnalisée cacher modal. Vous pouvez voir que la façon dont nous utilisons les émissions dans notre modèle est exactement la même que précédemment. C'est simplement la façon dont nous les déclarons dans notre section de script qui est différente. Si je l'enregistre, nous pouvons maintenant écouter cet événement la vue modales du composant parent, vue par points. Alors, passons à ça. Si nous passons à ce composant modal, on peut juste penser que je cacherais modal, qui est le nom que nous avons utilisé ici et ici. Et maintenant, nous pouvons faire quelque chose lorsque nous recevons cet événement et nous voulons simplement remettre show modal à false. Nous pouvons simplement montrer que modal est égal à faux. Alors, gardons ça et voyons si ça marche. Je vais recharger la page, cliquer sur le bouton, puis cliquer sur le bouton hauteur. Nous pouvons dire que cela fonctionne maintenant. C'est ainsi que nous émettons un événement directement à partir de notre modèle. Mais que se passe-t-il si nous devons émettre un événement par programmation à partir de notre section scripts, eh bien, avec l'API options, nous pouvons simplement faire ce point dollar émettant et ensuite émettre l' événement comme celui-ci. Toutefois, cela ne fonctionnera pas dans l'API de composition. Nous devons plutôt utiliser cette constante d'émission. Mais avant de le faire, lorsque nous cliquons sur ce bouton, au lieu d'émettre l'événement directement à partir du modèle, déclenchons plutôt une méthode locale. Déclenchons une méthode appelée handle Wilson click. Ensuite, j'ajouterai un autre commentaire de bloc ici, cliquez sur le bouton de gestion configure cette méthode. Nous allons juste nous assurer que c'est déclencheur. Lorsque nous cliquons sur le bouton. C'est déclencheur et salant d' admettre notre événement à partir d'ici, il ne nous reste plus qu'à émettre et ensuite le nom de notre événement personnalisé. Alors cachez le modal. Gardons cela et cela devrait fonctionner maintenant. Je vais donc recharger, montrer le modal onclick. Sur le modal élevé, on voit le modal disparaître. 42. modelValue: moment, lorsque nous cliquons sur ce masque modal boulonné, nous déclenchons cette méthode de clic de bouton géré. Et puis, là-dedans, nous émettons cet événement personnalisé hi modal. Ensuite, sur le composant parent, nous écoutons cet événement client, puis redéfinissons show modal sur false. Mais nous pouvons en fait simplifier cela accédant à ce show modal ref directement à partir de la vue modale du composant enfant et en la remettant directement à false. Ceux qui suppriment le besoin de configurer des événements personnalisés , puis d'émettre ces événements dans l'API Options, nous pourrions faire quelque chose comme ça avec le modificateur de cuvette. Mais dans l'API de composition, nous pouvons le faire avec le modèle V, le nouveau modèle de valeur de modèle prop et les événements de valeur de modèle de mise à jour. Tout d'abord, sautons les modaux bu.edu. Au lieu de cette directive v-if ajoutera la directive de modèle av, et nous allons le définir à cette href show modal afin que nous puissions obtenir accès à ce composant enfant à ce show modal ref, oops, j'ai tapé en V modal que je devrais être modèle V. Je vais sauver ça. Maintenant, si nous passons à model.fit, nous pouvons accéder à la propriété data transmise avec le modèle V à l'aide d'une nouvelle prop spéciale appelée valeur de modèle. Et j'ai généralement déclaré cet accessoire sur le dessus de mes objets gouttes. Il y a beaucoup de choses ici. Nous venons donc de modéliser le volume. Nous pouvons définir le type si nous le voulons. Ce sera booléen car je vais montrer que la référence modale est booléenne. Nous allons donc définir le type 2 milliards, définir la valeur par défaut sur false. Sauvons ça. Utilisons maintenant cette prop de valeur modale pour déterminer si le modal est affiché. Au lieu du v-if que nous avions auparavant, le composant parent. Nous pouvons simplement passer à cette div avec une classe de modal hors de la directive v-if et définir cette valeur sur la valeur du modèle vf. En d'autres termes, si cette référence de show modal est false, elle sera transmise avec le modèle comme false, puis reçue sous forme de valeur modale. Ainsi, la valeur modale sera fausse sur cette div avec une classe de modal ne sera pas affichée. Cependant, si show modal est trig, ça va être transmis avec la bouteille V puis ramassé par cet accessoire de valeur de modèle, où ce sera toujours vrai. Ensuite, nous allons montrer le modal. Alors, gardons ça et voyons si ça marche. Je vais cliquer sur le bouton mais on peut voir le modal. Nous savons que cela se passe correctement. 43. Mise à jour : update:modelValue: Afin de masquer ce modal, il était toujours en train de déclencher cette méthode de clic de bouton de poignée. Lorsque nous cliquons sur le bouton, nous émettons ces événements costaux élevés en modal et je suis à l'écoute de cet événement, puis je remets show modal à false. Mais nous pouvons réellement manipuler le href que nous transmettons ici show modal directement en utilisant le nouvel événement de valeur de modèle de mise à jour. De cette façon, nous pouvons nous débarrasser de cet événement modal élevé et le supprimer de ce composant. Revenons donc à la vue modale par points. Au lieu d'émettre cet événement personnalisé, émettez un nouvel événement appelé mettre à jour le volume du modèle deux-points dont nous avons besoin pour transmettre la valeur que nous voulons modifier la valeur modale deux. Nous voulons donc le changer en faux. Ce que cela va faire, c'est que quelle que soit la valeur que nous transmettons avec modèle V, la modifiera directement le modèle V, la modifiera directement en fonction de la valeur spécifiée ici. Si je l'enregistre, maintenant, affiche le modal, je clique sur le bouton haut modal. Nous pouvons voir que le modal est caché. Nous voyons maintenant un avertissement dans la console ici, valeur du modèle de mise à jour des événements, mais elle n'est ni déclarée dans l' option d'émission ni comme un problème de mise à jour de valeur modale. Nous devons simplement ajouter cet événement à notre tableau d'émissions ici, comme ceci, met à jour la valeur modale des deux-points. Cela devrait se débarrasser de cet avertissement. Affichez le modal et masquez le modal. Et nous ne voyons plus l'avertissement. Puisque nous n'utilisons plus cet événement modal élevé, nous pouvons simplement le supprimer de ce tableau. Gardez ça. Et si je reviens à la vue modale, à la vue par points, nous n'avons plus besoin d' écouter cet événement modal caché car nous manipulons maintenant le vecteur show modal l'aide de la valeur modale de mise à jour de n. Nous pouvons donc simplement nous en débarrasser maintenant. Gardez ça. Voyons maintenant si c'est le travail. Et pourtant, cela fonctionne toujours. Revenons à la vue modale par points. Nous pouvons également émettre si j'avais mis à jour la valeur du modèle directement à partir de notre modèle. Donc, au lieu de lancer cette méthode ici, je vais simplement commenter cette méthode, mais la laisser là pour référence. Nous pouvons simplement modifier ce gestionnaire de clics en utilisant la méthode dollar émet. Il suffit d'émettre des mises à jour la valeur du modèle deux-points, puis de définir la valeur sur laquelle nous voulons la définir, qui est false. Gardez ça. Et voyons si cela fonctionne encore, cela fonctionne toujours aussi. Vous pouvez donc constater que l'utilisation de la valeur modale et la mise à jour de la valeur du modèle simplifie massivement notre communication enfant à parent et supprime souvent le besoin configurer des événements personnalisés , puis d'écouter ces éléments personnalisés. événements. 44. Composants dynamiques - 1ère Partie: Les composants dynamiques nous permettent de changer le composant utilisé dans certaines parties de notre application. Démontrons cela en créant une version sombre de notre modèle, que nous pouvons changer sur cette page modals bu.edu en fonction d'une case à cocher. Maintenant, dans une application réelle, si vous vouliez avoir des modaux à fois clairs et sombres , la meilleure chose à faire serait de n'avoir qu' un seul composant modal et changer les styles en utilisant accessoires. Ce que nous sommes sur le point de faire n'est pas exactement une bonne pratique, mais c'est un moyen facile et agréable de démontrer les concepts de composants dynamiques. abord, faisons de notre composant modal sur la vue modale une vue par points, un composant dynamique. Il suffit donc de changer cela en composant. composant. Je vais m'assurer que les balises d'ouverture et de fermeture ont été renommées. Ensuite, nous ajoutons simplement un accessoire S. Donc, deux-points l'est, et nous avons juste défini cela sur le composant que nous voulons afficher ici. Nous voulons simplement afficher notre composant modal. Nous pouvons donc simplement utiliser le nom modal. Définissez ceci sur modal, sauvegardez cela. Il devrait fonctionner comme avant. Je vais cliquer sur show modal. Et pourtant, nous pouvons toujours voir le modal. Nous pouvons toujours le masquer, sauf maintenant que nous pouvons modifier le composant qui s'affiche ici en changeant simplement ceci est prop, par programmation. Avant de créer notre vision sombre de notre modal, ajoutons simplement une case à cocher à la page que nous pouvons l'utiliser pour savoir si nous affichons ou non des modaux clairs ou sombres. Après notre départ, je vais ajouter une div. Et puis à l'intérieur, je vais ajouter une étiquette. Et puis à l'intérieur, je vais mettre les textes montrant des modaux sombres, point d'interrogation. Ensuite, après que les textes aient autorisé une entrée, définissez le type sur la case à cocher. Gardons ça pour s'assurer que ça va bien. Et oui, ça a l'air plutôt décent. Maintenant, définissons donc la référence de paiement, que nous avons combinée à cette case à cocher. Défilons donc vers le bas jusqu'à notre section script au-dessus de ce show modal href. Ajoutons une nouvelle référence appelée modals Chau Doc qui correspond à un rap avec une valeur initiale de false. Et nous utiliserons ce graphique pour déterminer si nous affichons des modaux à points ou des modaux légers. Maintenant, trouvons cette href dans notre case à cocher, qui se trouve ici. Nous pouvons simplement définir le modèle V pour afficher les modaux doc. Gardez ça. Juste pour m'assurer que cela fonctionne, je vais ajouter une pré-balise après cette div et juste sortir show doc modals. Sauf que nous pouvons dire que c'est faux au départ. Et si nous cochons, la case à cocher est définie sur true. Et si nous la décochons, il est remis à false avant de créer notre point modal, supprimons simplement cette pré-balise sur Enregistrer. 45. Composants dynamiques - 2e partie: Créons notre modal sombre. Passons donc à la vue modale par points. Je vais simplement supprimer ces commentaires sur celui-ci également. Gardez ça. Et maintenant, dupliquons ce module de composant sur les composants source sur modal w. Dupliquer avec l'extension d'action en double nommera cette vue de point doc modal. Changeons la classe de cette div en modal dash dark. Faites défiler vers le bas jusqu'aux styles, remplacez la classe ici en tiret modal sombre au lieu d' un fond beige. Nous allons définir ceci sur hash 333, qui sera de couleur gris foncé. Ensuite, nous allons définir la couleur, la couleur du texte sur blanc et l'enregistrer. Pour réitérer, si vous vouliez avoir des modaux clairs et sombres dans un monde réel , ce ne serait pas la meilleure façon de le faire car nous dupliquons beaucoup de notre code ici. Il serait préférable de n'avoir qu'un seul composant Modal Dot Vue, que nous pourrons ensuite passer un accessoire pour dire un accessoire appelé sombre. Et ensuite, si nous recevons cet accessoire, ajoutez une classe différente au modal pour lui donner différents styles. Je m'en sers simplement comme exemple pour démontrer les composants dynamiques, mais pas comme un exemple de bonnes pratiques. Maintenant, allons sauter la vue modales, la vue par points, et nous pouvons maintenant changer le composant qui est utilisé dans cette prop S en fonction de notre show dot modals ref. Donc, tout d'abord, nous devons importer le composant modal sombre. Je vais dupliquer cette ligne, changer en document modal, changer le nom de fichier ici en modal dark. Ce que nous pouvons faire là-dedans, c'est un accessoire. Nous pouvons utiliser une instruction ternaire if ici pour recracher un composant différent basé sur notre show dot modals ref. Nous pouvons donc le faire si les modaux Chau Doc sont vrais, alors nous utiliserons le composant modal dark. Sinon, nous utiliserons le composant modal. Alors, gardons ça. Cliquez sur le bouton Afficher la modale. Nous voyons le haut modal léger Doc. Je vais cocher la case qui a montré que les modaux étaient vrais. Et nous devrions voir notre modal. Maintenant, si on clique sur le bouton, on y va. Maintenant, nous pouvons facilement basculer entre nos modales clairs et sombres. 46. Fournir/injecter - 1ère Partie: Nous avons vu comment transmettre des données d'un composant parent à son composant enfant direct à l'aide de props. Mais que se passe-t-il si nous voulons transmettre des données à un composant enfant vraiment imbriqué, utilisant des accessoires, nous aurions besoin de transmettre les données d'un parent à l'enfant à l'enfant, etc. jusqu'à ce que nous atteindre le composant enfant souhaité sur cela peut être un moyen très désordonné de transmettre des données. Et nous pouvons contourner ce problème en utilisant fournit inject. Passons à notre composant racine App.Vue. Je vais tout fermer d'abord et nous irons à source et app.vue. Supposons que nous ayons un objet réactif sur ce composant avec des données que nous voulons transmettre jusqu'à ce composant modal. Tout d'abord, installons simplement un objet réactif sur app.vue. Ajoutons notre section script, nos balises de configuration de script. Supposons que nous ayons un objet réactif avec des données utilisateur. Un grand nombre de commentaires de blocs ici, qui dit données utilisateur, définit une constante appelée jeu de données utilisateur équivalant à un objet réactif. Nous devons maintenant importer réactif depuis la vue. Beaucoup d'autres commentaires indiquant que les importations importeront réactives de vue. Et ajoutons des données à ces objets réactifs de données utilisateur. Disons qu'il possède une propriété name. Nous allons définir cette valeur sur Danny et une propriété de nom d'utilisateur, et nous le définirons sur Dani caudal. Gardez ça. Et affichons simplement ces données dans le coin supérieur droit de notre page. Je vais sauter en haut du gabarit. Ajoutez une div avec une classe de données utilisateur qui autorise des accolades doubles. Nom du point de données utilisateur. Ensuite, nous afficherons également le nom d'utilisateur. Donc beaucoup de symboles at et ensuite de doubles accolades, puis utilisez un nom d' utilisateur de point de données. Gardez ça. Pensons juste à quelques styles pour rendre cela un peu meilleur. Je vais faire défiler vers le bas de la section Style. Div. de données utilisateur cible. Nous allons définir la position absolue, l'arrière-plan, beige en haut sur 0 pour la coller en haut, la droite sur 0 également. Nous l'avons donc dans le coin supérieur droit. Je vais définir la taille de la police à 12 pixels, un peu plus cinq pixels. Gardez ça. Supposons maintenant que nous voulons transmettre ces données composant modal à l'aide de props. Eh bien, tout d'abord, nous devons le transmettre en tant qu' accessoire à notre composant de vue de routeur, comme ceci, les données utilisateur deux-points sont égales aux données utilisateur. Sauvez cela, que nous devons recevoir cela dans notre page modaux. Vues source, vue modale visualisée vers le haut. Je vais juste ajouter un commentaire ici qui dit des accessoires. Que nous devons ajouter une constante nommée props, définir cette valeur égale à définir. Les accessoires transmettent les données utilisateur. Prop. Je vais définir le type sur objet. Et maintenant, nous devons transmettre à nouveau ces objets de données utilisateur au composant modal, c'est-à-dire, Hé, nous pouvons le faire, faire passer les données utilisateur équivalentes aux données utilisateur, sauvegarder cela. Et maintenant, nous devons ouvrir le composant modal reçu cet accessoire. Nous devons ajouter l'accessoire ici. Utilisez donc un ensemble de données, les objets de type deux. Nous pouvons enfin utiliser ces objets de données utilisateur sur notre modal. Donc, beaucoup de div après ce bouton ici. Là, je vais juste mettre le nom d'utilisateur est double accolade. Utilisez un nom d'utilisateur de point de données. Enregistrez cela, rechargez, affichez le modal. Nous pouvons voir le nom d'utilisateur dans le modal. Vous pouvez voir que cela devient très rapidement désordonné, surtout dans un monde réel où vous pourriez avoir composants beaucoup plus profondément imbriqués. Vous avez fait ce composant modal. 47. Fournir/injecter - 2e Partie: Nous avons donc vu que je ne voulais pas transmettre les données d' app.vue à la vue modale, nous devons les transmettre comme accessoire à notre vue de routeur. Ensuite, recevez cette prop en mode modal, en vue par points, puis transmettez-le en tant que propagande à model.py EU , puis recevez-le en modal w avant que nous puissions réellement l'utiliser. Cette approche ne pose pas beaucoup de problèmes. Résolvons donc ce problème en utilisant fournit inject. Donc, supprimons d'abord toutes les modifications que nous avons apportées ici avec les accessoires dans la vue model.py. Supprimons cette div que nous avons ajoutée et supprimons également cette prop de données utilisateur de notre objet props. Enregistrez cela, puis passez à la vue des points de vue modales. Supprimez cette prop de données utilisateur du composant, composant, puis supprimez notre objet props. Gardez ça. Ensuite, nous allons passer à app.vue et supprimer cet accessoire de notre vue routeur, sauvegarder cette recharge. Et maintenant, utilisons fournit pour rendre cet objet réactif de données utilisateur disponible pour tous nos composants enfants app.vue, quelle que soit la profondeur de leur imbrication. abord, nous devons importer la méthode de fourniture de vue. Et maintenant, après avoir déclaré ces objets réactifs aux données utilisateur, nous pouvons simplement lancer cette méthode de fourniture. Pour le premier paramètre, nous devons simplement fournir un nom d'espace réservé pour ces données afin de pouvoir y accéder dans nos composants enfants. Et nous le faisons comme une corde. Et je vais simplement donner à cela le même nom que données utilisateur de nos objets réactifs , puis je suivrai le deuxième paramètre. Nous transmettons simplement les données que nous voulons rendre disponibles, qui sont dans ce cas cet objet réactif UserData. Je vais définir le deuxième paramètre pour utiliser une donnée. Gardez ça. Et maintenant, ces données devraient désormais être disponibles pour tous les composants enfants app.use. Nous n'avons plus besoin de faire quoi que ce soit pour voir le point de vue du modèle. Nous pouvons simplement passer directement à la vue model.py du composant petit-enfant et nous pouvons saisir ces données à l'aide d'inject. Allons tout droit vers la vue modale du petit enfant. Et maintenant, nous devons importer la méthode d'injection de vue. Un commentaire fort qui dit impulsion en haut, importera simplement l'injection depuis la vue. Et nous pouvons maintenant utiliser cette méthode. Je vais donc sauter au bas de la section de script un nouveau commentaire qui indique les données utilisateur. Tout ce que nous avons à faire pour récupérer les données fournies est phi de la méthode objet. Et transmettez le nom de l'espace réservé sous forme de chaîne, nous avons utilisé dans notre méthode Provide, qui est des données utilisateur. Il suffit d'injecter des données utilisateur pour les rendre disponibles dans ce modèle, il suffit de les attribuer à une constante ou à une variable. Nous allons donc simplement attribuer cela à une constante portant le même nom, des données utilisateur comme celle-ci. Et nous pouvons désormais accéder à ces données avec cette constante UserData. Donc, si nous revenons au modèle à nouveau, beaucoup de div après ce bouton. Et je vais juste mettre le nom d'utilisateur est deux-points, doubles accolades, puis utiliser un nom d'utilisateur de point de données. Enregistrez cela, rechargez, affichez le modal et nous pouvons maintenant voir notre nom d'utilisateur. Mais nous avons massivement simplifié nos composants en utilisant fournit inject. 48. Qu'est-ce qu'un composable ? [Module 11]: Dans ce module, nous allons en apprendre davantage sur le composable. Sur composable sont l'une des fonctionnalités les plus excitantes de l'exercice 2013 sur l'API de composition. Mais qu'est-ce qu'un composant ? Eh bien, vous pouvez considérer que composable est l'équivalent des API de composition des mixins de l'API options. Bien qu'avec de nombreux avantages supplémentaires, ils nous permettent d'extraire des données et des méthodes réactives. Je les garde séparés de n'importe quel composant particulier afin que nous puissions facilement réutiliser ces données et méthodes réactives sur plusieurs composants sans devoir dupliquer du code. Nous avons ici un exemple de code provenant d'un composant de vue utilisant l'API de composition. Et nous avons un code lié à un nom d'utilisateur. Ici, nous avons une référence de données de nom d'utilisateur pour stocker un nom d'utilisateur, puis nous avons une fonction de mise à jour de ce nom d'utilisateur. Supposons donc que nous voulions réutiliser ce nom d'utilisateur rref et cette méthode de mise à jour Username sur plusieurs composants. Que nous puissions simplement les extraire dans un composant, comme ça. Composable n'est essentiellement qu'une fonction et nous pouvons coller toutes nos données et méthodes réactives , montres, propriétés calculées, etc., dans cette fonction, puis renvoyer les éléments de ce composant que nous voulons mettre à disposition. Nous pouvons ensuite importer ce composant dans n'importe quel composant, puis utiliser la structuration pour extraire ce que nous voulons. Dans ce cas, la référence des données du nom d'utilisateur et la fonction de nom d'utilisateur. Et nous pouvons ensuite les utiliser dans ce composant. Si vous souhaitez en savoir plus sur les avantages du composant par rapport aux mix-ins, vous pouvez consulter cet article sur View skill.io. Qu'est-ce qu'un composant Vue.js ? Beaucoup de liens avec la conférence. Mais en bref, les principaux avantages du composant par rapport aux mixins sont tout d'abord, ils indiquent clairement d' où proviennent toutes nos données et méthodes, etc. Si nous examinons cet exemple à partir de l'API d'options ici, nous avons un composant qui importe trois mixins différents. Ensuite, nous utilisons une propriété de données appelée site à partir de l'un de ces mixins. Mais en regardant ce code, il n'est pas évident d'où vient cette propriété de site sans avoir à ouvrir ces mixins et à parcourir les fichiers. Alors qu'avec composable, nous savons toujours exactement d'où proviennent nos données. Vous pouvez dire dans cet exemple d'API de composition que nous importons trois composables différents. Ici. Je prends une propriété de nom auprès de l'un d'eux. Nous pouvons clairement dire que cela vient du produit composé américain. Donc composable, c'est faire comprendre beaucoup plus clairement d'où vient tout. Composable réduit également le risque de collisions de noms. Encore une fois, nous avons ici un exemple d'API Options qui permet d'extraire trois mélanges différents. Maintenant, si tous ces mélanges ont une propriété de données appelée name, nous l'utilisons dans notre composant. Cela va seulement récupérer la propriété name du dernier mixin que nous avons importé. Les propriétés de nom des deux autres Mixins seront complètement ignorées. Composable nous permet également de sauvegarder facilement nos données réactives. En d'autres termes, rendez les propriétés de données de nos objets de données en lecture seule depuis l'extérieur du mixage, sorte que nous puissions uniquement modifier les données dans le mixin. On ne peut pas le faire avec les mix-ins. Ce que nous avons composable. Lorsque nous retournons les éléments que nous voulons exposer à partir du composant, nous pouvons exposer les valeurs en lecture seule afin qu'elles ne puissent pas être modifiées depuis l'extérieur du composant, uniquement à partir d'une méthode qui se trouve à l'intérieur du composant. Le dernier avantage de composable est que nous pouvons réellement les utiliser comme système mondial de gestion des états. Nous pouvons donc créer efficacement un magasin composable avec un tas de données et de méthodes différentes. Lorsque nous modifions les propriétés des données dans ce magasin. Ils seront toujours à jour sur tous les différents composants de notre application. Alors que nous ne pouvons pas le faire avec les mix-ins. Si nous essayons de le faire avec des mix-ins , les données seront toujours réinitialisées pour chaque composant dans lequel nous utilisons ce mixage. Alors qu'avec composable, nous pouvons facilement créer un magasin de gestion de l'état où, lorsque les données changent, nous verrons toujours les modifications apportées à ces données reflétées dans tous les composants qui l' utilisent. composable. Si vous ne savez pas ce qu' est la gestion de l'état et ne vous inquiétez pas car nous allons le couvrir dans le prochain module. Voici quelques-uns des principaux avantages des mixins composables. 49. Créer un composable: Créons notre premier composant. Revenons à notre page d'accueil. Nous allons ouvrir la page d'accueil. Donc les vues source et la vue entière, la vue par points. Supposons que nous voulions utiliser les données de nos conseillers et les méthodes associées sur plusieurs composants. Eh bien, nous pourrions le faire en utilisant un composant. Revenons maintenant à notre explorateur. Et il est recommandé que tous nos composables entrent dans un dossier appelé use. Dans notre dossier source, nous allons créer un dossier appelé US. Et là-dedans, nous allons créer notre premier composable. Et d'ailleurs, il est recommandé que tous les noms de fichiers pour composable soient écrits dans CamelCase. Commencez par le mot « utiliser ». Nous appellerons cela composable. Utilisez le point de comptoir js. Dans notre composable, nous voulons simplement créer une fonction portant le même nom que notre conseiller d'utilisation de fichiers. Ensuite, nous voulons exporter cette fonction pour la rendre disponible dans tous les fichiers. Et maintenant, nous pouvons simplement couper tous nos comptes de données et de méthodes connexes et les coller ici. Je reviendrai à notre vue à la maison. Et je copierai tout le code lié au compteur, objets réactifs des données de compteur, l'observateur, à la propriété impair ou même calculée, l'augmentation du compteur et à la diminution calcium et au fauck non fondu. Nous pouvons donc simplement couper cette blague pour utiliser conseil dot js à l'intérieur de cette fonction. Et nous devons encore importer toutes les quelques méthodes que nous utilisons , telles que la réactive, la surveillance et le calcul. Je vais donc revenir à un point vue de la maison. Il suffit de copier la déclaration d'importation. Revenez en arrière pour utiliser le point de comptoir js. Il suffit de coller ça en haut. Je vais juste étirer un peu ça. Nous n'utilisons pas les méthodes ref, donc nous pouvons nous en débarrasser et sauvegarder cela maintenant pour mettre ces données et méthodes à la disposition de tous les composants dans lesquels nous utilisons ce composant, nous devons les exposer les renvoyant au bas de cette fonction. Tout comme nous l'avons fait dans nos composants lorsque nous utilisions l' ancien modèle de fonction de configuration pour nos composants. Commençons donc un objet de retour ici, et nous retournerons simplement les éléments que nous voulons utiliser. Retournons les données du compteur, les objets réactifs, la propriété impaire ou même calculée, les deux méthodes permettant augmenter et de diminuer le compteur. Nous pouvons donc simplement renvoyer des données de compteur, impaires ou paires, puis augmenter le compteur et diminuer le compteur et sauvegarder cela. Et nous pouvons maintenant intégrer ce composant dans n'importe quel composant que nous voulons et accéder à la propriété calculée de données et aux méthodes que nous renvoyons ici. 50. Utilisez notre composable: Nous pouvons maintenant importer ce composant dans notre page d'accueil qui est maintenant rompu car il essaie d'accéder aux données des conseillers. Audit une propriété même calculée qui n'existe plus dans ce composant. Donc, tout d'abord, nous devons importer ce composant. Nous pouvons donc simplement importer. Ensuite, le nom de la fonction que nous avons créée ici utilise Kaltura import, utilise le compteur à partir de la barre oblique, les utilisateurs slash utilisent le compteur, enregistrez cela. Au fait, il y a des éléments que nous n' utilisons plus dans cette déclaration d'importation. Nous pouvons voir qu'il est grisé. Je vais donc me débarrasser du calcul réactif et regarder la prochaine coche. Et maintenant, nous devons avoir accès à l'utilisation du composable du conseil. Défilons donc vers le bas jusqu'à ce commentaire de compteur qui est laissé auparavant. Il existe deux façons d'accéder aux données et aux méthodes qui se trouvent dans notre composable. Si nous ne voulons pas modifier notre modèle, qui est actuellement à la recherche d'un objet appelé méthodes de données Kaltura appelé compteur de diminution et compteur d'augmentation, cette propriété automatique ou même calculée. Ensuite, nous pouvons utiliser la structuration pour saisir uniquement les choses dont nous avons besoin de notre composable les données de compteur impaires ou même sous notre compteur accru et diminuer les méthodes de conseiller. Pour ce faire, nous pouvons créer une constante qui est un objet et définir ce qui est égal à notre compteur composé américain. Ensuite, nous pouvons simplement ajouter les choses que nous voulons extraire du décomposable dans cet objet. Nous ne conseillerons donc pas les données impaires ou paires, augmenterons pas le compteur, ne diminuerons pas le compteur. Parce que ce sont les mêmes noms que ceux que nous utilisons dans notre modèle ici. Les données Caltech diminuent le compteur d'augmentation du conseiller, impair ou pair que cela ne devrait pas fonctionner. Je vais donc sauvegarder ce rechargement de la page d'accueil, qui semble maintenant fonctionner à nouveau. Nous pouvons dire que tout fonctionne encore, y compris notre propriété calculée ici. Maintenant, l'autre façon d' accéder à tout ce qui est impossible est d'attribuer l'ensemble de notre composable cette fonction COUNTA à une constante ou variable comme celle-ci. Par exemple, nous pouvons ensuite accéder à nos comptes, un objet de données, à des objets de compteur de points de données. Et nous pouvons accéder à notre méthode d' augmentation du calcium ou à notre compteur d' augmentation de points. Si nous le faisons de cette façon, nous devrons mettre à jour notre modèle, nous préparer et tout ce qui est avec des points de conseiller lorsque nous utilisons le titre du point de données Counter, nous devons le compléter avec un point de compteur. Toutes ces méthodes doivent être préparées avec le point de cancer , puis nous devons préparer ces données de compteur avec dénombrements adoptés et notre propriété calculée avec point de conseiller sur le modèle V sur ce titre ici avec le conseiller Dot. Enregistrez cette recharge et j'espère que tout fonctionne toujours. Oui, ça semble fonctionner. Cependant, même si parfois saisir tout le composable comme celui-ci pourrait avoir un sens dans ce cas, et dans de nombreux cas, je pense que l'approche précédente a plus de sens parce qu'elle nous permet de voir exactement ce que nous saisissons de ce composant particulier. Je vais donc tout défaire. Je viens de le faire. Débarrassez-vous de tous ces points que nous avons ajoutés. Revenez à l'approche structurante D où nous pouvons clairement dire exactement ce que nous saisissons du composable. Assurez-vous simplement que cela fonctionne toujours. Tout fonctionne toujours. 51. Réutiliser notre composable: Nous allons maintenant réutiliser notre composable sur notre page de publications. Alors ouvrons ça. des vues et des publications, vue de dessus. Supposons que nous voulions une version beaucoup plus simple de notre comptoir sur cette page, supposons que nous puissions ajouter un bouton qui contient le compteur à l'intérieur. Et quand on clique sur le bouton, il augmente le compteur d'un. Alors commençons par ajouter la maquette. Après la zone de texte. Je vais ajouter un bouton. À l'intérieur de ça. Je vais juste mettre 0 pour l'instant. Beaucoup de classe de bouton Counter sauvegardent ça. Encerclons cela dans une div pour qu'il passe sur une nouvelle ligne. Enregistrer qui autorisait certains styles de base. Donc, l'obscurité compte ou la taille de la police à 60 pixels, définissez la largeur sur 100 %, définissez la couleur d'arrière-plan sur rose. Gardez ça. Nous voulons remplacer ce 0 par notre comptoir. Et lorsque nous cliquons en bas, nous voulons augmenter le compteur. Alors, importons d'abord le composable. Donc, importez le compteur utilisation à partir des utilisateurs slash use counselor, enregistrez beaucoup de nouveaux commentaires ici. L'avocat Bolton a grandi ce dont nous avons besoin du composable. Nous allons donc configurer une const avec un objet, ce qui est égal à notre fonction composable. Vous utilisez des contre-parenthèses. Et tout ce dont nous aurons besoin pour l'instant, c'est l'objet réactif des données du conseiller qui contient notre compteur, la méthode du compteur d'augmentation. Gardez ça. Revenons maintenant à notre modèle. Débarrassez-vous de ce 0, remplacez-le par accolades doubles et des données de conseiller, nombre de points, enregistrez ça. Ensuite, ajoutons un gestionnaire de clics à ce bouton. Cliquez donc sur augmenter le compteur. Je vais l'augmenter d'une économie. Vous pouvez dire que cela fonctionne maintenant. Disons maintenant que nous décidons que nous voulons que ce bouton soit jaune. Quand le nombre est impair. Nous pouvons le faire sans même la propriété calculée qui se trouve dans notre composable. Nous avons donc juste besoin de sauter vers notre objet structuré D ici et nous sommes aussi impairs ou impairs. Et revenons jusqu'à notre bouton. Disons donc que nous voulons ajouter une classe à cela. Si le nombre est étrange, on peut juste penser à une classe de jaune, disons. Mais seulement quand impair ou pair est égal à impair. Parce que rappelez-vous que cette propriété automatique ou même calculée renvoie une chaîne de caractères pair ou impair. Je vais sauver ça. Et si nous regardons le bouton dans les outils de développement, nous cliquons dessus, il devient un bouton et nous pouvons voir que la classe de jaune est en cours d'ajout. Pour cliquer à nouveau dessus, la classe a été supprimée. Il suffit donc d'ajouter un peu de style pour que ce jaune cible à nouveau l' élément du bouton Dash du compteur, mais quand il a une classe de jaune, définissez la couleur d'arrière-plan sur jaune, enregistrez cette recharge. On sort, disons que les livres, il est jaune quand le nombre est étrange. Maintenant, une chose à noter est que le conseil sera ramené à 0 lorsque nous changerons de page. Si je passe à la page d'accueil, on peut dire que c'est à nouveau 0. Si je l'augmente et que je retourne à la page des publications, celle-ci revient à nouveau à 0. En effet, une nouvelle instance de cette méthode de compteur d'utilisation sera créée chaque fois que nous changerons de page. Si nous voulons que notre conseiller soit un compteur mondial qui ne sera pas réinitialisé lorsque nous changeons page et que nous pouvons simplement déplacer cet objet de données de conseiller en dehors de la fonction du Conseil des États-Unis. Je vais simplement le sélectionner et le déplacer en dehors de la fonction. Et cela fera de ces objets de données du conseil un objet global disponible partout. Nous allons donc sauver ça. Et maintenant, si j'augmente le personnage à, disons six et que nous sommes tombés la page d'accueil parce que c'est encore six. Si nous l'augmentons à nouveau ici pour dire dix, revenez à la page de publication. Nous pouvons voir que le conseiller a dix ans et nous ne perdons plus jamais la trace de notre compteur mondial. 52. Ajouter un composable à partir de VueUse: Une excellente source de composable prêt à l'emploi est la bibliothèque d'utilisation de vues. Sautons pour voir use.org. Il suffit d'installer cette bibliothèque et nous aurons accès à plus de 150 composables prêts à l'emploi. Nous allons donc commencer. Voici comment installer une bibliothèque avec cette commande. Je vais donc copier ça, ouvrir notre terminal. Alkyne est un processus sourd en appuyant Contrôle et C sur ce raccourci peut être différent sur votre plateforme. Ensuite, nous lancerons cette commande que nous venons de copier. Maintenant installé. Relançons donc notre projet en exécutant npm run dev. Nous devrions maintenant pouvoir utiliser cette bibliothèque. Je vais juste étirer un peu ça. Je vais passer au recensement. Faites défiler vers le bas Je vais utiliser cette utilisation composable en ligne. Cette composable nous permet de voir facilement si nous sommes actuellement en ligne ou non. Donc, si vous regardez ce statut en ligne ici, si je me déconnecte d'Internet, vous pouvez voir ce changement en mode hors ligne. Et je vais juste me reconnecter. Je vais utiliser celui-ci parce que c' est agréable et facile à intégrer. Nous pourrions donc l'utiliser dans notre petit widget d'informations utilisateur dans la colonne. Fermons tout. Ouvre app.vue source. Revenons à la page de documentation. Nous devons simplement importer une utilisation en ligne à partir de si vous utilisez le slash core. Nous allons donc copier ces deux lignes. les collerai en haut de notre section scripts dans app.vue. Mettez-le en retrait. Et je vais appeler celui-ci, mettre dans sa propre section ici. Beaucoup de commentaires qui indiquent le statut en ligne. Collez ça là-dedans. Et maintenant, cette constante en ligne devrait changer la valeur Vrai ou Faux selon que nous sommes en ligne ou hors ligne. Nous allons donc l'utiliser dans notre petit widget utilisateur. Donc après le nom d'utilisateur, beaucoup de pipe et d'espace, et je vais juste appuyer sur Entrée pour coller ça sur une nouvelle ligne. J'ai adoré les accolades doubles bouclées Word Online. Nous devrions pouvoir produire cette constante en ligne. Gardez ça. Maintenant, nous pouvons dire vrai en ligne, et si je déconnecte le Wi-Fi, vous voyez faux en ligne. Nous pourrions améliorer cela en utilisant cette constante en ligne pour recracher différents textes de différentes couleurs selon que c'est vrai ou faux. Donc je vais supprimer tout ça, mettre juste l'espace d'état du réseau de textes et ensuite une nouvelle ligne et cela beaucoup de portée. Et puis à l'intérieur des doubles accolades, je vais utiliser une déclaration ternaire si ici. Si en ligne est vrai, alors crachera en ligne. Sinon, il crachera hors ligne. Gardez ça. Et c'est en ligne maintenant, désactivons Internet. Nous voyons un changement en mode hors ligne. Changeons également la couleur. À cet endroit, je vais me lier à l'attribut style. Nous allons définir la propriété color, et encore une fois, nous utiliserons une instruction ternaire if. Donc, si la ligne est vraie, alors je réglerai le degré de refroidissement. Sinon, nous allons le mettre en rouge. Gardez ça. Et nous pouvons dire l'état du réseau en ligne avec du texte vert, désactivé le Wi-Fi. Et nous disons hors ligne avec du texte rouge, et je vais simplement réactiver le Wi-Fi. Assurez-vous de vérifier tous les différents composants composables disponibles en vue avant de commencer à travailler sur votre prochain projet Big View car cela pourrait vous faire économiser beaucoup de travail. 53. Qu'est-ce que la gestion de l'État ? [Module 12]: Dans ce module, nous allons ajouter la gestion de l'état à notre art en utilisant Penny on. Mais qu'est-ce que la gestion de l'État ? Tout d'abord, jetons un coup d'œil au problème qu'il résout. J'ai donc trois de nos composants d'applications, Open Hair, App.Vue, qui est notre composant de vue racine. Ensuite, les modaux voient la vue point, qui est cette page, qui est un enfant direct de App.Vue. Et puis j'ai modélisé la vue, qui est ce modal, qui est un enfant direct de la vue par points de vue modales. Nous avons vu plus tôt que nous pouvions transmettre des données depuis App.vue, cet objet de données utilisateur, jusqu'à la vue modale de son composant petit-enfant à l'aide de props. Pour ce faire, nous devons passer un accessoire au composant de vue du routeur. Ensuite, dans la vue modale, nous avons dû recevoir cette prop en configurant une méthode d' invite définie. Ensuite, nous ajoutons pour transmettre cet accessoire à notre composant modal. Que dans la vue de points modaux, nous devons le recevoir à nouveau en l'ajoutant à notre objet props. Ensuite, nous pourrions enfin utiliser ces données en mode point modal. Et nous avons vu que cette approche était une vraie douleur dans le ballon. Nous avons ensuite amélioré cela en utilisant fournit inject, qui signifie que dans app.vue, nous pouvions simplement fournir cet objet de données utilisateur une fois qu'ils le mettaient à la disposition de tous nos composants descendants app.vue, tous ses enfants et petits-enfants. Ensuite, en mode point modal, nous pourrions simplement injecter cet objet de données utilisateur une fois, puis l' utiliser dans notre modèle. Il s'agissait définitivement d'une amélioration. Nous avons peut-être encore quelques problèmes ici. Numéro un, fournit ne mettra les données à la disposition des descendants du composant dans lequel nous les utilisons. Il ne mettra donc les données à la disposition des enfants et petits-enfants de cette composante. Mais que se passe-t-il si nous avons un composant qui n'est pas un descendant d'App.Vue, qui ne fait pas partie de son arborescence de composants. Et nous voulons que ce composant puisse accéder à ces données. Dans ce cas, fournit ne fonctionnera pas car ils ne mettent données à la disposition des descendants de ce composant. L'autre problème est que si nous voulons pouvoir modifier ces données contenues dans app.vue à ces données contenues dans partir de la vue modale de son composant petit-enfant. Eh bien, pour l'instant, nous devrions déclencher un événement personnalisé en vue modale par points. Écoutez l'événement sur la vue des points de vue modaux, déclenchez un autre événement personnalisé. Écoutez cet événement sur app.vue avant de pouvoir enfin déclencher une méthode sur App.Vue, qui modifie ensuite les données. Et encore une fois, cela devient très désordonné. Si nous voulons modifier ces données à partir d'un composant situé en dehors de l'arborescence des composants App.vue, nous ne pouvons pas le faire du tout à moins d' utiliser une bibliothèque d'événements ou quelque chose du genre. Même en utilisant des événements, la plupart des bibliothèques peuvent devenir assez désordonnées pour la gestion de l'état, nous permet de résoudre ce problème en stockant toutes les données principales de nos applications et toutes les méthodes associées à ces données en une seule fois. place centralisée, qui est en dehors de tous nos composants, mais de manière à ce que tous nos composants puissent accéder à toutes les données et méthodes. L'endroit où nous stockons ces données et méthodes, nous appelons un magasin. Parce que lorsque nous avons créé nos projets, nous avons choisi d' ajouter automatiquement une opinion à notre application. L'outil de génération a déjà créé un centime ou un fichier de stockage pour nous. Ouvrons ça. Je vais ouvrir l'explorateur. Et nous voulons aller dans les magasins Source et compter ab.js. Selon l'avis, nous avons trois grandes sections. Établissez des actions sur les suppositions. L'état où nous stockons toutes nos propriétés de données. Vous pouvez donc voir une propriété de données de compteur ici. Ne vous laissez pas confondre par le fait que nous avons créé un compteur. Ce code n'a pas été généré en fonction de ce que nous avons fait. s'agit simplement du magasin par défaut qui est expédié lorsque nous examinons nos projets utilisant le build x2. Nous avons l'état où nous stockons toutes nos propriétés de données. Nous allons ajouter nos propriétés de données de titre de compteur et de conseiller ici. Ensuite, nous avons des actions dans lesquelles nous pouvons stocker des méthodes permettant d'accéder aux données en état et de les modifier. Vous pouvez voir que nous avons une vente aux enchères par incréments ici, ce qui augmente ces conseillers dans l'État. Et nous ajouterons notre conseiller accru et diminuerons méthodes du conseil ici plus tard. Enfin, nous avons des suppositions à ce sujet. Nous plaçons des méthodes qui peuvent récupérer quelque chose de l'état, puis éventuellement le modifier d' une manière ou d'une autre, puis le renvoyer. Vous pourriez donc les considérer comme des propriétés calculées. Un magasin de gestion d'état comme celui-ci est disponible partout dans notre application. Tous les composants de notre application, soit l'arborescence des composants qui faisaient partie ou dans quelle profondeur ils peuvent accéder à toutes les actions d' état et nous obtenir dans ce magasin. Cela nous permet de gérer beaucoup plus facilement nos applications appelées données et toutes les méthodes associées à ces données. Cela signifie également que nous n'avons pas à nous soucier de devoir transmettre des données de parents, d'un enfant à un enfant à l'aide d' accessoires ou de fournir des accessoires. Nous n'avons pas à nous soucier de faire bouillonner les événements d'un enfant à l'autre parent, etc. Puisque tous nos composants d' applications ont accès à tout ce qui se trouve dans ce magasin. Dans une version 3 sortie, il existe plusieurs façons d' intégrer la gestion de l'état à moins d'espace de discours. 54. État composable vs Vuex vs Pinia: D'un point de vue trois plus haut, il existe trois façons principales d' intégrer la gestion de l'État. Premièrement, nous pouvons intégrer la gestion des états en utilisant composable. Deuxièmement, nous pouvons utiliser UX, qui est un package de gestion de l'état créé par l'équipe Vue. Sur le numéro trois, nous pouvons utiliser Penny, qui est un autre package de gestion d'état créé par l'équipe Vue. Jetons un coup d'œil au numéro un, gestion des états à l'aide de composable. Eh bien, si nous passons au composant que nous avons créé auparavant, utilisez le compteur dans le dossier américain. Ce que nous avons établi ici est la base d'un système mondial de gestion de l'État. Parce que nous avons nos chiffres sont des données touchées, ce que vous pourriez penser à un état. Nous avons quelques méthodes pour modifier les données dans cet état, que vous pourriez considérer comme des actions. Nous avons cette propriété calculée qui saisit les données de l'état et produit une chaîne basée sur cela, pair ou impair. Nous pourrions penser que c' est un « getter ». Étant donné que l'objet de données ne fait pas partie de cette fonction , ces données sont globales. Nous pouvons donc changer cela de n'importe où et toujours voir les changements que nous effectuons partout ailleurs. Nous avons donc vu que nous pouvions augmenter le conseiller sur la page d'accueil, puis passer à la page des publications. Nous voyons toujours que le conseiller est réglé sur la même valeur que, et de même, si nous revenons à la page d'accueil. Nous pouvons donc utiliser le composant comme celui-ci pour gérer toute la gestion de l'état de notre application sans avoir à installer de paquets supplémentaires. Si vous souhaitez en savoir plus sur gestion des états avec l'API de composition et visionner la vidéo de gestion de l'état de ma composition API sur YouTube. Lien vers cette conférence. Toutefois, si vous souhaitez une approche plus standardisée et optimisée gestion des états avec des capacités de débogage plus avancées et une intégration DevTools. Vous voudrez ensuite utiliser un package spécialement conçu pour la gestion de l'état, tel que UX ou Penny on. Depuis longtemps, l'UX est la référence en matière de gestion des états pour les applications Vue. Cependant, selon Avenue, le créateur de vous, le standard actuel en matière de gestion de l'état pour les applications API de composition V3 est Penny. Penny ou présente quelques avantages par rapport à l'UX. Si nous revenons à ce magasin, ce centime un magasin compte ab.js. À l'avis, bien que nous n'ayons que trois sections, les actions d' état et les getters, nos actions peuvent à la fois accéder à l'état et le manipuler également. Dans la vue, les actions ne peuvent pas manipuler l'état. Ils peuvent accéder à l'état du compte, le manipuler. S'il s'agissait d'une porte UX, cela ne fonctionnerait pas car dans un magasin ainsi que les actions d'état et nous obtiennent, nous avons également des mutations, qui sont des méthodes qui peuvent manipuler les données contenues dans l'État. Si c'était une vue à côté et que nous voulions augmenter ce compteur, nous ne serions pas en mesure d'augmenter le compteur de cette action. Nous devrions déclencher une mutation. D'abord. Il se peut que nous ayons une mutation appelée incréments. Cette mutation augmenterait alors le compteur et nous devrions déclencher cette mutation à partir de la vente aux enchères en utilisant des incréments de Dispatch. Cela signifie que dans une vue d'à côté, vous vous retrouvez souvent avec des tonnes de méthodes différentes portant le même nom, où nous déclenchons une action, puis déclenchez une mutation, puis changez l'état dans un magasin compliqué. Cela a entraîné des tonnes de lignes de code supplémentaires et de complexité dans notre boutique, ce qui n'a pas encore besoin de nous inquiéter avec une épingle. Parce qu'avec Penny Are, nous n'avons pas de mutations. Nous n'avons que des actions. Et les actions peuvent à la fois accéder à l'état et le manipuler également. Nous avons également des capacités de débogage plus avancées intégrées à Pena, que nous verrons plus tard. Il est également extrêmement léger autour d'un kilo-octet et il est optimisé spécifiquement pour l'API de composition. Voyons comment nous pourrions utiliser un penny sur tout au long de la gestion de l'état de cette application. Depuis que nous construisons nos projets, nous avons choisi d'ajouter automatiquement Pena. Ensuite, l'opinion a déjà été ajoutée à notre projet et ce magasin a déjà été réglé pour nous. Nous pouvons utiliser cela comme base pour notre gestion de l'État. Cependant, plus tard dans le cours, lorsque nous créerons les boules de notes, je vous montrerai comment ajouter un sou, déstabiliser complètement votre premier magasin à partir de zéro. C'est vraiment pratique à savoir au cas où vous auriez besoin d'ajouter opinion à un projet v3 qui existe déjà. Mais si vous êtes curieux de savoir comment le faire maintenant, mais sautez simplement vers les boules de notes. Penny, un module, regardez les deux premières vidéos, puis revenez ici. 55. Pinia - État - Partie 1: Nous utilisons actuellement ce compteur d'utilisation composable pour gérer toutes les fonctionnalités de ce compteur. Nous avons donc toutes nos données et méthodes calculées ici. Utilisons plutôt Penny F2 configurer la gestion de l'état pour ce compteur. Tout d'abord, supprimons cette utilisation conseil composable de cette page d'accueil et toutes les fonctionnalités dynamiques. Passons à la vue de la vue d'accueil dans le dossier des vues défilera jusqu'à nos importations, supprimez simplement notre compteur d'utilisation composable. Ensuite, faisons défiler vers le haut et supprimons toutes les fonctionnalités dynamiques. Donc, ce h3 où nous affichons notre titre, remplacons les accolades doubles par un titre codé en dur. Et supprimons tous ces gestionnaires de clics de nos boutons où notre conseiller est affiché dans cette période. Moins de remplacer cela par seulement 0 et où il est dit des remises impaires ou paires. Sélectionnons les accolades bouclées et nous allons simplement tirer une barre oblique impaire même pour l'instant. Ensuite, cette impulsion, en fait, je vais juste diviser les attributs là-dessus. Retirons simplement ce modèle en V pour l'instant. Je pense que c'est tout. Nous avons une erreur ici. L'utilisation du conseiller n'est pas définie. Défilons vers le bas jusqu'à notre section de script. Cette erreur est due au fait que nous essayons d'extraire des choses de notre comptoir composable américain qui n' étaient plus importées. Enlevons tout cela aussi. Gardez ça, rafraîchissez-vous. Et nous avons maintenant supprimé toutes les fonctionnalités dynamiques de cette page. C'est tout simplement marquer maintenant, oh, on dirait qu' il y a quelques types d' attaques au lieu du mot titre. Je vais juste arranger ça et le sauvegarder. Ajoutons quelques propriétés d'État à notre comptoir et à notre titre de conseiller. Nous allons passer au centime d'un fichier de magasin, qui a été créé lorsque nous générons le projet s'appelle déjà compteur. Nous pouvons donc simplement laisser le nom tel quel. Et encore une fois, c'est juste une coïncidence. Ce magasin n'a été généré en fonction d'aucun de nos codes. Il a été généré lorsque nous avons créé le projet pour la première fois. Pour l'instant, je vais simplement supprimer les enchères et nous obtenir et me concentrer sur l'état supprimera également cette propriété d'état. Il ne s'agit pas d'une propriété d'État pour notre comptoir. Je vais juste appeler ce nombre, définir à 0 par défaut. Beaucoup de biens pour notre titre de comptoir. Et nous allons juste appeler ce titre. Et nous allons juste régler ça sur le titre de mon comptoir. Gardez ça. Nous pouvons désormais utiliser ces propriétés d'état n'importe où dans notre application. Voyons si nous pouvons les utiliser sur cette page d'accueil. 56. Pinia - État - Partie 2: Pour utiliser notre magasin de comptoir, nous devons l'importer et nous l'avons important en utilisant ce nom de méthode ici, utilisez le magasin de comptoir. Passons donc à la vue à la maison, où se trouve tout notre balisage de calcium. Faites défiler vers le bas jusqu'à la section impulsion. Et nous allons importer, utiliser le comptoir. Et je l'ai mal orthographié. Vous utilisez porte consciente n'est pas juste. Nous allons juste vérifier. J'ai eu le bon nom. Utilisez le magasin du conseil à partir des magasins slash stores slash conseil. Supposons que vous accédez au magasin, nous devons l'affecter à une constante ou à une variable. Je vais faire défiler vers le bas ici. Je vais mettre le seau de commentaires du conseil. Nous pouvons simplement faire const et lui donner un nom. Appelons-le simplement compteur, définissons cela comme égal à utiliser le compteur, stocker les parenthèses. Et nous devrions maintenant pouvoir accéder à tout ce qui se trouve dans notre magasin du conseil en utilisant ce coût de comptoir. Je vais sauver ça. Et nous devrions maintenant pouvoir voir notre magasin de compteurs dans notre vue DevTools, nous voulons ouvrir les outils de développement Chrome en allant View Developer Developer Tools ou en utilisant le raccourci clavier. Ensuite, nous pouvons cliquer sur cette petite flèche et choisir Afficher. Rechargez la page pour une raison quelconque, voir DevTools ne fonctionne pas. Je vais juste essayer de quitter Chrome et de le redémarrer, voir si ça résout. C'est. Je viens de sauter au terminal. Commande. Cliquez sur ce lien pour ouvrir l'application, ouvrir les DevTools, cliquez sur la flèche et accédez à affichage. Cela semble fonctionner. Maintenant, allons-y un peu. Étendez ça. Si nous allons sur cette petite icône ici et Penny Are, nous pouvons voir notre comptoir. Et si nous cliquons dessus, nous pouvons voir les propriétés de l'état qui s'y trouvent. On pourrait dire compter et on peut dire titre. Voyons maintenant si nous pouvons utiliser cette propriété d'état de compte sur notre page. Je vais juste montrer ça ici. Déplacez ça un peu. Nous avons assigné notre magasin à cette constante de comptoir. Donc, pour accéder à ce nombre de propriétés de données, qui est un état R, nous devrions être en mesure de faire le comptage de points de contre-points. Défilons donc jusqu'à l' endroit où se trouve notre comptoir. Sélectionnez ce 0, un double accolade, puis comptez les points, enregistrez cela, rechargez. Nous pouvons toujours voir 0 ici et nous pouvons modifier nos propriétés d'état à l'aide développement du centime a dans les outils de développement de vue. Nous pouvons donc soit cliquer sur ce crayon et entrer un numéro. Et nous voyons cette mise à jour. Nous pouvons également utiliser ces petits boutons plus et moins pour changer de compteur. Tous ne semblent pas être correctement branchés. Et si nous passons à notre magasin de comptoir et que nous changeons la valeur, enregistrez cette recharge, nous voyons qu'elle est maintenant réglée sur dix. Revenons à 0 et sauvegardons cela. Pour une raison quelconque, le rechargement à chaud, il ne semble pas fonctionner pour le moment. Il y a maintenant une page sur le sou, un site qui vous explique comment l'activer. Et j'ai déjà essayé de suivre cela et je n'ai pas pu le faire fonctionner, mais nous avons juste beaucoup de Go car il a peut-être été mis à jour. Je vais juste Google Penny sur Jump to Penny app.vue js.org. Aller au guide, sautera vers le remplacement du module. Ça dit bla, bla, bla. Vous devez ajouter cet extrait de code à côté de n'importe quelle déclaration de magasin. Supposons que vous ayez trois magasins de SIG, de JS de panier et de fichiers JS, vous devrez ajouter une adaptation après la création de la définition du magasin. Assurez-vous de passer la bonne définition de magasin. Utilisez-le dans ce cas, copions simplement cet extrait ici et nous le collerons après avoir utilisé Counter Store. Je suppose que nous devons remplacer cet utilisateur un magasin de comptoir. Collez cela et enregistrez cette recharge. Nous avons une erreur ici, ReferenceError accepte la mise à jour HTML non détectée n' est pas définie. Revenons à l'exemple. Nous devons importer cela, accepter la mise à jour HTML de l'opinion également. Je vais donc le copier et essayer. Enregistrez cette recharge. Voyons si le rechargement à chaud fonctionne maintenant, je vais changer le conseiller à dix, sauf ça, et ça ne semble toujours pas fonctionner. Peut-être devons-nous éliminer ce processus et le recommencer. Je vais tuer le processus avec contrôle et dire lancer npm, lancer dev, recharger l'application. Passons à 100, et cela ne semble toujours pas fonctionner. J'espère que cela sera corrigé à un moment donné. Et si je trouve un correctif, beaucoup de vidéos sur le cours, mais pour l'instant, je vais simplement supprimer ce code que nous venons de commencer. Et comme cela ne semble pas fonctionner. De plus, si vous savez comment le faire fonctionner et laissez un message avec cette conférence. Supprimons donc ceci sauf HMM, mettre à jour également. Comptoir de retour à 0. Pour l'instant, nous allons devoir continuer à recharger chaque fois que nous apporterons des modifications à notre boutique. Maintenant, connectons le titre du compteur. Nous allons revenir à la vue d' accueil par points, sélectionner ce titre codé en dur, supprimer qui sont des accolades doubles. Et encore une fois, pour accéder à notre magasin, nous pouvons simplement utiliser le comptoir. Et puis pour accéder à la propriété title, nous pouvons simplement faire le titre des points, sauvegarder cela. Et nous pouvons voir le titre de mon conseiller sur la page. Et si nous le modifions dans les outils de développement ici, nous devrions le voir également être mis à jour. Et ça marche. Regardons également cette contribution , qui est ici. Nous allons simplement ajouter le modèle V et le définir sur la même chose, compte, nombre de points. Gardez ça. En fait, non, cela devrait être défini sur le titre. Donc, nous voulons un titre de point de conseiller, sauf ça. Si nous mettons à jour ce titre dans l'entrée, nous disons également mettre à jour dans cette rubrique. Et nous voyons également sa mise à jour dans les DevTools. 57. Pinia - Actions: Ajoutons quelques actions dans notre magasin d'opinions. Dans Opinion Store, les actions ne sont essentiellement que des méthodes qui peuvent accéder aux propriétés de notre état et les modifier. Les actions sont donc l'équivalent des objets méthodes de l'API Options ou de toute méthode qui modifie vos données réactives dans l'API de composition, il suffit d'ajouter un objet après l'état. actions appelées. Oups, ça devrait être des ventes aux enchères. Et nous pouvons placer toutes nos actions ici. Créons donc une action pour augmenter notre compteur. Je vais donc créer ici une méthode appelée augmentation conseiller pour accéder aux propriétés dans notre état, nous pouvons simplement utiliser le, ce mot-clé un peu comme nous l'avons fait dans l'API Options pour accéder à nos propriétés de données. Donc, nous pouvons simplement faire ce compteur de points plus, plus. Cet oxygène devrait être bon à emporter. Ajoutons donc une virgule, dupliquons cette action, débarrassons de cette virgule. Et nous allons mettre en place une action pour diminuer le compteur appelé compteur de diminution, dira simplement ce compteur de points moins moins. Et je viens de réaliser que ça devrait être compté, pas contre. Je vais donc simplement changer cela pour compter et le changer pour compter aussi. Gardez ça. Et nous devrions maintenant pouvoir utiliser ces actions. Revenons donc à la vue de points de vue entière, et passons à ce premier bouton. Après le compteur, je suis autorisé à cliquer sur le gestionnaire. clic sur l'application est donc égal. Pour accéder au magasin, nous pouvons utiliser le compteur, qui est le nom de la constante que nous avons utilisée ici. Et ensuite, pour accéder à l'action, nous pouvons simplement faire des points et ensuite le nom de l'action. Alors augmentez le compteur, enregistrez ça. Voyons si cela fonctionne. Je pense que nous devrons peut-être ajouter des parenthèses à la fin ici. Essayons donc, gardons ça, et nous avons quelques erreurs ici. Il se peut que nous ayons juste besoin de recharger. Essayons encore une fois. Voyons si nous devons ajouter ces parenthèses. En fait, je vais sauver ça. Rechargez. En fait, nous n'avons pas besoin d'ajouter les parenthèses. Passons au bouton moins qui se trouve juste avant le comptoir. Et copions simplement ce gestionnaire de clics. Collez-le sur ce bouton, changera cela en compteur de diminution des points de conseiller , sauvegardez-le. Ces deux boutons fonctionnent maintenant. Nous pouvons également envoyer des paramètres à nos actions. Donc, si je revenais simplement à counter dot js, si nous voulons que ceux-ci reçoivent des paramètres, nous pouvons simplement ajouter un nom pour ce paramètre ici. Appelons-le donc le montant. Supposons que nous voulions augmenter ou diminuer le compteur de ce montant que nous transmettons. Pour l'augmenter par ce paramètre, nous pouvons simplement faire ce nombre de points plus un montant égal. Et puis, pour diminuer, il suffit de faire ce nombre de points moins égal à la quantité. Gardez ça. Si nous voulons passer un paramètre, vous venez d'arrêter les parenthèses à la fin du nom de la méthode pour ce bouton, cela le diminuera d'un. Et puis, pour ce Boltzmann le diminuera d'un moins aussi brancher les autres boutons, celui-ci et celui-ci fera diminuer de deux. Augmentez de deux. Je vais copier ce gestionnaire de clics à partir du bouton Plus, coller sur celui-ci. Nous allons simplement modifier la valeur que nous transmettons en deux. Ensuite, nous ferons la même chose pour les autres points de diminution, copions le gestionnaire de clics, le coller ici, changer le nombre à deux. Et disons que maintenant, j'espère que tout ce qui concerne les tensions devrait fonctionner. Oui, on peut le diminuer d' un et l'augmenter d'un. Ceux-ci ne fonctionnent pas. Il se peut que vous ayez juste besoin de recharger. Oui, ça ne fonctionne pas. Nous pouvons augmenter de deux et diminuer de deux. Et nous pouvons également voir les données changer dans DevTools. 58. Pinia - Getters: Les getters nous permettent d'obtenir une valeur de notre état , puis de la modifier d'une manière ou de générer quelque chose en fonction de cette valeur, puis de la renvoyer et de la rendre disponible pour n'importe quel composant utilisant ce magasin, vous pouvez penser à obtenir nous comme l'équivalent de gestion de l'état des propriétés calculées. Ainsi, les valeurs de retour des getters sont en cache et mises à jour uniquement lorsque leurs dépendances changent, lorsque les propriétés d'état utilisées par les getters ont changé. Créons donc un getter pour séparer impair ou même ici, qui est actuellement codé en dur en fonction la valeur du compteur, cette propriété count. Pour commencer à ajouter des débiteurs, nous avons juste besoin d'un autre objet appelé getters. Au fait, peu importe l'ordre dans lequel nous les mettons. Si vous préférez, vous pouvez placer les getters après état, puis les enchères en bas. Cela n'a pas vraiment d' importance. Mais de toute façon, ajoutons un get-up qui déterminera si ce nombre est pair ou impair, puis retourne les textes impairs ou impairs. Nous allons donc créer un getter appelé impair ou pair. Il devrait s'agir d'une propriété que nous avons définie une méthode comme celle-ci pour accéder à notre état, nous pouvons simplement passer l'état en tant que paramètre dans cette méthode. Donc, pour saisir cette propriété de count qui est dans l'état, nous pouvons simplement faire le nombre de points d'état. Nous voulons savoir si c'est bizarre ou égal. Encore une fois, nous utiliserons le reste de l'opérateur pour le faire. Il peut simplement le faire si le nombre de points d'état restants deux est égal à 0. En d'autres termes, si nous divisons le nombre par deux et que nous obtenons le reste, et que le reste est égal à 0, alors nous savons que le nombre est même pour que nous puissions retourner le texte, même. Sinon, nous pouvons renvoyer l'autonomie du texte. Il est important de noter que pour que nous puissions travailler, ils doivent retourner une valeur. Sauvons donc ce rechargement. Et nous devrions pouvoir l'utiliser sur notre page. Passons donc à notre point de vue à la maison. Débarrassez-vous de cette étrange barre oblique. Même les textes sont des accolades doubles. On peut juste faire le contre-point impair ou pair. Gardez ça. Et nous pouvons dire que le compteur est égal, nous le changeons en un seul. Nous voyons que le comptoir est bizarre. Si nous examinons également les outils de développement, nous pouvons également voir nos getters ici, et nous pouvons également voir la valeur de ce changement. Un autre avantage des sous sur quelques x, que je n'ai pas mentionné précédemment, est que nous n'avons pas besoin de spécifier les actions d'état des getters lorsque nous les utilisons dans notre modèle ou dans notre section scripts. Donc, dans une vue X vers le haut, nous devrions faire le point State du conseiller, le titre des points. Et ensuite, lorsque nous déclenchons une action, nous devrions agir contre le point, diminuer les conseils, etc. Selon l'Europe, nous n'avons pas besoin de les spécifier, ce qui rend notre code un peu moins verbeux. 59. Pinia - Utilisez notre boutique partout: Maintenant que notre magasin d'opinions est configuré, nous pouvons utiliser les actions de l'État et nous emmener n'importe où dans notre application. Utilisons ce magasin sur notre page de publications pour ce comptoir. Ce compteur utilise actuellement un compteur composable que nous avons créé précédemment. Supprimons donc cela de cette page. Et toutes les fonctionnalités dynamiques et accrocher les spots ne sont pas trop nouvelles. Penny compte ou stocke. Allons sur cette page. Vues et publications View dot Vue supprimera cette importation du compteur américain, composable. Et retirez également cette const partout où saisissez les choses que nous utilisons du composable. Et puis je sauterai vers le gabarit. Remplacons ce nombre de points de données de compteur par les innombrables dans notre magasin. Donc comptez les points de contre-points. Et remplacons cette méthode ici, augmentons le compteur par rapport à l'action de contre-action accrue qui se trouve dans notre magasin. Nous pouvons simplement changer cela en compteur, compteur de points augmentés. Puisque la méthode porte le même nom. Cette classe qui crachait en fonction du nombre impair ou pair, nous pouvons simplement remplacer ce qui est impair ou même par le getter qui se trouve dans notre magasin. Donc, contre-point impair ou pair. Changeons donc cela compte point impair ou pair, enregistrez ce rechargement et nous avons une erreur ici. Que se passe-t-il ? Le compteur de propriétés est un accès pendant le rendu , mais n'a pas été défini sur l'instance. Faisons simplement défiler vers le bas. Nous avons oublié d'importer notre boutique. Passons à la vue de la maison point Vue. Copiez cette ligne de saisie à l'endroit où nous importons le tabouret, collez-le sur la vue des publications, la vue par points. Ensuite, nous devons également attribuer cela à une variable. Je vais donc copier ceci à partir de vue d' accueil, coller ça ici. Je vais simplement supprimer ce commentaire, enregistrer et nous devrions être prêts à partir. Rechargeons donc. Le bouton fonctionne maintenant. Nous pouvons dire que dans les outils de développement, cela modifie les innombrables dans notre magasin d'opinion parce que notre magasin d'opinion est mondial. Eux. Lorsque nous avons sauté sur la page d'accueil, nous devrions voir que le nombre est fixé à huit. C'est le cas. Si nous augmentons le compteur ici et revenons à la page des publications, nous pouvons voir que la valeur du compteur est toujours à jour, quel que soit l'endroit où nous nous trouvons dans notre application. 60. Projet de cours : Notebook [Module 13]: Nous allons passer le reste de ce cours tout ce que nous avons appris pour créer cette application de prise de notes dans le monde réel appelée Nope balls, mais nous permettre de prendre toutes nos nouvelles connaître les bases de l'API de composition et consolider ces connaissances avec la création d'un monde réel à partir de zéro. Dans cette application, nous pouvons afficher une liste de notes. Chaque nœud possède une note sur le nombre de caractères et un bouton de modification et de suppression. Nous pouvons ajouter une nouvelle note. Nous pouvons modifier une note, enregistrer, et nous pouvons également supprimer une note avec ce modal de conformation. Et nous avons également un en-tête avec des liens sur deux pages, des notes et des statistiques. Et nous avons cette page de statistiques où nous affichons des statistiques liées à nos notes, y compris le nombre de notes que nous avons sur le nombre total de caractères de toutes nos notes. Il sera également présentable comme vous pouvez voir en utilisant la bibliothèque CSS du melon. Et il va aussi être réactif. Sur le bureau, nous avons ces liens vers nos deux pages, mais si nous redimensionnons cela, nous pouvons voir tous les éléments mis à l'échelle pour mobile et nos liens dans l'en-tête sont remplacés par cette icône plus grande. Et lorsque nous cliquons dessus, nous pouvons voir les liens vers nos deux pages. Cette application va utiliser presque tous les concepts que nous avons appris plus tôt dans le cours, y compris voir le routeur sur les routes américaines et utiliser le routeur composable. Cette fois, nous allons installer Vue Router et tout configurer à partir de zéro, allons utiliser des données réactives, y compris les réfs et objets réactifs, va utiliser des méthodes calculées, et les montres vont utiliser composants enfants, y compris les props, les émises et la valeur de modèle de mise à jour, va utiliser les réfs de modèle sur composable, y compris composable personnalisé sur un composable parmi les quelques use library va utiliser des directives et des crochets de cycle de vie. Et nous allons configurer l'ensemble de la gestion de l'état de notre application à l'aide d'un centime. Bien que cette fois-ci, nous allons réellement installer Penny a, installez notre penny a store complètement à partir de zéro. Et bien sûr, nous ajouterons également des actions d' État et un tas de getters à notre magasin d'un centime. 61. Créer un projet: Créons une nouvelle vue, trois projets pour nos notes. Allons sur le site Web de la V3. Je vais chercher V3 plaisanté à v3 dot Vue js.org. Et plus tôt dans le cours, je vous ai dit que les documents étaient sur le point d'être massivement remaniés et que j'ai dû changer l'URL pour accéder aux nouveaux canards. Mais on dirait les nouveaux documents et nos vies, nous pouvons simplement sauter pour l' installer. Faites défiler vers le bas Encore une fois, nous n' avons pas besoin d'installer JS. Ce que vous avez probablement déjà installé à ce stade. Créons un nouveau projet de vue à l'aide de cette commande. Copiez cela, passez à mon terminal et à mon code VS et un gamète peut basculer avec le contrôle et la coche arrière. Et je vais m'assurer que vous êtes dans le dossier où vous stockez vos projets. Vous ne voulez certainement pas l'exécuter dans le dossier des projets précédents si c'est là que vous vous trouvez, je le collerai et je le lancerai. Je vais taper y pour accepter l'installation, Créer une vue pour le nom du projet et le dossier du projet. Je vais utiliser l'API de composition View Dash. Pas de boules. Nous pouvons utiliser n'importe quel nom de dossier que vous voulez. Je vais choisir noeud pour toutes les options. Nous n'allons pas installer les routes Vue à ce moment-là parce qu'il va l' installer à partir de zéro au lieu de rien. Donc non, et encore une fois avec des centimes, nous allons tout régler à partir de zéro. Je vais donc choisir Non, non, non. Vous voudrez peut-être envisager d'utiliser Yes Lynn dans vos propres projets pour vous aider à garantir la qualité du code. Mais pour plus de simplicité, je vais juste choisir une note à ce sujet. Et nous avons quelques étapes de lancement ici. Nous avons donc juste besoin de cd dans le dossier et d'exécuter npm install pour installer les dépendances , puis exécuter npm run dev. Et je peux voir que le dossier est créé ici, composition API nope balls. Je vais donc faire glisser ça dans VS Code. Puis ouvrez le terminal et lancez npm install. Ensuite, npm lance dev pour le lancer. Maintenant, nous pouvons commander et cliquer sur ce lien et nous pouvons voir l' application de base en cours d'exécution dans le navigateur. Avant de commencer, changeons simplement le nom qui apparaît en haut. Je vais donc ouvrir l'explorateur et aller dans index.html. Je viens de changer le texte de ces balises de titre en boules de notes. Gardez cela, et nous sommes maintenant prêts à commencer à créer des balles de nope. 62. Router - Installer et configurer: Bien qu'il existe une option dans l'outil de construction, nous utilisons simplement l' ajout automatique de Vue Router à notre projet. Il est bon de savoir comment le faire manuellement au cas où vous auriez besoin d'ajouter Vue Router à une vue existante. Trois projets qui ne sont pas déjà configurés. Ajoutons Vue Router à notre projet et tout configurer. Allons donc à notre terminal et tuons le processus de mort avec contrôle et disons installer Vue Router. Nous pouvons simplement exécuter npm installer Vue Router quatre pour obtenir la dernière version de votre routeur qui est maintenant installée. Nous pouvons lancer notre projet à nouveau avec npm run dev, fermer le terminal. Tout au long du routeur vers notre API doit sauter la source et main.js. Nous ne pouvons pas être acheminés vers notre application en important la méthode Create Router depuis Vue Router et l'ajouter à cela crée une chaîne avec certaines options. Tout d'abord, après cette première ligne, nous devons importer Create Router à partir du routeur. Et nous pouvons maintenant utiliser cette méthode de création d'itinéraires ou de méthodes pour configurer notre routeur. Nous devons attribuer cela à une constante. Nous allons donc créer une constante appelée routeur et l'affecter à cela. Nous voulons atteindre un objectif avec toutes nos options de routeur. La première option que nous devons ajouter est le mode historique. Nous pouvons définir ce paramètre pour créer un historique Web ou créer un historique de hachage Web. Maintenant, créer un historique Web utilisera des URL réelles dans le navigateur lorsque nous naviguons sur toutes les pages. Par exemple, si nous allions à une page À propos le chemin serait simplement oblique. Alors qu'avec l'historique du hachage Web, nous dirons barre oblique puis hachée, puis barre oblique , puis quand nous allons sur notre page à propos, et je vais utiliser l'historique du hachage Web ici, parce que lorsque nous utilisons ce mode, Nous n'avons pas besoin d'une configuration de serveur sophistiquée pour faire fonctionner notre application si nous décidons de la déployer sur un serveur, définissons cette propriété d' historique pour créer un historique de hachage Web. Nous devons importer cela depuis Vue Router VS Code est automatiquement ajouté pour moi ici. Mais si le vôtre n'est pas injuste, ajoutez-le à cette impulsion. La prochaine option que nous devons ajouter est celle de nos itinéraires. Nous créons une propriété appelée itinéraires configurés vers un tableau. Et nous pouvons configurer tous nos itinéraires ici. Mais avant de le faire, ajoutons cette instance de routeur à notre application. Donc, après cela, créez notre application, nous pouvons ajouter la méthode américaine à cette chaîne de points d'utilisation entre parenthèses, et nous pouvons simplement passer cette constante de routeur. Je vais juste diviser cela en plusieurs lignes et l'enregistrer. Veillons à ce que nous ne voyions aucune erreur. Je vais recharger. Et je pense que cette flèche est peut-être juste parce que nous n'avons pas encore réglé d'itinéraires. Nous allons le faire ensuite. 63. Routeur - Ajouter quelques parcours: Configurons quelques itinéraires pour notre application. Et notre application va avoir une vue des notes, notre page et une vue statistiques. Commençons par configurer un itinéraire pour notre vue des notes. Eh bien, tout d'abord, nous allons avoir besoin d'un composant que nous pourrons utiliser pour cette vue de notes. Revenons à l'Explorateur de fichiers et nous allons cliquer avec le bouton droit sur le dossier source et créer un nouveau dossier appelé vues. Il n'est pas nécessaire d'appeler cela des vues. Vous pouvez appeler ça des pages si vous le souhaitez, mais je vais appeler ça des vues. Et créons un nouveau composant là-dedans, et nous appellerons ces notes de vue. Ne pas afficher les balises de modèle. Pour l'instant, je vais commencer une plongée avec une classe de notes. À l'intérieur de ça, beaucoup de H un qui dit juste des notes et sauve ça. Et nous pouvons maintenant utiliser ce composant pour notre vue des notes. Passons à main.js et ajoutons un itinéraire pour notre vue des notes. Pour chaque itinéraire de notre application, nous devons ajouter un objet avec certaines options. Tout d'abord, nous avons besoin de l'option chemin. Cela déterminera le chemin qui nous mènera vers cette route. Je vais définir le chemin pour que la barre oblique suive la vue des notes, ce qui signifie simplement que ce sera la route racine de notre application lorsque nous visiterons la première visite, c'est l'itinéraire qui ira. Nous devons également ajouter une propriété de nom. Je vais définir cela sur des notes sur cette propriété de nom qui nous permet d'envoyer plus facilement l'utilisateur vers un itinéraire particulier par programmation. Enfin, nous devons ajouter la propriété de composant que nous venons de définir sur le composant que nous voulons utiliser pour cet itinéraire. Nous devons donc tout d'abord importer notre composant. Nous allons donc importer des notes de vue à partir de vues obliques, de vues obliques, de vues obliques en vue de points. Maintenant, dans les versions précédentes qui utilisaient Webpack, nous n'avions pas besoin de placer la vue par points ici, mais lorsque nous utilisons VT, que nous sommes maintenant obligés d'adopter la vue. Et c'est aussi le symbole ici. Il s'agit simplement d'un alias qui fait référence à ce dossier source. Et cet alias est en cours de définition dans ce fichier vt dot config dot js. Nous pouvons le voir ici. Vous pouvez également ajouter votre propre introduction d'alias à différents dossiers si vous le souhaitez. Mais de toute façon, revenons à main.js et nous pouvons maintenant définir le composant pour cet itinéraire. Nous allons définir cette option pour afficher les notes. Sauvegardons ça et rechargeons. Nous avons toujours une erreur ici. Et je viens de comprendre quel est le problème lorsque nous configurons l'historique pour créer un historique de hachage Web, doit s'agir d'un appel de méthode. Il suffit d'ajouter des parenthèses à la fin de cela, sauf que l'application fonctionne à nouveau. Cependant, nous ne pouvons pas voir cette vue de notes que nous venons de créer dans le navigateur. Et c'est parce que nous devons ajouter un composant de vue de routeur à notre application, à notre composant racine app.vue. Et nous le ferons dans une minute. Mais avant de le faire, nous allons simplement mettre en place un itinéraire pour notre page de statistiques. Revenons donc au dossier des vues. Notes de vue en double, vue par points. Nous appellerons ce point vue des statistiques de vue. Je vais juste changer de cours le jour de deux départs. Nous allons également modifier le texte dans la rubrique deux débuts. Gardez ça. Revenez à main.js. Et ajoutons une virgule après cet itinéraire et dupliquons cela. Au fait, je l'ai fait en sélectionnant ces textes et en appuyant sur Alt Shift et vers le bas, le raccourci pourrait être différent sur votre plateforme. Débarrassez-vous de cette virgule ici. Définissez presque le chemin vers les statistiques obliques de sorte que lorsque nous passons à la barre oblique, nous arrivons aux statistiques. Il a également changé le nom en arrêts. Et maintenant, nous devons définir le composant pour demander la vue des points, mais nous devons d'abord l'importer. Je vais donc dupliquer cette ligne de notes de vue et nous importerons statistiques de vue à partir de la vue barre oblique de l'art, de la vue des points de statistiques et de l'enregistrer. Maintenant, nous devons simplement modifier ce composant pour afficher les statistiques, disons cela, mais nous ne pouvons toujours pas voir dans la vue Notes sur la page si nous allons à la barre oblique de chemin et que nous ne pouvons pas voir la vue des statistiques si nous allons à les statistiques de barre oblique de chemin. Et c'est parce que nous devons ajouter un composant de vue routeur à notre application. Nous allons le faire ensuite. 64. Ajouter RouterView et navigation: Laissez-moi aller à la barre oblique. Nous ne voyons pas le composant Notes avec cet en-tête avec les notes de texte. Et c'est parce que nous devons ajouter un composant de vue routeur à notre application, c'est le composant de vue routeur qui détermine où nos itinéraires seront affichés. Passons donc à notre source de composants racine, app.vue. Et je vais simplement supprimer cette section de script, supprimer tout ce qui se trouve dans le modèle, et supprimer la balise de style et tous les styles. Gardez ça. Et nous pouvons désormais supprimer tous les composants du dossier des composants source. Je vais tout sélectionner ici, cliquer avec le bouton droit et supprimer. Nous voyons une flèche, mais si nous le rechargeons , l'erreur disparaît. Maintenant, pour afficher nos itinéraires, il suffit d'ajouter un composant de vue de routeur. Et nous pouvons le faire dans un cas de tableau de bord comme cette vue de routeur. On peut le faire dans l' affaire Pascal, ce que je vais faire. Donc, la vue du routeur, enregistrez ça. Et nous pouvons maintenant voir l'itinéraire de nos notes sur la page. Et si nous allons à la barre oblique de chemin, nous pouvons voir notre vue des statistiques. Maintenant, utiliser la barre d'adresse pour naviguer n'est pas très amusant. Ajoutons certains composants de liaison de routeur à notre page afin que nous puissions naviguer au-dessus de ce composant d'affichage du routeur. Je vais ajouter un composant de lien de routeur à l'intérieur, je vais mettre les notes de texte et ensuite je dupliquerai cela. Dans celui-ci, nous allons mettre les statistiques de texte pour déterminer où vont aller ces liaisons de routeur. Nous pouvons simplement ajouter un prop à deux et le définir sur le chemin que nous voulons aller trop loin, la vue des notes, nous pouvons simplement définir cela sur une barre oblique. Et ensuite, pour la vue des statistiques, nous pouvons simplement définir ce paramètre pour réduire les statistiques. Sauvons ça. Ajoutons simplement de l'espace après le premier et un tuyau, puis un autre espace. Disons que nous pouvons maintenant naviguer dans notre application. 65. Routeur - Tidying: Notre routeur est maintenant tout configuré et fonctionne. Mais avant de passer à autre chose, nous allons juste ranger un peu notre code. Donc tout d'abord, je vais juste extraire tout le code de configuration de notre routeur dans son propre fichier dans le dossier source. Je vais créer un nouveau dossier appelé routeur. Là-dedans. Je vais créer un nouveau fichier appelé index.js. Revenons à main.js. Je vais utiliser une sélection multiple en maintenant la touche Alt enfoncée. Bien que le raccourci puisse être différent sur votre plateforme, je vais sélectionner tout ce routeur, const les deux entrées pour notre vue des notes et la vue des statistiques. Cette ligne où nous importons les méthodes Create Router et d'excellentes méthodes d'historique de hachage Web à partir de Vue Router. Je vais couper beaucoup et ranger ça un peu. Ensuite, passez à index.js dans notre dossier routeur, collez tout ce code, et nous commencerons simplement une ligne après nos entrées. Et maintenant, nous voulons exporter cette instance de routeur pour la rendre disponible dans d'autres fichiers. Donc, à la fin, nous pouvons simplement exporter le routeur par défaut et l'enregistrer. Et maintenant, si nous revenons à main.js, nous pouvons importer cette instance de routeur en ajoutant routeur d'importation à partir du routeur oblique. Et nous n'avons pas besoin d'ajouter la barre oblique index.js lorsque nous utilisons le nom de fichier index.js, il recherchera toujours ce fichier automatiquement. Nous pouvons donc simplement importer le routeur à partir du routeur slash. Et maintenant, lorsque nous allumons utiliser le routeur, nous utilisons l'instance de routeur à partir du fichier index.js dans le dossier du routeur. Gardons cela et voyons si tout fonctionne encore. Tout fonctionne toujours. Encore une chose, je vais passer à index.js et je vais mettre tous ces itinéraires dans leur ancienne constante. Je vais donc mettre en place une constante appelée itinéraires. Définissez cela comme égal à un tableau. Ensuite, je vais cuisiner ces deux objets, les coller ici. Et maintenant, nous pouvons simplement définir cette propriété d' itinéraires, deux itinéraires. Ou comme ces noms sont les mêmes, nous pouvons simplement raccourcir cela à des itinéraires. Donc, gardons ça, assurez-vous qu'il fonctionne toujours. Pourtant. Cela fonctionne toujours bien maintenant que nous l'avons lié au fichier main.js. J'ai déplacé tout le code lié à notre routeur dans son propre fichier. 66. Bulma et conception - Installez Bulma [Module 14]: Pour nous aider à rendre nos perspectives jolies, nous allons utiliser la bibliothèque CSS Bulmer. Je vais aller à Walmart.io. Maintenant, ce n'est pas un cours CSS, donc je ne me concentrerai pas sur les bulla et le CSS jusqu'en mars. Nous l'utilisons simplement pour nous aider à rendre nos perspectives jolies sans avoir à passer beaucoup de temps à écrire des excès de CSS. Et de cette façon, nous pouvons uniquement nous concentrer sur Vue.js trois et l'API de composition. De plus, je ne suggère pas nécessairement que vous utilisiez Bulmer pour vos projets. Vous devez faire un choix éclairé en fonction des besoins individuels de vos projets. Cependant, je crois que Bomber est actuellement le troisième framework CSS le plus populaire après bootstrap, tailwind CSS. Cependant, j'ai choisi bola pour ce projet car c'est le framework CSS le plus facile à utiliser. Et il contient tous les composants dont nous aurons besoin pour ce projet. Si je passe à la documentation et aux composants, nous avons ce composant de carte que nous allons utiliser, ce composant Navbar que nous allons utiliser, le composant modal. Maintenant, nous allons utiliser un tas de composants de batterie que nous allons utiliser comme cette entrée. Et il dispose également d'un bon composant de bouton que nous allons également utiliser. Allons installer la balle dans notre projet. Je vais passer à la vue d'ensemble, puis commencer à faire défiler vers le bas. Il existe plusieurs façons de l'installer. Nous pouvons l'installer à l'aide d'une liaison CDN où il sera chargé en externe. Nous pouvons le télécharger depuis GitHub. Nous pouvons installer le paquet npm. C'est comme ça que je vais le faire. Nous devons donc lancer npm installer Puma. Nous allons donc copier ça. Ouvrez notre terminal, tuez le processus de mort et lancez npm install bulla. Et c'est installé. Et si nous passons à notre dossier de modules de nœuds, nous pouvons dire que Bulmer est là. Et si nous sautons dans le dossier CSS, on peut dire bola CSS fichiers. Je vais utiliser la version minifiée, Bohmer dot main.css. Ce que nous pourrions également utiliser le formulaire de version minifiée point CSS. Je vais cliquer avec le bouton droit sur Bullet dot main.css. Cliquez sur Copier le chemin que je vais accéder à app.vue. Je vais ajouter une balise de style pour importer ce fichier CSS. Je vais ajouter à Import. Ensuite, je vais coller dans ce chemin. Nous avons le chemin complet sur mon ordinateur ici. Nous n'avons besoin que du chemin de ce dossier melon ici. Je vais donc tout supprimer avant ce dossier à puces. Nous devons ajouter un point-virgule à la fin. Supposons que nous ayons besoin de relancer notre application. Lançons npm, lançons Dev. Revenez à notre application. Nous pouvons voir que nos styles ont déjà un peu changé, mais juste pour nous assurer que Bulmer fonctionne, ajoutons une classe à chacun de nos composants de liaison de routeur ici de bouton. Et cela devrait donner à cela un style de bouton sympa. Gardez ça. Nous pouvons voir de jolis petits boutons maintenant, et nous pouvons maintenant commencer à utiliser Bohmer pour rendre Kiara belle. 67. Barre Nav - Conception: Ajoutons une belle barre de navigation à notre application. Tout d'abord, créons simplement un composant qui sera importé dans app.vue. Et pour une raison quelconque, mon dossier de composants a disparu. Mais vous devriez avoir un dossier de composants ici. Mais je vais créer ces composants. À l'intérieur de ça. Je vais créer un dossier appelé Layout. Je n'aime pas la façon dont les groupes VS Code sont des dossiers ensemble comme celui-ci par défaut. Je vais juste m'arranger. Je vais dans le code, les préférences et les paramètres, et je vais chercher du compact. Nous pourrions simplement décocher cette option de compilation des dossiers. Et nous avons maintenant un système de dossiers normal ici. Dans le dossier de mise en page. Je vais créer un fichier appelé vue point de la barre de navigation. Pour l'instant, nous allons commencer les balises de modèle. Il suffit d'ajouter une div avec ma barre de navigation, le texte. Passons maintenant à app.vue et importons ce composant scripts Up tags. Je vais ajouter un commentaire de bloc ici qui dit simplement importations. Ensuite, nous allons importer la barre de navigation à partir de composants barre oblique de la disposition barre oblique suffisamment vue de points de barre. J'utilise ces gros commentaires pour diviser mon code en sections. Je trouve juste que cela me rend beaucoup plus facile de numériser mon code. Eh bien, c'est entièrement facultatif. Vous n'avez pas besoin d'ajouter ces commentaires si vous ne le souhaitez pas. Collons maintenant ce composant Navbar sur la page. Je vais me débarrasser de ces itinéraires de jambes de vue pour l'instant et juste sortir notre barre de navigation. Sauvons ça. Et on peut dire ma barre de navigation sur la page. Allons maintenant au site de calvitie et nous allons passer à Components. Navbar, faites défiler vers le bas, étirez-le un peu, et nous allons juste copier cet exemple ici pour une barre de navigation de base, puis nous allons le modifier. Je vais donc copier tout ce code. Replacez cela, puis nous passerons à la vue de points de la barre de navigation, collez tout ici, retirez-le et enregistrez. Et nous pouvons maintenant voir la barre de navigation. Je vais juste zoomer un peu plus loin. Je veux finir sur une belle couleur verte au lieu du blanc. Et nous pouvons le faire en ajoutant une classe à cet élément NEF quand diviser les attributs à l' aide de l'extension d' attributs HTML fractionnés que nous avons installée précédemment. Beaucoup de succès, sauf ça. Nous avons maintenant une belle Napa verte. Et encore une fois, je ne vais pas expliquer toutes ces classes à partir de puces car je veux rester concentré autant que possible sur la vue et l' API de composition. Mais vous pouvez trouver tous ces cours disponibles sur le site. Par exemple, pour cette barre de navigation déroulante, deux couleurs vous montrent comment ajouter toutes ces différentes couleurs ici. 68. Barre Nav - Navigation et logo: Personnalisons cette barre de navigation. Tout d'abord, je veux me débarrasser de ce lien Plus ici avec ce menu déroulant. Défilons suffisamment la vue Bardot vers le bas et voyons si nous pouvons trouver cela. Nous pouvons voir ce lien supplémentaire ici. Et nous pouvons voir cette div avec une classe de barre de navigation. Faisons tomber cette div, débarrasse-toi de ça. Gardez cela et nous voyons cela disparaître. Déplacons maintenant ces deux liens vers la droite. Je vais donc faire défiler ces deux liens d' éléments de barre de navigation ici. Je vais les couper et je vais juste me débarrasser de ce tableau de bord de barre de navigation Dip. Je vais coller ces liens dans cette div de fin de barre de navigation, qui les mettra à droite. Réduisons ce plongeon à l'intérieur, pas par article, et débarrassons-nous de cela. Je vais juste coller les liens que nous avons cuisinés avant et sauvegarderai ça. Faisons en sorte que ces liens vues deux notes et voir notre personnel. Je vais juste retirer la deuxième barre de laboratoire I2. Maintenant, dans ce premier, je vais changer cela par un composant de liaison de routeur. S'assure que nous modifions à la fois les balises d'ouverture et de fermeture que je vais diviser les attributs là-dessus, changer le texte en notes. J'ai beaucoup de choses à propulser à ce lien de routeur, à m' installer à la barre oblique de chemin, qui est là où nos notes routent. Et puis je sélectionnerai ce lien de routeur, je le dupliquerai. Et nous allons changer les deux prop par les statistiques barre oblique de chemin, et nous allons changer le texte pour qu'il commence également et sauvegarderons cela. Nous avons maintenant des liens vers notre page de notes et d'arrêts. On peut voir cette rubrique des rencontres. Paula a une classe active, que nous ne pouvons pas accéder à l'un de ces éléments de barre de navigation pour le rendre actif. Vous pouvez voir que ce lien est désormais actif. Ces composants de liaison d'itinéraires peuvent en fait ajouter une classe au lien lorsque ce lien est le lien actif. Si je viens d'attraper cette classe, nous pouvons simplement ajouter un accessoire de classe de dash active, le définir sur. Cette classe est octave, et je vais également la copier et la coller dans le lien statistiques. Disons que nous devrions maintenant avoir des places actives sur nos liens. Et oui, ça marche. Remplacons maintenant cette bombe un logo par un titre pour notre application. Je vais faire défiler vers le haut et l'intérieur de cette div de marque de barre de navigation, nous avons cette attaque avec une classe d'élément de barre de navigation. Je vais supprimer l'image qui se trouve à l' intérieur et supprimer cette référence H. Je ne veux pas changer cette balise en div parce que je ne veux pas que ce soit un lien. Et puis à l'intérieur, je vais juste ajouter les textes non boules. Et pour améliorer le style du texte ici, nous allons ajouter une classe à ce jour de taille quatre pour l' agrandir un peu. Et puis une classe de monospace familial pour lui donner cette police de style monospace. Et encore une fois, vous pouvez trouver tous ces cours sur le site du bolus, qui est très bien documenté. 69. Barre Nav - Conception et menu réactifs: Actuellement, le contenu de cette barre de navigation va continuer à s'étendre à mesure que le navigateur devient de plus en plus large, ce qui n'est pas trop beau, surtout sur de très grands écrans. Nous avons le logo ici , puis ces liens juste ici. J'aimerais que tout cela soit limité au milieu après un certain point. Et nous pouvons utiliser des éléments de conteneurs désossés pour ce faire. Je vais donc tout entourer dans barre de navigation d'une div, d' une classe de conteneur. Je viens donc de minimiser tout ce qu'il y a là-dedans. Beaucoup de div avec une classe de conteneurs. Et pour nous assurer que cela limite une fois le navigateur est plus large qu'un certain nombre de pixels, nous pouvons ajouter une classe de marques de tiret, tableau de bord. Et ces cours sont tous documentés sur la boule de vision. Et puis je vais simplement déplacer cette marque de barre de navigation, ce menu de barre de navigation dans cette div et l'enregistrer. Et nous pouvons maintenant voir des écrans plus grands. Tout est limité au milieu de la page. Maintenant, si notre vue est inférieure à 100 à quatre pixels, nous voyons les liens de navigation disparaître et nous voyons ceci, l'ancienne icône mendiant, mais rien ne se passe lorsque nous cliquons dessus. En effet, pour afficher le menu mobile et changer cette icône en état actif, nous devons ajouter une classe active à la fois à l'icône du burger et au menu de navigation. Tout cela est maintenant documenté sur la page de la barre de navigation. Mais juste pour démontrer cela, codons en dur ces classes. Maintenant, je vais diviser les attributs sur ce tag avec une classe de barre de navigation grande. Je vais ajouter une classe d'actifs et l'enregistrer. Et nous pouvons voir l' icône changer en X. Et si nous faisons défiler vers le bas jusqu'à cette div de menu de la barre de navigation, je diviserai également les attributs sur cette même classe avec cette div. Ça sauve ça. Et nous pouvons maintenant voir apparaître le menu mobile. Configurons un href pour basculer ces classes. Lorsque nous cliquons sur le menu Burger, je vais supprimer ces classes codées en dur pour l'instant du menu de la barre de navigation div sur la barre de navigation Berger une balise, disons cela à moins de sauter dans notre section de script, ce qui ne le fait pas existe encore. Créons donc la configuration des scripts. Beaucoup de commentaires de blocage qui dit la navigation mobile. Presque configurer une constante appelée Show Mobile Nav. Définissez cette valeur égale à un href dont la valeur initiale est false. C'est faux. Nous n'afficherons pas la sieste mobile quand c'est vrai, nous l'afficherons et nous devons importer la méthode ref depuis la vue. Je vais donc juste ajouter un commentaire rapide ici. Les importations importeront la référence depuis la vue. Gardez ça. Maintenant, ajoutons conditionnellement ces classes en fonction de cette href. Passons d'abord à l'icône du burger, qui est ici avec une classe de hamburgers navbar. Nous allons maintenant nous lier à l'attribut de classe en ajoutant des accolades de classe deux-points et de nombreuses classes, le tiret A actif. Mais seulement lorsque Show Mobile Nav est vrai. Et puis je copierai ceci et je l'ajouterai également à cette div avec une classe de menu de tableau de bord de barre de navigation. Et je vais sauver ça. Maintenant, si nous passons à notre ref et que nous changeons la valeur sur true, nous pouvons maintenant voir la navigation mobile sur la version active de l'icône du burger. Revenons donc à faux. Permet de basculer la valeur de cette href. Lorsque nous cliquons sur le menu Burger, sautera jusqu'à la balise de hamburger de la barre de navigation et ajoutera un gestionnaire de clics. Et lorsque nous cliquons sur ce bouton, nous allons définir Show Mobile Nav à l' opposé de Show Mobile Nav. Si c'est faux, nous le définirons sur vrai. Et si c'est vrai, nous allons le définir sur false car il s'agit d'une balise qui va essayer d' aller quelque part lorsque nous cliquons dessus. Donc pour éviter que cela ne se produise, je vais juste ajouter un modificateur de dot prevent. Cela empêchera que le comportement par défaut de l'élément sur lequel nous cliquons le comportement par défaut d' une balise soit d'accéder à une autre page. Sauvegardons cela et voyons si cela fonctionne. Cliquez sur le bouton et nous voyons apparaître la navigation mobile. Cliquez à nouveau dessus et nous le voyons disparaître. Maintenant, je n'aime pas le fait que notre menu mobile repousse le contenu de notre page vers le bas. Voyez comment il pousse cette rubrique maintenant, je préférerais qu'elle soit simplement positionnée en haut de notre page. Ajoutons simplement un peu de style pour que cela se produise. Défilons vers le bas de la balise de style. Beaucoup de médias interrogent ici pour les médias mobiles, largeur maximale 1023 pixels car c'est à ce moment que les styles de navigation mobile entrent en jeu lorsque nous réduisons le navigateur. Maintenant, nous voulons cibler suffisamment de menu inférieur, qui est cette div avec une classe de menu de barre de navigation. Je vais donc juste ajouter le tiret, le menu tiret, configuration en position absolue et définir la gauche sur 0 et définir la largeur sur 100%. Enregistrez ce clic sur le bouton. Le menu mobile est maintenant positionné au-dessus de notre contenu au lieu de le pousser vers le bas. 70. Pages (Design): Avant de commencer à travailler sur la conception de notre page de notes, la page principale de notre application. Tout d'abord, j' aimerais simplement limiter le contenu de toutes nos pages. J'ajouterai également un peu de rembourrage car nous pouvons maintenant voir le contenu de nos pages est juste dans le coin sans rembourrage. Et aussi, une constante est toujours droite à gauche. Quelle que soit la largeur du navigateur, ce qui n'a pas l'air trop joli. Je vais simplement utiliser les mêmes classes que celles que nous utilisons pour limiter le contenu de notre conteneur Napa et ce sont les classes de bureau de Mac. Et pour ce faire, je vais passer à notre application. Vue. Il suffit d'entourer notre vue de routeur dans une div avec ces classes. Le conteneur est donc le bureau maximum. Il suffit de déplacer la vue du routeur et de l'enregistrer. Nous pouvons dire que notre contenu est désormais limité. Bona propose des classes de rembourrage que nous pouvons utiliser pour ajouter un peu de rembourrage autour de nos pages. Et tout cela est documenté sur la balle il faut citer beaucoup de classes de tiret Px T2 pour ajouter un rembourrage horizontal, puis un groupe de P, tiret quatre pour ajouter un peu de rembourrage vertical. Cela semble bien maintenant sur des écrans plus petits, mais sur des écrans plus larges, notre logo n'est pas aligné sur notre contenu. Je pense que ce serait mieux si ça s'alignait. Ajoutons donc un peu de rembourrage à notre barre de navigation. Je vais juste faire une vue de points de navigation et ensuite ce conteneur div que nous avons ajouté. Et beaucoup de PX classiques. Ça a l'air plutôt bien. Donnons maintenant à toutes nos pages une couleur d' arrière-plan subtile qui correspond à la couleur de notre barre de navigation. Je vais donc accéder à l'Explorateur de fichiers et ouvrir index.html. Je vais ajouter une classe à notre élément HTML. Bomber a des tons de classes de couleurs que nous pouvons utiliser, et ils sont tous documentés du côté palmaire. Eh bien, je vais utiliser la classe avec le fond, le tableau de bord, le succès, la lumière du tableau de bord. Gardez ça. Nous avons maintenant cette belle couleur vert social en arrière-plan de toutes nos pages. 71. Notes (Design): Créons maintenant le design de nos notes à l'aide d'un composant de carte bolus. Je vais sauter sur le site d'audace et aller Components et couper notre plein écran une seconde, je ne veux pas faire défiler cet exemple ici, qui a ces boutons en bas, que nous pouvons utiliser pour ajouter la possibilité de modifier et de supprimer une note. Je vais copier cet exemple ici en cliquant sur Copier. Et puis je reviendrai aux balles de notes. Nous allons ajouter cela à notre vue de notes. Nous allons donc accéder aux vues source et voir les notes ne sont pas affichées. Et je vais coller ça à l'intérieur de cette div par-dessus celle-ci. J'ai un peu mis en retrait et sauve ça. Et je vais me débarrasser de cet en-tête en haut. C'est donc cet élément d'en-tête ici. Nous allons donc nous en débarrasser, sauvegarder cela, et je vais simplement activer l' habillage de mots par défaut. Je vais donc aller dans le code, les préférences et les paramètres, rechercher l' enveloppe de mots et le définir par défaut, c'est mieux. Maintenant, je vais me débarrasser de tout ce qui trouve dans cette div avec la classe de contenu. Débarrasse-toi de ça. Crache un peu de Lorem en tapant simplement lorem, puis en appuyant sur Entrée. Vous devriez voir cette abréviation d' Emmet. Gardez ça. Je vais simplement me débarrasser de ce bouton de sauvegarde car nous n' aurons besoin que d'une modification sur le bouton Supprimer. Gardez cela, et voyons simplement à quoi cela ressemblera avec plusieurs coupes. ce faire, il suffit d' ajouter une v4 à la div parent. Donc avant, on peut juste le faire, j'ai juste craché trois d'entre eux. Et vous pouvez voir que nous avons besoin d'un peu d' espace entre chaque note. Donc beaucoup de classe à cette div avec une classe de carte M, marge bêta, tableau de bord inférieur. Gardez ça. Ceux-ci ont l'air plutôt bien. S'assurer qu'ils ont l' air bien sur un grand écran ou sur un petit écran ? Oui. Très bien. 72. Ajouter une formulaire de note (Design): Commençons par tomber en haut de la vue des notes avec une zone de texte sur un bouton que nous pouvons utiliser pour ajouter une nouvelle note. Revenons donc au site du broyeur à boulets et nous allons passer à la forme et au général. Je vais faire défiler vers le bas pour compléter l' échantillon agricole, montrer le code. Tout ce que je vais saisir ici, c'est de cette zone de texte jusqu' à ces boutons. Défilons donc vers le bas le code qui comporte une zone de texte. Et nous voulons cette div avec une classe de champs qui l'entourent. Je vais donc choisir de là à cette profondeur ici avec les deux boutons à l'intérieur. Copiez ça. Collez cela au-dessus de nos notes. C'est toujours à l'intérieur de cette div avec une classe de notes. Je vais coller ça ici, mettre un peu en retrait et sauver ça. Maintenant, je vais supprimer cette étiquette ici avec le message texte qui se trouve ici. Débarrasse-toi de ça. Et je vais me débarrasser de cette case ici pour cette div avec une classe de champs. Nous allons donc nous en débarrasser, nous allons nous débarrasser de ces deux boutons radio, qui est cette div ici. Gardez ça. Je vais maintenant entourer la zone de texte et les boutons d'un composant de carte avec une couleur d'arrière-plan. Je vais donc coller ça va se jumeler. Donc beaucoup de div avec une classe de carte pour lui donner une couleur d' arrière-plan, nous allons ajouter une classe de a succès en arrière-plan Doc. Je vais sélectionner ces deux divs avec une classe de champ, les couper, les coller à l'intérieur de cette div, sauf cela, nous devons ajouter un peu de rembourrage ici. Nous allons donc ajouter une classe de P tiret quatre, lui donner un peu de rembourrage et nous avons besoin d'un peu de marge en bas. Donc beaucoup de cours, MBA, marge inférieure, tiret f5, sauvez ça. Je vais maintenant supprimer ce bouton d'annulation. Je vais donc supprimer cette div avec une classe de contrôle qui comporte le bouton Annuler à l'intérieur. Gardez ça. Je ne veux pas appuyer sur ce bouton sur le côté droit. Vous pouvez le faire en ajoutant une classe de est tiret, tiret, directement à ce jour de la classe de champ. Gardez ça. Et je veux changer la couleur et le texte de ce bouton. Je vais simplement le diviser en plusieurs lignes et je vais changer le texte qu'il contient en nouvelles notes. Supposons que nous changerons la couleur d'arrière-plan en ajoutant une classe de tiret de maison, arrière-plan, de tiret, de succès, enregistrez cela. Enfin, modifions l' espace réservé sur cette zone de texte. Et en fait, je vais changer cela en une étiquette de fermeture automatique comme ça. Divisez les attributs et nous définirons l'espace réservé sur une nouvelle note, sauf que cela semble plutôt bien sur le bureau. air plutôt bien sur mobile aussi. 73. Notes Array (réf) [Module 15]: Ok, donc notre page de notes est très belle. Maintenant, faisons en sorte que cela fonctionne réellement en ajoutant des données et des méthodes. Nous allons également transformer cette note en composant enfant. Nous allons ajouter une propriété calculée pour afficher le nombre de caractères dans chaque note. Et nous allons également configurer un événement personnalisé à l'aide d'emit. Eh bien, tout d'abord, mettons en place un href où nous pouvons stocker une liste de notes en vue, une vue par points de notes. Je vais faire défiler vers le bas et ajouter nos balises de configuration de script. Je vais créer un commentaire de bloc ici qui dit des notes, configure une constante appelée notes, définit comme égal à un href. Nous devons importer cette méthode de référence. Donc beaucoup d'autres commentaires de bloc ici qui disent importations. Encore une fois, ces commentaires sont facultatifs. Vous n'avez pas besoin de les ajouter si vous ne le souhaitez pas. Nous devons importer des références depuis la vue. Configurons maintenant notre tableau de notes. Nous allons donc passer un tableau dans cette href. Chaque élément du tableau sera un champ ID autorisé par un objet. Nous allons simplement définir cela pour ajouter beaucoup de champ de concept pour le contenu des notes. Je vais juste y mettre un peu de lorem. Pour une raison quelconque, M, ça ne fonctionne pas en ce moment. Je vais juste copier ce Lorem à partir d'une note codée en dur. Collez ça là-dedans. Beaucoup de virgules après cet objet. Dupliquez les notes, débarrassez-vous de cette virgule, définissez l'ID sur id2. Je vais juste changer le texte de celui-ci. Il s'agit d'une note plus courte. Nous sauvegardons cela. Maintenant, affichons ces notes sur notre page à l'aide d'une directive V4. Nous avons déjà une directive V4 sur cette div avec la classe de cartes que nous utilisons pour nos notes. Je vais donc simplement changer cela pour être noté dans les notes. Nous utiliserons donc les notes comme espace réservé lorsque nous parcourons ces notes ou écrivons. À installer ici. Nous devons également ajouter une propriété clé. Presque à faire remarquer que ce k est toujours unique. Je vais sauver ça. Et nous pouvons maintenant voir deux notes sur notre page. Et nous avons juste besoin de sortir notre contenu, qui sera le contenu des notes. Je vais sélectionner ce texte ici dans ce tableau, la classe de contenu ou les accolades doubles. Et puis notez le contenu des points. Gardez ça. Rechargez. Nous pouvons maintenant dire des notes A2 sur la page qui proviennent maintenant de notre tableau de notes. 74. Ajouter une méthode de note: Configurons une méthode de notes publicitaires qui est déclenchée après avoir tapé quelque chose dans cette zone de texte et cliqué sur le bouton, qui ajoute ensuite cette nouvelle note à notre tableau de notes, celles qui l'affichent sur la page. Tout d'abord, mettons en place un href, que nous pouvons lier à cette zone de texte afin que nous puissions réellement accéder au contenu que l'utilisateur a tapé. Au-dessus de notre tableau de notes, je vais configurer une nouvelle colonne intitulée New Note. Définissez cette valeur égale à un href avec la valeur par défaut d'une chaîne vide. Retrouvons maintenant cette constante dans notre zone de texte. Nous allons donc faire défiler jusqu'à la zone de texte qui se trouve ici. Directive modèle hors V. Définissez cela sur une nouvelle note. Gardez ça. Maintenant, si nous saisissons quelque chose dans cette valeur href, appuyez sur Enregistrer ça. Nous pouvons maintenant le voir dans la zone de texte. Remettons cela à une chaîne vide et sauvegardons cela. Configurons maintenant une méthode qui est déclenchée. Lorsque nous cliquons sur ce bouton, je sauterai sur le bouton Ajouter une nouvelle note, qui se trouve ici. Je vais diviser les attributs sur la balise d'ouverture. Ajoutez un gestionnaire de clics. Cliquez sur pour déclencher une méthode appelée ajouter des notes. Et maintenant, nous devons créer cette méthode. Nous allons donc faire défiler vers le bas une fois que notre tableau de notes aura configuré cette méthode const note équivaut à une fonction de flèche. Pour l'instant, je vais juste me déconnecter de la note publicitaire, sauvegarder ça. Ouvrez la console. Cliquez sur ce bouton. Nous pouvons dire que cette méthode est déclenchée car nous pouvons voir ce journal être lancé. Maintenant, nous ne voulons pas que l' utilisateur puisse cliquer sur ce bouton si la zone de texte est vide, car soudainement, il suffit d' ajouter un nœud vide. Désactivons ce bouton lorsqu'il n'y a rien dans cette zone de texte. Allons jusqu'à ce bouton, qui est ici. Nous pouvons simplement lier l' attribut désactivé et ajouter conditionnellement cet attribut désactivé en bas. Nous voulons uniquement ajouter cet attribut. Cette nouvelle note, href, est une chaîne vide. Pour ce faire, nous ne pouvons tout simplement pas faire une nouvelle note. Parce que si cette chaîne est vide, elle sera comptabilisée comme une valeur 0 ou une valeur fausse. Alors, gardons ça. Nous pouvons maintenant voir que ce bouton est désactivé. Nous ne pouvons pas cliquer dessus. Et si nous touchons quelque chose, nous pouvons maintenant cliquer dessus. Travaillons maintenant sur notre méthode des notes. Tout d'abord, nous avons besoin d'un objet avec un ID et une propriété de contenu les propriétés de concept sont définies sur le contenu de la zone de texte. Et puis poussez l'objet sur ces notes sont correctes. Nous devrions ensuite voir les notes sur la page. Commençons par configurer cet objet. Je vais créer une variable appelée note. Définissez cela sur un objet. Et nous allons avoir besoin d'une propriété d'identité. Le concept de propriété. Maintenant, la propriété concept que nous pouvons simplement extraire de cette nouvelle note, href, qui est liée à la zone de texte. Nous pouvons simplement définir cette propriété de contenu deux. Nouvelle valeur de point Note. Maintenant, pour la carte d'identité, nous avons besoin de quelque chose d'unique. Si vous le souhaitez, vous pouvez utiliser un package pour générer un ID unique. Uuid. Je vais juste Google UUID npm. J'utilise généralement cette version UUID pour le package. Vous pouvez l'utiliser si vous le souhaitez. Mais pour plus de simplicité, je vais utiliser l' horodatage en millisecondes à partir de la date actuelle pour générer cet ID au-dessus de cet objet, je vais d'abord saisir l'horodatage actuel, donc nous pouvons simplement faire de nouveaux parenthèses de date. Et cela va saisir la date actuelle en tant qu'objet date. Et puis pour convertir cela en horodatage en millisecondes, nous pouvons simplement ajouter un point, obtenir du temps, des parenthèses. Et maintenant, je vais attribuer cela à une variable. Donc, nous pouvons simplement le faire, la date actuelle est égale. Maintenant, cela va effectivement renvoyer un entier. Je vais le convertir en chaîne car nous utilisons des chaînes ici. Je vais configurer une autre variable appelée ID. Il est presque égal à la date actuelle. Pointez deux chaînes pour convertir ce nombre en chaîne. Si on veut lui tirer un peu, on peut se débarrasser du mot laisser une loi de retrait un peu. Je ne suis juste pas une virgule. Après la première variable. Nous pouvons maintenant définir cette propriété ID sur cette variable d' ID que nous avons configurée ici comme un raccourci puisque ces noms sont tous les deux identiques, nous pouvons simplement définir cela sur ID comme ça. Maintenant, déconnectons cette note et assurez-vous que cela fonctionne. Console. Notes de journal de points. Gardez ça. Ajoutons du texte ici. Cliquez sur le bouton. Nous pouvons voir cet objet être verrouillé. Oui, nous pouvons voir la propriété content et nous pouvons également voir l'ID qui a été généré. Basé sur l'horodatage de la date actuelle. Il ne nous reste plus qu'à pousser cet objet à noter. Donc, ici, nous devrions voir la nouvelle note sur la page. Pour avoir accès à ces notes, href, nous pouvons simplement ne pas faire la valeur de point. Nous pouvons simplement faire une note stop valeur. Ensuite, pour pousser cet objet vers le tableau, nous pouvons simplement faire une poussée par point. Notez ensuite. Sauvegardons cela et voyons si cela fonctionne. Je vais taper une nouvelle note. Cliquez sur le bouton. Pourtant, nous pouvons voir la note ajoutée à la page. En fait, il est logique que notre dernière note soit en tête de liste. Au lieu de le pousser va le décaler, ce qui va simplement le coller au début des droits qu'à la fin du tableau, je vais simplement changer le mot push on, minuscules sur shift. Gardez ça. Et essayons encore une fois. Oui, ça marche maintenant. Il l'ajoute au sommet. Après avoir ajouté les notes, nous pouvons voir que la zone de texte contient toujours le même contenu que celui que nous venons d'ajouter. À noter, effacons cette zone de texte après avoir ajouté le nouveau nœud en définissant simplement cette nouvelle note href, qui est liée à la zone de texte à une chaîne vide. Nous pouvons donc simplement faire une nouvelle note, la valeur est égale à une chaîne vide. Voyons si cela fonctionne. Cliquez sur le bouton. Nous pouvons voir que la zone de texte est vidée. Nous pourrions également utiliser une référence de modèle, pour refocaliser cette zone de texte après avoir ajouté la nouvelle note également. Pour que l'utilisateur puisse facilement ajouter une autre note immédiatement sans avoir à cliquer sur cette zone de texte. Voyons les éléments de la zone de texte ici. Beaucoup de réf. Je vais mettre ça sur une nouvelle note réf. Nous pouvons maintenant utiliser cette href pour focaliser cette zone de texte après avoir ajouté la nouvelle note. Revenons donc à notre méthode d'ajout de notes. En bas, nous pouvons simplement faire une nouvelle note ref, valeur de point pour saisir l'élément de zone de texte réel. Et ensuite, nous pouvons simplement mettre l'accent sur les points. Cela devrait, espérons-le, concentrer la zone de texte après avoir ajouté la nouvelle note. Sauvegardons ça et rechargeons. Assurez-vous que cela fonctionne. Bonjour. Ajoutez de nouvelles notes. Cela n'a pas fonctionné. La nouvelle référence de note n'est pas définie. Défilons simplement vers le haut et vérifions le href que nous avons ajouté. Vous savez, hréf. Nous devons réellement configurer une donnée avant de pouvoir utiliser ce modèle réf. Après cette nouvelle note const, ajoutons une autre colonne définie à la nouvelle note, HREF, qui est égale à f avec une valeur initiale null. Gardez ça. Et rechargeons à nouveau. Bonjour, là. Cliquez sur le bouton. Cela semble avoir fonctionné. Nous avons maintenant ajouté les nouvelles notes. Nous avons effacé la zone de texte et nous concentrons la zone de texte. 75. Composante enfant - Note: Ce composant de notes de vue devient assez long. Maintenant, nous allons ajouter d' autres fonctionnalités à chaque note individuelle, comme afficher le nombre de caractères, afficher un modal lorsque vous cliquez sur le bouton Supprimer et envoyer le utilisateur sur la page de modification lorsque vous cliquez sur le bouton Modifier. Donc, avant que ce composant des notes de vue ne devienne trop désordonné, créons un composant enfant pour une note individuelle. Je vais passer à l'explorateur et accéder aux composants source. Créons ici un nouveau dossier pour tous les composants liés à nos notes. Nous appellerons cela des notes. À l'intérieur de cela, je vais créer un nouveau fichier appelé balises de modèle de vue par points. Et je reviendrai pour voir les notes en vue de points. Sélectionnez presque toutes ces div avec une classe de carte qui affiche notre note. Il suffit de copier ça. Collez-le dans les balises du modèle. Corrigez l'indentation. Je vais simplement supprimer le V4 et les principaux attributs. Gardez ça. Revenons maintenant à la vue des notes en points et importons ce composant. Dans notre section de saisie, nous allons importer des notes à partir de composants obliques, notes obliques, de barres obliques, de points Vue. Gardez ça. Défilons maintenant jusqu'à cette div avec la classe de la carte, où nous affichons la note ci-dessus que nous utiliserons notre composant note à la place. Notez donc que si nous pouvons en faire une balise à fermeture automatique, déplacez la balise de fermeture sur une nouvelle ligne. Maintenant, nous pouvons simplement copier la directive VFR et la propriété, coller dans ce composant note. Maintenant, nous pouvons simplement nous débarrasser de cette div avec une classe de carte complètement. À sauvegarder ce rechargement. Nous voyons une erreur ici, impossible de lire les propriétés d' contenu de lecture non défini sur notre application est cassée. Et c'est parce que dans la vue des points de note dans notre modèle, nous essayons d'accéder à ces objets Note et à cette propriété de concept à partir des objets. Eh bien, cet objet noeud n'existe pas dans le contexte de ces composants de vue de points de note. Nous devons transmettre cela depuis la vue des notes de vue, vers le bas jusqu'à la vue des points de note à l'aide d'un prop. 76. Props (Note): Passons ici les objets notes que nous utilisons comme que nous utilisons comme porte-place dans notre boucle V4. notes vers le bas de la vue ne sont pas affichés vers le bas vers le point de note. Ainsi, note dot Vue a accès au contenu des points de note. composant de note ne s'affiche pas ici. Beaucoup de prop appellent des notes et définissent cette valeur égale à note lors de l'enregistrement. Maintenant, si nous passons à la vue des points, nous devons recevoir cet accessoire. Nous devons ajouter des scripts, balises de configuration, beaucoup de commentaires de blocage, ce qui dit des accessoires. Vous souvenez-vous maintenant comment nous initialisons nos accessoires ? C'est vrai. Nous créons une constante appelée accessoires. Nous avons défini cela comme égal pour définir les accessoires. Nous pouvons passer nos invites ici, soit nous un tableau, soit un objet. Je vais utiliser un objet pour cela. Nous allons recevoir un accessoire appelé note. Le serré va être un objet. Nous avons vraiment besoin de cet accessoire pour que notre composant soit correctement rendu. Nous devrions également ajouter nécessaire pour faire de cet accessoire un accessoire obligatoire. Gardez ça. Et j'espère que cela devrait fonctionner. Maintenant, je vais recharger tout ça marche. Et encore une fois, nous pouvons voir notre contenu de notes correct provenant du tableau de composants parent ici. Veillons simplement à ce que nous puissions encore ajouter une nouvelle note. Nous pouvons toujours ajouter une nouvelle note. 77. Computed (longueur de la note): Ajoutons une propriété calculée qui affiche le nombre de caractères qui se trouvent dans chaque note sous le contenu de la note. Commençons par mettre en place la maquette. Donc, en dessous de l'endroit où nous crachons le contenu, je vais ajouter une div. Et puis à l'intérieur, nous allons ajouter une petite étiquette. Pour l'instant, je vais juste mettre les textes XXX caractères. Gardez ça. Nous pouvons le voir sur la page. Pour déplacer ce texte vers la droite, je vais ajouter une classe à la div de tiret. Droits de tiret pour donner au texte une couleur gris clair, je vais ajouter une classe de texte, des lumières de tableau de bord gris tiret, sauvegarder ça. Au moins, les cours proviennent de bola sur le document documenté sur ce site Web. Et juste pour ajouter un peu de marge en haut, beaucoup de classes vides pour le tiret supérieur de la marge pour enregistrer cela, nous n'avons plus besoin d'une propriété calculée pour afficher le nombre de caractères. Nous pourrions simplement faire des accolades doubles, puis des notes, du contenu des points, de la longueur des points. Gardez ça. Nous pouvons voir que cela fonctionne. Cependant, je veux utiliser une propriété calculée quelque part dans notre application juste pour nous rappeler comment nous les configurons, supprimons la longueur du point de contenu note dot. Nous allons plutôt créer une propriété calculée appelée longueur de caractère, qui affiche ici le nombre de caractères de la note. Défilons vers le bas et configurons cette propriété calculée appelée caractère comme. Maintenant, vous souvenez-vous comment faire cela ? Si vous le souhaitez, vous pouvez suspendre la vidéo et voir si vous pouvez l' avoir seul. L'avez-vous géré ? Sinon, ne vous inquiétez pas. Donc, pour ajouter une propriété calculée, nous devons tout d'abord importer la méthode calculée de vue. Donc beaucoup d'entrées, commentaires, je vais importer des calculs de vue. Et je vais sauter au fond. Je ne connais pas le commentaire de bloc qui dit que longueur du caractère définit une propriété calculée ici. Nous voulons appeler cette longueur de caractère, créera une constante appelée longueur de caractère. Nous allons définir cela comme égal à la méthode calculée, puis nous transmettrons une autre méthode dans cette méthode. Maintenant, tout ce que nous devons faire ici, c'est restituer quelque chose. Nous voulons renvoyer la longueur de la propriété concept, qui se trouve dans cette prop de note que nous transmettons depuis la vue des notes de vue. N'oubliez pas que lorsque nous étions dans la section Script pour accéder à un accessoire, nous devons utiliser ces accessoires. Objet. Pour accéder à cet accessoire de note. Nous pouvons simplement faire des invites point note. Ensuite, pour accéder à la propriété concept, nous pouvons simplement faire du contenu de points. Nous voulons recadrer la longueur de cela. Nous voulons le renvoyer. Nous pouvons donc simplement ajouter le retour au stock. Gardez ça, rechargez. Cela semble fonctionner. Cependant, une chose que vous remarquerez peut-être est que si nous créons une note mais que nous n'avons qu'un seul caractère, alors il y a toujours un caractère. Il vaudrait mieux qu'on dise un personnage. Nous pouvons adapter notre propriété calculée pour recracher ce mot également. En fonction du nombre de caractères. Je vais aller à notre propriété calculée. Avant de le faire, laissez-moi passer à notre gabarit. Supprimez les caractères du mot ici et nous ne voyons plus que le nombre. Revenons à notre propriété calculée avant de renvoyer la valeur, je vais configurer une variable appelée description. Et nous allons définir cela sur un caractère ou caractères en fonction de la longueur de la note. Et nous pouvons utiliser une déclaration ternaire if pour le faire. Nous pouvons donc laisser la description égale si le point props, longueur du point de contenu de point est supérieure à un, alors nous pouvons utiliser les caractères de mot. Sinon, nous utiliserons le mot caractère. Maintenant, nous pouvons simplement dépendre de cette variable de description, caractères ou de caractères, agisse de caractères ou de caractères, de la longueur que nous affichons ici. Je vais donc renvoyer une chaîne de modèle ici. Placez cette longueur de point props.net.content, dollar, accolades comme ça, beaucoup d'espace et ensuite permis notre description. Donc, les accolades de dollar et ensuite la description. Gardez ça. Cela ne fonctionne pas. On peut voir 199 caractères. Un personnage, la note qui ne comporte qu'un seul caractère. Maintenant que dupliquer un peu de code, un point invite, une longueur de point de contenu de point. On pourrait le ranger un peu en le plaçant dans une variable. Donc, en haut, ici autorisé, Allons, appelons que la longueur est égale aux notes d' arrêt prop , le contenu du point, la longueur du point. Et puis je remplacerai la longueur de point props.net.content, ici et ici. J'appuierai sur la commande D pour les sélectionner. Le raccourci peut être différent sur votre plateforme. Il suffit de remplacer cela par ces longueurs variables. Gardez cela, assurez-vous qu'il fonctionne toujours. Nous voyons des personnages. S'il y a plus d'un personnage, personnage, ce n'est qu'un seul personnage. 78. Supprimer la note (Édite): Autorisons la suppression d'une note lorsque le bouton Supprimer est cliqué. Maintenant que cette note est dans un composant enfant, note dot Vue doit émettre un événement à partir de la vue de points de note. Lorsque vous cliquez sur le bouton. Ensuite, écoutez cet événement dans la vue point des notes de vue, puis lancez une autre méthode ici, qui supprime ensuite la note du tableau de notes. Puisque nos tableaux de notes sont dans cette paire de composants ou non dans ce composant enfant. Alors commençons par déclencher une vue de points de fin de note de fin de méthode locale. Lorsque vous cliquez sur ce bouton de suppression, trouvons le bouton Supprimer dans le modèle, et c'est ici. Je vais diviser les attributs ce gestionnaire de beaucoup de clics. J'utiliserai également le modificateur de prévention pour empêcher ce lien de se comporter comme un lien et essayer de les envoyer vers une autre page. Animal déclenche une méthode locale appelée handle, suppression cliquée. Créons cette méthode. autorisé beaucoup de commentaires de blocage ici. Les suppressions de Handle sur lesquelles vous avez cliqué vont configurer cette méthode. Const handle delete cliqué équivaut donc à une fonction de flèche. Pour l'instant, je vais simplement me déconnecter, supprimer , cliquer et enregistrer cela. Cliquez sur le bouton Supprimer. Sur. Oui, on peut voir que cette méthode est en cours de virage. Nous pouvons donc maintenant émettre un événement personnalisé à partir de cette méthode. Mais tout d'abord, nous devons configurer notre tableau d'émissions. Vous souvenez-vous de la façon dont nous faisons cela ? Un peu comme la façon dont nous avons installé nos accessoires. Vous voulez l'essayer vous-même, puis n'hésitez pas à mettre la vidéo en pause. Mais de toute façon, je vais ajouter un commentaire qui dit émet. Pour définir nos limites, nous pouvons créer une constante appelée emit, définir égale à la méthode define emits. Nous pouvons transmettre toutes nos images ici dans un tableau. Définissons donc une émission appelée suppression cliquée. Gardez ça. Nous pouvons maintenant émettre cet événement à partir de ce composant. Revenons donc à notre méthode de suppression des clips de poignée. Nous pouvons maintenant simplement émettre parenthèses, puis supprimer les clics. Gardez ça. Assurez-vous que nous n'avons pas d'erreurs. Nous pouvons maintenant écouter cet événement de suppression cliqué dans la vue de points des notes de la vue du composant parent. Passons à cette composante. Consultez notre composant Notes ici. Je suis autorisé à gérer les événements personnalisés ici. Par conséquent, supprimer cliqué, qui est le nom que nous utilisons pour notre mission lorsque nous recevons cet événement, déclenchons une méthode dans ce composant déclenchera une méthode appelée delete note. Créons cette méthode. Téléchargez en bas. Beaucoup de commentaires de blocage indiquant Supprimer la note. Nous pouvons configurer cette méthode, const delete notes correspond à la fonction flèche. Déconnectons-nous, supprimez la note. Pour l'instant, gardez ça. Cliquez sur le bouton Supprimer. On peut dire que cette méthode dans le composant parent est en cours de déclenchement. Cependant, à ce stade, comment savoir quelle note supprimer du tableau ? Nous avons besoin de quelque chose pour identifier la note que nous voulons supprimer. Nous pourrions utiliser la propriété ID. Si nous revenons à la vue des points de note, nous pourrions transmettre l'ID de la note avec cette image. Nous pouvons simplement ajouter un deuxième paramètre ici. Nous pouvons récupérer l'identifiant de cet accessoire de note que nous transmettons. Cela va être au point des accessoires, point ID. Ici. Nous pouvons simplement faire des notes de points d'accessoires pour sauvegarder ça. Revenons maintenant au composant parent qui indique la vue par points jusqu'à cette méthode de suppression de note. Nous pouvons passer ce paramètre ici. Appelons l'ID à supprimer. Déconnectons-nous et assurons qu'il s'en passe. Donc, ID à supprimer, sauvegardez-le. Je vais recharger, cliquez sur le bouton Supprimer. Oui, nous pouvons voir Delete Note Id1, qui est l'ID de la première note. Si nous cliquons sur le bouton Supprimer sur la deuxième note, vous pouvez dire supprimer savoir savoir id2. Nous savons que cette pièce d'identité est correctement transmise. Il existe maintenant plusieurs façons de supprimer les notes du tableau. Nous pourrions déterminer l'index des notes en fonction de l'ID, puis supprimer l'élément qui se trouve à l'index. Si nous voulons utiliser une solution à une ligne, nous pouvons utiliser filtre pour définir ce tableau de notes lui-même, mais filtré de sorte que seules les notes qui ne possèdent pas cet ID soient renvoyées. Ce que nous pouvons faire ici, nous allons écraser ce tableau de notes réf. Pour accéder à cette href, nous ne pouvons pas faire la valeur de point. C'est l'écraser. Nous pouvons simplement faire des égaux. Et on ne va pas refaire la valeur du point. Mais cette fois, nous allons le filtrer. Donc, filtre à points. Nous devons d'abord ajouter notre espace réservé, qui sera utilisé pendant que nous parcourons le tableau, car il examine chaque élément de la matrice. Nous pouvons donc simplement utiliser la note pour cela. Ensuite, nous pouvons ajouter une fonction flèche, qui sera déclenchée pour chaque note du tableau au fur et à mesure que nous la parcourons. Ensuite, nous pouvons simplement préciser ce que nous voulons retourner. Je vais juste étirer ça dans une minute. Retournons uniquement les éléments du tableau où l' ID de point de notes n'est pas égal à cet ID que nous transmettons à cette fonction. Donc, pas égal à id2, supprimer. Je pense que ça devrait le faire. Alors, gardons ça. Rechargez. Cliquez sur Supprimer. Et nous pouvons maintenant supprimer nos notes. 79. Pinia - Configuration et état [Module 16]: Je pense que c'est le moment idéal pour ajouter la gestion de l'état à notre application en utilisant Penny Up. En règle générale, si vous souhaitez ajouter la gestion de l'état à votre application, le plus tôt sera le mieux. Parce que l'ajout de la gestion de l'état à une application, qui est déjà très compliqué, peut causer beaucoup de maux de tête. Mais cette fois, nous allons installer un centime à partir de zéro car nous n'avons pas choisi l' ajouter automatiquement à notre projet. Voyons juste Google Penny. Le sou d'un site web. Commencez et je vais commencer à commencer. Tout d'abord, nous devons l' installer avec NPM ou Yarn. Je vais utiliser NPM. Nous devons donc nous rendre à notre terminal. Tuez le processus sourd avec Control C. Exécutez npm install, penny, qui est installé. Lançons donc à nouveau notre application avec npm run dev, fermons le terminal. La prochaine chose que nous devons faire est de créer une pédia, le magasin racine, et de le transmettre à l'application. Nous le faisons dans main.js. Je vais ouvrir l'explorateur et accéder à la source et à main.js. Donc, nous devons d'abord importer, créer un sou à partir de Pena. Je copierai cette ligne et je la collerai après cette importation créée à partir de la ligne de vue, la coller là-dedans. Et maintenant, nous avons juste besoin de déclencher la méthode américaine sur notre application, puis de déclencher cette création d'un centime, une méthode à l'intérieur de cela. Une fois que cela crée un contour, je vais juste ajouter des parenthèses d'utilisation de points. Et ensuite, je vais juste créer des parenthèses. Gardons cela, assurez-vous que nous n'avons pas d'erreurs. Rechargeons l'application. n'y a pas d'erreurs. Maintenant, nous devons créer un sou une tige. Je vais revenir au centime d'un site. Je vais revenir en arrière sur ce qui est une blague à un exemple de base. Et cela nous donne ici un exemple basique. Vous pouvez placer votre centime dans un magasin où vous le souhaitez. Mais ils semblent recommander de les placer dans ce dossier de magasins. Créons un nouveau dossier. Le dossier source appelé magasins créera notre fichier STL ici. Vous pouvez appeler cela comme vous le souhaitez, mais je vais appeler ça des notes de magasin, car il s'agit d'un magasin pour nos notes et toutes les méthodes associées à ces notes. Maintenant, je vais juste copier le code de cet exemple de base. Collez ça ici. Tout cela fait essentiellement est d'utiliser cette méthode de magasin définie pour configurer notre boutique. Et nous avons mis toutes nos actions d'État et tous nos collecteurs ici. Ensuite, nous avons simplement assigné ce magasin à cette constante et l'exportons pour le rendre disponible vers n'importe quel composant de notre application. Donnons donc à ce nom constant, un nom plus significatif. Nous pourrions donc appeler ce magasin américain notes. Et donnons également à ce nom ici un nom plus significatif que nous pourrions appeler ce magasin des notes. Pour l'instant, supprimons l' objet de cette action sur ces deux commentaires. Et nous allons simplement nous concentrer sur l'état pour commencer. Mettons cela sur plusieurs lignes. Et maintenant, nous pouvons copier des notes ou écrire dans l'état dans le magasin. Je fermerai main.js et nous sauterons pour voir les notes. points d'affichage où nous avons actuellement sur les notes sont ici. Je vais juste copier les deux objets à l'intérieur ce tableau pour l'instant, les copier, sauter. Mais pour stocker Node.js va définir une propriété appelée notes. Définissez cela comme égal à un tableau. Nous allons simplement coller ces notes dans ce tableau de notes. Gardez ça. Nous devrions maintenant pouvoir importer ce magasin dans n'importe lequel de nos composants où ils peuvent accéder à ce tableau de notes, qui se trouve dans notre état dans ce magasin. N'oubliez pas que l'état ne concerne que le stockage des données. 80. Utilisez notre boutique de service: Importons ce sans le sou bien que nous ayons créé dans la vue des notes vue point, page de notes. Et utilisez le tableau de notes qui se trouve dans notre boutique pour afficher nos notes sur la page. Au lieu d'utiliser le tableau de notes, que nous avons codé en dur dans la vue point des notes de vue. Tout d'abord, nous devons importer notre boutique en vue des notes vues par points. Nous voulons importer cette constante ici, utiliser des notes de magasin. Passons donc à la vue des notes en point. Regardez nos entrées et nous ajouterons simplement des accolades d'importation. Utilisez des notes volées dans les magasins de barres obliques, magasin de barres obliques le sait, enregistrez-le. Rechargez. Pour accéder au magasin de notre composant, nous devons l'attribuer à constante ou variable. Beaucoup. Un autre commentaire de bloc ici qui dit magasin. Et nous allons créer une constante appelée notes de magasin. Attribuez cela pour utiliser des notes de magasin, des parenthèses. Gardez ça. Maintenant que nous l'avons fait, nous devrions pouvoir voir notre boutique dans nos outils de développement de vue. Cliquons donc sur cette petite flèche double, puis regardons. Il est dit dans la console dernier magasin de beignets installé. Et nous pouvons voir comment ils ont volé leur libre clic là-dessus. Nous pouvons dire que nos notes présentent toutes les données de chaque note. Sortons maintenant ces notes à partir du tableau de notes qui se trouve dans notre magasin. Au lieu de partir du tableau codé en dur dans la vue point des notes de vue ici, nous pouvons simplement accéder à notre composant notes. Au lieu de v pour note dans les notes. Nous pouvons faire des notes V4 dans le nom de notre magasin, qui est des notes de magasin. Nous pouvons stocker des notes à partir de ce magasin auquel nous voulons accéder, les notes sont correctes. Nous pouvons donc simplement faire des notes de points. Gardez ça, rechargez. Nous pouvons toujours voir sur les notes sur la page, sauf qu'elles viennent maintenant de notre boutique. Au lieu de ce tableau, qui est dans notre composant view note stop view, nous devrions maintenant pouvoir nous débarrasser de cette note. Donc, c'est vrai, sauve ça. Nous pouvons toujours voir nos notes sur la page. Si nous allons dans les DevTools, nous modifions le contenu de l'une de nos notes. Nous pourrions dire que nos notes sont mises à jour en temps réel sur le modèle. Je vais juste recharger ça. Si nous sautons pour stocker des notes, dotez js, modifiez le contenu de l'une de ces notes. Je vais simplement supprimer certains textes et les enregistrer. J'ai mentionné plus tôt que le rechargement à chaud ne semble pas fonctionner pour le moment. Nous n'avons pas vu ce rechargement à chaud lorsque je modifie le contenu de cette note dans le magasin. Et je vous ai aussi montré qu'il y a un guide, sou, un site. Nous faisons défiler vers le bas, le remplacement du module, et nous avons essayé intégrer ce travail sur la base de cet exemple. Ça ne marcherait pas. Je n'ai toujours pas réussi à trouver un moyen d'obtenir ce travail au moment où j'enregistre ceci, mais n'hésitez pas à l'essayer. Peut-être que cela fonctionne maintenant dans le futur, là où vous êtes. Et si vous trouvez une solution, veuillez la partager avec cette conférence. Si je trouve une solution et beaucoup de conférences à ce cours, expliquant cela. 81. Action - Ajouter une note: Ajoutons une action à Penny, un magasin, qui nous permettra d'ajouter une nouvelle note à cette note, qui est dans notre état et nos opinions les stockent, ajoutant les nouvelles notes à la page, puisque ces notes arrivent maintenant. à partir de ces notes dans notre état. Maintenant, si nous essayons d'ajouter de nouvelles notes dès maintenant, nous constatons qu'une note d'erreur n' est pas définie. Et c'est parce que si nous allons voir la vue points des notes sur cette méthode Add note sur cette ligne ici, nous avons essayé d'ajouter un nouvel objet note à ce tableau de notes ref, qui n'existe plus ici. Mais nous voulons maintenant ajouter un nouvel objet note à ce tableau de notes, qui se trouve dans notre magasin d'opinion. Revenons au centime d'un site et passons à ce qui est un exemple de base. Il nous montre ici comment nous ajoutons des actions à notre boutique. Il suffit d'ajouter un objet nommé actions après notre état et nous pouvons placer toutes nos actions ici. Je me souviens que les actions ne sont que des méthodes qui nous permettent d'accéder aux données de notre état, puis de les modifier. Revenons à stocker Node.js. Et pour l'instant, je vais simplement réduire la méthode d'état et objet en cliquant simplement sur cette petite flèche. Après cela, nous ajouterons un objet appelé enchères. Et nous pouvons maintenant placer toutes nos options ici. Créons une nouvelle option appelée note impaire. Pour l'instant, je vais simplement déconnecter nos notes et dire que nous pouvons maintenant déclencher cette action depuis n'importe où dans notre application. Déclenchons le point de vue notes. Nous pourrions simplement déclencher cet oxygène directement sur les nouvelles notes mises ici dans ce gestionnaire de clics. Et nous tirons dans un magasin comme des notes volées. Pour accéder à notre boutique, nous pouvons simplement commencer les notes du magasin. Et puis pour accéder à l'action, nous venons de commencer les notes. On peut simplement commencer une note bizarre. Nous n'avons pas besoin d' ajouter des parenthèses à cette méthode lorsque nous la déclenchons dans notre modèle. Alors, sauvegardons cela et voyons si cela fonctionne. Je vais saisir une note et cliquer sur de nouvelles notes. Oui, on peut voir que j'ai remarqué que j'étais en lock-out. Cela a réussi à déclencher notre action. Cependant, si nous passons à notre méthode de note publicitaire précédente, qui est sur la vue des notes de vue. Nous avons ces deux lignes en bas, celle-ci qui efface la nouvelle note ref, celles qui effacent la zone de texte. Cette ligne, qui concentre la zone de texte à l'aide ce modèle REF que nous avons défini manière à ce que nous avons ajouté à la zone de texte ici. Maintenant, nous n'allons pas avoir accès à ce modèle V, le déclarer, tout ce modèle réf pour focaliser la zone de texte depuis notre boutique. Il est logique de continuer à déclencher cette méthode locale, à ajouter des notes, lorsque nous cliquons sur le bouton Ajouter une nouvelle note puis déclencher notre action à partir d'ici, afin que nous puissions toujours déclencher ces deux lignes au niveau du en bas, qui vont effacer la zone de texte et concentrer la zone de texte. Changeons donc ce gestionnaire de clics sur la boîte de réception des nouveaux blocs-notes et ce qu'elle déclenchait cette méthode de notes locales commentera tout ce code qui configurait le nouvel objet nœud. Et puis en le déplaçant vers le tableau de notes ref, que nous avions ici avant. Ensuite, déclenchera l' action dans notre magasin. Au lieu de cela, nous pouvons simplement stocker des notes. Notez que lorsque nous déclenchons une action à partir de notre section de script, nous devons ajouter des parenthèses. Nous allons donc enregistrer cela et voir si cette action dans notre boutique est toujours en cours de déclenchement. Je vais recharger, saisir une note et cliquer sur le bouton. Et pourtant, nous pouvons dire que je saurais être affiché, eh bien, cette action doit savoir ce que nous devrions réellement ajouter à nos notes directement dans l'état. Nous devons réellement transmettre le contenu de cette note qui a été saisie dans la zone de texte à cette action. Nous pouvons donc configurer un nouvel objet note en fonction son contenu, puis l'ajouter à notre tableau de notes qui est dans l'état. Nous pourrions le faire en utilisant des paramètres. 82. Action (avec les paramètres) - Ajouter une note: Nous devons transmettre le nouveau contenu des notes depuis la vue des points vue des notes à notre nouvelle action Ajouter des notes qui se trouve dans notre boutique, avant de pouvoir configurer de nouveaux objets de note et l'ajouter à ce tableau de notes dans notre état. Nous pouvons transmettre des paramètres à des actions autant de paramètres que nous le voulons, comme nous le pouvons avec n'importe quelle fonction en JavaScript. Revenons donc à la vue Afficher l'arrêt de note. Et notre nouveau contenu de note se trouve dans cette nouvelle note href, qui est liée à cette zone de texte. Lorsque nous déclenchons notre action ici, nous pouvons simplement stocker des notes pour ajouter des notes, puis transmettre nouvelle valeur de point de note, et l'enregistrer. Maintenant, si nous revenons à nos notes de magasin point js sur cette note oxygène, nous pouvons recevoir ce paramètre ici. Nous pouvons lui donner n'importe quel nom que nous voulons, pour que nous puissions l'appeler nouveau contenu. Assurez-vous que c'est bien le cas. Nous allons juste le déconnecter ici. Donc, lorsque vous notez du contenu, enregistrez-le, rechargez-le. Cliquez sur le bouton. Oui, ça marche. Nous pouvons voir que notre action est de déconnecter la note que nous venons de taper. Il suffit maintenant de configurer un nouvel objet note comme celui-ci avec un ID sur une propriété de concept , puis de l'ajouter à ces notes déjà dans notre état. Revenons donc à voir les notes qui ne sont pas affichées. Et appelons ce code que nous avons commenté. Gardez ça. Et nous allons coller cela dans notre action ici. Supprimez les commentaires, corrigez l'indentation et nous allons devoir modifier un peu cela. Donc, cette ligne est toujours bonne. Cela va toujours avoir la date actuelle sur cette ligne. Il va simplement convertir cet horodatage en chaîne et l'attribuer à cette variable d'ID. Laissez-moi m'occuper de vos notes. Les objets étaient déjà en train de configurer notre ID. C'est très bien. Mais lorsque nous définissons la propriété du concept, nous ne voulons plus la récupérer à partir de nouvelles valeurs de points de notes. Nous voulons saisir à partir de ce paramètre que nous transmettons de nouveaux contenus de notes. Copions ça, collons ça ici. Ensuite, lorsque nous décalons ces nouveaux objets notes vers notre tableau de notes, nous voulons maintenant le pousser vers le tableau de notes qui est dans notre état. Nous pouvons accéder aux propriétés des données dans notre état intérieur et à l'oxygène à l'aide de ce mot-clé. Un peu comme nous l'avons fait dans l'API Options pour accéder à notre tableau de notes, qui s'appelle simplement notes. Nous pouvons simplement faire ces notes de points. Ensuite, nous voulons décaler ces objets notes dans ce tableau. Nous pouvons donc simplement faire ces notes de points sur le décalage, parenthèses, la note, et nous pouvons maintenant nous débarrasser de cette ligne. Et gardons cela et voyons si cela fonctionne. Saisissez une nouvelle note. Cliquez sur le bouton. Oui, ça marche. Nous le voyons ajouté à la page dans nos outils de développement. Nous pouvons dire qu'il a été ajouté à nos notes ou écrit dans notre état ici également. 83. Action - Supprimer une note: Configurons une action dans notre magasin d'opinion pour supprimer un nœud. Et notre bouton Supprimer se trouve dans notre composant Note. En vue des notes de composants ou des points de note. Disons ce qui se passe actuellement avec cette fonctionnalité de suppression. Sur ce bouton de suppression ici, nous avons ce gestionnaire de clics qui va déclencher cette méthode locale gérée supprimer les clips. Cette méthode est ici. Et puis, à l'intérieur, nous émettons un événement personnalisé appelé supprimer des clips. Je transmets l'ID des notes que nous voulons supprimer. Ensuite, dans le composant parent indique la vue par points, le défilement jusqu'au composant notes. Nous sommes à l'écoute de cet événement lorsque nous le recevons, qui augmente cette méthode de suppression de note. Avec cela, la suppression de la note du tableau en fonction de cette idée que nous transmettons ces notes locales ou huit n'existent plus ici. Cela ne va pas fonctionner de toute façon pour le moment. Mais de toute façon, une fois que nous commençons utiliser la gestion de l'état dans notre application, que ce soit via composable, UX ou centime ou comme nous l'utilisons. Nous n'avons pas à nous soucier de l'émission d' événements personnalisés depuis des composants enfants vers une paire de composants, puis d'écouter ces événements avant de déclencher une méthode. Parce que rappelez-vous que tous les composants de notre application, quelle que soit leur profondeur, ont accès à tout ce qui se trouve dans notre boutique, y compris tout ce qui se trouve dans notre état et toutes nos actions. Configurons une nouvelle action Supprimer les notes dans notre boutique et la déclencher directement en mode point Node sans avoir besoin d'émettre des événements personnalisés ou d'écouter ces événements. Ok, alors passons à stocker Node.js. Et je vais simplement réduire cette vente aux enchères de notes en virgule et ajouter une nouvelle action appelée Supprimer les notes. Pour supprimer la note des notes ou écrire dans notre état, nous allons avoir besoin de l'identifiant. Nous allons donc configurer cela pour recevoir cet ID avec une variable appelée ID à supprimer. Nous allons simplement déconnecter l'ID à supprimer également. Identifiant pour supprimer et enregistrer cela. Notez maintenant la vue par points. Au lieu de déclencher cette méthode locale gérée vraiment cliquée lorsque le bouton Supprimer est cliqué, importons notre porte de Penny ici. Déclenchez cette nouvelle action, supprimez directement la note. Au lieu de cela, je vais sauter pour voir les notes point Vue. Copiez cette ligne là où nous importons notre boutique. Collez cela en haut de la vue de points de note dont nous avons besoin pour accéder à notre boutique, comme nous l'avons fait dans la vue des points de notes en affectant notre magasin à une constante. Je vais donc copier ce commentaire sur le code également à partir de la vue des notes de vue. Et nous allons coller qu'après nos instructions sur les mythes, nous avons maintenant accès à notre boutique dans ce composant Notes point Vue, nous pouvons maintenant accéder à ce bouton Supprimer, déclencher directement cette action Supprimer la note. Nous allons nous débarrasser de cette poignée supprimer l'appel de méthode cliqué, et au lieu de cela, nous allons simplement stocker des notes, Dot Delete, Note. Nous devons transmettre l'ID de note. N'oubliez pas que nous transmettons l'objet notes avec un accessoire ici. Notre numéro de note est donc disponible à l'adresse props point, point ID. Je vais simplement noter l'ID de point si nous sommes dans le modèle afin que nous puissions simplement passer dans la note J'ai sauvegardé cela. Et j'espère que notre note de suppression d'action devrait recevoir l' ID et la déconnecter. Voyons donc si cela fonctionne. Cliquez sur le bouton Supprimer. Permettez-moi de voir ID1 en lock-out. Cliquez sur l'autre. Qu'est-ce que l'ennemi ? Voir l'ID 2 en cours de verrouillage. Revenons maintenant à la vue des points et faisons un peu de rangement. Parce que nous n'avons plus besoin cette méthode de suppression des clips gérée. Nous ne l'utilisons plus. Nous n'avons plus besoin de définir suppression cliquée comme une émission car nous n'émettons plus cela, nous pouvons simplement supprimer entièrement notre code d'émission sur le commentaire. Gardez ça. Et si nous avons sauté pour voir les notes en vue par points, faites défiler jusqu'au composant note. Nous n'avons plus besoin d'écouter cet événement avec un clic différé. Nous ne l'émettons plus depuis la vue des points de note. Nous pouvons donc les enlever également. Gardez ça. Et si nous faisons défiler vers le bas, nous ne démarrons plus cette méthode de suppression de note. Je vais donc juste copier le code à l'intérieur de cette méthode, puis supprimer cette méthode sur le commentaire également. Gardez ça. Maintenant, allons stocker Node.js et nous allons coller ce code dans cette méthode de suppression de note. Nous avons juste besoin d'ajuster un peu cela. Il ne va plus filtrer la valeur nope, arrêter la valeur, puis attribuer ce tableau filtré à la valeur d'arrêt des notes. Nous voulons maintenant le faire avec ces notes déjà dans notre état. Encore une fois, nous pouvons simplement remplacer cette valeur de point Snopes. Je vais sélectionner les deux en maintenant la touche Alt enfoncée. Au lieu de cela, nous pouvons simplement faire ces notes de points. Cela va saisir toutes les notes qui sont juste le filtrer en fonction des critères ici. Et il va renvoyer toutes les notes dont l'ID de la note n' est pas égal à celui que nous transmettons ici. Ces noms de variables sont toujours les mêmes, donc je ne pense pas que nous ayons besoin d' apporter d'autres modifications. Gardons cela et nous verrons si cela fonctionne. Je vais recharger, cliquer sur le bouton Supprimer et nous pouvons voir que la note est supprimée, et nous voyons également l'objet supprimé dans nos outils de développement. Si je supprime celui-ci, nous voyons maintenant un tableau vide et nos outils de développement. 84. Modification de la page et de la route de la note: Nous pouvons maintenant créer, lire et supprimer nos notes. Nous ne pouvons actuellement pas mettre à jour nos notes. Terminons notre configuration brute. Créez, lisez la mise à jour, la suppression en créant une nouvelle page de modification de note qui nous permettra de modifier une note et de l'enregistrer. Pour cela, nous allons ajouter une nouvelle action à notre magasin d'un centime et aussi à notre premier getter. Mais pour l'instant, il suffit de configurer un nouvel itinéraire sur la page pour modifier une note. Je vais aller voir notre explorateur. Dans le dossier des vues. Je vais créer un nouveau fichier appelé View Edit note, je ne le vois pas. Nous ajouterons nos balises de modèle. Pour commencer. Je vais juste ajouter une div avec une classe d'édition, un tiret de notes à l'intérieur de beaucoup de balise H1 qui dit juste modifier les notes. Gardez ça. Et maintenant, nous devons configurer nos itinéraires. Passons donc au routeur source, index.js. Beaucoup de nouveaux itinéraires ici après l'itinéraire de quelques notes, je vais sélectionner beaucoup d'appuyer sur Alt Shift et le raccourci vers le bas pourrait être différent pour que vous puissiez dupliquer cela. Et nous allons définir le chemin pour modifier note afin de suivre cet itinéraire, pour savoir quelles notes nous allons réellement modifier la charge dans la page, puis nous devrons passer un itinéraire. paramètre de cette pièce. Pour ce faire, nous pouvons simplement pointer la barre oblique, puis deux-points, puis le nom d'un paramètre, ou nous pourrions simplement l'appeler ID. En d'autres termes, nous pourrions visiter barre oblique de modification des notes, puis nous pouvons saisir l'ID, l' ID 1 dans cette vue, puis l'utiliser pour saisir la note appropriée dans nos notes ou écrire dans notre état dans notre boutique, puis affichez les concepts de ces notes dans une zone de texte de cette page afin que nous puissions les modifier et les enregistrer. Et changeons le nom de cette route pour modifier les notes, nous devons importer un nouveau composant. Je vais donc dupliquer cette ligne d'importation de quelques notes et remplacer les notes de vue par la note d'édition de vue. Ensuite, je vais copier ce nom, voir la note de modification et le coller ici. Je vais sauver ça. Nous devrions maintenant pouvoir visiter un chemin tel que j'ai noté ID barre oblique un et obtenir deux nouvelles pages de note de modification. Nous devons maintenant pouvoir accéder à cette page sans avoir à taper dans la barre d'adresse. Raccordons ces boutons d' édition. Je vais tout fermer ici , sauf, non, je ne vois pas. Et trouvons notre bouton d'édition. Et cela va diviser cela sur nouvelles lignes, puis diviser les attributs de la balise d'ouverture. Nous pouvons simplement changer cela en composant de vue de routeur plutôt qu'en balise. Nous allons donc renommer la balise en lien routeur. Assurez-vous que la balise de fermeture est également renommée. Et nous pouvons maintenant commencer un accessoire pour lui dire où aller. Je vais utiliser une chaîne de modèle pour le faire en utilisant environ six afin que nous puissions générer l'ID. Nous voulons aller à la note d'édition oblique de chemin, que nous configurons dans notre fichier de routeur, puis barre oblique. Ensuite, nous utiliserons des accolades en dollars pour produire l'ID. Et encore une fois, nous transmettons les objets notes à ces composants de vue par points de nœud. À l'aide de ces notes prop, nous pouvons accéder aux invites ID out dot note, DID, ou dans le modèle simplement l'ID de point de note. Ici. Nous pouvons simplement mettre des notes, identifiant de points, et sauvegardons cela. Vérifiez si ces boutons Modifier fonctionnent. Cliquez sur le premier bouton d' édition et écrivez l'ID barre oblique des notes de modification du chemin. Revenez en arrière, cliquez sur le deuxième bouton d'édition. Maintenant, sur le chemin d'édition de note oblique id2, nous pouvons accéder à ce paramètre d'itinéraire que nous avons nommé dans notre fichier de routeur ici dans notre modèle en utilisant les objets de route dollar, que nous pourrions également utiliser les options API. Il suffit donc de recracher cet ID de paramètre d'itinéraire sur la page et de voir si cela fonctionne. Nous voulons donc ouvrir notre nouveau composant View edit notes. Donc, les vues source, affichez les notes de modification. Et modifions ce titre pour modifier les notes avec un identifiant d'accolades doubles courbées normales. Accédez aux informations de notre itinéraire. Nous pouvons ajouter l'itinéraire dollar et ensuite pour accéder à nos paramètres d' itinéraires, nous pouvons faire des paramètres de points, puis pour accéder au paramètre ID que nous avons configuré ici, nous pouvons simplement faire l'ID point. J'espère donc que cela crachera sur la carte d' identité de la note sur la page. Maintenant, gardons ça. Rechargez. Et pourtant, si nous sommes sur le chemin d'édition nope barre oblique id2, nous voyons id2 sur la page. Si nous cliquons sur le premier bouton de modification, permettez-moi d'accéder au chemin d' édition des notes obliques ID un. Nous voyons maintenant ID1 sur la page. 85. Composant réutilisable - AddEditNote: Ok, ce dont nous aurons réellement besoin cette nouvelle vue de note de modification que nous avons créée dans cette nouvelle vue de note de modification que nous avons créée pour modifier une note et l'enregistrer. En gros, nous avons besoin d' une zone de texte dans laquelle nous pouvons charger la note et permettre à l'utilisateur de la modifier. Et nous avons besoin d'un bouton d'enregistrement pour que l'utilisateur puisse l'enregistrer. En gros, ce dont nous avons besoin, c'est que si nous revenons exactement ce que nous avons en haut de la vue des notes ici, nous avons juste besoin d'une zone de texte et d'un bouton. Maintenant, nous pouvions simplement passer à la vue des notes. Dans les vues source, affichez les notes. Nous pouvions simplement copier cet élément de carte et tous les champs qu'il contient. Collez cela dans la vue, modifiez la vue point de note, puis réutilisez-la. Eh bien, nous serions en train de dupliquer du code. Nous voulons toujours éviter de dupliquer le code autant que possible. Il est donc plus logique de créer un composant réutilisable à partir de cette carte, la zone de texte et du beurré que nous pouvons utiliser n'importe où dans notre application. Passons à notre explorateur dans notre dossier de notes. Créons un nouveau fichier appelé Edit note dot view. Parce que nous allons pouvoir ajouter et modifier une note à l'aide de ce composant. Ajoutons nos balises de modèle. Maintenant, voyons les notes point Vue va copier cette maquette, cette div avec une classe de carte. Tous les éléments qu'il contient copieront ça, colleront dans notre modèle ici dans notre nouveau composant. Supprimons tous les éléments dynamiques qui vont casser ici. Supprimons donc ce modèle V de la zone de texte et supprimons ce gestionnaire de clics sur l'accessoire désactivé des puces touchées. Gardez ça. Nous voulons maintenant pouvoir contrôler les boutons qui s'affichent ici. Parce que sur notre page de notes, nous voulons que cela soit supprimé, de nouveaux blocs-notes entrent, mais sur la page d'édition, nous voulons probablement un bouton qui indique Enregistrer ou enregistrer une note ou quelque chose du genre. Nous voudrions peut-être également pouvoir ajouter plusieurs boutons. Créons donc un emplacement ici où nous pouvons insérer le bouton d'édition que nous voulons. Je vais juste chercher Ableton. Au lieu de cela, nous ajouterons un slot, ferons de cela un emplacement nommé. Donc beaucoup de nom, d' attribut et de définir cela sur des boutons. Gardez ça. Maintenant, utilisons ce nouveau composant dans notre vue des notes et faisons en sorte que tout fonctionne avant l'utiliser sur notre nouvelle page d'édition. Allons voir les notes en vue de points. Je vais importer ce composant que nous venons de créer. Après nos notes. Je vais dupliquer cette ligne. Et lorsque vous allez dans Importer, ajouter, modifier une note à partir de composants barre oblique, notes obliques, ajouter, modifier des notes, point Vue. Gardez ça. Défilons maintenant vers le haut. Je vais commenter tous ces éléments de carte. Les sorties sont alors un nouveau composant. Modifiez, notez, enregistrez cela. Nous voyons la zone de texte, mais nous ne voyons pas le bouton. Nous devons passer le bouton dans notre emplacement. Dans ce composant Ajouter une note de modification, nous pouvons ajouter une balise de modèle. Nous pouvons soit ajouter des fentes de tiret v, boutons deux-points, qui est le nom de la fente que nous avons configurée sur Add Edit note dot view ici. Nous pouvons le montrer en faisant simplement boutons de hachage et nous pouvons maintenant y placer des objets. Prenons donc ça dans une maquette que nous avons commentée. Le bouton est donc là. Je vais copier ça. Collez-le ici. Gardez ça. Tout semble bien maintenant. Mais cela ne fonctionne pas car cette zone de texte, qui provient maintenant de notre nouveau composant réutilisable, n'est plus cette nouvelle référence de note dans notre section scripts. Allons arranger ça ensuite. 86. Branchez avec modelValue: Cette zone de texte sur le bouton ne fonctionne plus. Et c'est parce que cette zone de texte, qui se trouve dans notre nouveau composant enfant lors de l'édition du point de note Vue, n'est plus reliée à cette nouvelle référence de note que nous avons configurée dans ce composant de notes de vue. Eh bien, ce que nous pouvons faire, c'est transmettre cette nouvelle référence de note à Edit note child composant à l'aide du modèle V. Ensuite, nous pouvons tout brancher à l'aide la valeur modale et mettre à jour la valeur modale. Définissons donc d'abord le modèle V, ce composant Add Edit note sur une nouvelle note, qui était initialement liée à la zone de texte. Nous pouvons ajouter une directive de modèle V et la définir sur de nouvelles notes et l'enregistrer. Et nous pouvons maintenant recevoir la valeur de ce modèle V dans notre composant de note d'édition l'aide de la valeur modale spéciale prop, puis nous combinons la prop à cette zone de texte. Vous souvenez-vous de la façon dont nous faisons cela ? N'hésitez pas à mettre en pause la vidéo et à l'essayer. Ce que nous devons faire, c'est ajouter nos balises de configuration de script. Nous devons recevoir la valeur de ce modèle V à l'aide de la valeur de modèle prop. Nous devons donc configurer nos accessoires. Pour ce faire, nous ajoutons une constante appelée props qui est égale à la méthode define props. Et nous pouvons passer nos instructions ici. Nous voulons recevoir la valeur du modèle prop type va être chaîne. Cela va être nécessaire. Nous allons donc définir requis sur vrai. Gardez ça. Et nous pouvons maintenant lier cette valeur modale à la zone de texte. Nous pourrions le faire en réglant simplement le modèle V sur le volume du modèle. Je vais sauver ça. Pour vérifier que cela fonctionne. Notons que je vais modifier la valeur par défaut de cette nouvelle référence de note qui est ici. Je vais donc coller du texte là-dedans, sauf ça. Nous pouvons dire que le texte passe dans la zone de texte de notre nouveau composant réutilisable. Cependant, si nous sortons ces nouvelles notes grossières quelque part sur notre page. Disons donc que nous avions une pré-balise après cet ajout de composant de modification nope. Et nous venons de sortir une nouvelle note. Gardez ça, rechargez. Ensuite, nous modifions la zone de texte. Nous pouvons dire que la valeur de cette nouvelle référence de note n'est pas mise à jour. Et donc, ce que nous devons faire sur le nouveau composant enfant sortir la vue de points de note, c'est explicitement indiquer au composant parent si vous notez arrêter la vue lorsque la valeur dans la zone de texte a changé afin qu'il puisse mettez à jour la valeur. Cette nouvelle note hréf. Nous pouvons le faire en utilisant la valeur du modèle de mise à jour. Passons donc pour ajouter une vue de points de note de modification. Vous souvenez-vous de la façon dont nous faisons cela ? Encore une fois, n'hésitez pas à faire une pause et à essayer de le faire vous-même. Mais ce que nous devons faire dans cette configuration, nos mitaines créent une constante appelée emit, définissent comme la méthode define emits. Et nous pouvons transmettre nos événements imitables dans ce tableau d'émissions défini. Et nous voulons ajouter la valeur du modèle deux-points des mises à jour des événements. Il s'agit d'un événement spécial qui nous permettra modifier directement une valeur provenant du composant parent par modèle V sans avoir à émettre d'événements à partir du composant enfant et écoutez ces événements, puis apportez le changement. mise à jour de la valeur modale nous permet donc de modifier cette nouvelle note, href, qui se trouve sur son composant parent. Revenons donc à ça. Pas de vue à point. Et ce que nous pouvons faire ici, c'est écouter l'événement d'entrée sur cette zone de texte, qui sera déclenché chaque fois que nous modifierons cette zone de texte. Nous pouvons donc simplement additionner les intrants. Ce que nous voulons faire, c'est émettre. Avec dollar émet. Nous voulons émettre l'événement de valeur de modèle deux-points de mise à jour. Et nous devons transmettre la valeur que nous voulons définir pour définir la valeur transmise avec le modèle V sur le composant parent comme deuxième paramètre. Et nous pouvons donc simplement régler cela sur le volume du modèle. Gardez ça. Voyons si cela fonctionne. Rechargez cette page, modifiez la valeur de la zone de texte. Oui, nous pouvons voir ce préexposé sur le composant View Notes Point Vue est en cours de mise à jour. Nous savons donc que cette nouvelle note grossière sur le composant parent est mise à jour avec succès par le composant enfant lors de la mise à jour du point de note en écoutant l'événement d'entrée sur le texte. émettant la valeur du modèle de mise à jour en émettant la valeur du modèle de mise à jour de la valeur la plus récente, qui mettra directement à jour la valeur des nouvelles notes du modèle V, que nous transmettons ici. Avant de passer à autre chose, supprimons ce préexposé que nous avons ajouté sur tout ce code que nous avons commenté. Débarrasse-toi de ça. Nous devons également redéfinir la valeur par défaut de la nouvelle note sur une chaîne vide. Gardez ça, rechargez. Nous allons nous assurer que tout fonctionne. J'ai donc mis une nouvelle note, clique sur le bouton, et la nouvelle note a été ajoutée. Cependant, nous constatons une erreur dans notre console ne peut pas lire les propriétés du focus de lecture nul. Et c'est parce que dans cette ligne ici, après avoir ajouté une nouvelle note en envoyant la note constante à notre action de note d'application dans notre boutique, nous essayons de concentrer un élément qui a un modèle href de nouvelle note réf. Cette href n' existe plus sur ce composant. Ce modèle Req est maintenant en bas dans le composant enfant à la vue Modifier le point de note ici. C'est pourquoi cette zone de texte ne se concentre pas après avoir ajouté une nouvelle note, et c'est pourquoi nous constatons cette erreur. Allons arranger ça ensuite. 87. Réalisez la concentration: Lorsque nous saisissons une nouvelle note, cliquez sur le bouton Ajouter une nouvelle note. Nous pouvons voir que les notes sont ajoutées à notre liste et ajouter à notre magasin d'opinions pour que les notes soient directement dans l'état. Cependant, la zone de texte n'est pas refocalisée et cette erreur apparaît dans la console ne peut pas lire les propriétés sans focus de lecture , sauf si dans la vue, les notes, la vue point après avoir ajouté les notes aux notes. sont directement dans le magasin. Nous utilisons ce modèle de référence, nouvelle note ref pour saisir l'élément de zone de texte, puis le focaliser. Eh bien, ce modèle ref, nouvelle note href n' existe plus dans ce composant de notes de vue. Supprimons donc cette constante ici, que nous avons configurée pour le modèle réf. Et supprimez également cette ligne à l' endroit où nous focalisons la zone de texte et trouvez un autre moyen de le faire. Une chose que nous pourrions faire est d'ajouter une référence de modèle au composant Ajouter une note de modification que nous affichons ici. Et utilisez cette référence de modèle pour accéder aux notes de modification impaires du composant enfant, puis lancez une méthode configurée dans le composant Add Edit No.2. Ajoutons une référence à ce composant. Et nous allons l'appeler ajouter, modifier, noter, réf, enregistrer cela et nous sauterons vers le bas. Nous devons régler des données, les enregistrer également sous le même nom. Nous allons donc créer une constante appelée Edit note HREF, qui est égale à une référence de données dont la valeur initiale est NULL. Maintenant, dans notre méthode de note ici, après avoir effacé la nouvelle note ref, ceux qui effacent la zone de texte, nous pouvons accéder au composant enfant lors de l'édition note en utilisant ce modèle href, nous pouvons modifier note ref dot valeur pour accéder à ce composant. Et nous pouvons alors déclencher une méthode qui se trouve dans ce composant. Supposons donc que nous voulions déclencher une méthode appelée zone de texte Focus. Nous pouvons le faire comme ça. Nous n'avons pas encore configuré cette méthode de zone de texte de mise au point. Donc, sauvegardons cela et sautons pour ajouter la vue de points de note, configurer cette méthode. Commençons une nouvelle section ici avec un commentaire indiquant que zone de texte du focus créera cette méthode. Ainsi, const, la zone de texte focus est égale à une fonction de flèche. Pour l'instant, je vais simplement déconnecter la zone de texte du focus. Gardez ça. Voyons si cette méthode dans la zone de texte de mise au point du composant enfant est déclenchée avec succès par la vue par points des notes de vue du composant parent ici. Rechardons-nous. Cette méthode doit être déclenchée après avoir ajouté une nouvelle note. Nous allons donc taper quelques textes. Cliquez sur le bouton. Cela n'a pas fonctionné et nous constatons cette erreur. Ajouter, modifier la valeur du point de référence, la zone de texte focalisée sur les points n' est pas une fonction. Il n'est pas en mesure de trouver cette fonction que nous venons de configurer dans le composant enfant. Et c'est parce que lorsque nous utilisons le modèle de configuration de script, nous devons exposer toutes les méthodes que nous voulons mettre à la disposition d'un composant parent de composants. Pour ce faire, nous utilisons la méthode define expose et nous y transmettons un objet. Nous voulons simplement ajouter ici toutes les méthodes que nous voulions mettre à disposition de ce composant parent des composants, nous voulons rendre disponible la méthode de zone de texte de mise au point nous puissions simplement ajouter une zone de texte de mise au point ici. Alors, sauvegardons cela et voyons si cela fonctionne. En tapant une note, appuyez sur le bouton. Pourtant, cela fonctionne maintenant, nous pouvons voir zone de texte focalisée être verrouillée. Par conséquent, notre composant parent, remarquez-vous que la vue par points déclenche avec succès cette méthode de zone de texte de mise au point sur son composant enfant pour modifier la vue des points de note. Donc maintenant, tout ce que nous avons à faire pour focaliser cette zone de texte est d'ajouter une autre référence de modèle à cette zone de texte, puis de l' utiliser pour la mettre au point ici, faisons défiler jusqu'à l'élément de zone de texte. Dans cette zone de texte, il y a encore un toit avant cette nouvelle note réf bien, cette zone de texte n'est plus réservée aux nouvelles notes. Il sera également utile d'éditer des notes. Renommons cela en zone de texte href, qui est un peu plus générique, et nous utiliserons ce href pour focaliser la zone de texte. Passons à notre méthode de zone de texte de mise au point. Nous devons également configurer une référence de données pour ce modèle grossière portant le même nom. Nous voulons donc faire de la zone de texte const HREF, définir cette valeur égale à un brut avec une valeur initiale de null. Vérifions simplement si nous importons méthode ref depuis la vue et que ce n'est pas le cas. Il suffit d'ajouter une section de saisie en haut. Je vais importer de vue, revenir à notre méthode. Maintenant, pour accéder à l'élément de zone de texte, nous pouvons simplement faire une valeur de point de référence de zone de texte. Et ensuite, pour le concentrer, nous pouvons simplement lancer la méthode de mise au point. Alors concentrez-vous, dites cela et j'espère que cela devrait fonctionner maintenant, tapez et notez, appuyez sur le bouton. Oui, ça a marché. Nous avons ajouté la nouvelle note. Nous pouvons le voir sur la page et nous avons également effacé la zone de texte, sans la focaliser également. 88. Éléments de couleur, de placard et de étiquette personnalisés.: Ajoutons un nouveau composant réutilisable mode Edit nope dot à notre nouvelle page de modification de note. Je vais afficher les notes où nous utilisons actuellement le composant Ajouter une note de modification. Et je vais juste copier cette fermeture qui a sauté à la nouvelle vue, voir modifier la vue nope point. Et nous allons coller ça à l'intérieur de cette div. Et supprimons tout le contenu dynamique pour l'instant. Je vais donc supprimer le modèle V, supprimer le gestionnaire de clics ou l' attribut désactivé, enregistrer cela. Nous devons maintenant importer ce composant avant de pouvoir l'utiliser. Ajoutons nos balises de configuration de script. Ajoutez notre section d'entrées, et nous saisirons l'édition, note à partir des composants de barre oblique, notes obliques, l'ajout, édition, la note, le point Vue, enregistrez cela. Nous pouvons maintenant voir ce composant sur la page. Je vois un avertissement dans la console ici. Il me manque la valeur de modèle de prop requise. Et c'est parce que ce composant permettant de modifier la vue des points de note attend la valeur modale prop ou la prop du modèle V, ce qui est défini sur une prop requise. Configurons une vue approximative sur Q edit note dot que nous pouvons lier à ce composant de note d'édition dans notre section scripts, beaucoup de nouveaux commentaires qui indiquent Note. Nous allons configurer une référence appelée contenu de note. Définissez cela comme égal à un href avec la valeur initiale d' une chaîne vide, car nous utilisons la méthode ref, nous devons l'importer. Nous allons donc importer une référence depuis la vue. Et maintenant, nous pouvons lier ce radeau à notre composant Ajouter une note de modification. Nous pouvons maintenant ajouter un modèle V. N'oubliez pas qu'il suffit ajouter le modèle V, car nous avons déjà configuré ce composant de note d'édition publicitaire pour extraire automatiquement le modèle V que nous transmettons dans ce composant à l'aide de la valeur modale prop, et mettez automatiquement à jour le modèle V, qui se trouve sur la paire de composants à l'aide des événements de valeur de modèle de mise à jour. Donc, tout ce que nous devons faire maintenant pour espérer savonner, c'est simplement lier ce concept de note ref à ce composant. Nous allons donc définir ce modèle V pour noter le contenu et le sauvegarder. Et nous allons juste nous assurer que c'est branché. Je vais mettre du texte ici. Nous pouvons voir la mise à jour sur la zone de texte. Remettons cela à une chaîne vide et sauvegardons cela. Changeons le texte de ce bouton ici va changer ce texte pour dire note, sauvegardez-le. Maintenant, j'aimerais que cette carte qui entoure notre zone de texte dans le bouton ait une couleur différente lorsque nous sommes sur la page d'édition. Il est donc un peu différent de la zone de texte de la carte et du bouton qui se trouvent sur la page des notes. Si nous ouvrons notre composant réutilisable modifier la vue des points de note, nous pouvons voir que cette classe sur la carte a un succès en arrière-plan. Nous pouvons changer ce mot succès pour créer différentes couleurs. Par exemple, nous pouvons changer cela pour avoir lien d' arrière-plan sombre pour lui donner cette couleur bleue Configurons une prop sur ce composant Ajouter Modifier la vue points de note afin que nous puissions modifier dynamiquement ce mot ici, ceux qui changent la couleur. Je vais remettre ça au succès pour l'instant et sauver ça. Maintenant, passons à nos accessoires et nous allons installer un nouvel accessoire appelé BG color. Nous allons définir le type sur chaîne. Je vais également obtenir cette valeur par défaut. Ainsi, si nous ne fournissons pas cet accessoire sur un composant parent, nous pouvons toujours avoir une couleur d' arrière-plan sur cette carte qui définira la valeur par défaut sur le succès. Je vais sauver ça. Et maintenant, passons à cette div avec la classe de cartes. Je vais diviser les attributs là-dessus et je vais couper ce succès de fond de maison, verre foncé. Je vais me lier à l'attribut de classe. Je vais utiliser une chaîne de modèle ici en utilisant backticks afin que nous puissions générer le concept de cette prop ou coller dans classe que nous avons copiée a un succès en arrière-plan, sombre. Débarrassons simplement du mot succès et de nos accolades de dollar et produisons notre accessoire à la place de la couleur BG. Nous pouvons soit faire des accessoires couleur BG, soit nous pouvons simplement faire de la couleur VG. Je vais enregistrer ce rechargement. Et nous pouvons voir que si nous ne fournissons pas cet accessoire de couleur BG à ce composant Add Edit aucun composant lorsque nous l'utilisons sur une paire de composants, nous voyons la couleur d' arrière-plan par défaut car elle est va utiliser cette valeur par défaut dans la prop que nous avons définie ici. Mais nous devrions pouvoir remplacer ce mot succès en fournissant cette prop au composant Ajouter une note de modification lorsque nous l'utilisons dans un composant parent. Passons donc à la vue Modifier la vue de points de note. Je suis beaucoup cet accessoire à notre Add Edit. Aucun composant ici ne définira la couleur BG, et nous allons définir ce lien, sauvegardez-le. Et nous voyons maintenant ce 11 bleu. Et si nous l'inspectons, nous pouvons voir que la carte, comment cette classe a un document de lien d' arrière-plan. Mais si nous allons sur la page des notes et inspectons cette carte, nous pouvons voir que la classe a un succès en arrière-plan, sombre, la couleur de fond fonctionne. Maintenant, nous allons aussi enregistrer des notes, mais elles sont également dans le même type de couleur. Le carnet enregistré et il est ici. Changeons donc cette classe aussi, a un lien d'arrière-plan au lieu du succès. Gardez ça. Et nous avons maintenant un bouton bleu pendant que nous y sommes. Désactivons ce bouton lorsque ce champ est vide. Encore une fois, sans l'attribut désactivé manière conditionnelle, uniquement lorsque aucun contenu n'est vide. Nous allons donc définir ce paramètre pour ne pas noter le contenu. Gardez ça. Ce bouton est désactivé par défaut, mais si nous saisissons quelque chose et qu'il redevient activé, nous devons maintenant également rendre cet espace réservé dans la zone de texte personnalisable, car le texte ajouter une nouvelle note n'a pas de sens sur cette page. Parce que cette zone de texte sert à éditer une note ou à ne pas ajouter de nouvelle note. Ajoutons une autre prop, ajoutons la vue de points de note pour cet espace réservé, qui n'est actuellement que codé en dur sur la zone de texte, va configurer une nouvelle prop appelée espace réservé. Se contenter d'un type de chaîne. Nous allons donner à cela une valeur par défaut de tapez quelque chose, point, point, point, enregistrez ça. Maintenant, utilisons cet accessoire sur notre zone de texte. Nous pouvons simplement lier l'attribut de l' espace réservé puis générer cette prop, soit avec un espace réservé aux points props, soit simplement un espace réservé. Je vais enregistrer ce rechargement. Nous pouvons maintenant voir la valeur par défaut des types d'objets dans l'espace réservé, mais nous devrions maintenant pouvoir le remplacer en transmettant cet espace réservé à notre composant de note d'édition artistique lorsque Nous l'utilisons sur l' une de nos pages, Allons voir, modifier nope, vue par points. Et nous ajouterons cet espace réservé , espace réservé. Nous pourrions définir cela pour modifier, noter, enregistrer cela, et nous le disons dans la zone de texte. Maintenant, si nous revenons à notre page de notes est toujours dit, tapez certaines choses. Nous allons également passer outre cela. Nous allons donc ouvrir View notes dot Vue aura cet espace réservé ici ainsi qu' à notre composant de note d'édition artistique. Donc, l'espace réservé, presque au moins pour ajouter une nouvelle note, enregistrez-le et nous voyons cette mise à jour. J'aimerais également pouvoir afficher une étiquette en haut de notre zone de texte pour rendre la fonction de cette zone de texte un peu plus claire. Tout d'abord, il suffit de configurer le balisage pour cela. Je vais donc ajouter edit app.vue. Et en haut de notre élément de carte au-dessus de ce champ, je vais ajouter une étiquette avec une classe d'étiquettes. Pour l'instant, je vais supprimer cet attribut pour. Je vais juste régler le texte sur des textes étiquetés pour l'instant. Gardez ça. Faisons ça blanc. y a donc beaucoup de classes de textes blancs pour le rendre blanc. Encore une fois, ces cours ne proviennent que de Bohmer et je veux que ce label soit facultatif. Nous allons donc régler un autre accessoire pour cela. Nous allons configurer une prop appelée « début d'étiquette » sur un type de chaîne. Et sauvegardez ça. Et je ne souhaite afficher cet élément d'étiquette sur la page que si cet accessoire a été fourni. Je vais donc diviser les attributs là-dessus, ou nous pouvons simplement ajouter une directive v-if, et nous ne voulons l' afficher que si la prop d'étiquette a été fournie, vous pouvez soit faire v si les invites point étiqueté ou simplement vf label. Je vais donc sauvegarder cela et nous voyons que les étiquettes disparaissent puisque nous ne fournissons pas réellement cette prop étiquetée à ce composant Ajouter Modifier aucun composant lorsque nous l'utilisons sur notre page d'édition ici, si nous ajoutons ceci l'accessoire étiqueté ici, étiquette ? Nous pourrions définir ce paramètre pour modifier les notes, les enregistrer et les recharger. Nous pouvons maintenant revoir l'étiquette, puisque nous fournissons cette prop, bien qu'elle n'affiche pas la valeur que nous transmettons ici, revenons à la vue Ajouter Modifier le point de note, et nous pouvons Il suffit de sortir le contenu de cet accessoire ici. Nous pouvons simplement remplacer les textes étiquetés par des accolades doubles et étiquetés sauf cela. Et nous voyons maintenant les notes de modification. Et si nous revenons à la vue des notes et que nous ne voyons pas cette étiquette, car nous ne fournissons pas cet accessoire étiqueté sur la page Afficher les notes ici. La raison pour laquelle je pense que nous avons besoin d'une étiquette ici est que lorsque l'utilisateur clique sur les notes d'édition, il ne verra pas de zone de texte vide ici. Ils verront cette zone de texte remplie de la note. Ils ne verront donc pas cet espace réservé. Cela donnera simplement un peu plus de précisions à l'utilisateur un peu plus de précisions avant de passer à autre chose et de commencer ajouter et vous accédez à notre magasin d'opinion pour obtenir le contenu de la note que l'utilisateur est essayer de modifier. Ajoutez une action pour mettre à jour la note. Il suffit d'ajouter un bouton d' annulation ici, ce qui nous ramène à la page des notes. Depuis, il n'y a aucun moyen pour l'utilisateur de revenir à part de cliquer sur le tableau noir. Donc, ce que vous voulez voir modifier la vue des points de note à l'intérieur de notre emplacement de boutons ici, nous ajouterons simplement un autre bouton. Je vais donc dupliquer cette note enregistrée. Supprimez le désactivé, prop a changé le texte en conseil. Gardez ça. Je vais changer cette classe a un arrière-plan lié à un tableau de bord pour lui donner cette couleur gris clair. Maintenant, il existe plusieurs façons de renvoyer l'utilisateur à la page des notes lorsqu'il clique dessus. Une chose que nous pourrions faire est de convertir ce bouton en composant de lien de routeur, de définir les deux prop sur Une chose que nous pourrions faire est de convertir ce bouton en composant de lien de routeur, barre oblique, sauvegardez-le et voyez si cela fonctionne. Cela fonctionne. L'autre chose que nous pourrions faire est de laisser ce bouton en tant que bouton et d'ajouter un gestionnaire de clics à ce clic. Et nous pourrions utiliser la méthode du routeur dollar, car nous pouvons toujours utiliser la méthode du routeur dollar dans nos modèles à l'aide de l'API de composition. Donc, nous pouvons soit faire dollar routeur point, pousser, avancer slash, enregistrer, cela fonctionne. Oui, ça marche. Ou si notre application était plus compliquée et avait de nombreuses façons différentes d'accéder à cette page d'édition à partir de différentes pages auxquelles nous voudrions simplement renvoyer l'utilisateur directement et avait de nombreuses façons différentes d'accéder à cette page d'édition à partir de différentes pages auxquelles nous voudrions simplement renvoyer l'utilisateur directement. d'où qu'ils viennent. Donc pour ce faire, nous pourrions simplement faire parenthèses de points de routeur dollar, sauvegarder ce rechargement. Cela fonctionne également. 89. Getter - Obtenir le contenu de note (useRoute): Lorsque l'utilisateur clique sur ce bouton de modification qui est dirigé vers cette nouvelle page de note de modification. Et ils vont s'attendre à que le texte de la note sur laquelle ils viennent de cliquer sur ce texte soit chargé dans cette zone de texte. Et nous pouvons le faire en utilisant un getter dans notre magasin d'opinions. Ce que nous allons devoir faire, récupérer l'ID de la note actuelle à partir de nos paramètres d'itinéraire, que nous pouvons voir dans notre barre d' adresse ici, ID 1, puis envoyer l'ID à un obturateur de notre magasin, ce qui va ensuite récupérer la bonne note de mes notes sont directement dans notre boutique en fonction de l'ID. Retournez-le à ce composant d' édition de note de vue, où nous pouvons ensuite l'attribuer à ce contenu de notes href, qui est lié à la zone de texte, ceux qui remplissent la zone de texte avec les textes de la note correcte. Pour commencer, mettons simplement en place un getter très simple, qui obtient simplement le contenu de la première note de notre tableau. Allons à notre magasin de fichiers de magasin Node.js. Dans le dossier des magasins. Nous allons faire défiler vers le bas pour ajouter quelques suppositions. Nous avons juste besoin d'ajouter un objet getters. Après l'objet de cette action. Nous pouvons placer tous nos obtenteurs ici. Il s'en sort. Nous venons de commencer une propriété avec le nom du ghetto w1, ou nous pourrions l'appeler get note content. Et puis nous assignons cette propriété à une méthode comme celle-ci pour que cela arrive, je puisse avoir accès à l'État américain, nous devons passer l'état dans ce ghetto comme celui-ci. Les getters doivent toujours renvoyer quelque chose comme les propriétés calculées. Pour l'instant, retournons simplement le contenu de la première note dans le tableau de notes de notre état. Nous pouvons donc saisir cela à partir des notes de points d' état , puis des crochets 0 pour saisir le contenu du premier point de note Obtenons le contenu de ce premier nœud. Dans nos tripes. Tout ce que nous avons à faire est de renvoyer des notes de points d'état, crochets 0 pour saisir le premier, du contenu de points et de l'enregistrer. Nous devrions maintenant pouvoir utiliser ce getter n'importe où dans notre application. Nous allons donc l'utiliser sur View, Edit note dot view. Nous devons importer notre boutique. Nous devons donc importer des notes de magasin américain à partir de magasins obliques de notes obliques. Nous devons attribuer ces deux constantes pour pouvoir y accéder. Beaucoup de nouveaux commentaires qui disent magasin. Je vais configurer une constante appelée notes de magasin. Définissez ce paramètre comme égal à utiliser des parenthèses de notes de magasin. Et en fait, allons-y un peu. Je vais couper ça, le coller après nos importations. Maintenant, nous pouvons utiliser le getter dans notre boutique pour saisir ce concept de la première note et l'attribuer à cette référence de contenu de note, qui a montré que la zone de texte était mise à jour. Pour accéder à notre ghetto. Nous pouvons simplement stocker des notes points et ensuite le nom de notre getter est obtenir du contenu des notes. Nous voulons simplement attribuer cela à cette référence de contenu de note, afin que nous puissions simplement noter que la valeur du point de contenu est égale à cela. Alors gardons cela maintenant, rechargez-les et cela ne semble pas fonctionner. Jetons un coup d'œil dans notre console, sans voir d'erreurs. Jetons un coup d'œil à notre dossier de magasin. Assurez-vous simplement que l' application est en cours d'exécution. Il l'aide si nous étions sur la page d'édition. Cliquons donc sur un bouton Modifier. Nous pouvons voir que les textes de la première note sont en cours de chargement dans cette zone de texte. Cependant, nous ne voulons pas simplement récupérer le texte du premier tableau de notes. Nous devons pouvoir récupérer le contenu des notes en fonction de l' ID de la note sur laquelle ils viennent de cliquer. Si nous cliquons sur Modifier sur le deuxième nœud, nous nous attendons à ce que le contenu de ces notes soit chargé ici. Nous pouvons saisir l'ID qui est transmis à cette page à l'aide de nos paramètres d' itinéraire que nous avons vus précédemment, afin que nous puissions le diviser dans notre modèle à l'aide de l'objet de route dollar. Après cela, ajoutez des notes de modification, j'ajouterai simplement un pré-tag, accolades doubles et ensuite des paramètres de points de route dollar. Ensuite, le nom de notre identifiant de paramètre. Nous devons transmettre cet identifiant à notre obtenteur pour que cela arrive, je puisse obtenir le contenu pour la bonne note. Toutefois, nous devons le faire dans notre section Script. Et nous pouvons accéder à nos informations d' itinéraire dans la section script à l'aide des objets dollar routes. Lorsque nous utilisons l'API de composition, nous devons utiliser les routes Vue comme nouveaux itinéraires américains composables. Supprimons donc ce prédiscours. Après cette importation ici, nous importerons itinéraire américain à partir du routeur de tableau de bord de vue. Et puis beaucoup de commentaires ici qui disent simplement routeur. Nous devons attribuer à cet utilisateur composable constante ou variable. Nous allons donc mettre en place une constante appelée itinéraires. Définissez cette valeur égale à utiliser des parenthèses d' itinéraires. Et nous pouvons maintenant accéder aux mêmes informations sur les itinéraires que nous venons de diviser avant d'utiliser cette constante d'itinéraire. Voyons simplement si nous pouvons déconnecter ce paramètre d'itinéraire, ce paramètre d'ID f. Est-ce que nous configurons ce concept de note href. Nous allons juste déconnecter console.log, router l'ID de point params, sauvegarder cela. Et pourtant, nous pouvons voir que id2 est bloqué. Et si nous revenons à la page des notes, je cliquerai sur Modifier sur la première note et ID1 est verrouillé. Comment transmettre la valeur de cet ID à getter ? 90. Getter (avec les parameters) - Obtenir le contenu de note: Comment pouvons-nous transmettre cette pièce d'identité à notre obtenteur ? Vous pourriez penser que nous pourrions simplement commencer parenthèses vers r obtient un ici et le transmettre comme ceci, router l'ID de point params , sauvegarder cela, puis sauter dans router l'ID de point params , sauvegarder cela, notre fichier de magasin, descendre à r, se lève et peut-être dépassé cela. en tant que deuxième paramètre. Nous voyons que cela ne fonctionne pas. Nous voyons une erreur dans la console. notes volées ne reçoivent pas de contenu n'est pas une fonction. En effet, ce getter n'est pas une fonction, il s'agit simplement d'une propriété d'objet ainsi affectée à une fonction. Ce que nous pouvons contourner cela en réalisant obtient un retour, une fonction avec le paramètre que nous passons. Débarrassons-nous de ce paramètre ID et débarrassons de cette ligne de retour. Ce que nous pouvons faire, c'est simplement renvoyer une fonction de flèche comme celle-ci. Passez le paramètre ici. Voyons donc si nous pouvons verrouiller ça maintenant. Console consigne le lot de l'ID de chaîne du deux-points Geta , puis divisera ce paramètre d'ID. Je vais donc sauvegarder cette recharge. Nous pouvons voir que c'est l' ID de l'obtenteur ID 1. Nous voyons un avertissement ici, mais ne vous inquiétez pas. C'est simplement parce que getter renvoie une fonction en ce moment ou non une chaîne. Nous attribuons qu'à ce contenu de note href, qui est transmis pour ajouter une note d' édition dans le modèle V, la valeur de modèle prop ce composant attend une chaîne. Nous verrons donc cela disparaître quand nous arriverons au travail ici. Revenons à stocker Node.js. Et maintenant, nous pouvons utiliser cet ID pour récupérer la note correcte sur cette propriété de contenu à partir du tableau de notes qui se trouve dans notre état. Nous pouvons donc utiliser un filtre pour ce faire. Dans cette méthode ici, nous allons renvoyer les notes sont correctes, alors indiquez les notes de points. Mais ensuite, nous allons le filtrer avec la méthode du filtre. Allons-y un peu. Cela va parcourir chaque élément de notre tableau. Nous allons avoir besoin d' un espace réservé pour chaque élément au fur et à mesure qu'il se déroule. Nous allons donc utiliser la note pour cela. Ensuite, nous ajoutons une autre flèche. Les gens doivent spécifier nos critères pour les notes que nous voulons saisir. Et nous voulons rogner les notes où la propriété ID est égale à la propriété ID que nous transmettons ici à partir de notre page de modification de note, nous voulons renvoyer des notes dont l'ID est égal à ID. Puisque tous nos identifiants seront uniques, cela retournera un tableau contenant juste un objet que nous recherchons. Puisque ce sera un tableau, nous devons saisir le premier et le seul élément du tableau en ajoutant des crochets 0. Et puis, à partir de là, nous voulons abandonner la propriété du concept afin que nous puissions simplement faire du contenu de points. Sauvegardons cela et voyons si cela fonctionne. Rechargez la page. Je n'ai pas remarqué la barre oblique. Et nous voyons le concept à partir notes portant l'ID 1. Et si nous revenons à la page des notes, cliquez sur Modifier sur la deuxième note, puis nous voyons le contenu de la deuxième note avec id2 en cours de chargement dans la zone de texte. 91. Action - Note de mise à jour: Lorsque l'utilisateur modifie cette note et qu'il clique sur Enregistrer, nous voulons mettre à jour la propriété concept de la note correcte dans notre état avec le nouveau contenu qu'il a saisi. Tout d'abord, il suffit de déclencher une méthode locale. Lorsque nous cliquons sur le bouton Enregistrer, je vais afficher la note d'édition point Vue, en supprimant ce journal de console ici. Allons jusqu'à nos carnets sauvegardés dans une cellule animale. Aller ajouter un peu de marge entre ces boutons est en fait sur le bouton de la console autorisé. Trois, disons peut-être deux. Et c'est un peu mieux. Ajoutons maintenant un gestionnaire de clics à ces blocs-notes enregistrés dans. Par conséquent, le clic est égal à déclencher une méthode appelée handle save cliqué. Et allons créer cette méthode. Beaucoup de nouveau commentaire ici qui dit Enregistrer a cliqué, configure notre méthode handle save clicked sub I égal à une fonction flèche. Il suffit de déconnecter. Gérez l'enregistrement, cliquez pour l'instant, enregistrez-le, cliquez sur le bouton. Nous pouvons voir que c'est en lock-out. Nous allons déclencher une action dans notre boutique à ce stade pour mettre à jour les notes et les notes sont en bon état. Quelles informations cette action va-t-elle avoir besoin pour y parvenir ? Eh bien, il va falloir l'ID de la note pour que nous puissions déterminer quelles notes du tableau doivent réellement être mises à jour. Et il va également avoir besoin la nouvelle chaîne de contenu. Il existe donc plusieurs façons de transmettre ces informations à une action dans notre magasin. Nous pourrions donc créer un objet. On pourrait appeler ça une charge utile ou quelque chose comme ça. Nous pourrions ajouter quelques propriétés à cet identifiant, que nous pouvons obtenir de nouveau de nos promesses d'itinéraire. Par conséquent, route l'ID de point params, puis une propriété de concept que nous pouvons simplement extraire de cette note content href, qui est liée à la zone de texte. Notez donc la valeur du point de contenu. Ensuite, nous pourrions simplement passer toute cette charge utile en un seul paramètre à une action remplie d'UX. C'était le seul moyen de le faire, car les actions de l'UX ne peuvent accepter qu'un seul paramètre. Cependant, les élections au Kenya peuvent en réalité accepter plusieurs paramètres. L'autre moyen de le faire consiste donc à envoyer l'ID sur le contenu sous la forme de deux paramètres distincts. Dans ce cas, je pense que nous devrions le faire façon, car cela rendra notre action un peu plus claire, car nous pourrons dire exactement ce qui est passé ici. Configurons donc cette option pour créer une nouvelle action appelée Date du livre. Notez que cela va recevoir un paramètre ID, le paramètre de contenu r. Il suffit de les verrouiller. Je vais me déconnecter. Ensuite, nous allons également déconnecter le paramètre de concept. Gardez ça. Maintenant, déclenchons l'oxygène ici et notre action sera de voler des notes, des points, des mises à jour, des notes, parce que c'est le nom que nous avons donné notre action ici. Et cela va s'attendre à un paramètre ID sur le paramètre de concept. Donc, l'ID que nous allons supprimer de nos paramètres d'itinéraire, les itinéraires arrêtent l'ID de point de Ram. Et puis le concept que nous allons simplement extraire de cette note content href, qui est lié à la zone de texte. Nous pouvons donc obtenir cela à partir de la valeur du point de contenu de note. Maintenant, sauvegardons cela et voyons si ces deux paramètres sont en train de passer à cette action. Rechargez, modifiez le contenu, cliquez sur Enregistrer. Et pourtant, nous pouvons voir ceux qui sont bloqués par notre action. Vous pouvez également voir que l'identifiant est verrouillé sur le contenu mis à jour en cours de verrouillage. Il suffit maintenant de mettre à jour les bonnes notes dans notre état. L'une des façons de le faire consiste déterminer d' abord l'index ou la position des notes dans notre tableau en utilisant la méthode find index. Ensuite, nous pouvons simplement mettre à jour les notes à notre droite à cette position et mettre à jour la propriété content. Tout d'abord, prenons simplement l'index des notes que nous voulons mettre à jour. Je vais donc configurer une variable appelée index. Et puis nous allons lancer la méthode de l'index de liaison sur nos notes sont correctes. Et nous pouvons accéder à notre tableau de notes à ce point. Nous pouvons donc faire ce point notes, trouver des points, indexer. Et encore une fois, nous utiliserons les notes comme espace réservé car ils parcourent notre tableau en boucle. Définissez cela comme égal à une fonction de flèche. Et nous voulons renvoyer l' index de la note où l'ID de la note est égal à l'idée que nous passons à cette action égale à Id. Et en fait je pense qu'on peut juste lui tirer ça en enlevant ces accolades bouclées et le mot retour. Voyons simplement si cela fonctionne. De plus, je ferai la même chose à ce filtre ici, peux le montrer en supprimant les parenthèses, revenant sur ces parenthèses fermantes, puisque nous ne tirons qu'une seule ligne ici. Déconnectons donc cet index et voyons si cela fonctionne. Index. Enregistrez cela, rechargez la page et modifiez-la et cliquez sur Enregistrer. Nous pouvons voir que l'index est, est défini sur un ici, ce qui est exact car c'est notre deuxième note. Si nous revenons à la première note, effectuez une modification et cliquez sur Enregistrer. Permettez-moi de voir l'index 0 en cours de déconnexion. Bon, maintenant que nous avons l'index des notes que nous voulons mettre à jour et notre tableau de notes, nous pouvons maintenant mettre à jour la note. Défilons donc vers le bas jusqu' à notre action de mise à jour. Je vais me débarrasser de ces console.logs, notes d'accès, tableau. Nous pouvons simplement faire ces notes de points. Et ensuite, pour accéder aux notes à la position de l'index, nous pouvons simplement faire un index entre crochets. Ensuite, nous voulons accéder à la propriété concept et définir sur ce contenu que nous passons à cette action. Définissez donc cette valeur égale au contenu et supprimez ce journal de console. Voyons si cela fonctionne. Je vais donc recharger, changer un nouveau concept. Cliquez sur Enregistrer. Maintenant, si nous cliquons sur Annuler, nous pouvons voir que la première note a été mise à jour avec le nouveau contenu. Assurez-vous que cela fonctionne également sur la deuxième note, cliquez sur modifier un nouveau contenu, cliquez sur Enregistrer, cliquez sur Annuler. Ce nœud a également été mis à jour. Toutefois, lorsque l'utilisateur clique sur Enregistrer sur ce bouton, nous ne voulons pas les laisser sur cette page. Nous voulons vraiment les rediriger vers la page des notes. Faisons-le ensuite. Mais avant de passer à autre chose, je viens de réaliser qu'il y a une autre déclaration de retour que nous pouvons raccourcir. Je vais supprimer cette accolade bouclée dans notre action de suppression de note au retour. Et je ne retire pas non plus l'attelle bouclée de fermeture. Jetons un coup d' œil à l'étrange note. Celui-là va bien tel qu'il est. Sauvons ça. 92. useRouter - Rediriger vers la page Notes: Redirigeons l'utilisateur vers la vue des notes. Une fois que cette note a été enregistrée. Passons à la vue Modifier la vue de points de note. Nous devons le faire dans notre section de script. Après cette ligne. Dans l' API Options, nous pourrions simplement faire ce routeur à points dollar. Ensuite, ne les poussez pas et ne les poussez pas à la barre oblique. Dans l'API de composition, cela ne fonctionnera pas. Débarrasse-toi de ça. Et nous devons importer le routeur américain composable depuis Vue Router. Allons jusqu'au sommet ici où nous importons l'itinéraire d'utilisation. Nous pouvons simplement commencer à utiliser un routeur que nous devons attribuer à cela une constante avant de pouvoir l'utiliser. que nous puissions le faire après avoir configuré, j'utiliserai l'itinéraire constant. Nous pouvons simplement faire une const, utiliser. Const routes est égal à utiliser le routeur. Nous pouvons maintenant accéder à tous les itinéraires habituels. Ainsi, des méthodes telles que Porsche et remplacent en utilisant cette constante. Donc maintenant vers le bas pour gérer la méthode cliquée enregistrée. Après avoir mis à jour la note, nous pouvons simplement faire une poussée par point de routeur, les repoussera à la page des notes, qui se trouve à la barre oblique du chemin. Sauvegardons cela et voyons si cela fonctionne. Rechargez la page, changez, le contenu peut économiser sur, mais nous sommes de retour sur la liste des notes. Nous pouvons dire qu'un nœud a été mis à jour. 93. Plus de page Getters et de stats: Pour démontrer davantage que notre magasin d'opinions, store Node.js peut être utilisé n'importe où dans notre application. Créons une nouvelle page, une page Stats, dont nous avons déjà configuré une page sur un itinéraire pour cela. Sur cette page, affichons un tableau qui affiche des informations sur nos notes. Nous allons afficher le nombre total de nœuds que nous possédons ainsi que le nombre total de caractères de toutes nos notes combinées. Mais avant de configurer cette page Statistiques, j'ai remarqué que ce menu mobile ne disparaît pas lorsque nous cliquons pour accéder à une nouvelle page. Résolvons rapidement abord Assez barre s'agit-il d'une disposition des composants source et d'une barre de navigation ? Défilons vers le bas jusqu'à la section Script. Ce show mobile suffisamment ref est ce qui détermine si le menu mobile est affiché ou non . Si je passe à vrai, on peut dire que le menu mobile est affiché par défaut. Je vais remettre ça à faux. Et ce que nous pourrions faire, c'est simplement nous assurer que nous remettrons cette valeur à false chaque fois que l'un de nos liens dans le menu mobile est cliqué. Passons donc aux liens du routeur A2 ici, aux notes et aux statistiques. Et nous pouvons simplement ajouter un gestionnaire de clics aux deux. Je vais faire une sélection multiple ici. Placez mon curseur ici à côté du lien des itinéraires du mot. Maintenez la touche Alt enfoncée , puis placez un autre curseur à côté de cette balise d'ouverture de lien de routeur, appuyez sur Entrée. Je suis autorisé à cliquer sur le gestionnaire et nous allons juste remettre ce show mobile nav à false. Donc, nous pouvons simplement montrer que mobile est désormais égal à faux, enregistrer ce rechargement et j'espère que ce menu mobile disparaîtra lorsque nous changerons de pages, et c'est le cas. Nous allons donc utiliser le composant de table de Ballmer pour afficher des données sur nos notes. Nous allons tout simplement configurer le balisage pour cela, je fermerai ce module de fichiers pour demander des points, des pages vues, des vues, des statistiques, des points. Pour ajouter un tableau avec de beaux styles, il suffit d'ajouter une table normale avec une classe de table. Créons une table avec une classe de table à l'intérieur de celle-ci sans élément tête T sur notre élément de corps. Et puis dans notre élément tête en T sans rangée. Donc, TR, ligne de table. Je suis à l'intérieur de ça. Nous allons ajouter quelques cellules Th, des cellules d'en-tête de tableau. Dans le premier, je vais juste mettre le titre arrêté, dupliquer ça. Et puis dans le deuxième titre du tableau, je vais juste extraire la valeur, sauvegarder ça. Et nous pouvons maintenant voir notre ligne d'en-tête de table. Ensuite, dans notre corps, nous ajouterons une ligne de tableau à l'intérieur qui ajoutera quelques cellules de données de table TDS. Dans le premier cas, nous voulons indiquer le nom de nos statistiques. Je vais donc mettre un certain nombre de notes. Ensuite, dans la deuxième cellule, nous allons afficher le nombre réel de notes, mais pour l'instant, nous allons simplement mettre XXX et je dupliquerai cette ligne de tableau, puis je suivrai le nom. Je vais mettre le nombre de caractères, parenthèses de toutes les notes. Disons que pour rendre cette table pleine largeur, nous pouvons simplement ajouter une classe à la table de est pointillée pleine largeur de tiret. Ce n'est qu'une autre ancienne classe, disons, mais en fait, je pense que la pleine largeur est un mot. Débarrassez-vous de ce tableau de bord, sauvegardons ça. Et nous avons maintenant une table assez décente où nous pouvons afficher ces statistiques. Commençons par configurer un getter pour afficher le nombre de notes ici. Passons donc à nos magasins de sources de fichiers de magasin volé des notes dot js, sautons à nos getters à une virgule et ajoutons un nouveau Get up. Nous pourrions donc appeler ce nombre total de notes égal à une fonction de flèche, passer dans l'état. Nous voulons renvoyer le nombre total de notes dans nos notes directement dans notre état. Ainsi, pour accéder au tableau de notes, nous pouvons faire des notes de points d'état. Nous pouvons donc simplement renvoyer des notes de points d'état. Ensuite, pour obtenir le nombre d'éléments du tableau ou la longueur du tableau, nous pouvons simplement faire la longueur des points. Gardez ça. Revenons à la vue par points View Stats. Nous devons maintenant importer notre boutique. Définissons donc nos balises de configuration de script à un commentaire qui indique les entrées. Et nous allons importer des notes de magasin américaines à partir de notes obliques de magasin oblique que nous devons attribuer à une constante. Super, un autre commentaire ici sous start const, notes de magasin sont égales à utiliser des notes de magasin. Nous devrions maintenant pouvoir utiliser notre getter. Remplacons donc ce premier XXX après le nombre de notes par des accolades doubles et stockons les notes. Comment avons-nous appelé cela ? Nombre total de notes. Par conséquent, les notes totales de notes comptent toujours. Enregistrez cela, et nous voyons maintenant cette mise à jour vers deux. Et nous avons deux notes. Si nous ajoutons une autre note, peut-être quelques autres. Revenez à la page des statistiques. Cela dit maintenant : « Pour, vous pouvez voir que nous pouvons facilement utiliser tout ce qui se trouve dans notre boutique, n'importe où dans notre application , toutes les données de notre boutique et tous les résultats de nos obtenteurs. sont toujours à jour en temps réel, quel que soit l' endroit où nous allons dans notre application. Maintenant, cela met en place un autre getter pour saisir le nombre de caractères de toutes les notes. Je ne suis pas sûr que le nombre de caractères change cela. Allons à nouveau dans notre magasin, ajoutons un nouveau getter, et nous appellerons cela un nombre total de caractères à une fonction de flèche. Passez dans l'État. Nous allons maintenant devoir parcourir chaque note de notre tableau de notes afin de déterminer le nombre total de caractères de toutes les notes. Nous pourrions simplement configurer une variable pour compter cela. Je vais créer une variable appelée « count set » qui est égale à 0 par défaut. Ensuite, nous allons simplement parcourir nos notes, à droite, la longueur du contenu de chacune d'elles, puis ajouterons cette longueur à cette variable de compte , puis retournerons simplement cette variable de compte à la fin. Nous pourrions donc utiliser un pour chacun pour ce faire. Pour saisir notre tableau de notes, nous pouvons simplement faire des notes de points d'état que nous pouvons utiliser pour chaque méthode pour parcourir chaque note de ce tableau au fur et à mesure qu'elle est en boucle ce tableau au fur et à mesure qu'elle est et qu'elle regarde chacune d'elles, nous allons avoir besoin d' un espace réservé. Nous allons donc simplement utiliser la note pour cela, puis ajouter une fonction flèche. Cela va examiner le premier nœud et attribuer à ce porte-notes. Nous pouvons donc simplement laisser tomber le contenu, points nope, le concept de points. Et puis pour obtenir la longueur de cette chaîne, nous pouvons simplement faire de la longueur des points. Nous pouvons ensuite ajouter le résultat à cette variable de compte. Nous pouvons simplement faire compter plus égaux comme ça. Et quand c'est fait, en regardant le premier élément, il sautera au deuxième élément, puis saisira la longueur de la propriété du concept suivant et continuera à ajouter à cette variable de compte jusqu'à ce qu'elle soit a complètement traversé le tableau. Ensuite, à la fin, nous pouvons simplement renvoyer cette variable de compte. Il suffit donc de retourner le nombre, le sauvegarder, de recharger la page. Ou bien, nous devons utiliser ce getter, que nous avons appelé nombre total de caractères. Je vais juste copier ce nom. Aller à la vue, début de la vue, sélectionnez cette double accolade XXX. Et puis, pour utiliser notre ghetto, nous pouvons simplement stocker des charges, des points, le nombre total de caractères, sauvegarder cela. Nous voyons maintenant cette mise à jour. Si nous passons à la page des notes, modifiez l'une de nos notes. Revenez en arrière. On pourrait dire que cette valeur est maintenant augmentée. Si nous supprimons toutes nos notes, accédez à la page Statistiques. Nous voyons maintenant que nous avons 0 nœuds sur 0 caractères au total. 94. Directive - Autofocus [Module 17]: Ajoutons une directive personnalisée à cela. Une chose que nous pourrions faire est de créer une directive personnalisée qui focalise automatiquement cette zone de texte lorsque la page est chargée, que l'utilisateur peut immédiatement commencer à taper et vous remarquez sans avoir à cliquer dessus. Tout d'abord, il suffit de régler une directive personnalisée locale à l'intérieur ce composant Ajouter une note de modification. Je ne dis pas que les composants source, les notes et les notes d'édition sauteront dans la section script. Je vais sauter vers le bas. Ajoutons ici un nouveau commentaire de bloc qui indique les directives. Vous souvenez-vous de la façon dont nous ajoutons une directive Local Coastal ? N'hésitez pas à mettre en pause la vidéo, voir si vous vous souvenez de la façon de le faire. Mais ce que nous faisons, c'est que nous créons une constante et nous devons nous assurer que le nom de cette constante commence par un v minuscule et qu' il se trouve dans CamelCase. On pourrait donc appeler ça l'autofocus veineux. Nous définissons cette valeur égale à un objet et nous pourrions ajouter tous les crochets que nous voulons ici, tels que créés, nous allons utiliser monté et nous le définissons une méthode comme celle-ci, et nous pouvons passer le paramètre L ici . Ce paramètre l nous donnera accès à l'élément une fois monté comme un dans l' élément auquel nous ajoutons cette directive autofocus V. Nous pouvons ensuite le focaliser avec la mise au point L. Nous pouvons maintenant ajouter cette directive à n'importe quel élément focalisable qui se trouve dans ce composant. Nous allons donc l'ajouter à notre zone de texte qui se trouve ici. N'oubliez pas que nous devons changer le nom que nous avons utilisé ici de CamelCase en boîtier de tableau de bord. Nous ne pouvons pas cela comme cet autofocus v dash. Gardez ça. Et si nous rechargeons cette page, nous pouvons voir que la zone de texte est automatiquement focalisée sans que nous ayons besoin de cliquer dessus. Étant donné que ce composant de notes d'édition d'art est un composant partagé qui est également utilisé sur la page d'édition. Il devrait également fonctionner ici , ce qu'il fait. Nous pouvons également voir la zone de texte automatiquement focalisée ici. 95. Directive mondiale - Autofocus: Disons maintenant que nous avons une contribution sur la page Statistiques. Passons à la page des statistiques, Source, Vues, Vue, Vue, Vue par points de statistiques. Et je vais réduire notre table et nous ajouterons une entrée après cela. Et je vais définir le type sur des textes et nous lui donnerons un espace réservé. Est-ce que tu aimes ? Pas de boules. Enregistrez cela et accédez à notre page de statistiques pour que cela soit un peu plus joli. Beaucoup de classes d'entrées, qui proviennent de Bohmer. C'est mieux. Supposons que nous voulions également autofocus cette impulsion lorsque cette page est chargée. Eh bien, ça ne va pas marcher actuellement. Si nous ajoutons cette directive be autofocus ici, enregistrez-la et rechargez-la. Si nous regardons notre console, nous pouvons voir une erreur. Impossible de lire les propriétés de lecture non définie en profondeur. En effet, cet autofocus V n'existe pas dans le contexte de cette vue de points de vue de composants, la vue de points n' existe que sur le composant Vue des notes d'édition artistique, où nous l'avons configuré ici. Revenons en arrière pour voir les statistiques point view. Supprimez cette directive V autofocus, enregistrez-la et revenez à notre page de notes et ajoutez la vue Edit nope point. Et faisons de cette directive une directive mondiale que nous pouvons utiliser n'importe où. Tout d'abord, créons un nouveau dossier dans notre dossier source où toutes nos directives peuvent exister. Je vais donc cliquer avec le bouton droit sur le dossier source, cliquer sur Nouveau dossier et créer un dossier appelé directives. À l'intérieur de cela, nous allons créer un nouveau fichier appelé autofocus dot js. Nous pourrions tout aussi bien lui donner le même nom que notre nom constant. Maintenant, sautons pour ajouter la vue de points nope de modification, sélectionnez cette constante et coupez-la. Et supprimons également ce commentaire et sauvegardons cela. Passons maintenant à un nouveau fichier de mise au point automatique V et collons la directive dans tout ce que nous devons faire est d'exporter ceci, qu'il puisse être importé à partir de nos composants. Nous pouvons donc simplement commencer les exportations par là, sauf cela. Et maintenant, si nous sautons pour ajouter edit self.view, nous pouvons simplement importer cette directive. Passons donc à nos entrées et nous pouvons simplement importer des accolades bouclées V autofocus à partir des directives obliques oblique. Gardez ça. Il nous suffit maintenant d'ajouter la directive à la zone de texte, ce que nous avons déjà fait. Cela devrait donc, espérons-le, fonctionner maintenant et nous pouvons voir quand nous rechargeons la page est toujours autofocus est la zone de texte, sauf maintenant qu'elle utilise cette directive globale que nous avons créée. Nous allons donc utiliser la même directive globale sur notre page de statistiques. Passons à la vue des statistiques par points. Nous devons importer la directive. Je vais donc revenir à Add Edit note dot Vue. Copiez l'instruction d'importation, passez à la vue de points statistiques, collez-la ici, enregistrez-la, et nous pouvons maintenant l'utiliser ici également. Ajoutons-le donc à cette entrée que nous venons de créer. Donc, V dash se concentre également, sauvegardez cela, rechargez et nous pouvons voir cette entrée sur la page de démarrage est maintenant autofocus également. 96. Surveillez le nombre de personnages (veille): Ajoutons un observateur à cela. Disons que dans notre vue page de notes, en mode point de notes, nous voulons regarder le nombre de caractères entrés dans cette zone de texte. En d'autres termes, le nombre de caractères de cette nouvelle note réf qui se trouve sur la vue des notes de vue. Et si cela atteint 100 caractères, nous voulons montrer une ellipse. Ajoutons une montre pour le faire sur les notes de vue vue point. Vous rappelez-vous comment nous ajoutons un observateur ? C'est vrai. Nous devons d'abord importer la méthode de montre de vue, puis utiliser cette méthode de montre. En bas, je vais ajouter un nouveau commentaire qui dit « Watch ». Les personnages utiliseront cette méthode de montre. Le premier paramètre est les données que nous voulons regarder, et nous voulons regarder cette nouvelle note, href, nous pouvons simplement passer de nouvelles notes comme premier paramètre. Le deuxième paramètre est une méthode de rappel de méthode qui sera déclenchée chaque fois que cette propriété de données spécifiée ici change Si nous le voulons, nous pouvons transmettre la nouvelle valeur sur l'ancienne valeur ici. Allons juste les verrouiller. Donc, déconnectez-vous une nouvelle valeur, puis une virgule nouvelle valeur. Ensuite, je vais dupliquer cela et nous déconnecterons l'ancienne valeur. Gardez ça, rechargez. Si nous modifions les textes, nous pouvons voir que l'ancienne valeur et la nouvelle valeur sont toujours verrouillées. Maintenant, nous n'allons pas vraiment avoir besoin de l'ancienne valeur ici. Je vais m'en débarrasser et me débarrasser de ces bûches. Si la longueur des caractères de cette nouvelle référence de note atteint 100, nous allons afficher une ellipse. Nous pouvons simplement ajouter une déclaration if pour ce faire. Nous pouvons donc le faire si vous valorisez la longueur du point pour obtenir la longueur de la nouvelle valeur est égale à 100, alors nous pouvons alerter quelqu'un, allumé seulement 100 caractères autorisés. Bon Dieu, bon dieu. Si je me recharge. Et juste pour faciliter le test, je vais passer à la zone de texte sous-jacente, qui se trouve dans les notes des composants source sur la vue impaire de points de note d'édition. Je vais juste ajouter un attribut de longueur maximale à cet ensemble à 100. Essayons ça. Nous pouvons simplement commencer à taper dans cette zone de texte. Lorsque nous arrivons à 100 caractères, nous voyons les alertes. Nous pouvons dire que notre observateur travaille. 97. Composable - useWatchCharacters: Supposons maintenant que nous voulons avoir la même fonctionnalité des personnages de montre sur notre page de statistiques sur cette entrée. Eh bien, nous pourrions simplement copier ce code de montre, coller dans la vue de la page Stats, la vue des points statistiques, puis ajuster la propriété de données que nous regardons ici. Eh bien, nous serions en train de dupliquer du code. Ce serait mal de placer cet observateur dans son propre fichier composable, que nous pouvons utiliser partout. Alors, faisons-le. Allons voir notre explorateur. Et nous voulons placer notre composable dans un dossier appelé use dans le dossier source. Cliquez avec le bouton droit de la souris sur la source et choisissez Nouveau dossier. Créez un dossier appelé Use That à l'intérieur qui créera un nouveau fichier appelé US watch characters ab.js. Pour configurer un composant, il suffit d'exporter une fonction portant le même nom que notre fichier. Utilisez des personnages de montre. Comme ça. Revenons en arrière pour voir les notes point Vue. J'ai juste attrapé cet observateur. Sautez dans notre composable et collez ça ici. Je suis en fait backhaul Snopes point view. Nous pouvons maintenant supprimer la méthode de montre que nous importons. Sauvez cela, revenez en arrière pour utiliser les personnages de montre. Et nous devons importer cette méthode de montre ici. Ajoutons simplement des entrées, regardons de vue. Maintenant, afin de rendre ce composant générique, nous devons être en mesure de transmettre la propriété data que nous voulons regarder en tant que paramètre. Alors, acceptons simplement cela ici. Nous pourrions donc simplement appeler cette valeur à regarder ou quelque chose comme ça. Peu importe ce que nous passons ici c'est ce que nous voulons regarder ici, modifions les nouvelles notes en valeur pour regarder et sauvegarder cela. Et maintenant, nous devrions pouvoir utiliser cet impossible pour regarder le nombre de caractères de n'importe quelle propriété de données dans notre application. Ensuite, affichez cette alerte si elle touche 100 caractères. Passons donc à la vue de points des notes, et nous devons importer ce composant. Les entrées utilisent donc des caractères de montre. À partir de la barre oblique des utilisateurs, UTILISEZ les caractères de montre. Disons cela, passons à notre page de notes. Sautez vers le bas. Nous ne devrions pas pouvoir utiliser ce composant pour regarder cette nouvelle note href, qui est liée à la zone de texte. Nous pouvons simplement utiliser des personnages de montre , puis passer dans le rack que nous voulons regarder. Nouvelle note, notez, enregistrez ça. Voyons si cela fonctionne toujours. Je travaille toujours. Et maintenant, nous devrions également pouvoir utiliser les mêmes fonctionnalités sur notre page de statistiques. Passons donc à notre page de statistiques. Vues, vue, arrêt, vue Arrêter. Encore une fois, nous devons importer ce composant. Je vais simplement copier la ligne d'entrée depuis la vue. Note stop View. Collez ça ici. Et nous devrions maintenant pouvoir l' utiliser également sur la page des statistiques. Cependant, nous n'avons pas de configuration de propriété de données pour cette entrée ici. Alors, installons ça. Beaucoup de commentaires ici, ce qui dit que les boules de note d'amour mettent presque en place un href. Donc const, love note balls est égal à un href avec la valeur initiale d'une chaîne vide, et nous devons importer ref depuis la vue. Ajoutons cela à la référence d'entrée supérieure de la vue. Lions maintenant ce radeau à l'entrée. Voici les commentaires. modèle V. Placez-le trop bas en boules de notes. Gardez ça. Modifions simplement cette valeur par défaut pour voir si elle est connectée. Encore. C'est tout ce qu'il a fallu. Nous devrions maintenant pouvoir regarder les personnages de cette entrée. Encore une fois, nous pouvons simplement utiliser des personnages qui passent l'épave que nous voulons regarder, c' est-à-dire l'amour, le nope, les balles, l'amour, les balles de note. Saint ça. J'espère que nous devrions voir la même fonctionnalité ici. Oui, ça marche. 98. Composable - Plusieurs paramètres: Faisons en sorte que notre utilisation des personnages de montres soit un peu plus flexible. l'instant, l'alerte sera toujours déclenchée lorsque la longueur des personnages atteindra 100. Mais supposons que nous voulons pouvoir ajuster le nombre de caractères auxquels se trouve ce phi. Disons que sur la page des notes, nous voulons trouver 100 caractères. Mais sur la page des statistiques de cette entrée, nous voulons trouver cela plus de 50 caractères. Eh bien, nous pourrions le faire en ajoutant un autre paramètre pour utiliser la fonction racine des caractères de montre ici. Ajoutons ici un deuxième paramètre appelé max jars. Nous pouvons passer la même chose lorsque nous utilisons ce composant dans nos composants dans notre instruction if ici, au lieu de si NewValue aimé est égal à un 100 fera si la nouvelle longueur de point de valeur est égale à max nos composants dans notre instruction if ici, au lieu de si NewValue aimé est égal à un 100 fera si la nouvelle longueur de point de valeur est égale à max. remplacez une largeur maximale de 100 caractères, et nous afficherons également ce nombre dans notre alerte. Je vais changer cela en chaîne de modèle. Je remplacerai les accolades bouclées de 100$ que j'ai le droit de mettre ce max. Obtenons que ces paramètres de jars définissent une valeur par défaut au cas où elle n'a pas été fournie. Nous pourrions le faire en définissant simplement les caractères max à 100. Gardez ça. Étant donné que nous ne fournissons pas actuellement le paramètre de cet enfant maximum sur la page des notes, cela devrait fonctionner comme avant. En lançant les alertes sont de 100 caractères. Essayons juste ça. Pourtant, il ne fonctionne pas encore à 100 caractères. Disons que sur notre page de notes, nous voulons simplement utiliser la fonctionnalité par défaut avec 100 caractères. Mais sur notre page de statistiques, nous voulons que les caractères maximum soient de 50 caractères. Ne voyons pas la page des statistiques sur Jolt pour voir la vue des points de statistiques. Défilons jusqu'à l'endroit où nous déclenchons notre composable, en passant le deuxième paramètre de 50. Maintenant, gardons ça. Rechargez. Cela devrait se déclencher un peu plus tôt maintenant à 50 caractères, il est dit que seulement 50 caractères sont autorisés. Bon sang, bon sang. Notre composable est donc maintenant beaucoup plus flexible et utile. Et bien sûr, nous pourrions le rendre plus flexible avec des paramètres supplémentaires, etc. Maintenant, pour un composant simple comme celui-ci, qui ne contient qu'un observateur, il est logique d'importer simplement le composable et il suffit lancer la fonction composable racine comme nous le faisons ici. Mais pour des éléments plus compliqués, composables, qui contiennent un tas de choses différentes telles que des données, des méthodes, des propriétés calculées , etc. Il est plus logique de n'extraire que les éléments dont nous avons besoin du composable à l'aide de la structuration. Et pour vous rappeler comment nous y parvenons avec un composant plus complexe, revenez au module 11. Le module composable. 99. Cliquez sur l'extérieur de composable (VueUse, Réfs de modèle): Nous avons créé un composant personnalisé, mais ajoutons également un composant à partir de la bibliothèque de vues. Et si nous regardons notre menu mobile ici, le seul moyen actuellement fermer est de cliquer sur le x. Nous ne pouvons pas le fermer en cliquant en dehors de celui-ci, comme on s'y attendrait habituellement. Utilisons donc l'un des composants de la bibliothèque d'utilisation de la vue pour résoudre cette forêt. Passons par-dessus pour voir use.org. Commencez. Nous devons d'abord l'installer. Parlons à notre terminal. Tuez. Le processus de mort exécutera cette commande pour installer Vue use. Je n'ai pas fini, alors relançons notre application avec npm run dev. Du côté de la vue, nous allons passer aux fonctions du menu, aux sens. Nous allons utiliser ce onclick hors composable. Cliquons donc là-dessus. Nous pouvons en voir un exemple ici. Nous pouvons ouvrir un modal. Nous pouvons le fermer avec le bouton X, mais nous pouvons également le fermer en cliquant n' importe où en dehors du modal. Alors, cachons le terminal ici. Fermez tous nos composants. Ouvrez la disposition des composants source de la barre de navigation, Napa. Examinons l' exemple de code ici. Nous devons importer le composant onclick hors composable de l'utilisation de la vue. Nous allons donc copier cette ligne dans notre section de rapport ici. Nous pouvons voir dans cet exemple ici que nous devons configurer un modèle REF qui détruit l'élément avant de pouvoir l'utiliser. Découvrons donc assez d'élément de menu, qui est ici, cette div avec une classe de menu de barre de navigation. Ajoutons une référence à cela. Nous pourrions appeler ce menu de barre de navigation ref ou quelque chose comme ça. Allons à la section Script. Beaucoup de commentaires ici qui disent cliquer à l'extérieur pour fermer. Nous devons configurer notre modèle href. Nous pouvons le voir dans cet exemple ici. Nous allons créer une constante portant le même nom que notre ref, où est-elle passée ? Assez, menu bombe réf. Donc const navbar, menu ref dt est égal à ref avec une valeur par défaut de null. Maintenant, nous pouvons utiliser ce composant. Nous allons donc copier cette ligne ici. Collez cela ici, changez la cible par cette href ici. Je vais donc copier ça, coller ça là, sauvegarder ça. Et nous allons montrer le menu mobile. Videz la console et cliquez à l'extérieur quelque part. Et nous avons pu voir les objets de l'événement être verrouillés ici. Cela semble donc fonctionner. Mais nous ne voulons pas simplement déconnecter l'objet événement. Je vais donc sélectionner tout cela, ajouter des accolades et ajouter une nouvelle ligne au milieu. Cette référence Show Mobile Nav détermine si le menu mobile est affiché ou non. Nous pouvons donc juste remettre cela à faux. Une fois que nous avons cliqué dehors. Dans cette méthode onclick outside, nous pouvons simplement faire Afficher la valeur de la navigation mobile égale à false. Je vais simplement supprimer l'objet de l'événement d' ici parce que nous n'en aurons pas besoin. Gardez cela, et voyons si cela fonctionne. Afficher le menu. Cliquez sur l'extérieur. Nous voyons qu'il disparaît. Cependant, il ne ferme plus le menu mobile lorsque nous cliquons sur X. Voyons si nous pouvons résoudre ce problème. Allons jusqu'à ce bouton, qui est ici. Je pense voir ce qui se passe ici. Le menu mobile montre actuellement ce que nous avons cliqué sur le bouton Burger. Parce que c'est en dehors du menu mobile. Il déclenche l'événement extérieur onclick en redéfinissant Afficher la navigation mobile sur false masquant le menu mobile. Ce que nous appelons. Nous avons également ce gestionnaire de clics sur le bouton Burger. Il s'agit alors de déclencher ce code, qui va mettre show mobile nav à l' opposé de lui-même. Ce point va le remettre à vrai. Si nous revenons à la documentation extérieure onclick et que nous faisons défiler un peu vers le bas, nous pouvons en fait ajouter un objet options en tant que troisième paramètre après la cible, le gestionnaire, où nous pouvons avoir ceci option ignorer pour indiquer au composant quels éléments ignorer la fonctionnalité onclick outside. On pourrait juste faire ignorer tous les clics sur ce hamburger Navbar. Maintenant, nous devons d' abord configurer un modèle de référence pour cette gélose Bob. Ajoutons une référence à cette barre de navigation T2 Settler, Burger réf. Gardez ça. Nous devons configurer la référence de données pour cela ici, je vais dupliquer celle-ci. Modifiez ceci pour coût navbar burger ref. Ensuite, dans cette fonction onclick outside, après notre fonction de gestionnaire, nous pouvons ajouter une virgule puis un objet à l'intérieur duquel nous ne pouvons pas ignorer l'option. Définissez cela comme égal à un tableau, transmettez le modèle ref résoudre tous les éléments que nous voulons ignorer. Passons donc dans ce mendiant F de barre de navigation, collons ça là-dedans, gardons ça. Voyons si c'est corrigé. Cliquez sur le bouton. Nous pourrions toujours le fermer en cliquant sur le X. Voyons si nous pouvons toujours cliquer à l'extérieur pour le fermer. Et oui, nous le pouvons. 100. Supprimer la conception modérée (objets réactifs): Ok, donc notre application est entièrement complète. Dans ce document, nous avons couvert presque tout ce que nous avons couvert dans les modules précédents. Il y a juste une autre chose que je veux ajouter, est-à-dire un modal qui s'affiche lorsque nous cliquons sur le bouton Supprimer pour demander à l'utilisateur de confirmer avant la suppression de la note. Les raisons pour lesquelles je veux ajouter cela sont numéro un, cela nous permettra d'ajouter un objet réactif à notre application, que nous n'avons pas encore utilisé. Numéro deux, il nous permettra d'utiliser des crochets de cycle de vie que nous n'avons pas encore utilisés. Numéro trois, il nous aidera à consolider notre connaissance des données sur les événements entre les composants parents et enfants à l'aide de props, d' émissions, de valeur de modèle et de mise à jour de la valeur modale. Et je pense que c'est une bonne idée de revoir ce truc parent-enfant, car ces concepts peuvent être assez déroutants, mais ils sont vraiment K pour créer des applications API de composition solide. Commençons par créer un nouveau composant pour notre modal. Je vais passer aux composants source, note. Et je ne veux pas créer un nouveau fichier dans ce dossier appelé vue par points modal Delete Note. Pour l'instant, je vais juste sortir les balises de modèle là-dedans. Dave. Je vais juste mettre les textes. C'est un modal. Enregistrez cela maintenant sur notre vue de points de note de composant Notes. Allons à ça. Remarques sur les composants. Non, vue par points. Ajoutons un objet réactif où la propriété permettant déterminer si cette modale est affichée ou non. Je vais importer un avis de référence, donc je vais l'ajouter ici. Ensuite, je vais faire défiler vers le bas. Je vais ajouter un commentaire de bloc qui dit modales. Je vais configurer un nouvel objet réactif appelé modals. Les modaux sont réactifs, réactifs que nous devons importer depuis la vue, pas href. Remplacons cela par réactif. Passer l'objet. Et je vais ajouter une propriété appelée Delete Note Set point égal à false. Cette propriété déterminera si le modal est affiché ou non. Si c'est faux, nous ne le montrons pas. Et si c'est vrai, alors nous le montrons. La raison pour laquelle j'ai utilisé un objet réactif ici est que dans de nombreuses applications comme celle-ci, nous pouvons avoir un tas de modèles différents. Par exemple, en ce moment, lorsque nous modifions une note, nous avons sauté sur une nouvelle page, mais nous pouvons décider de remplacer cette fonctionnalité par un modal pour modifier les notes. Cet objet réactif nous offre un endroit où nous pouvons gérer tous nos modèles ensemble. Vous pouvez avoir une autre propriété ici, modifier des notes, puis l'utiliser pour gérer les notes de modification modale. Mais pour l'instant, nous allons simplement ajouter ce modal de suppression des notes, donc je vais m'en débarrasser. Gardez ça. Importons notre nouveau composant modal et ne l'affichons que lorsque cette propriété delete notes est vraie. Nous allons donc passer à nos intrants. Nous allons importer une note de suppression modale à partir de composants de slush, de notes obliques, suppression modale oblique, de points de notes. Je vais sauver ça. Et maintenant, placons cela après notre élément de pied de page modal. Supprimer la note. Gardez ça. Et nous pouvons maintenant le voir sur nos deux notes. Mais n'affichons cela que lorsque les modaux Dot Delete Note sont vraies. Donc beaucoup de v-if dirigé vers ce tiret modal v, si modales, points, suppression, note, enregistrez cela. Et nous voyons le modal disparaître. Si nous modifions le nœud modaux de suppression de points par true , nous le voyons réapparaître. Ramenons cela à faux et sauvegardons cela. Utilisons maintenant des puces pour créer un modal d'apparence agréable. Revenons donc au site du broyeur à boulets sur .io docs aux composants et modal. Défilons un peu vers le bas ici. Nous allons utiliser cet exemple de carte modale, qui a l'air assez joli. Je vais copier tout le code pour cela. Aller à modal, Supprimer, Note point Vue. Il suffit de coller tout ça ici. Débarrassez-vous de la div que nous avons déjà ajoutée. En dense tout un peu et enregistrez ce rechargement pour que nous puissions réellement voir ce modal lorsque nous cliquons sur Supprimer. Passons à notre bouton Supprimer dans la vue Nope dot, qui se trouve ici. Au lieu de déclencher nos notes de suppression, l'action dans notre boutique affichera simplement ce modal. Pour ce faire, nous pouvons simplement faire des modales, Dot, Delete , notes égales à vrai. Gardez ça. Cliquez sur Supprimer. Nous ne voyons toujours pas le modal. Voyons s'il est ajouté à notre maquette ici. Je vais donc inspecter cette note. Nous pouvons dire que le modal a été ajouté à la page, mais nous ne le voyons pas. Je pense que c'est parce que nous devons ajouter une classe active au modal. Maintenant, nous pouvons le voir. Revenons donc à notre composant modal et ajoutons cette classe à la racine est active. Gardez ça. Cliquez maintenant sur le bouton Supprimer. Nous pouvons maintenant voir le modal. Maintenant, modifions un peu cela. Modifions ce titre ici, titre modal pour supprimer des notes, un interrogation, sauvegarder cela. Et ajoutons du contenu aux poils du corps. Donc, à l'intérieur de cette classe de corps de carte modale, nous allons simplement ajouter, vous. Bien sûr. Vous souhaitez supprimer cette note, sauvegardez-la. Et nous pouvons maintenant voir ce message. Maintenant, je veux aligner ces boutons vers la droite. Si nous avons conduit à cet élément de pied avec une classe de carte mémoire modale tiret quatre. Nous pouvons le faire en ajoutant l'une des classes Flexbox de Ballmer, qui est juste pour phi dash, dash, dash et dire, en fait, je pense que cela justifie contenu flex et essayons cela. Gardez ça. Encore une fois, vous pouvez trouver toutes ces classes documentées sur l'ancien site. Bon, je vais maintenant échanger ces boutons. Placez le bouton Annuler en premier à l'intérieur de ce pied de page. Je ne veux pas modifier le texte ce bouton Enregistrer les modifications pour le supprimer. Je pense qu'il est logique de rendre ce bouton rouge pour que nous puissions simplement changer. C'est un succès. La classe deux est un danger. Pour le faire lire. Ce modal a l'air plutôt bien maintenant. Maintenant, il suffit de le faire se comporter correctement. Pour ce numéro un, nous pouvons le masquer lorsque nous cliquons sur ce X ou sur le bouton Annuler. Si nous cliquons en dehors du modal. Pour ce faire, nous allons utiliser à nouveau notre clic hors composable de l'utilisation de la vue. Nous devons également obtenir cela pour supprimer réellement la note lorsque nous cliquons sur le bouton Supprimer. Nous allons également ajouter un certain contrôle au clavier pour que l'utilisateur puisse appuyer sur Echap pour fermer le modal. Pour ce faire, nous allons utiliser des crochets de cycle de vie. 101. Masquez le modèle Supprimer the et mise à jour : modelValue): Si l'utilisateur clique sur ce bouton du conseil ou s'il y a des exploits, nous voulons masquer ce modal. Maintenant, ces boutons se trouvent dans notre composant enfant. Vue par points Modal Delete Note. Mais si l'utilisateur clique sur ces boutons, nous voulons modifier la propriété modales Dot, Delete Note qui se trouve sur le composant parent. Une façon d'y parvenir consiste à émettre un événement client lorsque nous cliquons sur ces boutons. Ensuite, dans le composant parent, notez la vue point, à l'écoute de cet événement. Et quand il est reçu. Définissez les modales Dot, Delete , Note, Box ou false. Cependant, comme nous l'avons appris plus tôt dans le cours, nous n'avons pas vraiment besoin de le faire. Nous ne pouvons pas obtenir qu'un composant enfant modifie directement une propriété de données qui se trouve sur son composant parent. En transmettant cette propriété de données réactives composant enfant à l'aide du modèle V, puis en recevant la valeur du modèle V l'aide de la valeur de modèle spécial prop, puis en mettant à jour la source de cette valeur modale sur le composant parent à l' aide de la valeur de modèle de mise à jour. Eh bien, tout d'abord, transmettons les modaux Dot Delete Note au composant enfant à l'aide du modèle V. Passons à la suppression modale sans composant ici. J'ai le droit av, model directive et set.seed comme les notes modales Dot Delete, collez cela là-dedans, enregistrez cela. Et nous pouvons maintenant recevoir ce modèle V à l'aide la valeur modale spéciale prop, les composants enfants. Passons donc à la vue de points nope de suppression modale. La section script de l' attribut configure nos accessoires. Donc beaucoup de commentaires ici qui disent des accessoires. Je suis une constante appelée props et j'ai défini ce qui est égal à la méthode define props passer dans un objet et nous allons définir nos accessoires ici. Pour recevoir cette propriété de données que nous transmettons avec le modèle V, nous devons utiliser la valeur de modèle prop, qui est égale à un objet. Le type sera milliards parce que les modaux, Dr Lee Non, représentent un milliard qui sera uniquement vrai ou faux et définira presque la valeur par défaut sur faux. Pour s'assurer que cela est transmis correctement et reçu correctement. Examinons simplement cette prop de valeur modale dans notre modèle. Donc, après les textes que nous avons ajoutés au corps, je vais ajouter une pré-balise et juste sortir accolades doubles et une valeur modale. Enregistrez cela, rechargez l' application, cliquez sur Supprimer. Et oui, nous pouvons voir que ça se passe parce que nous pouvons voir vrai ici. Maintenant, supprimons simplement cette pré-étiquette. Gardez ça. Créons maintenant une méthode qui peut être déclenchée lorsque nous cliquons sur le bouton X ou sur le bouton Annuler. Passons donc à la section script dans Delete Note dot Vue modale. Aller ajouter une section appelée close modal. Je vais créer une constante appelée cloche modal settler égale à une fonction de flèche. Pour l'instant, nous allons juste nous déconnecter proche du modal. Gardez ça. Déclenchons maintenant cette méthode sur nos boutons. Donc, le bouton Annuler, va simplement diviser cela sur plusieurs lignes. Divisez les attributs. Gestionnaire de clics mélodiques, le clic est égal à fermer modal. Ensuite, je vais copier ce gestionnaire de clics, trouver ce petit export . Où est cette chose ? Voici, je vais diviser cela en plusieurs lignes. Divisez les attributs, collez simplement dans ce clic, sauvegardez cela. Sauf s'assurer que cette méthode modale proche se déclenche. Cliquez sur le bouton Annuler, nous voyons le journal. Cliquez sur le bouton X, nous voyons le journal. Maintenant, nous devons simplement émettre l'événement de valeur de modèle DAG hope dans cette méthode. Tout d'abord, nous devons définir nos mythes. Laissez garer notre section mitaines, créer une constante appelée émettre. Définissez la valeur égale au passage de la méthode des émissions définie dans un tableau. Nous allons simplement ajouter le volume du modèle deux-points de mise à jour. Dites que nous pouvons maintenant émettre cet événement spécial dans la méthode modale de nos vêtements. Nous pouvons simplement émettre et ensuite espérer la valeur modale du jour. Cela va donc modifier la propriété de données source dans le composant parallèle que nous transmettons avec le modèle V et que nous recevons avec une valeur modale. Il va mettre à jour cette propriété Delete Note dans la vue de points de note de composant, nous devons lui indiquer les valeurs à définir. Et nous voulons cacher le modal, donc nous voulons remettre cela à faux. Allons descendre à cette émission. Nous pouvons simplement commencer false en tant que deuxième paramètre. Disons réfléchir. Voyez si ça marche. Affichez le modal de suppression, cliquez sur le X, et cela fonctionne. Cliquez sur le conseil. Et cela fonctionne aussi. 102. Suppression de modèle - Cliquez sur à l'extérieur pour fermer: Il vaudrait mieux que ce modal se ferme si nous cliquons n'importe où en dehors de la voiture. C'est la fonctionnalité que nous attendions d'un tel modal. N'oubliez pas que nous utilisons ce clic hors composable plus tôt de utilisation de la vue pour faire ce menu de navigation mobile disparaître ce menu de navigation mobile lorsque nous cliquons en dehors de celui-ci. Nous pourrions l'utiliser à nouveau. Avant cela, je n'aime pas le fait qu'il n'y ait pas de rembourrage autour de ce modal. Lorsque nous sommes sur un ticket plus petit écran, c'est mieux avec un peu tracé cette div avec la classe de modal et ajoutez simplement une classe de H2 pour lui donner un peu de rembourrage. C'est un peu mieux. Je pense. Utilisons ce clic hors composable ici pour que nous puissions fermer ce modal. Laissez-moi cliquer en dehors de la carte. Je vais aller voir l'explorateur. Je vais simplement cliquer avec le bouton droit sur le dossier source et choisir Rechercher dans le dossier et rechercher un clic extérieur. Il y a un sans opposition. Alors, passons à ça. Je vais copier cette entrée. Ensuite, passez à la vue de points de nœud de suppression modale. Là-dessus aussi, c'est fini. Importez, collez ce saut. Mais pour ne pas voir Bardot. Nous allons maintenant copier tout ce code. Nous pourrions aussi bien copier le commentaire. Revenez en arrière pour supprimer le modal. Je vais coller ça en bas. N'oubliez pas que nous avons besoin d'un modèle de référence pour indiquer à ce composant quel élément nous allons cliquer en dehors de deux, puis faire quelque chose. Remplacons cette référence de menu de barre de navigation ici et ici par ce que nous allons cliquer en dehors de cette div de carte à pointillés modal. On pourrait appeler cette carte modale réf. Ajoutons cela à la carte modale. Les attributs. Cette href, code modal ref, sauve ça. Je ne pense pas que nous aurons besoin de cette option d'ignorer. Je vais juste supprimer ce troisième paramètre, objets sur cette virgule aussi comme ça. Et nous pouvons nous débarrasser de cette référence de données, que nous ajoutions à cette option ignorer. Maintenant, lorsque nous cliquons à l'extérieur, nous voulons simplement masquer le modal en déclenchant cette méthode close modal. Nous pouvons simplement sélectionner tout ce gestionnaire ici, de l'accolade bouclée de fermeture à ces parenthèses. Je viens de mettre le nom de notre méthode près du modal. Gardons ça, voyons si ça marche. Rechargez, montrez le modal. Nous avons une erreur ici. Href n'est pas défini. Je suppose que nous devons importer la méthode ref de vue. Importe depuis la vue, sauvegardez-le. Rechargez. Afficher le clic modal à l'extérieur. Oui, ça marche. Assurez-vous simplement qu'il n'est pas déclenché par erreur, comme dans la barre de navigation auparavant. Ils ne sont virés que si nous cliquons juste en dehors de la carte. Et le conseil et les experts continuent de travailler. 103. Supprimer le motif - Contrôle des claviers (crochets de vie): Nous nous attendons généralement à pouvoir fermer un modal comme celui-ci en appuyant sur la touche Echap de notre clavier. Configurons un clavier qui n'a pas de lien dans le crochet monté de ce composant modal Delete Note dot Vue. Je vais passer à la note modale Delete Note, vous parler, et vers le bas. Je vais créer un commentaire appelé contrôle du clavier. J'ai droit à une passe à crochet non montée et à un manipulateur comme ça. Et nous allons juste nous déconnecter pour l'instant, dire que nous avons une erreur ici sur monté n'est pas définie. C'est parce que nous devons importer ce crochet de cycle de vie depuis la vue, les lamelles qui ont frappé sur fondu, sauvegarder ce rechargement, montrer le modal et nous pouvons dire que le démontage est déconnecté. Si nous le cachons et le montrons à nouveau, nous pouvons dire que le démontage est à nouveau déconnecté. Maintenant, dans un multi-outil, configurons un écouteur d'événement pour l'événement clé, qui sera déclenché après avoir appuyé sur une touche , puis relâché. Débarrassez-vous de ce journal. Et nous pouvons simplement faire des points de document, ajouter un événement, écouteur, des parenthèses, puis suivre le premier paramètre. C'est le pilier qui va être à l'écoute, et nous allons écouter l'événement. Et le deuxième paramètre est notre gestionnaire. Ajoutons donc une fonction flèche ici. Passons également à l'objet événement. Je vais remplacer ces parenthèses par un A, et nous allons juste verrouiller ça pour l'instant. Console.log. Enregistrez cela et rechargez, affichez le modal et appuyez sur la touche d'échappement. Et nous pouvons voir l' événement clavier être verrouillé. Dans cet événement, les objets. Nous pouvons voir que lorsque nous appuyons sur la touche Echap, cette propriété clé est définie pour s'échapper. Cette propriété clé est généralement la propriété que nous voulons vérifier dans notre JavaScript pour déterminer quelle touche a été pressée. Vérifions si la touche d' échappement a été enfoncée. Et si c'est le cas, nous pouvons simplement tirer une méthode modale proche, cachant ainsi le modal. Supprimons donc ce console.log. Et nous pouvons simplement le faire si un point k est égal pour leur échapper, vous pourriez simplement tirer le modal proche. Une méthode. Gardez ça. Rechargez, affichez le modal, appuyez sur la touche d'échappement. Et ça marche. Nous voyons le modal disparaître. Cependant, nous avons un problème ici. Si nous regardons quelque chose à l'intérieur de cet écouteur d'événements, nous pouvons simplement nous déconnecter, le fermer. Gardez ça. Maintenant, si je recharge, cliquez sur Supprimer pour afficher le modal et cliquez sur Escape. On voit de près qu'il est verrouillé une fois. Mais si je montre un autre succès modal Escape, il est maintenant bloqué deux fois cette fois. Et si nous montrons à nouveau un modal, frappez Escape. Cette fois, il a été bloqué trois fois. En effet, même après la fermeture du modal, cet écouteur d'événements existe toujours. Cet écouteur d'événements n'est pas supprimé lorsque nous fermons le modal. Lorsque nous affichons un modal pour la première fois, cet écouteur d'événements est configuré. Permettez-moi de fermer le modal. Cela est toujours mis en place. Ensuite, nous ouvrons un autre modal. Nous mettons ensuite en place un deuxième écouteur d'événements. Dans cette partie, nous avons maintenant deux de ces auditeurs d'événements qui se déclenchent. Je l'ai eu. Nous continuerons d'ajouter un nouvel écouteur d'événements chaque tau que nous affichons un nouveau modal. Nous devons donc supprimer cet écouteur d'événements lorsque le modal est fermé. Et nous pourrions le faire dans le crochet non monté, ce qui sera phi était allé sur modal est retiré du dom. Désormais, tout d'abord, pour rendre un écouteur d' événements amovible, nous devons placer sa fonction de rappel dans sa propre fonction nommée. Les deux multi-conversations. Je vais créer une constante appelée poignée. clavier. Définissez cela comme égal à une fonction de flèche. Transmettez le paramètre, l'objet événement. Maintenant, je vais couper ces deux lignes et les coller dans cette nouvelle fonction. Maintenant, nous pouvons simplement sélectionner tout ce gestionnaire de l' accolade de fermeture au a. Il suffit de passer le nom de cette fonction, de la poignée, du clavier. Sauvons ça. Je vais m'assurer que ça marche toujours. Appuyez sur la touche Escape. Cela fonctionne toujours. Il suffit maintenant de supprimer cet écouteur d'événements dans la conversation démontée. Après la conversation démontée avec Loudon sur crochet non monté, passez un gestionnaire de fonction flèche. Maintenant, pour supprimer cet écouteur d' événements, nous pouvons simplement utiliser la méthode remove event listener. Je vais juste copier toute cette ligne, coller la ligne ici et changer l'écouteur d'événements pour supprimer l'écouteur d'événements. Gardez ça. Et nous devons ajouter l'espoir inconnu à nos importations. Ajoutons ça ici sur monté. Gardez ça. Voyons maintenant si cela fonctionne. Cliquez sur le bouton Supprimer, affichez l'accès modal Escape. Nous voyons que notre bûche n'est tirée qu'une seule fois. Cliquez à nouveau sur Supprimer, affichez l'accès modal Escape. Nous voyons maintenant qu'il ne se déconnecte qu'une fois de plus. Cela ne fonctionne donc pas. L'écouteur d'événements est supprimé lorsque le modal est fermé. Et si nous continuons à frapper Escape ici, nous ne voyons rien en lock-out. Nous pouvons maintenant simplement supprimer le journal de la console de la fonction clavier de la poignée. Gardez ça. Maintenant, il ne nous reste plus qu'à supprimer ce football. Lorsque l'utilisateur clique sur ON, supprimez dans le modal. 104. Supprimer le motif - Supprimer la note: La dernière chose que nous devons faire est de supprimer les notes que l'utilisateur essaie de supprimer lorsqu'il clique sur ce bouton rouge de suppression. Nous avons déjà une action Supprimer la note dans notre boutique. Étagères, stocke et stocke Node.js aux options. Nous avons déjà configuré ces actions Supprimer la note que nous pouvons utiliser pour supprimer les notes. Sur tout cet oxygène attendu il y a l'ID du nœud que nous voulons supprimer. Nous pouvons donc simplement déclencher cet oxygène directement dans notre composant modal Delete Note dot Vue. Allons à ça. Sur le bouton Supprimer, qui se trouve ici. Nous voulons simplement déclencher cette action dans notre magasin. Supprimez une note qui attend un ID, mais nous n'avons pas réellement accès à l'ID des notes dans ce composant. Cependant, si nous passons à vue de points de note de son composant parent, nous avons accès à toutes les informations de notes ici dans cette prop de note. Nous pourrions utiliser cela pour transmettre l'ID de la note à la vue de points de nœud de suppression modale du composant enfant à l'aide d'un prop. Passons à un composant nope modal delete, qui est ici. Nous pouvions soit transmettre l'ensemble des objets de note. Nous pouvons appeler ce jeu de notes égal à des notes. Cela transmettrait l'ensemble des objets avec l'ID et le contenu. Cependant, nous n'avons besoin que de la pièce d'identité. Donc, nous pourrions aussi bien ne transmettre que la pièce d'identité. Pour ce faire, nous pourrions transmettre des notes et peut-être simplement changer le nom de l'accessoire en identifiant de note, CamelCase. Gardez ça. Nous devons maintenant recevoir l'ID prop de cette note, le composant modal Delete Note dot Vue. Alors, passons à ça. Allez à nos accessoires. J'ai le droit que ce type de prop soit chaîne. Je vais également rendre cela nécessaire. Je vais définir ce qui est obligatoire à vrai. Enregistrons cela et vérifions que propriétés de cet ID de nœud passent. Après notre contenu ici. Le modal, sortons simplement pré-talk avec des accolades doubles et un ID de note, sauvegardons cela, rechargeons et affichons le modal. Et oui, on peut voir ID1 cracher pour la première note, un identifiant à cracher pour la deuxième note. Débarrassez-vous de ce pré-tag. nous suffit maintenant d' importer notre boutique, avis dans ce composant modal, d' ajuster, de déclencher cette vente aux enchères de notes de suppression et de transmettre l'ID. Nous devons d'abord l'importer. Nous pouvons simplement importer. Utilisez les notes du magasin de barres obliques de magasins obliques. En fait non, ajoutons des notes de magasin oblique. Gardez ça. Nous devons attribuer ce magasin à une constante. Donc, après nos accessoires et nos limites à l'intérieur d'une commande de magasin, et faites simplement const store notes égales à utiliser des notes de magasin, des parenthèses. Gardez ça. Et nous devrions maintenant avoir accès à un magasin ici. Cette action Supprimer la note dans le magasin. Allons maintenant au bouton Supprimer, qui se trouve ici. Je vais diviser cela en plusieurs lignes, diviser les attributs en plusieurs lignes, ajouter un gestionnaire de clics. Nous voulons simplement lancer la vente aux enchères Delete Note qui se trouve dans notre boutique. Nous pouvons donc simplement faire des notes volées, Dot Delete, note, passer l'ID. Et encore une fois, nous transmettons l'ID, accessoire d'identification de cette note. Nous pouvons simplement voler des notes Dot Dot Delete notes, notes, ID. Gardons ça et voyons si ça marche. Rechargez, cliquez sur Supprimer. Cliquez à nouveau sur Supprimer. Nous pouvons voir que la note a été supprimée. Nous pouvons également constater que le modal est automatiquement masqué. Laissez-moi cliquer sur Supprimer. Et c'est parce que le modal est un composant enfant de la vue des points de note. vue par points de note est le composant que nous utilisons pour afficher une note. Lorsque nous supprimons une note, ce composant Note point Vue est supprimé du vidage avec tous ses composants enfants, y compris le composant Modal Delete, Note dot Vue. 105. Roundup du cours: Félicitations, vous êtes arrivé jusqu'au bout. J'espère que vous vous sentirez prêt à commencer à créer vos propres UPS avec V3 et l'incroyable API de composition. J'espère également que ce cours vous a aidé à comprendre les avantages considérables de l'API de composition par rapport à l'API d'options. Assurez-vous de conserver les connaissances de ce cours en créant des applications avec l'API de composition. Dès que vous comptez, vous pouvez essayer reconstruire vous-même les balles Nope à partir de zéro. Ou vous pouvez essayer de créer un clone de l'un de vos hauts favoris. Si vous voulez en savoir plus sur moi et sauter sur YouTube de Danny, où vous pouvez trouver les maquillages de ma chaîne YouTube avec Danny, où je partage des tonnes de contenu gratuit sur Vue.js, quasar framework, embellissement et code VS sur bien plus encore. Consultez également mes autres cours freemium sont terminés is dot link slash cours. Tous les liens vers mes cours premium sur cette page appliqueront automatiquement ma réduction spéciale. Donc, chaque cours, j'ai un cours sur beautify, qui est le framework de composants le plus populaire pour Vue.js. Malheureusement, au moment où j'enregistre cet embellissement ne supporte pas quelques trois, mais j'espère que ça le fera bientôt. Ensuite, j'ai trois cours sur le framework quasar, qui est un framework absolument incroyable qui vous permet de créer un Vue.js avec une base de code unique, le déployer sur de nombreuses plateformes différentes. Vous pouvez le déployer sur une application réelle qui peut être déployée dans les magasins d'applications pour iOS, Android, Mac et Windows. Vous pouvez le déployer sur une application monopage et côté serveur d'applications Web progressives même avec une extension de navigateur pour Chrome ou Firefox. La dernière version de quasar, qui prend en charge la V3 et l'API de composition. Cependant, au moment où j'enregistre cela, ces cours sont pour U2 et l'API d'options. Cependant, avec toutes les compétences que vous avez acquises dans ce cours, vous devriez être en mesure de suivre ces cours à l'aide de la v3. Je suis l'API de composition. Enfin, j'ai un cours de courte durée où je vous enseigne les bases du HTML, du CSS et du JavaScript. Je vais joindre des liens vers ma chaîne YouTube sur la page Cours à cette conférence. Merci d'avoir regardé, et j'espère que vous aimerez construire des choses avec l'API de composition.