Vue.js 2 Academy : Apprenez Vue étape par étape

1. Bienvenue !: Bienvenue dans le cours Vue.js Academy. Je suis excité de t'avoir avec moi. m'appelle Chris, et je suis un développeur web et aussi un créateur de cours en ligne expérimenté, enseignant des milliers d'étudiants satisfaits. Vue.js est l'un des frameworks JavaScript les plus avancés et à venir disponibles aujourd'hui. C' est aussi l'un des plus amusants à apprendre et il est rempli de nombreuses fonctionnalités étonnantes vous permettant de construire à la fois de petits sites Web jusqu'à des applications complexes d'une seule page. Alors pourquoi choisir ce cours plutôt que d'autres cours Vue.js disponibles ? Eh bien, ce cours adopte une approche basée sur des projets. Nous verrons exactement comment chaque concept que vous apprendrez s'intègre immédiatement dans des projets réels. Le cours est aussi convivial pour les débutants. Nous commençons par construire une application de liste d'invités où nous commencerons par les bases. J' ai fourni un modèle de démarrage [inaudible] pour le premier projet afin que nous puissions plonger directement dans l'apprentissage de ce que Vue.js a à offrir. Au cours de ce projet, vous êtes confiant avec le fonctionnement de Vue, ainsi que les concepts de base tels que la liaison des données, des méthodes, des propriétés informatiques, et bien plus encore. Vous en apprendrez également sur les étapes du cycle de vie de Vue que nous pouvons utiliser. Le projet 2 s'appuie sur ce que nous avons déjà appris jusqu'à présent. Nous vous présentons pour créer des outils et améliorer également notre flux de travail en utilisant les dernières technologies telles que la CLI Vue, Webpack et Bubble aussi. Ce projet sera une application de carte de vœux où l'utilisateur pourra modifier et créer sa propre carte de vœux personnalisée. plus d'être un projet amusant à construire, vous apprendrez tant de techniques, telles que l'utilisation de composants et la façon de transmettre des données entre eux ainsi que l'intégration de votre application avec Firebase pour le stockage d'images. En outre, nous couvrirons l'ajout d'animations et transitions à vos applications pour nous assurer qu'elles se démarquent vraiment. Tout ce que vous apprendrez sera immédiatement mis en pratique dans les projets pour vraiment vous donner une meilleure compréhension de la façon dont ils s'intègrent tous dans des applications réelles. Qu' est-ce que vous attendez ? Appuyez sur le bouton S'inscrire maintenant et découvrez l'un des frameworks JavaScript les plus chauds disponibles aujourd'hui. 2. Qu'est-ce que Vue.js et pourquoi devrais-je l'utiliser ?: Si vous n'êtes pas familier avec les bibliothèques et frameworks vue.js ou JavaScript en général, certaines des questions que vous pouvez poser sont, qu'est-ce que vue.js et pourquoi devrais-je l'apprendre en premier lieu ? Eh bien, vue.js est un cadre JavaScript vraiment amusant et facile à utiliser pour construire des interfaces utilisateur. Le noyau du framework est très léger et rapide, et il peut être utilisé dans des projets de n'importe quelle science, de le déposer facilement dans un site Web ou une application existante à simplement l'utiliser pour contrôler une petite partie, comme l'ajout d'un nouveau composant, jusqu' aux applications d'une page moyenne ou grande. Compte tenu de la taille légère du noyau vue.js, il est toujours emballé avec beaucoup de fonctionnalités que vous apprendrez au cours de ce cours. Le noyau peut également être étendu pour ajouter plus de fonctionnalités, telles que le routage frontal et la gestion de l'état. Si vous avez déjà créé des sites Web, vous devriez déjà connaître HTML, CSS et JavaScript, qui sont les blocs de construction des applications vue.js. Cela signifie que vous pouvez utiliser vos compétences existantes pour [inaudible] augmenter et apprendre encore plus rapidement. Vue.js ne gère que la couche de vue, ce qui signifie que vous êtes libre de l'intégrer à l'un des backends des bibliothèques, ce qui le rend vraiment facile et flexible à adopter. Si vous avez utilisé d'autres frameworks ou bibliothèques comme React, beaucoup de concepts de base seront familiers, tels que l'utilisation d'un DOM virtuel et la construction de composants réutilisables. React est également génial à utiliser aussi, mais à mon avis, vue.js est beaucoup plus facile à commencer, et est également considéré comme surperformant React sur certains tests de performance. Ce ne sont que quelques-unes des raisons pour lesquelles vue.js a vu une énorme augmentation popularité et cherche également à devenir un joueur encore plus grand à l'avenir. Maintenant, nous connaissons certains des avantages de l'utilisation de vue.js, maintenant allons configurer le code Visual Studio, afin que nous puissions sauter directement dans la construction de notre premier projet. 3. Installation du studio visuel: Pour ce cours, nous aurons besoin de quelques choses pour se lever et courir. D' abord, nous avons besoin d'un éditeur de texte. Vous avez peut-être déjà une préférence ou une préférence que vous utilisez déjà. Pour ce cours, j'utiliserai Visual Studio Code, qui est idéal pour le codage JavaScript, et dispose également d'un terminal intégré dont nous aurons besoin plus tard dans le cours. Vous pouvez utiliser n'importe quel éditeur de texte que vous aimez, mais voici quelques options d'éditeur de texte populaires, telles que Atom, Brackets, WebStorm, et bien sûr, Visual Studio Code. Si vous en avez déjà un et que vous avez un navigateur Web, n'hésitez pas à passer à la vidéo suivante. Si ce n'est pas le cas, je vous recommande d'aller sur code.visualstudio.com et de suivre les instructions de téléchargement pour votre plateforme. Une fois que vous avez fait cela, revenez et nous ajouterons quelques plug-ins pour les aider à travailler avec Vue.js. Une fois l'installation terminée, je vais ajouter un plug-in pour ajouter Vue.js aux extraits de code et aussi une mise en évidence de la syntaxe. Si vous ouvrez votre éditeur de texte et cliquez sur l'icône des extensions en bas des options, vous verrez que j'ai déjà Vue 2 Snippets installé. Pour l'installer, vous pouvez cliquer sur la barre de recherche et rechercher Vue 2. Ce que je vais utiliser, c'est Vue 2 Snippets, qui est par [inaudible], puis cliquez sur le bouton d'installation et vous êtes prêt à y aller. Enfin, vous aurez également besoin d'un navigateur web. Je recommande Chrome par Google, mais vous pouvez utiliser n'importe quel navigateur Web que vous aimez. C' est tout pour la configuration initiale. Maintenant, passons dans la construction de notre première application Vue.js. 4. Section d'introduction : les bases de Vue: Comme pour tous mes cours, je n'aime pas perdre de temps à se salir les mains et à construire de vrais projets. Ce cours n'est pas différent et nous allons commencer par créer une application de liste d'invités, où l'utilisateur peut enregistrer ses intérêts dans un événement et faire ajouter le nom à la liste d'invités. Le projet sera relativement simple, mais nous couvrirons toutes les bases. Vous devrez commencer à construire vue.js-ups. Allons-y et commençons. 5. Télécharger le début du projet: Attaché cette vidéo est un projet de démarrage que nous allons utiliser pour sauter directement dans vue js. Je veux télécharger le mien et le placer sur le bureau pour un accès facile. Mais vous pouvez placer le vôtre n'importe où. Tant que c'est pratique pour vous. Maintenant, vous devriez déjà avoir votre éditeur de texte tout configuré. Je vais ouvrir Visual Studio Code, puis une fois qu'il s'ouvre, je vais faire glisser le démarreur du projet dans l'éditeur de texte. Alors jetons un coup d'oeil à ce qui est inclus. Si nous ouvrons le index.html, ce sont juste des données HMO de base. Dans la section tête, nous avons juste quelques balises méta de base, le titre. Nous avons aussi quelques liens vers bootstrap. Nous allons simplement l'utiliser pour un style de base et une mise en page. Le corps du projet commence par un div principal, qui a un identifiant d'application. Ce sera le conteneur principal et nous allons jeter un oeil à cela plus en détail lorsque nous regardons l'instance de vue. Eh bien, vous avez juste quelques lignes et conteneurs de base et quelques informations sur la liste des invités. Si nous ouvrons le dossier du projet, puis si nous double-cliquez sur index.html. Vous pouvez alors voir la structure de base de ce que nous avons. Nous avons une ligne qui contient des informations sur les événements, telles que la date de l'événement, le titre de l'événement et une description. Nous avons également une entrée de texte où l'utilisateur peut ajouter son nom, puis le soumettre pour l'ajouter à la liste des invités. Ensuite, en dessous, nous avons une autre ligne, puis un ensemble en dessous de cela, qui va être l'endroit où tous les noms sont ajoutés. Pour le moment, il n'y a pas encore de noms ajoutés. Mais nous allons ajouter la fonctionnalité dans cette section pour que cela fonctionne. Plus dans le app.css, nous avons juste un style de base juste pour le rendre un peu plus agréable. Le fichier app.js est vide pour l'instant. Mais c'est l'endroit où nous allons ajouter la fonctionnalité JS de vue au fur et à mesure que nous traversons cette section. Ce n'est qu'un aperçu de base de ce qui est inclus dans le projet en tant que paquet de démarrage. Cela deviendra beaucoup plus familier au fur et à mesure que vous passerez par cette section. Ensuite, nous allons regarder comment installer vue js et comment l'ajouter aux projets de démarrage, puis nous allons commencer à travailler dans ce app.js en jetant un oeil à l'instance de vue. 6. Installer Vue.js: Dans la dernière vidéo, nous aurions dû télécharger le démarrage du projet, que j'ai placé sur mon bureau pour un accès facile. Vous devriez également avoir un éditeur de texte prêt à l'emploi. Dans mon cas, j'utilise Visual Studio Code. Dans cette vidéo, nous allons vous montrer quelques exemples de la façon dont nous pouvons commencer à installer Vue.js. Je vais aller sur mon navigateur Web et je vais utiliser Chrome pour le reste de ce cours. Ensuite, nous allons passer à Vue.js.org, qui est le site officiel de Vue.js. Si vous cliquez sur le guide dans le coin supérieur droit, puis une fois qu'il se charge, vous devriez voir un menu de navigation sur la gauche. Pour commencer, nous devons aller au menu d'installation, et il vous fournira quelques options de la façon de commencer. Le premier est comment inclure Vue.js dans les balises de script, sorte que nous pouvons cliquer soit sur la version de développement ou sur la version de production. La version de développement a le mode de débogage et aussi les avertissements. La version de production n'en a pas et elle est minifiée. Tout ce que nous devons faire est de cliquer sur l'un de ces boutons et ensuite nous obtenons le téléchargement, puis nous pouvons enregistrer ces fichiers à l'intérieur de notre application et les lier à l'aide de balises de script. Cette technique est la même que d'inclure n'importe lequel de vos scripts tels que j-query. Une autre option est d'utiliser le lien CDN, que nous utiliserons pour ce projet. Il s'agit d'un lien où la bibliothèque Vue.js est hébergée en externe. Si nous cliquons sur le lien recommandé là, ne serait pas pris à une version hébergée de Vue.js, et c'est la dernière version. Reviendra à cela juste dans un instant. L' option suivante utilise NPM ou Node Package Manager. Nous allons utiliser NPM dans le prochain projet, mais pour l'instant je veux juste garder les choses simples, nous allons nous concentrer sur Vue. js, puis dans les bases. Il y a aussi le Vue.cli, qui est un moyen facile d'échafaudage des projets Vue.js. Encore une fois, nous allons l'utiliser plus tard, mais pour l'instant je vais juste aller au lien CDN, puis cliquer sur le lien, et puis nous avons besoin qu'il copie ce lien URL. Ensuite, si nous retournons à votre éditeur de texte et puis ouvrons les projets. Si nous passons au index.html, quand il va à la section tête juste en dessous du titre, puis ajouter les balises de script, puis nous pouvons ajouter les attributs source, puis coller dans le lien vers la Vue. js, puis enregistrez cela. C' est à quel point il est rapide et facile d'ajouter Vue.js en tant que lien CDN. Avec Vue.js maintenant ajouté à notre application, nous allons maintenant passer à la vidéo suivante où nous allons jeter un coup d'oeil à l'ajout de Vue.Instance. 7. L'instance Vue et l'objet données: Maintenant, nous avons accès à la bibliothèque Vue.js en utilisant ECD et lien. Nous pouvons maintenant commencer à travailler avec l'intérieur de notre fichier app.js. App.js est inclus dans le projet démarre. Vous devriez déjà l'avoir téléchargé. Ce fichier, vous pouvez nommer tout ce que vous voulez. Vous êtes donc libre de choisir si vous préférez. Nous allons commencer par accéder à l'objet vue, ce qui nous permet de créer une nouvelle instance de vue en tapant New View, suivi de la parenthèse et d'un point-virgule. Cette nouvelle instance de vue va essentiellement contrôler notre application et les données HTML à rendre à l'écran. Nous avons ensuite besoin de passer dans un objet d'options, qui contient diverses options, nous allons explorer tout au long de ce cours, comme la vue HTML, élément HTML auquel nous voulions monter. Il contient également toutes nos méthodes et données. D' abord, jetons un oeil à El. Ce mot-clé vous indique l'élément HTML à contrôler. Dans notre cas, nous voulons contrôler la page index.html. Donc, je vais utiliser le conteneur div principal environnant, ce qui donnerait une aide de haut. Donc, nous pouvons définir la valeur de chaîne de el pour être égale à haut avec le préfixe de hachage parce que c'est AID. C' est comme un sélecteur CSS. Donc, si nous voulions contrôler un div avec une classe au lieu d'un ID, nous allons juste remplacer le hachage par un point. Maintenant, nous avons sélectionné nos éléments. Nous voulons travailler avec la propriété data. Cela contient un objet qui stocke toutes les données que nous voulons utiliser à l'intérieur de cette instance de vue. Pour le moment, toutes les données à l'intérieur de notre application sont simplement du HTML simple, lequel Vue.js Clooney n'a aucun contrôle sur. Par exemple, toutes les données relatives aux événements répertoriés, telles que les dates de l'événement, le titre de l'événement et la description de l'événement, sont codées à la main. Nous pouvons changer cela en l'ajoutant à l'objet de données à l'intérieur de notre instance de vue. Je vais donc commencer à transférer ces informations codées à la main sur notre propriété de date. Alors commençons par inclure des dates. Alors sélectionnez la date à partir de là, mettez-la en HTML. Ensuite, si nous allons à notre propriété de dates, nous pouvons définir un nom pour ces dates. Donc, je veux appeler mon EventDate suivi de la colonne, puis à l'intérieur d'une chaîne, nous pouvons ajouter la date à l'intérieur de là. Nous pouvons ensuite faire de même avec le titre de l'événement. Donc, revenez dans la page d'index, si vous mettez le nom de Summer Festival, puis à l'intérieur de nos données, revenez dans notre app.js, puis ensuite nous appellerons ceci le EventTitle. Alors comme avant avec nos jours comme une chaîne. Donc, coller ceci entre les guillemets. Ensuite, nous ferons également la même chose pour la description de l'événement. Alors passez à la page d'index, mettez la description de l'événement, puis juste sous EventTitle, nous allons créer le nom de données EventDescription, puis collez-le en tant que valeur. Donc maintenant, nous avons besoin d'un moyen d'ajouter ces données dans notre HTML. Pour insérer ces données dans notre code, nous le faisons avec une syntaxe de modèle spéciale de doubles accolades. Vous verrez également cela appelé syntaxe moustache ou interpolation de texte. C' est ainsi que nous relions nos données au DOM. Cela signifie également que les données sont réactives et seront mises à jour en cas de changement avec les données. À l'intérieur de ces accolades, nous pouvons ajouter le nom de la propriété date que nous venons de créer. Commençons donc par les EventDates à l'endroit où nous avons mis la date juste avant. Alors sauvegardons cela et actualisons le navigateur, et maintenant nous pouvons voir la date est de retour sur l'écran. Donc cette date fonctionne maintenant parce qu'elle est à l'intérieur des accolades doubles. Donc Vue.js sait chercher ce nom de propriété à l'intérieur de l'objet date que nous venons de créer. Il sera également mis à jour chaque fois que la valeur de EventDate est modifiée. Donc, ce que j'aimerais que vous fassiez maintenant est exactement la même chose pour le EventTitle et aussi l'EventDescription. Alors faites une pause et donnez ça un coup de pouce. Si c'est quelque chose avec lequel vous ne vous sentez pas à l'aise , ne vous inquiétez pas. Je vais continuer maintenant en ajoutant le EventTitle. Alors faites la même chose comme avant. À la place du titre, nous ajouterons les accolades doubles, puis ajouterons le titre EventTitle. Enfin, dans un endroit où nous mettons l'EventDescription ajoutera également l'EventDescription dedans. Alors sauvegardez cela et nous ferons une actualisation finale juste pour vérifier que tout fonctionne bien. Donc ça n'a pas l'air super. Nous avons les dates, le titre, et aussi la description, si [inaudible] de retour sur la page. Mais cette fois, nous avons Vue.js contrôlant les données. Donc enfin, je veux juste finir avec une dernière chose. Parce que ces propriétés de données libres sont liées, je vais les regrouper à l'intérieur de leur propre objet d'événements. C' est totalement facultatif, mais cela a du sens, surtout si nous nous étendons en créant plus d'un événement. Donc, de retour à l'intérieur de la propriété de données, nous voulons créer l'objet d'événements. Ensuite, je vais couper l'EventDate, l'EventTitle et EventDescription, puis m'assurer que ceux-ci sont collés à l'intérieur du nouvel objet d'événement. Maintenant, de retour dans le navigateur, si nous faisons une actualisation, nous voyons que les données disparaissent. C' est parce que nous devons dire à Vue que ces propriétés et maintenant à l'intérieur d'un objet appelé événements. Donc, cela signifie juste faire un changement de plus à l'intérieur de la page d'index. Donc, tout ce que nous avons à faire est nos événements devant EventDates, la même chose avec EventTitle, et enfin la même chose avec EventDescription. Alors appuyez sur sauver. Maintenant, si nous retournons au navigateur et donne un rafraîchissement, nous devrions voir que toutes nos données sont de retour à l'écran. Donc, maintenant, nous avons créé notre instance Vue et regardé comment utiliser l'objet de données pour contrôler un texte à l'intérieur de notre application. Ensuite, nous allons jeter un oeil à la façon dont Vue JS gère les modèles et utilise le DOM virtuel. Je te verrai là-bas. 8. Modèles et le DOM virtuel: Dans la dernière vidéo, nous avons examiné comment créer une instance Vue et aussi comment ajouter des données réactives à notre application. Comment Vue js gère les données pour les rendre réactives et mettre à jour notre page quand il y a un changement ? Mais regardons un peu ce qui se passe en arrière-plan. Si nous allons aux outils de développement du navigateur à l'intérieur de Chrome, nous pouvons y accéder avec un clic droit, puis sélectionnez « Inspecter ». Si va alors sélectionner la Div avec la classe de bloc de carte, nous pouvons jeter un oeil sur le contenu et nous pouvons voir que le titre de l'événement, dates de l'événement, et la description de l'événement est ajouté entre les balises P ou les en-têtes. Donc, la sortie HTML est différente de ce que nous avons tapé à l'intérieur de l'éditeur. Nous n'avons aucune syntaxe double accolade et nous ne pouvons pas voir les noms de nos propriétés de données, telles que le titre de l'événement. C' est parce que Vue.js prend notre code HTML et crée un modèle basé sur lui dans les coulisses. Ce modèle, qui est créé, est inutilisé pour le rendu vers le DOM avec du code HTML valide. L' utilisation d'un modèle au lieu de mettre à jour directement le DOM avec notre code fournit également des avantages supplémentaires. Lorsque nos données, par exemple, sont mises à jour à l'intérieur de l'application, Vue établit ensuite quelles parties du modèle sont modifiées. Vu que Vue sait exactement quelle partie est modifiée, elle ne fera que restituer cette partie de modification du modèle. Donc, en ne faisant que re-rendre la quantité minimale de code au DOM réel. Cela a pour effet de rendre nos applications Vue.js vraiment rapide car la manipulation du DOM est généralement l'une des opérations les plus coûteuses à effectuer. Si vous n'êtes pas familier avec le DOM, il signifie Document Object Model. C' est une représentation structurée d'un document. Dans notre cas, le document étant la page Web. Dans la plupart des cas, le DOM, qui est créé, ressemble à notre code HTML, qui était juste et ici nous voyons une représentation visuelle typique du DOM, qui est comme un arbre d'objets commençant par les éléments HTML sur le dessus, puis nous avons la section de tête et la section de corps, puis tous nos éléments imbriqués contenus dans la section de tête de la section de corps. Donc, cela devrait vous sembler familier si vous avez eu une certaine expérience HTML. Parce que les éléments DOM nécessaires obtenus prend du temps, Vue.js utilise également ce qu'on appelle le DOM virtuel. Ces modèles qui Vue. js crée un compilé en fonctions de rendu DOM virtuelles. Le DOM virtuel est comme une copie du DOM réel et cela permet de voir dans les coulisses pour comparer le DOM réel avec le DOM virtuel et seulement les mises à jour où et quand est nécessaire. Ne vous inquiétez pas trop si vous ne comprenez pas tout à fait ce que tout cela signifie pour l'instant. Nous avons beaucoup de pratique sur la façon dont Vue fonctionne et comment elle rend les modèles au fur et à mesure que vous allez pour le cours. Donc, voici comment Vue.js fonctionne avec les modèles et aussi le DOM virtuel. Je voulais juste vous donner un peu de contexte sur ce qui se passe dans les coulisses quand nous écrivons notre code. Ensuite, nous examinerons l'exploration de données bidirectionnelle à l'aide d'une directive de modèle V. 9. Liaison de données à deux voies avec v-model: Nous avons envisagé de créer notre instance Vue et ajouté les objets de données. Je veux définir une nouvelle propriété de données, mais cette fois je vais l'utiliser avec une directive de vue appelée v-model. Les directives ont un préfixe -v, et vous les verrez beaucoup tout au long de ce cours. Les attributs spéciaux fournis par Vue.JS, qui ajoutent un comportement réactif spécial au DOM en utilisant v-model configure la liaison de données bidirectionnelle. Si vous n'êtes pas familier avec la liaison de données bidirectionnelle, cela signifie simplement que les données peuvent être transmises dans les deux sens. Dans les exemples que nous avons examinés jusqu'à présent, nous pouvons mettre à jour les propriétés à l'intérieur des objets de données, puis ces modifications sont ensuite passées à Vue. Avec la liaison de données bidirectionnelle, nous pouvons encore le faire, mais nous pouvons également mettre à jour les éléments Vue tels que les champs d'entrée et cela met à jour la valeur de nos données. Vue.JS rend ce flux de données bidirectionnel vraiment simple, en nous fournissant cette directive appelée v-model. Commençons par définir v-model sur nos champs de saisie de texte. Si vous passez à notre page index.html, puis localisez nos entrées de texte, nous pouvons ajouter v-model, puis définir le nom de la propriété de données à lier. Donc, dans notre cas, « NewNameText ». Ensuite, nous devons définir NewNameText comme une propriété dans les objets de données. De cette façon, nous pouvons définir la valeur initiale si nous le voulons, et comme il s'agit d'une exploration de données bidirectionnelle, nous pouvons également mettre à jour la valeur avec le champ d'entrée. Donc, dans app.js en dehors de l'objet events ajoutez notre propriété de NewNameText : Donc, je vais définir la valeur initiale de NewNameText pour être égale à une chaîne vide. Nous pouvons ajouter une valeur initiale à l'intérieur de cela si nous le voulons. Donc, pour voir la valeur de NewNameText, nous avons juste besoin de passer à la page index.html, puis utiliser la syntaxe double accolade pour sortir le NewNameText. Maintenant, si nous tapons quelque chose dans le champ de saisie, nous voyons la valeur de NewNameText mis à jour immédiatement. C' est ainsi que nous pouvons utiliser la liaison de données bidirectionnelle avec Vue.JS. Une chose importante à retenir est que Vue.JS ne se soucie pas de l'espace réservé ou de la valeur initiale des champs d'entrée. Les données à l'intérieur de l'instance Vue seront toujours une priorité et considérées comme correctes par rapport à la valeur initiale des champs en entrée. Nous couvrirons l'utilisation du modèle V pesé sur les types d'entrée et les zones de texte plus tard dans le cours. Pour l'instant, passons à autre chose et jetons un coup d'oeil aux gestionnaires d'événements et comment nous pouvons prendre les noms ajoutés à ce champ d'entrée et les pousser dans un tableau. 10. Traitement des événements et méthodes: Maintenant, nous avons examiné la liaison de données bidirectionnelle. Je veux maintenant passer à la capture de la valeur entrée dans les champs d'entrée, puis la pousser dans un tableau. Ce tableau contiendra tous les noms entrés dans le champ d'entrée et ensuite nous pouvons lister tous ces noms à l'intérieur de la section de présence ci-dessous. Nous voulons aller dans le app.js et créer notre tableau vide. Je vais ajouter une nouvelle propriété de données appelée nom d'invité et initialement nous allons définir ceci sur un tableau vide. Maintenant, cela est créé dans index.html. Maintenant, nous devons créer un gestionnaire d'événements pour pousser les noms à ce tableau. Une fois que le bouton de soumission a été pressé, dans vue.js, nous utilisons le V on Directive pour écouter les événements DOM. Ces événements DOM et non spécifiques à view.js. Nous pouvons utiliser n'importe lequel des événements DOM normalement disponibles pour nous, tels que OnClick, keyup, keydown, et bien d'autres encore. Encore une fois, tout comme dans la dernière vidéo où nous utilisons le modèle V, cette directive a également le préfixe v dash. Ensuite, nous localisons nos éléments de formulaire, puis comme un attribut, nous pouvons ajouter notre V sur la directive. Nous ajoutons d'abord V, puis après le deux-points, nous ajoutons le nom du gestionnaire d'événements que nous voulons déclencher. Dans notre cas, nous allons écouter l'événement submit, puis nous ajoutons le nom de la méthode que nous voulons exécuter une fois que le formulaire a été soumis. Après le nom des événements, dans notre cas de mythes, nous pouvons également ajouter des modificateurs d'événements. Un modificateur d'événement commun consiste à empêcher les valeurs par défaut. Si vous utilisez JavaScript pour travailler avec les entrées et les formulaires de tous, vous avez peut-être déjà utilisé le point d'événement de prévention par défaut. Cela arrête le comportement par défaut, qui pour le bouton d'envoi est d'actualiser la page. Peu de gens rendent cela vraiment facile pour nous d'adresser le comportement à nos gestionnaires d'événements simplement en l'ajoutant après le nom du gestionnaire d'événements comme ceci. Empêcher la valeur par défaut, nous arrêterons la perte de nos données lorsque la page est actualisée. Cela aussi sur les modificateurs d'événements, que nous couvrirons plus tard dans ce cours. Pour l'instant, nous avons ajouté le formulaire soumis comme nom de notre méthode, mais pas encore créé à l'intérieur de notre instance de vue. Faisons cela maintenant dans l'application dot js. Tout comme lorsque nous avons ajouté les objets de propriété de données à l'intérieur de l'instance de vue, nous pouvons également utiliser le mot-clé de méthodes réservées. Méthodes prend également un objet, donc nous allons ouvrir un ensemble d'accolades. À l'intérieur, nous pouvons ajouter notre première méthode de formulaires soumis. Cette méthode est déclenchée chaque fois que le formulaire est soumis. Formulaire soumis est une fonction et à l'intérieur cette fonction, nous pouvons commencer par ajouter un journal de console, juste pour vérifier que cela fonctionne bien. Nous voulons enregistrer à la console la valeur du nouveau texte de nom, qui est lié au champ de saisie. Ce mot-clé nous permet d'accéder à toutes les propriétés à l'intérieur de l'instance de vue. Pour accéder à la nouvelle propriété de texte de nom, nous utilisons ce point nouveau texte de nom. Nous l'avons vu beaucoup tout au long du parcours. Maintenant, nous allons revenir à l'application et ensuite aller à l'intérieur de la console. Nous pouvons taper un nom à l'intérieur du champ d'entrée, et nous devrions voir la valeur apparaissant à l'intérieur de la console. Maintenant, nous savons que cette méthode est déclenchée d'accord. Nous pouvons maintenant terminer notre méthode en poussant la nouvelle valeur de nom au tableau de nom d'invité. Supprimons d'abord le journal de la console, et à la place de cela, nous pouvons sélectionner ce nom d'invité point, qui est le nom de notre tableau. Parce qu'il s'agit d'un tableau, nous pouvons utiliser la méthode push. Ensuite, à l'intérieur des crochets, nous allons dire vue.js, Ce que nous voulons pousser sur le tableau. Dans notre cas, nous voulons pousser la valeur des champs de saisie, afin que nous puissions sélectionner notre mot à ce, point nouveau texte de nom. Ensuite, pour terminer cette méthode, la dernière chose que je veux faire est une fois qu'un nom est ajouté au tableau, nous voulons juste effacer le champ de saisie en définissant ce nouveau texte de nom de point à nouveau défini sur une chaîne vide. Pour voir les valeurs qui sont à l'intérieur du tableau, nous pouvons utiliser à nouveau l'interpolation des textes, ou la syntaxe des accolades double pour sortir ceci dans le index.html. Si nous recherchons le titre de niveau quatre, qui a le texte d'aucun nom ajouté, nous pouvons utiliser la syntaxe d'accolade pour sortir le tableau de noms d'invités. Maintenant, sauvegardons cela et nous nous dirigeons vers Chrome et rafraîchissons le navigateur. Nous pouvons maintenant ajouter des noms au champ de saisie et maintenant nous avons appuyé sur Soumettre. Cela devrait maintenant être poussé vers le tableau, puis envoyé à l'écran. Nous avons maintenant les nouveaux noms ajoutés au tableau, ce qui est génial. Les noms s'affichent juste comme ils sont à l'intérieur du tableau, donc pour le moment, il ne semble pas très bon. Mais ne vous inquiétez pas, nous allons corriger ça dans la prochaine vidéo. Nous allons jeter un oeil au rendu de liste avec For boucles. 11. Rendu de liste: Nous prenons maintenant les entrées de nom des utilisateurs et poussons à un tableau lorsque le bouton de soumission est appuyé. Nous l'avons fait en ajoutant un écouteur d'événement au formulaire, puis en appelant une méthode lorsque le formulaire est soumis. Cette méthode à l'intérieur de l'instance Vue est un code JavaScript qui prend le contenu du champ d'entrée stocké à l'intérieur de nouveaux textes de nom, puis le pousse à ce tableau GuestName. Maintenant, nous avons le tableau GuestName que nous voulons parcourir ces noms, puis les rendre à l'écran. Vue.js, comme JavaScript normal peut le faire avec une boucle for. Cependant, Vue rend la création d'une boucle for beaucoup plus simple et plus propre que l'utilisation de JavaScript Vanilla. Tout ce que nous devons faire, c'est créer une directive V-for comme celle-ci. Si nous passons à la page Index.html, puis faites défiler vers le bas vers la Bombe. Si nous cherchons la div avec une classe de cartes-succès arrondie et nom-boîte, nous allons ajouter notre boucle for à cette div. Donc, ajouter ceci pour la boucle est aussi simple que d'ajouter des attributs, tout comme avant quand nous avons utilisé v-model mais cette fois nous utilisons v-for, et ensuite ce qui est défini est d'être égal au nom dans GuestName. Donc ce prénom est totalement à vous, vous pouvez le nommer tout ce que vous voulez. C' est juste un alias pour chaque élément de tableau qui va boucler, GuestName est le nom du tableau source donc c'est celui que nous venons créer avant et il sort le contenu de cette boucle for, nous utilisons à nouveau l'interpolation. Donc, vous voyez des accolades doubles, puis nous tapons le nom, que nous avons utilisé dans la boucle for. Donc maintenant, nous pouvons enregistrer cela, rafraîchir le navigateur et maintenant si nous allons aux entrées, nous pouvons commencer à ajouter des noms et nous les voyons maintenant sortis à l' écran, mais cette fois en utilisant une boucle pour v-for peut également être ajouté aux éléments au-dessus. Nous ne sommes pas seulement limités à admettre une div. Il peut être ajouté à une plage, à balises de paragraphe ou à tout ce que vous voulez. Donc maintenant, nous voyons le contenu de l'affichage du tableau deux fois, une fois en utilisant la boucle for, puis une fois de la dernière vidéo, où nous avons sorti le nom d'invité/ avec le nom d'hôte à l'intérieur des accolades et enregistrez cela et maintenant nous sommes juste à gauche avec le contenu de la boucle for. Donc, c'est à quel point est facile de créer une boucle for en utilisant Vue.js. Passons maintenant au rendu conditionnel où nous examinerons les instructions if else en utilisant Vue. 12. Rendu conditionnel dans Vue: Notre application arrive maintenant bien. Lorsque nous ajoutons un nom à la boîte de saisie et appuyez sur « Soumettre », le nom est ajouté à la div participante en bas. Comme vous pouvez le voir, nous avons encore le texte disant aucun nom ajouté. Nous voulons maintenant examiner le rendu conditionnel. Le rendu conditionnel n'est pas aussi compliqué que cela puisse paraître. Il rendra simplement du contenu en fonction des circonstances tout comme une instruction JavaScript if-else normale, si vous êtes familier avec celles-ci. Dans notre cas, s'il y a des noms à l'intérieur du tableau de noms d'invités, nous voulons les afficher en bas. S' il n'y a pas de noms à l'intérieur du tableau, nous voulons seulement afficher le texte indiquant aucun nom encore ajouté. Nous pouvons ajouter cela dans la page index.html. Si nous localisons la div avec la classe de bloc de carte, à l'intérieur de notre div avec la classe de bloc de carte, nous avons deux divs à l'intérieur. Le premier est l'endroit où nous voulons faire une boucle à travers les noms et les afficher à l'intérieur des balises div. Je vais ajouter une déclaration if-à cette div. Vue nous rend vraiment facile de faire avec la directive v-if. Une fois que vous ajoutez ceci en tant qu'attribut, nous voulons vérifier si la longueur du tableau de noms d'invités est supérieure à zéro. S' il y a des noms dans le tableau, la condition devient vraie et le div est ensuite rendu à l'écran. Sinon, si le tableau est vide, la condition est fausse. Le div suivant sera rendu si nous ajoutons une instruction v-else. Alors ajoutons v-else à la div suivante. Pour que le v-else fonctionne, il doit immédiatement suivre les éléments avec la directive v-if. Si par exemple, il y avait un autre div entre ces deux, l'instruction else ne fonctionnerait pas. Donnez cela une sauvegarde et dirigez-vous vers le navigateur et donnez-lui une actualisation. Maintenant, nous allons voir la déclaration disant aucun nom ajouté encore. Ensuite, si nous montons à notre boîte de saisie et ajoutons un nom, nous voyons le nom est ajouté et aussi le texte est supprimé. Tels fonctionnent bien et je veux ajouter un JavaScript normal si déclaration à notre méthode soumise de formulaire et la raison en est si nous passons à notre formulaire, et nous entrons un nom, nous pouvons voir ajouté à la liste. Donc, c'est bien. Cependant, si nous allons simplement à l'entrée et appuyez sur Entrée sans nom, nous pouvons toujours voir que quelque chose est ajouté au tableau. Autre que cela, if-statement s'assurera que ce nom doit être entré avant qu'il ne soit poussé dans le tableau. Nous pouvons le faire dans la méthode de formulaire soumis dans le fichier app.js. À l'intérieur du corps de la fonction, nous allons construire le code existant avec un if-instructions et la condition que nous voulons vérifier est si this.NewNameText. La longueur est supérieure à zéro ou si certains caractères ont été entrés, alors nous voulons aller de l'avant et pousser ceci dans le tableau. Donnons cela un sauvegardé et testez cela dans le navigateur. Si nous appuyons sur « Entrée » sur l'entrée du formulaire, nous voyons qu'aucun nouveau nom n'a été ajouté au tableau. Ajoutons simplement un nouveau nom et un test qui fonctionne bien. Là, nous allons donc tout le p va bien. La dernière chose que je veux faire dans cette vidéo est d'afficher le nombre d'invités présents ou le nombre de noms que nous avons à l'intérieur du tableau. Vous pouvez voir si vous cherchez juste au-dessus des noms, nous pouvons voir qu'il y a un div avec la classe d'en-tête de carte avec une section participante. À l'intérieur des parenthèses, je vais ajouter les accolades doubles, puis savoir combien de noms est à l'intérieur du tableau de noms d'invités. Nous tapons simplement Guestname.length et cela produira combien d'éléments sont à l'intérieur du tableau. Sauvegardons cela et ajoutons des noms au tableau et voyons si cela fonctionne. Super. Donc, nous voyons que cela augmente d'un avec chaque nom. Maintenant, cela fonctionne parce que la longueur des points est juste une propriété JavaScript et nous pouvons ajouter n'importe quel JavaScript que nous voulons à l'intérieur de ces accolades doubles. Nous ne nous limitons pas à extraire des données de notre instance Vue. Par exemple, si nous ajoutons 8 plus 10 également à l'intérieur des accolades doubles, puis passez à notre application, nous pouvons voir que 10 est ajouté à chaque nombre. Donc, nous allons simplement supprimer cela parce que ce n'est pas nécessaire pour notre application. Espérons que vous pouvez maintenant voir que nous pouvons maintenant mélanger des données Vue et aussi JavaScript Vanilla et nous allons regarder cela plus tard dans le cours, mais pour l'instant c'est ainsi que les instructions de rendu conditionnel ou if-else fonctionnent dans Vue JS et vous pouvez maintenant voir à quel point il est simple de travailler avec eux. 13. Lier des éléments aux attributs: Je veux maintenant vous montrer comment utiliser une directive appelée v-bind. Nous utilisons cette directive pour travailler avec des attributs HTML normaux tels que class, source et les attributs href. Ce ne sont que des attributs HTML normaux. Cependant, nous ne pouvons pas leur transmettre des données réactives en utilisant la syntaxe double accolade. Donc, dans le index.html, si nous localisons la date d'événement div avec la classe de card-header, il essaierait d'ajouter une nouvelle classe avec le nom de [inaudible] et d'ajouter ceci en utilisant une syntaxe double accolade, cela ne fonctionnera pas réellement. Donc, pour le démontrer, ajoutons une nouvelle propriété dans app.js à l'intérieur des objets de données, juste en dessous du tableau GuestName. Alors ajoutons 'FormSubmitClass'. Nous allons l'utiliser pour ajouter un nouveau nom de classe chaque fois que notre formulaire est soumis. Pour changer la couleur d'arrière-plan de la carte div dirigée et aussi le bouton bleu au vert, je vais d'abord définir ceci pour être une chaîne vide. Pour commencer, parce que nous voulons seulement ajouter une classe lorsque le formulaire est réellement soumis, donc dans la méthode form submit, tout en bas, je vais ajouter la FormSubmitClass, et ensuite nous pouvons définir ceci pour être quelque chose de nouveau chaque fois que le formulaire est soumis. Donc, je vais définir ceci comme une chaîne de texte de Soumis. Donc maintenant, chaque fois qu'un formulaire est soumis, FormSubmitClass sera défini sur la valeur Soumis. Maintenant, dans le CSS, nous pouvons définir le SubmittedClass pour avoir une couleur de fond de vert. Alors sauvegardons cela et passons au navigateur. Ainsi, vous pouvez voir si nous actualisons, puis appuyez sur le bouton Soumettre, que la couleur d'arrière-plan ne change pas. Donc, ce comportement est attendu parce que nous avons mentionné précédemment que les cartes ajoutent des données dynamiques comme un attribut. Donc, pour appliquer cette classe en HTML, nous devons faire deux choses. abord, nous devons supprimer les accolades de la classe et juste avoir la propriété de données à l'intérieur des causations. Ensuite, nous devons ajouter le préfixe v-bind au nom de l'attribut. Donc maintenant, il vaut la peine de noter comme vous pouvez le voir à l'intérieur de cet élément, nous avons deux attributs de classe. L' un est la classe HTML statique que vous pouvez toujours utiliser et aussi celle que nous venons d'ajouter avec v-bind, qui est réactive et sous le contrôle de view.js. Nous pouvons également lier cet attribut à plus d'un élément. Donc, ajoutons le FormSubmitClass au SubmitButton, aussi. Cela signifie également que si nos données changent, la mise à jour sera également reflétée partout . Alors maintenant, donnons-le un coup d'envoi. Si nous sauvegardons cela, puis actualisons le navigateur et ajoutons un nom, nous pouvons voir une fois le formulaire soumis que nous obtenons la nouvelle couleur d'arrière-plan. Donc, juste comme un résumé rapide de ce que nous avons fait là-bas, nous sommes allés dans la page HTML, puis avons ajouté une classe de FormSubmitClass. Ensuite, à l'intérieur de nos objets de données, nous avons défini cette FormSubmitClass pour être vide à l'origine. Donc, cela signifie qu'au départ aucun nouveau style n'est ajouté. Nous avons ensuite changé sa chaîne vide pour être le texte de Soumis, juste en dessous à l'intérieur de la méthode FormSubmit. Ainsi, chaque fois que le formulaire est soumis, le texte de Soumis est ajouté en tant que classe. Donc, nous ne sommes pas limités à la simple liaison aux classes, mais combinés à n'importe quel attribut HTML normal aussi, comme nous pouvons ajouter un attribut source si nous travaillons avec des images et que le chemin du fichier image est contrôlé par vue. La même chose avec l'ajout des attributs de style, et c'est ce que nous allons regarder dans la vidéo suivante. 14. Styles de lien: Maintenant, nous savons comment utiliser la directive v-bind pour lier vue.js avec des attributs HTML. Maintenant, regardons comment utiliser la même directive que les attributs de style. Non, nous ne pouvons pas passer une double accolade ou l'interpolation, que vous avez signalé dans la dernière vidéo. Cependant, cette fois, nous pouvons utiliser les accolades simples. C' est parce que nous passons dans un style des objets et des objets à l'intérieur d'un JavaScript qui est entouré d'accolades. Tout comme notre objet de données à l'intérieur de l'instance de vue. Si vous avez utilisé, réagissez. JS avant, cette façon d'un style en ligne vous semblera familier. Donc, si nous passons à notre fichier CSS pour la ligne, puis cliquez sur le haut de la marge de 25 pixels. Quand je veux prendre cela en dehors du CSS et le placer dans notre HTML. Donc, dans la page d'index, si nous localisons la div avec la classe de la ligne, qui est juste au-dessus du titre de niveau un de la liste d'invités. Je vais lier des attributs de style à cette ligne, puis définir également la valeur à l'intérieur d'un objet, puis coller en haut de la marge. Il va juste le copier à partir du CSS. Alors gardons ça et donnez-nous un coup de pouce pour voir ce qui se passe. Donc, si nous actualisons le navigateur, nous pouvons voir qu'il y a une page blanche. Donc, cela ne semble pas fonctionner. Si nous faisons un clic droit et allons inspecter pour ouvrir les outils de développement, nous pouvons voir à l'intérieur de la « Console » qu'il y a un message d'erreur rouge. Donc, nous obtenons cette erreur parce que c'est JavaScripts, Entre les accolades et nous devons nommer les propriétés CSS en utilisant le cas de chameau. Cela signifie que le premier mot est minuscule, puis chaque mot suivant commence par une lettre majuscule comme celle-ci. Donc, la marge est minuscule, suivie par le haut avec un T Ensuite, notez également que la valeur de 25 pixels est une chaîne. Donc, nous pouvons envelopper cela dans nos citations et supprimer le point-virgule. Voyons voir à quoi ça ressemble maintenant. Alors enregistrez et puis passez au navigateur. Donc tout a l'air comme il se doit, ce qui est génial. Il existe également une autre façon d'ajouter des styles à notre application. Nous pouvons également déclarer notre style à l'intérieur de l'instance de vue comme une propriété de données. Alors revenez dans l'application. j s, sous le formulaire soumis classe que nous avons créé dans la dernière vidéo. Je vais ajouter une nouvelle propriété de date appelée « AppStyles ». Cela va être défini sur un objet. Ensuite, à l'intérieur de cet objet, je vais ajouter la même classe de marge haut, à nouveau en utilisant le boîtier de chameau et réglé à 25 pixels. Maintenant, comme nous l' avons mentionné, nous ne pouvons pas injecter ces données réactives dans notre HTML avec les accolades doubles. Nous ne pouvions pas utiliser des accolades doubles du tout avec des attributs. Cela inclut les attributs de style. Donc, au lieu de cela, plus dans le HTML, nous pouvons l'inclure dans les guillemets. Nous allons supprimer l'objet existant et ajouter nos nouveaux styles d'application à l'intérieur de là. Ce code HTML fait référence à une donnée à l'intérieur de notre objet de styles d'application. Bien sûr, nous pouvons également ajouter plus de styles à l'intérieur de ces objets si nous le voulons. Ou vous pouvez utiliser cet objet plusieurs fois dans notre application. Ce style particulier s'applique à tous nos div libres avec la classe de ligne. Alors réutilisons cela sur tous nos div gratuits pour obtenir le bon style. Donc, je vais copier la propriété de style. Je le colle dans la deuxième rangée. Ensuite, faites la même chose pour la troisième rangée. Alors testons ça. Appuyez sur Enregistrer, puis passez au navigateur. Nous pouvons voir que l'application ressemble à la normale. Donc juste pour vérifier, tout fonctionne bien. Je vais revenir à l'objet AppStyles une fois de plus et ajouter une couleur de rouge. Comme vous pouvez le voir, toutes les modifications que vous apportez à l'objet de style sont modifiées dans l'application. Donc, c'est quelques façons différentes d'ajouter CSS à notre application. Nous l'utiliserons également dans le prochain projet. Mais pour l'instant, nous passons à la prochaine vidéo. Nous allons examiner la syntaxe abrégée. 15. Syntaxe abrégée Vue: Comme il commence à construire de plus grands projets à la fois plus tard dans ce cours et, espérons-le, sur votre propre dans le futur. Il vaut la peine de connaître quelques façons de rendre notre code un peu plus compact. Même dans la petite application jusqu'à présent, nous avons déjà utilisé le V sur et V lie plusieurs fois déjà. Pour cette raison, view nous fournit un petit raccourci pour rendre la syntaxe plus compacte. Pour le V par sous-actif, tout ce que nous avons réellement à faire est de supprimer les liaisons V, ne laissant que le deux-points et l'attribut que nous lions. Ouvrons notre index.html et continuons et remplacons tous nos attributs de liaison par la syntaxe abrégée. Je vais te montrer le premier. Si nous allons à la première ligne, nous trouvons le style des styles d'application. Nous avons juste besoin de supprimer la liaison V, ne laissant que le deux-points et le style, et bien sûr, c'est quelque chose que vous pourriez aller de l'avant et faire vous-même si vous voulez mettre la vidéo en pause et aller à la page d'index et nous donner un coup de pouce, puis bien sûr, revenez une fois terminé. Je vais continuer à avancer vers le bas et à changer ça. Nous avons également la deuxième ligne juste en dessous avec les styles d'application aussi. Changeons ça. Nous n'avons pas le « en-tête de carte » avec la classe de formulaire « soumettre la classe ». Changeons cela, puis faites défiler vers le bas. Nous avons également la classe du côté de l'entrée, puis un peu plus bas, il semble que la dernière est la dernière ligne avec la classe des « styles d'application ». Changeons ça. Mais est aussi un raccourci pour lors de l'utilisation v-on. Nous avons utilisé v-on à l'intérieur des éléments de formulaire pour déclencher une méthode chaque fois que le formulaire a été soumis. Au lieu d'utiliser v-on, nous pouvons simplement remplacer cela par le symbole at. Allons de l'avant et remplacons ça maintenant. Disons cela et vérifions simplement qu'il fonctionne toujours dans l'application. Notre style semble fonctionner aussi. Il semble que les classes le lient toujours, et maintenant si nous ajoutons un nom à l'entrée du formulaire, nous voyons que le nom est toujours ajouté à la liste des invités, ce qui signifie que le bouton de soumission fonctionne toujours. La syntaxe abrégée est facultative et la mauvaise façon est totalement bien. Comme vue JS traite toujours en arrière-plan. Mais pour le reste de ce cours, nous utiliserons la syntaxe la plus courte juste pour garder notre code plus compact. 16. Sortie de texte et HTML: Jusqu' à présent, dans ce cours, nous avons sorti des données réactives en utilisant l'interpolation ou la syntaxe double accolade. Maintenant, je veux vous présenter quelques directives supplémentaires que vous pourriez rencontrer beaucoup d'utiles lors de la sortie de données. Le premier est un texte simple appelé v-text. V-text est utilisé pour obtenir le contenu du texte des éléments. Le contenu du texte, définit ou renvoie le contenu du texte d'un élément. Nous pouvons l'utiliser comme une alternative aux accolades doubles pour exécuter le texte comme ceci si nous allons sur notre page d'index et localisons le bloc de carte, qui contient les informations d'événement. À l'intérieur du niveau de titre, nous pouvons ajouter le v-text en tant qu'attributs et également définir cela égal à event.event title. Vous remarquerez peut-être que nous avons event.event title deux fois ; l' un utilise v-text et l'autre utilise l'interpolation du texte original. Cependant, si nous allons dans le navigateur et actualisons, nous ne pouvons voir ce titre affiché qu'une seule fois. Cela est dû au fait que l'utilisation originale du titre besoin double accolades est remplacée par la définition des attributs de contenu de texte. Nous pouvons le prouver en passant à v-text et en changeant ceci en event.EventTitle2. Ensuite, si nous passons à app.js, nous pouvons ajouter notre EventTitle2, juste en dessous du titre de l'événement original et voulons définir ceci à une chaîne de sortie v-text afin que nous puissions voir clairement la différence. Une fois que vous avez ajouté, passons au navigateur, puis actualisons. Nous pouvons encore voir que le texte en V sera prioritaire même si les accolades doubles sont toujours en place. La prochaine directive que je veux examiner est v-html. V-text, que nous venons d'examiner, met à jour le contenu du texte des éléments. Alors qu'en utilisant v-html, nous obtenons les éléments en HTML. Vous pouvez être familier avec certains en HTML si vous avez déjà utilisé JavaScript. v-html si vous avez l'habitude de sortir du HTML réel. Si nous avons essayé d'ajouter du code HTML à l'intérieur des accolades doubles, il sera interprété comme du texte brut. Jetons un coup d'oeil à cela en action, si nous revenons à la page d'index avec nos informations d'événement. Si nous découpons le texte ou ajoutons le nom à la liste des invités pour des offres exclusives. Ça pourrait le faire. Ensuite, si nous passons au app.js, nous pouvons ajouter une nouvelle propriété de dates de textes d'inscription, puis coller ceci sous forme de chaîne, alors enregistrez cela et puis si vous ajoutez du contenu, comme ajouter les balises m autour du mot exclusif. Maintenant, nous allons faire montrer le texte et HTML. Essayons de rendre cela dans la page d'index. Si nous revenons à l'endroit où nous venons de découper le texte et nous allons essayer de sortir cela avec les accolades doubles, donc event.signupText et ensuite enregistrer cela. Si nous actualisons le navigateur, le HTML est sorti sous forme de texte, de sorte que nous pouvons voir les balises HTML. Ce n'est pas ce qu'on veut. Au lieu de l'afficher correctement, nous devons ajouter le texte d'inscription à la directive v-html. Ajoutons v html comme un attribut, puis supprimez les accolades et maintenant je frappe « Enregistrer ». Maintenant, si nous actualisons les données sont rendues en HTML et nous avons maintenant le mot exclusif souligné comme nous l'avions prévu. Nous devons cependant être prudents lorsque vous utilisez v-html pour des raisons de sécurité. Partout où du HTML est ajouté dynamiquement à notre site Web, nous ne devrions utiliser v-html que sur du contenu fiable. Nous ne devons pas permettre qu'il soit utilisé lorsque le contenu est fourni par un utilisateur final, car cela peut conduire à des attaques de script intersite, alors soyez conscient de cela. De plus, si nous travaillons uniquement avec du texte, utiliser v-text pour obtenir le contenu du texte peut être plus sûr et aussi aider à lutter contre ces attaques. Il peut également avoir de meilleures performances pour le texte brut 2, car un texte n'est pas passé en HTML. Enfin, la dernière directive que je veux vous montrer dans cette vidéo est v-once. Cela ne peut être utilisé pour rendre les données qu'une seule fois. Une fois que les données sont rendues à l'aide de la vue, si les données sont inchangées, les éléments ou les composants ne seront pas mis à jour ou rendus à nouveau. Cela peut être utilisé pour optimiser les performances de notre application afin d'éviter un nouveau rendu inutile. Notre titre d'événement peut être un bon cas d'utilisation pour cela, car nous pouvons nous attendre à ce qu'une fois un événement créé, le nom reste le même. Tout ce que nous devons faire pour activer le seul rendu est d'ajouter la directive v-once aux éléments. Supprimons cet attribut v-text, puis remplacons-le par v-once. Cela signifie maintenant que les données ne seront chargées qu'une seule fois et pas pour toute modification de données à l'avenir. Nous ne pouvons pas démontrer actuellement puisque nous n'utilisons pas de serveur Web pour servir notre page pour le moment , de sorte que les données ne seront pas mises à jour de toute façon à partir de l'instance de vue. Nous avons simplement ouvert la page d'index pour l'afficher dans le navigateur. Nous pouvons le voir en action dans une vidéo ultérieure, où nous utiliserons un serveur de développement. Mais pour l'instant, vous pouvez voir que cela est disponible si nécessaire. C' est ainsi que nous pouvons utiliser les directives v-text, v-html et v-once. Ensuite, examinons une alternative au v-if, que nous avons examinée au début de cette section. 17. V-if ou v-show: Nous avons examiné la directive v-if plus tôt dans cette section. Cela nous a permis d'afficher les noms d'invités dans la div en bas de la page si des noms existent. Sinon, nous affichons le texte de aucun nom ajouté encore. Il existe aussi une syntaxe alternative que Vue.js met à notre disposition appelée v-show. C' est aussi une directive qui rend conditionnellement un contenu, tout comme lors de l'utilisation de v-if. Cependant, il y a certaines différences que nous examinerons maintenant. abord, si nous allons à notre page d'index et cherchons les déclarations v-if, cela change en v-show. Si nous sauvegardons cela et puis passons à notre application et puis appuyez sur Actualiser, la première chose que nous verrons est le texte à l'intérieur de la condition else est parti. Ce comportement est attendu. Bien sûr, une déclaration v-else ne peut suivre qu'une déclaration v-if. Si nous allons à la console, nous pouvons voir que cette erreur est surlignée à l'intérieur. Il y a aussi une autre différence qui se passe dans les coulisses, qui concerne la façon dont l'élément est rendu. Lors de l'utilisation de v-if, l'élément auquel il est lié est ajouté au DOM lorsque la condition devient vraie, puis il est détruit ou complètement supprimé du DOM lorsque la condition devient fausse. Donc, parce que v-if n'est rendu qu'en cas de besoin, il peut économiser du temps de rendu si c'est un problème. V-show fonctionne un peu différemment. L' élément v-show est attaché à est toujours rendu, que la condition soit vraie ou fausse pour commencer. Il est ensuite activé ou désactivé en modifiant la propriété d'affichage CSS. Jetons un coup d'oeil à cela en action. Si nous ouvrons les outils de développement et allons à Inspecter, nous pouvons le voir en action en sélectionnant la div à l'intérieur de la carte div, que la propriété d'affichage est définie sur none, ce qui a pour effet de masquer les éléments. Si nous ajoutons ensuite un nom au champ d'entrée, nous voyons que la propriété d'affichage de none est alors supprimée et nous voyons maintenant que les balises div avec le nom sont ajoutées. Dans le cas de cette application particulière, nous devons également utiliser la directive v-else. Donc, je vais m'en tenir à l'utilisation de v-if et v-else. Cependant, l'utilisation de v-show est une bonne alternative si vous voulez garder vos éléments à l'intérieur du DOM et simplement les cacher, plutôt que de détruire complètement et de re-rendre dans le DOM si nécessaire. La différence de performance entre le basculement de la propriété d'affichage et le rendu en utilisant v-if peut ne jamais être un problème pour vous, mais il vaut la peine de connaître la différence, en particulier sur les applications à grande échelle. 18. Utiliser les expressions Javascript: À l'intérieur de notre application, nous avons affiché des données interactives en ajoutant des propriétés de dates dans notre instance de vue. Ensuite, je les mettrai en utilisant les accolades doubles. Lorsque vous utilisez ces accolades, nous pouvons faire plus que simplement ajouter le nom de la propriété date que vous souhaitez afficher dans nos modèles. Nous pouvons réellement utiliser des expressions JavaScript ou même combiner nos données de vue avec JavaScript régulier. abord, passons à notre app.js et ajoutons quelques noms dans notre tableau de noms d'invités. Juste pour afficher initialement, vous pouvez utiliser tous les noms que vous voulez. Je vais ajouter les noms de James, Chris et Sam. Si vous utilisez des noms différents, assurez-vous que ces noms et mélangés. Ils ne sont pas par ordre alphabétique. On verra pourquoi bientôt. Sauve ça. Si nous passons au navigateur, nous pouvons voir que ces noms sont initialement ajoutés. Maintenant, passons à notre page d'index et voyons comment nous pouvons utiliser expressions JavaScript à l'intérieur de nos accolades doubles. Actuellement à l'intérieur de la boucle complète, nous sortons le nom. Nous pouvons combiner cela avec JavaScript, par exemple en utilisant deux minuscules. Cela permettra de s'assurer que toute capsule comme à l'intérieur du nom est modifiée en minuscules. Jetons un coup d'oeil à cela dans le navigateur. Maintenant, nous pouvons voir que la première lettre de chaque nom est maintenant minuscule. C' est un mélange d'utilisation de vue.js et de JavaScript régulier. Nous pouvons également aller encore plus loin et ajouter une chaîne jusqu'à la fin de cela. Nom point deux minuscules, puis plus une chaîne de est génial. Donne-lui un coup de pouce. Ensuite, dans Chrome, actualisons. Maintenant, nous avons la chaîne ajoutée à la fin du nom. Il y a une limitation, cependant, que nous ne pouvons utiliser qu'une seule expression JavaScript. On ne peut pas utiliser des choses comme une déclaration if-else à l'intérieur d'ici. Ce n'est pas non plus le chemin à parcourir si nous utilisons le même code encore et encore. Restreindre la quantité de JavaScript que nous pouvons utiliser à l'intérieur de nos modèles rend notre code plus gérable. Comme alors, nous devons déplacer toute logique complexe à l'intérieur de l'instance de vue. Cela rend notre code plus réutilisable. Nous pouvons le réutiliser dans différentes zones de notre application en cas de besoin. Nous allons examiner comment gérer des conditions plus complexes dans la section suivante. Mais cela est utile pour effectuer des tâches simples. Nous avons également accès à toute la puissance de JavaScript, même si vous n'utilisez pas les données vue.js. Ajouter de petites accolades juste en dessous. Par exemple, nous pouvons ajouter un calcul mathématique. Cinq divisés par deux. Voyons ça à l'écran. Ok, et aussi souffler ça, si nous revenons à la page d'index, nous pouvons ajouter un point mathématique aléatoire par exemple. Math point aléatoire entre les accolades, puis enregistrer. Maintenant, nous pouvons également voir le nombre aléatoire sur l'écran aussi, eh bien, pas seulement limité à la sortie et ce JavaScript en utilisant des accolades doubles. Vous pouvez également l'utiliser partout où nous avons accès à notre instance de vue. Par exemple, nous pouvons également l'utiliser dans notre directive V HTML dans les citations. Allons à la directive HTML V. Ensuite, à l'intérieur des citations, nous pouvons ajouter des points mathématiques aléatoires et enregistrer cela. Maintenant, si nous actualisons la page et vérifions, nous voyons un nombre aléatoire maintenant à l'écran. Je vais juste revenir rapidement au nom et enregistrer cela. C' est ainsi que nous pouvons utiliser toute la puissance de JavaScript à l'intérieur de nos modèles de vue. 19. Section d'outro : les bases de Vue: Félicitations pour avoir atteint la fin de cette section. Espérons que vous pouvez déjà voir comment amusant et facile est de commencer avec vue JS. Vous avez déjà appris beaucoup de nouveaux concepts, tels que la configuration de l'instance de vue, la liaison de données bidirectionnelle, la gestion des événements, la gestion des listes et bien plus encore. Dans la section suivante, nous allons accélérer un peu les choses en couvrant des sujets de vue encore plus essentiels, ainsi que en remplissant notre demande de liste d'invités. 20. Section d'intro : examen approfondi de Vue: Bienvenue dans cette nouvelle section. Nous allons commencer à examiner plus en profondeur ce que Vue.js a à offrir. Nous continuerons à développer notre liste d'invités en ajoutant de nouvelles fonctionnalités et en apprenant plus sur Vue.js, telles que les propriétés calculées, les montres et les filtres. À la fin de cette section, vous aurez une bonne compréhension de beaucoup de l' essentiel Vue.js et comment tout cela s'intègre après avoir terminé votre premier projet. Commençons tout de suite avec une note améliorée en ajoutant une barre de progression. 21. Ajouter une barre de progression: Dans cette vidéo, nous allons ajouter une barre de progression à notre application. Nous allons également limiter le nombre de noms que nous pouvons ajouter à nos événements sur la liste des invités. Cette barre de progression augmentera ensuite en pourcentage à mesure que le tableau de noms d'invités se remplit. Cela nous donnera une chance d'obtenir plus de pratique en ajoutant des données réactives à notre application, et aussi lier dans les attributs de style que nous avons abordés dans la dernière section. Commençons par supprimer la couleur verte, lorsque le formulaire est soumis car nous aurons maintenant une indication visuelle avec la barre de progression. Plus dans le index.html, supprimons les classes de liaison qui ont été ajoutées dans la dernière section. Sélectionnez Supprimer FormSubmitClass de tous les emplacements. Supprimons également cela de l'objet de données dans app.js. Allons-y et supprimons cela de l'objet de données. Ensuite, nous allons supprimer la référence FormSubmitClass de notre méthode. Ensuite, enfin, nous n'avons pas besoin des styles soumis dans app.css, vous pouvez également les supprimer aussi. Maintenant que c'est pris en charge, nous pouvons retourner à la page Index et nous pouvons commencer à ajouter notre barre de progression. Je vais ajouter ceci près du bas de la page. Si nous recherchons le texte présent, qui affiche combien de noms sont sur la liste. Juste en dessous de cela, je vais ajouter une balise de pause, puis ajouter une barre de progression HTML5. Ce qui vient être une barre de progression simple pour l'instant. Nous pouvons enregistrer et vérifier qu'il apparaît à l'écran. Super, nous voulons que cette barre de progression augmente chaque fois qu'un nom est ajouté à la liste des invités. Pour ce faire, nous devons établir un pourcentage. Plus dans le app.js, je vais ajouter deux nouvelles propriétés de données aux objets de données. Le premier sera la capacité de l'événement afin que vous puissiez définir le nombre de noms que vous voulez au maximum. Je vais dire que la capacité de l'événement est initialement de 25. Ensuite, juste en dessous de cela, je vais également définir l'EventCapacityPourcentage. Cela va juste être réglé comme zéro initialement. Nous l'utilisons pour déterminer à quel point l'événement est complet en pourcentage. Nous allons calculer cela à l'intérieur de la méthode de formulaire soumis. Si nous faisons défiler vers le bas jusqu'à cette méthode, puis juste en dessous de this.NewNameText. Nous allons définir this.EventCapacityPourcentage, et nous allons calculer le pourcentage ici. Cela va être égal à this.NomGuest. Length. Le nombre de noms sur la liste d'invités divisé par this.eventCapacity, nous diviserons cela par 100 pour le transformer en un pourcentage. Maintenant, nous avons le pourcentage comme une valeur comprise entre zéro et 100. Nous pouvons prendre notre connaissance des styles de liaison de la dernière section et l'utiliser définir la largeur de la barre de progression. Revenons à la barre de progression, puis ajoutons un attribut de style. Encore une fois, nous savons que nous devons utiliser le deux-points car il s'agit de données dynamiques. Nous allons commencer les styles à l'intérieur des accolades comme un objet. Le seul style que nous devons ajouter est la largeur. La largeur va être définie sur EventCapacityPourcentage que nous venons de créer auparavant. Bien sûr, cela augmentera au fur et à mesure que la capacité changera. Ensuite, à la fin, nous allons ajouter une chaîne, qui est juste le symbole de pourcentage. Tout ce que nous faisons ici est de définir la propriété CSS width, en rendant la valeur de pourcentage réactive plutôt que de simplement coder à la main dans un nombre défini. Sauvegardons cela et avec cela en place, passons au navigateur et testons son fonctionnement. Nous pouvons ajouter quelques noms et souvent la barre de progression augmente avec chacun d'eux. Super. Il commence à augmenter, donc tout semble fonctionner bien. Pour le moment, nous avons le texte qui montre combien de personnes viennent actuellement aux événements. Je veux maintenant ajouter également la capacité afin que nous puissions voir combien de personnes sont également autorisées à assister. Nous avons déjà toutes les données dont nous avons besoin pour le compléter, retour dans la page Index à côté du texte qui vous intéresse. Nous avons déjà le nom d'invité.length étant sorti. Après cela, je vais ajouter une barre oblique avant, puis simplement sortir l'EventCapacity. Maintenant, quand nous allons à l'application, nous devrions voir un des 25 et deux sur 25, et cela augmente à chaque fois que nous ajoutons un nouveau nom. Cela fonctionne et aussi la barre de progression semble fonctionner en finale. Mais il y a un problème. On peut encore passer par le nombre total de noms que nous avons fixés, on peut passer plus de 25. Cela provoque une barre de progression pour sortir de l'écran et aussi le nombre dans la section correspondante pour continuer à dépasser le maximum autorisé. Il suffit d'ajouter beaucoup plus de noms et d'atteindre le maximum. Nous pouvons voir que nous pouvons clairement passer en revue cela. Cela peut être facilement corrigé en ajoutant une autre combinaison pour tester à l'intérieur de notre méthode de formulaire soumis. Retour dans le app.js. Nous savons que nous avons déjà une vérification de déclaration [inaudible] s'il y a un nom entré. Nous pouvons également ajouter une deuxième vérification pour déterminer si le pourcentage EventCapacityPourcentage est inférieur à 100 pour cent. S' il ne veut pas continuer à ajouter des noms. Après ce .NewNameText.Length est supérieur à zéro, this.EventCapacityPourcentage est inférieur à 100. Si la capacité est inférieure à 100 %, nous pouvons continuer à ajouter des noms à la baie. Si le pourcentage est supérieur à 100 ou égal à 100 , aucun nouveau nom ne sera envoyé au tableau. Donnons ceci un coup d'envoi si nous revenons à l'application et puis actualisons, nous pouvons toujours ajouter des noms à la liste d'invités, pas de problème. Une fois que nous atteindrons 25, nous devrions voir qu'aucun nouveau nom ne peut être ajouté. Nous y allons, nous atteignons maintenant la capacité et aucun nouveau nom n'est accepté sur le tableau. Passons maintenant à jeter un oeil à la façon dont nous pouvons gérer logique plus complexe en utilisant des propriétés calculées. 22. Propriétés calculées: Loin de ce cours, à l'intérieur de quelques instances, nous avons examiné comment nous pouvons travailler avec des données, en utilisant des objets de données. Nous avons également examiné comment nous pouvons ajouter un objet de message à, que vous pouvez utiliser pour ajouter des fonctionnalités à notre application. Maintenant, je veux vous montrer une troisième propriété que nous ne pouvons pas tous voir l'instance appelée propriétés calculées. Nous avons mentionné dans la dernière vidéo que dans trop d'expressions JavaScript à l'intérieur de notre modèle, peut rendre le code moins réutilisable et plus difficile à maintenir. Nous avons également limité l'utilisation d'une expression JavaScript. C' est là que les propriétés calculées entrent en jeu. Nous les ajoutons à notre instance de vue tout comme les objets de données et de méthodes pour ajouter une logique plus complexe. Il y a aussi une autre grande différence que nous examinerons bientôt. Ajoutons notre section calculée, suivie du deux-points, et c'est aussi un objet. Nous pouvons ajouter nos propriétés à l'intérieur de l'objet calculé, tout comme nous l'avons fait à l'intérieur de l'objet methods. Je vais utiliser une propriété calculée pour trier les noms de cas, dans notre tableau, puis les retourner dans l'ordre alphabétique. Il a besoin de taper le nom. Dans ce cas, je vais appeler ce nom de tri, et c'est une fonction. Ensuite, à l'intérieur du corps, nous allons retourner quelques données, et les données que nous voulons retourner sont ce tri point de nom de casse point. utilisation de sel est une méthode de tableau JavaScript normale, tout comme lorsque nous utilisons la méthode push dans les formulaires soumis ci-dessus. Pour que cela fonctionne, nous devons changer une chose à l'intérieur de notre point d'index HTML. Nous devons maintenant regarder à travers les noms de tri plutôt que le nom d'invité. Allez à la page d'index, et changez le nom de la casse pour être notre propriété informatique des noms de tri. Ensuite, jetons un coup d'oeil à cela dans le navigateur et nous devrions maintenant les voir triés par ordre alphabétique. Nous utilisons une propriété calculée lorsque notre code dans repose sur la propriété d'intervalle, ou l'une des données de notre instance de vue, peu de JS regarde le contenu et est conscient du code de l'ordinateur et de ses dépendances. Dans cet exemple, nous utilisons les données de nom d'invité, ce qui signifie que nous serons conscients qu'il est là. Il met en cache les données ou le seul rendu lorsque la dépendance du nom d'invité a changé. C' est là que se situe la différence entre les propriétés calculées et les méthodes. Les méthodes d'autre part, seront toujours à nouveau rendu lorsque quelque chose change, même s'il n'y a pas de changement aux données qu'il affiche. Jetons un coup d'oeil à cela en action en vous connectant à la console. prénom sont le journal de la console à la méthode soumise de formulaire et simplement consigner le texte de la méthode. Dans la nouvelle propriété calculée que nous venons de créer. Nous voulons connecter à la console les textes de calculés. Si nous passons au navigateur, puis cliquez avec le bouton droit de la souris et ouvrez la console. Si nous ajoutons ensuite un nom à notre liste d'invités et appuyez sur soumettre, nous pouvons voir que les deux méthodes non calculées ci-dessus enregistrées à la console. Ceci est attendu car nous avons ajouté au tableau de noms d'invités dans la propriété ordinateur. Il regarde la propriété du nom d'invité comme une dépendance. Donc, vue est conscient que les changements se sont produits, puis rend à nouveau un contenu. Nous avons le journal de la méthode parce que comme nous l'avons mentionné précédemment, les méthodes toujours re rendu, quand quelque chose change, même si les données à l'intérieur n'ont pas changé. Voyons ce comportement en action en ajoutant une nouvelle méthode. Je vais aller à la page d'index et ajouter un bouton. Il suffit de souffler l'os d'entrée, au bouton HTML normal avec le texte ou d'appeler une méthode. Ensuite, nous pouvons ajouter un écouteur de clic en utilisant la main courte. Donc, sur clic, je vais définir ceci à un appel de méthode. Maintenant, nous pouvons aller et créer cet appel de méthode à l'intérieur du app.js Assurez-vous que c'est en dessous de la méthode soumise de formulaire et séparé par une virgule. Nous avons mis en place cet appel de méthode, juste avant toute cette fonction, puis à l'intérieur du corps, nous allons définir les styles. Tout ce que nous allons faire est de configurer ces styles, puis de changer le haut de la marge pour être de 50 pixels. C' est une méthode qui n'a rien à voir avec les données de nom d'invité. Voyons ce qui se passe quand nous appelons cette nouvelle méthode. Revenons à l'application, tapez un nouveau nom dans le champ de saisie, puis cliquez sur Envoyer. Nous voyons à la fois les méthodes et calculées en premier, ce qui est un comportement que nous avons vu avant, c'est ce que nous attendons. Cependant, lorsque nous appelons la nouvelle méthode en appuyant sur le nouveau bouton, nous ne voyons que la méthode enregistrée, c'est parce que notre nouvel appel de méthode n'affecte que la propriété de données supérieures de marge et ont une propriété calculée est seulement surveiller les modifications apportées à la propriété du nom de l'invité. Cela signifie que, calculé ne sera pas enregistré car aucune modification n'a été apportée. Cependant, nous obtenons toujours un appel de méthode car toutes les méthodes sont toujours re-rendues, même si les données qu'elles contiennent n'ont pas changé. Cela signifie que, sauf si vous avez une raison spécifique de re-rendre la méthode à chaque fois, les propriétés calculées seront un moyen plus efficace de faire les choses. Pour beaucoup de cas. En utilisant une propriété calculée, méthode automatique permettra d'obtenir les mêmes résultats.Il suffit de garder à l'esprit cette différence dans le comportement dans les coulisses. Avant de terminer cette vidéo est quelques points clés que je veux vous montrer. Tout d'abord, ajoutons un test à nos objets de méthodes, pour simplement faire un journal de console. Revenons aux méthodes et crée notre méthode de test, satisfaisant de la même manière qu'une fonction qui fait un journal de console et sort simplement la console, textes du texte de la méthode. Plus dans la page d'index, je vais aller au-dessous du bouton qui est créé et appeler cette méthode à l'intérieur de nos accolades doubles. Au nom de la méthode de test, enregistrez-le et passons au navigateur. Nous pouvons voir que nous aurons une erreur. En effet, lorsque vous appelez une méthode à l'intérieur des accolades triples en tant qu'expression JavaScript, nous devons l'appeler utiliser les parenthèses. Ainsi sont les parenthèses juste après le texte. Sauvegardons et jetons un coup d'oeil à cela et nous pouvons voir dans nos œuvres. Cependant, lorsque les colons sont une propriété calculée, la parenthèse n'est pas utilisée. L' action de la série, nous pouvons déplacer notre méthode après JS et configurer une propriété calculée en place. Mettons ceci et puis collez-le ci-dessous en tant que propriété calculée, puis enregistrez cela. Si nous supprimons les parenthèses sur la page d'index, puis dire si nous pouvons aller sur le navigateur et nous pouvons voir que cela fonctionne maintenant, va maintenant obtenir le journal de la console à. Un inconvénient lors de l'utilisation des propriétés calculées est que, nous ne sommes pas en mesure d'effectuer des tâches asynchrones. Nous pouvons cependant le faire en utilisant une option de montre, qui est fournie par VGS. C' est aussi une alternative aux propriétés calculées, et nous allons jeter un oeil à cela dans la prochaine vidéo. 23. Watchers: Dans la dernière vidéo, nous avons examiné l'utilisation de propriétés calculées, qui sont un excellent moyen d'ajouter des fonctionnalités à notre application. propriétés calculées surveillent le code et ne réagissent que si l'une des données change. Comme alternative Vue.js nous fournit également une propriété watch, que nous pouvons utiliser lorsque nous voulons regarder une propriété de données et réagir à tout changement. L' utilisation de Watch nous permet également d'effectuer tâches asynchrones que nous ne pouvons pas utiliser avec des propriétés calculées. Nous configurons les objets de montre sur l'instance de vue, comme nous l'avons fait avec les méthodes et les données calculées. Pour commencer, je vais commencer par supprimer les exemples de la dernière vidéo. Donc, dans app.js, nous pouvons supprimer la méthode de test. Nous pouvons également supprimer l'appel de méthode. Donc, supprimez ces deux et puis de retour dans index.html, nous pouvons également supprimer le bouton Exemple que nous avons ajouté aussi. Une fois cela fait, revenons au app.js et qui configurent notre objet Watch. Ceci est bien sûr ajouté comme les autres objets que nous avons examinés. Ajoutez donc une virgule juste après la section calculée, puis ajoutez notre objet de montre. A l'intérieur de l'objet montre, nous pouvons définir une propriété de données que vous souhaitez observer. Ce nom doit correspondre à un nom de données existant. Ainsi, par exemple, nous devons utiliser GuestName ou quelque chose comme EventDate, que nous avons déjà à l'intérieur de notre propriété de données. Je vais regarder notre propriété GuestName. Nous spécifions ensuite une fonction que nous voulons exécuter lorsqu'il y a un changement à GuestName. Lors du changement Vue.js passera la valeur de ce changement à la fonction.À l'intérieur des parenthèses de la fonction, nous pouvons passer un nom que nous voulons donner à la vue de données passera dans. Ce nom peut être tout ce qu'il veut, mais je vais l'appeler des données, puis à l'intérieur de la fonction, je vais connecter à la console un message lorsque GuestName, qui est observé par le observateur, est modifié. Ensuite, ajoutons le journal de la console de la montre déclenchée. Ensuite, ouvrons la console dans le navigateur, puis ajoutons des noms à la liste des invités. Donc, une chose que vous remarquerez est la montre déclenchée est imprimée deux fois par nom ajouté. C' est parce que nous observons la propriété de données de GuestName. Le nom d'hôte est changé deux fois. Il est changé une fois à l'intérieur de la méthode soumise, puis une fois de plus à l'intérieur de la propriété calculée, pour trier les noms dans l'ordre alphabétique. Donc, nous pouvons voir ces données sont observées et la fonction fonctionne à chaque changement.Bien sûr, c'est un exemple de base, mais cela vous donne une idée de la façon dont ils peuvent être utilisés. Nous en utiliserons un plus tard au fur et à mesure que nous traversons les projets de cours. Pour des raisons de performances, il est généralement préférable d'utiliser une propriété calculée dans la mesure du possible en raison de ce rendu efficace dû à la mise en cache. Mais les observateurs, comme nous l'avons discuté, sont utiles pour observer les changements dans les propriétés des données et également utiles pour les tâches asynchrones, telles que l'accès aux données API. 24. Événements clés et modificateurs: Plus tôt dans le cours, nous avons examiné les gestionnaires d'événements, en utilisant la directive V, nous changeons ensuite V sur une syntaxe plus courte en utilisant le symbole @. Cela a déclenché la méthode soumise du formulaire, lorsque l'événement submit a été détecté. Nous avons également mentionné que nous ne sommes pas limités à utiliser simplement soumettre. Nous avons également accès à toute la gamme d'événements HTML, tels que le clic, le changement et le mode en mode pour n'en nommer que quelques-uns. Un long chemin pour déclencher des événements, nous pouvons également utiliser le V sur la directive, le symbole abrégé @ pour faire quelque chose quand une touche de clavier est pressée. À l'intérieur de nos entrées, je vais ajouter un événement clavier à notre entrée de nom. Nous pouvons utiliser des événements de clavier standard, tels que la touche enfoncée. Dans cet exemple, je vais utiliser key-up, suivi du code clé que nous voulons surveiller. Une fois que le numéro de clé 32, qui est la barre d'espace, est libéré, nous déclenchons une méthode appelée touche pressée. Nous n'avons pas encore configuré la méthode pressée, alors faisons-le maintenant. Reportez-vous au Up.js, puis ajoutons une nouvelle méthode. Cette méthode est bien sûr appelée touche pressée. Tout ce qu'il veut que nous fassions est d'ajouter un journal de console, et à l'intérieur de ce journal de console, nous allons juste imprimer le texte de la touche pressée. Cela se connectera simplement à la touche de console enfoncée une fois que la touche d'espace est relâchée. Alors sauvegardons ceci et ouvrons ceci à l'intérieur de la console. Si nous appuyons sur la barre d'espace à l'intérieur du champ d'entrée de nom, nous pouvons voir que nos événements clés ont été détectés. Donc, pour cet exemple, nous utilisons le numéro de clé 32, qui est la barre d'espace. Nous pouvons Google JavaScript codes clés pour une liste complète de numéros pour toutes les clés si nous le voulons. Cependant, Vue.js aussi nous fournit quelques alias pour les clés communes. Nous pouvons remplacer la clé numéro 32 par le mot espace, puis nous essayer si nous rafraîchissons. Cela fonctionne exactement de la même manière, mais c'est plus lisible et plus facile à retenir. Vue.js nous permet également d'utiliser entrée, tab, delete, escape, up-down, et aussi gauche et droits à la place de l'un des codes clés. Essayons juste un de plus. Nous pouvons changer d'espace pour la touche d'échappement, alors dites cela et appuyez sur la touche d'échappement, et cela fonctionne comme avant. C' est ainsi que nous pouvons utiliser des clés pour déclencher des événements, et comment nous pouvons utiliser des modificateurs clés, ou des alias dans nos projets Vue. 25. Filtres: Vue JS nous fournit également une propriété appelée filtres, que nous pouvons également ajouter à notre instance de vue. Les filtres sont conçus pour appliquer une mise en forme ou une transformation de texte commune, par exemple en modifiant les chaînes en majuscules ou en minuscules. Ils ne sont pas destinés à être utilisés pour des tâches complexes. Si vous avez quelque chose de plus complexe, il est mauvais d'utiliser une propriété calculée à la place. L' ajout de filtres est très simple. Nous pouvons les ajouter même en utilisant v-bind, que nous avons examiné plus tôt, ou en utilisant la syntaxe double accolade. Pour voir cela en action, je vais passer à notre boucle for dans le index.html. Ensuite, à l'intérieur des accolades doubles auront le nom. Nous gardons en place l'expression de nom, puis ajoutons notre nom de filtre après, séparé par un symbole de tuyau. Si nous ajoutons un filtre en utilisant v-bind, nous pouvons faire exactement la même chose. Nous ajoutons simplement l'expression JavaScript d'abord, puis le nom du filtre séparé par le tuyau. Ensuite, dans notre instance de vue, nous ajoutons notre propriété filters. C' est bien sûr là que nous ajoutons tous nos filtres. Ajoutons nos deux filtres supérieurs que nous venons d'ajouter. La syntaxe est juste la même que les watchers que nous avons examinés auparavant. Il s'agit d'une fonction qui prend la valeur des données qui lui sont transmises. Pour notre exemple, ce sera la valeur du nom. Tout comme quand nous avons regardé utiliser des observateurs, nous pouvons nommer cette valeur tout ce que nous aimons. Nous retournerons ensuite la valeur transformée en majuscules. Voir nos majuscules. C'est juste du JavaScript simple et ne nous est pas fourni par Vue JS. Encore une fois, c'est un bon exemple de la façon dont nous pouvons faire des données de Vue JS avec du JavaScript simple. Sauvegardons cela et testons dans le navigateur. Allez dans le champ de saisie, et si nous tapons un nom à l'intérieur de là en minuscules, puis appuyez sur « Entrée », nous pouvons voir que le nom est maintenant transformé en majuscules. Nous pouvons également utiliser plusieurs filtres et les enchaîner ensemble. Tout ce que nous avons à faire est de retourner aux accolades doubles où nous avons ajouté le premier filtre. Encore une fois, vous le séparer par un tuyau nous ajoutons le nom de notre deuxième filtre, que nous voulons appliquer. Cela fonctionne de gauche à droite. Dans ce cas, « name » sera ensuite passé à, filtre « Toupper ». Ensuite, la valeur du filtre Toupper sera transmise à « FormatName ». L' ordre est donc important. Nous pouvons voir cet ordre en action si nous ajoutons le filtre « FormatName » dans le app.js. Juste en dessous du filtre « TouPPER » séparé par une virgule. Nous pouvons ajouter un « FormatName ». Encore une fois, cette fonction prend la valeur qui lui est transmise à partir de « TouPper ». Ensuite, si nous conservions simplement la valeur qui lui a été transmise, puis allez dans le navigateur et ouvrez la console. Nous pouvons voir que la valeur est en lettres majuscules. Cela montre que nous obtenons la valeur du nom après avoir traversé le premier filtre. Ceci est juste un exemple, donc nous pouvons supprimer les deux filtres supérieurs et aussi le supprimer de notre page d'index. Maintenant, nous pouvons ajouter un peu de formatage à notre nom , puis revenir à notre filtre et supprimer le journal de la console. Le format dans lequel nous allons appliquer va prendre le nom que l'utilisateur tape, va couper la première lettre, puis les transformer en majuscules. Tous les caractères restants se transformeront ensuite en minuscules. Pour ce faire, nous allons retourner la « value.slice ». Nous allons couper notre position zéro, qui est la première lettre. Nous ne voulons que la tranche de cette première lettre, donc ce ne sera que pour une seule position. Cette première lettre, alors nous allons transformer en majuscules. Ensuite, nous allons ajouter à la fin de cette lettre majuscule, encore une fois, la « value.slice ». Ce sera le reste des personnages à partir de la position 1. Tout le reste est que les caractères vont être mis en minuscules. Ajoutons ceci à la fin, puis sauvegardons cela. Maintenant, si je passe au navigateur. Ajoutons un nom avec un mélange de majuscules et minuscules, puis appuyez sur « Entrée », et nous pouvons voir que le nom est correctement formaté maintenant. Bien sûr, un formatage plus complexe comme si l'utilisateur ajoute un nom avec un nom de famille ou même des noms libres, nous devons faire un peu plus de travail pour contourner cela. Cela peut être un bon cas pour passer à une valeur calculée plutôt qu'au filtre. Pour la mise en forme de texte simple, l'utilisation de filtres est un moyen idéal de le faire. 26. Plus sur le looping : clés et numéros d'index: Dans cette vidéo, nous allons examiner un peu plus en profondeur l'utilisation des boucles avant. Nous allons vous montrer comment ajouter des clés et aussi comment ajouter des numéros d'index à chaque élément. Parfois, lorsque nous parcourons un tableau, tout comme lorsque nous parcourons tous les noms de nos invités et les affichons à l'écran, nous pouvons avoir besoin de saisir le numéro d'index pour chaque élément à l'intérieur du tableau. Le numéro d'index correspond à la position de chaque élément. Par exemple, le prénom ajouté est la position zéro car les tableaux commencent toujours à la position zéro. Le deuxième nom ajouté sera à la position 1, et ainsi de suite. Nous avons accès à ce numéro d'index dans VUGS lors de l'utilisation d'une boucle v-for. Tout ce que nous devons faire est d'ajouter un deuxième argument à la boucle v-for comme ceci. Assurez-vous que vous êtes dans le fichier index.html. Si nous faisons défiler vers le bas, nous avons la boucle v-for pour parcourir les noms des invités. L' intérieur de cette boucle v-for, nous pouvons ajouter notre deuxième argument. On doit les rapper à l'intérieur des parenthèses. Le premier argument est toujours le nom que nous donnons à chaque valeur à l'intérieur de la boucle. Ensuite, le second est un nom que nous voulons donner au numéro d'index. Ces deux noms sont totalement à nous de décider. Nous pouvons choisir ce que nous voulons, mais il est préférable de les garder plus descriptifs si possible. Maintenant, le nom de l'index est défini. Nous pouvons ajouter cela en utilisant les accolades doubles. Juste après notre nom formatif, nous allons sortir entre parenthèses la valeur de notre index. Maintenant, si nous sauvegardons et passons au navigateur, nous pouvons voir la position d'index de chaque nom. Nous avons appris tôt que nous pouvons également ajouter JavaScript à l'intérieur de cette syntaxe double accolade. Profitons de cela en revenant à l'index et en ajoutant plus un au numéro d'index. Cela signifie que notre indice commence maintenant à la position 1 plutôt qu'à zéro. Nous ajoutons un index plus un, et sauvegardons cela. Maintenant, si nous revenons à notre application et ajoutons des noms, nous avons maintenant le numéro d'index correspondant au nombre d'invités. Ensuite, je veux jeter un oeil à l'ajout de clés à nos boucles. Nous pouvons également permettre à vue de mieux suivre nos valeurs de tableau en fournissant une clé unique à chacun des éléments. Il est recommandé d'utiliser une clé unique avec v-for dans la mesure du possible. La vue de comportement par défaut utilisée lors de la mise à jour d'une liste d'éléments, tel qu'un tableau, est le patch et l'élément en place à un numéro d'index particulier. Si [inaudible] ajoute un tableau, il corrige cet élément supplémentaire en place à la position d'index désignée plutôt que déplacer les éléments [inaudibles] dans l'ordre correct. Cela donne une façon efficace de faire les choses, mais nous pouvons aller mieux. Nous pouvons nous assurer que chaque élément du tableau a un identifiant unique, que nous pouvons référencer si nous avons besoin d'apporter une modification. View peut ensuite suivre chaque élément et déplacer des éléments lors de la mise à jour, et même réutiliser des éléments si nécessaire. À n'importe quelle clé unique signifie que la vue est maintenant consciente des éléments, plutôt que de simplement savoir quelle position d'index elle doit corriger dans une nouvelle valeur. Cela rend un comportement plus sûr et plus prévisible lors de la modification des valeurs dans un tableau. Nous pouvons ajouter de la clé en passant à notre boucle for. Nous utilisons les deux-points pour la liaison dynamique, et le nom que nous donnons à cette clé est aussi important. Elle doit être reliée à certaines données réactives existantes. Si nous essayons d'ajouter un nom aléatoire qui n'est pas déclaré dans l'instance de vue, nous obtiendrons une erreur. Tapons simplement un nom aléatoire, puis sauvegardons cela. Ensuite, si nous allons à l'application et ajoutons un nom à la liste des invités, ouvrez la console, nous verrons une erreur. Nous pouvons utiliser des données existantes telles que le nom de notre invité. Tapons un nom à l'intérieur de la clé. Maintenant, si nous sauvegardons cela et passez au navigateur. Si nous appuyons sur actualiser, nous pouvons maintenant voir que le message d'erreur est en cours de suppression. Maintenant, la vue reconnaît ce nom comme une propriété de date. Maintenant, ce n'est peut-être pas idéal parce que nous pouvons avoir plus d'une personne avec le même nom. Nous pourrions configurer un objet pour contenir un ID unique avec chaque nom d'invité. Ouvrez également une nouvelle propriété de date pour contenir une valeur unique, puis utilisez-la comme clé. Pour l'instant, je vais juste partir et revenir à cela dans quelques vidéos. La principale chose à comprendre est que lors de la création d'une boucle pour, il est vraiment préférable d'ajouter une clé à une liste de valeurs dans la mesure du possible. 27. Utiliser plusieurs instances de Vue: Dans notre application de liste d'invités, actuellement, nous n'utilisons qu'une seule instance Vue js pour contrôler l'ensemble de notre application. C' est bien et petit comme celui-ci. Mais dans les applications de grande taille, il peut être plus pratique de diviser certaines fonctionnalités ou certaines données en plusieurs instances. Utiliser plusieurs instances est parfaitement bien à faire, peut même avoir du sens dans certains cas, où nous voulons que le code soit contenu dans des sections. Nous le faisons comme avant. Nous créons une nouvelle instance Vue et aussi une nouvelle section HTML, telle que la div à lier à nos données. Commençons avec ça maintenant. Si nous passons au index.html, nous avons actuellement la première instance de vue liée à cette div avec l'id de l'application. La première chose que je veux faire est de couper le conteneur d'ouverture div et ensuite déplacer ceci vers le haut. C' est ainsi qu'il contient notre contenu existant et aussi la nouvelle div de navigation, que je vais maintenant ajouter. Créons un nouveau div avec un identifiant de navigation. Cet identifiant sera lié à notre instance Vue en utilisant la propriété el et nous allons le créer bientôt. Ensuite, je vais couper la première ligne de notre application, puis coller ceci à l'intérieur de la section de navigation que nous venons de créer. Maintenant, nous avons cette nouvelle section de navigation. Je vais passer à app.js et nous pouvons créer une nouvelle instance Vue juste en dessous de la dernière. Si vous allez en bas, nous pouvons maintenant taper « Nouvelle vue », puis à nouveau simplement entrer l'objet à l'intérieur des parenthèses. La première propriété à nouveau, nous devons ajouter est el. Il s'agit d'un ID de navigation. Ajoutons ceci en haut. Ensuite, nous pouvons ajouter nos objets de données. Nous allons ajouter des données réactives ici, telles que le nom de l'application. Je vais définir le nom de l'application pour être égal à la liste d'invités, qui est ce que nous avons actuellement. Ensuite, si nous revenons à notre div de navigation, nous pouvons alors utiliser un double accolades pour remplacer le texte de la liste d'invités par notre nom d'application. Sauvegardez cela et si nous testons cela dans le navigateur, nous ne devrions pas voir de différence. ce qui signifie que tout fonctionne bien. Il y a un inconvénient à cela cependant, les données contenues dans chaque instance Vue sont séparées les unes des autres. Cela signifie que nous ne pouvons utiliser ce mot-clé que pour accéder aux données à l'intérieur de l'instance de vue dans laquelle il est utilisé. Si vous revenez à la première instance Vue, puis ajoutez un journal de console. Je vais ajouter ceci à l'intérieur de la méthode soumise du formulaire et je veux enregistrer ce nom .app. Rappelez-vous que le nom de l'application est une propriété de données de notre deuxième instance. Sauvons ceci et voyons ce qui se passe. Si nous passons au navigateur, ouvrez la console, et cliquez sur le bouton « Formulaire Soumettre », nous obtenons un message d'avertissement rouge indiquant que la propriété des styles d'application n'est pas définie. C' est à cause du même problème. L' objet de styles d'application est une propriété de données à l'intérieur de la première instance. Ici, nous essayons également d'accéder à l'intérieur du index.html dans le contrôle de section par la deuxième instance de navigation. Nous savons maintenant comment lier les styles. Récupérons les styles dans la feuille de style pour pouvoir accéder à un partout. Nous pouvons passer à l'instance Vue et supprimer l'objet de styles d'application. Maintenant, ils sont supprimés. Nous pouvons revenir sur le app.css, puis réintroduit le haut de la marge de 25 pixels. Cette marge est ajoutée à toutes les lignes, utilisez donc la ligne comme sélecteur, puis ajoutez la marge supérieure de 25 pixels, puis enregistrez cela. Ensuite, si nous revenons à la page index.html, nous pouvons supprimer la propriété de style d'application dans tous les emplacements. C' est le premier, puis le second. Puis enfin, retirons le troisième et dernier. Ensuite, nous pouvons également supprimer le journal de la console de la méthode. Revenons au app.js et descendons à la méthode des formulaires soumis, puis supprimez ceci. Maintenant, si nous sauvegardons cela et revenons au navigateur et actualisons, nous devrions voir que tout fonctionne bien à nouveau. Diviser des sections en plusieurs instances Vue est parfaitement pratique et c'est également pratique si le code contenu dans chaque instance n'est pas lié ou qu'il n'y a aucune raison d'exiger des données provenant d'autres instances. Il y a des déchets accède aux données de plus d'instances avec d'autres méthodes. Mais nous allons le couvrir plus tard dans cette section. Nous continuerons ensuite en ajoutant des liens de navigation à notre nouvelle instance et en utilisant ces liens pour voir comment nous pouvons parcourir les objets. 28. Looping avec des objets: Nous avons déjà couvert la boucle à travers les tableaux pendant ce projet. Dans cette vidéo, je veux continuer avec notre nouvelle instance de vue, en ajoutant un nouveau tableau d'objets de liens de navigation, que nous pouvons également parcourir. Les valeurs de cet objet contiennent également AID. Vous pouvez donc également l'utiliser pour ajouter une clé unique. Donc, voir peut garder une trace des éléments répertoriés à l'intérieur de notre app.js. Commençons à créer notre tableau d'objets, vers nos liens de navigation. Sous le nom de l'application. Je vais commencer par le nom de NavLinks. Ce sera un tableau. Chaque élément de tableau est un objet qui a une paire de valeur clé de nom et d'ID. Ouvrons les accolades pour le premier lien. Je vais définir le nom comme la clé, et la maison comme la valeur. Ensuite, séparez par une virgule. Nous allons également ajouter un ID. Donc, je vais garder cela simple et commencer par l'ID d'un, puis le séparer par une virgule, nous pouvons commencer notre deuxième lien. Je vais donc copier et coller le premier élément. Modifiez le nom pour les événements à venir, puis changez également l'ID en numéro 2. Puis une fois de plus, collez la même chose, et nous appellerons cela un invité avantages. Donnez-nous un ID de trois, puis le lien final, nous allons ajouter les dernières nouvelles, puis faire en sorte que ce soit le numéro d'identification 4. Ensuite, allons aussi à notre page Web index.html, et regardons comment nous pouvons faire une boucle à travers ce tableau d'objets. Je vais créer un nouveau div pour cela, juste en dessous de la balise div de fermeture pour le nom de l'application. Créez la div environnante, puis à l'intérieur ici je vais créer une liste non ordonnée, pour afficher tous les liens de la navigation. Ensuite, nous voulons ajouter une balise de modèle HTML. Cette balise de modèle peut être utilisée avec V4 et aussi VF2. Pour rendre un bloc de plusieurs éléments. Template est juste un conteneur, tout comme un div ordinaire. Mais cet élément de modèle ne sera pas rendu au DOM. Ensuite, nous aurions à l'intérieur de ce modèle, nous pouvons créer la boucle V4. Donc, je vais appeler ce NavLink dans NavLinks. Bien sûr, NavLinks est le nom de la propriété date que nous avons créée. Ensuite, nous n'avons pas aligné les éléments, nous allons créer nos éléments de liste. Nous l'utilisons avec les accolades doubles. Le premier sera Navlink.name. Je vais créer un autre élément de liste ci-dessous, qui va être Navlink.id. Cela va sélectionner le nom et l'identifiant de chaque objet individuel. Donc maintenant, nous avons le contenu à l'intérieur du modèle. Si nous passons aux outils div, nous pouvons sélectionner le div que nous avons créé. Nous sélectionnons la liste non ordonnée. Nous pouvons voir que les tags ul sont là, puis il est suivi par le contenu dans les balises de modèle. Donc, nous ne voyons pas réellement l'élément de modèle rendu à l'écran. Mais nous voyons à l'écran le nom et aussi l'identifiant de chaque objet à l'intérieur de notre tableau. Nous pouvons également afficher les paires de valeurs clés de chaque outil objet. Clé dans le nom et aussi l'identifiant de l'objet. Être la valeur après la clé, comme la maison et un. Nous pouvons simplifier ce que nous avons déjà en un seul élément de liste. Donc, si nous supprimons le deuxième élément de la liste, et alors nous pouvons ajouter une deuxième boucle V4. Celui-ci va être une valeur dans NavLink. La valeur de nom est facultative. Cela peut être tout ce que nous voulons, mais le nom NavLink est également facultatif, mais il doit correspondre au nom à l'intérieur de la boucle externe. Nous allons également ajouter une règle horizontale, afin de pouvoir séparer chaque élément de liste. Maintenant, si nous ajoutons de la valeur dans les accolades doubles, vous pouvez voir cette sortie à l'écran. Alors passez au navigateur, et il imprime les clés et les valeurs des objets comme une paire. Nous pouvons également les séparer pour travailler avec eux indépendamment. Si nous entourons la valeur à l'intérieur des parenthèses. Nous pouvons également ajouter une clé, ce qui signifie que nous avons à la fois la clé et la valeur disponibles à utiliser indépendamment. Donc, après la valeur, ajoutez une virgule, puis la clé. Maintenant, au lieu de simplement sortir la valeur, va également sortir la clé séparée avec le tuyau, puis revenir au navigateur. Nous pouvons le voir en action. Nous avons la clé et la valeur imprimées pour chaque objet. Nous pouvons également ajouter un troisième argument est clé et valeur. Rappelez-vous que nous avons ajouté un numéro d'index à la boucle V4 pour imprimer les noms de notre liste d'invités. Eh bien, nous pouvons aussi faire la même chose ici avec le troisième argument. Je vais l'appeler à nouveau index, car il est logique de nommer ceci. Donc séparé par une virgule ajouter index comme troisième argument. Ensuite, comme un troisième argument à l'intérieur des accolades doubles, nous allons également imprimer l'index. Alors enregistrez, puis passez à notre projet, puis actualisez. Maintenant, nous pouvons également voir l'index imprimé à côté de chaque élément. Maintenant, nous savons comment faire une boucle à travers les objets. Mettons sa technique en pratique dans la prochaine vidéo. Par nos liens de navigation, comment nous voulons qu'ils regardent dans notre application. 29. Ajouter nos liens de navigation et clés: Maintenant, nous savons comment travailler avec la boucle à travers des objets, structurons cela afin qu'il soit plus adapté à notre application. Nous ajouterons également une clé unique à chaque élément et nous assurerons que chaque élément de navigation a une URL vers laquelle lier. Pour commencer, je vais supprimer l'élément de la liste complète de la dernière vidéo. Ensuite, remplacez ceci par un élément de liste standard, qui génère le nom du point NavLink. Cela montrera simplement les noms de nos liens, et comme il s'agit d'une barre de navigation, nous voulons également créer ces liens. Allons de l'avant et entourons le lien de navigation avec un tag. Ajoutez-les à l'intérieur des éléments de la liste. A l'étiquette a avec le href, et juste laisser ceci vide pour l'instant et puis fermer la balise a. Maintenant, ajoutons quelques liens à notre objet à lier, retour dans les liens de navigation dans l'App dot js. Après l'ID le plus que vous voulez ajouter une URL à lier. Cela va juste être un lien fictif juste pour tester son fonctionnement, après la virgule, nous allons ajouter l'URL et ajouter un lien, je vais juste utiliser Google pour cet exemple. Tapez H-T-P-S deux-points barre oblique avant, barre oblique avant, puis www dot google dot com. Ensuite, nous pouvons copier ceci et coller ceci dans, dans les quatre liens. Je vais définir le deuxième pour aller à Amazon dot com, le troisième pour aller à eBay, puis le quatrième formulaire que nous allons ajouter comme Facebook. Maintenant, nous avons une URL à ajouter à nos balises a en HTML. Rappelez-vous de la dernière section, nous avons dit que nous ne pouvons pas utiliser les accolades doubles pour ajouter des données réactives aux attributs HTML comme celui-ci. Il pourrait ajouter les accolades doubles, puis ajouter navlink dot URL. Pour que cela fonctionne, nous devons utiliser la directive V bind pour ajouter à notre URL, ou je vais utiliser la technique abrégée de juste les deux-points. Nous devons également supprimer les accolades doubles pour que cela fonctionne à l'intérieur d'un attribut. Sauvegardons cela, et si nous passons à nos liens de navigation dans le navigateur, nous pouvons cliquer sur les liens et tester le travail. Ils semblent tous fonctionner bien. On en essaiera un de plus. Super. Maintenant, les liens fonctionnent comme nous le voulons. Il est temps d'ajouter un style aux liens. Depuis déjà, nous avons Bootstrap lié à notre projet. Nous pouvons ajouter des classes Bootstrap à notre navigation. Tout d'abord, si nous ouvrons la balise URL, nous pouvons ajouter une classe Bootstrap de nav, puis dans les éléments de la liste, nous pouvons également ajouter un cluster aussi. Encore une fois, il s'agit d'une classe Bootstrap de l'élément de trait d'union nav. Ensuite, à l'intérieur des liens va ajouter une classe de NavLink, puis si vous voulez ajouter des lignes horizontales en place juste pour briser notre application. Le premier que je vais ajouter juste en dessous du titre de niveau un de notre nom d'application, alors ajoutez hr à l'intérieur. Le second est juste avant la div de fermeture avec l'ID de navigation et cela ajoutera une ligne au-dessus et également au-dessous de nos liens de navigation. La dernière chose que je veux faire à notre navigation est d'ajouter une clé unique à chaque élément de la liste. On en a parlé il y a quelques vidéos. Mais cette fois, nous avons maintenant accès à un ID à l'intérieur de notre objet nav links. Cela fait une clé idéale parce que chaque valeur est définie pour être unique. Revenons maintenant à notre HTML. Maintenant, ajoutons cette clé à l'intérieur de l'élément template juste après la boucle for. Liez la clé et définissez cette valeur à l'ID de point NavLink. En théorie, ils devraient fonctionner. Mais cependant, il y aura un petit problème, que nous verrons si nous passons aux outils de développement. Cliquez avec le bouton droit et inspectez. Nous voyons l'avertissement rouge indiquant que le modèle ne peut pas être clé. Place la clé sur les éléments réels à la place. Nous obtenons l'avertissement que nous devons l'utiliser sur un élément réel parce que template est utilisé comme un conteneur pour son contenu modélisé. Il agit comme un wrapper plutôt qu'un élément HTML. Pour résoudre ce problème, nous pouvons changer les balises de modèle à autre chose, comme un div et enregistrer cela. Maintenant, si nous retournons à la console et rafraîchissons, il disparaît maintenant et nous avons une clé unique qui fonctionne sur notre navigation. C' est maintenant notre navigation terminée et aussi notre deuxième instance de vue. Nous allons nous baser sur cela dans la prochaine vidéo, où nous allons voir comment nous pouvons accéder à une instance de vue en externe à partir d'une autre instance de vue. 30. Accéder à des instances de Vue de l'extérieur: Nous savons maintenant que nous pouvons utiliser plusieurs instances Vue pour contrôler une section particulière de notre application. Nous avons discuté de la façon dont peut être utile pour le faire, pour regrouper les fonctionnalités liées ensemble, telles que le regroupement de toutes les fonctionnalités de la barre de navigation, comme dans notre exemple, ou même une barre latérale peut-être pourrait utiliser le cas. Nous ne pouvons pas accéder directement à des choses telles que nos données et nos méthodes à partir d'une instance, à partir de l'intérieur d'une instance différente en utilisant ce mot-clé ; cependant, il existe une autre façon de contourner cela. Si vous souhaitez accéder aux données d'une instance en externe, nous pouvons donner à chaque instance un nom de variable. Si passez à notre app.js et celui-ci rend cela un peu plus lisible en cliquant sur le bouton de réduction sur la gauche. Nous le ferons pour notre première instance. En deuxième instance. Juste avant d'appeler New Vue, et nous voulons ajouter un nom de variable de vm1 et définir cela égal à notre nouvelle instance de vue ; puis faire la même chose pour la seconde ; Donc variable vm2. Vous verrez souvent ces variables appelées vm. Distance pour le modèle de vue, comme Vue a été inspiré par le modèle de conception MVVM. Vous pouvez en savoir plus à ce sujet avec le lien à la fin de la section si vous le souhaitez. Ce nom de variable est totalement à vous cependant. Il peut être nommé tout ce que vous voulez. Ensuite, je peux référencer notre instance en dehors de l'instance en utilisant JavaScript normal. Donc, si nous voulions changer des données dans la première instance de vm1, comme la capacité d'événement. On peut le faire comme ça. Si nous nous assurons que l'extérieur à la fois vm1 et vm2, nous pouvons sélectionner vm1. Capacité'. Alors je vais fixer ça à 15. Maintenant, si nous passons à l'application, nous pouvons voir le changement. On peut voir que la participation est maintenant de 0 ou 15, plutôt que de 25. Ses modifications sont effectuées avec JavaScript normal et à partir de l'extérieur de l'instance de vue. Nous pouvons aussi faire la même chose, mais à partir de notre deuxième instance. Ajoutons une méthode à notre instance vm2. Cette méthode que je vais appeler « capacité a changé. Ensuite, ici, nous pouvons couper le JavaScript que nous avons utilisé auparavant. Donc, coupez 'vm1.eventCapacity. Maintenant, collez ceci à l'intérieur de la fonction. Ensuite, en HTML, nous pouvons appeler cette méthode en ajoutant un nouveau bouton. Ajoutons un nouveau bouton à l'intérieur de la section de navigation. Juste après la ligne horizontale, je vais ajouter un bouton avec un gestionnaire de clic. Cela va déclencher la méthode de changement de capacité. Donc, lorsque cette méthode est appelée, la méthode est exécutée à l'intérieur de l'instance vm2. Cependant, il modifie les données de capacité d'événement de notre instance vm1. Sauve ça. Si nous actualisons le navigateur, puis cliquez sur le bouton, la capacité devrait changer à nouveau à 15. C' est un exemple très simple de la façon dont nous pouvons accéder aux instances, fois utiliseraient JavaScript en externe et aussi à l'intérieur des instances. Il est important de savoir comment le faire, si jamais nous avons besoin d'avoir accès à nos instances à partir de sources externes. On laissera cette vidéo là et je te verrai la prochaine fois. 31. Propriétés de l'instance Vue et méthodes: Lors de la construction de ce projet, nous avons ajouté nos propres propriétés et nos propres méthodes à l'instance Vue avec celles-ci, que nous devrions maintenant avoir une meilleure compréhension de la façon de travailler avec eux. Vue nous fournit également quelques propriétés et méthodes auxquelles nous avons accès. Si nous allons à vuejs.org, qui nous amène à la page d'accueil Vue. Ensuite, si vous cliquez sur le lien API en haut, nous pouvons voir la documentation de l'API. Si nous faisons défiler vers le bas en utilisant la navigation sur la gauche, nous pouvons voir quelques choses familières, telles que nos options de données, calculées sur des méthodes. Plus bas, il y a ce que nous appelons les propriétés d'instance et les méthodes d'instance. Toutes ces propriétés sont des méthodes, ont également un préfixe de signe $, donc nous pouvons facilement les distinguer des autres. Si nous passons à notre application, nous pouvons les voir dans le cadre de nos instances. Passons à app.js. Vous devez aller droit vers le bas, nous pouvons créer un journal de console. Je vais juste consigner le contenu de vm1 qui est notre première instance Vue. Maintenant, passons au navigateur et ouvrons cela dans la console. Nous pouvons voir que nous avons le contenu de l'instance Vue. Certains de cela, vous reconnaîtrez déjà, comme la propriété 'el', que vous pouvez voir est la gestion de notre div avec l'idée d'application, que nous avons définie plus tôt. Nous pouvons utiliser ces propriétés et méthodes, préfixe avec un symbole $, pour accéder aux données dont nous avons besoin. Par exemple, nous pouvons modifier notre journal de console pour afficher la propriété 'el' en ajoutant un $el après vm1. Ensuite, à l'intérieur de la console, nous pouvons voir la div avec la classe de l'application, que notre instance gère. Supprimons simplement cette propriété el et jetons un oeil à l'instance complète à nouveau. Il y a beaucoup de choses qui se passent ici et nous allons jeter un coup d'oeil à d'autres choses au fur et à mesure que nous suivrons le cours. Une chose sur laquelle je veux attirer votre attention est vers le bas, vous pouvez voir qu'il y a beaucoup de getters et setters. Ceux-ci sont utilisés pour obtenir des valeurs et définir des valeurs et signifie que Vue peut regarder et réagir aux changements. Ces getters et setters sont ajoutés lors de la création de l'instance Vue. Vous pouvez voir que ces toutes nos propriétés de données, que Vue proxie pour nous et aussi nos méthodes calculées. Nous avons des formulaires soumis et KeyPressé au-dessus d'eux, qui n'a pas de getters ou setters. C' est parce que ce sont nos méthodes. Comme nous le savons, les méthodes ne regardent pas et ne réagissent pas aux changements, elles simplement re-rendu quand il y a des changements à l'application. En outre, si nous ajoutons une nouvelle propriété à une instance Vue après sa création, elle n'est pas mandatée par Vue.js, donc elle n'est pas réactive. Par conséquent, ne pas surveiller les changements. Nous pouvons le voir en action en ajoutant une nouvelle propriété à vm1. Retour dans app.js, si nous ajoutons vm1.title, qui n'existe pas encore, et nous allons définir cela sur une chaîne de texte de nouveau titre. Maintenant, si nous allons à l'instance vm1 dans la console, nous pouvons voir que nous avons ajouté une nouvelle propriété appelée title pour les getters ou setters Arnold. La propriété n'est pas réactive. Par conséquent, si vous avez dans notre application des données que vous souhaitez réagir aux changements, elles doivent être présentes lors de la création plutôt que ajoutées par la suite. Nous n'avons pas besoin de ce code pour le projet donc je vais supprimer le bouton et aussi la méthode de changement de capacité. Allons-y et faisons-le maintenant. Dans l'index, nous devrions déplacer le bouton, puis dans les méthodes dans app.js, nous pouvons supprimer la méthode de capacité modifiée. fur et à mesure du cours, nous examinerons plus en détail ces propriétés et méthodes d'instance Vue. À partir de la vidéo suivante, nous allons jeter un oeil à l'utilisation de refs. 32. Référencer des éléments avec ref: Dans la dernière vidéo, nous avons examiné quelques propriétés et méthodes qui sont disponibles dans l'instance Vue. L' une de ces propriétés qui peut voir est appelée refs. Nous pouvons utiliser refs enregistrer une référence à un élément. Nous pouvons placer une référence sur n'importe quel élément que nous voulons. Je vais passer à l'index à la page HTML. Si nous cherchons le titre de la page, je vais commencer par enlever un double accolades. Ensuite, il suffit de remplacer ceci par une liste d'invités. Ensuite, dans la balise d'ouverture h1, je vais ajouter un attribut ref. La réponse est à un nom. Ce n'est pas un attribut HTML standard, il nous est fourni par Vue.js. Nous sommes également libres de choisir n'importe quel nom de référence qui voudra. Maintenant, ayez cette référence aux éléments. Nous pouvons travailler avec cela dans notre instance Vue. Je vais ajouter un gestionnaire de clics à ce niveau sur l'en-tête, que vous pouvez connecter à cette référence. J'ajouterais un clic. Je vais définir ceci pour être un nom de méthode de changement de titre. Tout cet élément n'est pas important, nous pouvons toujours redéclencher cette méthode quand il est cliqué. Ensuite, ajoutons notre méthode dans app.js. Nous devons ajouter cela dans vm2. Ajoutons nos méthodes et nous utilisons un nom ou modifions le titre. Nous sélectionnons ensuite la référence avec ce titre assigner des réfs. Ensuite, à partir d'avant toutes les propriétés de la vue native ont le préfixe du signe dollar. Ensuite, nous ajoutons le nom. Puis pointez dans un texte qui est juste JavaScript. Ce n'est pas quelque chose fourni par Vue.js. Espérons que vous pouvez maintenant commencer à voir le Vue.js et JavaScript vanille normal fonctionne ensemble presque de manière transparente. Nous pouvons mélanger en JavaScript avec les propriétés Vue et les méthodes où nous en avons besoin. Maintenant, si nous sauvegardons cela et nous passons au navigateur, si nous cliquons sur le titre, nous devrions voir que le titre est en train de changer. En plus d'utiliser des références de signe dollar pour définir des données, nous pouvons également accéder aux données en les utilisant. Si nous ajoutons un journal de console pour montrer ce signe dollar point refs, nous pouvons voir ce qu'il a retourné. À l'intérieur de la méthode de changement de titre à un journal de console et ce signe dollar refs. Ensuite, passez au navigateur. Nous pouvons voir qu'un objet est retourné. Nous pouvons également voir que c'est un h1 que nous avons sélectionné. Si nous ouvrons ces objets, nous avons accès à toutes les données qui y sont associées. Nous pouvons voir le HTML interne que vous avez réinitialisé et aussi toutes les autres propriétés auxquelles nous pouvons accéder. Par exemple, si nous regardons caché, nous voyons qu'il est défini sur false par défaut. Nous pouvons utiliser le signe dollar refs accès et le changer à l'intérieur de notre méthode. À l'intérieur de la méthode ChangeTitle, nous pouvons sélectionner ce point refs, nom de point. À l'intérieur de la méthode, nous pouvons supprimer le texte intérieur et le remplacer par un point caché. Que nous pouvons définir cela pour être vrai. Maintenant, si nous sauvegardons ceci et revenons à notre application, si nous cliquons sur le titre. Hidden est défini sur true, de sorte que les éléments disparaissent. C' est ainsi que nous pouvons utiliser la propriété de symbole dollar refs pour référencer et éléments et l'ensemble ou accéder aux données. Il vaut la peine de mentionner également que nous pouvons utiliser cette propriété refs à l'intérieur et à l'extérieur de l'outil d'instance de vue. Il y a quelque chose à savoir quand on utilise refs, c'est-à-dire refs et non réactif. Ils ne sont pas créés sur le rendu initial. Ils sont créés à la suite de la fonction de rendu. Nous changeons l'élément dans le DOM, mais pas dans le modèle Vue.js. Par conséquent, nous changeons quelque chose qui peut être remplacé par Vue.js à un jour ultérieur chaque fois qu'il y a un re-rendu, comme quelque chose à faire attention. Cependant, l'utilisation de refs peut être utile à certains moments et peut-être mieux utilisée pour obtenir des données plutôt que pour définir des données en raison du manque de réactivité. 33. Utiliser des modèles de chaînes: Au cours de ce projet, nous avons créé nos instances de vue, puis les avons montées sur des éléments HTML en utilisant la propriété L. Il existe également un moyen alternatif qui consiste à créer un modèle de chaîne à l'intérieur de l'instance de vue. Allons de l'avant et créons une nouvelle instance de vue pour stocker le titre de notre application à l'intérieur. À l'intérieur, nous pouvons utiliser la propriété template, donc je vais descendre vers le bas et créer une nouvelle variable, cette fois appelée vm3. Ensuite, cela va contenir notre nouvelle instance de vue, et comme toujours, il prend dans notre objet d'options. À l'intérieur, nous allons ajouter une nouvelle propriété de modèle. Cette propriété prendra une chaîne, donc nous devons entourer la marque que nous fournissons à l'intérieur des guillemets. Nous allons créer le titre ici. Tout comme notre titre existant, nous allons ouvrir les balises h1 puis d'autres titres de la liste des invités, puis fermer. Maintenant, si nous revenons à la page d'index, nous pourrions supprimer le titre de notre HTML, afin de venir pour notre nouvelle instance de vue. Maintenant, si nous sauvegardons cela, si nous actualisons le navigateur, nous pouvons voir que le titre est maintenant supprimé de la page. C' est parce que nous avons créé une nouvelle instance de vue, mais nous n'avons pas de propriété L, donc le modèle est actuellement démonté. Nous pouvons monter manuellement l'instance en utilisant des montages de signe $. C' est une nouvelle méthode d'instance que nous n'avons pas encore examinée, car nous avons notre modèle est stocké dans une variable appelée vm3. Si nous revenons au app.js, nous pouvons le monter comme ceci. Tapons vm3. $mount, puis à l'intérieur du support, nous pouvons ajouter les éléments que nous voulons monter. Je vais utiliser la div avec l'ID de navigation. Comme une chaîne qui va passer dans le #, puis la navigation, cela monte nos modèles à la div de navigation, que nous avons déjà dans notre HTML. Sauvegardons cela et voyons quel effet cela a. Si nous revenons au navigateur et puis actualisons, nous avons maintenant le titre h1, que vous avez configuré à l'intérieur du modèle, mais vous pouvez voir que nous avons perdu les liens de navigation et aussi le style. Ouvrons les outils de développement en cliquant avec le bouton droit de la souris et en allant inspecter, jetons un oeil à ce qui se passe. Nous avons notre conteneur en haut, ce qui est très bien, puis immédiatement après c'est notre titre h1, suivi par le div avec l'ID de l'application. Vous pouvez voir qu'il n'y a pas de lignes Bootstrap ou aucun des divs de grille Bootstrap 12 colonnes, que vous avez à l'intérieur de notre HTML. En outre, notre liste non ordonnée pour les liens de navigation n'est pas là non plus, alors pourquoi est-ce ? Eh bien, la raison en est que lorsque nous montons un modèle sur un élément, ce modèle remplacera tout balisage existant. Cela signifie que tous nos liens de navigation et les classes Bootstrap, il va simplement utiliser le contenu de notre modèle comme un nouveau balisage. Nous pouvons ajouter ces divs et classes supplémentaires à l'intérieur de la chaîne de modèle. Si nous revenons à nos modèles à l'intérieur de l'application, puis à l'intérieur de la chaîne, nous pouvons commencer à ajouter nos classes Bootstrap autour du titre de niveau 1. Avant cela, nous pouvons ajouter un div avec une classe de col-sm-12, et nous pouvons également ajouter du centre de texte pour aligner cela au milieu de la page. Après le titre de niveau 1, nous voulons fermer cette div et ensuite enregistrer cela. Si nous revenons sur le navigateur, nous pouvons voir que cela est réintroduit le style Bootstrap, que nous avions avant. Mais comme vous pouvez le voir, les choses vont bientôt commencer à sembler assez désordonnées à l'intérieur du modèle. En outre, il y a une autre limitation. Nous ne pouvons pas diviser cela en plusieurs lignes pour le rendre encore plus lisible. Si nous déplaçons le titre de niveau 1 sur sa propre ligne et puis juste après le jour, nous ajouterons la div de clôture également sur sa propre ligne. Enregistrez cela et revenez au navigateur. On peut voir que ça ne marche pas. Il y a un moyen de contourner cela, si nous passons aux modèles, nous pouvons placer chaque ligne dans sa propre chaîne. Ajoutez la citation au début et à la fin de chaque ligne, puis nous pouvons les ajouter avec le symbole plus. Sauvegardez cela et rafraîchissez, afin que nous puissions voir que tout est dans notre travail à nouveau. Cette solution semble encore un peu désordonnée, donc nous pouvons être les meilleurs pour posséder des utilisations avec du code simple. Aussi, puisque view JS nous fournit cette propriété L pour intégrer notre syntaxe de modèle à l'intérieur du HTML. Cela est souvent considéré comme une meilleure alternative. Je vais revenir à notre app.view, puis une fois que vous supprimez cette nouvelle instance de vm3, juste pour revenir au projet à ce qu'il était. Supprimez cette variable vm3, supprimez le montage, et enfin, si nous revenons à la page d'index, nous pouvons réintroduire le titre de la liste des invités dans le code HTML. Enregistrez cela et maintenant notre application est de retour à la façon dont elle était avant d'utiliser la propriété L. C' est comment créer un modèle d'écran. Il est important de le savoir car vous pouvez le rencontrer dans les applications et aussi lorsque vous parcourez la documentation, vous pouvez également le voir lorsque vous travaillez avec des composants. Ensuite, nous allons terminer cette section en regardant le cycle de vie de l'instance de vue. 34. Le cycle de vie de Vue: Nous devrions maintenant avoir une meilleure compréhension de la façon dont Vue.js crée un modèle et le gérer vers le DOM. Lors de la création d'instances Vue cependant, il se passe quelque chose d'important en coulisses, que nous n'avons pas encore examiné et il s'agit d'un cycle de vie d'instance Vue. Nous pouvons nous connecter à différentes étapes du cycle de vie, exemple avant la création de l'instance ou avant qu'il y ait une mise à jour, et nous pouvons dire à Vue quel code exécuter sur chacun de ces points spécifiques du cycle de vie. Il y a un certain nombre de ces crochets de cycle de vie que nous pouvons utiliser, alors jetons-les maintenant. Nous devrions maintenant être familiers avec la création d'une nouvelle instance Vue en utilisant la nouvelle vue, qui se trouve en haut de ce dessin. Il s'agit du point de départ du cycle de vie avant d'observer les données et d'initialiser les événements. La scène devrait également avoir un sens maintenant parce que nous savons à partir vidéos précédentes que lors de la création de l'instance Vue, Vue.js est conscient des données qu'elle contient et crée l'effet de watcher. Entre ces deux premières étapes, nous pouvons appeler le premier de nos crochets de cycle de vie, qui s'appelle BeForecreate. BeforeCreate, comme son nom l'indique, est une méthode que nous pouvons utiliser pour définir n'importe quel code que nous voulons exécuter avant que l'une de nos données ne soit observée ou que des méthodes aient été initialisées. Si nous voulons exécuter le code après l'initialisation des données et des méthodes, nous devons alors utiliser le hook créé. Cela signifie que notre instance est en cours de création, toutes les données sont en cours de configuration telles que les watchers, propriétés calculées et toutes les méthodes, bien qu'elle n'ait pas encore été montée sur le DOM à ce stade. L' étape suivante du cycle de vie est liée aux modèles. Nous avons utilisé à la fois la propriété template et également créé des modèles dans notre code HTML dans cette section, c'est là que Vue.js recherchera ces options, puis compilera ces modèles si nécessaire. Une fois les modèles compilés à l'aide la propriété template ou en recherchant les modèles en HTML avec la propriété el, notre prochain hook de cycle de vie est exécuté. Ce crochet s'appelle BeForeMount. BeForeMount est appelé juste avant le début du montage de l'instance, et juste avant que la fonction de rendu soit appelée pour la première fois. Suivant est remplacer el par template, maintenant Vue.js a nos modèles prêts. Il a tout HTML préparé qui peut être lu par le navigateur. Les accolades ou l'interpolation que nous voyons dans l'éditeur seront remplacées par les valeurs de données correspondantes. C' est pourquoi nous ne pouvons pas voir les accolades doubles lorsque nous regardons à l'intérieur des outils de développement. Cela signifie que les éléments que nous spécifions en utilisant el seront remplacés par notre modèle compilé. Maintenant, tout est en place pour monter notre modèle sur le DOM. Nous n'avons pas terminé une fois que notre étape de montage d'instance a été atteinte. Nous avons discuté de la réactivité au cours de ce cours et de la façon dont Vue surveille les changements, puis réagit à ces changements en obtenant le DOM. C' est l'effet que nous pouvons voir sur l'extrême gauche, qui est le re-rendu et le patch DOM virtuel. Il s'agit d'un cycle continu et le re-rendu et le correctif DOM virtuel sont déclenchés lorsque certaines données réactives ou tant de données sont modifiées. Ensuite, nous avons BeforeUpdate. Ce cycle de mise à jour nous fournit deux nouveaux crochets de cycle de vie. Tout d'abord, c'est BeforeUpdate, et cela, tel qu'il semble, est appelé avant que les données ne changent. Deuxièmement, il y a le crochet mis à jour. C' est là que nous pouvons ajouter n'importe quel code que nous voulons exécuter lorsqu'il y a eu un changement de données détecté, ce qui provoque le DOM virtuel à re-rendu. Vue.js recommande d'éviter ce crochet dans la plupart des cas, car nous sommes fournis avec la propriété de l'ordinateur et aussi les observateurs qui devraient être référés dans la mesure du possible. Ensuite, il y a le crochet BeforeDestroy. Ceci est appelé juste avant qu'une instance Vue ne soit détruite. Au moment où il est appelé, l'incidence est encore pleinement fonctionnelle, rien n'a encore commencé pour la phase de destruction. Vue prépare ensuite l'instance à être détruite en supprimant toutes les montres, écouteurs d' événements, ainsi que tous les composants enfants. Nous n'avons pas encore couvert les composants, mais nous le ferons bientôt. Enfin, nous avons détruit, donc ce sont toutes les étapes du cycle de vie de l'instance Vue et dans l'instance en cours de destruction. Lorsque cela se produit, le dernier crochet détruit est appelé. n'y a rien de magique qui se passe dans les coulisses, juste une série d'étapes de l'instance Vue, que vous pouvez maintenant voir que nous pouvons puiser dans l'utilisation de ces crochets. Il y a en fait deux autres crochets appelés activés et désactivés. Ceux-ci ne sont généralement pas disponibles dans cette instance régulière, mais sont plutôt disponibles lors de l'utilisation d'un composant kept-alive. Nous allons couvrir les composants kept-alive dans la section des composants plus tard, mais pour l'instant, passons à la dernière vidéo. Dans cette section, nous allons mettre en pratique ces crochets de cycle de vie pour les voir en action. 35. Les hooks du cycle de vie de Vue en action: Maintenant, nous savons comment fonctionne le cycle de vie de Vue et comment nous pouvons puiser dans chacune de ces phases du cycle de vie en utilisant ceux de Hooke qui nous sont fournis par Vue js. Ces crochets sont assez simples à ajouter à notre application. Je vais maintenant vous montrer un exemple de base de ceux-ci en action. Tout ce que nous allons faire est de créer chacun de ces crochets que nous avons examinés dans la dernière vidéo , puis simplement faire un journal de console une fois que chacun de ces crochets est appelé. Ceci est utile comme nous pouvons le voir, l'ordre dans lequel ils sont connectés à la console. Au cours du cycle de vie de l'instance, ces hooks sont ajoutés à la racine de l'instance de vue plutôt qu'à l'intérieur de l'une des méthodes ou propriétés de données. Passons à notre app.js. Ensuite, si nous faisons défiler vers le bas de vm1 et puis ajoutons une virgule juste après les filtres, ici, nous pouvons ajouter notre premier crochet, qui va être beforeates. La syntaxe est assez similaire aux méthodes. C' est une fonction. Ensuite, à l'intérieur du corps de la fonction, nous pouvons demander notre journal de la console. Je vais simplement consigner le texte de BeForecReates. Bien qu'il s'agisse d'un exemple simple avec un journal de console, à l'intérieur de ce corps de fonction, nous pouvons ajouter n'importe quel code que nous voulons exécuter avant que l'instance n'ait été créée. Je vais ajouter une virgule à la fin, puis juste copier ceci avant de créer un crochet. Ensuite, je vais coller ça en sept fois de plus pour que vous puissiez voir tous les huit crochets en action, donc 1, 2, 3, 4, 5, 6, 7. Maintenant, je vais supprimer la virgule de la dernière. Le second est le crochet créatif. Ensuite, modifiez le texte pour créer dans le journal de la console. Nous avons ensuite BeForemount. Ensuite, bien sûr, la tâche suivante est montée, alors changez le nom pour le crochet monté, puis ajoutez le texte à l'intérieur du journal de la console. Ensuite, nous passons aux phases mises à jour. Tout d'abord, nous avons BeforeUpdate, suivi par mis à jour. Puis enfin, les deux derniers sont une phase détruite, donc la seconde à durer est AvanceDestroy. Puis enfin, le dernier crochet est la phase détruite. Sauvegardez ça. Si nous allons maintenant dans le navigateur , puis cliquez avec le bouton droit de la souris et « Inspecter » pour ouvrir les outils de développement. Sélectionnez la console et nous pouvons voir que les quatre premiers crochets sont appelés, nous avons BeForecReates, créé, BeForeMount et également monté. Cela a du sens parce que l'instance a été créée et également montée. Mais nous n'avons pas provoqué de modifications de données pour mettre à jour ou provoquer la destruction de l'instance. Si nous montons au champ d'entrée et tapons quelque chose à l'intérieur de là, nous pouvons voir maintenant que nous avons les mises à jour et mises à jour avant déclenchées pour chaque frappe que nous faisons. Nous avons ce comportement parce que nous avons la propriété data de la nouvelle configuration de texte de nom à l'intérieur de nos objets de données. En outre, nous avons ajouté ceci au champ d'entrée avec liaison de données bidirectionnelle en utilisant le modèle V. Rappelez-vous aussi que toute configuration de propriété de données, choisie dans la création de l'instance de vue est alors surveillée par Vue js et que les mises à jour déclenchent un re-rendu. Cela ne laisse qu'un crochet de cycle de vie de BeforeDestroy et détruit à être déclenché. Si vous vous souvenez de la vidéo utilisant des modèles de chaîne, nous avons utilisé la méthode d'instance Vue fourni des outils appelés $Mounts pour monter le modèle sur la div sélectionnée à la place de la propriété el. Vue js nous fournit également une autre méthode d'instance appelée $Destroy. Cela en a l'air, détruit une instance Vue et fait tout le travail de nettoyage, comme la suppression de tous les écouteurs d'événements et la liaison de toutes les directives que nous configurons. Si nous revenons à la page d'index et localisons le formulaire, nous avons déjà un gestionnaire d'événements sur soumettre. Nous pouvons facilement l'utiliser pour appeler la méthode destroy, donc si nous ajoutons simplement $Destroy à l'intérieur de là. Maintenant, si nous actualisons le navigateur, puis tapez du texte pour déclencher une mise à jour. Ensuite, appuyez sur le bouton appelé « Méthode de destruction », nous pouvons maintenant voir tous les crochets du cycle de vie sont maintenant déclenchés à l'intérieur de la console. Maintenant, notre instance vm1 a été détruite. Vue n'a plus le contrôle de notre section d'inscription. Nous pouvons voir cela en essayant d'ajouter un nouveau nom à notre liste d'invités. Vous saurez que c'est à l'intérieur de la console que nous tapons, aucune mise à jour n'est déclenchée. Notre instance Vue a été déconnectée et n'a désormais aucun contrôle sur les sorties. Le code HTML est toujours en place. Il ne sera tout simplement plus mis à jour. Finissons en revenant à la page d'index et en revenant à la méthode d'envoi. Nous pouvons supprimer la méthode de destruction, puis rétablir l'application pour fonctionner dans l'ordre en ajoutant notre méthode de formulaire soumis. C' est ainsi que fonctionne le cycle de vie de Vue js dans la pratique et comment nous pouvons nous accrocher à chaque étape. Évidemment, chaque crochet de cycle de vie peut être utilisé pour effectuer tâches plus complexes qu'un simple journal de console. Mais je voulais juste vous montrer quelle étape chaque crochet est appelé et aussi les montrer en action. 36. Sectio nd'outro : examen approfondi de Vue: J' espère que vous avez apprécié cette section et la construction de votre premier projet. À l'heure actuelle, nous devrions être beaucoup plus familiers avec façon dont Vue.js fonctionne et ce qu'il peut faire. Si vous vous sentez encore un peu débordée, ne vous inquiétez pas. C' est tout à fait normal et vous aurez beaucoup plus de pratique de ce que vous avez appris jusqu'à présent. Nous allons maintenant passer à une nouvelle section où non seulement nous commencerons un nouveau projet, mais nous examinerons également comment nous pouvons utiliser les outils de construction et comment ils peuvent améliorer configuration de notre projet ainsi que notre flux de travail. Je te verrai là-bas. 37. Section d'intro : construire des outils et flux de travail: Cette section est axée sur la façon dont nous pouvons utiliser les outils de construction pour améliorer nos projets. En outre, comment nous pouvons améliorer notre flux de travail, rendant plus approprié pour les applications de mobilité à grande échelle. Nous allons utiliser ces nouveaux outils de construction pour configurer notre prochain projet, appelé Creative Cards. Dans ce projet, nous allons construire une application de carte de vœux où l'utilisateur peut créer sa propre carte de vœux personnalisée avec ses propres textes et images personnalisés. J' espère que vous êtes impatient de vous lancer dans le nouveau projet. Commençons par installer à la fois Node et NPM. 38. Installer le nœud et NPM: Au cours de cette section, nous allons configurer notre prochaine mise en place d'une manière légèrement différente de celle de la dernière fois. Nous utiliserons un outil appelé View CLI. Nous allons regarder la vue CLI et ce qu'il peut faire pour nous dans la prochaine vidéo. Mais pour l'instant, nous devons installer Node JS et NPM, que nous avons tous les deux requis pour que la vue CLIT s'exécute. Je vais aller sur mon navigateur web. Ensuite, je vais passer à nodejs.org, et cela vous mènera à la page d'accueil du nœud J-s. Node JS nous permet essentiellement d'utiliser JavaScript sur le serveur plutôt que seulement à l'intérieur du navigateur où il a été utilisé historiquement. Il peut être utilisé pour créer un serveur Web photos, mais à la place va se fondre dans la vue CLI gère ces photos. téléchargement Node JS inclut également NPM. NPM est un gestionnaire de packages Node. On va aller à npmjs.org. Ceci est le site Web du gestionnaire de paquets NPM. Cela nous permet d'avoir accès à des milliers de paquets JavaScript de code que nous pouvons ajouter à notre projet. Parmi ce qui est dû dans ce projet sera l'utilisation de paquets tels que web pack et bubble, que nous examinerons plus en détail bientôt. Aussi, nous utilisons Firebase pour notre stockage de photos, qui a un paquet NPM à installer. Même la vue elle-même est installée en tant que paquet. Revenons d'abord à Node JS, je vais commencer l'installation. Je vais passer aux Téléchargements, puis si vous choisissez un téléchargement pour votre système particulier, si vous n'êtes pas sûr de lequel aller, la page d' accueil détectera généralement automatiquement le système que vous utilisez, donc nous devrions avoir le bon téléchargement disponible. Je vais installer la dernière version. Je vais cliquer sur Courants. Il donne quelques secondes pour télécharger. Une fois que c'est fait et il suffit d'ouvrir et d'installer de la manière habituelle. J' utilise un Mac mais il peut être légèrement différent sur Windows. Mais tu ne devrais pas avoir de problèmes. Je vais juste continuer et accepter la licence, puis appuyer sur Installer. Donnez-leur juste un moment pour terminer l'installation. Ensuite, nous aurons Node et NPM installés sur notre machine. Vérifions que cela a été installé avec succès, je vais me diriger vers le terminal. J' utilise un Mac pour ce cours, mais si vous utilisez une machine Windows, vous aurez également accès à un programme de ligne de commande, tel que Windows PowerShell. Passez à cela si vous utilisez une machine Windows. Toutes les commandes que nous utilisons dans ce cours devraient être applicables aux deux. Rendons cela un peu plus grand, et quand nous vérifions, nous avons Node et NPM installés, avec quelques commandes simples. D' abord, je vais taper Node, puis -v. Si vous voyez le numéro de version s'afficher juste en dessous, cela signifie que le nœud a été installé avec succès, la même chose avec NPM. NPM -v actuellement, c'est 5.0.3. Si, comme moi, vous avez les numéros de version affichés comme ceci, vous avez installé Node et NPM avec succès et vous êtes maintenant prêt à passer à la vidéo suivante, où nous allons regarder l'interface de ligne de commande de vue et comment l'utiliser pour configurer notre projet. 39. Projets d'échafaudage avec le vue-cli: Dans la dernière vidéo, nous avons installé avec succès node.js et le gestionnaire de paquets de noeud. Dans cette vidéo, nous allons utiliser un outil appelé Vue CLI pour réaliser nos projets. CLI signifie interface de ligne de commande et il nous permet de créer un nouveau projet avec la plupart de la configuration commune déjà pris en charge pour nous. Les projets JavaScript peuvent devenir assez complexes lors de la configuration de tous ces outils de construction nous-mêmes avec tous les paquets NPM que nous voyons souvent. Passons à Google et nous allons chercher l'interface de ligne de commande Vue et nous avons besoin du premier qui est le lien GitHub pour la vue CLI. Sélectionnez ceci et puis nous sommes amenés à la page officielle de GitHub. Si nous faisons défiler vers le bas, tout d'abord nous pouvons voir l'installation mais nous irons pour cela dans un instant. Si nous descendons aux modèles officiels, nous pouvons voir les modèles disponibles actuels qui comprennent les modèles les plus complexes qui est une version webpack entièrement équipée qui inclut tous les rechargements à chaud et les tests dont nous aurons généralement besoin pour les projets. Il existe une version plus simple de ce webpack 1 et nous allons l'utiliser pour ces projets. Si vous préférez browserify plutôt que webpack, il y a aussi une version standard et une version simple pour ces deux aussi. Mais je vais rester avec webpack pour le reste de ce cours. Il y a aussi une version simple qui est juste un seul fichier HTML qui ressemble plus à l'application de liste d'invités que nous avons créée auparavant. Ces modèles nous permettent d'économiser beaucoup de temps lors de la création de nouveaux projets , car sinon nous devrions installer et configurer manuellement tout ce dont nous avons besoin. Pour le prochain projet, nous utiliserons le modèle simple webpack car nous n'avons pas besoin de la configuration de webpack plus complexe avec les tests. Pour installer cela, revenons au terminal, puis nous installons la CLI Vue avec le gestionnaire de paquets de noeud et cela se fait avec l'installation de NPM, puis tiret G pour installer ce paquet globalement, puis le nom de le paquet est l'interface de ligne de commande Vue, puis appuyez sur « Entrée ». Si vous êtes sur un Mac et que cela ne fonctionne pas, vous devrez peut-être utiliser le pseudo mot-clé avant. Cela s'installe avec les privilèges d'administrateur et vous devez également ajouter un mot de passe. Ajouter pseudo NPM installer le tableau de bord G Vue CLI. Alternativement, si vous voulez changer vos privilèges sans utiliser de pseudo, j'ajouterai également un lien à la fin de cette section. Cela vous permettra de configurer votre ordinateur en tant qu'administrateur sans avoir besoin de taper un pseudo chaque fois que vous installez un nouveau package. Cela installe la CLI Vue dans le monde entier, sorte que nous pouvons l'utiliser pour tous nos projets plutôt que d'être uniquement disponible pour le projet que nous sommes en train de créer. Une fois installé, la dernière chose que je veux faire est de naviguer vers la zone où nous voulons créer le projet. Je vais ajouter le mien au bureau. Pour revenir au répertoire personnel, nous tapons le CD. Nous utilisons LS pour afficher le contenu du répertoire courant. Nous pouvons voir que nous avons le bureau disponible, donc pour changer en cela, nous pouvons utiliser le CD à nouveau, suivi par le bureau. Ensuite, nous pouvons voir que nous sommes à l'intérieur du bureau. Maintenant, lorsque nous configurons le projet, il sera installé à cet endroit. Maintenant, nous allons initialiser le projet à l'intérieur du terminal. Pour mettre en place un nouveau projet Vue CLI, nous utilisons Vue dans celui-ci suivi du nom du modèle que nous voulons utiliser. Je vais utiliser webpack simple. Ensuite, nous donnons un nom au projet, donc ce nom de ce projet va être des cartes créatives. Une fois que c'est fait, appuyez sur « Entrée ». Ensuite, une fois qu'il est installé et une fois que le modèle est téléchargé, nous devrons répondre à quelques questions simples. Le premier est le nom du projet. Il est actuellement défini sur les cartes créatives que nous avons déjà tapées. Donc si on veut ça, on pourrait juste cliquer sur « Entrée ». Nous pouvons également ajouter une description de projet, mais je vais juste entrer sur pour cela. Ajoutez le nom de l'auteur, donc j'y ajoute mon nom. Utiliser SASS ? Je ne vais pas utiliser de SASS pour ces projets, donc je vais cliquer sur « Entrée ». Comme vous pouvez le voir, il est déjà réglé sur no. Maintenant, il nous donne une liste des mesures que nous devons prendre juste pour terminer tout cela. Tout d'abord, nous avons besoin de CD pour changer le répertoire dans le projet de cartes créatives que nous venons de configurer. Je vais appuyer sur « Entrée ». Une fois que vous avez fait cela, l'étape suivante consiste à exécuter l' installation de NPM et cela télécharge tous les packages NPM qui sont requis. Tous ces paquets sont répertoriés dans un fichier appelé package.json et nous allons bientôt explorer le contenu de ce fichier. Cela peut prendre un peu de temps en fonction du nombre de modules NPM que vous possédez. La dernière étape est NPM run dev et ceci est d'exécuter le serveur de développement à l'intérieur du navigateur. Je ne vais pas exécuter cela juste pour l'instant parce que je vais exécuter cela dans le code Visual Studio. Fermons ces Windows et nous devrions maintenant voir que notre projet de cartes créatives est maintenant sur le bureau. Je vais ouvrir cela à l'intérieur d'un Visual Studio, alors ouvrons cela, puis faites glisser sur les projets de cartes créatives dans cela. Alors maintenant, si nous passons à voir et puis descendons au terminal intégré, nous pouvons alors démarrer notre serveur de développement. NPM exécuter dev, puis appuyez sur « Entrée ». Ensuite, j'espère que cela devrait s'ouvrir dans le navigateur et devrait prendre un moment pour s'ouvrir. Si vous voyez ça, nous sommes prêts à y aller. Notre serveur de développement est maintenant configuré. Plus dans le terminal, nous pouvons voir où le projet est en cours d'exécution, donc nous pouvons voir que cela est en cours d'exécution au port 8080. Vous devrez peut-être copier ce lien et le coller dans le navigateur s'il ne s'ouvre pas automatiquement. Un serveur de développement n'est pas toujours nécessaire, mais il est logique d'en utiliser un car il nous permet de créer nos applications et des conditions de test similaires à un environnement de serveur réel. Il a également des avantages supplémentaires tels que le rechargement en direct. Le navigateur mettra à jour les modifications sans que nous ayons besoin d'actualiser la page. Maintenant, nous avons le projet créé et notre serveur web opérationnel. Examinons ces fichiers et dossiers qui nous ont été fournis avec Vue CLI. 40. Explorer la mise en page de notre projet et construire des outils: Dans la dernière vidéo, nous avons créé avec succès nos nouveaux projets de cartes créatives à l'aide de la CLI Vue. J' ai maintenant le projet ouvert dans Visual Studio, et le serveur de développement opérationnel. Maintenant, je veux juste prendre quelques instants pour examiner la structure du projet, que nous avons réellement créé. Si nous regardons les fichiers et les dossiers sur le côté gauche, nous pouvons voir que le premier dossier est les modules de noeud. Ce dossier est l'endroit où tous les modules MPM sont installés lorsque nous exécutons la commande d'installation MPM dans la dernière vidéo. C' est là que se trouve des choses telles que View Call Library, et maintenant nous avons cela comme un paquet, nous n'avons pas besoin d'utiliser les liens CDN, comme nous l'avons fait dans les premiers projets. Ensuite, nous avons le dossier source. Le dossier source sera l'endroit où nous effectuons la majeure partie de notre travail. C' est là que nous allons ajouter la plupart de notre code pour les projets. Cela contient tous les fichiers sources de nos projets, et ceux-ci sont tous stockés sur le serveur plutôt que d'être disponibles pour le public. Ensuite, nous avons le dossier babelrc point. Il s'agit du fichier de configuration d'un outil que nous avons installé appelé babel. fur et à mesure du cours, nous allons profiter de certaines des nouvelles fonctionnalités JavaScript de la dernière version de JavaScript, appelée ES6 ou ES2015. ES6 et ES2015 sont tous deux la même chose. ES6 est la version, ES2015 est l'année de la sortie. L' ES, qui est dans les deux, signifie ECMAScripts. ECMAScript est une norme ou une spécification pour les langages de script, alors que JavaScript est le langage de script réel, qui est basé sur la norme. Quand nous parlons de ES6 ou ES2015, nous parlons de la même chose. Cependant, le navigateur ne peut pas comprendre ce nouveau code. C' est là qu'un babel entre en jeu. Il prend notre code et le compile pour être converti en ES5, qui peut ensuite être lu par le navigateur. On y reviendra plus tard. Gitignore est pour le système de contrôle de version git. Voici où nous pouvons lister tous les fichiers ou dossiers que vous ne voulez pas être suivis par git. Ensuite, nous avons notre fichier index.html familier. Cela fonctionne comme dans le dernier projet, où nous avons encore notre conteneur d'applications principal. Nous avons également une balise de script en bas. Dans le premier projet, nous n'avions qu'un seul fichier JavaScript, qui est notre fichier app.js, qui avait tout notre code de vue js à l'intérieur. Ce projet fonctionnera différemment parce que nous aurons beaucoup de fichiers, principalement parce que nous allons cracher notre base d'appels dans des modules distincts appelés composants. Nous allons ensuite utiliser webpack, qui est installé avec la CLI Vue, où pack est un bundler de modules, qui prend fondamentalement tout notre code que vous écrivez, avec toutes les dépendances telles que babel, puis regroupe le tout dans un seul fichier. Ce fichier bundle, que nous aurons en bas ici, n' est pas lu par le navigateur. La sortie de son fichier compilé est le fichier build.js, que vous pouvez voir ici. Vous pouvez également remarquer qu'il n'y a pas de dossier dist dans l'arborescence du projet. Le dossier Dist n'est créé que lorsque nous construisons pour la production, et nous ne l'avons pas encore fait. Nous travaillons simplement avec le serveur de développement pour l'instant. Nous avons également le fichier package.json, que vous pouvez reconnaître si vous avez travaillé avec node dans le passé. Ce fichier contient des informations sur notre application, et inclut également toutes les dépendances de module que vous pourriez avoir. Je vais fermer ce terminal juste pour que vous puissiez en voir plus. L' interface de ligne de commande Vue est déjà renseignée, le nom et la description, ainsi que quelques informations sur ces projets. Il s'agit des informations que nous avons fournies pendant le processus d'installation. Les scripts ASM fournis tels que dev et build. Nous avons utilisé dev avant lors de l'exécution du serveur de développement, en utilisant npm run dev, en exécutant npm reconstruit, va construire notre production d'applications. Il va également créer le dossier de distribution pour notre bundle. Cette construction de production minime également notre noyau 2. Ensuite, nous avons une liste de toutes les dépendances, les projets, tels que view js. Nous pouvons également spécifier toutes les dépendances que nous voulons uniquement utiliser pour les développements dans les objets de dépendances de développement tels que babel parce que nous voulons seulement l'utiliser pendant le développement pour convertir ensuite notre code prêt pour la production. Nous aurons ensuite un fichier README avec les instructions pour l'exécution et construction de notre application, puis un fichier webpack.config, ceci comme son nom l'indique est l'endroit où nous pouvons configurer webpack. Je ne vais pas entrer dans tout ici en détail car webpack peut être un sujet de cours par lui-même, mais l'une des choses principales est les chemins d'entrée et de sortie des fichiers, que vous pouvez voir juste ici. Le point d'entrée est notre fichier source, qui est main.js, qui se trouve à l'intérieur de notre dossier source. Bien que nous ayons de nombreux fichiers source lors de la création de composants, ils sont toujours rendus à travers ce fichier main.js et nous allons examiner cela plus en détail bientôt. La sortie est notre fichier build.js et c'est le fichier final qui est exécuté à l'intérieur du navigateur avec tout notre code de compilation. Ensuite, nous pouvons ajouter des choses telles que des chargeurs. Comme je l'ai mentionné précédemment, nous utilisons babel pour convertir n'importe quel code ES6 en JavaScripts réguliers et voici le chargeur de babel, qui recherche tous les fichiers avec l'extension the.js. Souvent ici, nous verrons également une liste de ce qu'on appelle les presets 2 mais parce que nous avons le fichier babel.rc, nous avons tous nos presets actifs là à la place. préréglages sont un peu comme l'ajout de plugins. Ce sont des préréglages disponibles pour non seulement convertir du code ES6, mais aussi des choses telles que le code jsx et la bibliothèque de réactions. Si nous nous dirigeons vers notre dossier source, puis cliquez sur main.js, il s'agit d'un fichier principal pour webpack à utiliser. Ce fichier importe à la fois la bibliothèque de vues et aussi le fichier d'application principal appelé App.vue. Vous pouvez penser à la mise à jour App.vue comme le wrapper principal ou le fichier parent à tous les composants dans lesquels nous créons. C' est pourquoi le point d'entrée webpack est main.js, car il rend App.vue, puis ce fichier App.vue contient tout le reste du code de suivi dans l'application. Vous verrez également la propriété el familier, qui est l'ID à l'intérieur de la page d'index où nous voulons rendre notre contenu à. Si nous explorons App.vue, c'est ce qu'on appelle un seul composant de fichier. Il a une extension .v et le contenu est divisé en trois sections. Tout d'abord, nous avons la section du modèle. Un modèle est le contenu principal du composant. Ici, nous pouvons créer notre balisage html que nous allons vouloir utiliser à l'intérieur des composants. Nous pouvons également mélanger dans nos données de vue avec les accolades doubles comme nous l'avons fait précédemment. Ci-dessous, nous avons ensuite notre section de script. Donc, beaucoup cela semblera familier à partir de la dernière section. Les balises de script où nous voulons inclure nos propriétés de dates vuejs, nos méthodes, propriétés calculées et tout le reste que nous avons regardé jusqu'à présent ainsi que tout JavaScript simple aussi. Nous examinerons cela plus en détail au cours des projets. Plus bas, nous avons la troisième et dernière section de notre composant, qui est la section Style. Nous pouvons également ajouter des styles à ce modèle. Nous avons les options pour appliquer ces styles à l'ensemble de notre application. Je vais juste les contenir à ce modèle particulier. Diviser notre code comme celui-ci en un seul modèle de fichier est rendu possible en utilisant un outil de facturation tel que webpack, qui regroupe tout ensemble pour nous dans un fichier de sortie groupé à la fin. Voici donc un aperçu de la structure de notre nouvelle application, qui a été mise en place à l'aide de la CLI Vue. Maintenant, je sais que les choses peuvent sembler un peu compliquées pour le moment si ce genre de configuration ne vous est pas familier , mais nous allons utiliser cette structure pour le reste du cours. Donc, à la fin, vous devriez être beaucoup plus à l'aise après un peu plus de pratique. 41. Utiliser l'objet données avec des modèles de fichiers uniques: Dans la dernière vidéo, a commencé à regarder les modèles de vue de fichier unique. Maintenant, je veux jeter un oeil à la façon dont les scripts fonctionnent, en particulier en utilisant la propriété data que vous avez déjà utilisée pendant ce cours. Tout d'abord, nous allons nous assurer que notre nouvelle application est en cours d'exécution. Si votre serveur doit fonctionner, génial, vous pouvez simplement vous diriger vers votre navigateur, et voir l'application en cours d'exécution comme ceci. Si vous revenez après une pause et que le service n'est pas en cours d'exécution, nous devons redémarrer le serveur de développement. Accédez à Visual Studio Code, puis accédez au terminal intégré. Si vous utilisez le terminal standard, n'utilise pas leur terminal dans Visual Studio ou votre éditeur de texte. Vous devrez peut-être utiliser Cd pour changer dans le répertoire courant, et exécuter mpm, exécuter dev à partir de là. À l'intérieur du terminal, mon serveur de développement est toujours en cours d'exécution. Je lance closes terme, nous avons le contrôle et puis c, et puis nous sommes ramenés au répertoire du projet. Pour arriver à l'avant et encore, nous devons exécuter mpm run dev, puis appuyer sur Entrée. Ensuite, une fois que vous obtenez la réouverture du navigateur, si le serveur fonctionne correctement mais ne s'ouvre pas dans le navigateur, vous pouvez ouvrir en tapant localhost : 8080 dans le navigateur là, puis il devrait s'exécuter. La page d'accueil que vous voyez est composée du logo, des liens essentiels, ainsi que des liens écosystémiques. Nous pouvons les voir si vous passez au projet, puis ouvrez le fichier app.vue. Toujours le code doit être contenu à l'intérieur des balises de modèle, qui est la section supérieure, sorte que nous ayons le lien d'image tout en haut. Nous avons ensuite le cap de l'écosystème suivi des liens que nous avons vus auparavant. Tout cela est juste html normal, et vous pouvez même mélanger dans les données de vue comme nous l'avons déjà fait. Dans le script ci-dessous, si nous allons à notre instance de vue, nous avons la propriété de données de message, qui dit, bienvenue à votre application vue.js. Nous pouvons voir si nous allons sur le navigateur, nous n'avons pas ceux-ci affichés sur la page. Nous pouvons facilement ajouter cela dans notre modèle. Je vais ajouter ceci à peu près le haut, juste en ouvrant les doubles accolades. Ensuite, nous pouvons ajouter la propriété de dates de message dedans, et enregistrer cela. Alors maintenant, si nous allons sur le navigateur, nous pouvons voir qu'il dit bienvenue à votre vue. Application Js. Vous avez peut-être remarqué que nous n'avions pas besoin d'actualiser la page cette fois. C' est le rechargement à chaud, qui est fourni par webpack. Si nous allons au package.js sur le fichier, lorsque nous exécutons le mpm run def. Nous pouvons voir que exécute également la commande de tiret hot, et c'est d'où vient le rechargement à chaud. Retour dans l'application. vue, si nous avons seulement une petite application, nous pouvons créer toute notre application à l'intérieur de ce modèle unique. Nous allons casser cette application en composants plus petits dans la section suivante. Pour rendre les choses plus autonomes et gérables, vous saurez que c'est l'intérieur de nos balises de script, notre instance de vue est un peu différente de ce que nous avons utilisé dans les derniers projets. Nous pouvons toujours inclure toutes les mêmes méthodes, propriétés calculées et montres, par exemple. Cependant, la propriété data fonctionne un peu différemment. Les scripts et même la section de style n'est pas nécessaire pour s'exécuter. Nous pouvons même le supprimer et ensuite rafraîchir le navigateur. Vous pouvez voir que l'absolu s'exécute, mais sans que les données du message s'affichent, bien sûr. Ajoutons-le à nouveau et nous pouvons jeter un oeil aux différences. Tout d'abord, nous devons créer nos balises de script. La première chose que nous devons faire est de faire une exportation, par défaut, puis l'environnement dans le code soulève. Cela fait partie du système de modules ES6. Exporter le module signifie essentiellement qu'il sera maintenant disponible pour l'utiliser comme une importation, à l'intérieur de fichiers. Nous pouvons voir cette importation à l'intérieur des js principaux. Le fichier app.vue est importé en spécifiant un chemin d'accès au fichier, ainsi que le nom du fichier, dans ce cas de l'application. Nous exporterons tous les modules ou composants pendant ce projet et les importerons au besoin, sorte que vous obtenez beaucoup de pratique à faire. Revenons à l'app.vue. Maintenant, si nous essayons d'ajouter notre propriété de message, si nous essayons d'ajouter nos données, comme nous l'avons fait dans la dernière vidéo, créant nos objets de données, puis définissez le message égal à une chaîne, je vais juste ajouter le bienvenue à cela. Si nous sauvegardons cela et passons au navigateur, jetons un coup d'oeil. Nous n'avons pas la propriété message de bienvenue affichée à l'écran. Ouvrons les outils de développement, puis allons dans la console. Nous avons quelques erreurs. Nous voyons d'abord que l'option de données doit être une fonction. Ensuite, cela provoque également le deuxième avertissement nous indiquant que la propriété du message n'est pas définie. Pour résoudre ce problème, nous devons inclure la propriété data comme une fonction qui retourne ensuite des données. Pour ce faire, renvoyez la propriété data dans une fonction comme celle-ci. Alors juste à l'intérieur de cela, nous devons retourner des données. Ouvrez les accolades doubles et puis à l'intérieur de cette déclaration de retour, nous pouvons ajouter notre propriété de données, juste comme ça. Maintenant, si nous sauvegardons cela et passons au navigateur, nous perdons maintenant les messages d'erreur, ce qui est génial, et nous avons maintenant le message de bienvenue affiché. Il y a une bonne raison pour laquelle nous devons retourner les données à l'intérieur d'une fonction, lors de l'utilisation de composants. Cela est dû au fait que les composants sont destinés à être réutilisables. Si vous avez plus d'un composant partageant exactement la même propriété de données, tous les composants devront partager la même valeur des données, ils seront également tous mis à jour ensemble, lorsqu'il y a un changement. L' ajout de données en tant que fonction permet à tous les composants de conserver leurs propres états internes. En utilisant notre exemple, nous pourrions avoir plusieurs composants qui ont tous besoin d'une propriété de message, mais en utilisant une fonction, le message peut maintenant être différent pour chaque composant. Cela permet aux composants de partager un modèle commun qui garde toujours une trace de ses propres données ou états internes si nécessaire. 42. Section d'outro : construire des outils et flux de travail: C' est la fin d'une section assez sûre, mais néanmoins importante. Nous avons maintenant une nouvelle configuration de projet, qui est plus évolutive et nous permet de travailler avec de nouvelles fonctionnalités telles que les composants. Ces structures de composants seront le sujet de notre prochaine section, donc j'ai hâte de vous y voir. 43. Section d'intro : introduction aux composants: Comme nos applications deviennent de plus en plus complexes, une configuration comme notre application de liste d'invités peut ne pas être idéale. Notre seul fichier d'affichage par point d'application peut rapidement croître et devenir gonflé, ce qui le rend difficile à maintenir et à tester. En utilisant une configuration comme nous l'avons maintenant, en utilisant Webpack, nous pouvons maintenant diviser notre code en modules ou composants plus petits. Cela rend notre fichier plus petit, plus facile à entretenir et à tester, et nous permet également de réutiliser des composants plus d'une fois. Nous avons beaucoup à couvrir dans cette section, alors passons directement aux composants d'apprentissage. 44. Que sont les composants ?: L' une des grandes fonctionnalités de vue.Js est la possibilité d'utiliser des composants. Vous pouvez penser à un composant comme un bloc de construction pour notre application. Nous les utilisons pour diviser notre code en morceaux plus petits et plus maintenables. Un composant peut également être réutilisé plusieurs fois, à partir de votre application pour éviter la répétition du code. Conserver des sections de code dans des composants autonomes aide également à déboguer et à garder notre code plus organisé et maintenable. Jetons un coup d'oeil à la façon dont les composants peuvent être appliqués à notre projet. C' est notre demande de carte finie. Nous pouvons constater qu'il y a des domaines qui se répètent. Nous avons les champs de saisie de texte sur le côté gauche, et tous les trois sont exactement les mêmes. en va de même pour une carte où le texte est affiché. C' est un cas d'utilisation idéal pour l'utilisation de composants. Nous savons déjà en explorant les fichiers dans notre application qu'il existe un wrapper principal appelé le fichier app.vue. Nous savons que nous pouvons utiliser ce wrapper pour contenir le reste de notre application, qui peut tous être imbriqué à l'intérieur. Dans ce wrapper app.vue, nous pouvons commencer à créer plus de composants, tels qu'un en-tête. Cet en-tête sera placé dans son propre modèle de fichier unique, comme le fichier app.vue. Lorsque vous nommez des fichiers de composants, il est préférable d'être aussi descriptif que possible. Cela permet de créer des applications à plus grande échelle avec de nombreux composants. Nous pouvons clairement voir où les composants s'intègrent. Dans ce projet, j'ai appelé ce fichier l'en-tête .vue. Aussi, j'ai placé le pied de page dans un fichier footer.vue. Les fichiers d'en-tête et de pied de page sont appelés à partir du wrapper principal. Dans le cas de cette application, il n'est pas essentiel d'avoir l'en-tête et le pied de page dans des composants séparés. Nous aurions pu le coder à la main à l'intérieur de notre modèle app.vue, car nous ne les utiliserons qu'une seule fois. Cependant, cela nous donne plus de pratique à la création de composants. Toujours à l'intérieur de l'app.vue principale, nous avons la section principale du corps contrôlée par un composant wrapper. Pour chaque côté de la carte, nous avons le devant de la carte. Carte à l'intérieur à gauche, carte à l'intérieur à droite, et la carte à l'arrière. Nous basculons entre ces composants en utilisant les liens de navigation, à l'intérieur de l'en-tête. Ces composants agiront comme un conteneur parent pour tous les composants enfants qu'ils contiennent, tels qu'un texte et des composants d'image. En tant que composant parent, il sera utilisé pour transmettre des données entre les composants que nous couvrirons bientôt. Cela nous laisse maintenant avec les composants réutilisables. Sur la gauche est la zone pour éditer la carte, et cette section particulière, le devant de la carte a des zones de saisie de texte libre, à l'intérieur d'un fichier appelé text-input.vue. La nature des composants signifie que nous n'avons qu'à créer ce composant qu'une seule fois, puis nous pouvons l'ajouter autant de fois que nous le voulons. Le texte entré dans ces zones de texte est alors affiché à l'intérieur des zones de sortie de texte sur le côté droit. Rappelez-vous comment nous avons parlé lors de l'utilisation des propriétés de données dans les composants, que la propriété de données doit être une fonction. Eh bien, c'est là que l'importance de cela intervient. Si nous n'avons jamais eu de données en tant que fonction, comme nous l'avons fait dans le premier projet, lorsque l'une des entrées de texte a été éditée. Les trois sorties de ces textes sur la droite seront mises à jour avec le même texte. Bien sûr, cela ne fonctionnerait pas bien partout parce que nous voulons que les zones de texte libre soient indépendantes. Ils peuvent partager le même modèle visuellement, mais nous voulons que les données ne soient pas partagées avec d'autres. Avoir des ensembles de données fonctionnent comme de fonction, permet à un composant de maintenir son propre état, sorte qu'il peut travailler indépendamment. Nous faisons aussi la même chose pour les images aussi, il y a deux composants. Une pour la zone de téléchargement de l'image puis une sur la droite pour afficher l'image. Passer à l'arrière de la carte qui a simplement les deux mêmes composants d'image parce qu'ils sont maintenant réutilisables. Ensuite, juste le texte de copyright ci-dessous. C' est ainsi que les composants fonctionnent et que nous pouvons les réutiliser plusieurs fois. division de notre application comme celle-ci est rendue possible avec des outils tels que webpack, qui regroupe tous ces modules, les fichiers et toutes leurs dépendances dans un seul fichier de facture pour la production. Espérons que vous pouvez maintenant voir les avantages de l'utilisation de composants. Passons maintenant à les mettre en pratique. 45. Enregistrer des composants globaux: Maintenant, nous avons une meilleure compréhension de ce que sont les composants et comment nous allons diviser notre application en ces composants. Mettons-nous à travailler sur les créer réellement. Si votre projet n'est pas déjà en cours d'exécution, vous devrez descendre au terminal et exécuter npm, exécuter dev et ils devraient ouvrir le serveur de développement dans le navigateur. Nous voyons dans cette page et tout fonctionne bien. Pour commencer, nettoyons l'exemple de code de plus dans le fichier app.vue. Dirigez-vous vers app.vue. La première chose que nous voulons faire est de supprimer tout le code entre les balises de modèle. Donc, tout de la div avec l'identifiant de l'application, jusqu'à la balise de modèle de fermeture. Alors enlevez ça. La même chose pour le contenu du script et aussi pour les styles, ainsi que d'autres styles propres et script quand nous en avons besoin. Ceci est notre modèle de fichier unique vide. Ensuite, je vais ajouter une structure HTML simple pour l'application. Rappelez-vous que ce fichier app.vue finira par être le wrapper principal de notre application. Donc, faites du sens d'ajouter nos conteneurs bootstrap et nos lignes à l'intérieur ici. Les modèles doivent également avoir un élément extérieur principal, donc tous les conteneurs bootstrap couvriront cela. Par exemple, cela ne fonctionnera pas, si nous ajoutons du code HTML tel qu'une balise image, puis un second élément tel que la balise API. Si nous sauvegardons ceci et puis passons au navigateur, nous voyons que nous avons un écran vide. Si nous allons dans les outils de développement et puis ouvrez la console, nous voyons nous obtenons un message disant que modèle de composants devrait contenir exactement un élément racine. Pour corriger cela, nous pouvons utiliser un div, par exemple, comme un élément racine pour entourer notre code. Ajoutons un div à l'intérieur ici et collez la balise de fermeture en bas puis « Enregistrer » et maintenant quand nous actualisons, nous voyons les messages d'erreur sont partis et maintenant nous avons notre message de bonjour. Continuons à ajouter nos lignes bootstrap. Nous pouvons supprimer les textes et aussi la balise image, puis continuer en créant une classe, une classe bootstrap de conteneur. Alors ici, nous pouvons créer notre ligne. Donc, la classe bootstrap de la ligne qui entourera tout le contenu que nous allons ajouter à l'intérieur. Enfin, un troisième et dernier div pour la section, qui va avoir une classe de col-sm-12. Voulez-vous faire la vue de l'application pleine 12 colonnes de large. Pour que cela fonctionne, nous devons saisir le bootstrap pour le lien CDN. Si nous allons sur le navigateur, puis une fois que vous Google, puis faire la recherche bootstrap pour CDN, puis faites défiler vers le bas. Nous pouvons voir sous le titre de téléchargement, nous avons le saut à la section Bootstrap CDN. Nous n'avons pas besoin de JavaScript tout de suite, donc je vais juste copier le lien CSS, qui est la ligne supérieure. Copiez cela et puis nous pouvons l'ajouter dans notre page d'index juste en dessous du titre. Alors donnez cela un « Enregistrer » et ensuite nous pouvons jeter un oeil à l'utilisation de composants globaux. C' est le premier type de composant que je vais vous montrer et cela signifie que le composant n'est pas limité à être utilisé uniquement dans une instance ou des composants particuliers. En gros, nous pouvons avoir accès à n'importe où où nous en avons besoin. Si nous passons au fichier main.js, nous pouvons commencer à travailler sur notre premier composant juste au-dessus de l'instance de vue. Assurez-vous que le composant est au-dessus de cela car nous devons l' enregistrer avant que l'instance de vue ne soit instanciée, pour qu'il fonctionne correctement. Nous enregistrons ce composant global en appelant vue.components à l'intérieur ici, nous donnons ensuite aux composants un nom de balise à l'intérieur d'une chaîne. Il s'agit d'un nom qui faisait référence aux composants. Je vais appeler ça la saisie de texte. Les formats de noms en minuscules séparés par des traits d'union sont considérés comme une bonne pratique, bien que non essentiels, puis séparés par une virgule et dans les accolades, nous passons dans les options, tout comme une instance de vue normale. Nous allons commencer par créer un modèle et ce modèle dans une chaîne va contenir une seule zone de texte. Sortons notre HTML à l'intérieur ici. Balise d'ouverture et de fermeture de la zone de texte. Pour que cela fonctionne correctement, nous devons nous assurer que la bibliothèque vue JS est importée correctement, ce que nous faisons déjà en haut de la page avec la vue d'importation depuis la vue. Si nous importons le module à partir du dossier des modules de noeud juste ici, nous pouvons simplement y faire référence par le nom du module, tel que vue. Si ont été importer quelque chose d'autre qui n'est pas dans le dossier des modules de noeud, nous devons spécifier le chemin du fichier pour le fichier, comme vous pouvez le voir avec l'importation vers le haut sur la ligne deux, puis enregistrer cela. Ensuite, tout le dans le fichier index.html, nous pouvons maintenant ajouter le composant à notre div d'application principale, tout comme un élément HTML. Pour localiser notre div avec l'id de l'application, puis à l'intérieur ici, je vais l'ajouter comme un élément normal, donc du texte, des entrées, une balise d'ouverture et puis notre balise de fermeture. Notez que ce nom d'élément doit marcher le nom de la balise de composants, qui ne sera qu'avant à l'intérieur des composants de vue. Ce sont des composants réutilisables et nous pouvons les ajouter autant de fois que nous le voulons, donc si nous devions copier et coller cela dans quelques fois de plus, nous devrions pouvoir voir trois composants. Si nous sauvegardons cela et passons ensuite au navigateur, nous devrions voir trois composants de zone de texte, mais nous voyons juste un écran vide. C' est à cause de main.js. Notre instance vue remplace le contenu en rendant le contenu de notre fichier app.vue. Ce comportement est normalement ce que nous voulons, mais pour cet exemple, je vais commenter la fonction de rendu afin que nous puissions voir nos composants. Il y a donc des commentaires sur la section et maintenant si nous actualisons, nous voyons nos trois zones de texte apparaissent à l'écran. Aussi parce qu'ils sont enregistrés dans le monde entier, nous pouvons les ajouter dans les modèles de vue à l'intérieur de notre application. De la même manière avec nos éléments HTML, notre objet options à l'intérieur du composant vue, ne se limite pas à ajouter un modèle de chaîne comme nous utilisons actuellement, nous pouvons en fait utiliser d'autres options que nous avons à notre disposition dans le vue, comme l'ajout de données et de méthodes. Nous savons à partir de la dernière section en utilisant la propriété de données dans les composants, est un peu différent. Nous devons l'ajouter en tant que fonction. Ajoutons des données pour modifier le texte de l'espace réservé de la zone de texte. Tout d'abord, nous allons lier l'espace réservé, à une propriété de date ou à une valeur de texte. Puis à un [inaudible] sur la fin de nos modèles pour ajouter notre propriété de données. C' est une fonction comme nous le savons, qui prend ensuite un objet et ensuite nous retournons un objet contenant nos données. Créons notre valeur de texte, la propriété de date et définissons ceci sur une chaîne, juste de type ici. Enregistrez cela et maintenant nous devrions voir la valeur de type ici à l'intérieur des trois zones de texte. En outre, nous pouvons ajouter des méthodes pour modifier le texte de l'espace réservé lorsque nous cliquons dessus. Donc, juste en dessous de la section de données, ajoutez une virgule et ensuite nous pouvons ajouter nos méthodes. Méthodes ajoutées exactement la même que nous le savons déjà. Je vais ajouter une méthode appelée changement de texte et tout ce que je veux que cette méthode fasse est de sélectionner cette valeur .text, qui est cette donnée que nous définissons ici et nous allons juste la définir à une nouvelle chaîne de textes modifiés. Pour déclencher cette méthode, nous devons ajouter un écouteur de clic sur la zone de texte, sorte que toute balise d'ouverture, nous pouvons ajouter le raccourci de au clic, puis l'utiliser pour déclencher la fonction de changement de texte. Sauvons ça. Si nous vérifions cela dans le navigateur, vous remarquerez que les trois composants agiront indépendamment, donc si nous cliquons sur le premier, nous voyons le texte changé. Pour le texte à l'intérieur des deuxième et troisième composants est exactement comme il était avant. C' est ainsi que nous pouvons ajouter des composants à notre application dans le monde entier et maintenant nous pouvons passer à la vidéo suivante et jeter un oeil à l'enregistrement des composants localement. 46. Enregistrer des composants locaux: Dans la dernière vidéo, nous avons appris à créer un composant que vous souhaitez rendre disponible dans le monde entier sur l'ensemble de notre application. Maintenant, nous allons examiner comment nous pouvons enregistrer un composant local, qui n'est disponible que dans la portée des instances ou des composants. abord, je vais supprimer le composant global de la dernière vidéo. Donc, si vous passez au main.js et ce composant que nous avons enregistré, je vais supprimer cette section complète et nous pouvons également supprimer les composants d'entrée de taxe gratuite de l'intérieur du index.html. Supprimez donc les trois éléments de saisie de texte, puis enregistrez cela. Je vais remplacer ce composant global par deux composants simples distincts, qui afficheront juste du texte du composant 1 et aussi du composant 2. Retour dans le fichier main.js, les composants locaux sont créés différemment des composants globaux. Nous avons encore besoin de créer notre objet d'options mais cette fois, nous devons le stocker à l'intérieur d'une variable comme celle-ci. Ajoutons notre variable appelée component1 et définissons ceci à un objet, puis une fois que j'ai ajouté un modèle simple, qui va être quelques balises p pour sortir du texte de component1 , puis fermez la balise p et puis je vais faire le même avec un deuxième composant. Encore une fois, cela doit être une variable car nous appelons component2 avec huit modèles et cette chaîne va également être des balises p avec le texte de component2 comme ça. En bas, nous pouvons toujours laisser la fonction de rendu commenté Alpha maintenant, car nous ne travaillons pas encore avec le fichier App.vue. Plus dans le index.html, puis entre l'application, nous pouvons ajouter notre component1, la balise de fermeture, et ensuite nous pouvons également faire la même chose pour notre component2. Copions ceci et ajoutons ceci ci-dessous. Modifiez cela pour être les deuxième composants, puis enregistrez. Maintenant, si nous passons au navigateur et puis actualisons, nous voyons qu'il y a un problème. Ouvrons la console et voyons ce qui se passe. Sur l'onglet de la console, et nous voyons deux messages d'avertissement rouges, qui a un message d'éléments personnalisés inconnus pour component1 et aussi component2. Cela nous donne un indice sur ce que nous avons mal fait. Il est dit : « Avez-vous enregistré le composant correctement ? » En effet, en tant que composants locaux, nous devons les enregistrer là où nous voulons qu'ils soient disponibles. Allons à l'instance de vue dans le fichier main.js , puis enregistrez les composants que vous voulez utiliser. Faisons cela juste en dessous de la propriété L. Nous pouvons ajouter notre option de composants et ceci est un objet. Donc, nous pouvons commencer avec le nom de chaîne de component1. C' est le nom que nous donnons au composant, puis séparé par le deux-points. Nous sommes le vrai nom des composants. Donc c'est le composant1. Si nous passons au navigateur et puis actualisons, nous voyons toujours les messages d'erreur. C' est parce que nous avons donné à ce nom component-1 un alias avec un trait d'union entre les deux. Alors ajoutons ce trait d'union pour les premiers composants et maintenant nous devrions voir le premier composant est affiché à l'écran. L' avertissement est terminé et la console affiche maintenant seulement que le composant 2 est inconnu. Maintenant, faisons le même composant2. Dans le main.js, nous pouvons ajouter une virgule, puis ajouter notre nom et cela va être component2 et cela peut être n'importe quel nom que nous voulons utiliser. Le second correspondait cependant au vrai nom du composant, qui est son nom de variable que nous lui avons donné. Component2 va ajouter le trait d'union à l'intérieur de la page d'index et maintenant nous devrions donner une actualisation et nous voyons les deux composants à l'écran. Voici donc comment utiliser les composants localement et comment les rendre disponibles dans une portée particulière. Ensuite, nous allons commencer à construire notre application avec des composants de fichier unique. Ce sont les composants contenus dans leur propre fichier, comme l'App.vue et nous allons jeter un oeil à ces prochains. 47. Créer des composants de fichiers uniques: Dans les dernières vidéos que nous avons examinées, enregistrent des composants à la fois globalement et localement. Ici, nous allons examiner une façon différente d'utiliser composants en les créant dans leur propre fichier unique. En fait, pour recréer dans le projet complet de cette façon. Les composants de fichier unique permettent d'avoir tout ce qui concerne les composants en un seul endroit. C' est un grand [inaudible] de créer un composant en utilisant Vue.Component. Le fichier App of Vue est également un composant de fichier unique. Tout comme cela, nous avons une section pour créer notre modèle en HTML. Fait avec toutes les données de vue telles qu'un double accolades ou un événement. Ce modèle est également beaucoup plus facile à utiliser que d'utiliser un modèle de chaîne unique. Comme si on l'avait regardé jusqu'à présent. Nous avons également la section de script au-dessus de toute logique liée à Vue SIG, telle que les données et les méthodes, ainsi que tout JavaScript Vanilla que nous pourrions vouloir ajouter. Puis en bas, nous avons aussi nos styles. Nous pouvons également spécifier si les styles sont globaux ou s'ils ne s'appliquent qu'à ce composant. Nous avons cette flexibilité, donc avant de commencer, nous pouvons supprimer le composant de la dernière vidéo. Laissons le composant 1 et le composant 2. Ensuite, nous n'avons pas pu supprimer la section du composant de l'instance de vue. Nous allons utiliser le fichier app.vue comme wrapper principal. C' est ses propres commentaires sur la fonction de rendu. Ensuite, enfin dans la page d'index, supprimons les éléments du composant 1 et 2. Pour commencer, je veux ajouter un dossier de composants à l'intérieur du dossier source. Sélectionnez un nouveau dossier appelé composants. Assurez-vous qu'il se trouve juste en dessous du dossier source. À l'intérieur du dossier des composants, je vais créer un nouveau fichier. Ce fichier va s'appeler Header.vue. Nous pouvons également créer des sous-dossiers pour nos composants, ce qui est une bonne idée pour les grandes applications pour garder les choses plus organisées. Ce fichier d'en-tête sera un composant simple. Nous nous habituerons à les construire à l'intérieur de notre application. Commençons. Si vous ouvrez le fichier Header.vue, nous pouvons ajouter la structure de base. Tout comme dans notre fichier app.vue. Commençons par créer le modèle. Cela nécessite l'ouverture et la balise de fermeture. Ensuite, nous pouvons ajouter nos balises de script, puis finalement vers le bas, nous pouvons demander les balises de style. Maintenant, dans la section du modèle en haut, je vais commencer par ajouter un menu pour notre application. Si vous vous souvenez d'avant que nous avons besoin d'un div environnant, ou d'un élément environnant pour nos modèles. Puis à l'intérieur d'ici, je vais ajouter un titre de niveau 1, qui va être le titre des cartes créatives. Nous allons ajouter une classe bootstrap de text-center. Ensuite, sous cette rubrique, nous pouvons commencer à créer notre liste de commandes ul, qui sera notre menu.ou un des éléments environnants pour nos modèles. Puis à l'intérieur d'ici, je vais ajouter un titre de niveau 1, qui va être le titre des cartes créatives. Nous allons ajouter une classe bootstrap de text-center. Ensuite, sous cette rubrique, nous pouvons commencer à créer notre liste de commandes ul, qui sera notre menu, ou un des éléments environnants pour nos modèles. Puis à l'intérieur d'ici, je vais ajouter un titre de niveau 1, qui va être le titre des cartes créatives. Nous allons ajouter une classe bootstrap de text-center. Ensuite, sous cette rubrique, nous pouvons commencer à créer notre liste de commandes ul, qui sera notre menu. [ inaudible] Eh bien peut aussi avoir une classe Bootstrap, et celui-ci va être nav, puis justify-content-center. Ensuite, affectez ul des éléments de liste de commandes. Les éléments de liste ont une classe Bootstrap également de nav élément. Le premier lien que je vais ajouter est pour le devant de la carte. Ensuite, affichez le [inaudible] qui va copier cet élément de liste, puis collez trois fois de plus. Le deuxième lien est à l'intérieur à gauche. C' est l'intérieur gauche de notre carte. Puis à l'intérieur à droite, puis enfin le quatrième lien est pour le dos de la carte. Cela fonctionnera parfaitement sans aucun des scripts, ni aucune des sections de style ajoutées. Aucun consentement de ceux-ci n'est requis pour que les composants fonctionnent. Si nous passons au navigateur, puis actualisons, nous pouvons toujours voir qu'aucun en-tête n'est visible. C' est parce que nous devons d'abord faire quelques pas. Nous savons que le fichier app.vue est un wrapper principal. Nous devons dire à ce fichier App que nous voulons utiliser les composants d'en-tête. À l'intérieur des balises de script de app.vue, nous pouvons commencer par ajouter une instruction impulse. Ce que nous voulons faire est d'importer l'en-tête, et c'est l'alias que nous donnons au composant. Ce nom dépend de nous. Ensuite, nous voulons l'importer à partir du chemin du fichier, donc nous utiliserons ./, puis allons à l'intérieur du dossier des composants. Le fichier est appelé Header.vue. Ceci est notre fichier d'en-tête importé. Ensuite, comme nous l'avons regardé dans la vidéo des composants locaux, nous devons enregistrer le composant afin qu'il soit disponible à l'intérieur de ce modèle. Ensuite, nous ajoutons nos valeurs par défaut d'exportation, qui va contenir toutes nos données de vue. Ensuite, nous pouvons enregistrer nos composants comme nous l'avons fait dans la vidéo des composants locaux. Nous ajoutons NavHeader, est le header.Il y a quelques choses à savoir ici l'intérieur de la propriété components. Le prénom à gauche est le nom de la balise. Cela peut être nommé tout ce que vous voulez, et c'est comment référencer nos composants. Le nom sur la droite, surtout le nom donné des déclarations d'importation juste au-dessus. Nous pouvons ensuite ajouter les composants dans notre modèle utilisant le nom de balise que nous avons donné à tous NavHeader. Comme nous l'avons mentionné au début de cette section. Même si le nom que nous avons donné au composant est CamelCase, il est recommandé d'ajouter le nom de l'élément en minuscules à l'intérieur du modèle. Si nous allons à notre modèle, nous pouvons ajouter notre NavHeader en minuscules séparés par des traits d'union, puis fermer ceci. Maintenant, nous pouvons tester cela dans le navigateur. Si votre application n'est pas en cours d'exécution, assurez-vous que npm exécute dev dans le terminal en premier. Ensuite, si nous passons au navigateur, nous voyons maintenant que nous avons le titre principal des cartes créatives, ainsi que les liens de navigation. Le titre est attaché au haut de la page. Nous pourrions corriger cela avec un peu de CSS simple. Si nous revenons au fichier header.vue, puis descendez aux balises de style. Tout ce que nous avons à faire est d'ajouter notre style pour le H1, et juste ajouter un peu de Margin-top. Nous allons ajouter 10 pixels à là. Maintenant, on peut voir qu'il est poussé du haut juste assez. C' est ainsi que nous pouvons utiliser des composants d'une seule page. L'en-tête est assez simple. Nous allons ajouter plus à cela dans les prochaines vidéos.Et il suffit d' ajouter un peu de Margin-top.Nous allons ajouter 10 pixels à là. Maintenant, on peut voir qu'il est poussé du haut juste assez. C' est ainsi que nous pouvons utiliser des composants d'une seule page. L'en-tête est assez simple. Nous allons ajouter plus à cela dans les prochaines vidéos.Et il suffit d' ajouter un peu de Margin-top.Nous allons ajouter 10 pixels à là. Maintenant, on peut voir qu'il est poussé du haut juste assez. C' est ainsi que nous pouvons utiliser des composants d'une seule page. L'en-tête est assez simple. Nous allons ajouter plus à cela dans les prochaines vidéos.Maintenant, nous pouvons voir qu'il est poussé hors du haut juste assez. C'est ainsi que nous pouvons utiliser des composants d'une seule page. L'en-tête est assez simple. Nous allons ajouter plus à cela dans les prochaines vidéos. Et il suffit d'ajouter un peu de margin-top. Nous y ajouterons 10 pixels. Maintenant, on peut voir qu'il est poussé du haut juste assez. C' est ainsi que nous pouvons utiliser des composants d'une seule page. L'en-tête est assez simple. Nous allons ajouter plus à cela dans les prochaines vidéos.Et il suffit d'ajouter un peu de Margin-top.Nous allons ajouter 10 pixels à là. Maintenant, on peut voir qu'il est poussé du haut juste assez. C' est ainsi que nous pouvons utiliser des composants d'une seule page. L' en-tête est assez simple. Nous ajouterons plus à cela dans les prochaines vidéos. Maintenant, on peut voir qu'il est poussé du haut juste assez. C' est ainsi que nous pouvons utiliser des composants d'une seule page. L'en-tête est assez simple. Nous allons ajouter plus à cela dans les prochaines vidéos, et il suffit d'ajouter un peu de Margin-top. Nous allons y ajouter 10 pixels. Maintenant, on peut voir qu'il est poussé du haut juste assez. C' est ainsi que nous pouvons utiliser des composants d'une seule page. L'en-tête est assez simple. Nous allons ajouter plus à cela dans les prochaines vidéos. Et il suffit d'ajouter un peu de margin-top. Nous y ajouterons 10 pixels. Maintenant, on peut voir qu'il est poussé du haut juste assez. C' est ainsi que nous pouvons utiliser des composants d'une seule page. L'en-tête est assez simple. Nous allons ajouter plus à cela dans les prochaines vidéos.Et il suffit d'ajouter un peu de Margin-top.Nous allons ajouter 10 pixels à là. Maintenant, on peut voir qu'il est poussé du haut juste assez. C' est ainsi que nous pouvons utiliser des composants d'une seule page. L' en-tête est assez simple. Nous allons ajouter plus à cela dans les prochaines vidéos.Et il suffit d'ajouter un peu de Margin-top.Nous allons ajouter 10 pixels à là. Maintenant, on peut voir qu'il est poussé du haut juste assez. C' est ainsi que nous pouvons utiliser des composants d'une seule page. L'en-tête est assez simple. Nous allons ajouter plus à cela dans les prochaines vidéos.Et il suffit d'ajouter un peu de Margin-top.Nous allons ajouter 10 pixels à là. Maintenant, on peut voir qu'il est poussé du haut juste assez. C' est ainsi que nous pouvons utiliser des composants d'une seule page. L'en-tête est assez simple. Nous allons ajouter plus à cela dans les prochaines vidéos.Et il suffit d'ajouter un peu de Margin-top.Nous allons ajouter 10 pixels à là. Maintenant, on peut voir qu'il est poussé du haut juste assez. C' est ainsi que nous pouvons utiliser des composants d'une seule page. L'en-tête est assez simple. Nous allons ajouter plus à cela dans les prochaines vidéos. Maintenant, nous pouvons voir qu'il est poussé du haut juste assez. C' est ainsi que nous pouvons utiliser des composants d'une seule page. L'en-tête est assez simple. Nous ajouterons plus à cela dans les prochaines vidéos. Maintenant, on peut voir qu'il est poussé du haut juste assez. C' est ainsi que nous pouvons utiliser des composants d'une seule page. L'en-tête est assez simple. Nous ajouterons plus à cela dans les prochaines vidéos. Ceci est notre fichier d'en-tête importé. Ensuite, comme nous l'avons regardé dans la vidéo des composants locaux, nous devons enregistrer le composant afin qu'il soit disponible à l'intérieur de ce modèle. Ensuite, nous ajoutons nos valeurs par défaut d'exportation, qui va contenir toutes nos données de vue. Ensuite, nous pouvons enregistrer nos composants comme nous l'avons fait dans la vidéo des composants locaux. Nous ajoutons NavHeader, est le header.Il y a quelques choses à savoir ici à l'intérieur de la propriété components. Le prénom à gauche est le nom de la balise. Cela peut être nommé tout ce que vous voulez, et c'est comment référencer nos composants. Le nom sur la droite, surtout le nom donné des déclarations d'importation juste au-dessus. Nous pouvons ensuite ajouter les composants dans notre modèle utilisant le nom de balise que nous avons donné à tous NavHeader. Comme nous l'avons mentionné au début de cette section. Même si le nom que nous avons donné au composant est CamelCase, il est recommandé d'ajouter le nom de l'élément en minuscules à l'intérieur du modèle. Si nous allons à notre modèle, nous pouvons ajouter notre NavHeader en minuscules séparés par des traits d'union, puis fermer ceci. Maintenant, nous pouvons tester cela dans le navigateur. Si votre application n'est pas en cours d'exécution, assurez-vous que npm exécute dev dans le terminal en premier. Ensuite, si nous passons au navigateur, nous voyons maintenant que nous avons le titre principal des cartes créatives, ainsi que les liens de navigation. Le titre est attaché au haut de la page. Nous pourrions corriger cela avec un peu de CSS simple. Si nous revenons au fichier header.vue, puis descendez aux balises de style. Tout ce que nous avons à faire est d'ajouter notre style pour le H1, et juste ajouter un peu de margin-top. Nous y ajouterons 10 pixels. Maintenant, on peut voir qu'il est poussé du haut juste assez. C' est ainsi que nous pouvons utiliser des composants d'une seule page. L'en-tête est assez simple. Nous allons ajouter plus à cela dans les prochaines vidéos, et il suffit d' ajouter un peu de Margin-top. Nous allons y ajouter 10 pixels. Maintenant, on peut voir qu'il est poussé du haut juste assez. C' est ainsi que nous pouvons utiliser des composants d'une seule page. L'en-tête est assez simple. Nous ajouterons plus à cela dans les prochaines vidéos. 48. Ajouter le composant du recto de la carte: Maintenant, nous savons comment créer et afficher des composants de fichier unique. Nous pouvons maintenant aller de l'avant et faire bouger notre projet. Je vais passer à notre projet et organiser le dossier des composants en ajoutant un sous-dossier appelé card. Ensuite, à l'intérieur de ce dossier de carte, je vais créer un nouveau fichier appelé CardFront avec l'extension de vue. Si vous vous souvenez des diapositives au début de cette section, nous allons avoir un seul composant de fichier pour chaque côté de la carte. Ce sera le CardFront, CardBack, et à la fois à l'intérieur, à gauche et à droite. Ces composants agiront comme des rappers où vous pouvez déposer dans les composants texte et image où nous le voulons. Ce sont également les sections qui échangeront pour changer de vues lorsqu'un lien de menu est cliqué. Mais plus sur cela dans quelques vidéos cependant. Il suffit de changer l'orthographe. Si nous revenons à la Cardfront.Vue, c'est configuré comme avant avec un modèle, sorte que les balises d'ouverture et de fermeture là, puis suivie par les balises de script et enfin les balises de style. À l'intérieur du modèle, rappelez-vous que nous aurons besoin d'un div environnant. Ajoutons ça à l'intérieur. Vous pouvez également faire de cette div une ligne bootstrap en ajoutant la classe de ligne à l'intérieur. Ensuite, nous devons ajouter quelques colonnes bootstrap, six à gauche et six à droite. Nous allons créer la section de gauche pour commencer. Nous pouvons ajouter les classes bootstrap de col sm 6. Ce sera la moitié de la largeur de la page. Nous allons également ajouter une classe bootstrap de carte, puis une classe CSS personnalisée de zone de modifications. Nous allons l'utiliser dans un instant pour styliser les sections. Copiez cette div gauche, puis collez-le juste en dessous, mais le serait toujours à l'intérieur de cette ligne. Tout ce que nous devons faire est d'ajouter notre classe personnalisée cette fois de l'affichage de la carte. Une fois que vous avez cela en place, nous pouvons descendre aux balises de style, puis à nouveau, modifier ces styles personnalisés. Commencez par la zone de modifications, qui est un côté gauche de la carte. Nous allons donner à cela une couleur d'arrière-plan, une couleur personnalisée de d2f9f9, puis aussi un remplissage de 20 pixels. Ensuite, pour donner une certaine hauteur à la carte, nous allons ajouter la propriété CSS haute de 800 pixels. C' est l'éditorial à gauche. Le côté droit est la section d'affichage de la carte. Ajoutons quelques styles pour cette section. Tout ce que nous allons faire ici est de faire correspondre la hauteur de 800 pixels, puis aussi garder le remplissage cohérent avec 20 pixels là-bas. Comme toujours, ce composant ne s'affichera pas encore. Pour que cela fonctionne, nous devons nous enregistrer et aussi l' importer à l'intérieur du fichier dans lequel vous voulez l'utiliser. Tous nos composants qui sont les enfants de App.vue, donc nous l'enregistrons et l'importons à l'intérieur de là, tout comme nous l'avons fait avec l'en-tête. Si vous vous sentez confiant en donnant un coup de pouce, allez-y et mettez la vidéo en pause et donnez-lui un aller vous-même. Si vous avez besoin d'un indice, suivez simplement les mêmes étapes que nous avons fait pour enregistrer le fichier Header.vue. Sinon, ne vous inquiétez pas, et suivez-moi. À l'intérieur de app.vue, continuons et ajoutons les instructions d'importation. Cette fois, nous devons importer le CardFront. Cependant, c'est un nom à nous, mais je vais l'appeler CardFront pour le garder descriptif. CardFront à partir de, puis le chemin du fichier est slash point, va dans le dossier des composants. Rappelez-vous, cette fois, nous avons le dossier des cartes à l'intérieur des composants. Assurez-vous d'ajouter cela là-dedans. Le nom du fichier est CardFront. Avec cela enregistré, nous pouvons maintenant faire défiler vers le bas, puis ajouter ceci à notre section composants. Je vais l'appeler le CardFront. N' oubliez pas que ce nom est également facultatif pour celui à droite de CardFront doit correspondre à l'instruction d'importation ci-dessus. La dernière chose à faire est d'ajouter ce fichier à l'intérieur de notre template, donc juste en dessous de l'en-tête nav. Ajoutons les composants avant de la carte. Cela signifie que App.vue est un parent de l'en-tête et aussi de la carte des composants. C' est tout ce que nous devons faire maintenant pour aller sur le navigateur et, espérons-le, voir notre composant affiché. Nous avons la zone de modifications sur le côté gauche avec les arrière-plans bleus. Nous avons également la section d'affichage des cartes sur le côté droit. Si vous ne voyez pas cela en cours d'exécution et que vous avez juste une page vierge, vous pouvez avoir une erreur, alors vérifiez à l'intérieur de la console. Vous devrez peut-être également redémarrer le serveur de développement. Si vous devez le faire, je vais appuyer sur Control C pour le fermer puis exécuter npm run dev, puis il devrait être en marche arrière et en cours d'exécution. Enfin, juste pour terminer cette section, j'ai quelques styles de base à appliquer à l'application à l'intérieur du fichier App.vue. Revenez sur App.vue et faites défiler vers le bas jusqu'à la section style. La première chose que nous voulons faire est d'ajouter des styles au corps. Je vais changer la famille de polices pour être Verdana Geneva, et enfin, un sans-serif générique comme le retour arrière. Ajoutez une couleur de texte pour être la valeur de 333. Ensuite, si nous actualisons, nous devrions maintenant voir que les polices personnalisées ont maintenant pris effet. Puis enfin, je veux changer ces éléments de menu en liens. Si nous passons à l'en-tête, puis à l'intérieur de l'élément de liste, nous pouvons simplement ajouter nos a-tags à l'intérieur de là, avec une classe bootstrap de lien nav, puis fermer le a-tag. Je vais juste copier ceci, et le coller devant le deuxième, troisième et quatrième élément. Faites de même pour la balise de fermeture, collez-les dans et enregistrez, puis actualisez. Ensuite, nous pouvons changer le curseur pour être un pointeur au fur et à mesure qu'il survolera. Les styles finaux sont pour les balises a. Ce sera le curseur, ce sera le type de pointeur, puis enregistrez cela. Maintenant, nous voyons si nous allons sur les liens de navigation, nous avons maintenant le pointeur. Maintenant, ça a l'air un peu mieux. Espérons que vous devriez maintenant avoir le coup d'ajouter des composants. Si ce n'est pas le cas, ne vous inquiétez pas, nous avons encore beaucoup plus à créer pour l'application est. On a beaucoup plus d'entraînement à mesure que vous suivez le cours. Ensuite, nous allons examiner comment nous pouvons transmettre des données d'un enfant à un composant parent. 49. Transmettre des données aux composants parents: Maintenant, nous allons jeter un oeil à la transmission de données entre les composants, plus particulièrement les données d'un enfant vers un composant parent. abord, nous devons comprendre la relation parent-enfant avec les composants. App.vue est le wrapper principal, et tout le contenu est contenu à l'intérieur. C' est efficacement au niveau supérieur. Cela signifie tous les composants que nous ajoutons ici, tels que l'en-tête de navigation et les fronts de carte. Ce sont tous des composants enfants de ce fichier app.vue. Aussi bientôt dans ce projet, nous allons créer un composant de saisie de texte, et quand nous le faisons à l'intérieur de la carte à partir du fichier, nous allons également ajouter un composant juste comme celui-ci. Une fois que vous l'avez créé, nous ajouterons également les entrées de texte comme nous l'avons fait auparavant. Notre carte des composants point vue, est maintenant visible à cette entrée de texte. Une entrée de texte est les composants enfants. Nous allons maintenant transmettre les données de notre fichier d'en-tête à app.vue. Avec cette connaissance, nous savons maintenant que cela transmet des données de l'enfant aux composants parents. Nous pouvons le faire avec ce que nous appelons des événements personnalisés. Si nous passons au fichier point vue d'en-tête, nous voulons passer au fichier parent, qui est app.vue quelle page du menu a été sélectionnée. Nous voulons le faire, donc app.vue sait quel composant afficher, comme l'avant de la carte ou l'arrière. La première chose que nous voulons faire est de créer une propriété de données pour garder une trace de la page sélectionnée. Ajoutons notre valeur par défaut d'exportation, et je veux créer la propriété de données qui se souviennent, c'est une fonction lors de l'utilisation de composants balancés. Je vais retourner le nom de la propriété de données de la page sélectionnée. Pour commencer, cela va être une chaîne vide. Maintenant, nous pouvons configurer un écouteur de clic sur chacun des liens dans le menu pour changer la valeur de la page sélectionnée. Revenez aux modèles et à l'intérieur des liens, allez à ajouter un nouvel attribut de clic d'art. Lorsque vous cliquez sur ce bouton, nous allons définir la page, sélectionner pour être égale à une chaîne de fronts de carte. Une fois que vous cliquez sur cette option, la spade sélectionnée ne sera plus une chaîne vide. Il sera remplacé par cette valeur de texte des fronts de carte, et ensuite nous devons faire la même chose pour les liens plus libres. Copiez l'écouteur de clic, puis collez-la. Cette fois, ça va être une carte à l'intérieur de gauche. Le troisième est pour la carte à l'intérieur à droite. Ensuite, la dernière sera pour le dos de la carte. Le composant que nous allons appeler ceci est la carte de retour. Jusqu' à présent, nous n'avons créé que les composants avant de la carte, mais nous allons créer le plus bientôt. Aussi les noms que nous ajoutons ici, surtout les noms de composants que nous leur avons donnés lorsque nous les enregistrons pour que cela fonctionne correctement, comme les fronts de carte que vous avez ajoutés dans app.vue. Retour dans l'en-tête, je vais maintenant créer un observateur. Cela va surveiller les modifications apportées aux données de la page sélectionnée, c'est-à-dire lorsque nous sélectionnons un nouveau manuellement. Revenez au script, et juste en dessous de la propriété data, vous pouvez ajouter une virgule, puis créer notre section de surveillance, puis créer nos propriétés de montre. Donc, nous voulons regarder les données sélectionnées page. Lorsque la page sélectionnée est modifiée, elle déclenche alors une fonction. À l'intérieur de cette fonction, nous allons émettre un événement personnalisé aux parents. C' est en fait plus simple que cela n'y paraît, nous avons juste besoin d'utiliser ce signe dollar point émet. Au début du cours, nous avons regardé les refs, et nous y avons accès en utilisant la propriété de vue native du signe dollar refs. Eh bien, l'utilisation de l'émission de signe dollar est également native à l'instance de vue. Il s'agit d'une méthode d'instance native, ce qui signifie qu'elle est intégrée à l'instance de vue. Ensuite, nous passons en deux arguments. Le premier est le nom de l'événement, qui est choisi bios, donc je vais l'appeler, page a été modifiée, et le séparer par une virgule. La seconde est ce que nous voulons transmettre aux parents. Nous voulons envoyer le nom de la page qui a été cliqué, et nous pouvons y accéder avec cette page point sélectionnée, qui est la valeur de cette propriété de données. Il s'agit de la première partie de l'envoi des données. La seconde est terminée chez les parents, qui est app.vue. Sauvegardez cela et dirigez-vous vers app.vue. Si nous revenons à notre modèle et cherchons la section d'en-tête nav, qui est un composant char. Ici, nous devons écouter les événements que nous avons créés à l'intérieur des éléments de composants, donc juste comme ça, nous pouvons ajouter un V sur. Ensuite, nous allons écouter l'événement que vous avez donné un nom de page a été changé, ou nous pouvons même utiliser le raccourci, qui était le symbole at. Maintenant, nous sommes à l'écoute des événements à passer alors nous devons dire voir ce qu'il faut faire de cet événement. Nous obtenons la page sélectionnée, sélectionnez créer une nouvelle propriété de données pour stocker cet événement valorisant quand il y a un changement, défilant vers le bas jusqu'au script juste en dessous de la valeur d'exportation par défaut. Je vais également ajouter la propriété de données à l'intérieur d'ici, n'oubliez pas d'ajouter la virgule. Je vais créer une nouvelle propriété de la page actuelle. Je vais mettre ça égal aux fronts de cartes. Jusqu' à présent, nous avons seulement le composant avant de la carte classé. C' est bien parce qu'il est logique d'avoir l'avant de la carte affichée par défaut de toute façon. Cela nous permet maintenant de définir la page actuelle à la valeur des événements comme ceci. Alors que la page actuelle est égale à l'événement signe dollar. Maintenant, chaque fois que le lien de navigation est cliqué, il est ensuite transmis aux composants parents avec les événements appelés page a été modifié. Nous changeons ensuite la page actuelle de l'avant de la carte à la valeur des événements. Nous pouvons tester que cela fonctionne correctement en sortant la valeur de la page en cours avec les accolades doubles. Juste après l'en-tête nav. Je vais ouvrir les accolades doubles et sortir la valeur de la page en cours, alors sauvegardez cela. Maintenant, nous pouvons passer au navigateur. abord, nous voulons arrêter le serveur de développement avec npm run dev. Maintenant, nous voyons la valeur des fronts de carte, qui est ce que nous attendons car il s'agit d'une valeur par défaut. Si nous sélectionnons un lien de navigation différent, nous voyons maintenant que la valeur est modifiée chaque fois que nous sélectionnons un nouvel élément de menu. Si vous voyez la valeur de la page sélectionnez la modification, lorsque vous cliquez sur un lien de menu, cela signifie que vous émettez maintenant avec succès des données d'un composant enfant vers parent. Si ce n'est pas le cas, vérifiez tout le code jusqu'à ce qu'il arrive à la scène, puis nous sommes prêts à passer à la création du reste des composants de la carte. En utilisant également des composants dynamiques pour basculer entre chaque vue. 50. Composants dynamiques: Dans cette application, nous voulons créer des composants pour afficher les différents côtés de notre carte de vœux, comme l'avant et l'arrière. Nous voulons également basculer entre ces composants. Lorsqu' un utilisateur clique sur les liens de menu. L' utilisation de composants dynamiques nous permet d'obtenir cet effet. Nous pouvons basculer entre plusieurs composants et les placer dans les mêmes points de montage. Tout ce que nous avons à faire, c'est d'utiliser les éléments de réserve. Il peut aller à la place des composants avant de la carte. Donc, si nous passons à l'app.vue, vous continuerez cette sortie de page actuelle, donc commençons. Ensuite, si nous supprimons l'avant de la carte et la remplacons par des composants, assurez-vous que c'est dans les balises d'ouverture et de fermeture. Donc maintenant, au lieu de rendre l'avant de la carte, les éléments de composants seront rendus n'importe quelle section sur laquelle nous cliquons. Donc déjà garder une trace de la page sélectionnée en utilisant les données de la page de colonne. Maintenant, nous pouvons utiliser les attributs de facilité pour lier dynamiquement données de la page en cours à ces nouveaux éléments de composant. Donc, à l'intérieur de la balise d'ouverture, nous pouvons utiliser la directive v-bind, puis lie les attributs de is. À l'intérieur, nous pouvons ajouter la propriété de données de Current Page. Rappelez-vous que nous pouvons également utiliser la syntaxe abrégée, qui est juste le deux-points. Maintenant, chaque fois qu'une page est cliquée dans le menu, les données sont transmises aux composants du fichier app.vue parents et écoute cet événement étonnant, puis met à jour les données de la page en cours. Les éléments du composant modifient ensuite le composant qu'il affiche. Basé sur ça. Nous pouvons voir cela en action dans le navigateur. Si nous sauvegardons cela et puis actualisons. Maintenant, si nous cliquons sur le devant, c'est bien parce que nous avons le composant frontal de la carte disponible. Toutefois, si nous sélectionnons l'une des trois autres sections, une page blanche s'afficherait. Donc, c'est bien cela signifie que tout fonctionne. Le reste de ces liens fonctionnera à partir d'un créer, le reste des composants de la carte. On va le faire dans la prochaine vidéo. 51. Créer les composants supplémentaires de la carte: Nous faisons de bons progrès grâce à notre connaissance du fonctionnement des composants. Dans cette vidéo, je veux créer les composants de carte supplémentaires. Nous avons déjà la carte des composants, mais nous avons encore besoin de créer le CardInsideLeft, à l'intérieur de droite, ainsi que les fichiers CardBack. Si vous vous sentez confiant, n'hésitez pas à créer ces composants de fichier unique par vous-même. Pour l'instant, le contenu doit être le même que le fichier Cardfront.vue. Vous pouvez copier ceci pour commencer. En outre, vous devrez les importer dans le fichier App.vue, puis les enregistrer en tant que composants. Assurez-vous que lorsque nous enregistrons les composants, nous les nommons le même que nous leur avons donné dans le menu de navigation ou dans le fichier Header.vue. Sinon, ils ne seront pas liés à la bonne page. Pour commencer, je vais passer au fichier Cardfront.vue, sélectionnez tout, puis copiez, puis si nous passons à notre menu, à gauche, puis à l'intérieur du dossier de carte, je vais créer un nouveau fichier, et celui-ci va s'appeler CardInsideLeft, avec l'extension point vue, puis collez-le dans le contenu ici, enregistrez cela. Nous n'avons pas besoin de trop nous inquiéter du contenu pour l'instant, nous allons les construire avec des composants enfants comme nous le devons, juste pour que nous puissions voir quelle page a été sélectionnée. Je vais juste ajouter du texte à l'intérieur de la première section en disant simplement CardInsideLeft, et c'est pour que nous sachions quelle section nous exécutons lorsque nous cliquons sur les composants dynamiques. Maintenant, nous pouvons importer les composants à l'intérieur de App.vue, puis l'enregistrer. Si vous descendez au script, puis nous pouvons importer le CardInsideLeft, puis nous tirons cela à partir du dossier des composants. A l'intérieur, nous avons un dossier de carte et le nom de fichier est CardInsideLeft, puis bien sûr dans la section du composant, séparée par une virgule, nous ajoutons le CardInsideLeft et définissons ceci sur le même nom que nous avons appelé ici, de CardinsideLeft. Rappelez-vous que nous n'avons pas besoin d'ajouter ces éléments à l'intérieur du modèle, comme nous l'avons fait avec l'en-tête nav. Parce que ce composant va basculer entre toutes ces pages suit lorsque nous les sélectionnons à l'intérieur du menu. Maintenant, tout ce que nous avons à faire est de répéter le même processus et de créer deux sections supplémentaires ou deux composants de fichier uniques supplémentaires. Je vais commencer par le composant CardInsideright. A l'intérieur du dossier de cartes, nous allons créer CardInsideright, encore une fois avec l'extension point vue. Cela peut également avoir le même contenu de l'intérieur gauche, alors sélectionnons tout, copiez, puis collez-le dans le contenu. Juste pour que vous puissiez faire la différence, je vais changer le texte à l'intérieur à droite et ensuite enregistrer cela, et enfin nous avons aussi le CardBack, que nous devons ajouter. Cardback.vue, puis collez dans le même contenu et modifiez le texte en CardBack. Retour à l'App.vue, et je vais juste copier cette déclaration d'importation, puis coller ceci en deux fois. Le second est à l'intérieur à droite. Changer à l'intérieur du nom et aussi à l'intérieur du chemin du fichier, puis finalement nous avons CardBack, puis à l'intérieur de l'instance, nous pouvons ajouter à l'intérieur de la section du composant nos nouveaux composants. CardInsideright, puis enfin les composants CardBack. Cela devrait être fait maintenant. Avec les quatre composants de carte maintenant en place, nous pouvons nous assurer que notre serveur de développement est en cours d'exécution, puis passer au navigateur. Si tout fonctionne correctement, nous devrions maintenant pouvoir cliquer sur chacun des liens de menu et voir nos nouveaux composants affichés. Nous pouvons voir que cela fonctionne avec les textes que nous avons ajoutés à l'intérieur de chacun. Super, donc maintenant avec cela en place, nous faisons de bons progrès avec notre application. Maintenant, il est temps de passer à autre chose et de commencer à créer les composants de saisie de texte. 52. Créer le composant de saisie de texte: Nous avons maintenant nos sections de cartes terminées, et nous pouvons basculer entre les différentes vues en cliquant sur les liens du menu. Maintenant, il est temps de créer les composants de saisie de texte. Ces composants seront nos premiers composants réutilisables. Ainsi, nous pouvons les créer une fois et ensuite utiliser plusieurs fois dans l'application, comme vous pouvez le voir ici. Les composants eux-mêmes sont assez simples. Il se compose essentiellement d'une entrée de zone de texte. Il utilise la liaison de données bidirectionnelle avec V-model pour mettre à jour une propriété de données lorsqu'un utilisateur tape. Cette propriété de données est animée à l'idiot du composant parent aux sites. Quand on arrive au texte, je vais mettre le composant. Tout ce que nous faisons pour cette composante, nous savons déjà et nous avons couvert jusqu'à présent dans ce cours. Commençons par créer les composants appelés texte inputs.view. Si vous passez à la section de comptage. Nous pouvons ajouter nos nouveaux composants à l'intérieur ici. Donc, entrée de texte, avec l'extension .view. Ensuite, nous devons ajouter nos modèles habituels. Alors ajoutez-les en haut avec les balises d'ouverture et de fermeture. Vous pouvez également ajouter nos balises de script ci-dessous, et nous les utilisons très bientôt. Nous n'avons pas besoin des balises de style dans ces composants particuliers. Comme les classes Bootstrap s'occuperont de toutes les photos de style. Notre modèle vous simple. Tout ce que vous devez faire est d'ajouter des divs Bootstrap pour la mise en page, un titre, puis une zone de texte. Commençons donc par créer notre premier div, qui va avoir la classe de ligne. Ensuite, à l'intérieur de cette rangée, nous allons ajouter notre grille à 12 colonnes. Donc, ajoutez un div imbriqué à l'intérieur de là, et puis nous pouvons ajouter d'autres classes Bootstrap de charbon, SM 12 pour en faire la pleine largeur de la page, puis à l'intérieur, nous pouvons ajouter notre conteneur pour la zone de texte. Donc, ajoutons un div Bootstrap avec la classe du groupe de formulaires. Cela va juste vous donner un peu de style dans. En haut de ce composant, nous voulons ajouter un h pour l'en-tête, et cela va ajouter le texte d'édition du texte. C' est ainsi que nous utilisons, peut clairement voir que c'est la zone d'édition tandis que le type de besoins dans un texte, puis nous pouvons ajouter notre zone de texte. Donc, je vais juste supprimer le nom et l'ID le remplacer par une classe Bootstrap de contrôle de formulaire. Donc les colonnes vont rendre cela un peu plus grand et faire ces 50 colonnes, et nous avons seulement besoin de quatre lignes. Je vais ensuite ajouter un espace réservé, et le texte que nous allons ajouter est juste, ajoute du texte ici. Juste pour donner à l'utilisateur quelques instructions. Nous avons alors besoin d'une propriété de données pour stocker le texte entré par l'utilisateur. Ainsi, nous pouvons ensuite l'émettre aux composants parents ces données, nous allons utiliser la liaison de données bidirectionnelle pour être mis à jour à partir de cette zone de texte. Dans notre script, nous pouvons créer nos objets. Exportez les valeurs par défaut, et créons notre propriété de données de la manière habituelle, et je vais retourner la propriété de données des entrées de zone de texte. Initialement, je vais définir ceci sur une chaîne vide. Étant donné qu'aucun texte n'a été ajouté à l'intérieur ici encore. Ayez maintenant ces entrées de zone de texte en tant que propriété de données. Nous pouvons l'ajouter à notre zone de texte en utilisant le modèle pour le lier. Donc, juste après l'attribut de l'espace réservé, nous voulons ajouter ceci sur une nouvelle ligne. Donc modèle V, et cela va être l'entrée de zone de texte. Donc maintenant, nous allons avoir la configuration de liaison de données bidirectionnelle. Nous pouvons maintenant émettre la valeur de cette zone de texte aux parents. Cela peut être réalisé en ajoutant une méthode appelée On Eeach Keyboard Events. Toujours dans cette zone de texte, je vais ajouter un écouteur d'événement pour déclencher une nouvelle méthode appelée Text Changed. Chaque fois qu'une clé a été libérée. Alors nous ajoutons le symbole @, puis les événements de key-up. Ainsi, chaque fois qu'une clé est libérée, nous pouvons déclencher un événement appelé texte modifié. Ensuite, nous pouvons créer notre méthode ci-dessous pour déclencher les événements d'émission personnalisés. Donc, à l'intérieur du script, sous les objets de données ajouter une virgule, puis nous pouvons ajouter nos méthodes. Cette méthode doit bien sûr être la même dans, ce que nous avons ici de texte changé, puis à l'intérieur du corps de la fonction, nous voulons émettre ces données. Donc, ce signe .$ émet. Alors rappelez-vous d'avant, nous devons passer deux arguments. Le premier est une valeur de chaîne, et c'est le nom de nos événements. Je vais appeler ce texte d'affichage changé. Vous pouvez utiliser un nom différent si vous préférez. Eh bien, je pense que ce nom décrit ce que nous faisons en bonne et due forme, puis le deuxième paramètre est la valeur que vous voulez envoyer. Donc, cela commence l'entrée de la zone de texte, que nous avons ici. Donc, à la fin comme le deuxième argument. Donc maintenant, nous avons les événements personnalisés appelés texte d'affichage changé. Nous pouvons ajouter le composant au fichier de point de conférence v en tant que composants enfants et écouter l'événement. Mais nous retournerons aux diapositives comme nous pouvons le voir ici. Nous utilisons le même composant trois fois. Si nous ouvrons les fronts de la carte, le fichier de vue, nous pouvons ajouter ces composants à l'intérieur d'ici. abord, nous devons importer les composants à l'intérieur du script. Donc, comme nous l'avons fait auparavant, nous pouvons impulser les composants d'entrée de texte, puis ajouter le chemin du fichier qui est une barre oblique de points. Celui-ci va juste être des entrées de texte. C' est donc parce que la saisie de texte est dans le même dossier que les fronts de carte. Nous n'avons pas besoin d'aller dans le dossier de la carte ou des composants parce que nous y sommes déjà. Ensuite, nous devons créer nos composants, date propriété. Donc exportez, par défaut, puis ajoutez nos composants. Donc, je vais ajouter un préfixe CC, qui signifie cartes créatives. C' est pour s'assurer que le nom est un peu moins générique, plus adapté à notre application. Donc, les entrées de texte CC, qui est un alias pour la saisie de texte. Le CC peut également éviter tout conflit de noms avec n'importe quelle vue JS Plugins ou bibliothèques, que nous pourrions ajouter à l'avenir. Donc, sauvegardons cela, puis passons à la section du modèle. Ensuite, à l'intérieur de la zone d'édition, nous allons ajouter nos composants. Donc CC entrée de texte. Ensuite, si vous vous assurez que votre serveur de développement est opérationnel, enregistrez, puis passez et passez à l'avant. Nous devrions maintenant voir que le composant zone de texte est maintenant ajouté à notre application. Nous laisserons cette vidéo là et nous reviendrons et continuerons avec ces entrées de texte dans la prochaine vidéo. 53. Recevoir des données de l'entrée de texte: Dans la dernière vidéo, nous avons créé et enregistré avec succès nos nouveaux composants de saisie de texte. Maintenant, nous allons continuer en ajoutant ce composant à l'avant de la carte deux fois de plus. Passons à la vue de la porte d'entrée de la carte et ici où nous avons créé les entrées de texte CC, copions ceci et collez-le en deux fois de plus. Vous devriez voir un peu d'un motif dans mon [inaudible] pour afficher les composants que nous ajoutons comme des éléments HTML. Tout ce que nous avons à faire est d'ajouter cela trois fois, et ensuite vous pouvez voir comment ils ont affiché trois fois à l'intérieur de la carte. Maintenant, nous avons nos trois composants, nous devons également ajouter l'écouteur d'événement que nous avons ajouté à l'intérieur de l'entrée de texte. Nous émettons actuellement l'événement appelé Display Text Changed. De [inaudible] à l'intérieur des composants en utilisant @ texte d'affichage modifié et puis nous avons également besoin d'ajouter ceci à nos deuxième et troisième composants. Il suffit de copier et de coller les dessus. Ici, nous avons ajouté trois composants qui écoutent tous l' événement de changement de texte d'affichage pour lui être transmis. Nous devons maintenant ajouter des propriétés de données libres pour stocker la valeur de texte reçue de sorte que c'est un pour chaque composant. Passons à notre script et nous pouvons ajouter notre propriété de données. Le premier que nous voulons ajouter va être un nom de la valeur de la zone de texte 1 qui va initialement être une chaîne vide. Parce que vous avez trois composants séparés, je vais aussi ajouter la même chose pour les numéros 2 et 3. Valeur de la zone de texte 2, à nouveau définie pour être une chaîne vide pour l'instant, puis la valeur de la zone de texte 3. Avec cela maintenant en place, nous pouvons maintenant les mettre à jour avec la valeur des événements passés à partir des composants [inaudible]. Nous allons le faire comme nous l'avons regardé précédemment à l'intérieur de l'écouteur d'événement. Nous pouvons commencer par ajouter la valeur de la zone de texte 1 dans le premier composant et est certainement égale à la valeur de l'événement , puis nous faisons exactement la même chose pour les deuxième et troisième composants. Valeur de la zone de texte 2, puis zone de texte 3. Avec cela maintenant en place, tout ce que nous devons faire est de vérifier si les données sont reçues de chacun de nos composants, c'est de simplement sortir des valeurs en utilisant l'interpolation de texte. Commençons par sortir une valeur de zone de texte 1, puis la valeur de zone de texte 2, puis la même valeur pour la valeur 3, enregistrez cela. Assurez-vous que le serveur de développement est opérationnel , puis si nous passons au navigateur. Maintenant, si nous commençons par ajouter du texte dans le premier, nous pouvons voir que le texte est affiché en bas, c'est notre zone de texte 2. Maintenant, nous avons la zone de texte 2 affiché également. Essayons le troisième. zone de texte 3 y apparaît également. Nous pouvons maintenant voir que trois des mêmes composants sont affichés à l'écran. Maintenant, nous allons réutiliser notre composant trois fois. Cependant, les données sont stockées indépendamment sorte que chaque fois que nous tapons a sa propre valeur de données correspondante. Si vous parvenez à faire fonctionner tout ça, félicitations. Vous devriez avoir le coup de main des composants maintenant et vous êtes maintenant prêt à passer à la prochaine vidéo. Nous allons commencer à créer les zones de sortie de texte. 54. Créer le composant de sortie de texte: Nous avons maintenant les composants de saisie de texte créés et également affichés dans l'écran aussi, maintenant je vais créer le fichier de sortie de texte. Ce sera le composant qui affiche le texte sur la carte. Encore une fois, tout comme les entrées, nous utiliserons trois de ces composants pour afficher le texte sur la carte. Tout d'abord, nous pouvons supprimer les champs de valeur de zone de texte du fichier avant de la carte. Supprimons TextBoxValue1, 2 et 3. Nous les avons déjà testés et nous savons que cela ne fonctionne pas. Comme nous l'avons fait avec les composants d'entrée, créons un nouveau fichier de composant, cette fois appelé TextOutput. Allez dans le dossier de la carte, créez un nouveau fichier appelé TextOutput, avec l'extension .veu. Maintenant, nous pouvons ajouter notre modèle. Pour l'instant, ce modèle va être assez simple, tout ce que je vais faire est de créer un div comme wrapper, puis à l'intérieur de la div, ajoutez juste du texte, juste de l'exemple de texte afin que nous puissions voir les composants à l'écran. Juste en dessous du modèle, nous pouvons aussi ajouter nos balises de script, et je vais juste créer une valeur par défaut d'exportation vide pour l'instant, suivie par les balises de style. Une fois que vous faites cela, nous aurons alors besoin d'importer et d'enregistrer le composant à l'intérieur de Cardfront.vue. Nous passons à la section script et puis je vais simplement copier ces instructions d'importation, puis la coller ci-dessous. Mais cette fois, changez-le en TextOutput. La même chose pour le chemin d'accès du fichier. Dans la section des composants, ajoutez un coma. Je regarde notre CCTextOutput. Donnez-lui un coffre-fort. Maintenant, nous avons accès au composant dans ce fichier. Il est temps de l'ajouter à la zone d'affichage de la carte à l'intérieur du modèle. Passez à la section d'affichage de la carte, puis nous pouvons ajouter ccTextOutput et, la balise de fermeture. Comme nous l'avons mentionné, nous allons l'afficher trois fois. Finalement, ces sections de sortie afficheront le texte de ces trois sections de saisie de texte. Enregistrez cela, puis démarrez les serveurs avec npm run dev. Si vous en avez besoin, alors nous pouvons passer au navigateur, et nous voyons le composant en action, mais nous allons passer le texte aux types d'utilisateurs au composant dans la vidéo suivante, nous allons jeter notre premier coup d'oeil à l'utilisation des accessoires. 55. Passer des données avec des props: C' est ainsi que notre structure ressemble jusqu'à présent. Nous avons des composants d'entrée de texte et de sortie à l'intérieur d'un composant parent appelé CardFront. Les données peuvent être transmises entre deux composants frères. Nous ne pouvons donc pas déplacer directement le texte des composants d'entrée vers les composants de sortie. Au lieu de cela, nous devons communiquer via le composant parent, qui est Card Front. Nous savons déjà comment transmettre des données d'un enfant à un composant parent. Nous faisons cela en émettant un événement personnalisé et nous le faisons déjà dans notre application, donc nous avons cette partie couverte. Ensuite, nous avons besoin d'un moyen de faire tout ça. Le composant parent doit transmettre ces données à un composant enfant. Dans notre cas, au composant Text Output. Nous pouvons le faire avec des accessoires, ce qui est court pour les propriétés. Les accessoires sont des attributs personnalisés permettant de transmettre des données aux composants enfants. Si vous venez d'un arrière-plan react.js, cela fonctionne de la même manière. La première chose à faire est de déclarer à l'intérieur du composant enfant les accessoires que nous attendons à recevoir. Donc, si nous passons au fichier TextOutput.vue, puis au Script. Nous pouvons ensuite ajouter nos accessoires à l'intérieur ici. L' option props est un tableau de noms prop, que nous nous attendons à être transmis sous forme de chaîne. J' ai appelé cet accessoire le texte d'affichage pour refléter les données qui lui seront transmises. Nous pouvons revenir à nos modèles et supprimer l'exemple de texte. Ensuite, à la place de cela, nous pouvons ajouter le nom de l'accessoire, qui est Afficher le texte. Donc, une fois ces données transmises, elles seront affichées à l'intérieur de notre modèle. Nous pouvons maintenant ajouter cet accessoire dans le composant parent, qui est CardFront.Vue. Donc, pour commencer, nous ajoutons un attribut personnalisé à l'intérieur du composant Output, qui est le nom de l'accessoire. Donc, je vais ajouter, Afficher le texte à l'intérieur ici. Donc, ce test va juste ajouter une chaîne de, Bonjour. Alors maintenant, assurez-vous que le serveur de développement est en cours d'exécution. Maintenant, si nous passons, nous devrions maintenant voir la valeur de l'accessoire sur l'écran. Cette valeur est donc transmise au composant enfant de Text Output. Nous disons ensuite vue.js quels accessoires nous attendons à recevoir, puis nous pouvons les sortir à l'intérieur de nos modèles. Cependant, dans ce cas, cela ne fonctionne que parce que nous avons utilisé une chaîne. Si nous essayons d'utiliser des données dynamiques, telles que notre TextBoxValue1. Donc, nous copions cela et collons cela dans. On voit que ça ne marchera pas. Nous obtenons juste la valeur de chaîne plutôt que les données dynamiques. Si les données sont dynamiques, nous devons utiliser v-binds ou la syntaxe abrégée. Donc, juste avant Display Text, nous pouvons ajouter la syntaxe courte du deux-points, maintenant sauvegardez cela. Maintenant, si nous passons au navigateur, et nous commençons à taper du texte à l'intérieur de la première zone de saisie de texte. Nous pouvons voir que les changements sont maintenant reflétés sur le côté droit. Nous essayons ceci avec le second. Nous voyons que rien ne se passe parce que nous n'avons pas encore ajouté d'accessoires au deuxième ou au troisième composant. Alors passons au CardFront et nous pouvons le faire maintenant pour les deuxième et troisième composants. Copiez donc les accessoires et ajoutez-le dans les deuxième et troisième composants. Pour rendre ces uniques, nous devons ajouter à la propriété date ou TextBoxValue2 et TextBoxValue3. Alors, sauvegardez ça. Maintenant, nous devrions avoir trois composants indépendants. Donc box1, box2, et enfin box3. Donc, ceux-ci travaillent tous indépendamment avec leurs propres données. Ces trois zones de texte fonctionnent indépendamment car elles ont une source de données différente. C' est ainsi que nous pouvons utiliser des accessoires pour transmettre des données aux composants enfants. Il est important que nous comprenions que les accessoires forment une liaison unidirectionnelle, ce qui signifie que si les données parent sont mises à jour. Les données seront automatiquement transmises à l'enfant. Cependant, cela ne doit pas fonctionner dans l'inverse. Nous ne devrions pas changer la valeur de l'accessoire à l'intérieur du composant enfant, nous devrions les traiter comme en lecture seule. Si nous devons changer la valeur d'un accessoire qui est transmis, nous ne devrions pas le faire directement. Si nous voulons utiliser un prop, puis changer la valeur, nous devrions d'abord configurer une propriété de données à l'intérieur des composants enfants. Nous devons ensuite attribuer la propriété dates comme valeur initiale de l'accessoire, puis modifier vos données plutôt que de changer directement la valeur de prop. 56. Garder les composants en vie: Lors de l'utilisation de composants dynamiques et de la commutation entre eux comme nous sommes ici, il y a un petit problème créé que nous devrons peut-être résoudre. Si nous tapons quelque chose dans l'une des zones de saisie de texte comme celle-ci, nous voyons le résultat sur le côté droit. Le problème se produit lorsque nous changeons le composant actif en utilisant les liens manuels. Si nous sélectionnons un autre composant, tel que Inside Left, revenez à l'avant. Nous voyons que le texte que nous avons ajouté est perdu. Également tard dans le projet lorsque nous ajoutons des entrées de texte et d'image à toutes les pages. La même chose arrivera à tous ces composants aussi. Pourquoi cela arrive-t-il ? Eh bien, au début du cours, nous avons examiné le cycle de vie de la vue, qui est les étapes de l'instance de vue passe par la curation jusqu'à la destruction. Lorsque nous changeons les composants dynamiques, composant ou s'éloigner de, est ensuite détruit et supprimé de la mémoire. Voir les fournisseurs de jazz avec une solution simple à cela. Tout ce que nous devons faire est d'envelopper nos composants dynamiques avec des éléments réservés ANOVA appelés keep life. Si nous revenons à notre éditeur de texte, puis passons à la vue point de l'application, nous avons un composant qui enregistre la page active en cours. Enveloppons cela à l'intérieur de l'enveloppe Keep-Alive pour ajouter la balise d'ouverture, et après le composant, nous pouvons aussi ajouter la balise close. Je n'ai pas sauvé ça. Maintenant, si nous passons au navigateur, nous pouvons commencer par ajouter quelques données à l'intérieur de la première zone de texte, et maintenant si nous nous éloignons et revenons ensuite à l'avant, nous verrons que les données sont maintenant en cours de conservation. Il s'agit d'une solution très simple qui affiche les fournisseurs GS pour conserver les données des composants dynamiques à l'intérieur de la mémoire. 57. Définir les styles CSS: Au début de cette section, nous avons créé tous les composants des cartes. Nous avons créé ma carte de copie à partir du dossier. Ce fichier avait déjà un style à l'intérieur des balises de style. Si nous descendons au bas de Carte Front, nous pouvons voir entre les balises de style, nous avons la zone d'édition et les styles d'affichage de la carte. duplication de ce fichier a également ajouté les mêmes styles à tous les fichiers de carte. Par exemple, si vous allez à Carte Retour et faites défiler vers le bas jusqu'au style, nous pouvons voir que nous avons du code en double. Si nous devons supprimer les styles de ce fichier Cardback.vue, sauvegardons cela et voyons ce qui se passe. Nous allons au navigateur et puis si nous allons à la « Retour », nous pouvons toujours voir que le style s'applique toujours parce que nous avons la couleur de fond, le rembourrage, et aussi la hauteur de 800 pixels en application. C' est parce que tout style dans lequel nous ajoutons à l'intérieur du fichier de composant s'appliquera toujours partout dans notre application. Pour réduire le code à l'intérieur de notre application, nous pouvons supprimer tous les styles de la carte Back, ce que nous avons déjà fait. Le CardinsideLeft, alors déplacez ceux-ci vers les sections de style. Puis enfin de la CardinSideright. Cela laisse maintenant notre style à l'intérieur de la zone originale CardFront. laissez les styles que dans le fichier CardFront car ils s'appliqueront à tous les autres. Mais que faire si nous avions un cas où nous voulons contenir le CSS à un seul composant particulier ? Pour ce cas, nous pouvons ajouter « scoped » à la balise de style d'ouverture comme ceci. Ajoutez les attributs étendus et enregistrez-le. Maintenant, nous allons au navigateur. Si vous allez à l'avant, nous pouvons voir que le style s'applique à l'intérieur de la carte avant. Essayons InsideLeft, InsideRight, et aussi le Back. Maintenant, nous pouvons voir que le style est limité à un seul composant de fichier. Je vais retourner à l'avant de la carte et supprimer « portée ». C' est parce que vous voulez qu'il l'applique à toutes les autres pages. Cependant, nous avons quelques utilisations pour l'utilisation étendue dans notre application. Par exemple, dans le fichier TextOutput, nous pouvons sortir le texte à l'intérieur des balises HTML p. Nous pouvons ensuite styler ce texte et faire appliquer le style uniquement au texte affiché sur la carte réelle, qui est cette zone à l'intérieur de nos modèles. Allons au style et ajoutons « portée » à l'intérieur ici. Ceci s'applique uniquement au TextOutput. Ensuite, je vais définir une nouvelle famille de polices à appliquer uniquement à la section de la carte. Je vais aller sur Google et sélectionner une police Google. Je vais rechercher Google Fonts Tangerine, puis sélectionner cela. C' est la police que je vais utiliser pour ce projet. Vous pouvez bien sûr le changer si vous préférez. Une fois que vous avez sélectionné votre police, cliquez sur le symbole plus en haut, puis nous pouvons développer. Voici quelques instructions sur la façon d'ajouter les polices Google. La première chose que vous voulez faire est de copier le lien en haut. Il s'agit du lien pour les feuilles de style. Ensuite, passez au index.html, et puis nous allons ajouter ceci juste en dessous du lien bootstrap. Collez cela là et donnez à cela une sauvegarde et retour à Google Fonts. Nous pouvons ensuite copier la ligne de CSS. Copiez ceci et puis nous pouvons ajouter ceci dans notre fichier TextOutput à l'intérieur du CSS pour les éléments P, puis coller dans le code que vous venez de copier. Enregistrez cela, assurez-vous que le serveur de développement est opérationnel , puis revenez au projet. Nous allons commencer à taper à l'intérieur des composants d'entrée. Nous pouvons voir que le texte s'applique, bien qu'il soit vraiment petit pour l'instant, mais il fonctionne, et nous pouvons voir que les polices s'appliquent. Pour résoudre ce problème, je vais revenir au fichier et ajouter un peu plus de style. Je vais définir la taille de police par défaut à 42 pixels. Je vais aussi faire correspondre la hauteur de ligne de 42 pixels. Juste pour lui donner un peu meilleur look, je vais ajouter l'ombre texte-de deux pixels, deux pixels, deux pixels pour les trois côtés ; puis la couleur de aaa. La couleur du texte, je vais ajouter le mien comme 4d4d4d. Aller aussi ajouter une marge, cinq pixels en haut et en bas, et zéro à gauche et à droite, juste pour lui donner un peu d'espacement. Je vais aussi ajouter une bordure et nous verrons pourquoi bientôt. Juste un pixel pointillé et une couleur grise. Ensuite, la propriété white-space de pré-ligne. Pré-ligne conserve les sauts de ligne, ce qui empêche tous les textes apparaissant sur la même ligne. Si l'utilisateur clique sur « Entrée » et commence à taper dans une zone de texte sur la ligne ci-dessous, la même chose s'appliquera du côté de la sortie afin que tout ne soit pas sur la même ligne. Ensuite, nous allons enfin déborder de caché, juste au cas où l'utilisateur tape trop de texte qui ne peut pas tenir sur la zone. Nous gardons ça et voyons à quoi ça ressemble. Maintenant, nous voyons que le texte est un peu plus grand, et nous avons aussi quelques ombres de police. Je n'ai pas l'air de voir le pointillé, je vais changer ça pour être pointillé et on y va. Vous remarquez que nous avons de jolies lignes pointillées à l'allure laide. En effet, sans le texte, la bordure de ligne en pointillés n'a pas de hauteur. Nous pouvons les ignorer pour l'instant parce que nous allons transmettre les accessoires à ces composants dans la prochaine vidéo, qui définira la hauteur des composants. Ensuite, nous aurons une belle bordure en pointillés autour de chaque section. L' essentiel est un texte pour la carte est le style maintenant. Ces styles sont définis pour s'appliquer uniquement à ces composants. 58. Validation de Prop: Lorsque vous transmettez des données à des composants enfants via des accessoires, vous voulez parfois vous assurer que nous envoyons le bon type de données à utiliser. Par exemple, si les composants enfants s'attendent à ce qu' un nombre lui soit transmis ou reçoit une chaîne, cela peut causer des problèmes. L' utilisation de la validation de la prop est un moyen de définir les exigences pour la réception de la prop. Si la validation échoue et que VGS envoie une erreur de console pendant le développement. abord, nous allons passer au fichier v avant de la carte et ajouter une nouvelle invite à passer vers le bas aux composants de sortie de texte probablement utilisés pour définir la hauteur des conteneurs fiscaux sur la carte. Cause latente, nous ferons la même chose avec l'affichage de l'image. Nous pouvons réorganiser les hauteurs des composants, pour s'adapter correctement à la carte. Nous devons et cette sonde à l'intérieur des composants de sortie de texte CC. Je vais appeler cet accessoire les hauteurs de conteneur et définir cela à une valeur de 130. Donc, cette valeur de 130 sera utilisée comme une propriété CSS. Faisons la même chose pour le deuxième, troisième composant, copiez-le et collez-le deux fois. Ensuite, une fois que cela est fait dans la sortie de texte .file, nous pouvons ajouter le nom propre au tableau. Nous avons déjà notre installation d'accessoires. Nous pouvons les séparer par une virgule et ajouter notre deuxième prop, hauteur du conteneur aux accessoires au tableau, comme cela fonctionne bien. Mais nous voulons ajouter quelques validations composant tele. Quel type de données nous attendons à recevoir ? Pour le faire quand c'est triste accessoires d'être un objet. Nous pouvons définir le type de dates que nous voulons recevoir à l'intérieur d'un tableau. Notez que plusieurs types de données peuvent être utilisés, comme un numéro de chaîne, fonction booléenne, un objet ou même un tableau. Alors ajoutons à notre accessoire de texte d'affichage. Ajoutons cela à nouveau. Ajouter ceci est un type de chaîne au tableau. Nous pouvons tester cette validation en passant une nouvelle autoroute et voir ce qui se passe. Plus à l'avant de la carte, au lieu d'envoyer la valeur de la zone de texte portée, aller envoyer une valeur de chaîne. Disons 12. Maintenant, si vous ouvrez la console, nous pouvons voir qu'il y a une erreur. Il dit que le livre de cordes attendu a un numéro. Cela signifie donc que la validation fonctionne. Maintenant, revenons au volume de la zone de texte. C' est ainsi que nous pouvons ajouter la validation des données de base. Il y a aussi plus de choses que nous pouvons faire, séparées par une virgule. Ajoutons maintenant le deuxième accessoire de la hauteur du conteneur. Parce que cela aura plus d'un type de validation, nous devons définir ceci comme un objet, puis l'ajouter comme un type de nombre. Nous pouvons également déclarer si nous voulons que cet accessoire soit requis. C' est une valeur booléenne que je vais définir sur true. Cela indique à VGS que cette présence est principalement présente sinon recevra un avertissement de console. Nous pouvons tester en enlevant n'importe quel conteneur haut prop des parents de dessins animés, puis nous diriger vers la console. A l'intérieur, nous obtenons le message d'avertissement disant manquant accessoire requis de la hauteur du conteneur. Maintenant, ajoutons cela à nouveau et puis enregistrez. Donc revenez dans nos invites dans la sortie de texte. En outre, nous pouvons ajouter une valeur par défaut si aucune valeur n'est passée. Évidemment, cela ne serait pas logique d'être ajouté avec nécessaire, boue remplacer requis par défaut, et que vous voulez le vendre à une valeur de 200, ce qui est bien sûr un nombre.Donc maintenant, si aucun accessoire est passé à travers un composant, la valeur par défaut de 200 sera utilisée à la place. Maintenant, nous avons ces données validées passées en tant que prop validé. Nous utilisons dans la vidéo suivante pour définir une hauteur de conteneur en l'ajoutant à l'objet de style. 59. Passer des données prop à un objet de style: Notre application est maintenant passée un prop validé, qui est un nombre. Nous pouvons utiliser ce nombre pour définir de l'extérieur la hauteur que nous voulons que la zone de texte sur le côté droit soit, qui est cette zone ici. Cet accessoire est appelé contain height, et nous allons passer la valeur à un objet de style pour définir la hauteur du conteneur en utilisant CSS. Pour ce faire, nous allons configurer une propriété calculée à l'intérieur du fichier de sortie de texte. Nous ne rendrons que s'il y a un changement de la hauteur du conteneur. Ajoutons notre section calculée juste en dessous des accessoires, séparés par une virgule. Je vais l'appeler une propriété calculée notre StyleObject, puis nous allons retourner la hauteur. Je vais définir les hauteurs pour être égales à this.containerHeight, qui est notre accessoire qui est passé à. Ensuite, en raison d'être passé un nombre et voulait être une valeur CSS, nous pouvons également ajouter px pour les pixels à la fin. Cet objet de style va ajouter une propriété CSS high, définit la valeur de l'accessoire, qui est actuellement 130, que vous définissez ici. Ensuite, à l'intérieur de l'objet, nous ajoutons px pour déclarer qu'il s'agit d'une taille de pixel. Maintenant, notre objet de style est créé Nous pouvons l'ajouter à notre p-tag d'ouverture comme un attribut de style. Faites défiler jusqu'à nos modèles et à l'intérieur de la balise d'ouverture, utilisez le deux-points pour lier les styles car ceux-ci sont dynamiques. Cela sera égal à notre propriété calculée, qui est StyleObject. Ajoutons ceci à une ligne séparée. Sauvez-les. Si nous revenons à la carte, nous pouvons voir que nous avons les boîtes de sortie de texte libre réglées à une hauteur de 130 pixels, et c'est pourquoi nous avons précédemment défini la bordure en pointillés. Nous pouvons voir clairement quelle section est laquelle. Passons aux outils de développement et nous devrions également être en mesure de voir cette propriété CSS. Si nous sélectionnons la zone de sortie de texte, nous pouvons voir à l'intérieur des éléments p, nous avons le style défini à une hauteur CSS de 130 pixels. C' est ainsi que nous pouvons travailler avec nos accessoires, qui sont transmis au composant. Notez que cela est correct de le faire car nous ne modifions pas directement la valeur de l'accessoire. Nous n'utilisons que la valeur prop, puis l'ajoutons à un objet CSS. 60. Introduction aux emplacements: Nous savons maintenant comment analyser les données du composant parent vers le composant enfant en utilisant Props. Nous pouvons également transmettre des données au composant enfant en utilisant une méthode appelée Slots. Les slots sont utilisés pour ce qu'on appelle la distribution de contenu. Souvent, nous avons besoin de mélanger le composant du parent et de l'enfant contente jamais. Dans notre application jusqu'à présent, si vous passez à l'App.vue, nous pouvons voir que nous avons l'en-tête en haut et puis en dessous il aura les éléments de composants dynamiques. Nous n'avons pas toujours nos composants soigneusement empilés les uns sur les autres, comme nous le faisons jusqu'à présent dans cette application. Les composants peuvent être imbriqués les uns à l'intérieur de l'autre, ou nous pouvons même imbriquer du contenu HTML entre la balise d'ouverture et de fermeture des composants. Par exemple, supposons que nous voulions nos éléments de composant soient imbriqués à l'intérieur du composant d'en-tête. Ouvrons l'en-tête de navigation, puis si nous coupons le contenu du composant, y compris les balises keep-alive, puis collez-le dedans. Nous avons maintenant une situation où les choses deviennent un peu désordonnées. Le composant nav-header a son propre fichier de modèle de même que le composant dynamique tel que la conférence. Nous avons besoin d'un moyen de dire à Vue js où à l'intérieur de l' en-tête de navigation nos composants dynamiques seront ajoutés. Ce fichier d'en-tête a ses propres modèles. Donc, le composant dynamique sera-t-il rendu avant ou après ce modèle ? Eh bien, c'est en fait à nous de décider. C' est là que la fente arrive. Fente nous permettent de contrôler la distribution de ce contenu. Nous déclarons un emplacement à l'intérieur du modèle pour placer le contenu à l'intérieur. Actuellement, si nous passons au navigateur maintenant, nous ne voyons que l'en-tête en haut et aucun signe du contenu que nous avons imbriqué dans l'application. Juste ici. Vous ne voyez réellement que cette section d'en-tête et rien d'autre. Pour afficher le contenu imbriqué, plus dans le fichier header.vue, nous pouvons ajouter l'élément de slot spécial à l'intérieur du modèle parent. Juste en dessous du div-wrapper, je veux ajouter la fente, l' ouverture et la balise de fermeture. Sauve ça. Ensuite, nous pouvons maintenant voir que le contenu est maintenant placé à l'intérieur. C' est le composant dynamique qui est en haut, puis en dessous nous avons l'en-tête. C' est parce que nous avons placé une fente au-dessus de la section d'en-tête, qui est ici. Nous pouvons également ajouter la fente partout où nous le voulons. Nous pouvons découper cela avec le modèle, puis l'ajouter sous les liens de menu et maintenant nous voyons notre application est revenue à la normale. Nous ne nous limitons pas à imbriquer uniquement les composants. Nous pouvons également imbriquer des éléments HTML à l'intérieur des composants. Tout d'abord, revenons à notre application comment elle était. Si nous supprimons ces slots, puis dans App.vue, si nous déplaçons les composants en dehors de la section d'en-tête. Je vais créer un nouveau composant de pied de page, puis passer le contenu à cela via l'imbrication d'éléments HTML. Jetons un coup d'oeil à cela en action. Dans les composants, nous allons ajouter un nouveau fichier. Cette fois, nous allons ajouter en dehors de la section actuelle. Alors assurez-vous que c'est à côté du header.vue. Il s'agit du fichier Footer.vue. J' ai gardé cela en dehors du sous-dossier de la carte pour garder seulement les composants liés à la carte organisés à l'intérieur. Ajoutons notre modèle familier. Nous avons besoin d'un élément racine pour entourer notre contenu. Nous pouvons utiliser l'élément de pied de page HTML plutôt qu'un div. Comme nous le savons déjà, nous devons importer et enregistrer le composant pour nous assurer qu'il est disponible. Dans le fichier App.vue, faisons cela maintenant. Je vais juste copier une instruction d'importation et coller même, puis le changer pour être le pied de page, également même pour le chemin du fichier. Assurez-vous que ce n'est que des composants/pied de page, nous n'avons pas besoin du dossier de la carte. Dans les composants, nous pouvons l'enregistrer séparés par une virgule. Je vais appeler le mien CCFooter, qui est un fichier Footer. Maintenant, cela est enregistré, nous pouvons aller jusqu'au modèle toujours dans App.vue. Juste en dessous du composant kept-alive, allez ajouter ces éléments de ccFooter. Notre composant Pied de page n'a actuellement aucun contenu à l'intérieur du modèle, donc nous ne verrons aucune modification de l'application. C' est parce que nous allons ajouter le contenu du pied de page en tant qu'éléments HTML imbriqués dans ce composant Pied de page. Plutôt que d'avoir notre contenu dans le fichier Pied de page, nous pouvons l'ajouter entre ces deux balises. Je vais commencer par ajouter du texte de Cartes créatives. Je vais ajouter l'entité HTML pour le symbole de copyright, qui est l'esperluette et une copie avec un point-virgule à la fin. Ensuite, je veux ajouter une classe bootstrap pour un style de text-center. Là, nous arrivons à travailler en ajoutant des liens de navigation. Ouvrez les éléments nav-et là nous pouvons créer notre liste non ordonnée. Je vais ajouter des classes à la liste non ordonnée de nav, puis justifier le centre de contenu. Ensuite, nous pouvons ajouter quelques éléments de liste. Je vais juste passer à l'en-tête et prendre un de ces éléments de liste, juste pour que nous puissions garder les classes cohérentes et ensuite coller ceci à l'intérieur de l'ul. On a la classe de Nav-item. Nous avons le lien, qui est montré par ce clic maintenant. Le premier que je vais ajouter comme Home, puis quand j'ajoute quelques liens supplémentaires, copiez cela et collez deux fois de plus. Maintenant, nous avons nos trois liens. Le premier est Home. Le deuxième que je vais changer à À propos de nous, puis le troisième et dernier lien, je vais changer pour nous contacter et puis donner à cela une sauvegarde. Si nous passons au navigateur et actualisons, nous voyons qu'aucun changement n'a été appliqué. Nous savons d'après notre exemple précédent que le contenu imbriqué ne s'affichera pas. Nous devons ajouter notre élément de fente au composant parent, qui est footer.vue, alors ajoutons ceci à l'intérieur ici. Avec l'élément de slot ajouté, Vue js sait maintenant où nous voulons distribuer contenu que nous avons ajouté entre les balises de pied de page. Assurez-vous que c'est enregistré, puis passez au navigateur, puis vers le bas, nous avons notre contenu de pied de page. C' est ainsi que nous pouvons utiliser les machines à sous pour distribuer du contenu là où nous voulons qu'il apparaisse. Ceci est un regard de base à l'utilisation de machines à sous. Il y a quelques autres choses à couvrir lors de l'utilisation de ceux-ci, et nous allons continuer à les regarder dans la prochaine vidéo. 61. Portée des emplacements et contenu fallback: Nous allons maintenant continuer à regarder plus profondément une fentes et comprendre plus à leur sujet. Dans le dernier exemple, nous avons utilisé un seul élément de slot dans nos composants de pied de page. S' il n'y a qu'un seul élément de slot, comme nous l'avons ici, tout le contenu qui a été ajouté entre les balises de composant, qui est tout cela, sera inséré à l'intérieur de cette fente. Plus dans le pied de page, nous pouvons également ajouter du contenu entre les éléments de fente comme ça. Alors ajoutons du texte à l'intérieur d'ici. Tout le texte du pied de page, et c'est ce que nous appelons le contenu de secours. Si nous passons au navigateur et faites défiler vers le bas jusqu'au pied de page, nous pouvons voir que le texte n'est pas affiché vers le bas dans la section pied de page. En effet, le contenu entre les balises de slot est considéré comme un contenu de secours. Cela signifie qu'il ne sera affiché que s'il n'y a pas de contenu à insérer. Donc, pour les commentaires sur les éléments imbriqués dans les composants parents, qui est app.vue. Commenter cette section, jusqu'à la balise de navigation de fermeture. Il est maintenant revenir au pied de page et nous pouvons voir que nous avons le contenu de secours des barres obliques de texte de pied de page à long commentaire. Cette section recule. C' est juste quelque chose à considérer si le contenu n'est pas immédiatement disponible. Peut-être que nous voulons l'utiliser avec visuel par exemple, et nous pourrions montrer le contenu de secours jusqu'à ce que visuel devienne vrai. Une autre considération est la portée du contenu. À l'heure actuelle, nous avons une section de navigation à l'intérieur du pied de page qui est imbriquée. Donc, tout le code à l'intérieur d'ici est-il compilé dans les parents ou dans la portée de l'enfant ? Eh bien, jetons un coup d'oeil et découvrons. Donc, disons que nos textes de cartes créatives dans le pied de page, qui est juste en haut ici, était dynamique. Donc, au lieu d'avoir cette section ici, si c'était dynamique, nous avions une propriété de données, telle que AppName, cette propriété de données AppName serait-elle restaurée dans la section de script du parent ou des composants enfant ? Eh bien, la réponse est dans les composants parents. Si nous descendons à la section de script, et dans la section de données, ajoutons notre AppName. Je l'ai fait, Creative Cards. Allez dans le navigateur, nous voyons que les cartes créatives sont apparues en bas, et qui a obtenu un calibrage supplémentaire là-bas donc nous allons supprimer cela. Nous voyons maintenant le navigateur que le texte apparaît au pied de page. Nous pouvons maintenant voir que AppName fonctionne dans la section parent. Cependant, si nous essayons de déplacer cette propriété de données vers le pied de page. Supprimons AppName et puis nous voulons copier juste cette section de données, puis ajouter ceci à l'intérieur du pied de page. Ajoutez donc les balises de script, les valeurs par défaut d'exportation, puis collez dans notre section de données. Ici, nous pouvons ajouter notre AppName comme une chaîne de, « Creative Cards ». Alors sauvegardez cela et revenons à l'application, et nous pouvons voir que nous n'avons plus le texte apparaissant. Nous pouvons voir que la portée est dans le fichier app.vue parents. Supprimons simplement la balise de script du pied de page, et ajoutez-la à nouveau dans app.vue. Donc, tout à l'intérieur des parents est simplement dans la portée du parent. Tout ce qui est à l'intérieur des composants enfants se trouve dans la portée enfant. Ces quelques choses à penser lors de l'utilisation de machines à sous. Ensuite, nous allons jeter un oeil à l'utilisation des emplacements de noms. 62. Emplacements nommés: Jusqu' à présent, nous n'avons utilisé qu'un seul élément de fente. Cet emplacement unique tel qu'il est sera utilisé pour recevoir toute la section du contenu, que nous lui passons. Tels que toute la section entre le pied de page ici. Comme note de côté, s'il n'y avait pas de présence d'élément de fente. Si nous le commentons ou déplacons la section de fente et l'enregistrons, si nous passons au navigateur, nous voyons tout le contenu qui lui est transmis. Suivant à l'intérieur des composants parents est ignoré. Nous allons juste annuler cette section de fente et les ajouter à nouveau. Plutôt que d'utiliser un seul emplacement pour accepter le contenu complet. Nous pourrions également utiliser un ou plusieurs éléments de slot avec un nom spécial attributs. À l'intérieur du footer.vue, nous pouvons ajouter un attribut de nom à notre emplacement. C' est le nom de notre choix, le nom de quelqu'un, ce nom d'application. Maintenant, nous pouvons passer aux composants parents et faire correspondre son nom avec le contenu que nous voulons lui transmettre en utilisant l'attribut slot. La section du nom de l'application, qui est en haut ici. Je vais ajouter un attribut à l'intérieur de la pièce d'ouverture. Au niveau des attributs de fente et viendra correspond à la fente de sortie avec le nom que vous venez de donner tout « app-name ». Voyons voir à quoi ça ressemble. Maintenant en bas, seul le nom de l'application est affiché dans le pied de page parce que nous avons seulement distribué ce contenu. Je vais ajouter le symbole de copyright juste avant une donnée dynamique, donc et signer copie et le point-virgule, puis nous verrons le symbole de copyright à l'écran. Comme vous pouvez le voir, le reste des éléments disparaissent. Nous n'avons plus assez de liens. Pour que le reste de cela s'affiche, nous avons quelques options. Tout d'abord, nous pouvons continuer à ajouter plus de slots. Aussi avec les attributs de nom, comme nous l'avons fait ici. Ou nous pouvons attraper tout le reste du contenu de nom propre et le distribuer pour inverser l'élément de fente, cette fois sans attribut de nom. Si vous supprimez le texte du pied de page. J' apporte cela là-haut, et nous pouvons également ajouter un deuxième élément de fente, tout comme cela a été fait précédemment, mais sans attributs de nom, et maintenant si nous allons au navigateur, nous devrions voir le reste du contenu du pied de page apparaître. Maintenant, nous avons notre texte, qui est les emplacements de nom. Ensuite, tout le contenu supplémentaire, qui est les liens de navigation, est maintenant rendu à travers nos éléments de slot sans nom. Il s'agit d'un cas simple de distribution de contenu avec des machines à sous. Si notre pied de page avait permis plus de code HTML, utilise des emplacements pour placer le contenu exactement où nous voulions, est un outil vraiment utile d'avoir. 63. Section d'outro : introduction aux composants: Salut. C'est encore Chris. Je veux juste prendre une pause rapide à ce stade. Nous avons déjà abordé de nombreux sujets et appris beaucoup sur les composants et sur la façon dont ils peuvent communiquer les uns avec les autres. Notre projet est aussi très bien maintenant, mais nous avons encore beaucoup de fonctionnalités et d'améliorations à ajouter dans la section suivante, comme utiliser Firebase pour stocker nos images, et également permettre aux utilisateurs de définir le style du texte. Je vous verrai dans la section suivante, où à la fin, vous aurez une demande de carte de vœux entièrement fonctionnelle remplie. 64. Section d'intro : Composants suite et stockage Firebase: Bienvenue dans cette toute nouvelle section, où nous allons continuer à travailler avec les composants. Nous allons également intégrer avec Firebase, Pour stocker nos images téléchargées. Il y a aussi beaucoup d'améliorations à apporter à notre application, telles que permettre aux utilisateurs de styliser des textes sur la carte, et aussi rendre les images draggables pour eux et repositionner. Nous apprendrons également de nouvelles choses, telles que l'utilisation de eventbus et l'ajout de mixins aussi. Il y a beaucoup à faire dans cette section. Alors commençons. 65. Configurer Firebase: Dans cette section, nous allons continuer avec notre application et permettre aux utilisateurs de télécharger des images à afficher sur la carte. Ces images ont besoin d'un endroit pour être stockées. Pour cela, je vais utiliser Firebase, qui fait partie de Google. Nous utiliserons l'une des fonctionnalités de Firebase, qui est le stockage. Bien qu'il puisse être utilisé pour beaucoup plus, y compris les bases de données et l'authentification pour les plates-formes telles que iOS, Android et Web. Si vous allez sur le navigateur Web et allez sur Google, faisons une recherche pour Firebase. Accès actuel Firebase sur firebase.google.com, qui est le résultat le plus élevé. Firebase est libre d'utilisation et dispose de limites d'utilisation généreuses pour tester. Il existe des plans de tarification pour, mais vous n'aurez besoin de ceux-ci que si votre application grandit pour exiger ces. Si vous voulez en savoir plus sur Firebase, n'hésitez pas à regarder ce site Web, puis je vais commencer par aller sur la console. Vous devrez peut-être vous connecter d'abord à Google pour en arriver à ce stade Je me suis donc connecté avec votre compte Google. Si vous en avez un, sinon, il est facile d'en configurer un. Suivez simplement les instructions, puis cliquez sur Aller à la console. Donc, une fois que vous êtes à l'écran, nous pouvons cliquer sur Ajouter des projets, puis ajouter un nom de projet, je vais appeler mine Creative Cards App, puis sélectionner votre pays, cliquez sur Créer un projet, et donnez-leur juste un moment pour s'installer. Ensuite, nous sommes amenés à un écran de bienvenue, et tout comme une note de côté, sites comme ceux-ci ont l'habitude de changer les mises en page au fil du temps, donc si votre version semble un peu différente de la mienne, ne vous inquiétez pas, cela signifie généralement un bouton ou un lien de menu a été déplacé, les deux choses fonctionnent généralement de la même manière. Ensuite, pour commencer, nous pouvons soit ajouter notre projet à iOS, Android ou Web, donc nous allons cliquer sur Ajouter Firebase à votre application web. Nous copions en quelque sorte l'ensemble complet du code, mais je ne vais pas le faire, car cela inclut une balise de script pour Firebase, et je vais ajouter Firebase en tant que paquet npm, donc nous n'avons pas besoin de cette section. Tout ce dont nous avons besoin est la section initialisée à partir du second script, donc nous copions cette section sans les balises de script, puis si nous revenons à notre application. Nous allons créer un nouveau fichier dans nos projets, et ce fichier contiendra tout ce code d'installation Firebase. Je vais appeler cette Firebase Config, et cela va être créé à la racine de notre source. Alors ouvrez un nouveau fichier appelé firebaseConfig.js, à l'intérieur de son fichier vide, nous pouvons coller dans l'initialisation que nous venons de copier à partir de Firebase et enregistrer cela. Ce sont donc les sections dont nous avons besoin pour utiliser Firebase, il contient notre clé API unique. Firebase sait donc qui accède à l'information, ainsi que des liens vers l'emplacement de nos projets. Ensuite, nous devons ajouter le package Firebase à notre projet avec le gestionnaire de paquets de nœuds. Si vous ouvrez le terminal, assurez-vous que vous êtes dans le dossier du projet si vous utilisez une console distincte. Si vous utilisez Visual Studio Code, juste la tête vers le bas, et assurez-vous que le serveur est fermé en appuyant sur Control C, alors nous pouvons installer Firebase en utilisant npm installer dash, tiret, enregistrer, pour enregistrer est comme une dépendance, et le nom du paquet est simplement Firebase, et appuyez sur Entrée. Ensuite, donnez juste quelques instants à installer, cela ne devrait pas prendre trop de temps. Une fois que c'est fait, nous pouvons passer au fichier package.json, et nous voyons maintenant dans l'objet dépendances, nous avons Firebase à côté de vue. Donc, la première chose que nous devons maintenant faire est d'importer Firebase dans le fichier firebase.config. Donc, en haut, nous pouvons importer Firebase à partir de Firebase, et rappelez-vous, nous n'avons pas besoin d'ajouter le chemin de fichier complet à Firebase quand il s'agit d'un module Node. J' aime utiliser une lettre majuscule pour le nom du module, donc je vais changer celui-ci juste en bas pour correspondre. Maintenant, nous avons aussi notre fichier de paramètres, ouvrez-le pour ajouter ceci à la racine de notre projet, qui est App.vue. Faites défiler jusqu'aux balises de script, puis nous pouvons importer cette section, donc importer FirebaseConfig, donc c'est. /FirebaseConfig.js. Pour vous assurer que tout est bien configuré, il sera probablement logique maintenant de démarrer le service, alors descendez au terminal et exécutez npm, exécutez dev. Ensuite, nous pouvons aller dans le projet, et nous pouvons ouvrir la console. Donc, faites un clic droit et inspectez. Si vous allez dans la console et que vous n'avez pas de flèches rouges, c'est un bon signe que tout fonctionne bien, si vous avez des flèches rouges, assurez-vous de revenir en arrière et de les réparer avant de passer. C' est tout ce dont nous avons besoin pour ajouter Firebase à notre application. Il ne fait rien pour le moment, mais dans la prochaine vidéo, nous allons regarder créer l'image, télécharger des composants pour renvoyer les images à Firebase. 66. Créer le composant ImageUpload: Espérons que vous devriez maintenant avoir Firebase initialisé dans votre application sans erreurs de console. Si vous le faites, vous êtes prêt à créer l'image avec des composants de flux. Ce composant sera chargé de faire quelques choses. Vous aurez des entrées de fichier HTML pour permettre aux utilisateurs de sélectionner une image à partir d'un système. Vous allez également pousser l'image sélectionnée vers Firebase. Vous aurez une barre de progression pour afficher la progression du téléchargement vers Firebase. Ce sera une miniature d'aperçu de l'image. Ayez également un os pour confirmer que nous voulons utiliser cette image sélectionnée. Enfin, il émettra le nom de l'image sélectionnée aux composants parents. Plus tard, ce nom d'image sera transmis au composant de sortie d'image pour télécharger le fichier à partir de Firebase. Commençons par créer les composants. Alors revenez aux projets. Ensuite, à l'intérieur du dossier de la carte, créons un nouveau fichier appelé téléchargement d'image. Avec l'extension point view, le composant utilisera d'abord la carte du fichier. Allons à l'avant de la carte et l'importer et l'enregistrer. Dans le script, nous allons copier les instructions d'importation puis les changements vers le téléchargement d'image. La même chose avec le chemin d'accès du fichier. Puis enregistré cela vers le bas en tant que composants. Quelque part combiner CCImageUpload. Maintenant, nous pouvons insérer les composants comme un élément où nous le voulons. Je veux placer la mienne juste après la première zone de texte. Faites défiler jusqu'aux modèles. Juste après cette première entrée de texte cc, je vais ajouter CCImageUpload et la balise de fermeture. Je vais aussi ajouter une ligne horizontale juste pour les garder séparés. Alors, sauvegardez ça. Maintenant, nous pouvons ajouter du contenu HTML à l'intérieur du fichier de composant. Revenons à l'image upload.view, et nous pouvons ajouter nos modèles. Encore une fois, avec notre conteneur environnant, qui est notre div, et ajoutons quelques classes bootstrap pour le style. Ce sera une ligne, et nous allons à l'intérieur de cette div, nous pouvons ajouter un deuxième div, qui va avoir la classe de col-sm-12 pour en faire la pleine largeur. Ensuite, nous voulons ajouter h4 avec un texte d'image de téléchargement. Cela va être affiché en haut de la section de téléchargement. Vous pouvez voir exactement dans quelle section ils se trouvent. Ensuite, nous voulons ajouter un autre div, qui va être pour le formulaire. Cette div va avoir une classe bootstrap du groupe de formulaires. Ensuite, à l'intérieur, nous pouvons ajouter nos entrées de fichiers. C' est la zone que nous pouvons sélectionner un fichier de tous les systèmes à télécharger sur Firebase. Le type d'entrée est de fichier, nous allons ajouter quelques styles de formulaire, fichier de contrôle, aura également besoin de l'ID que nous utiliserons plus tard de téléchargement de fichier. Après cette section, nous allons ajouter une balise de pause. Il suffit d'ajouter un peu d'espace dans. Ensuite, nous pouvons ajouter à nos éléments d'image. Je vais lui donner un identifiant d'image. Quelle est la source de l'image vide ? Parce que nous avons eu cela plus tard avec JavaScript et nous le ferons dans la prochaine vidéo. Il s'agit effectivement d'un élément vide jusqu'à ce qu'une image ait été sélectionnée à l'aide de l'entrée. Ensuite, enfin, nous pouvons ajouter un bouton en bas. Ce bouton va être utilisé pour définir l'image. Une fois que l'utilisateur peut voir l'aperçu, ce bouton poussera ensuite l'image de la Firebase. Ajoutons un type, un type de bouton de type et aussi un ID que nous utiliserons plus tard du bouton d'image défini. Ensuite, nous pouvons ajouter les balises de script. Maintenant, aucune valeur par défaut d'exportation. Nucleus était vide pour l'instant. Ensuite, enfin, nos balises de style pour terminer ces modèles. Maintenant, si nous sauvegardons cela et allons dans le navigateur, si nous ne voyons pas d'erreurs, nous devrions maintenant voir les nouveaux composants sur l'écran. Nous avons le bord pour le titre, nous avons la section de téléchargement d'image, sur laquelle nous pouvons cliquer et choisir une image à partir d'une machine. Nous avons également le bouton d'image de jeu. Tout ça fonctionne bien. Si vous ne voyez pas les composants ou si vous avez un écran vide, vérifiez que vous appelez pour toute erreur, et vérifiez également le terminal et la console pour trouver des indices sur l'emplacement de l'erreur. Il s'agit maintenant de la configuration de base des composants. Ensuite, nous continuerons avec ces composants pour afficher la vignette de l'image et permettre également de pousser l'image sélectionnée vers Firebase. 67. Télécharger des images sur firebase: Nous avons maintenant configuré le bouton Composant, qui permet à l'utilisateur de sélectionner un fichier dans son système. Nous devons également envoyer cette image à Firebase pour le stockage. Cette fonctionnalité peut être ajoutée à une méthode qui est appelée lorsque l'entrée du fichier est déclenchée. Nous pouvons détecter cela avec un gestionnaire d'événements onchange. Ajoutons ceci dans notre modèle pour le téléchargement de l'image. Si vous localisez les entrées de fichier, nous allons ajouter un gestionnaire d'événements onchange. Donc, utilisez le au changement et je vais définir ceci à une méthode appelée UploadFile. Maintenant, nous pouvons aller au script et configurer nos données et les méthodes requises. Dans l'Export Default, nous pouvons ajouter notre propriété de données juste de la manière habituelle, et dans la propriété de données ce que je vais configurer est pour le nom de fichier. Initialement, ce sera une chaîne vide jusqu'à ce que l'utilisateur télécharge une image. Ensuite, en dessous de cette section de données, nous pouvons mettre en place nos méthodes que nous venons d'appeler UploadFile. Donc, configurez les méthodes, puis ajoutez notre nom de méthode de UploadFile. Parce qu'il s'agit d'un événement, nous avons accès aux données d'événement en transmettant un nom entre parenthèses. Cela peut être un nom de votre choix, mais je vais appeler cet événement de nom. Pour commencer, nous voulons saisir le fichier sélectionné et le transmettre à notre propriété de données de fichier. Faisons un journal de console, puis nous pouvons enregistrer la valeur des événements et voir comment nous pouvons récupérer ces données de fichier de cet événement. Enregistrez cela, puis si nous passons à la console, cliquez avec le bouton droit sur Inspecter, puis accédez à la console. Je vais télécharger un fichier avec notre section de téléchargement de fichiers. Pour suivre cette partie, vous devrez trouver une image, si vous n'en avez pas déjà stockée sur votre ordinateur, il y a beaucoup de sites gratuits où vous pouvez télécharger une image à utiliser. J' en ai un enregistré sur le bureau, donc je vais aller sur le bureau et cliquer sur Beach.JPEG, puis cliquez sur « Ouvrir ». Rien ne se passe encore à l'intérieur de l'application, ce qui est très bien. Mais plus dans la console, nous avons la valeur de l'événement. Ici, vous pouvez voir que nous avons les cibles, que nous pouvons ouvrir, et ensuite si nous faisons défiler vers le bas, nous devons chercher notre liste de fichiers, puis ouvrir ceci. Si vous cliquez sur zéro, qui est le premier élément, nous pouvons voir les détails du fichier que nous venons de télécharger. Nous pouvons voir des choses telles que le nom, la taille, et aussi le type d'image. Nous ne téléchargeons qu'une image à la fois afin que nous puissions toujours utiliser la position zéro. Maintenant, nous savons où les données de fichier sont stockées, nous pouvons les transmettre à notre propriété de données de fichier. Passons à la méthode et supprimons le journal de la console. Maintenant, nous pouvons sélectionner ce fichier point, qui est nos données, et nous allons définir cela égal à event.target.files, puis comme nous venons de le voir, nous devons sélectionner la position zéro. Pour pousser cela à Firebase, nous devons ajouter une référence de stockage Firebase. Cette référence est l'emplacement à l'intérieur de la Firebase où vous souhaitez ajouter nos fichiers. Nous avons configuré la référence de stockage comme ceci. Sélectionnez Firebase.storage.ref. Puisque nous faisons référence aux méthodes de stockage et de référence qui font partie du module Firebase, nous aurons également besoin d'importer Firebase dans le fichier. Faisons ça en haut du script. Importez donc Firebase à partir de Firebase. Dans la réf, on va faire deux choses. Tout d'abord, nous indiquons à Firebase le nom du dossier dans lequel stocker les images. Si le dossier n'existe pas actuellement, il sera créé. C' est le premier argument qui est transmis sous forme de chaîne. Créons un nouveau fichier appelé user_uploads, suivi de la barre oblique avant. Nous pouvons ensuite ajouter le chemin du fichier après. Nous ajoutons à la fin de cela le nom de fichier, que nous avons actuellement comme propriété de données. Nous allons ajouter à la fin this.file.name. Ce nom de dossier ainsi que ce nom de fichier créeront le chemin d'accès du fichier pour stocker l'image dans une Firebase. Nous pouvons ensuite installer cette ligne de code à l'intérieur d'une variable appelée StorageRef. Maintenant, nous avons la référence de stockage. Nous pouvons appeler la méthode put Firebase, pour télécharger l'image sur Firebase. Donc, l'image que vous voulez ajouter est this.file. Maintenant, c'est la configuration, on peut aller de l'avant et tester ça. Si nous revenons à la console Firebase. Allez sur Firebase, puis cliquez sur la console pour accéder à cette page. Sélectionnez l'application Cartes créatives, puis sur le côté gauche, nous devrions voir l'option de stockage, cliquez dessus. Ceci est le contenu de notre stockage. Actuellement, il n'y a pas d'images répertoriées ici, alors donnons-le un coup d'envoi. Si nous passons à notre application, nous pouvons essayer de pousser une image dans ce dossier. Sélectionnez l'Image Upload, puis choisissez l'image et cliquez sur Ouvrir. Ensuite, revenons à Firebase et actualisons. Nous pouvons voir après le rafraîchissement que rien ne se passe. Nous n'avons toujours pas d'images répertoriées dans le stockage. Si nous revenons à l'application et ouvrons la console, et voyons ce qui se passe ici. Nous pouvons voir que nous avons une erreur dans la console. La raison pour laquelle nous obtenons cette erreur est que par défaut, la sécurité Firebase nécessite une authentification. Aux fins de cette démonstration, je vais désactiver cela juste pour notre exemple afin que nous puissions nous concentrer sur view js. Bien sûr, pour les applications de niveau production, nous ne devrions pas le faire. Pour définir les règles au public, nous devons aller dans l'onglet Règles et changer ceci. Sélectionnez les règles de la section de stockage, puis ce que nous devons faire est de changer la section d'écriture, puis nous devons changer cela pour permettre la lecture et l'écriture. Supprimez cela et laissez simplement autoriser la lecture, écriture, puis cliquez sur « Publier ». Ok, alors maintenant passons à notre application, puis actualisons, puis choisissez Nouveau fichier. Je vais sélectionner à nouveau l'image de la plage et cliquer sur « Ouvrir ». C' est un bon signe, nous ne voyons aucun message d'erreur dans la console. Allons-y, puis allons aux dossiers. Ok, super. Maintenant, nous pouvons voir un nouveau dossier a été ajouté appelé useruploads. C' est le fichier que nous avons ajouté à l'intérieur de notre référence de stockage, puis nous pouvons revenir à Firebase et ouvrir ce dossier. Maintenant, nous voyons aussi que nous avons le fichier de Beach.JPEG ajouté. Si cela n'a pas fonctionné instantanément pour vous, vous devrez peut-être lui donner quelques instants juste pour que les nouveaux paramètres prennent effet. Félicitations si vous avez réussi à monter sur scène. C' est une grande partie de notre application prise en charge. Maintenant, nous passons à la vidéo suivante, nous allons ajouter une vignette d'aperçu de l'image afin que l'utilisateur puisse voir l'image qu'il a sélectionnée. 68. Aperçu d'image en miniature: Nous faisons de bons progrès avec notre carte de vœux. L' étape suivante que nous voulons prendre est de prendre les données du fichier image, que nous recevons maintenant, stockées dans la propriété de données de fichier, qui est juste ici, et de l'afficher dans un aperçu d'image à l'écran. Pour ce faire, nous allons profiter de l'objet de lecteur de fichiers JavaScript. Nous utiliserons File Reader pour lire le contenu du fichier image que nous avons fourni. Nous allons ensuite passer les résultats des événements à notre balise image en tant qu'attribut source ici. Alors regardons comment nous pouvons l'utiliser. Nous allons ajouter ceci à l'intérieur de notre méthode de téléchargement de fichier. Assurez-vous donc que cela est dans la base de code. Cela signifie donc que cela sera déclenché chaque fois qu'un fichier a été téléchargé. Pour pouvoir créer un objet de lecture de fichier nouvellement construit, installez-le à l'intérieur d'une variable appelée lecteur. Il s'agit donc d'un nouveau FileReader. Ensuite, à l'intérieur de cette variable, nous pouvons accéder à une nouvelle méthode appelée ReadAsDataURL. Cette méthode lit le contenu du fichier dans lequel nous lui passons. Donc, le fichier que nous voulons lire est cet objet date ici, auquel vous pouvez accéder avec ce fichier point. Le gestionnaire d'événements A et onload, qui pourrait également utiliser. Donc reader.onload. Cet événement onload déclenche une fonction. Chaque fois que l'opération de lecture est terminée avec succès, cette fonction prendra dans l'événement comme un paramètre qui contient les données du fichier. Cette fois, j'ai appelé l'événement E. Il suffit de ne pas le confondre avec le nom de l'événement que nous avons utilisé auparavant. Donc, voici de bons endroits à la source de l'image où nous voulons afficher la vignette. Nous avons déjà la balise image à l'intérieur de nos modèles, que vous venez ici, qui n'a pas d'attributs source. À quelques instants. Nous pouvons le sélectionner par l'ID de l'image et définir les magasins d'images pour être égal aux résultats cibles des événements. Donc, revenez vers le bas, nous pouvons sélectionner cette image en utilisant JavaScript. Donc documents.getElementById, et ID nous avons donné l'image ou simplement l'image, et nous pouvons utiliser point source pour définir la source égale à ces événements. Alors faites cela avec e.target.result. Pour terminer, nous pouvons ajouter une largeur maximale à cette image pour nous assurer que les images volumineuses ne nuisent pas à notre mise en page. Donc, dans le même fichier, je vais descendre aux startups, et cette fois, il va être étendu, donc ne s'applique qu'à cette finale. Nous pouvons ensuite cibler l'image, puis définir la largeur maximale de l'image à 200 pixels. Donc, ce devrait être tout ce que nous devons faire maintenant. Sélectionnez démarrer le serveur s'il n'est pas déjà en cours d'exécution avec npm, exécutez dev. Une fois qu'il s'ouvre, nous devrions être en mesure de sélectionner une image de fichier et de voir apparaître comme un aperçu. Quelqu' un choisit à nouveau mon image de plage et l'ouvre. Ok, super. Donc maintenant, le lecteur de fichiers fonctionne tout et nous pouvons voir l'aperçu de l'image affiché sur l'écran en définissant la source de l'image. Ensuite, nous allons ajouter une barre de progression de téléchargement d'image, et aussi rendre ces données de fichier aux parents. 69. Télécharger la barre de progression et données du fichier $emit: Nous pouvons maintenant sélectionner une image à partir de l'ordinateur des utilisateurs et le télécharger avec succès sur Firebase. En outre, nous avons un petit aperçu d'image sous le lecteur de fichiers juste ici. Je veux faire deux choses dans cette vidéo. abord, créez une barre de progression HTML pour afficher à l'utilisateur la progression du téléchargement de l'image sur Firebase. sera important de suivre cette progression de téléchargement plus tard. Ensuite, nous voulons émettre le nom du fichier au composant parent. Ceci est également important parce que lorsque nous créons les composants pour afficher l'image sur la carte là-bas, nous devons lui transmettre le nom de l'image via des accessoires. Nous pouvons télécharger l'image correcte à partir de Firebase. Nous commençons à l'intérieur du fichier de téléchargement d'image en ajoutant les éléments de progression HML à l'intérieur des modèles. Je vais l'ajouter juste au-dessus de la balise break. Ajouter une barre de progression. Ensuite, à l'intérieur, nous allons définir la valeur initiale à zéro. C' est le point de départ de la barre de progression. Parce que nous voulons travailler en pourcentage, nous allons définir la valeur maximale à 100. Vous pouvez également ajouter un ID de barre de progression. Cela nous permettra de sélectionner ces éléments plus tard avec JavaScript. Pour que cela fonctionne, nous devons alors créer un gestionnaire d'événements changé d'état sur la méthode put, que nous avons déjà. Nous faisons défiler vers le bas jusqu'à la méthode de téléchargement de fichier. Nous avons une méthode [inaudible] juste ici, que je vais stocker dans une variable afin que nous puissions y accéder avec le nom de Upload. Nous allons utiliser cette variable pour surveiller les événements modifiés d'état en utilisant un observateur de changement d'état fourni par Firebase. Toujours dans cette méthode de téléchargement de fichier, nous allons ajouter cet observateur. Je vais juste ajouter ceci sous la fonction reader.onload. Nous pouvons y accéder avec ce nom de variable de téléchargement, que vous venez de lui donner, ainsi de suite. Ensuite, le premier paramètre est l'état d'alarme changé. Ceci est fourni par Firebase. Cela sera déclenché chaque fois qu'un changement d'état a eu lieu. Cela appelle une fonction. Cette fonction prend en compte les instantanés de tâche. Il s'agit d'un objet fourni par Firebase. L' instantané contient des propriétés que nous pouvons utiliser pour surveiller le téléchargement. Dans notre cas, nous allons utiliser les propriétés octets transférés et le total des octets pour créer le pourcentage de la progression. Ensuite, nous pouvons stocker ce pourcentage dans une variable. Je vais appeler cette variable Progress. On va accéder aux instantanés. La propriété est des octets transférés. Il s'agit du nombre d'octets qui sont actuellement transférés divisé par les snapshots.TotalBytes. Il s'agit du nombre total d'octets du fichier. Faisons cela en un pourcentage. Nous multiplions cela par 100. Cela nous donnera une valeur comprise entre zéro et 100 et la stocker dans une variable appelée Progress. Maintenant, nous avons cette valeur de téléchargement en pourcentage. Nous pouvons ensuite envoyer ces informations à la barre de progression pour les mettre à jour. Pour ce faire, sachez simplement que c'est variable, je vais accéder à la barre de progression avec un document.getElementById. Nous obtenons la barre de progression ou une barre d'identification ou de progression à cette extrémité de la chaîne. Ensuite, tout ce que je veux faire est de définir la valeur pour être égale à cette variable de progression, etc. Maintenant, passons au navigateur et vérifions si cela fonctionne. Nous pouvons voir tous les éléments de progrès. Maintenant, choisissons un fichier dans le chargeur et sélectionnez Ouvrir. Tellement apaisés, on travaille bien. Nous voyons que le changement d'état de téléchargement est causé dans une barre de progression pour augmenter. Tout ça a l'air bien pour l'instant. Super. Il s'agit de la première partie terminée. Nous avons juste besoin d'une telle méthode d'émission, tout comme nous l'avons fait précédemment avec les composants de texte. Cela enverra le nom de l'image sélectionnée aux composants parents. Faisons-les maintenant. En fait, d'abord, je vais juste ajouter un commentaire. C' était la réponse établie à, section est désactivée avec des commentaires juste donc créons pour plus tard. Cela peut être [inaudible]. C' est pour la barre de progression. Maintenant, faites défiler sous cette section de la barre de progression. Nous allons ajouter ce $ émet pour envoyer le nom de l'image aux parents. Je vais appeler cet événement personnalisé Display Image Changed. Les données que nous voulons envoyer, encore une fois, est this.file, qui est ces données ici. Ensuite, nous pouvons accéder au nom d'un fichier avec .name. Ce nom de fichier est maintenant envoyé au fichier parent, qui est carfront.view. Doit maintenant aller dans ce fichier et ajouter une nouvelle propriété de données pour stocker le nom de cette image dans. A l'intérieur de la section de données, séparés par des virgules, nous pouvons ajouter notre nom d'image. Ce sera d'abord une chaîne vide. Quand j'ai besoin d'écouter les événements sur le composant réel dans lequel il est transmis, j'ai donc besoin de chercher le téléchargement d'image cc, puis d'écouter les événements. L' événement s'appelait Display Image Changed. Nous pouvons maintenant définir le nom de l'image sur la valeur des événements. Le nom de l'image est égal à $events. C' est tout ce que nous avons fait avant. C' est à peu près la même chose que nous avons fait avec les entrées de texte. Tout ce que nous faisons est de transmettre le nom de l'image plutôt que la valeur du texte. Essayons que cela fonctionne. Nous devons sortir les données du nom de l'image en utilisant les accolades doubles. Je vais le faire sur le côté de l'affichage des cartes pour l'instant. Ouvrez les accolades doubles et nous pouvons maintenant mettre la valeur de ce nom d'image et dire cela. Passons au navigateur. Maintenant, si nous choisissons un fichier, sélectionnez l'image. Super. Si tout s'est bien passé, nous verrons le nom de l'image que nous avons sélectionnée sortie sur la carte. C'est un grand pas. Nous avons maintenant l'image en train de pousser Firebase. Nous avons maintenant l'aperçu de l'image apparaissant à l'écran. Nous avons également le nom de l'image transmise aux composants parents. Maintenant, nous sommes prêts à passer à la création des composants de sortie d'image, qui affichera l'image de la seule section d'affichage de la carte. Nous commencerons avec ça dans la prochaine vidéo. 70. Composant de sortie d'image: Nous avons maintenant tout ce dont nous avons besoin pour créer les composants de sortie d'image. Nous allons réellement afficher l'image sur la carte. Nous commençons de la manière habituelle en créant les composants de sortie d'image. Je vais passer à Visual Studio et je vais ajouter ces composants dans la section actuelle. Cela va s'appeler ImageOutput.vue. Commençons donc par créer nos modèles en haut, puis nos balises de script, nous utilisons pour l'instant une valeur par défaut d'exportation vide. Ensuite, enfin les balises de style et puis enregistrez cela. Ensuite, une fois que cela est fait, nous devons importer et enregistrer à l'intérieur de Cardfront.vue. Rappelez-vous que CardFront sera le conteneur, qui contient toutes les images et les composants de texte. Donc, en faisant défiler vers le bas jusqu'à la section script, je vais importer notre ImageOutput à partir de. /imageOutput.vue. Donc, nous devrions pouvoir voir un peu de modèle émerger ici. Si vous regardez à l'avant de la carte, nous avons le TextInput et TextOutput, suivi de l'ImageUpload ou de l'ImageInput, puis aussi l'ImageOutput. Donc, mettre des données, transmettre aux composants parents, puis transmettre ces données à cet enfant en tant qu'accessoires. Maintenant, enregistrons ceci dans la section du composant. Donc, je vais appeler ce CCImageOutput, qui est bien sûr l'ImageOutput que nous venons d'importer. Cela signifie maintenant que vous pouvez placer les composants à l'intérieur de l'emplacement sélectionné, à l'intérieur de l'écran de la carte. Donc, à l'intérieur de cette section d'affichage de carte, je vais supprimer les accolades doubles d'avant et puis ajouter notre ImageOutput. Tout comme la zone de l'éditeur, je vais ajouter ceci comme deuxième composant. Donc cc-image-output et la balise de fermeture. Ensuite, nous devons passer quelques accessoires. abord le nom de l'image à télécharger, que vous stockez dans la propriété de nom de l'image dates, qui est juste ici. Ajoutons le premier accessoire dans la balise d'ouverture. Donc, utilisez le deux-points pour lier ceci et nous allons appeler cet accessoire le DisplayImage. Ensuite, passez la valeur de ImageName. Ensuite, le deuxième accessoire que nous allons ajouter est aussi cette hauteur de conteneur, qui est juste la même que le TextSoutPut. Donc, cette fois, je veux que l'image soit un peu plus grande que le texte, donc je vais définir ça sur 350, alors sauvegardez ça. Maintenant, nous pouvons passer à l'ImageOutput et commencer à travailler à l'intérieur. Le modèle est assez simple. Pour le moment, nous aurons juste besoin d'un élément image pour afficher cette image. Donc, créons le div comme wrapper. Ensuite, à l'intérieur de cela, nous allons créer notre image et ensuite nous n'avons pas besoin d'une source pour l'instant. Tout ce que nous voulons faire est d'ajouter un ID et de définir cela égal à OutputImage. Rappelez-vous donc que ce composant reçoit des accessoires, donc nous devons avoir une validation de prop. Dans la valeur par défaut de l'exportation, nous pouvons ajouter nos accessoires à l'intérieur ici. Alors ce sera un objet. Donc, le premier est pour l'image d'affichage, qui est le premier accessoire que vous lui passez. À l'intérieur, nous allons définir ceci sur un type de chaîne, puis séparé par une virgule. Nous pouvons également ajouter le conteneur haut prop. Ce serait un type de nombre. Par défaut, nous allons également définir cette valeur sur une valeur de 200. Maintenant, ce que je suis placé test, nous recevons effectivement ces accessoires regardant sortie l'image d'affichage à l'intérieur du modèle. Ouvrez donc les accolades doubles, puis sortez l'image d'affichage, qui est un accessoire que nous recevons du parent, qui est juste ici. Donnez cela une sauvegarde et vérifions cela dans le navigateur. Choisissez un fichier et téléchargez l'image. Donc, nous pouvons voir que le nom a été téléchargé et c'est une sonde qui est transmise aux composants par les parents. Ensuite, ajoutons quelques styles pour correspondre à la numérotation de zone de texte. Faites donc défiler vers le bas jusqu'à la section de départ en bas. En fait, nous voulons ajouter une classe à l'environnement do first of image container. Nous pouvons utiliser cette cible à l'intérieur de la section style, donc .image-container. Puis à l'intérieur, nous allons ajouter notre bordure qui va à un pixel et pointillé. Tout comme la zone de texte, le débordement peut être masqué. Également une marge de cinq pixels en haut et en bas et zéro à gauche et à droite. Donc, en ce moment, nous recevons le conteneur haut, ce qui nous a été passé. Mais nous ne l'utilisons pas réellement pour définir la hauteur du conteneur. Si nous passons au fichier TextOutput.vue, nous définissons pour obéir à la propriété calculée pour utiliser cet accessoire comme un objet de style. Le code à l'intérieur de la sortie de l'image sera exactement le même, donc je pourrais simplement copier et coller cette section calculée. Ensuite, revenez à ImageOutputs.vue. Ensuite, nous pouvons coller cela à l'intérieur de nos objets. Donc, localisez la balise d'accessoires de fermeture et ajoutez une virgule, puis collez-la dans. Maintenant, tout ce qu'il reste à faire est de lier le StyleObject au container-div. Alors, allez au conteneur environnant en utilisant la colonne que nous avons combiné les styles dynamiques et définissez ceci à notre StyleObject, qui est la valeur calculée que nous venons d'ajouter alors sauvegardez cela. Démarrez le serveur div et chargeons cela dans le navigateur. La première chose que vous verrez si tout fonctionne correctement est qu'il y a un conteneur d'image qui est plus grand que le conteneur TextOutput. C' est parce que nous définissons l'image à 350 pixels. Alors que nous ne définissons que le conteneur pour le TextBox à 130. Ensuite, nous pouvons également voir si nous téléchargeons notre image. Le nom de l'image doit être transmis à la carte via des accessoires. Nous avons cela fonctionne correctement, bien fait. Vous êtes maintenant prêt à utiliser le nom de l'image pour télécharger et afficher l'image sur la carte. 71. Télécharger des images à partir de Firebase: Bien joué pour atteindre cette étape du cours. Nous avons couvert beaucoup de choses jusqu'à présent, et j'espère que cela a du sens. Si vous avez encore du mal à comprendre certaines parties, ne vous inquiétez pas trop. Au fur et à mesure que vous continuez avec ce cours, vous aurez beaucoup plus de chances de vous entraîner. Vous avez déjà couvert la plupart des concepts de base d'UGS. Dans cette vidéo, nous allons télécharger et afficher l'image sur la carte. Déjà, nous avons passé le nom de l'image enfin afficher l'image prop, qui est juste ici. À l'intérieur de notre image, notre profil. Nous pouvons configurer une propriété de surveillance pour détecter les changements causés lorsque l'utilisateur télécharge une nouvelle image. faisant défiler vers le bas, je vais juste ajouter ceci juste en dessous des accessoires. Je vais ajouter la propriété watch. Nous allons regarder cette propriété d'image d'affichage. Ajoute ça à l'intérieur. Ici, nous voulons communiquer avec Firebase pour télécharger l'image. Nous devons d'abord importer Firebase dans ce fichier. Juste en dessous de la balise de script d'ouverture, allez importer Firebase à partir de Firebase. Ensuite, nous devons ajouter une référence de stockage, tout comme nous l'avons fait à l'intérieur des composants d'entrée d'image. Passez au téléchargement de l'image. Si vous vous en souvenez, dans cette section de fichier de téléchargement, nous avons ajouté une référence de stockage qui pousse le nom du fichier vers Firebase. Je vais copier cette ligne de code, puis revenir aux sorties de l'image et ajouter ceci à l'intérieur de la propriété watch. Cela va créer une variable appelée référence de stockage, qui fait référence à un fichier à l'intérieur de la base de données. Cette fois, au lieu de pousser ce fichier haut, nous voulons y faire référence avec cette image d'affichage de points, qui est un nom de l'image que nous avons passée. Nous pouvons ensuite utiliser la référence de stockage avec la méthode get download URL pour récupérer l'URL de ce fichier. Juste ci-dessous, nous allons accéder à la référence de stockage que nous venons créer, puis point obtenir l'URL de téléchargement. Encore une fois, il s'agit d'une méthode fournie par Firebase. Ce problème est résolu avec succès. Ensuite, nous assignons une fonction de rappel à exécuter. Nous devons également transmettre l'URL dans la parenthèse que nous venons de télécharger. Maintenant, nous avons l'URL de l'image. Nous pouvons ajouter le code pour définir la source de l'image. Rappelez-vous que nous n'avons pas de source d'image juste au-dessus. Nous pouvons accéder à cette image via son identifiant d'image de sortie. À l'intérieur de ce corps, allons nous créer notre variable d'image et définir ceci à l'image id avec document.getElementById. L' ID de l'image était l'image de sortie. Ensuite, nous pouvons définir la source du point de l'image pour être égale à cette URL, qui sera dans le passé. Donnez ça une sauvegarde. C'est un exemple assez simple pour télécharger l'image. Nous pouvons aller encore plus loin en ajoutant aussi la gestion des erreurs , mais je ne veux pas aller trop loin dans Firebase pour l'instant. Sauvegardez cela et démarrez le serveur de développement et nous pouvons vérifier que cela fonctionne bien. Allez dans les projets, choisissez un fichier. Super. Maintenant, nous voyons que l'image a été téléchargée avec succès à partir de Firebase. Cela signifie que notre code est bien confiné. Il y a cependant un petit problème et si vous ne pouvez pas voir l'image affichée sur le côté droit, vous avez peut-être déjà rencontré cela. Si vous avez téléchargé une image pour la première fois, il se peut que celle-ci ne s'affiche pas dans la carte. Jetons un coup d'oeil au problème. Si nous passons à choisir un nouveau fichier et avoir une nouvelle image sur le bureau, qui n'est pas encore poussé à Firebase. Si nous sélectionnons ceci, nous voyons que cela ne fonctionne pas. Lorsque nous sélectionnons un fichier image pour utiliser VUGS passages nom de fichier aux parents. Ce nom de fichier est transmis au composant enfant, qui essaie ensuite de télécharger l'image beaucoup dans ce nom de fichier. Le problème est que cela se produit beaucoup plus rapidement que le temps nécessaire pour télécharger l'image sur le serveur Firebase. Cela signifie que [inaudible] nous essayons de télécharger une image avant même qu'elle ne soit téléchargée sur Firebase. Si nous avons déjà téléchargé une certaine image comme l'image de plage d'avant, cela ne causera pas de problème car l'image est déjà disponible à l'intérieur de Firebase. C' est un problème que nous pouvons résoudre assez facilement. Nous allons jeter un oeil à faire ça dans la prochaine vidéo. 72. Régler le bouton d'image: A l'intérieur du fichier point vue de téléchargement d'image, nous avons défini un « bouton Définir l'image » à l'intérieur de nos modèles. Le but de ce bouton est de faire deux choses. abord, il permet à l'utilisateur de confirmer s'il souhaite utiliser cette image à partir de la vignette. De plus, comme nous l'avons mentionné dans la dernière vidéo, nous essayons de télécharger une image avant qu'elle ait eu le temps d'être téléchargée sur le serveur. Ce bouton peut également résoudre ce problème aussi si nous utilisons un bouton pour émettre le nom du fichier. Nous pouvons masquer le bouton et le rendre visible uniquement lorsque la barre de progression est à 100 %. Nous pouvons donc commencer par masquer le bouton jusqu'à ce qu'une image soit chargée. Cela peut être fait avec un CSS simple. En tant qu'attribut, vous allez ajouter la propriété style et définir cette propriété pour qu'elle n'affiche aucun. Maintenant, nous devrions voir le bouton est supprimé. Dans notre méthode de téléchargement de fichier, si nous localisons la fonction de chargement, puis juste en dessous où nous mettons à jour la barre de progression, à l'intérieur, nous pouvons réintroduire le bouton lorsque la progression de téléchargement atteint 100 pour cent. Sous l'endroit où nous obtenons la barre de progression, nous pouvons créer une instruction if à exécuter si la progression est égale à 100 pour cent. Donc, si la progression, qui est ce pourcentage ici, est égale à 100, et maintenant nous pouvons utiliser un document.getElementById pour sélectionner ce bouton par son Id. Donc, de retour à l'intérieur de l'instruction if, nous pouvons ajouter nos documents.getElementById, puis passer dans le bouton Définir l'image Id, et puis nous pouvons utiliser cela pour réintroduire le bouton en définissant le type d'affichage égal à inline-block. Donc rappelez-vous par défaut, le mode bouton sera affiché car nous définissons l'affichage sur zéro. Ensuite, nous regardons ci-dessous pour une fois que la progression atteint 100 pour cent, puis une fois que cela se produit, nous allons ensuite définir le type d'affichage du bouton pour être inline-block, qui s'affichera à l'écran. Alors maintenant, sauvegardons cela, et essayons ceci dans le navigateur. Nous ne voyons pas le bouton par défaut. Donc, nous choisissons un fichier maintenant. Une fois que la barre de progression atteint 100 %, nous voyons maintenant le bouton Définir l'image à l'écran. Maintenant, ce bouton n'apparaît que lorsque l'image est complètement chargée dans Firebase. Nous pouvons maintenant l'utiliser pour déclencher la méthode d'émission lorsqu'il est cliqué. Revenons donc au bouton à l'intérieur des modèles. Ensuite, juste après la propriété de style, nous allons ajouter un écouteur de clic pour déclencher une méthode appelée Set Image. Ensuite, nous allons configurer notre méthode Set Image ci-dessous. Donc, en faisant défiler vers le bas, une fois que vous arrivez à la fin de la méthode Upload File, qui est juste ici, ajoutez une virgule, puis nous pouvons ajouter notre méthode Set Image. Ensuite, à l'intérieur, tout ce que nous avons à faire est de couper cette ligne de code qui émet le nom de fichier, puis de déplacer cela à l'intérieur de notre méthode. Rappelez-vous que le bouton d'envoi de ces événements personnalisés n' apparaît que lorsque la progression du téléchargement est de 100 %. Il est donc désormais sûr d'envoyer ce nom de fichier à Firebase. Sauvegardons et testons ceci. Si nous passons au navigateur, la première chose que je veux faire est de passer à la console Firebase. Alors dirigez-vous vers Firebase, puis cliquez sur la console, puis sélectionnez les cartes créatives vers le haut, puis passez au stockage. Je vais supprimer le fichier de téléchargement de l'utilisateur. Cliquez donc sur le bouton à gauche, puis sélectionnez Supprimer. n'y a donc plus d'images stockées dans la base de données. Nous pouvons maintenant passer à notre application, et tester en sélectionnant une nouvelle image pour vérifier qu'elle est maintenue jusqu'à ce que nous sélectionnions le bouton Définir l'image. Alors allez dans Choisir un fichier, et sélectionnez un nouveau fichier qui ne se trouve pas dans la Firebase puis Définir l'image. Maintenant, nous pouvons voir que nous n'avons pas le problème que nous avons eu dans la dernière vidéo parce que nous ne pouvons pas télécharger l'image de Firebase tant qu'elle n'est pas entièrement téléchargée maintenant. Donc, tout fonctionne bien, fois si nous utilisons des téléchargements dans l'image comme nous venons de le faire, puis clique sur le bouton Choisir un fichier une fois de plus. Nous voulons que ce bouton Définir l'image disparaisse à nouveau jusqu'à ce qu'une nouvelle image soit complètement téléchargée. Sinon, nous aurons le même problème qu'avant. Ainsi, nous pouvons supprimer cette image immédiatement après que le bouton Choisir un fichier est cliqué à l'intérieur de la méthode de téléchargement de fichier. Allons vers le haut pour la méthode de fichier de téléchargement, puis à l'intérieur ici tout en haut, je vais ajouter un document.getElementById. Une fois de plus, nous allons maintenant saisir le bouton Définir l'image, et tout ce que nous allons faire est de définir la propriété de style de l'affichage des points de style n'est pas égal à aucun. Donc, donnez cela une sauvegarde, et maintenant testons-le dans le navigateur. Sélectionnons notre première image, puis définissons ceci. Maintenant, si nous cliquons sur Choisir le fichier, nous devrions maintenant voir que le bouton Définir l'image est temporairement supprimé. Sélectionnez donc une image, puis ouvrez. Super, tu as vu ça ? Nous avons perdu le bouton image jusqu'à ce que le fichier ait été entièrement téléchargé. Donc tout fonctionne bien. L' image ici sur le côté de l'écran, peut être un peu trop grande ou trop petite, mais ne vous inquiétez pas pour l'instant. Nous corrigerons ça dans la vidéo ultérieure. 73. Menu des options de texte : tailles de police: Nous allons maintenant revenir à nos composants de sortie de texte et ajouter un menu d'options. Le menu apparaîtra lorsque l'utilisateur survolera le texte avec la souris sur le côté droit pour nous permettre de modifier la taille de la police, alignements de texte et même les options en gras ou en italique. Dans cette vidéo, je vais commencer par configurer le menu pour qu'il apparaisse sur le survol et ajouter également une option de taille de police. Commençons donc par créer notre menu en utilisant v-show pour afficher ou masquer une fois que vous survolez cette zone de texte. Alors passons à notre fichier TextOutput.vue. Donc juste en dessous de la div d'ouverture, je vais ajouter un formulaire. Ce menu sera de forme car il est composé d'entrées de formulaire. Donc, je vais ajouter une classe, classe bootstrap de petite. Cela rend un formulaire un peu plus petit, donc il s'intègre mieux à l'intérieur de la sortie de texte. Ensuite, nous pouvons ajouter notre v-show. Donc, nous voulons lier ceci pour afficher les options qui ne sont pas encore créées. Ensuite, je vais juste ajouter du texte simple dans les balises P. Donc, nous ajoutons juste un test à l'intérieur. Maintenant, ci-dessous à l'intérieur de notre script, nous pouvons configurer cette propriété de données ShowOptions. Nous faisons défiler vers le bas et je vais ajouter ceci juste en dessous des accessoires, alors ajoutez nos données. J' ai la virgule de clôture. Donc, cela va retourner nos données ShowOptions. Donc, je vais définir la valeur initiale pour être vraie juste pour voir si cela fonctionne correctement dans le navigateur. Super. Donc maintenant, nous avons le texte de test apparaissant en haut de chaque composant. Donc maintenant, nous savons que ça marche, nous pouvons changer ça en faux. Donc, montre seulement chaque fois que nous survolons la zone. Maintenant, il est retiré. Donc, pour basculer la zone ShowOptions, nous pouvons ajouter des gestionnaires d'événements de souris si l'utilisateur passe le curseur sur la div de sortie de texte. Alors ouvrez la div d'ouverture. Je regarde avancé appelé mouseover. Ainsi, chaque fois que la souris passe sur la zone de texte, nous pouvons définir ShowOptions pour être égal à true. Nous pouvons également faire la même chose chaque fois que la souris quitte, mais cette fois nous allons définir les options pour être égales à false. Je vais sauver. Maintenant, nous voyons qu'il est caché par défaut, mais si vous passez le curseur sur la zone de sortie de texte, nous pouvons voir que le texte s'affiche. Donc maintenant avec cela en place, nous pouvons ajouter une boîte de sélection pour nous permettre de choisir la taille de la police, que nous voulons utiliser pour le texte. Retournez au formulaire. Nous pouvons remplacer cette balise P par une zone de sélection. Je vais commencer par une étiquette pour cette zone de sélection. Donc, libellé pour SelectBox. Ensuite, je vais à un titre de la taille de la police. Faisons de l'espace. Ensuite, nous allons ajouter notre SelectBox juste en dessous de cette étiquette. Donc, à cette zone de sélection, je vais remplacer ce nom par une classe Bootstrap de sélection personnalisée. Donnez-lui un ID de SelectBox, qui correspond à l'étiquette juste au-dessus. À l'intérieur, nous pouvons ajouter nos options, et chacune de ces options va être une valeur de pixel différente pour la taille de la police. Donc, le premier que nous allons ajouter comme 42 pixels avec le texte de 42 pixels. Ensuite, nous allons copier et coller ceci pour ajouter quelques options plus loin. Nous allons donc y ajouter quatre options. Le second de 48 pixels, le troisième comme 56, et enfin, le plus grand des 64 pixels. Alors enregistrez cela et voyons à quoi cela ressemble dans le navigateur. Donc maintenant, si nous survolons la sortie de texte, nous pouvons maintenant voir que nous avons les options pour sélectionner les tailles de police. Nous avons maintenant besoin d'un moyen d'utiliser cette valeur sélectionnée dans les plaques comme taille de police. Il s'avère que nous avons déjà certaines de ces configurations. Les balises P, qui affichent le texte que nous voulons modifier, ont déjà un objet de style qui lui est lié. Donc, nous pouvons simplement ajouter à cela. Nous devons d'abord ajouter une propriété de données et je vais appeler ceci setFontSize. Donc, faites défiler vers le bas jusqu'aux données et séparés par une virgule ajouter une nouvelle propriété de données de setFontSize et définissez ceci sur une chaîne vide pour commencer. Nous pouvons ensuite ajouter ceci aux entrées sélectionnées en utilisant le modèle V. Donc, faites défiler jusqu'à la balise select d'ouverture et juste après l'ID, je vais ajouter V-model et définir ceci pour être setFontSize. Avec cette configuration de liaison de données bidirectionnelle, la propriété de données SetFontSize sera définie sur la valeur sélectionnée. Maintenant, nous pouvons passer la valeur sélectionnée à l'objet de style, que nous avons déjà. Faites donc défiler jusqu'à l'objet de style, qui se trouve dans la section calculée. Ensuite, nous pouvons définir la propriété de taille de police. Parce que c'est JavaScript, il doit devenir un cas. Je vais définir cette taille de police pour être égale à cela. et souhaitez l'option de données de SetFontSize. Ensuite, parce que cela reçoit juste un nombre quand cela ajoute des pixels, une fois de plus, nous allons en faire une valeur CSS. Donc maintenant, cela devrait être fait. Alors je vais sauver. Maintenant, nous devrions être en mesure d'essayer cela dans le navigateur et voir si cela change la taille de la police. Alors ajoutons du texte à cela et survolons et modifions la taille de la police. Ça a l'air bien. Super. Cela semble fonctionner et chaque fois que je clique sur une taille différente, nous voyons maintenant le texte est changé. Donc ça marche très bien pour l'instant. Ensuite, nous allons continuer avec ce menu en ajoutant les options d'alignement du texte. 74. Menu des options de texte : alignement du texte: Notre menu apparaît maintenant lorsque nous survolons le texte, et nous avons également ajouté avec succès une entrée de sélection pour changer la taille de la police. Maintenant, nous pouvons continuer avec le menu et ajouter quelques options supplémentaires. Spécifiquement des boutons libres pour définir l'alignement du texte. Il suivra un processus similaire à la boîte de sélection, mais cette fois nous utiliserons des boutons radio. Si vous vous sentez confiant, je vous encourage à aller de l'avant et à vous lancer seul avant de suivre avec moi. Sinon, je vais aller de l'avant maintenant et le faire à l'intérieur du fichier .vue de sortie texte. Sauvegardez les modèles en haut. Si nous recherchons l'option de sélection de fermeture, créons un peu d'espace et assurez-vous que cela est toujours dans le formulaire. Je vais commencer par ajouter un div, puis nous allons ajouter des classes bootstrap pour rendre ce look un peu plus agréable. Le premier va être la vérification de formulaire puis aussi la vérification de formulaire en ligne. Ensuite, nous pouvons demander à l'étiquette aussi la classe bootstrap de l'étiquette de vérification de formulaire. Ensuite, dans ce, en fait, nous pouvons ajouter notre entrée entre l'étiquette. L' entrée va être le type de radio. Certaines classes pour les entrées de style ou de vérification de formulaire , puis enfin vous pouvez ajouter une valeur. Le premier que je vais mettre à gauche, donc c'est pour l'alignement gauche. Je vais copier cette section div complète et coller deux fois de plus. Le milieu va être d'aligner le texte au centre et le dernier sera pour l'alignement de gauche et juste après l'entrée, nous allons ajouter le texte. Le premier est à gauche, au centre, puis à droite. Ensuite, comme nous l'avons fait avec la boîte de sélection, nous pouvons également configurer une propriété de données pour transmettre la valeur sélectionnée à. Revenons au script, juste en dessous de la taille de police définie, que nous avons utilisée dans la dernière vidéo, nous allons faire la même chose ici mais cette fois définir la ligne de texte. Cela va être une chaîne vide pour commencer et aussi passera quelques données à cela. Maintenant, nous avons notre propriété de données, nous pouvons mettre en place la liaison de données bidirectionnelle en utilisant le modèle V, donc revenir aux entrées. Tout d'abord, nous allons ajouter V-model comme attribut à la section gauche. Modèle V, cela va être définit text-align. Ce sera le même pour les trois entrées, donc nous pouvons ajouter ceci comme un attribut au centre et aussi à droite. Assurez-vous que la liaison de données bidirectionnelle est définie sur la même propriété dates. Cela met en place, définir le texte aligné avec la valeur de notre os radio, que vous avez ajouté ici, que vous pouvez ensuite transmettre à nos objets de style. faisant défiler vers le bas, regardons l'objet de style à l'intérieur de la section calculée. Nous ferons la même chose que nous l'avons fait auparavant avec la taille de la police en définissant le text-align et ce sera this.set text-align. C' est tout ce que nous avons à faire, pour que nous puissions aller au navigateur et vérifier que tout fonctionne. Ajoutez des textes ici, puis passez la souris sur le centre, la droite et la gauche. Bravo si vous avez réussi à le faire vous-même, sinon, c'est tout à fait bien. Tout cela fonctionne maintenant, vous pouvez maintenant passer à la vidéo suivante et compléter cette section de menu en ajoutant les options en gras et en italique. 75. Menu des options de texte : style et poids de la police: Maintenant, il est temps de terminer notre menu survol en ajoutant options pour changer le texte en gras et en italique. Nous pouvons utiliser les boutons radio comme nous l'avons fait dans la dernière vidéo, parce que nous voulons pouvoir sélectionner à la fois le gras et l'italique en même temps. Les liaisons radio ne permettent qu'une de ces liaisons que nous avons sélectionnées. Au lieu de cela, nous pouvons y parvenir en utilisant des cases à cocher. Passons au fichier TextOutput.vue. Nous pouvons les ajouter juste en dessous de la section d'alignement de texte, qui est juste au-dessus de la balise de formulaire de fermeture. Commençons par créer notre div. Ajoutons quelques classes à ce div environnant. La première classe sera tout form-check, et aussi form-check-inline. Nous pouvons également ajouter notre étiquette. Je vais juste ajouter quelques classes à cela de form-check-label, je vais ajouter notre entrée. Rappelez-vous que ce sera le type de case à cocher, et nous allons également ajouter quelques classes pour rendre agréable les entrées form-check-, et toutes ces surfaces Boucher. Juste après l'entrée, nous allons ajouter le nom des bolds. Il s'agit d'un texte qui apparaîtra juste à côté de la case à cocher. C' est un pour gras, nous avons aussi besoin d'un pour italique. Copiez cette div complète, puis le rythme juste en dessous. Nous pouvons utiliser les mêmes classes, form-check-inline pour l'entrée. C' est aussi une case à cocher, mais avec le nom de Italic. Les cases à cocher fonctionnent un peu différemment des liaisons radio. Avant avec les liaisons radio, nous définissons notre propriété de données avec une valeur particulière telle que gauche ou droite. Les cases à cocher renverront une valeur booléenne de true ou false lorsqu'elles sont cochées ou désactivées. Si nous allons à notre texte qui a l'objet de style lié, ce qui est juste ici. Nous pouvons utiliser ces ensembles de valeurs vraies ou fausses ou sur place une classe CSS, qui se liera. La première configuration des propriétés de date pour gras, italique. Les deux seront initialement définis sur false. Le texte est standard pour commencer. Descendez aux données, et ajoutons une virgule. Le premier est ce que nous avons appelé setBold avec une valeur initiale de false. Ensuite, ajoutez une virgule à la fin, et nous pouvons définir, setItaLic aussi à la valeur initiale de false. Ensuite, nous pouvons utiliser le modèle pour lier ces données aux cases à cocher. Revenez aux cases à cocher. Ajoutons le modèle de vue à l'entrée pour configurer la liaison de données bidirectionnelle. Ce premier sera les données SetBold. Ensuite, bien sûr, les deuxièmes entrées pour italique, nous allons définir ceci pour être setItaLic. Nous pouvons vérifier si ces données sont modifiées lors du suivi en sortant la valeur dans les accolades. Juste après le texte italique, je vais mettre en place les accolades doubles. Le second est mis en italique. Je ferai la même chose pour SetBold. Maintenant eu sur le navigateur, et si vous passez le curseur sur notre menu, nous voyons un extra gras et italique, nous avons les valeurs initiales de faux. D' abord, vérifions en gras. Bon début change à true, puis retour false et aussi le travail italique aussi. Cela signifie que la propriété data est en cours de mise à jour avec le modèle vue. Nous pouvons maintenant voir que les cases à cocher définissent correctement nos données. Commencez à déplacer les accolades tout d'abord, certains des setBold, et aussi setItaLic. Ensuite, nous pouvons utiliser cette valeur booléenne pour se lier à nos classes. Tout comme je l'ai mentionné précédemment, si nous descendons au texte P, qui a actuellement les liaisons de style, nous pouvons également ajouter un second attribut pour lier la classe. Cela va aussi être un objet. À l'intérieur de cet objet, nous allons ajouter la première propriété de bold. Ce sera notre propriété de données de setBold et séparée par une virgule. Nous ferons aussi la même chose pour italique. C' est notre propriété de dates fixes à l'intérieur. Lorsque la valeur en gras est vraie, vous appliquerez la classe en gras. Lorsque la valeur italique est définie sur true, elle définira la classe italique. Maintenant, nous avons juste besoin de définir nos classes en gras et en italique à l'intérieur du CSS et alors nous devrions être faits. Faites défiler jusqu'aux styles. Nous commencerons par la classe audacieuse. Je veux faire ici est de définir le poids de la police pour être gras, et aussi la même chose pour un italique, était au style de forme cette fois pour être italique. Enregistrez, puis dirigez-vous vers le navigateur, puis passez le curseur sur le menu. En fait, d'abord, nous allons ajouter du texte. Vous pouvez voir les styles appliqués. la souris sur le menu, et commençons par gras. Bien. Nous pouvons voir que le texte passe entre gras et standard. Essayons l'italique. Bien, les styles s'appliquent maintenant dans le texte. Si vous ouvrez les outils div, nous faisons un clic droit et inspectons, puis sélectionnons le texte de sortie. Maintenant, si cochez en gras. Nous pouvons maintenant voir que la classe de gras a été appliquée dans les outils de développement. Faisons la même chose pour italique, puis nous voyons la classe de application gras et italique et une fois qu'il est ajouté comme un attribut, ces styles gras et italique prennent alors effet. Il ne reste qu'à ajouter un peu plus de style. Principalement pour vous assurer qu'une fois que vous passez le curseur sur le menu, il ne pousse pas ce texte si. Nous voulions réellement apparaître sur le texte si plutôt que de le pousser vers le bas comme il le fait probablement. Revenons aux styles. Je vais le faire avec le formulaire. Nous allons définir la position pour être absolue. Nous allons ajouter une bordure juste en bas et je veux définir ceci pour être un pixel pointillé et une couleur grise. Je vais ajouter une marge au sommet des 10 pixels. Un peu au bas de cinq pixels, puis aussi un peu de Padian juste en bas. Aussi cinq pixels. Tenez-nous loin du bord. Juste pour terminer cela, je vais ajouter juste un peu de style à la boîte de sélection. Tout ce que vous voulez faire est de fixer la hauteur à 40 pour cent, juste pour le rendre un peu mieux adapté. Donnez ça une sauvegarde. Maintenant, voyons à quoi ça ressemble dans le navigateur ? Bien. Maintenant, lorsque je survole le menu, nous voyons que le conteneur de texte n'est plus poussé vers le bas. Le menu se trouve maintenant bien sur le dessus de la div. Je vais voir comment regardons avec quelques textes. Bien que cela fonctionne bien évidemment. Notre menu de vol stationnaire est maintenant terminé. Nous pouvons maintenant passer à l'ajout de quelques touches de finition à nos composants d'image. 76. Supprimer le bouton d'image: Dans les prochaines vidéos, je vais ajouter quelques fonctionnalités supplémentaires pour terminer nos composants d'image. Pour commencer, je veux ajouter un bouton qui apparaît lorsque l'utilisateur survole l'image pour permettre la suppression de l'image. Une fois que vous déplacez ceci, nous définirons une image d'espace réservé par défaut sur la carte. Passez au fichier image output.vue. Nous pouvons ajouter un bouton avec un style bootstrap. Juste après la div d'ouverture initiale, je vais ajouter un bouton à l'intérieur d'ici avec le texte de supprimer l'image. Ensuite, à l'intérieur de la balise de bouton d'ouverture, va ajouter quelques attributs, va commencer par le type et définir ce sera bouton. Ensuite, quelques classes de bootstrap pour appliquer un style. Tout d'abord, BTN puis BTN contour danger et cela ajoute une bordure rouge au bouton. Puis enfin BTN-SM, pour rendre le bouton un peu plus petit. Aussi, tout comme les options de texte, je vais ajouter visuel, pour afficher uniquement le menu sur le survol. À l'intérieur ici, je vais créer une option de date appelée show options, puis passons à notre instance de vue et créons ceci. Juste en dessous des accessoires, nous pouvons ajouter notre section de données. N' oubliez pas d'ajouter le coma juste après. Ensuite, nous pouvons retourner nos données. La propriété data que nous avons créée s'appelait show options et c'est initialement définit show options pour être false. Ensuite, nous pouvons définir ceci sur true une fois que l'utilisateur survolera l'image. Nous le faisons en ajoutant quelques événements de souris. Revenons au modèle et ajoutons un mouseover, un événement de congé de souris. Je vais ajouter ceci dans la div d'ouverture, juste après l'objet de style lié.. Nous commencerons par mouseover. Lorsque l'utilisateur ajoute la souris sur l'image environnante, div, nous allons alors définir les options show pour être true et cela déclenchera alors V Show et activer le bouton pour afficher. Nous allons ensuite ajouter le congé de la souris à travers l'opposé une fois que la souris est éloignée du conteneur d'image. Cette fois, les options d'affichage sont définies sur false. Donc, disons cela et nous pouvons tester cela fonctionne correctement dans le navigateur. Maintenant, déplacez la souris sur la section de l'image et nous voyons que le bouton s'est affiché. Ensuite, si nous éloignons la souris, le bouton est désactivé. Enfin, pour vous assurer que le bouton se trouve au-dessus de l'image plutôt que derrière elle. Nous pouvons également mettre en place quelques CSS. Donc revenez au fichier supérieur de l'image. Nous pouvons le faire dans la section style en bas. Nous pouvons ajouter quelques styles au bouton. Tout d'abord, nous allons définir la position pour être absolue, puis l'index Z pour être une valeur de un, pour permettre au bouton de s'asseoir au-dessus de l'image. Pareil, nous suffit de vérifier cela dans le navigateur. Ça a toujours l'air bien. Avec notre bouton maintenant en place, nous pouvons l'utiliser dans la vidéo suivante pour supprimer l'image. 77. Passer des données avec des callbacks: Nous avons déjà examiné la communication des composants parents-enfants. Nous savons qu'un parent transmet des données à un enfant via des accessoires, et aussi qu'un enfant transmet des données au parent avec un événement personnalisé. Il y a aussi une alternative, dont nous voulons vous faire prendre conscience, et c'est en utilisant des fonctions de rappel. Je vais le démontrer avec un bouton qui a été ajouté dans la dernière vidéo. Cela fonctionne un peu différemment de l'émission d'événements personnalisés. Cette fois, nous devons ajouter la fonctionnalité à l'intérieur des composants parents, donc, nous devons créer une méthode d'image claire à l'intérieur de Cardfront.Vue, donc, passons à la CardFront, puis ouvrons cela, et puis nous pouvons descendre à la section de méthode. En fait, nous devons créer cela. Je vais juste ajouter ceci après la section de données, donc, ajoutez ceci là-dedans avec la virgule à séparer. Je vais ajouter la méthode de ClearImage, et cela bien sûr, sera utilisé pour supprimer l'image de l'écran. Lorsque nous arrivons à déclencher cette méthode, nous voulons qu'elle remplace l'image actuelle par une image d'espace réservé par défaut, donc, la carte n'a pas l'air si mauvaise. Vous pouvez utiliser une image existante que vous avez déjà dans une Firebase, ou vous pouvez en ajouter une nouvelle. Je vais passer à la console Firebase et ajouter une image par défaut, donc, ouvrez la console Firebase, puis ouvrez notre application, sélectionnez Stockage, et il y a les téléchargements de nos utilisateurs. Pour le moment, je viens d'avoir l'image beach.jpg à l'intérieur. Je vais aller plus pour télécharger le fichier et sélectionner le fichier à partir de mon bureau, donc, je vais sélectionner celui-ci avec le nom de Sea. Maintenant, je vais copier le nom de cette image, donc, copiez le nom de celle-ci sur celle que vous venez de télécharger, ou une image existante qui est de votre liste, et maintenant nous pouvons utiliser ce nom pour définir notre propriété de date de nom d'image. Pour ce faire, nous sélectionnons ceci avec this.imageName, qui est cette valeur juste ici, et maintenant je vais définir ceci à une valeur de chaîne du nom de l'image. Avec cette configuration, nous pouvons maintenant le transmettre en tant qu'accessoire aux composants enfants ImageOutput. faisant défiler vers le haut, nous pouvons chercher la sortie cc-image-, qui est juste ici, et maintenant nous pouvons ajouter un troisième accessoire. N' oubliez pas d'utiliser le deux-points, et appelez ceci ClearImageProp, et cela sera égal à ClearImage, qui est le nom de la méthode que vous venez de configurer ici. Ensuite, dans le fichier ImageOutput, nous pouvons maintenant ajouter ceci à notre liste d'accessoires, alors, allez dans ImageOutput.vue, puis dans la section script, nous allons localiser les accessoires. Nous allons configurer cela comme une fonction validée et nous pouvons l'ajouter à la fin, juste après ContainerHeight. Le nom de l'accessoire était ClearImageProp. Nous allons définir ce type de fonction, puis pour déclencher cette fonction à partir de ce composant enfant, nous pouvons l'appeler avec un écouteur de clic sur le bouton, donc, faites défiler jusqu'au bouton à l'intérieur des modèles. Ensuite, juste après v-show, nous allons également ajouter un écouteur de clic, puis à l'intérieur, nous pouvons ajouter le nom de ClearImageProp et donner à cela une sauvegarde. Maintenant, si nous allons sur le navigateur, et puis ouvrir notre projet. Vérifions si ça marche. Si nous téléchargeons notre image de plage puis cliquez sur ouvrir, puis définissez ceci. Maintenant, si je passe la souris sur et sélectionnez le bouton, vous devriez alors déclencher cette méthode de rappel pour ensuite définir la nouvelle image par défaut avec le nom que vous lui avez passé, qui était juste ici. Avant de terminer cette vidéo, il y a une autre chose à considérer. Nous ne voulons définir cette image par défaut que si l'utilisateur a déjà ajouté le leur. Si nous avons un écran vide, nous ne voulons pas autoriser l'utilisateur à cliquer sur Supprimer. Tout ce que nous devons faire pour couvrir ce cas, est d'ajouter si des instructions à l'intérieur de la méthode, pour vérifier si les données du nom de l'image ne sont pas vides. Retour dans le CardFront, si vous allez à la méthode d'image claire, juste au-dessus de cela, nous pouvons ajouter une instruction if. Donc, si this.imageName n'est pas égal à une chaîne vide, donc en d'autres termes, s'il y a une image présente, alors nous pouvons aller de l'avant et définir this.imageName pour être ce nom par défaut que nous venons de passer. Essayons ça. Si nous actualisons, et maintenant si nous cliquons sur le bouton Supprimer, nous voyons qu'aucune image n'est en cours de téléchargement. Il s'agit d'une autre façon de communiquer entre les composants. Nous avons toujours le problème de nos images qui ne s'intègrent pas correctement dans le conteneur. Nous corrigerons cela dans la vidéo suivante et rendrons également les images draggables, sorte que l'utilisateur peut les déplacer là où il veut qu'elles apparaissent. 78. Rendre les images déplaçables: Toutes les fonctionnalités d'image sont presque en place maintenant. L' un des problèmes, comme nous l'avons mentionné, est que si vous téléchargez une image, qui est plus grande ou plus petite que le conteneur Cal, elle n'a pas l'air trop grande. Nous pouvons ajouter jQuery dans notre application, pour rendre notre image facilement draggable, par l'utilisateur. Si vous n'êtes pas familier avec jQuery, c'est une bibliothèque JavaScript qui nous permet d' ajouter facilement des fonctionnalités, telles que la manipulation DOM, animations et la gestion des événements, pour n'en nommer que quelques-unes. En plus de cela, il y a aussi la bibliothèque d'interface utilisateur jQuery, qui ajoute des fonctionnalités d'interface utilisateur, telles que des effets et des interactions. Ce sera la bibliothèque qui nous donne la fonctionnalité draggable. Commençons par lier notre projet à jQuery. Je suis allé à Google, je suis allé chercher le JQuery Google CDN. Celui dont nous avons besoin, c'est ces bibliothèques hébergées, donc je vais cliquer dessus. Ici, à partir du menu à droite, nous devons d'abord saisir le rappel jQuery, nous cliquons sur la bande jQuery. Je vais copier la dernière version gratuitement, et l'ajouter au, /index.html. Nous allons copier les balises de script pour la version trois, puis passer au /index.html, et nous pouvons les ajouter juste après les polices Google. Coller j'entre. Ensuite, nous pouvons sélectionner le lien de l'interface utilisateur jQuery. Cliquez sur l'interface utilisateur jQuery, afin que les émoticônes copient le script et non les feuilles de style. Copiez la section de script de l'ouverture à la balise de fermeture, puis collez-le, juste soufflé le jQuery, rappelez-vous. Ceci est important, il doit être placé sous le rappel jQuery, pour que cela fonctionne, correct. Donnez-leur une sauvegarde, puis si nous passons aux composants de sortie d'image, nous pouvons configurer cela. Faites défiler jusqu'au bas du script, recherchez la balise de script de fermeture et assurez-vous que ce code est en dehors de l'incidence JS de vue. Sous seulement le code JS de vue, je vais ajouter une fonction JavaScript appelée, SetDraggable. C' est juste du JavaScript simple. Dans cette fonction, nous avons besoin de saisir l'image que nous voulons faire glisser, par son ID, de sorte que l'image a un ID de sortie image, que vous pouvez voir juste ici. Revenons à notre fonction. Dans un corps de fonction, nous pouvons utiliser le symbole $. Nous utilisons ce symbole $ dans jQuery, pour sélectionner un élément, plutôt que lors de l'utilisation de JavaScript vanille, tel que document.getElementById. A l'intérieur des crochets, nous pouvons ajouter ceci comme une chaîne, sorte que vous voyez '#' parce que c'est un ID, et l'ID était l'image de sortie. Nous ajoutons ensuite /.draggable aux éléments sélectionnés. Il ne reste plus qu'à appeler la fonction setDraggable, là où nous en avons besoin. Je vais ajouter cet appel de fonction, à l'intérieur de l'afficheur image-watcher, juste après la Source d'image. Si nous faisons défiler jusqu'à l'image d'affichage, et ceci est à l'intérieur de la section de la montre. Juste en dessous de la source d'image, nous pouvons ajouter cet appel à la fonction, de setDraggable. C' est notre fonctionnalité déplaçable maintenant configurée. Voyons si cela fonctionne bien dans le navigateur. Donnez que sauver sur sa tête sur Chrome, les projets de codes à barres, puis nous devons sélectionner une image, puis cliquez sur Définir l'image. Une fois qu'il se charge, nous essayons de cliquer sur l'image que vous pouvez maintenant, faites glisser l'image autour de la section, et nous allons terminer cela avec un morceau de CSS. Si nous revenons aux composants supérieurs de l'image, et faites défiler juste en dessous du bouton, sélectionnez l'image, et puis tout ce que vous voulez faire, est de définir la largeur de l'image à un 130 pour cent. Cela fait de l'image un 130 pour cent du conteneur, et je l'ai ajouté pour deux raisons. abord, il traite du problème des images qui sont beaucoup plus grandes, ou beaucoup plus petites que le conteneur. Deuxièmement, en rendant l'image un peu plus grande, que le conteneur. Il donne à l'utilisateur une certaine liberté supplémentaire lorsque vous faites glisser l'image autour. Ceci est maintenant fait avec les composants image et texte, nous pouvons maintenant aller de l'avant et les ajouter au reste de la carte. 79. Finir le composant CardInsideLeft: La transaction par carte sur laquelle nous avons travaillé jusqu'à présent est maintenant terminée. Nous pouvons maintenant réutiliser un texte et des composants d'image pour assembler les différents côtés de la carte en commençant par l'intérieur gauche. L' intérieur gauche est une section simple qui a une entrée de texte et une sortie de texte pleine hauteur afin que l'utilisateur puisse ajouter un bloc de texte dans la carte à l'intérieur du fichier gauche. À l'intérieur de la section actuelle, tout ce que nous avons jusqu'à présent est les conteneurs et certaines classes. Parce que nous utilisons les composants d'entrée et de sortie de texte, nous pouvons commencer par les importer afin de pouvoir les utiliser dans ce fichier. Dans le script, nous pouvons ajouter notre importation. Le premier est les entrées de texte et le fichier bouffée est. /textInputs.vue. Nous pouvons également faire la même chose pour les sorties de texte. Importez la sortie de texte. Les éléments constitutifs sont les mêmes que avant de la carte afin que nous puissions copier et coller cela dans nos plaques intérieures de la main gauche. Rendez-vous à l'avant de la carte, puis jusqu'aux modèles. Tout d'abord, je vais sélectionner les entrées cc-text-et ensuite amener cela à la carte à l'intérieur gauche. Nous pouvons maintenant supprimer le texte du haut, puis coller dans les entrées cc-text-. Nous pouvons également faire la même chose avec la sortie de texte, alors copiez ceci à partir du devant de la carte. Je vais copier ce premier, puis ajouter ceci à l'intérieur du côté d'affichage de la carte. Les composants de sortie seront la hauteur de la carte, qui est de 800 pixels. Je vais régler la hauteur du conteneur à 750. Tout cela peut permettre un peu de podium. Maintenant, il y a les données à ajouter pour nos valeurs de zone de texte. Nous n'avons qu'une seule entrée de texte, donc la seule propriété de données que nous avons besoin d'ajouter est la valeur de la zone de texte 1. Il suffit de faire sauter les importations, nous pouvons configurer nos données. Ajoutons la valeur par défaut d'exportation, puis nos données. Nous allons retourner la valeur de la zone de texte 1. Tout comme nous l'avons fait précédemment, nous allons définir ceci sur une valeur initiale d'une chaîne vide. Ensuite, nous devons également enregistrer nos composants pour les rendre disponibles dans ce fichier, donc juste en dessous des données, ajouter des virgules et ensuite nous pouvons ajouter nos composants. Nous devons ajouter les entrées de texte cc, puis ajouter une virgule. Nous pouvons également faire la même chose pour les sorties de texte cc, et enregistrer cela. Ouvrons maintenant cela dans le navigateur et voyons à quoi il ressemble. Si nous passons à l'intérieur à gauche, nous pouvons voir que nous avons nos composants de texte sur la gauche, et nous pouvons voir que nous avons la bordure pointillée pour les sorties sur la droite. Certains des styles sont manquants, donc nous pouvons avoir besoin de passer à l'avant de la carte , puis descendre aux styles et supprimer la section de portée. Cela s'applique alors à toutes les sections en cours mais à l'intérieur de gauche. Maintenant, nous pouvons voir que nous avons les mêmes styles que le front. On dirait que tout fonctionne bien, nous avons juste besoin de taper des textes. Nous pouvons voir tout apparaissant sur la section de sortie. Si le vôtre ressemble à ceci, nous sommes maintenant prêts à passer à l'intérieur de la section droite. 80. Finir le composant CardInsideRight: Maintenant, nous allons passer à l'intérieur droit de la carte. Cela devrait être assez simple, car nous avons déjà fait la plupart du travail. Nous avons juste besoin d'ajouter les trois entrées de texte et les composants de sortie pour rendre cela ouvert comme nous pouvons le voir ici. C' est à peu près une répétition de l'intérieur gauche, mais nous devons ajouter trois composants et aussi trois propriétés de date aussi. Allons à la carte à l'intérieur à droite. Actuellement, nous avons juste le texte de la carte à l'intérieur droit. Je vais aller à la section interne gauche, que nous avons ajouté dans la dernière vidéo, « Commande » ou « Control A » pour copier tout et ensuite aller dans l'intérieur droit et puis coller ceci à la place des données actuelles et puis nous pouvons dupliquez l'entrée de texte deux fois de plus, alors copiez-le et collez-le deux fois de plus. La seule différence est que nous avons besoin du TextBox pour être valeur2 puis valeur3. En outre, la même chose pour le TextOutput, est arrivé à « Copier », puis coller cela dans deux fois de plus, changeant la valeur TextBox pour être un, deux, puis trois. Ensuite, je vais définir le containerHeight à la hauteur de 240, donc tous les trois peuvent tenir sur la carte, puis maintenant jusqu'aux données, nous avons déjà nos composants d'entrée et de sortie de texte. Ceux-ci sont tous les deux importés, donc c'est bien, mais j'ai besoin de retourner un TextBoxValue2 et aussi trois. Nous avons déjà les composants configurés, donc tout ce que nous avons à faire est d'enregistrer et de voir à quoi il ressemble dans le navigateur. C'est l'avant. Passez à l'intérieur à droite, donc nous avons les trois composants, donc la case 1, case 2 et la case 3 et nous pouvons également voir une fois que vous passez le curseur sur les trois, ils auront toujours le menu individuel pour chacun d'eux. Étant donné que ceux-ci ont la propre propriété dates, ceux-ci fonctionnent tous indépendamment, sorte que les options de menu ne s'appliquent qu'à la section. C' est maintenant l'avant de la carte, l'intérieur gauche et l'intérieur droit terminé, ce qui nous laisse avec juste un dos à compléter et nous allons le faire dans la prochaine vidéo. 81. Finir le composant CardBack: Nous arrivons maintenant à la fin du projet, si bien fait pour aller aussi loin. Le dos est le dernier côté de la carte que nous devons finir, et il ressemblera à ceci. Encore une fois, cela devrait être simple parce que nous avons déjà terminé les composants qui composent cela. Nous devons ajouter le téléchargement d'image et les sorties, puis juste un logo de copyright simple pour terminer les choses. Ce sera une bonne chance de donner à cela un coup par vous-même en ajoutant le téléchargement d'image, puis les composants supérieurs. Rappelez-vous juste que celui-ci a besoin d'une méthode de rappel aussi pour effacer l'image comme nous l'avons utilisé dans les composants avant de la carte. Passons aux composants de l'arrière de la carte. Sélectionnez cela. Tout ce que nous avons en ce moment, c'est le texte de la carte de retour. Je vais supprimer tout le contenu, puis aller à l'avant de la carte, sélectionner tout et copier, puis ajouter ceci à l'intérieur du dos de la carte. Rappelez-vous que les styles ne sont plus étendus, nous pouvons donc les supprimer, à moins qu'ils ne s'appliquent toujours. Nous n'avons pas de texte dans la section, donc seulement le téléchargement de l'image et la sortie de l'image. Nous pouvons supprimer les deux premiers composants. Nous allons utiliser cette méthode d'image claire, de sorte que nous pouvons laisser cela dans. Ensuite, ouvrez la section données, nous avons seulement besoin du nom de l'image parce que nous ne travaillons pas avec aucune des valeurs des manuels scolaires. Nous pouvons également supprimer les importations pour les entrées de texte, ainsi que pour la sortie de texte, puis travailler sur nos modèles. Nous avons besoin d'un téléchargement d'image CC, que nous avons déjà, afin que nous puissions supprimer les entrées de texte libre, donc celle d'en haut, puis deux d'en bas. La même chose pour les sorties, nous pouvons déplacer les sorties de texte d' haut et les deux sorties d'en bas. Maintenant, nous avons seulement le téléchargement de l'image, puis les sorties de l'image sur le côté droit. On va utiliser la hauteur des conteneurs, et cette fois je vais régler ça à 400. Nous avons toujours besoin de l'accessoire d'image claire, car nous allons l'utiliser pour supprimer l'image, puis déclencher la méthode pour définir l'image par défaut, qui est ici. Quand tout cela a été fait, nous allons frapper notre sauvegarde et voir à quoi il ressemble. Allez à l'arrière de la carte, choisissez un fichier, puis définissez l'image. Bien, ça marche. Nous avons également la possibilité de faire glisser l'image. Ensuite, essayons de supprimer une image. Super. C'est notre image par défaut qui fonctionne avec le dos de la carte. Maintenant, cela fonctionne, c'est la dernière section à être complétée. Nous avons maintenant toutes les sections de notre carte qui fonctionnent. Je te vois dans la prochaine vidéo. Nous allons jeter un coup d'oeil à l'événement boost. 82. Introduction au bus d'événement: Lorsque nous examinons les composants de ces dernières sections, nous avons examiné comment les composants parent-enfant peuvent communiquer. Nous savons que nous transmettons des données de l'enfant aux parents avec des événements personnalisés. En outre, nous savons que nous transmettons les données des parents à l'enfant à l'aide d'accessoires. Cela fonctionne bien si les composants qui doivent communiquer, ne sont qu'à un niveau d'écart comme jusqu'à présent dans notre application. Par exemple, les composants d'entrée de texte et de sortie sont des enfants directs du front de carte. Cela rend la communication facile à atteindre. Cependant, il y a souvent des circonstances où les composants sont imbriqués deux niveaux ou plus séparés et ont besoin de communiquer. Ceci est courant que notre application grandit. Si vous considérez une application qui a une structure comme celle-ci, les deux composants en bas, n' ont aucun composant parent direct pour transmettre des données entre. Il est possible de continuer à passer les événements dans la chaîne, revenir au niveau supérieur et de passer les accessoires tout le chemin bas pour cela peut rapidement devenir désordonné et inmaintenable. Pour faciliter cette communication, nous pouvons utiliser ce qu'on appelle un bus événementiel. Un bus d'événements n'est rien de plus qu'une instance de vue vide, nous utilisons comme source de données centrale. Nous importons ceci dans n'importe quel fichier de composant où nous voulons l'utiliser. Cela sera utile pour la prochaine fonctionnalité que nous ajoutons à notre application. À l'intérieur des quatre vues de carte, je vais ajouter une case à cocher pour marquer cette section comme terminée, puis cela passera des données à l'en-tête pour mettre à jour une barre de progression. Comme nous l'avons vu dans la dernière diapositive, ces deux composants ne partagent pas de composants parents communs pour transmettre des données entre. La barre de progression est enfant à l'en-tête, et la case à cocher est enfant aux sections de la carte donc, le bus d'événement est idéal pour son service. Je vais ajouter ce bus d'événement ou cette instance de vue à notre fichier main.js. Rendez-vous au main.js, et nous devons nous assurer que nous ajoutons ceci avant la fonction de rendu. Juste en dessous des importations, nous allons exporter une constante appelée bus d'événements, et nous allons définir ceci sur une nouvelle instance de vue. Cela va exporter une constante appelée bus d'événement donc, nous pouvons maintenant les importer dans n'importe quel fichier que nous voulons y accéder en utilisant le nom du bus d'événement que nous lui avons déjà donné. Cette case à cocher sera un nouveau fichier de composants afin que nous puissions l'ajouter aux sections de prévision. Nous pouvons aller de l'avant et créer cela de la manière habituelle. Alors passez aux composants, puis à l'intérieur de la carte, je vais créer un nouveau fichier appelé sectionCompleted.Vue, alors nous pouvons ajouter la section de modèle avec la case à cocher et aussi le texte. Ajoutez nos modèles en haut. Pour commencer, je vais ajouter une ligne de magasin de bus environnante. Donc, dans la section d'ouverture, nous pouvons ajouter la classe de rangée, puis un deuxième nid div à l'intérieur et ce sera pour notre groupe de formulaires. Ajoutons quelques classes de boutique favorables de vérification de formulaire, et aussi de vérification de formulaire en ligne. Ce sont des styles que nous avons utilisés précédemment. Celles-ci correspondront au reste de l'application. Puis un div de plus à l'intérieur ici avec la classe de l'étiquette de vérification de formulaire. C' est la div environnante pour nos entrées. Les entrées auront un type de case à cocher, sorte que nous pouvons sélectionner une fois que la section actuelle a été modifiée, et qu'elle est terminée. Enfin, certaines classes d'entrée de vérification de formulaire. Après ici, nous pouvons ajouter notre texte de la section marque comme terminé. Pour commencer, je vais placer ceci à l'intérieur de la section avant de la carte. On peut l'ajouter au reste bientôt. Alors allez à la Cardfront.vue, et puis nous pouvons descendre au script et nous pouvons ajouter nos importations ou section terminée. Ceci est également dans le même dossier de carte, donc nous allons choisir. /sectionCompleted. Ensuite, nous pouvons enregistrer ceci comme un composant à l'intérieur l'instance et appelons la mine CCSectionCompleted, qui est le nom de la section terminée que nous avons donné à l'importation juste ici. Le composant est maintenant prêt à être ajouté aux modèles. Je vais ajouter ceci au bas de la section d'édition, donc faites défiler jusqu'aux modèles, et la section d'édition est cette première div ici. Juste en dessous de la dernière cc-text-input, nous pouvons ajouter notre cc-section-completed, et la balise de fermeture. Donnez ce coffre-fort et nous devrions maintenant être en mesure de démarrer les serveurs div et voir les composants. Le mien est déjà en cours d'exécution, donc je vais passer au navigateur, puis faire défiler vers le bas. Nous devrions maintenant voir que nous avons les composants sur l'écran. Nous aurons la case à cocher et le texte de la section Marquer comme terminé. La case à cocher apparaît hors de la liste de l'écran Jetons un coup d'oeil à la sectionCompleted. Couvrir ceci, donc l'étiquette de vérification du formulaire afin de changer cela. Super, donc c'était le problème là-bas. On a juste eu un problème de style. Maintenant, nous avons cette configuration de composant. Dans la vidéo suivante, nous allons l'utiliser pour émettre des données au bus d'événements. 83. Envoyer des événements au bus d'événement: Nous avons maintenant un SectionComplete composants et la configuration EventBus. Dans cette vidéo, nous allons importer l'EventBus dans les composants SectionComplete d'aujourd'hui, puis émettre un événement personnalisé sur l'EventBus. Commençons par importer le fichier EventBus. Donc, il suffit de souffler les modèles, je vais ajouter les balises de script. Tout d'abord, importons l'EventBus. Donc, c'est la syntaxe ES6. Ces accolades codées importent un seul membre d'un module, que nous nommons EventBus à partir du fichier main.JS. Donc, le chemin du fichier est../.. /main.js. Donc, plutôt que d'importer le contenu complet du JS principal, qui n'est pas ce que nous voulons. Nous voulons seulement importer cet EventBus, qui est cette exportation que nous avons faite ici. Maintenant, nous pouvons créer une propriété appelée Checked. Alors soufflez l'impulsion. Nous pouvons créer nos valeurs par défaut d'exportation, puis ajouter nos données de la manière habituelle. Nous allons donc créer une propriété de données appelée Checked, qui est initialement une chaîne vide. Ceci sera utilisé pour contenir une valeur vraie ou fausse de la case à cocher. Par conséquent, nous devons utiliser cela avec V-model comme attributs Checkbox. Alors ajoutons le modèle V à la Checkbox. Donc, à l'intérieur de l'entrée, nous pouvons ajouter V-model et définir ceci pour être notre valeur de données de vérifié. Cette case à cocher aura également besoin d'un gestionnaire de clics. Donc, ajoutons aussi cela dans. Donc, à Click et que vous voulez configurer un gestionnaire de clic, qui déclenche une méthode appelée Section terminée. Donc, une fois cliqué, cela déclenchera une méthode appelée Section terminée. J' utiliserai cette méthode pour communiquer avec l'EventBus. Alors maintenant, nous allons configurer cette méthode ci-dessous. Revenez donc à notre instance de vue. Ensuite, juste après les données, vous pouvez ajouter une virgule, puis configurer nos méthodes. Donc, nous appellerons cette section terminée. Donc, précédemment, nous avons émis des événements personnalisés en utilisant ceci. $ émet. Pour ce faire avec l'événement, nous utilisons EventBus. $ émet. Bien sûr, si vous nommez l'EventBus autre chose, vous devrez utiliser un nom que vous avez créé. Donc, l'EventBus. $ émet. Ensuite, comme avant, nous passons le nom que nous voulons donner à cet événement personnalisé à l'intérieur des citations. Donc, je vais appeler cet événement personnalisé Mark As Terminé. Ensuite, séparez-le par une virgule. Nous voulons envoyer la valeur des chèques. Donc, ajoutez this.checked. Ces composants doivent également être placés dans les sections de surfoule à. Allons-y et faisons-le maintenant. Nous devons importer, enregistrer et ajouter les composants dans les fichiers de modèle, comme nous l'avons fait dans CardFront.View. Nous allons donc simplement copier cette déclaration d'importation de Section terminée. Nous pouvons les ajouter dans la carte Inside Left. Ensuite, à cela comme un composant séparé par une virgule. Donc cc Section terminée, qui est Section terminée. Ensuite, nous pouvons ajouter cela à l'intérieur des modèles, comme nous l'avons fait avec CardFronts. Nous avons donc fait cela au bas de la zone d'édition. Alors faisons la même chose pour Inside Left. Donc, juste en dessous des entrées de texte, vous pouvez ajouter la section cc terminée. Idem pour l'Inside Right qui accélère l'importation, enregistrez les composants puis ceci dans le modèle à nouveau sous toutes les entrées de texte. Ce sont les fronts Inside Left et Inside Droite, qui laisse juste le Cardback.Vue. Donc, le rythme de l'importation et nous ferons exactement la même chose. Enregistrez les composants de la section cc Terminé. Ensuite, nous allons ajouter ceci dans la zone de l'éditeur, avec la balise de fermeture, puis appuyez sur Enregistrer. Ensuite, testons cela à l'intérieur du navigateur. Alors commençons par le front de la carte. Nous avons donc le composant qui s'affiche sur l'écran. A l'intérieur de gauche, on peut aussi le voir. L' intérieur droit a l'air bien aussi. Puis enfin le dos. C' est donc un composant maintenant terminé et envoyant des événements personnalisés à l'EventBus. Nous vérifierons que cela fonctionne dans la prochaine vidéo où nous créerons notre composant final pour ce projet, que nous utiliserons pour recevoir la valeur de cet événement de l'EventBus. 84. Recevoir des événements du bus d'événement: Nous avons maintenant envoyé des données au bus d'événements central à l'aide d'un signe dollar émet pour envoyer ces événements personnalisés. Maintenant, nous allons commencer par créer les derniers composants de ce projet, qui sera la section de progression à l'intérieur de l'en-tête. Ce composant utilisera également le bus d'événement, mais cette fois il écoutera l'événement et utilisera les données qui lui sont transmises. Comme toujours, nous commençons par créer le fichier de composant. Je vais appeler ce fichier le CardProgress.vue. Donc, dans le dossier de la carte, je vais ajouter un nouveau fichier de CardProgress.vue. Donc, ici, nous pouvons créer nos modèles habituels. Je vais écrire des balises, puis enfin je vais styler des balises. Dans le script, je vais créer une valeur par défaut d'exportation vide pour toutes les instances de vue, que nous reviendrons vers vous bientôt. Ce composant sera imbriqué dans le composant d'en-tête. Nous devons donc enregistrer ceci dans le fichier header.vue. Alors passons par ce fichier et nous pouvons commencer par importer ce nouveau fichier CardProgress. Donc, en haut des scripts, je vais ajouter notre importation de CardProgress. Donc, le chemin du fichier est. /, cela se trouve également dans le dossier de la carte. Donc CardProgress.vue, puis dans notre instance, nous pouvons enregistrer nos composants. Donc, juste en dessous du watcher, je vais ajouter un, puis ajouter nos composants. Donc, le seul composant que nous devons ajouter est ce fichier. Donc je vais appeler mon CCCardProgress. Donc maintenant, avec tous les fichiers importés et enregistrés, nous pouvons maintenant aller de l'avant et ajouter ceci à nos modèles. Juste en dessous des listes non ordonnées pour les liens de navigation, nous allons ajouter une ligne horizontale, puis en dessous, le CCCardProgress. Donc, comme toujours, cela nécessite une ouverture et la balise de fermeture. Donc, il est maintenant importé, enregistré et un modèle. Nous pouvons maintenant revenir au fichier cardprogress.vue et commencer à ajouter nos modèles. Je vais commencer par une div environnante, qui va être la div pour notre rangée. Donc, nous pouvons ajouter des classes bootstrap de ligne à l'intérieur ici. Puis un deuxième div, et ce div va contenir notre classe de col-sm-12. Donc, il s'agit d'un composant pleine largeur. Donc, le contenu de ce modèle sera assez simple. Tout ce que nous allons faire est d'ajouter une barre de progression, et aussi de compléter le texte, qui indique combien de sections ont été cochées, donc par exemple, 104 et 204. Ajoutons donc d'abord ce texte avec les balises P. Ici, nous allons ajouter les textes de complétée. Donc, par défaut, ce sera zéro ou quatre. La série sera dynamique. Cela doit être augmenté chaque fois que l'utilisateur clique sur la case à cocher. Donc, pour rendre cette dynamique. Nous pouvons ajouter ces balises de span avant et après le zéro, et ensuite nous pouvons changer le contenu entre ces balises, je vais ajouter un ID de compteur. C' est juste pour que nous puissions y accéder avec JavaScript plus tard dans cette vidéo. Ce composant accède au bus d'événement. Nous devons donc importer cela à l'intérieur des scripts. Donc, en haut des balises de script, nous allons importer le bus d'événements. Je vais le faire avec la syntaxe ES6 que nous avons examinée précédemment. Donc, cela va importer le membre unique du bus d'événement à partir du fichier main.js. Donc, pour accéder à ce fichier main.js, le chemin est../,../, le main.js. Donc, si vous vous souvenez dès le début de ce cours, nous avons regardé les crochets de cycle de vie vue. Un de ces crochets était le crochet créé, et nous pouvons utiliser ce crochet créé pour exécuter une fonction. Chacun des composants est créé. À l'intérieur de ce crochet, nous pouvons écouter un événement personnalisé sur l'instance de vue avec la méthode de signe dollar. Alors ajoutons ceci maintenant. Retour à la valeur par défaut d'exportation, nous pouvons ajouter le crochet créé. Dans ce crochet créé, nous pouvons accéder au bus d'événement, puis utiliser un dollar de connexion, méthode d' instance pour écouter un événement personnalisé. L' événement que nous voulons écouter est marqué comme terminé. Donc, cette marque comme événement terminé est celle qui est passée au bus de l'événement à partir de notre fichier de section terminé. Donc, nous juste ici, donc chaque fois que l'utilisateur clique sur la case à cocher, qui est la valeur booléenne de true ou false, ceci est ensuite émis dans le bus d'événement, et puis nous aurons accès à cela avec le fichier de progression de la carte. Donc, chaque fois qu'il y a un changement à cet événement, cela déclenchera alors une fonction. Cette fonction prend les données d'événement entre les parenthèses. Donc, je vais appeler ces données, et nous pouvons ensuite utiliser ces données à l'intérieur de notre corps de fonction. Donc, comme nous venons de le mentionner précédemment, la valeur transmise au bus d'événement est une valeur de case à cocher true ou false. Cela signifie que ces données qui nous sont publiées juste ici, seront soit vraies, soit fausses. Donc, peut ajouter une instruction if pour vérifier si les données sont vraies. Si c'est le cas, nous voulons incrémenter le compteur d'un à chaque fois. Ainsi, nous pouvons accéder au compteur avec l'ID du compteur, qui est la balise span entourée de zéro. Nous pouvons donc y accéder avec documents.getElementsById. L' ID, bien sûr, est contre. Alors maintenant, nous avons sélectionné ce compteur. Nous voulons accéder au texte intérieur. Nous voulons donc augmenter zéro d'un à chaque fois. Nous pouvons facilement le faire avec point dans un texte, plus. Donc, si les données à l'intérieur sont vraies, le nombre sera augmenté d'un à chaque fois. Donc, donnons cela une sauvegarde et vérifions cela dans le navigateur. Alors passez au navigateur, et puis si nous sélectionnons la section marquer comme terminée, nous voyons maintenant que nous avons la valeur d'un ou quatre. Pour aller à une deuxième section et prendre un maintenant dire deux ou quatre, puis libre, puis enfin quatre à quatre. Donc, nous pouvons voir si vous continuez à cliquer sur la case à cocher, la valeur continue de monter et de monter. Nous devons alors nous assurer que si l'utilisateur décoche la case, que la valeur est réduite d'un aussi. Donc, nous pouvons facilement le faire à l'intérieur d'une autre déclarations. Donc juste après l'instruction if, nous pouvons également ajouter d'autres, et puis je vais juste copier this.getElementById basé dans où nous allons également sélectionner le compteur. Mais cette fois-ci, nous allons décrémenter d'un à chaque clic, alors sauvegardez ça, et maintenant si nous passons et actualisons, commençons par l'avant. Donc maintenant nous en voyons un, l'aperçu à gauche, maintenant nous en voyons deux, puis cliquez à nouveau, et maintenant il réduit à un. Essayons simplement cela avec un composant de plus, donc deux, puis revenons à un. Alors que tout semble bien fonctionner. Donc, la dernière chose à faire est maintenant augmenter et diminuer la barre de progression pour donner à l'utilisateur une indication visuelle. Donc, ont déjà la plupart du temps configuré avec les instructions if-else. Donc, à l'intérieur des if-déclarations, je vais à nouveau coller dans ce documents.getElementById. Mais cette fois, nous voulons sélectionner la barre de progression. Nous allons donc ajouter la barre de progression juste en dessous de cette section terminée. Commençons par 0 pour cent. Donc, la valeur est initialement définie sur zéro, puis nous voulons que la valeur maximale soit égale à 100. Ensuite, afin que nous puissions augmenter cette valeur chaque fois que nous allons ajouter un ID de CardProgress, alors sauvegardez cela. Maintenant, nous pouvons utiliser cet ID CardProgress dans le document.getElementById. Donc, au lieu de sélectionner le compteur, nous allons coller dans CardProgress. Mais cette fois, nous voulons augmenter la valeur. Donc, cette valeur doit être augmentée de 25 à chaque fois. C' est parce que c'est un pourcentage, nous avons quatre sections. Donc, chaque fois qu'il est cliqué, il augmentera de 25 pour cent, donc plus est égal à 25 pour cent. Donc, je vais copier ceci, et coller ceci dans les else-statements. Mais cette fois, changez le plus à un négatif, puis enregistrez cela. Ensuite, allons au navigateur et donnez-nous un coup de pouce. Essayons donc de cliquer sur l'une des sections. Donc la marque est comme terminée, et maintenant nous voyons la barre de progression augmente. C' est essayer de bouger ça, et ça descend aussi. Essayons une autre section bien. Pour que tout semble en place, sorte que le texte terminé augmente et descend, nous voyons également la valeur de la barre de progression changer aussi. Une dernière chose à faire pour terminer ces composants est de faire de la barre de progression toute la largeur de la page. Cela peut être fait avec quelques CSS simple sur dans le fichier CardProgress.vue. Donc, passons aux balises de style et rendons cette portée. Ainsi, les styles ne s'appliqueraient qu'à cette section. Nous voulons cibler la barre de progression, puis définir la largeur pour être égale à 100 %. Alors voyons à quoi cela ressemble maintenant si nous actualisons le navigateur, ok bien. Nous voyons la barre de progression s'étend sur toute la largeur du conteneur. Alors testons ceci, alors nous allons cliquer sur la case à cocher. Essayons une seconde, tout a l'air bien, et une troisième, d'accord. Tout ça marche maintenant, alors félicitations. Vous avez maintenant utilisé avec succès le bus d'événements pour la communication non parent-enfant. 85. Ajouter des mixins: Comme notre application grandit, il peut parfois y avoir des situations où les composants devront réutiliser le même code. Habituellement, ce n'est pas une bonne pratique de répéter le même code plus d'une fois. À l'intérieur de notre application, si nous regardons le CardFront, alors allez à la CardFront.Vue, puis jusqu'au script. Ici, nous avons une nouvelle méthode appelée ClearImage. Aussi, si nous allons aux composants CardBack, nous avons aussi la même méthode répétée juste ici. Donc, répétez la même méthode ClearImage plus d'une fois. Pour aider avec ces périphériques vue.js avec des mixins. mixins sont un moyen plus simple de prendre n'importe quelle fonctionnalité de nos composants. Cela inclut tout ce qui est tel que nos données, nos méthodes et nos propriétés calculées et placés dans leur propre fichier séparé. Ce fichier peut ensuite être importé dans chaque composant qui a besoin d'y accéder. Créons ce fichier dans le dossier source. Je vais appeler ce fichier le ClearImageMixin, et il vient après l'extension the.js. Ensuite, nous pouvons l'exporter comme une constante appelée ClearImageMixin. Donc, exportez les constantes de ClearImageMixin, et vous pouvez appeler cela ce que vous voulez, mais je vais appeler ce ClearImageMixin car c'est descriptif valide. Maintenant, notre méthode ClearImage peut être appelée à partir de l'intérieur du fichier Cardback.vue. Alors allez à Cardback.vue et puis je vais appeler cette méthode complète, pas seulement la section ClearImage. Alors coupez la méthode complète jusqu'à là. Assurez-vous également de supprimer la virgule de fermeture. Ensuite, cette méthode peut maintenant être collée dans notre fichier mixin. Donc, revenez à ces objets et collez-le dans. à fait à l'esprit, nous pouvons également ajouter n'importe quoi d'autre de notre instance Vue ici, comme toutes les données et les propriétés calculées qui peuvent être liées. Cette constante a été exportée maintenant. Donc, nous pouvons maintenant revenir à la carte, les composants arrière, et important le nouveau mixin. Donc, revenons en haut du script, nous pouvons ajouter des instructions d'importation pour les trois premiers. Encore une fois, tout comme l'Eventbus, nous utilisons les accolades pour indiquer que nous voulons imposer un seul membre de ce module. Dans notre cas, le nom est ClearImageMixin et ensuite nous voulons importer cela à partir du chemin du fichier de../.. /ClearImageMixin. Maintenant, c'est importé. Nous pouvons maintenant mélanger cela avec le reste de notre code à l'intérieur de l'instance Vue. Donc, dans les valeurs par défaut d'exportation, nous pouvons également ajouter la propriété du mixin, et ceci est un tableau. Je suis sûr que c'est la virgule juste après pour séparer cela des données. Donc à l'intérieur, nous pouvons ajouter le nom de notre mixin qui était ClearImageMixin. C' est donc la méthode ClearImage ajoutée maintenant à nos composants. Rares sont ceux qui mélangent le contenu dans nos données existantes. S' il y a des clés en conflit à l'intérieur de l'objet à fusionner, les options des composants seront prioritaires. Nous pouvons diviser notre code en plus de mixins aussi. Nous ne sommes pas limités à utiliser seulement un matin. Le processus est le même que nous venons de le faire. Nous déplaçons le code dans son propre fichier, module d'importation, puis nous pouvons également ajouter le nom du mixin au tableau de ces mixin séparé par une virgule. Maintenant, nous avons juste besoin de faire la même chose dans notre code à partir du fichier. Nous allons également ajouter la méthode ClearImage. Enregistrez ce fichier et allez sur CardFront.vue. Donc nous ferons exactement la même chose. Nous devons supprimer la méthode complète de l'instance Vue. Nous devons ensuite importer le ClearImageMixin. Alors ajoutez-les au bas des importations, comme nous l'avons fait auparavant. Donc ClearImageMixin. Le chemin du fichier est le même, c'est../.. /ClearImageMixin. Ensuite, nous passons à nos valeurs par défaut d'exportation et ajoutons le tableau de notre mixin. Nous n'en avons qu'un, donc ClearImageMixin est la seule valeur à l'intérieur du tableau. Maintenant, nous pouvons nous diriger vers notre application et tester la méthode ClearImage si elle fonctionne à la fois à l'intérieur des composants CardFront et CardBack. Alors enregistrez ce fichier et allez sur le navigateur. Nous pouvons commencer à l'intérieur de la section CardFront. Choisissez un fichier, puis insérez l'image, et une fois qu'il télécharge, dirigez-vous vers l'image et cliquez sur la suppression. Bien. Alors que celui-là fonctionne encore. Nous allons également tester cela à l'intérieur du CardBack à partir de pressions trouveront à. Alors choisissez une image, ouvrez-la, définissez l'image, puis survolez et supprimez l'image. Super. Donc, tout fonctionne encore. Rappelez-vous donc que nous pouvons utiliser autant de mixins que vous le souhaitez dans notre application. Le mot garde à l'esprit si nous avons besoin d'utiliser le code à plus d'un endroit. mixins sont donc un bon moyen d'organiser nos projets et d'éviter toute répétition de code. 86. Section d'outro : composants suite et stockage Firebase: Félicitations pour avoir atteint la fin de cette section. Nous avons couvert beaucoup de choses dans cette section, y compris travailler avec Firebase, ajouter le menu d'options de texte, travailler avec des composants, et aussi des façons alternatives de transmettre des données entre eux. À l'heure actuelle, nous devrions également avoir une application de carte de vœux entièrement fonctionnelle remplie de fonctionnalités, et espérons que vous en avez beaucoup appris aussi. Vous avez maintenant beaucoup appris sur la création d'applications avec Vue.js. Maintenant, continuons à apprendre dans la section suivante. 87. Section d'intro : transitions et animations: Bienvenue dans cette toute nouvelle section. Nous allons prendre une pause en ajoutant de nouvelles fonctionnalités à notre application et aussi des composants pour examiner quelques façons de vraiment rendre notre application beaucoup plus agréable à utiliser. Cette section est consacrée à l'ajout de transitions et d'animations. C' est un excellent moyen de rendre vos applications beaucoup plus polies et d'améliorer vraiment l'expérience utilisateur. Nous espérons que vous attendrez avec impatience cette nouvelle section et je vous y verrai. 88. Cours de transition: Lorsque vous travaillez avec des transitions de congé d'entrée, il y a six classes qui sont appliquées à différentes étapes de la transition. Nous avons libre pour l'interface qui traite du début, fin et aussi de la phase active. Il en va de même pour la phase de départ, où nous avons également accès aux classes de départ, de départ, d'une activité. Pour comprendre ce que chacun d'entre eux fait, j'ai configuré une transition simple dessinée, qui définit l'opacité d'un élément ou d'un composant. Ici, nous avons l'interface et la transition commence dans la classe v-enter. À l'intérieur de cette classe, nous pouvons, par exemple, ajouter des classes CSS pour déclarer comment les éléments ou les composants commenceront à passer. Dans cet exemple, nos éléments commenceront comme transparents. Pour que nous puissions mettre l'opacité à zéro ici. Cela ne prend effet que pour la première image de la transition. Donc, ne l'utilisez que pour la phase de démarrage initiale. Après cette première phase, v-enter puis retiré, puis v-enter-to prend le relais. v-enter-to définit l'état de fin de la phase d'entrée. Par exemple, ici, nous pourrions définir l'opacité à un, puisque l'élément est maintenant inséré. Pendant l'interface complète, nous avons également accès à une autre classe appelée v-enter-active. Parce que cette interphase complète confortable, c'est un endroit idéal pour ajouter CSS pour définir la durée ou le retard de la transition. Ensuite, nous passons à la transition des congés. Ici, nous avons fondamentalement le même que les trois premières classes, révisées. Pour la première image de la transition de départ est déclenchée, nous définissons l'état initial avec v-leave. Tout comme l'interface est dure pour une trame, puis v-leave-to, est responsable de l'état final. Indécis lorsque v-leave est retiré après la première image. V-Leave-to est l'endroit où nous ajoutons l'état final pour la transition. Comme avant, la transition de départ a également une classe qui couvre le congé complet en phase appelée v-leave-active. Aussi, cela est idéal pour certaines choses telles que la durée de la transition. Ce sont donc les six classes auxquelles nous avons accès pendant la transition. Les noms de classe commencent tous par le préfixe v par défaut, lorsqu'ils sont utilisés avec les éléments de transition. Nous pouvons également ajouter un nom à cette transition, et ce nom remplacerait alors le préfixe v. Par exemple, si notre transition avait le nom de fondu, les classes seront appelées fade-enter, fade-enter-active et ainsi de suite. Mais ce sont des choses que nous examinerons plus en détail dans la prochaine vidéo. Nous commencerons à mettre cela en pratique. 89. Ajouter des transitions CSS: Retour dans les projets de voitures créatives pour commencer à mettre quelques transitions en pratique. Maintenant, nous avons vu les classes de transition que nous pouvons utiliser. La première technique que je veux vous montrer est d'appliquer une transition se référer à des éléments ou des composants. Je vais me diriger vers le fichier TextOutput.vue. Donc c'est comme le TextOutput.Vue. Je vais ajouter ce wrapper de transition autour des éléments de formulaire. Il s'agit du menu d'options qui apparaît lorsque vous parcourez le texte. Ceci est idéal pour ajouter une transition car actuellement, il ne montre et se cache que sans aucun type d'effets, tels que la décoloration et la décoloration. Donc, ce que nous avons besoin faire au-dessus de la forme de l'enveloppe de transition. Donc, l'ouverture est comme ça, puis vers le bas à la forme de fermeture, va fermer cette transition et donner à cela une sauvegarde. Attention cependant, les éléments de transition ne peuvent être utilisés que dans certains cas. Nous pouvons l'utiliser avec V, si de V montrer aussi nous composants, que nous allons regarder bientôt. Cette section de formulaire fonctionne avec V show. Donc, nous trouvons dans la dernière vidéo que nous avons mentionné nommer la transition. Pour fournir un nom, nous ajoutons ce nom à l'intérieur de la balise d'ouverture de transition. Alors revenez à la transition. Ouvrez la balise. La transition sera utilisée pour fondre le menu d'entrée et de sortie. Appelons ça fondu. Donc, nom égal à fondu. Ce nom de transition remplace le préfixe V en CSS. Alors mettons cela en place dans la section de style. Faites donc défiler vers le bas jusqu'aux balises de style en bas. Nous ne sommes pas ça juste après la sélection. Ici, nous pouvons ajouter toutes nos classes de transition. Commençons par fade-enter, fade-entrer-actif, fade-entrer-to, fade-leave. Les deux derniers sont fade-leave-active. Enfin, s'estomper. Ce fondu est le nom de la transition que nous avons donnée. C' est le remplacement du préfixe V que nous avons mentionné précédemment. Cela peut ressembler à beaucoup de choses qui se passent ici, mais nous ne pouvons pas simplifier les choses pour cet exemple. Donc, si nous regardons cet exemple d'avant, réponse V a la capacité de zéro. Toujours dans la transition de départ, v-leave-to a également la capacité de zéro. Donc, nous pouvons combiner ces Inside the CSS pour rendre les choses un peu plus simples. Donc, sur le dessus, nous avons Fade-Enter. Je vais également ajouter fade-leave-pour mettre cette section et entrer dans les accolades et leur demander de combiner cela avec la réponse fondu. Nous allons définir l'opacité comme nous l'avons vu dans l'exemple précédent. Ça va être zéro. Aussi v-enter-to et v-leave a la même opacité CSS d'un. Donc, nous pourrions aussi les combiner. Cependant, nous n'avons pas besoin de le faire. La raison en est que l'opacité CSS est définie sur un par défaut. Il n'est pas nécessaire de le déclarer à moins qu'il n'y ait quelque chose d'autre que les valeurs par défaut. L' opacité que nous avons définie à zéro sera supprimée après la première image, ce qui rétablira ensuite les valeurs par défaut. Cela signifie que nous pouvons supprimer v-enter-to. Aussi v-leave pour cet exemple. Retirons ces deux-là. Donc, cela nous laisse juste avec les classes actives pour les phases d'entrée et de sortie. Nous pouvons utiliser un certain temps que la transition prend pour apparaître et aussi pour supprimer. Ces deux classes peuvent également être combinées. Réglez le même temps de transition, maintenez-le même. Alors coupons celui-ci. Ensuite, ajoutons ceci juste là. Ensuite, ajoutons la transition à ces deux classes. Nous allons donc utiliser la propriété de transition CSS. Donc, nous voulons définir l'opacité d'une 0,5 seconde. Alors, donnez ça un coup de pouce. Maintenant, si nous passons au navigateur, et puis si nous survolons l'un des éléments, nous pouvons voir que le menu s'estompe bien d'une demi-seconde. Ça a l'air un peu plus beau qu'avant. Une autre chose que nous pouvons faire est que nous pouvons également déplacer le CSS pour cette transition de fondu de phase et l'ajouter dans le fichier de vue up-to comme un style global. Ils seront utiles si nous voulions ajouter le style fondu à tous les éléments. Passons au CSS. Si nous découpons les styles, enregistrez le fichier. Ensuite, si nous allons à l'app.vue, peut coller ces dans les styles globaux. Donc juste en bas, collez-les dans. Maintenant, si je survole le menu, nous pouvons voir que le phade s'applique toujours. Pendant que nous y sommes, nous pouvons également faire la même chose pour le bouton Supprimer l'image pour le rendre bien fondu dans et dehors. J' ai donc le fichier de sortie d'image et puis pour arrondir ce bouton, nous pouvons faire exactement la même chose. Nous pouvons ajouter le wrapper de transition, puis lui donner un nom de fondu. Ensuite, fermez ce wrapper. Juste comme ça et donnez ça un coup de pouce. Maintenant, si nous allons à l'application, nous pouvons maintenant voir que le bouton, ainsi que le menu, s'estompe bien et s'estompe. C' est donc un exemple simple d'une transition, mais cela fait vraiment une différence dans l'aspect et la sensation de notre application. Ensuite, nous allons examiner l'ajout d'animations INCSS. 90. Ajouter des animations CSS: Avec les transitions, nous avons également les options pour ajouter des animations. Les animations nous permettent de changer progressivement d'un style à l'autre. Nous pourrions progressivement changer un élément d'une couleur à l'autre. Pour cet exemple, je vais ajouter un effet d'échelle au bouton Supprimer l'image. Cela signifie qu'un bouton commencera petit, puis passera à pleine taille lorsque la souris survolera. Ensuite, lorsque la souris quitte le bouton va alors rétrécir la vue extérieure. Nous pouvons commencer de la même manière en utilisant le mappeur de transition. Accédez au fichier ImageOutput.vue. Ensuite, si nous cherchons le bouton pour supprimer l'image, qui est juste ici, je vais changer le nom de la transition pour être échelle. Pour l'animation, nous devons configurer la règle at keyframes. Nous avons besoin de configurer des images clés pour contrôler les étapes de l'animation CSS. Pour commencer, nous allons configurer les images clés pour la mise à l'échelle avant, puis la mise à l'échelle. En bas dans le CSS, juste en bas de la page, il suffit de souffler ce sélecteur d'image puis les images clés à. Je vais en créer un pour l'échelle, puis un second pour l'échelle, juste comme ça. C' est CSS standard, n'est pas spécifique à Vue. Ensuite, nous devons arrêter les étapes de l'animation. Pour garder les choses simples, je vais juste ajouter un début et une étape de fin. Si nous le voulions, nous pourrions même ajouter plus d'étapes à différents pourcentages pendant l'animation. Commençons par zéro pour cent, ce qui est le début. À zéro pour cent, je vais définir une transformation. Je vais transformer l'échelle pour commencer à zéro, puis en dessous nous allons définir la règle du 100 pour cent. Cela va encore être une transformation de l'échelle, mais cette fois-ci ce sera une. Cela configure les images lorsque l'animation est mise à l'échelle. À zéro pour cent échelle est zéro, donc il vient ici. Ensuite, à la fin de la transformation, l'échelle est ensuite prise à une échelle, ce qui la rendra pleine taille. Je vais également faire la même chose pour la mise à l'échelle en copiant ces deux lignes de code et en les collant. Mais parce que nous sommes à l'échelle, nous voulons faire le contraire. À zéro pour cent, cette fois nous voulons que l'échelle soit une pour qu'elle soit entièrement visible sur l'écran à pleine taille. Ensuite, à la fin, à 100 pour cent, on veut être réduit tout de suite pour qu'on puisse le voir. Nous définirons l'échelle à zéro lorsque nous ajoutons simplement le zéro sur les étapes à 100 %. Nous pouvons également changer cela pour être appelé à et à partir de et non à zéro sur 100 pour cent. Si l'on fonctionne bien, maintenant nous avons le contrôle des configurations d'images-clés de la façon dont nous voulons que l'animation fonctionne. Nous pouvons les ajouter aux règles CSS comme nous l'avons fait auparavant. Au-dessus des images clés, je vais ajouter les règles CSS. Rappelez-vous parce que nous appelons cette échelle d'animation, je vais ajouter la classe d'échelle de enter active. Ici, nous allons définir l'animation que nous voulons utiliser. L' animation est à l'échelle dans la section d'images clés, puis nous définissons la durée. Je veux que ça arrive plus de 0,5 seconde. Ensuite, ci-dessous, nous pouvons faire la phase active de congé. Donc, l'échelle laisse active. Cela prend à nouveau une animation. Cette fois, parce que nous quittons l'animation, nous voulons utiliser la section de mise à l'échelle. L' animation est mise à l'échelle. Je vais garder ça plus de 0,5 seconde pour la durée. Rappelez-vous l'entrée active et laisser les classes actives, couvrir la phase complète d'entrée et de sortie. Voici un endroit idéal pour ajouter notre animation, ainsi que l'échelle de temps pour sa prise. Donnons cette sauvegarde, puis passons au navigateur. Si nous allons à la sortie de l'image, nous pouvons voir lorsque nous survolons la section que le bouton qui a été arrondi avec la transition, passe maintenant de zéro à 100 pour cent de la taille, plus d'une demi-seconde. Une fois ces images clés configurées, ajouter une animation ressemble beaucoup aux transitions que nous avons examinées dans la dernière vidéo. Nous avons toujours accès aux classes CSS, telles que v leave et v enter. Mais à travers le rappel, si vous utilisez v enter, cela n'est pas immédiatement supprimé après l'insertion de l'élément. Au lieu de cela, cela se produit avec les événements de fin d'animation. Les éléments de transition racine ont fois une fin de transition et un écouteur d'événement de fin d'animation attaché, sorte que Vue JS sait quand la transition est terminée. C' est une petite différence à prendre en compte lors de l'utilisation d'animations. Ensuite, nous allons passer à l'ajout de transitions aux composants. 91. Transitions de composant et modes de transition: Nous ne nous limitons pas à ajouter des transitions sur des animations à des éléments seulement. Nous pouvons même passer entre les composants lorsque nous cliquons sur les liens de menu. Cela commence par le wrapper de transition familier, que nous pouvons toujours utiliser avec les balises keep-alive. Commençons dans l'App.vue. Si nous localisons cette section keep-alive avec les composants, je vais juste créer un peu d'espace au-dessus et aussi ci-dessous. Ensuite, nous allons créer le wrapper de transition familier. Ajoutez ceci au début. Puis sur la balise de fermeture, juste après la dernière balise Keep-alive, juste comme ça. Ensuite, je vais réutiliser le nom de fondu, profiter des styles que nous avons déjà définis en bas. Juste ici. Faisons cela en ajoutant le nom de transition à l'intérieur de la balise d'ouverture. Le nom égal au fondu, puis donnez-leur le même. Maintenant, si on passe au navigateur, on peut jeter un oeil aux effets. Maintenant, si nous cliquons sur les différentes pages, nous pouvons voir qu'il y a une transition qui se passe. Mais si nous regardons de plus près, nous pouvons voir un problème. Pour montrer cela plus en détail, je vais zoomer. Alors maintenant, si nous cliquons sur les différentes pages web, nous pouvons voir que la page web commence en bas puis saute. Il est maintenant de retour à la taille normale. Ce n'est pas le comportement que nous attendons. La raison est que par défaut, éléments de transition entrant et quittant la phase se produisent tous les deux en même temps. Au fur et à mesure qu'un nouveau composant entre, l'espace est toujours occupé par tous les composants. Ensuite, une fois que l'ancien composant quitte, l'espace est créé pour les nouveaux composants, provoquant et finissant de sauter en place. Heureusement, Vue juste écrire ceci avec un mode de transition pour aider à faire face à cela. Nous pouvons ajouter le mode en tant qu'attribut à la balise d'ouverture de transition. Juste après le nom, je vais ajouter le mode. Ici, nous pouvons être entrés ou sortants. Commençons par in-out et jetons un coup d'oeil, et donnons ce rafraîchissement. Maintenant, nous pouvons voir qu'il y a un peu de retard, mais la page est en train de changer. In-out ne sera pas utile pour eux car il introduit d'abord le nouveau composant, puis supprime les composants existants. Essayons de sortir, et voyons à quoi cela ressemble. Si nous revenons au navigateur et nous allons zoomer à nouveau juste pour nous en assurer. Super. Maintenant, lorsque nous sélectionnons les différentes pages, nous pouvons voir que le composant est commuté dans la même position, plutôt que de commencer par le bas puis de revenir en place. C' est exactement ce que nous voulons. L' ancien composant est d'abord supprimé, puis le nouveau composant commence à s'estomper. 92. Introduction aux hooks Javascript: Au cours de cette section, nous avons utilisé CSS pour créer des animations et des transitions dans notre application. Vgs nous fournit également des hooks JavaScript, que nous pouvons utiliser pendant certaines phases de la transition. Si vous vous souvenez d'un peu plus tôt dans le cours, nous avons examiné comment nous pourrions utiliser Hook pendant les différentes étapes du cycle de vie. Eh bien, le travail de Transition Hook comme ça aussi. En utilisant ces crochets, nous avons accès à toutes les fonctionnalités que les officiers JavaScript ne se limitent pas à appliquer simplement en CSS. Il peut voir les différents crochets que nous pouvons utiliser. Tout comme les classes de transition. Nous avons une entrée et un départ en phase, les deux avec quatre crochets chacun. Ci-dessous ces auto-explicatives. Mais commencera par avant d'entrer. Comme cela semble, ce crochet est appelé au début avant le début de la phase d'entrée. Nous avons ensuite entrée qui fonctionne veut faire la transition a commencé l'interface. Le crochet final de l'interphase est après entrée, et cela est appelé éléments ou composants 1C, a terminé la transition dans. Le crochet d'entrée final est appelé Entrée annulée. Ceci est utile si la transmission est annulée pendant qu'elle est en cours. Par exemple, si VCO devient false, avant que la transition n'ait eu une chance de se terminer, nous pouvons faire un travail de nettoyage ou restaurer la transition à son état d'origine. Nous avons aussi la même chose sur la phase foliaire mais avant le congé, laisser, après le congé, puis aussi laisser annulé. Appliquer ceci est un plus facile est relativement facile à faire. Tout ce que nous devons faire est d'ajouter les crochets que vous voulez utiliser comme attribut aux éléments de transition. Par exemple, nous avons ici les crochets d'entrée et de sortie comme attributs. Donc ce sont les crochets que nous avons à disposition pour utiliser. Revenons maintenant au projet et voyons les en action. 93. Hooks Javascript en action: Maintenant, nous savons quels crochets nous avons à notre disposition pendant la transition. Nous pouvons maintenant les ajouter à notre application. Je vais les utiliser pour ajouter des instructions à notre application. Ces instructions indiqueront simplement à l'utilisateur de modifier la section à gauche, et les modifications apparaîtront alors sur la carte à droite. Pour ce faire, je vais passer à l'app.vue, puis à la fin pour accrocher à la transition des composants. Sur la balise d'ouverture, je vais les ajouter à leur propre ligne, juste pour qu'elle soit plus lisible, et puis en bas, nous allons utiliser @ Entrée égale Entrée. Ici, j'utilise le symbole @ comme une main courte pour v sur pour appeler le crochet Enter, puis ajouter dans le nom de la méthode Enter. Nous pouvons créer cette méthode bientôt. Mais nous allons d'abord ajouter nos instructions, nous voulons afficher. Je vais le faire juste à propos de la transition, mais en dessous de l'en-tête nav. Je vais créer un div pour commencer, et ce sera la section environnante pour nos instructions. Créons un div, et aussi la balise de fermeture. Ici, je vais vous donner quelques identifiants d'instructions, puis quelques classes pour le rendre un peu plus agréable. Centre du texte et aussi italique. Dans ce div, je vais créer un nouveau div bootstrap avec la classe de ligne, juste comme ça. Puis à l'intérieur, je vais créer deux nouvelles sections. Cela va diviser la page en, donc ce sera deux, six sections de colonnes. Le côté gauche aura quelques textes, pour dire apporter quelques modifications dans la zone de l'éditeur ci-dessous. Le côté droit indiquera alors l'utilisateur que les modifications apparaîtront ci-dessous, sur le côté droit. Ajoutons un autre div. En fait, laissez-le grapper ceci. Classe ou bootstraps col-sm-6, donc c'est la moitié de la largeur de la page. Ensuite, nous allons ajouter quelques balises p pour ajouter du texte, puis imbriqués à l'intérieur ici, je vais ajouter les balises m pour ajouter un peu d'accent sur le texte. Je vais commencer par l'entité HTML. L' esperluette, larr, puis point-virgule, et ceci est pour la flèche gauche. On sauve ça. On voit que la flèche gauche apparaît sur le côté. Ensuite, je vais de l'avant et ajouter le texte de faire des modifications dans la zone de code Modifier ci-dessous. Sauvegardez cela et voyons à quoi cela ressemble. Super, c'est exactement ce que nous voulions du texte au-dessus de la zone d'édition. Maintenant, nous allons copier cette div et faire la même chose pour la zone de sortie. Copiez cette section de six colonnes, puis collez-la juste en dessous. Établi besoin de changer le texte, et cette fois, il va être sous montrera sur la carte, juste comme ça. Ensuite, nous avons besoin de l'entité HTML cette fois de la flèche droite. Le point-virgule de l'esperluette. Super, donc c'est exactement ce qu'on voulait. Nous avons maintenant quelques instructions à l'utilisateur. Maintenant, nous pouvons aller de l'avant et configurer la méthode Enter. Nous avons ajouté le nom de la méthode Enter juste au-dessus, désolé, juste en dessous sur la transition de Enter. Maintenant, passons à l'instance de vue et créons une nouvelle méthode. Faisons juste ceci juste en dessous des données. Ajoutons nos méthodes ici, donc le numéro un est appelé Entrée. Si vous le créez de la manière habituelle, et comme avec tous les événements que nous avons examinés précédemment, nous avons des données transmises à cette méthode, que vous transmettez dans les locaux de la fonction. Je vais appeler ceci L, car les données qui lui sont transmises sont l'élément que nous sommes en transition, donc cela a du sens. Nous pouvons le voir avec un journal de console. Ajoutons rapidement un journal de console ici, puis sortons la valeur de L, j'ai oublié d'inspecter. Ensuite, allez sur la console. Nous verrons cela en action si nous passons d'un composant à l'autre. On y va. Maintenant, nous voyons les éléments qui lui sont transmis. Cela peut être utilisé à n'importe quel JavaScript que nous aimons. Je vais l'utiliser pour définir le type d'affichage des instructions sur aucun. Cela signifie que les instructions s'afficheront d'abord lorsque l'application est chargée, mais elles seront supprimées en utilisant JavaScript lorsque nous bascuperons d'un composant à l'autre. Supprimons ce journal de console et remplacons-le par JavaScript. Document point obtenir élément par ID. L' ID que nous voulons saisir est cette section d'instruction, que nous donnons un ID d'instructions juste ici. Maintenant, nous pouvons le saisir et le placer à l'intérieur des crochets là-bas. Ensuite, pour le supprimer, nous pouvons définir le style, bien que l'affichage soit égal à non. Bien sûr, nous pouvons également utiliser l'un des crochets que nous avons examinés dans la dernière vidéo deux si nous en avons besoin. Sauvons ça. Maintenant, si nous passons à la sortie, nous pouvons voir les instructions toujours là. Mais si nous passons à différents composants, nous voyons qu'il est maintenant supprimé. Les instructions ne sont là que lorsque l'utilisateur visite le site pour la première fois. Bien sûr, nous pouvons également utiliser tous les autres crochets que nous avons examinés aussi dans la dernière vidéo. Il y a cependant une chose importante à retenir, lors de l'utilisation des crochets Entrée et Leave. Lorsque vous utilisez JavaScript uniquement, plutôt que de mélanger des hooks JavaScript avec des transitions CSS, nous devons ajouter un second argument. Le deuxième argument est le rappel fait. Nous passons ceci dans les parenthèses de notre méthode à côté de L. Séparé par une virgule, nous allons ajouter fait comme un deuxième argument. Ensuite, nous l'appelons comme une fonction à la fin de notre code JavaScript. Juste à la fin de cette méthode, nous pouvons ajouter fait pour appeler la fonction. Cela l'appellera alors comme une fonction, à la fin de notre code. transitions CSS ont des choses telles que des durées de temps, la fin du signal d'une transition ou d'une animation. Lors de l'utilisation de JavaScript, nous devons ajouter fait à la fin du code pour dire à Vue.js quand la transition est réellement terminée. Lorsque nous utilisons cela en combinaison avec CSS, le rappel fait est facultatif lors de l'utilisation de crochets sur ce Entrée et Leave, seul L est requis. Enfin, il est considéré comme une bonne pratique de dire à Vue.js si nous n'utilisons JavaScript que sur une transition, plutôt que d'utiliser à la fois JavaScript et CSS, les deux ensemble. Voici comment Vue.js peut ignorer l'étape de détection CSS. Nous pouvons le faire en ajoutant d'autres attributs à la transition. Revenons à la balise d'ouverture de transition, et juste après le @ Entrée et voulons faire un v-bind. CSS est égal à false. Ceci, bien sûr, n' est pas pour notre usecase car nous avons également mélangé le crochet JavaScript avec le CSS fondu, donc nous pouvons aller de l'avant et supprimer cette ligne. Mais il est utile d'être conscient de, et vous pourriez en avoir besoin à l'avenir. C' est ainsi que nous pouvons utiliser des hooks JavaScript. Dans la prochaine vidéo, nous allons voir comment nous pouvons mélanger les transitions et les animations. 94. Mixer des animations et des transitions: Nous avons cherché à utiliser les transitions et les animations indépendamment jusqu'à présent. Les deux peuvent également être mélangés pour travailler ensemble aussi. Pour ce faire, nous devons supprimer la marque de ne pas appeler du fichier app.vue. Allons et faisons cela maintenant à l'intérieur de l'app.vue et vers le bas à l'intérieur de la méthode, nous pouvons supprimer le fait , deuxième arguments, puis aussi l'appel à la fin de notre méthode. Donnez-nous sauver. Nous supprimons cela parce qu'il empêche VGS de détecter les transitions CSS, que nous allons utiliser. Commençons donc par passer au fichier imageoutputs.vue. Je vais d'abord couper les styles d'ici, puis les déplacer vers le fichier app.js principal dans les balises de style. Commençons donc par couper la balance. Mise à l'échelle entrée-active vers le bas jusqu'aux images clés. Donc, coupez ceux en dehors de la sortie de l'image, enregistrez cela, puis dirigez-vous vers l'app.vue. Vers le bas dans le style, nous pouvons ajouter ceux-ci ci-dessous les fausses classes. Alors, collez ça là-dedans. Avec ces styles maintenant disponibles dans le monde entier, nous pouvons les utiliser dans toute l'application. À titre d'exemple, nous pouvons mélanger l'animation à l'échelle avec le fondu existant. Donc, ce que je vais faire en premier, c'est diviser le fané-entrer-actif, et aussi le congé fondu actif sur leurs propres lignes. C' est ainsi que nous pouvons les utiliser indépendamment. Donc, je vais couper et coller ceci en action avec l'entrée fondu et le second et aussi supprimer le fondu congé de la première. Nous pouvons maintenant mélanger l'échelle d'entrée et de mise à l'échelle des animations, mais modifier les durées pour qu'elles soient plus longues. Disons deux secondes. Donc, à l'intérieur de la fade-entrée-active, pour garder la transition de l'opacité pour cette fois, nous allons la mélanger avec l'animation. Ajoutons l'animation de mise à l'échelle. Cette fois sur une durée de deux secondes. Mise à l'échelle rapide de l'animation, nous définissons avec les images clés ci-dessous. Commencez celui-là ici. Lors de la décoloration maintenant également, nous pouvons également utiliser la mise à l'échelle. Faisons ça à l'intérieur de la fade-leave-active. Nous pouvons une animation, utiliser les images clés de l'échelle sur une durée de deux secondes. Maintenant, sauvegardons cela et passons dans le navigateur et voyons à quoi cela ressemble. Alors rends-le un peu plus petit pour qu'on puisse le voir entrer et sortir. Super. Donc, il n'a pas l'air joli, mais vous pouvez voir comme une démonstration, comment l'animation et la transition, les deux fonctionnent ensemble. Maintenant avoir une animation et une transition, mais les deux coulent pour des durées différentes, les choses peuvent être un peu foirées. Nous avons besoin de dire à VGS si nous voulons que l'animation, toute la transition soit une priorité pour le temps dans. Nous le faisons à l'intérieur des éléments de transition en définissant le type de transition. Revenons donc à l'éditeur et trouvons le wrapper de transition que vous avez utilisé. Juste ici. Juste après le crochet JavaScript, nous pouvons ajouter un type. Définissons la priorité pour l'animation et voyons comment regardons. Donc, l'animation est une priorité. Passons cela à la transition , puis sauvegardons et maintenant nous pouvons voir que cela semble un peu différent. Cela ne fonctionne pas tout à fait pour notre application, mais cela vous montre comment nous pouvons définir le type ou la priorité de la transition. Je vais supprimer ce type car nous n'en avons pas besoin. C' est parce que je vais également supprimer l'animation du CSS. Supprimons le type, puis les styles, supprimons les animations que nous venons d'ajouter parce que vous n'en avez pas besoin pour notre utilisation. Alors donnez-nous des économies et espérons qu'il devrait revenir à la normale. Super. C'est ainsi que nous pouvons définir si nous voulons qu'une transition ou une animation prenne la priorité lors du mélange des deux types 95. Cours de transition personnalisé: Jusqu' à présent, lors de l'utilisation des transitions, nous avons utilisé les classes fournies par vuejs, telles que v-enter et v-leave, que vous pouvez voir ici. C' est idéal pour les cas inférieurs, mais peut-être que nous voulons utiliser nos propres classes CSS personnalisées. Ces situations peuvent survenir, en particulier lors de l'utilisation d'une bibliothèque tierce pour les animations. Les bibliothèques d'animation telles que animate.css fonctionnent en incluant la bibliothèque sous forme de fichier CSS ou en utilisant un lien CDN vers la bibliothèque. Ensuite, pour accéder aux animations, nous utilisons les noms de classe personnalisés pour chaque animation, tels que la classe égale les limites, f ou exemple. Nous comptons ce nom de classe personnalisé en utilisant les outils fournis. Cependant, à la place, vuejs nous fournit des classes personnalisées pour remplacer chaque classe de transition. Par exemple, nous pouvons ajouter l'attribut anti-classe, avec notre propre classe CSS personnalisée. Cela remplacera ensuite la classe v-enter. Nous pouvons voir cela en action si vous vous dirigez vers notre application. Commençons par le fichier de sortie de l'image. Nous avons donné à cette transition un nom d'échelle, pour le bouton Supprimer l'image, également sur l'app.vue, vers le bas dans la section style, vers le bas en bas. Nous avons ensuite créé les noms de classe. Nous utilisons l'échelle entrer actif et l'échelle laisser actif. Plutôt que d'utiliser ces noms prédéfinis, nous pouvons demander les classes personnalisées, que nous venons de regarder dans les diapositives. Pour ce faire, plus dans les sorties d'image, nous pouvons supprimer le nom que vous avez fourni précédemment. Supprime les attributs de nom, puis sur la ligne suivante, je vais ajouter de nouveaux attributs, pour ensuite configurer nos noms de classe personnalisés. Donc, je vais commencer par entrer la classe active, puis définir est à notre nom personnalisé de l'entrée personnalisée active, bien sûr, cela peut être n'importe quel nom. Ensuite, je veux faire la même chose pour laisser la classe active, et à nouveau définir ceci à notre nom personnalisé. Donc, je vais utiliser la coutume, laisser actif. Maintenant, pour lier cela au CSS, revenons à l'app.vue, puis descendons aux classes à l'échelle du Web. Nous pouvons alors changer est d'activer les phases pour être nos noms de classe CSS personnalisés. Donc, le premier, plutôt que l'échelle, il était personnalisé, entrez actif. Ensuite, bien sûr, la même chose pour la phase de congé sur mesure de congé actif. Alors donnez-lui une sauvegarde et puis actualisons ou vérifions cela sur le navigateur. Donc, si tout fonctionne bien, nous devrions maintenant passer le curseur sur le bouton Supprimer l'image, et le voir évoluer comme avant, mais cette fois en utilisant nos classes personnalisées. 96. Transitions de rendu initial: Lorsque notre application se charge pour la première fois, la carte apparaît sans style. Lorsque nous basculons entre les composants, nous avons ajouté ces effets de fondu. Ce sera agréable aussi, si nous pouvions également fonder la carte lorsque l'application se charge trop. Pour ce faire, Vue.js nous fournit l'attribut d'apparence. Nous pouvons simplement ajouter ces attributs à l'intérieur des éléments de transition. Je vais passer à la « App.vue » où se trouve cette transition. Il utilise la transition de fondu autour des composants conservés en vie. Nous pouvons ajouter ceci comme un attribut, tout comme le nom et aussi le mode. Il suffit d'ajouter « apparaître », puis de donner à cela un « sauver ». Maintenant, si nous descendons à la classe de fondu à l'intérieur du CSS. Lors de l'utilisation d'apparence, la transition qu'elle applique est tirée du CSS, que nous avons déjà configuré pour entrer et quitter. Puisque vous avez le fondu d'opacité, c'est l'effet utilisé lors de l'apparition. Nous pouvons le voir en action. Si on change l'une des durées à trois secondes. Je vais le faire dans la classe d'apparence. Donc « fade-entrer-actif ». Plutôt que 0,5 seconde, je vais changer cela à trois secondes puis « sauver ». Maintenant, si nous rechargeons le navigateur, le chargement initial prend plus de temps à fondu. Remettez cela à 0,5 seconde, « actualiser ». Maintenant, nous pouvons voir que c'est beaucoup plus rapide. Cependant, si nous le voulions, nous n'avons pas besoin d'utiliser automatiquement cette classe de fondu existante. Nous pouvons remplacer cela avec un nom de classe personnalisé. Comme on l'a vu dans la dernière vidéo. Nous pouvons utiliser les mêmes noms, mais avec le préfixe apparaissant, tel que « AppearActiveClass », pour sauvegarder la transition. Je vais mettre en place un nom personnalisé. Donc « AppearActiveClass ». Ensuite, nous pouvons ajouter notre nom personnalisé, 'custom-apparent-active-class ». Maintenant, c'est la configuration, nous pouvons maintenant descendre au CSS. En fait, je vais juste copier ce nom personnalisé. Ensuite, jusqu'au CSS, nous pouvons configurer cela. Je dois juste « fade-entrer-active », coller ça. Encore une fois veulent mettre en place la transition pour l'opacité. Réglons cela à une seconde, par exemple. Maintenant, cette transition d'une seconde sera indépendante et remplacera toutes les classes existantes. Voyons cela en action avec « refresh ». Ça a l'air d'une seconde. Cela semble prendre effet maintenant. C' est ainsi que nous pouvons ajouter des transitions au rendu initial. 97. Transitions d'élément et clés: Les transitions que nous avons examinées jusqu'à présent n' impliquent qu' un seul élément par exemple, la transition d'image de suppression était un élément de bouton unique. Aussi les options de texte que nous le fondu dans et hors, bien que ceux-ci aient de nombreux éléments imbriqués à l'intérieur, ils seront toujours une forme comme l'élément externe principal. Nous pouvons également faire la transition entre deux éléments distincts. Une finition de besoin commun est lors de l'utilisation v-if et v-else. Je vais retourner au premier projet où nous pouvons l'appliquer aussi. Mais d'abord, je vais copier l'animation d'échelle à partir de l'app.vue de votre fichier. Descendez au CSS, adoucissez l'échelle, entrez actif. En fait, nous renommons ceci en custom, mais pour l'instant nous allons simplement copier ceci et changer ceci en un instant. Maintenant, ouvrons l'application de liste de distribution dès le début du cours. Faites glisser le projet dans Visual Studio. Ensuite, nous allons ouvrir ceci en double-cliquant sur la page d'index. Mettons-nous à ce sujet dans le fichier index.html. Nous avons une instruction if else pour montrer les noms ajoutés à la liste, qui est juste ici. Ces deux instructions if et la section else ci-dessous affiche un div. Cette section, si elle affiche le nom. Si des noms sont disponibles dans le tableau de noms de liste d'invités. Si ce n'est pas le cas, nous avons alors un div séparé juste en dessous, qui dit le texte de aucun nom ajouté encore. C' est parfait pour basculer entre ces deux éléments div. Pour ce faire, tout ce que nous devons faire est d'ajouter notre mappeur de transition familier. Fermons cette barre latérale pour plus d'espace. Puis juste en dessous de la div avec la classe de bloc de carte. Ajoutons le wrapper de transition. Faisons de l'espace, puis après les noms sans ajouter l'adjectif. On peut joindre ça, juste comme ça. Maintenant, nous pouvons ajouter le nom de l'échelle pour lier cela à l'animation CSS que nous avons ajouté précédemment, alors ajoutons le nom à la balise d'ouverture de l'échelle. Ensuite, dans pas de app.css. Nous pouvons ensuite ajouter le CSS que vous avez copié de tous les projets précédents. Tout ce que nous devons faire est de remplacer personnalisé par le nom de l'échelle ou pour l'entrée active et aussi pour le congé actif afin d'enregistrer cela. Maintenant, nous avons ouvert cette page d'index dans le navigateur, puis actualiser. Nous pouvons ajouter un nom à la liste des invités, puis soumettre. Nous pouvons voir que le nom est ajouté comme avant. Nous ne pouvons voir aucune de ces mises à l'échelle en vigueur. C' est clair que ça ne marche pas. La raison pour laquelle cela ne fonctionne pas est parce que nous basculons entre deux éléments div avec le même bloc if else. Le problème se posera toujours lorsque les deux éléments sont les mêmes. Si ce sont des balises div ou l'un des éléments. Pour corriger cela, nous avons besoin d'une autre clé pour chaque élément, sorte que View JS peut distinguer entre eux. Revenons à l'application. Puis à l'intérieur du bloc v-if, je vais ajouter une clé et on va appeler ça des noms. Ensuite, dans le deuxième bloc pour l'instruction else, plupart n'ajouteront pas une seconde clé avec notre nom de liste vide. Cela peut être n'importe quel nom que vous voulez, alors donnez cela une sauvegarde. Maintenant, si nous revenons au navigateur et puis rechargeons, ajoutons un nom à la liste et entrez. Maintenant, nous pouvons voir que nous avons l'échelle en transition. Cela a l'air un peu étrange parce que nous faisons la transition du div pli plutôt que juste un nom. Mais on voit clairement que ça marche maintenant. Rappelez-vous si nous faisons la transition entre deux éléments qui ne sont pas les mêmes, tels que des éléments AP et un div, nous n'aurons pas besoin d'ajouter cette clé. Si nous ajoutons d'autres noms, vous pouvez voir que la transition ne s'applique pas après le prénom. La transition avec les listes fonctionne un peu différemment, et nous allons voir comment le faire ensuite. 98. Transitions de groupe: Dans la dernière vidéo, nous avons mentionné l'ajout de transitions à une liste, comme la façon dont nous faisons ici avec la boucle v for, fonctionne un peu différemment. Commençons par déplacer la transition pour entourer seulement v pour boucle. Coupons la balise de transition d'ouverture. Ensuite, je vais ajouter ceci juste après les instructions v if, en commençant là, puis la balise de transition de fermeture, mais aussi couper cela, puis coller ceci juste après le bloc pour la boucle for. [ inaudible] et ouvrons cela dans le navigateur et actualisons. Essayons ça. Commençons par ajouter quelques noms. Ajoutons une seconde. Nous pouvons voir que seul le prénom que nous avons ajouté est apparu sur la liste des invités. Ça a l'air un peu étrange. Ouvrons la console et voyons ce qui se passe. Cliquez avec le bouton droit et accédez à Inspecter. Actualisons et ouvrons la console, alors ajoutons un nom et une réponse. Vous pouvez voir qu'il n'y a pas d'erreur là. Essayons d'ajouter un deuxième nom. Maintenant, nous voyons une erreur rouge. Les opinions sont la console. Ouvrons ça. Le message d'erreur nous donne un indice sur la façon dont nous pouvons résoudre ce problème. Il dit que la transition ne peut être utilisée que sur un seul élément. Nous devons utiliser le groupe de transition pour les listes. Donnons-le un coup d'envoi. Changeons la transition pour être un groupe de transition. Essayons de scanner dans le navigateur. Le premier apparaît, puis le second apparaît également, et nous ne voyons aucun message d'erreur à l'intérieur de la console. Il y a une différence lors de l'utilisation du groupe de transition. Il rendra un élément span environnant à notre liste. Nous pouvons voir cela si nous ouvrons à nouveau les outils de développement et inspectons les éléments de nom. Cliquez sur l'Inspecteur, puis passez sur les éléments de nom. Sélectionnez l'un de ces éléments. Le premier va bien. Faisons un peu plus d'espace. Maintenant, si nous regardons le code à l'intérieur des outils de développement, sont trois noms de A, B ce sont trois noms de A, B, C, que vous venez d'ajouter, et ont aussi la span ta, qui entoure tous ces trois noms. On sait qu'on n'a pas mis ça dans le code parce qu'on ne peut pas le voir ici. Lors de l'utilisation des éléments de transition normaux, cela ne rend pas un élément. Nous devons être conscients de cela lors de l'utilisation du groupe de transition. Nous avons cependant le contrôle sur l'élément qu'il utilise. Nous ne sommes pas limités à utiliser uniquement des éléments de portée soignés. Le type d'élément peut être modifié en ajoutant des attributs de balise, ce qui se fait à l'intérieur de la balise de groupe de transition d'ouverture. Juste après le nom, je vais aussi ajouter les éléments de balise. Ajoutons une balise p par exemple. Cela changera la portée pour être un élément p. Outils d'adaptation à l'arrière ouvert. Donnons un coup d'envoi à ça. Rafraîchissons, et puis nous devons ajouter un nom. Ajoutons un nom là, cliquez sur « Inspecteur » et sélectionnez notre nom. Là, j'ai le nom juste là Chris, et maintenant j'ai une balise p environnante plutôt que la travée. Je vais supprimer cet attribut de balise comme span, ne gâche pas notre CSS ou notre mise en page, donc il est correct de laisser là. Je voulais juste te montrer comment faire ça au cas où tu rencontrerais des problèmes. La dernière chose que vous avez peut-être déjà repéré est la première fois que nous ajoutons à la liste, le nom n'est pas animé. Fermons simplement les outils de développement. Ajoutons notre prénom, et vous pouvez voir qu'il saute directement sans aucune animation fluide. Ce problème est dans notre condition si. La transition ne s'applique que si le droit de noms est supérieur à zéro plutôt qu'égal à. Pour résoudre ce problème, nous pouvons refactoriser notre code et le faire fonctionner, mais plus compact pour. Copions d'abord cette div d'ouverture complète avec si condition, alors je veux le supprimer. Suppression également de la div de fermeture. Maintenant, cette section d'autre, nous voulons supprimer cela et coller dans les instructions if que nous venons de copier avant. On n'a plus besoin de la clé, donc on peut enlever ça. Tout ce que je veux faire est de remplacer le symbole supérieur par les égaux. Cela fera apparaître le texte sans noms ajoutés lorsque le tableau Names est égal à zéro. Ensuite, tout le reste inclura les noms dans le div ci-dessus. Maintenant, j'espère que nous pouvons sauver cela et que nous devrions maintenant travailler. Donnez-lui un rafraîchissement, et voyons cela en action. Ajoutez un prénom, et maintenant nous pouvons voir la transition, notre deuxième nom, et ainsi de suite. Tout ça fonctionne bien. Si nous revenons au début, nous pouvons voir notre texte sans noms est toujours ajouté quand il n'y a pas de noms dans le tableau, alors il est remplacé par tous les noms qui ajouteront avec des animations, tout mon travail. 99. Cours V-move et noms de transition dynamique: Si vous vous souvenez plus tôt dans le cours, lorsque nous avons créé l'application Liste d'invités. Nous l'avons configuré, de sorte que les noms ajoutés sont classés par ordre alphabétique. Si j'ajoute a, b, puis c. Ensuite, si nous ajoutons a à nouveau, nous pouvons voir que cela est placé au début et tout le reste se déplacer à travers pour faire place, plutôt que ces noms ne font que sauter le chemin. Ce déplacement des éléments peut également être animé en utilisant une classe v-move. V move fonctionne comme des classes de transition que nous avons déjà examinées. Nous remplacons le v par le nom que vous souhaitez ajouter dans le groupe de transition. À l'intérieur de notre application, nous avons déjà un nom d'échelle. Cela va créer un nom de classe de déplacement d'échelle, que nous pouvons utiliser dans un fichier CSS. Alors passons à l'application, .CSS. Je vais ajouter ça maintenant. Ensuite, ajoutez ceci juste au-dessus des cadres clés. Donc scale-move. Ensuite, je veux ajouter une transition, définir la transformation sur 1 seconde. Donc, avec une nouvelle classe, nous sommes libres d'ajouter n'importe quelle transition que nous voulons. Je vais juste faire la transition de 1 seconde pour rendre le mouvement un peu plus lisse. Voyons à quoi cela ressemble dans le navigateur. Alors ajoutons a, b, puis c. Maintenant, si j'ajoute a à nouveau, nous voyons un joli effet lisse pour le b. Maintenant se déplaçant hors du chemin. Donc, cela semble maintenant beaucoup mieux. Nous avons maintenant cette transition en douceur lorsque de nouveaux articles sont ajoutés. Une dernière chose avant de terminer cette vidéo est que les attributs de nom que nous avons ajoutés à la transition peuvent également être dynamiques. Nous pouvons utiliser soit v bind, comme nous avons dû le faire dans le passé, ou nous pouvons également utiliser le plus court et le deux-points pour bider la propriété de l'état à l'intérieur de la balise openings. Ajoutons un deux-points pour rendre cette dynamique. Ensuite, nous pouvons configurer cela comme une propriété de données pour changer son nom. Donc, plutôt que d'échelle, si nous appelons cela l'effect1, par exemple. Nous pouvons ensuite le configurer en tant que propriété de données. Passons au app.js, et nous pouvons ajouter cela à l'intérieur de nos données. Donc, dans les balises de données d'ouverture et de fermeture, je vais les ajouter sur le pourcentage de capacité d'événement. Le nom était effect1. Nous pouvons ajouter notre nom d'échelle ici. C' est donc juste un exemple de base utilisé dans notre nom de transition d'échelle. Pour utiliser le CSS existant. Nous pourrions régler plusieurs transitions à l'intérieur du fichier CSS et les appliquer en fonction du nom de la propriété data. Par exemple, nous pourrions avoir une case à cocher ou sélectionner entrée pour permettre à l'utilisateur de modifier le type de transition. Alors appuyez sur sauver, et actualisons l'intérieur du navigateur et vérifiez que notre transition d'échelle fonctionne toujours. Tout semble encore fonctionner correctement là. En outre, cette liaison fonctionnera également sur les attributs, tels que les crochets JavaScript. Nous pourrions donc revenir à notre groupe de transition à l'intérieur de la page d'index. Nous pourrions faire quelque chose comme bere-enter, définir ceci comme une valeur ou deux-points entrée, et faire la même chose juste ici. Cela rend tous ces crochets et transitions vraiment flexibles. Bien que nous ayons seulement ajouté des transitions et des animations relativement simples à cette application, ils peuvent faire une grande différence à la fin en rendant notre application beaucoup plus soignée et complète. 100. Section d'outro : transitions et animations: Félicitations pour arriver à la fin de cette section. J' espère que vous avez aimé tout apprendre sur la façon dont nous pouvons ajouter des transitions et des animations à nos projets. Espérons que peut maintenant voir que même en ajoutant quelques petits effets à nos applications, il peut vraiment les terminer et les faire paraître et se sentir beaucoup plus agréable pour l'utilisateur. C' est une autre grande fonctionnalité du framework Vue.js et j'espère que vous avez vraiment apprécié cette section. 101. Merci: Félicitations pour avoir atteint la fin de ce cours. À l'heure actuelle, vous devriez vous sentir beaucoup plus confiant de construire des applications en utilisant vue.js. Nous avons couvert beaucoup de choses jusqu'à présent, y compris, apprendre à installer vue et à utiliser l'instance de vue ainsi que toutes les propriétés que nous pouvons ajouter à cette instance, telles que les données, calculées, méthodes et filtres. Lors de la construction de ces projets, nous avons également examiné la liste et le rendu conditionnel, liaison de données bidirectionnelle, ainsi que les directives que vue.js nous fournit, pour n'en nommer que quelques-uns. Nous plongons ensuite un peu plus profondément en mettant en place un meilleur flux en utilisant des outils de construction modernes tels que le vue-cli, où, pack et aussi bulle. Cela nous permet de faire un pas vers la construction d'applications plus grandes et plus maintenables en divisant notre code en composants, une transmission de données en utilisant différentes méthodes. Merci d'avoir suivi ce cours et au revoir pour l'instant. 102. Suivez-moi sur Skillshare !: Une énorme félicitations de ma part pour avoir atteint la fin de ce cours. J' espère que vous l'avez vraiment apprécié et que vous en avez acquis quelques connaissances. Si vous avez apprécié ce cours, assurez-vous de consulter le reste de mes cours ici sur Skillshare, et suivez-moi pour toute mise à jour et aussi être informé de tout nouveau cours au fur et à mesure qu'ils deviennent disponibles. Merci encore une fois, bonne chance, et j'espère que je te reverrai dans la future classe.