Vue.js 2 Akademie: So lernst du Vue Schritt für Schritt

1. Willkommen!: Willkommen beim Kurs „Vue.js Academy“. Ich freue mich, dich bei mir zu haben. Mein Name ist Chris, und ich bin ein Webentwickler und auch ein erfahrener Online-Kursteilnehmer, der Tausende von zufriedenen Studenten unterrichtet. Vue.js ist eines der aufstrebendsten JavaScript-Frameworks, die heute verfügbar sind. Es ist auch eine der Spaß zu lernen und es ist voll mit vielen erstaunlichen Funktionen, die es Ihnen ermöglichen , beide kleinen Websites bis hin zu komplexen einseitigen Anwendungen zu erstellen. Warum also diesen Kurs gegenüber anderen verfügbaren Vue.js Kursen wählen? Nun, dieser Kurs verfolgt einen projektbasierten Ansatz. Wir werden genau sehen, wie jedes Konzept, das Sie lernen, sofort in reale Projekte passt. Der Kurs ist auch anfängerfreundlich. Wir beginnen damit, eine Gästelisten-Anwendung zu erstellen, wo wir mit den Grundlagen beginnen werden. Ich habe eine [unhörbare] Starter-Vorlage für das erste Projekt zur Verfügung gestellt , damit wir direkt lernen können, was Vue.js zu bieten hat. Während dieses Projekts werden Sie zuversichtlich, wie Vue funktioniert, und auch die Kernkonzepte wie Bindung von Daten, Methoden, Computereigenschaften und vieles mehr. Sie erfahren auch mehr über die Lebenszyklusphasen von Vue, die wir nutzen können. Projekt 2 baut auf dem auf, was wir bisher bereits gelernt haben. Wir stellen Ihnen vor, Tools zu erstellen und unseren Workflow zu verbessern , indem wir die neuesten Technologien wie Vue CLI, Webpack und Bubble verwenden. Dieses Projekt wird eine Grußkartenanwendung sein, bei der der Benutzer seine eigene personalisierte Grußkarte bearbeiten und erstellen kann . Zusammen mit diesem ist ein lustiges Projekt zu erstellen, werden Sie so viele Techniken lernen, wie die Verwendung von Komponenten und wie Sie Daten zwischen ihnen zusammen mit der Integration Ihrer App in Firebase für die Image-Speicherung. Außerdem werden wir das Hinzufügen von Animationen und Übergängen zu Ihren Apps behandeln , um sicherzustellen, dass sie wirklich hervorstechen. Alles, was Sie lernen, wird sofort in die Praxis umgesetzt, um Ihnen ein besseres Verständnis dafür zu geben, wie sie alle in echte Anwendungen passen. Worauf wartest du? jetzt auf die Schaltfläche Anmelden und erfahren Sie eines der heißesten JavaScript-Frameworks, die heute verfügbar sind. 2. Was ist Vue.js und warum sollte ich es verwenden?: Wenn Sie mit vue.js oder JavaScript-Bibliotheken und Frameworks im Allgemeinen nicht vertraut sind, einige der Fragen, die Sie vielleicht stellen, was ist vue.js und warum sollte ich es überhaupt lernen? Nun, vue.js ist ein wirklich lustiges und einfach zu verwendendes JavaScript-Framework zum Erstellen von Benutzeroberflächen. Der Kern des Frameworks ist sehr leicht und schnell, und es kann in Projekten jeder Wissenschaft verwendet werden, vom einfachen Ablegen in eine bestehende Website oder Anwendung bis hin zur Steuerung eines kleinen Teils, wie zum Beispiel das Hinzufügen neuer Komponenten, bis hin zu mittelgroßen oder großen einseitigen Anwendungen. In Anbetracht der geringen Größe des vue.js Kerns ist es immer noch voll mit vielen Funktionen, die Sie während dieses Kurses erfahren werden. Der Kern kann auch erweitert werden, um weitere Funktionen wie Frontend-Routing und Zustandsverwaltung hinzuzufügen . Wenn Sie zuvor Websites erstellt haben, sollten Sie bereits mit HTML, CSS und JavaScript vertraut sein , die die Bausteine von vue.js Anwendungen sind. Das bedeutet, dass Sie Ihre vorhandenen Fähigkeiten nutzen können, um noch schneller zu lernen. Vue.js verarbeitet nur die View-Ebene, was bedeutet, dass Sie es frei sind, sie mit einem der Bibliotheks-Backends zu integrieren, so dass es wirklich einfach und flexibel zu übernehmen ist. Wenn Sie andere Frameworks oder Bibliotheken wie React verwendet haben, viele der Kernkonzepte vertraut, z. B. die Verwendung eines virtuellen DOM und das Erstellen wiederverwendbarer Komponenten. React ist auch toll zu verwenden, aber meiner Meinung nach ist vue.js viel einfacher zu beginnen, und es wird auch gesehen, um React bei bestimmten Leistungstests zu übertreffen. Dies sind nur einige der Gründe, warum vue.js einen enormen Anstieg der Popularität erlebt hat und auch in Zukunft ein noch größerer Spieler wird. Jetzt kennen wir einige der Vorteile der Verwendung von vue.js, jetzt lassen Sie uns Visual Studio-Code-Setup bekommen, so dass wir direkt in die Erstellung unseres ersten Projekts springen können. 3. Visuelle Studioinstallation: Für diesen Kurs benötigen wir ein paar Dinge, um aufzustehen und zu laufen. Zuerst brauchen wir einen Texteditor. Möglicherweise haben Sie bereits eine Präferenz oder eine Präferenz, die Sie bereits verwenden. Für diesen Kurs verwende ich Visual Studio Code , der ideal für JavaScript-Codierung ist und auch ein integriertes Terminal hat, das wir später im Kurs benötigen werden. Sie können jeden Texteditor verwenden, den Sie mögen, aber hier sind einige beliebte Texteditor-Optionen, wie Atom, Klammern , WebStorm und natürlich Visual Studio Code. Wenn Sie bereits einen von diesen haben und einen Webbrowser haben , können Sie mit dem nächsten Video fortfahren. Wenn nicht, würde ich empfehlen, dass Sie zu code.visualstudio.com gehen und den Download-Anweisungen für Ihre Plattform folgen. Sobald Sie dies getan haben, Comeback und wir fügen einige Plug-ins hinzu, um ihnen bei der Arbeit mit Vue.js zu helfen. Sobald die Installation abgeschlossen ist, werde ich ein Plug-In hinzufügen, um Vue.js zu Code-Snippets und auch einige Syntaxhervorhebung hinzuzufügen . Wenn Sie Ihren Texteditor öffnen und auf das Erweiterungssymbol unten in den Optionen klicken , werden Sie sehen, dass ich bereits Vue 2 Snippets installiert habe. Um dies zu installieren, können Sie auf die Suchleiste klicken und nach Vue 2 suchen. Was ich verwenden werde, ist Vue 2 Snippets, die durch [unhörbar] ist, dann klicken Sie auf die Installationstaste und Sie sind gut zu gehen. Schließlich benötigen Sie auch einen Web-Browser. Ich würde Chrome von Google empfehlen, aber Sie können jeden Webbrowser verwenden, den Sie mögen. Dies ist es für die erste Einrichtung. Lassen Sie uns nun in die Erstellung unserer ersten Vue.js Anwendung springen. 4. Abschnittseinführung: Vue Grundlagen: Wie bei all meinen Kursen verschwende ich gerne keine Zeit damit, unsere Hände schmutzig zu machen und echte Projekte zu bauen. Dieser Kurs ist nicht anders und wir werden beginnen, indem wir eine Gästelisten-Anwendung erstellen, in der der Benutzer seine Interessen in einem Ereignis registrieren und den Namen der Gästeliste hinzufügen kann . Das Projekt wird relativ einfach sein, aber wir werden alle Grundlagen abdecken. Sie müssen anfangen, vue.js-ups zu bauen. Lasst uns weitermachen und loslegen. 5. So kannst du den Projektstarter herunterladen: Dieses Video ist ein Starterprojekt , das wir verwenden werden, um direkt in vue js zu springen. Ich möchte meine herunterladen und auf dem Desktop für einfachen Zugriff platzieren. Aber Sie können Ihre überall platzieren. Solange es für Sie bequem ist. Jetzt sollten Sie Ihren Texteditor bereits eingerichtet haben. Ich werde Visual Studio Code öffnen und dann, sobald es geöffnet wird, ziehe ich den Projekt-Starter in den Texteditor. Dann werfen wir einen kleinen Blick auf das, was enthalten ist. Wenn wir die index.html öffnen, ist es nur eine grundlegende HMO Daten. Im Kopfbereich haben wir nur einige grundlegende Meta-Tags, den Titel. Wir haben auch einige Links zu Bootstrap. Wir werden dies nur für einige grundlegende Styling und Layout verwenden. Der Hauptteil des Projekts beginnt mit einem Hauptdiv, das eine ID der App hat. Dies wird der Hauptcontainer sein und wir werden uns dies genauer ansehen, wenn wir uns die View-Instanz ansehen. Nun, Sie haben nur einige grundlegende Zeilen und Container und einige Informationen über die Gästeliste. Wenn wir den Projektordner öffnen und dann, wenn wir auf index.html doppelklicken. Sie können dann die grundlegende Struktur dessen sehen, was wir haben. Wir haben eine Zeile, die einige Informationen über die Ereignisse enthält, wie das Ereignisdatum, den Titel der Veranstaltung und eine Beschreibung. Wir haben auch eine Texteingabe, bei der der Benutzer seinen Namen hinzufügen und ihn dann zur Gästeliste hinzufügen kann . Dann unten haben wir eine weitere Zeile und dann eine insgesamt darunter, die der Ort sein wird, an dem alle Namen hinzugefügt werden. Im Moment sagt es noch keine Namen hinzugefügt. Aber wir werden die Funktionalität in diesem Abschnitt hinzufügen, damit dies funktioniert. Oben in der app.css haben wir nur einige grundlegende Styling, nur um es ein wenig schöner aussehen zu lassen. Die app.js ist vorerst leer. Aber dies ist der Ort, an dem wir die Ansicht JS-Funktionalität hinzufügen , während wir diesen Abschnitt durchlaufen. Dies ist nur ein grundlegender Überblick darüber, was im Projekt als Startup-Paket enthalten ist. Dies wird viel vertrauter werden, wenn Sie durch diesen Abschnitt gehen. Als nächstes werden wir uns ansehen, wie vue js installiert wird und wie man es zu den Starter-Projekten hinzufügt , und dann beginnen wir in dieser app.js zu arbeiten , indem wir uns die View-Instanz ansehen. 6. So installierst du Vue.js: Im letzten Video hätten wir den Projektstarter herunterladen sollen , den ich für einfachen Zugriff auf meinen Desktop platziert habe. Sie sollten auch einen Texteditor gebrauchsfertig haben. In meinem Fall verwende ich Visual Studio Code. In diesem Video zeigen wir Ihnen ein paar Beispiele, wie wir mit der Installation von Vue.js beginnen können. Ich werde zu meinem Web-Browser gehen und ich werde Chrome für den Rest dieses Kurses verwenden. Dann gehen wir zu Vue.js.org, die offizielle Website für Vue.js ist. Wenn Sie auf die Führung in der oberen rechten Ecke klicken und dann, wenn sie geladen wird, sollten Sie ein Navigationsmenü auf der linken Seite sehen. Um zu beginnen, müssen wir zum Installationsmenü gehen, und er wird Ihnen einige Optionen zur Verfügung stellen, wie Sie beginnen können. Die erste ist, wie Vue.js innerhalb von Skript-Tags eingeschlossen wird, so dass wir entweder auf die Entwicklungsversion oder die Produktionsversion klicken können. Die Entwicklungsversion hat den Debug-Modus und auch die Warnungen. Die Produktionsversion hat diese nicht und sie ist verkleinert. Alles, was wir tun müssen, ist auf eine dieser Schaltflächen zu klicken und dann erhalten wir den Download, dann können wir diese Dateien innerhalb unserer Anwendung speichern und mit Skript-Tags zu ihnen verknüpfen. Diese Technik ist genau die gleiche wie die Einbeziehung aller Ihrer Skripte wie j-query. Eine weitere Möglichkeit besteht darin, den CDN-Link zu verwenden, den wir für dieses Projekt verwenden werden. Dies ist ein Link, auf dem die Bibliothek Vue.js extern gehostet wird. Wenn wir auf den empfohlenen Link dort klicken, würde nicht zu einer gehosteten Version von Vue.js genommen, und dies ist die neueste Version. Wird auf diese nur in einem Augenblick zurückkommen. Die nächste Option ist die Verwendung von NPM oder dem Node Package Manager. Wir werden NPM im nächsten Projekt verwenden, aber jetzt möchte ich die Dinge einfach halten, wir konzentrieren uns auf Vue. js und dann in den Grundlagen. Es gibt auch die Vue.cli, die eine einfache Möglichkeit ist, Vue.js Projekte zu Gerüst zu erstellen. Wieder, wir werden dies später verwenden, aber jetzt werde ich nur auf den CDN-Link gehen und dann auf den Link klicken, und dann brauchen wir es kopieren diesen URL-Link. Dann, wenn wir zurück zu Ihrem Texteditor gehen und dann öffnen Sie die Projekte. Wenn wir gehen über die index.html, wenn es in den Kopf Abschnitt direkt unter dem Titel gehen, und fügen Sie dann die Skript-Tags hinzu, und dann können wir die Quellattribute hinzufügen und dann in den Link zum Vue einfügen. js-Bibliothek, und speichern Sie das dann. So schnell und einfach ist es, Vue.js als CDN-Link hinzuzufügen. Mit Vue.js nun unserer App hinzugefügt, gehen wir nun zum nächsten Video über, wo wir einen Blick auf das Hinzufügen der Vue.instance werfen. 7. Die Vue-Instanz und das Datenobjekt: Jetzt haben wir Zugriff auf die Vue.js Bibliothek mit ECD und Link. Wir können jetzt beginnen, mit innerhalb unserer app.js Datei zu arbeiten. App.js ist in starts-Projekt enthalten. Sie sollten es bereits herunterladen. Diese Datei können Sie benennen, was Sie wollen. Sie können also frei wählen, wenn Sie es vorziehen. Wir beginnen mit dem Zugriff auf das View-Objekt, und dies ermöglicht es uns, eine neue View-Instanz zu erstellen, indem Sie New View eingeben, gefolgt von der Klammer und einem Semikolon. Diese neue View-Instanz wird im Grunde unsere Anwendung und die HTML-Daten steuern , die auf dem Bildschirm gerendert werden sollen. Wir müssen dann eine Optionsobjekte übergeben, die verschiedene Optionen enthält, die wir während dieses Kurses untersuchen werden, wie HTML-Ansicht, welches HTML-Element wir mounten wollten. Es enthält auch alle unsere Methoden und Daten. Lassen Sie uns zuerst einen Blick auf el werfen. Dieses Schlüsselwort teilt Ihnen mit, welches HTML-Element gesteuert werden soll. In unserem Fall möchten wir die Seite index.html steuern. Also werde ich den wichtigsten umgebenden div-Container verwenden, der eine AID von oben geben würde. So können wir den String-Wert von el so einstellen, dass er mit dem Hash-Präfix gleich ist, weil es AID ist. Dies ist genau wie ein CSS-Selektor. Wenn wir also ein div mit einer Klasse anstelle einer ID steuern wollten, ersetzen wir einfach den Hash durch einen Punkt. Jetzt haben wir unsere Elemente ausgewählt. Wir wollen mit der Dateneigenschaft arbeiten. Dies enthält ein Objekt, das alle Daten speichert , die wir innerhalb dieser View-Instanz verwenden möchten. Im Moment sind alle Daten in unserer App einfach HTML, die Vue.js Clooney keine Kontrolle hat. Beispielsweise werden alle Daten zu den aufgelisteten Ereignissen, wie das Ereignisdatum, der Ereignistitel und die Ereignisbeschreibung handcodiert. Wir können dies ändern, indem wir es dem Datenobjekt innerhalb unserer View-Instanz hinzufügen. Also werde ich anfangen, diese handcodierten Informationen auf unsere Datumseigentum zu übertragen. Lassen Sie uns also beginnen, indem wir Daten einschließen. Wählen Sie also das Datum von dort aus, legen Sie es HTML aus. Wenn wir dann zu unserem Datumseigentum gehen, können wir einen Namen für dieses Datum festlegen. Also möchte ich mine EventDate gefolgt von der Spalte aufrufen, und dann innerhalb einer Zeichenfolge können wir das Datum innerhalb von dort hinzufügen. Wir können das Gleiche mit dem Titel der Veranstaltung machen. Also zurück auf der Index-Seite, wenn Sie den Namen des Summer Festival, und dann innerhalb unserer Daten, wieder über in unsere app.js, und dann als nächstes nennen wir dies den EventTitle. Dann wie zuvor mit unseren Tagen als Schnur. Sie dies also zwischen den Zitaten ein. Dann werden wir das Gleiche auch für die Ereignisbeschreibung tun. Gehen Sie also zur Indexseite, legen Sie die Ereignisbeschreibung ein, und dann direkt unter dem EventTitle erstellen wir den EventDescription-Datennamen und fügen diesen dann als Wert ein. Jetzt brauchen wir eine Möglichkeit, diese Daten wieder in unser HTML hinzuzufügen. Um diese Daten in unseren Code einzufügen, tun wir es mit einer speziellen Template-Syntax von doppelten geschweiften Klammern. Sie werden auch sehen, dies als Schnurrbart Syntax oder Textinterpolation bezeichnet. So verknüpfen wir unsere Daten mit dem DOM. Dies bedeutet auch, dass die Daten reaktiv sind und bei einer Änderung der Daten aktualisiert werden. Innerhalb dieser geschweiften Klammern können wir den Namen der Datumseigenschaft hinzufügen, die wir gerade erstellt haben. Beginnen wir also mit den EventDates an der Stelle, wo wir das Datum kurz zuvor angegeben haben. Also speichern wir das und aktualisieren Sie den Browser, und jetzt können wir sehen, dass das Datum wieder auf dem Bildschirm erscheint. Also dieses Datum funktioniert jetzt, weil es innerhalb der doppelten geschweiften Klammern ist. So weiß Vue.js, nach diesem Eigenschaftsnamen innerhalb des Datumsobjekts zu suchen , das wir gerade erstellt haben. Es wird auch aktualisiert, wenn der Wert von EventDate geändert wird. Also, was ich möchte, dass Sie jetzt tun, ist genau das gleiche für den EventTitle und auch die EventDescription. Also Pause und gib das mal los. Wenn es etwas ist, mit dem du dich nicht wohl fühlst , mach dir keine Sorgen. Ich werde jetzt fortfahren, indem ich den EventTitle hinzufüge. Also tun Sie das gleiche wie zuvor. Anstelle des Titels fügen wir die doppelten geschweiften Klammern hinzu und fügen dann den EventTitle hinzu. Schließlich wird an einem Ort, an dem wir die EventDescription einfügen , auch die EventDescription dort hinzufügen. Also speichern Sie das und wir werden eine letzte Aktualisierung durchführen, nur um zu überprüfen, dass alles in Ordnung ist . Es sieht also nicht toll aus. Wir haben die Daten, den Titel und auch die Beschreibung, wenn [unhörbar] zurück auf der Seite. Aber dieses Mal haben wir Vue.js, die die Daten steuert. Endlich möchte ich nur noch eine letzte Sache beenden. Da diese freien Dateneigenschaften verwandt sind, werde ich sie innerhalb ihres eigenen Ereignisobjekts gruppieren. Dies ist völlig optional, aber es macht Sinn, vor allem, wenn wir erweitern, indem wir mehr als ein Ereignis erstellen. Also zurück in der Dateneigenschaft wollen wir das Ereignisobjekt erstellen. Dann werde ich das EventDate, den EventTitle und EventDescription ausschneiden und dann sicherstellen, dass diese innerhalb des neuen Ereignisobjekts eingefügt werden. Jetzt wieder im Browser, wenn wir eine Aktualisierung durchführen, sehen wir, dass die Daten verschwindet. Dies liegt daran, dass wir Vue sagen müssen, dass diese Eigenschaften und jetzt innerhalb eines Objekts namens Ereignisse. Es bedeutet also nur, dass Sie eine weitere Änderung innerhalb der Indexseite vornehmen. Alles, was wir tun müssen, ist unsere Ereignisse vor EventDates, das gleiche mit EventTitle und dann letztendlich dasselbe mit EventDescription. Also drücken Sie „Speichern“. Nun, wenn wir zurück zum Browser gehen und eine Aktualisierung gibt, sollten wir sehen, dass alle unsere Daten wieder auf dem Bildschirm sind. So haben wir jetzt unsere Vue Instanz erstellt und untersucht, wie das Datenobjekt verwendet wird, um einen Text innerhalb unserer Anwendung zu steuern. Als Nächstes werden wir einen Blick darauf werfen, wie Vue JS Vorlagen verarbeitet und das virtuelle DOM verwendet. Ich seh dich dort. 8. Vorlagen und das virtuelle DOM: Im letzten Video haben wir uns gezeigt, wie man eine Vue Instanz erstellt und wie man reaktive Daten zu unserer App hinzufügt. Wie verwaltet Vue js Daten, um sie reaktiv zu machen und unsere Seite zu aktualisieren, wenn es eine Änderung gibt? Aber lassen Sie uns einen kleinen Blick darauf werfen, was im Hintergrund vor sich geht. Wenn wir zu den Browser-Entwickler-Tools innerhalb von Chrome gehen, können wir diese mit einem Rechtsklick zugreifen und dann „Inspect“ auswählen. Wenn dann das Div mit der Klasse des Kartenblocks auswählen, können wir einen kleinen Blick auf den Inhalt werfen und wir können sehen, dass der Ereignistitel, die Ereignisdaten und die Ereignisbeschreibung zwischen P-Tags oder Überschriften hinzugefügt wird. Die HTML-Ausgabe unterscheidet sich also von dem, was wir innerhalb des Editors eingegeben haben. Wir haben keine der doppelten geschweiften Klammern Syntax und wir können die Namen unserer Dateneigenschaften, wie Ereignistitel, nicht sehen . Dies liegt daran, dass Vue.js unseren HTML-Code nimmt und hinter den Kulissen eine Vorlage erstellt. Diese Vorlagen, die erstellt wird, werden nicht verwendet, um in das DOM mit gültigem HTML-Code zu rendern. Verwendung einer Vorlage, anstatt das DOM direkt mit unserem Code zu aktualisieren , bietet auch zusätzliche Vorteile. Wenn unsere Daten beispielsweise innerhalb der App aktualisiert werden, ermittelt Vue dann, welche Teile der Vorlage geändert werden. Da Vue genau weiß, welcher Teil geändert wird, wird dieser Änderungsteil der Vorlage nur erneut gerendert. Also, indem Sie nur die minimale Menge an Code in das reale DOM wiedergeben. Dies hat den Effekt, dass unsere Vue.js Anwendungen wirklich schnell machen , da die Manipulation des DOM der Regel eine der teuersten Operationen ist. Wenn Sie mit dem DOM nicht vertraut sind, steht es für Document Object Model. Es ist eine strukturierte Darstellung eines Dokuments. In unserem Fall ist das Dokument die Webseite. In den meisten einfachen Fällen das DOM, das erstellt wird, sieht das DOM, das erstellt wird,wie unser HTML-Code aus , der richtig war und hier sehen wir eine typische visuelle Darstellungen des DOM, das wie ein Baum von Objekten ist, der mit den HTML-Elementen beginnt oben und dann haben wir den Kopfteil und den Körperteil und dann alle unsere verschachtelten Elemente, die im Kopfbereich des Körperabschnitts enthalten sind . Das sollte Ihnen also vertraut aussehen, wenn Sie HTML-Erfahrung gehabt haben. Da erhaltene DOM-Elemente benötigt Zeit, Vue.js verwendet auch das sogenannte virtuelle DOM. Diese Vorlagen, die Vue. js erstellt eine kompilierte in virtuelle DOM-Renderfunktionen. Das virtuelle DOM ist wie eine Kopie des realen DOM und dies ermöglicht den Blick hinter die Kulissen, das reale DOM mit dem virtuellen DOM zu vergleichen und nur dort zu aktualisieren, wo und wann es notwendig ist. Also mach dir keine Sorgen, wenn du nicht ganz verstehst, was das alles für jetzt bedeutet. Wir bekommen viel Übung darüber, wie Vue funktioniert und wie es Vorlagen rendert, während Sie für den Kurs gehen. So funktioniert Vue.js also mit Vorlagen und auch dem virtuellen DOM. Ich wollte dir nur einen kleinen Hintergrund geben, was hinter den Kulissen passiert, wenn wir unseren Code schreiben. Als Nächstes werden wir uns bidirektionale Data Mining mit einer V-Modellrichtlinie ansehen. 9. Zweiseitige Datenanbindung mit dem V-Modell: Wir haben uns die Erstellung unserer Vue Instanz angesehen und die Datenobjekte hinzugefügt. Ich möchte eine neue Dateneigenschaft festlegen, aber dieses Mal werde ich sie mit einer View-Direktive namens v-model verwenden. Direktiven haben ein Präfix -v, und Sie werden sie während dieses Kurses viel sehen. Die speziellen Attribute, die von Vue.JS bereitgestellt werden, die dem DOM mit V-Modell ein spezielles reaktives Verhalten hinzufügen , richten die bidirektionale Datenbindung ein. Wenn Sie mit der bidirektionalen Datenbindung nicht vertraut sind, bedeutet dies nur, dass die Daten in beide Richtungen weitergegeben werden können. In den Beispielen, die wir bisher untersucht haben, können wir die Eigenschaften innerhalb der Datenobjekte aktualisieren, und dann werden diese Änderungen an die Vue übergeben. Mit bidirektionaler Datenbindung können wir dies immer noch tun, aber wir können auch die Vue Elemente wie Eingabefelder aktualisieren und dies aktualisiert dann den Wert unserer Daten. Vue.JS macht diesen bidirektionalen Datenfluss wirklich einfach, indem er uns diese Direktive namens v-model zur Verfügung stellt. Lassen Sie uns beginnen, indem Sie v-model auf unsere Texteingabefelder setzen. Wenn Sie zu unserer index.html Seite gehen, und dann unsere Texteingaben suchen, können wir V-Modell hinzufügen und dann den Namen der Dateneigenschaft zu binden. Also in unserem Fall, „NewnaMetext“. Als nächstes müssen wir NewNameText als Eigenschaft in den Datenobjekten setzen. Auf diese Weise können wir den Anfangswert festlegen, wenn wir möchten, und da es sich um bidirektionales Data Mining handelt, können wir den Wert auch mit dem Eingabefeld aktualisieren. Fügen Sie also in app.js außerhalb des Ereignisobjekts unsere Eigenschaft von NewNameText hinzu: Also werde ich den Anfangswert von NewNameText so einstellen, dass er einer leeren Zeichenfolge entspricht. Wir können einen Anfangswert innerhalb dieses hinzufügen, wenn wir wollen. Um also den Wert von NewNameText zu sehen, müssen wir nur auf die Seite index.html gehen und dann die doppelte geschweifte Klammer Syntax verwenden, um den NewNameText auszugeben. Nun, wenn wir etwas in das Eingabefeld eingeben, sehen wir den Wert von NewNameText sofort aktualisiert. So können wir bidirektionale Datenbindung mit Vue.JS verwenden. Eine wichtige Sache zu beachten ist, dass Vue.JS sich nicht um den Platzhalter oder Anfangswert der Eingabefelder kümmert . Die Daten innerhalb der Vue Instanz haben immer eine Priorität und gelten als korrekt gegenüber dem Anfangswert der Eingabefelder. Wir werden die Verwendung von v-Modell abdecken, das über Eingabetypen und Textbereiche später im Kurs gewogen wird. Moment aber, lassen Sie uns weiter und werfen einen Blick auf Ereignishandler und wie wir die Namen, die zu diesem Eingabefeld hinzugefügt wurden, nehmen und sie in ein Array schieben können. 10. Event-Handhabung und Methoden: Jetzt haben wir uns die bidirektionale Datenbindung angesehen. Ich möchte jetzt den in die Eingabefelder eingegebenen Wert erfassen und ihn dann in ein Array schieben. Dieses Array wird alle Namen in das Eingabefeld eingegeben halten und dann können wir alle diese Namen innerhalb des Anwesenheitsabschnitts unten auflisten. Wir wollen zur app.js gehen und unser leeres Array erstellen. Ich werde eine neue Dateneigenschaft namens Gastname hinzufügen und zunächst werden wir dies auf ein leeres Array setzen. Jetzt wird dies in index.html erstellt. Jetzt müssen wir einen Ereignishandler erstellen, um die Namen an dieses Array zu schieben. Sobald die Submit-Taste gedrückt wurde, verwenden wir in vue.js die V auf Direktive, um DOM-Ereignisse zu hören. Diese DOM-Ereignisse und nicht spezifisch für view.js. Wir können alle DOM-Ereignisse verwenden, die normalerweise für uns verfügbar sind, wie OnClick, Keyup, Keydown und viele, viele mehr. Auch hier, genau wie im letzten Video, in dem wir V-Modell verwenden, hat diese Direktive auch das v-Strich-Präfix. Als nächstes suchen wir unsere Formularelemente und dann als Attribut, können wir unsere V auf Richtlinie hinzufügen. Zuerst fügen wir V ein, und dann nach dem Doppelpunkt fügen wir den Namen des Ereignishandlers hinzu, den wir auslösen möchten. In unserem Fall werden wir für das Submit-Ereignis zu hören und dann fügen wir den Namen der Methode hinzu, die wir ausführen möchten, sobald das Formular gesendet wurde. Nach dem Namen der Ereignisse, in unserem Fall von Mythen, können wir auch Ereignismodifikatoren hinzufügen. Ein gängiger Ereignismodifikator besteht darin, die Standardwerte zu verhindern. Wenn Sie JavaScript für die Arbeit mit Eingaben und Formularen von allen verwenden, haben Sie möglicherweise bereits event dot prevent default verwendet. Dadurch wird das Standardverhalten gestoppt, bei dem für die Schaltfläche „Senden“ die Seite aktualisiert werden soll. Nur wenige machen es für uns wirklich einfach, das Verhalten an unsere Ereignishandler zu adressieren , indem wir es einfach nach dem Ereignishandlernamen wie folgt hinzufügen. Verhindern Sie, dass wir verhindern, dass unsere Daten verloren gehen, wenn die Seite aktualisiert wird. Dies auch über Event-Modifikatoren, die wir später in diesem Kurs behandeln werden. Moment haben wir das Formular hinzugefügt, das als Name unserer Methode eingereicht wurde, aber noch nicht in unserer View-Instanz erstellt wurde. Lassen Sie uns dies jetzt über in der App dot js tun. Genau wie beim Hinzufügen der Dateneigenschaftenobjekte innerhalb der View-Instanz können wir auch das Schlüsselwort reservierte Methoden verwenden. Methoden nimmt auch ein Objekt ein, so dass wir eine Reihe von geschweiften Klammern öffnen. Im Inneren können wir unsere erste Methode der eingereichten Formulare hinzufügen. Diese Methode wird jedes Mal ausgelöst, wenn das Formular gesendet wird. Formular eingereicht ist eine Funktion und innerhalb dieser Funktion können wir mit dem Hinzufügen eines Konsolenprotokolls beginnen, nur um zu überprüfen, dass dies in Ordnung ist. Wir möchten an der Konsole den Wert des neuen Namens Text protokollieren, mit dem Eingabefeld verknüpft ist. Dieses Schlüsselwort ermöglicht es uns, auf alle Eigenschaften innerhalb der View-Instanz zuzugreifen. Um den neuen Namen Texteigenschaft zuzugreifen, verwenden wir diesen Punkt neuen Namen Text. Das haben wir im Laufe des Kurses viel gesehen. Jetzt gehen wir zurück zur App und gehen dann in die Konsole. Wir können einen Namen innerhalb des Eingabefeldes eingeben, und wir sollten sehen, dass der Wert in der Konsole erscheint. Jetzt wissen wir, dass diese Methode in Ordnung ausgelöst wird. Wir können nun unsere Methode beenden, indem wir den neuen Name-Wert auf das Gast-Name-Array schieben. Lassen Sie uns zuerst das Konsolenprotokoll entfernen, und an dieser Stelle können wir diesen Punkt-Gastnamen auswählen , der der Name unseres Arrays ist. Da dies ein Array ist, können wir die Push-Methode verwenden. Dann in den Klammern, werden wir vue.js sagen, Was wir auf das Array schieben wollen. In unserem Fall wollen wir den Wert der Eingabefelder schieben, so dass wir unser Wort an diesem Punkt auswählen können neuen Namen Text. Dann, um diese Methode zu beenden, ist das letzte, was ich tun möchte, sobald ein Name zum Array hinzugefügt wird. Wir möchten nur das Eingabefeld löschen, indem diesen neuen Punktnamentext wieder auf eine leere Zeichenfolge setzen. Um die Werte zu sehen, die innerhalb des Arrays sind, können wir Textinterpolation wieder verwenden, oder die doppelte geschweifte Klammern Syntax, um dies innerhalb der index.html auszugeben. Wenn wir nach der Überschrift der Ebene vier suchen, die noch keinen Namen hinzugefügt hat, können wir die geschweifte Klammer Syntax verwenden, um das Gastnamen-Array auszugeben. Jetzt speichern wir das und wir gehen über Chrome und aktualisieren den Browser. Wir können nun Namen in das Eingabefeld hinzufügen und jetzt haben wir auf Senden geklickt. Dies sollte nun auf das Array übertragen und dann auf den Bildschirm ausgegeben werden. Wir haben die neuen Namen nun dem Array hinzugefügt, was großartig ist. Die Namen werden nur so angezeigt, wie sie sich innerhalb des Arrays befinden, so dass es im Moment nicht sehr gut aussieht. Aber keine Sorge, wir werden das im nächsten Video beheben. Wir werden einen Blick auf die Listen-Rendering mit For-Schleifen. 11. Listen-Rendering: Wir nehmen nun die Benutzernameneingaben und drücken sie zu einem Array, wenn der Submit-Button gedrückt wird. Wir haben dies getan, indem wir dem Formular einen Ereignis-Listener hinzufügen und dann eine Methode aufrufen, wenn das Formular gesendet wird. Diese Methode innerhalb der Vue Instanz ist ein JavaScript-Code, der den Inhalt des Eingabefelds in neuen Namenstexten gespeichertnimmt des Eingabefelds in neuen Namenstexten gespeichert und es dann an dieses GuestName Array schiebt. Jetzt haben wir das guestName-Array, das wir durch diese Namen schleifen und dann auf den Bildschirm rendern wollen . Vue.js, wie normales JavaScript kann dies mit einer for-Schleife tun. Vue macht jedoch das Erstellen einer for-Schleife viel einfacher und sauberer als die Verwendung von Vanilla JavaScript. Alles, was wir tun müssen, ist eine V-for-Richtlinie wie diese zu erstellen. Wenn wir gehen über die Index.html Seite und dann scrollen Sie nach unten in Richtung der Bombe. Wenn wir nach dem div mit einer Klasse von Karten-Erfolg gerundet und Name-Box suchen, werden wir unsere for-Schleife zu diesem div hinzufügen. Das Hinzufügen dieser for-Schleife ist so einfach wie das Hinzufügen von Attributen, genau wie zuvor, wenn wir v-model verwendet haben, aber dieses Mal verwenden wir v-for, und dann, was gesetzt ist, ist gleich dem Namen in guestName. Dieser Vorname liegt also ganz bei Ihnen, Sie können ihn benennen, was Sie wollen. Es ist nur ein Alias für jedes Array-Element, das eine Schleife durchläuft, guestName ist der Name des Quell-Arrays, also ist es derjenige, den wir gerade erstellt haben, und es gibt den Inhalt dieser for-Schleife aus, wir verwenden die Interpolation erneut. So sehen Sie doppelte geschweifte Klammern und dann geben wir den Namen ein , den wir in der for-Schleife verwendet haben. So können wir jetzt speichern, aktualisieren Sie den Browser und jetzt, wenn wir zu den Eingaben gehen, können wir beginnen, Namen hinzuzufügen und wir sehen sie jetzt auf dem Bildschirm ausgegeben , aber dieses Mal mit einer for-Schleife v-for kann auch über Elemente hinzugefügt werden. Wir sind nicht nur darauf beschränkt, ein div zuzugeben. Es kann zu einer Spanne hinzugefügt werden, Absatz-Tags oder alles, was Sie möchten. Also jetzt sehen wir den Inhalt der Array-Anzeige zweimal, einmal mit der for-Schleife und dann einmal aus dem letzten Video, wo wir den guestName/ mit dem guestName innerhalb der geschweiften Klammern ausgegeben haben und das speichern und jetzt sind wir einfach mit den Inhalt der for-Schleife. So einfach ist es, eine for-Schleife mit Vue.js zu erstellen. Lassen Sie uns nun zum bedingten Rendering übergehen, wo wir uns if else Anweisungen mit Vue ansehen werden. 12. Bedingtes Rendering in Vue: Unsere App kommt nun gut. Wenn wir dem Eingabefeld einen Namen hinzufügen und „Submit“ drücken, wird der Name dem teilnehmenden div unten hinzugefügt. Wie Sie dort sehen können, haben wir noch den Text, der noch keine Namen enthält. Wir wollen nun das bedingte Rendering betrachten. Bedingtes Rendern ist nicht so kompliziert, wie es klingen mag. Es wird einfach einige Inhalte abhängig von den Umständen wie eine normale JavaScript-if-else-Anweisung rendern , wenn Sie mit diesen vertraut sind. In unserem Fall, wenn es Namen innerhalb des Gastnamen-Arrays gibt, möchten wir sie unten anzeigen. Wenn es keine Namen innerhalb des Arrays gibt, möchten wir nur den Text zeigen, der noch keine Namen hinzugefügt hat. Wir können dies innerhalb der index.html Seite hinzufügen. Wenn wir das div mit der Klasse des Kartenblocks lokalisieren, innerhalb unseres div mit der Klasse des Kartenblocks haben wir innerhalb unseres div mit der Klasse des Kartenblockszwei divs darin. Die erste ist, wo wir die Namen durchlaufen und sie innerhalb der div-Tags anzeigen möchten . Ich werde diesem div eine if-Anweisung hinzufügen. Vue macht es uns einfach, mit der v-if-Richtlinie zu tun. Sobald Sie dies als Attribut hinzufügen, möchten wir dann überprüfen, ob die Länge des Gastnamen-Arrays größer als Null ist. Wenn es irgendwelche Namen innerhalb des Arrays gibt, wird die Bedingung wahr und das div wird dann auf dem Bildschirm gerendert. Andernfalls, wenn das Array leer ist, dann ist die Bedingung falsch. Das folgende div wird gerendert, wenn wir eine v-else-Anweisung hinzufügen. Also lassen Sie uns v-else zu dem folgenden div hinzufügen. Damit die v-else funktioniert, muss sie sofort den Elementen mit der v-if-Direktive folgen. Wenn es zum Beispiel ein anderes div zwischen diesen beiden gäbe, würde die else-Anweisung nicht funktionieren. Geben Sie, dass ein Speichern und Kopf über den Browser und geben Sie, dass eine Aktualisierung. Jetzt sehen wir die Aussage, dass noch keine Namen hinzugefügt wurden. Dann, wenn wir zu unserem Eingabefeld gehen und einen Namen hinzufügen, sehen wir, dass der Name hinzugefügt wird und auch der Text entfernt wird. Solche funktionieren gut und ich möchte eine normale JavaScript-if-Anweisung zu unserem Formular eingereichten Methode hinzufügen und der Grund dafür ist, wenn wir zu unserem Formular gehen, und wir geben einen Namen, können wir zu der Liste hinzugefügt sehen. Also, das ist in Ordnung. Wenn wir jedoch nur zur Eingabe gehen und die Eingabetaste ohne einen Namen drücken, können wir immer noch sehen, dass etwas zum Array hinzugefügt wird. Abgesehen davon wird if-statement sicherstellen, dass Name eingegeben werden muss, bevor er an das Array gepusht wird. Wir können dies über in der Form gesendet Methode in der Datei app.js tun. Innerhalb des Funktionskörpers werden wir den vorhandenen Code mit einem if-Anweisungen konstruieren und die Bedingung, die wir überprüfen möchten, ist, ob this.NewNameText. Die Länge ist größer als Null oder wenn einige Zeichen eingegeben wurden, dann wollen wir weitergehen und dies auf das Array schieben. Lassen Sie uns das eine gespeicherte geben und testen Sie das im Browser. Wenn wir auf der Formulareingabe „Enter“ drücken, sehen wir, dass dem Array kein neuer Name hinzugefügt wurde. Lassen Sie uns einfach einen neuen Namen hinzufügen und testen, der in Ordnung ist. Da gehen wir, so dass alle p ist in Ordnung. Das letzte, was ich in diesem Video tun möchte, ist, anzuzeigen, wie viele Gäste teilnehmen oder wie viele Namen wir innerhalb des Arrays haben. Sie können sehen, ob Sie nur über den Namen nachschlagen, wir können sehen, dass es ein div mit der Klasse der Kartenkopfzeile mit einem anwesenden Abschnitt gibt. Innerhalb der Klammern werde ich die doppelten geschweiften Klammern hinzufügen und dann herausfinden, wie viele Namen innerhalb des Gastnamen-Arrays sind. Wir geben einfach guestName.length ein und dies wird ausgegeben, wie viele Elemente sich innerhalb des Arrays befinden. Lassen Sie uns das speichern und einige Namen zum Array hinzufügen und sehen, ob das funktioniert. Großartig. So sehen wir, dass sich mit jedem Namen um eins erhöht. Jetzt funktioniert das, weil die Punktlänge nur eine JavaScript-Eigenschaft ist und wir jedes Javascript hinzufügen können , das wir innerhalb dieser doppelten Klammern wollen. Wir beschränken uns nicht nur auf die Ausgabe von Daten aus unserer Vue Instanz. Zum Beispiel, wenn wir 8 plus 10 auch innerhalb der doppelten Klammern hinzufügen, und dann zu unserer App gehen wir sehen, dass 10 zu jeder Zahl hinzugefügt wird. Also entfernen wir das einfach, weil es für unsere App nicht benötigt wird. Hoffentlich können Sie jetzt sehen, dass wir jetzt Vue Daten und auch Vanilla JavaScript mischen können und wir werden dies später im Kurs genauer betrachten, aber im Moment ist dies, wie bedingtes Rendern oder if-else-Anweisungen in Vue JS funktionieren und Sie können jetzt wirklich sehen, wie einfach es ist, mit ihnen zu arbeiten. 13. Anbindung von Elementen an Eigenschaften: Ich möchte Ihnen jetzt zeigen, wie Sie eine Direktive namens v-bind verwenden. Wir verwenden diese Direktive, um mit normalen HTML-Attributen wie Klasse, Quelle und den href Attributen zu arbeiten . Dies sind alles nur normale HTML-Attribute. Wir können jedoch keine reaktiven Daten an sie weitergeben, indem wir die doppelte geschweifte Klammer Syntax verwenden. also in der index.html Wenn wiralso in der index.htmldas Ereignisdatumsdiv mit der Klasse des Kartenheaders lokalisieren, würde es versuchen, eine neue Klasse mit dem Namen [unhörbar] hinzuzufügen und dies mit einer doppelten geschweiften Klammer Syntax hinzuzufügen, wird dies nicht wirklich funktionieren. Um dies zu demonstrieren, lassen Sie uns eine neue Eigenschaft über in app.js innerhalb der Datenobjekte hinzufügen, direkt unter dem guestName-Array. Also lassen Sie uns 'FormSubmitClass' hinzufügen. Wir werden dies verwenden, um einen neuen Klassennamen hinzuzufügen, wenn unser Formular gesendet wird. Um die Hintergrundfarbe der Karte div und auch der blaue Knopf auf grün zu ändern, werde ich dies zunächst als leere Zeichenfolge festlegen. Um damit zu beginnen, weil wir nur eine Klasse hinzufügen möchten, wenn das Formular tatsächlich gesendet wird, so dass unten in der Form eingereichten Methode, ganz unten, werde ich die FormSubmitClass hinzufügen, und dann können wir dies als etwas Neues festlegen jedes Mal, wenn das Formular gesendet wird. Also werde ich dies auf eine Textzeichenfolge von Submitted setzen. Also jetzt jedes Mal, wenn ein Formular gesendet wird, wird FormSubmitClass auf den Wert von SubmitClass gesetzt werden. Jetzt unten im CSS können wir die SubmittedClass so einstellen, dass sie eine Hintergrundfarbe von grün hat. Also lasst uns das speichern und zum Browser gehen. So können Sie sehen, ob wir aktualisieren und dann auf die Schaltfläche Senden drücken, dass sich die Hintergrundfarbe nicht ändert. Dies ist also erwartetes Verhalten, weil wir zuvor erwähnt haben, dass die Karten dynamische Daten als Attribut hinzufügen. Also, um diese Klasse in HTML anzuwenden, müssen wir zwei Dinge tun. Zuerst müssen wir die geschweiften Klammern aus der Klasse entfernen und nur die Dateneigenschaft innerhalb der Ursachen haben. Dann müssen wir das v-Bind-Präfix zum Attributnamen hinzufügen. Also, jetzt ist es erwähnenswert, wie Sie innerhalb dieses Elements sehen können , haben wir zwei Klassenattribute. Eine ist die statische HTML-Klasse, die Sie immer noch verwenden können , und auch die, die wir gerade mit v-bind hinzugefügt haben, die reaktiv ist und unter der Kontrolle von view.js steht. Wir können dieses Attribut auch auf mehr als ein Element binden, auch. Lassen Sie uns also auch die FormSubmitClass zum SubmitButton hinzufügen. Dies bedeutet auch, dass, wenn sich unsere Daten ändern, das Update auch überall reflektiert wird . Also, jetzt lasst uns das mal ausprobieren. Wenn wir das speichern und dann den Browser aktualisieren und einen Namen hinzufügen, können wir sehen, sobald das Formular gesendet wird, dass wir die neue Hintergrundfarbe erhalten. Als eine kurze Zusammenfassung dessen, was wir dort gemacht haben, gingen wir in die HTML-Seite und fügten dann eine Klasse von FormSubmitClass hinzu. Dann innerhalb unserer Datenobjekte setzen wir diese FormSubmitClass ursprünglich leer zu sein. Das bedeutet also, dass anfangs keine neuen Stile hinzugefügt werden. Wir haben dann seine leere Zeichenfolge geändert, um den Text von Submitted zu sein, direkt unterhalb der formSubmitted Methode. Jedes Mal, wenn das Formular gesendet wird, wird der Text von Submitted als Klasse hinzugefügt. Wir sind also nicht darauf beschränkt, nur an Klassen zu binden, sondern auch mit jedem normalen HTML-Attribut kombiniert, wie wir ein Quellattribut hinzufügen können, wenn wir mit Bildern arbeiten und den Bilddateipfad durch Ansicht gesteuert haben. Das gleiche mit dem Hinzufügen der Stil-Attribute, und das ist, was wir im nächsten Video betrachten werden. 14. Anbindungsstile: Jetzt wissen wir, wie man die v-bind-Direktive verwendet, um vue.js mit HTML-Attributen zu binden. Schauen wir uns nun an, wie man die gleiche Direktive verwendet, die die Stil-Attribute. Nein, wir können keine doppelten geschweiften Klammern oder die Interpolation übergeben, die Sie im letzten Video hingewiesen haben. Dieses Mal können wir jedoch die einzelnen geschweiften Klammern verwenden. Dies liegt daran, dass wir in einem Stil Objekte und Objekte in einem JavaScript übergeben , das von geschweiften Klammern umgeben ist. Genau wie unser Datenobjekt innerhalb der View-Instanz. Wenn Sie verwendet haben, reagieren Sie. JS vorher, diese Art eines Inline-Stils wird Ihnen vertraut aussehen. Also, wenn wir zu unserer CSS-Datei für die Zeile gehen, und klicken Sie dann auf den Rand oben 25 Pixel. Wenn ich das außerhalb des CSS nehmen und in unserem HTML platzieren möchte. Also auf der Indexseite, wenn wir das div mit der Klasse der Zeile lokalisieren, die knapp über der Ebene eins Überschrift der Gästeliste liegt. Ich binde Stilattribute an diese Zeile und setze dann auch den Wert innerhalb eines Objekts und füge dann in Rand oben ein. Es wird es einfach aus dem CSS kopieren. Also lasst uns das speichern und uns mal sehen, was passiert. Wenn wir also den Browser aktualisieren, können wir sehen, dass es eine leere Seite gibt. Das scheint also nicht zu funktionieren. Wenn wir mit der rechten Maustaste klicken und zu inspizieren gehen, um die Entwicklungstools zu öffnen, können wir in der „Konsole“ sehen, dass eine rote Fehlermeldung angezeigt wird. Also erhalten wir diesen Fehler, weil dies JavaScripts ist, Zwischen den Klammern und wir müssen die CSS-Eigenschaften mit Kamel Fall benennen. Das bedeutet, dass das erste Wort Kleinbuchstaben ist und dann jedes folgende Wort mit einem Großbuchstaben wie diesem beginnt. Also Rand ist Kleinbuchstaben, gefolgt von oben mit einem T Dann beachten Sie auch, dass der Wert von 25 Pixel eine Zeichenfolge ist. So können wir dies in unsere Zitate einpacken und das Semikolon entfernen. Mal sehen, wie das jetzt aussieht. Speichern Sie also und gehen Sie dann zum Browser. So sieht alles so aus, wie es sollte, was großartig ist. Es gibt auch eine andere Möglichkeit, Stile zu unserer App hinzuzufügen. Wir können unser Styling auch innerhalb der View-Instanz als Dateneigenschaft deklarieren. Also zurück in der App. j s, unterhalb der Form eingereicht Klasse, die wir im letzten Video erstellt. Ich werde eine neue Datumseigenschaft namens „AppStyles“ hinzufügen. Dies wird auf ein Objekt gesetzt werden. Dann werde ich in diesem Objekt die gleiche Klasse von Rand oben hinzufügen, wieder den Kamelfall verwenden und auf 25 Pixel setzen. Wie bereits erwähnt, können wir diese reaktiven Daten nicht mit den doppelten geschweiften Klammern in unser HTML einfügen. Wir konnten keine doppelten geschweiften Klammern mit irgendwelchen Attributen verwenden. Dazu gehören auch die Stilattribute. Stattdessen können wir es im HTML in die Zitate einfügen. Wir entfernen das vorhandene Objekt und fügen dort unsere neuen App-Stile hinzu. Dieser HTML-Code verweist auf Daten innerhalb unseres App-Style-Objekts. Natürlich können wir auch weitere Stile innerhalb dieser Objekte hinzufügen, wenn wir wollen. Oder Sie können dieses Objekt mehrfach in unserer App verwenden. Dieser besondere Stil gilt für alle unsere freien div's mit der Klasse der Zeile. Also lassen Sie uns dies auf allen unseren kostenlosen Div's wiederverwenden, um das richtige Styling zu erhalten. Also werde ich die Stil-Eigenschaft kopieren. Ich füge es in der zweiten Reihe ein. Dann mach das gleiche für die dritte Reihe. Also lasst uns das testen. Klicken Sie auf Speichern und gehen Sie dann zum Browser. Wir können sehen, dass die App wieder normal blickt. Also nur um zu überprüfen, das funktioniert alles in Ordnung. Ich gehe noch einmal zum AppStyles Objekt und füge eine rote Farbe hinzu. Wie Sie sehen können, werden alle Änderungen, die Sie am Stilobjekt vornehmen, in der gesamten App geändert. Dies ist also ein paar verschiedene Möglichkeiten, CSS zu unserer App hinzuzufügen. Wir werden dies auch im nächsten Projekt erneut verwenden. Aber im Moment gehen wir zum nächsten Video über. Wir werden uns die Kurzschriften-Syntax ansehen. 15. Vue Syntax-Kürzel: Wie es beginnt, größere Projekte zu bauen, sowohl später in diesem Kurs als auch hoffentlich auf eigene Faust in der Zukunft. Es lohnt sich, ein paar Möglichkeiten zu kennen, unseren Code ein wenig kompakter zu machen. Sogar in der kleinen App haben wir schon ein paar Mal das V eingeschaltet und V bindet. Aus diesem Grund bietet view uns eine kleine Abkürzung, um die Syntax kompakter zu machen. Für die V von unteraktiv, alles, was wir tatsächlich tun müssen, ist V-Binds zu entfernen, wobei nur der Doppelpunkt und das Attribut, das wir binden. Öffnen wir unsere index.html und lassen Sie uns fortfahren und alle unsere Bindungsattribute durch die Kurzschriften-Syntax ersetzen . Ich zeig dir den ersten. Wenn wir in die erste Zeile gehen, finden wir es den Stil der App-Stile. Wir müssen nur V-Bindung entfernen, nur den Doppelpunkt und Stil verlassen, und natürlich ist dies etwas, das Sie voran gehen und sich selbst tun können, wenn Sie das Video pausieren und für die Indexseite gehen und uns loslegen wollen , und dann natürlich wieder kommen, wenn sie fertig sind. Ich werde weiter unten bewegen, oben und ändern das. Wir haben auch die zweite Zeile direkt unten mit den App-Styles zu. Lasst uns das ändern. Wir haben nicht die „Kartenkopfzeile“ mit der Klasse der Form „Klasse einreichen“. Lassen Sie uns das ändern und dann nach unten scrollen. Wir haben auch die Klasse auf der Eingabeseite, und dann ein wenig weiter unten sieht es so aus, als wäre die letzte Zeile mit der Klasse der „App-Stile“. Lasst uns das ändern. Aber ist auch eine Abkürzung für die Verwendung von v-on. Wir haben v-on innerhalb der Formularelemente verwendet , um jedes Mal eine Methode auszulösen, wenn das Formular eingereicht wurde. Anstatt v-on zu verwenden, können wir dies einfach durch das at Symbol ersetzen. Gehen wir weiter und ersetzen Sie das jetzt. Sagen wir dies und überprüfen Sie einfach, dass es noch in der App funktioniert. Unser Stil scheint auch zu funktionieren. Es sieht so aus, als ob die Klassen es immer noch binden, und jetzt, wenn wir einen Namen zur Formulareingabe hinzufügen, sehen wir, dass der Name immer noch zur Gästeliste hinzugefügt wird, was bedeutet, dass die Schaltfläche „Senden“ noch funktioniert. Die Kurzschriften-Syntax ist optional und der böse Weg ist völlig in Ordnung. Als Ansicht befasst sich JS immer im Hintergrund. Aber für den Rest dieses Kurses werden wir die kürzeste Syntax verwenden, nur um unseren Code kompakter zu halten. 16. So exportierst du Text und HTML: Bisher haben wir in diesem Kurs reaktive Daten mithilfe der Interpolation oder der doppelten geschweiften Klammer Syntax ausgegeben . Jetzt möchte ich Ihnen ein paar weitere Direktiven vorstellen , auf die Sie beim Ausgeben von Daten sehr nützlich stoßen können. Erstens ist ein einfacher V-Text genannt. V-Text wird verwendet, um die Elemente Textinhalt zu erhalten. Textinhalt, setzt oder gibt den Textinhalt eines Elements. Wir können es als Alternative zu doppelten geschweiften Klammern verwenden, um den Text so auszuführen , wenn wir zu unserer Indexseite gehen und den Kartenblock finden, der die Ereignisinformationen enthält. Innerhalb der Ebene für Überschrift, können wir den v-Text als Attribute hinzufügen und auch dies gleich event.event title. Sie können feststellen, dass wir den Titel event.event zweimal haben; einer verwendet v-Text und einer verwendet die ursprüngliche Textinterpolation. Wenn wir jedoch zum Browser gehen und aktualisieren, können wir diesen Titel nur einmal sehen. Dies liegt daran, dass der ursprüngliche Titel verwenden müssen doppelte geschweifte geschweifte Klammern durch Festlegen der Textinhalt-Attribute ersetzt werden. Wir können dies beweisen, indem wir zu v-Text gehen und dies in event.eventTitle2 ändern. Wenn wir dann zu app.js gehen, können wir unser EventTitle2 direkt unter dem ursprünglichen Ereignistitel hinzufügen und dies auf eine Zeichenfolge von V-Text-Ausgabe setzen , damit wir den Unterschied deutlich sehen können. Sobald Sie hinzugefügt haben, lassen Sie uns zum Browser gehen und dann aktualisieren. Wir können immer noch sehen, dass der V-Text Priorität hat, obwohl die doppelten geschweiften Klammern noch vorhanden sind. Die nächste Direktive, die ich betrachten möchte, ist v-html. V-Texte, die wir gerade angesehen haben, aktualisieren die Elemente Textinhalt. Während wir v-html verwenden, erhalten wir die Elemente in HTML. Sie können mit bestimmten in HTML vertraut sein, wenn Sie JavaScript bereits verwendet haben. v-html, wenn Sie verwendet haben, um echtes HTML auszugeben. Wenn wir versucht haben, HTML-Code innerhalb der doppelten geschweiften Klammern hinzuzufügen, wird es als Klartext interpretiert. Werfen wir einen Blick auf dies in Aktion, wenn wir zurück auf die Indexseite mit unseren Event-Informationen gehen. Wenn wir den Text ausschneiden oder den Namen der Gästeliste für exklusive Angebote hinzufügen. Könnte das auch. Wenn wir dann auf die app.js gehen, können wir eine neue Datumseigenschaft von Anmeldetexten hinzufügen und diese dann als Zeichenfolge einfügen, speichern Sie das und dann, wenn Sie etwas Inhalt hinzufügen, wie zum Beispiel das Hinzufügen der m-Tags um das Wort exklusiv. Jetzt gehen wir und machen Show Text und HTML. Lassen Sie uns versuchen, dies auf der Indexseite zu rendern. Wenn wir zurück gehen, wo wir gerade den Text ausschneiden und wir werden versuchen, dies mit den doppelten geschweiften Klammern auszugeben, also event.SignupText und speichern Sie das dann. Wenn wir den Browser aktualisieren, wird der HTML-Code als Text ausgegeben, so dass wir die HTML-Tags sehen können. Das ist nicht das, was wir wollen. Statt dies korrekt anzuzeigen, müssen wir den Anmeldetext zur v-html Direktive hinzufügen. Fügen wir v html als Attribut hinzu und entfernen Sie dann die geschweiften Klammern und jetzt trage ich „Speichern“. Jetzt, wenn wir die Daten aktualisieren, wird als HTML gerendert und wir haben jetzt das Wort exklusiv betont, wie wir beabsichtigt haben. müssen wir jedoch vorsichtig sein Bei der Verwendung von v-html aus Sicherheitsgründenmüssen wir jedoch vorsichtig sein. Überall dort, wo HTML dynamisch zu unserer Website hinzugefügt wird, sollten wir v-html nur für vertrauenswürdige Inhalte verwenden. Wir dürfen nicht zulassen, dass sie verwendet wird, wenn Inhalte von einem Endbenutzer bereitgestellt werden, da dies zu potenziellen Cross-Site-Scripting-Angriffen führen kann . Auch wenn wir nur mit Text arbeiten, kann die Verwendung von v-Text zum Abrufen des Textinhalts sicherer sein und auch gegen diese Angriffe helfen. Es kann auch eine bessere Leistung für Nur-Text 2 haben, da ein Text nicht als HTML übergeben wird. Schließlich ist die letzte Direktive, die ich Ihnen in diesem Video zeigen möchte, v-once. Dies kann verwendet werden, um Daten nur einmal zu rendern. Wenn die Daten mit View gerendert wurden, werden die Elemente oder Komponenten nicht aktualisiert oder neu gerendert, wenn die Daten unverändert sind. Dies kann verwendet werden, um die Leistung für unsere App zu optimieren, um unnötiges erneutes Rendern zu vermeiden. Unser Event-Titel kann dafür ein guter Anwendungsfall sein, da wir erwarten können, dass der Name nach der Erstellung eines Ereignisses gleich bleibt. Alles, was wir tun müssen, um dieses einzige Rendering zu ermöglichen , ist, die v-once Direktive zu den Elementen hinzuzufügen. Lassen Sie uns dieses v-Text-Attribut entfernen und es dann durch v-once ersetzen. Dies bedeutet nun, dass Daten nur einmal geladen werden und nicht für zukünftige Datenänderungen. Wir können derzeit nicht demonstrieren, da wir keinen Webserver verwenden, um unsere Seite im Moment zu bedienen , so dass die Daten sowieso nicht von der View-Instanz aktualisiert werden. Wir haben einfach die Indexseite geöffnet, um sie im Browser anzuzeigen. Wir können dies in Aktion in einem späteren Video sehen, wo wir einen Entwicklungsserver verwenden werden. Aber für jetzt können Sie sehen, dass dies verfügbar ist, wenn nötig. So können wir die v-Text-, v-HTML- und v-once Direktiven verwenden . Als nächstes schauen wir uns eine Alternative zu v-if an, die wir uns früh in diesem Abschnitt angesehen haben. 17. V-if oder V-Show: Wir haben uns vorhin die V-if-Richtlinie in diesem Abschnitt angesehen. Dies erlaubte uns, Gastnamen im div am unteren Rand der Seite anzuzeigen , wenn irgendwelche Namen existieren. Andernfalls wird der Text angezeigt, der noch keine Namen hinzugefügt hat. Es gibt auch eine alternative Syntax, die Vue.js uns zur Verfügung stellt genannt v-show. Dies ist auch eine Direktive, die bedingt einen Inhalt rendert, genau wie bei der Verwendung von v-if. Es gibt jedoch einige Unterschiede, die wir uns jetzt ansehen werden. Zuerst, wenn wir auf unsere Indexseite gehen und nach den v-if-Anweisungen suchen, ändert sich das in v-show. Wenn wir das speichern und dann zu unserer App gehen und dann auf Aktualisieren drücken, das erste, was wir sehen, ist der Text in der anderen Bedingung verschwunden. Dieses Verhalten wird erwartet. Eine v-else-Anweisung kann natürlich nur einer v-if-Anweisung folgen. Wenn wir zur Konsole gehen, können wir sehen, dass dieser Fehler darin hervorgehoben wird. Hinter den Kulissen gibt es einen weiteren Unterschied, der sich auf die Art und Weise bezieht, wie das Element gerendert wird. Wenn v-if verwendet wird, wird das Element, mit dem es verknüpft ist , dem DOM hinzugefügt, wenn die Bedingung wahr wird, dann wird es zerstört oder vollständig aus dem DOM entfernt, wenn die Bedingung falsch wird. Da v-if nur bei Bedarf gerendert wird, kann es beim Rendern Zeit sparen, wenn dies ein Problem ist. V-Show funktioniert ein wenig anders. Das Element v-show ist angehängt, wird immer gerendert, unabhängig davon, ob die Bedingung wahr oder falsch ist. Es wird dann ein- oder ausgeschaltet, indem die CSS-Anzeigeeigenschaft geändert wird. Werfen wir einen Blick auf das in Aktion. Wenn wir die Entwickler-Tools öffnen und zu Inspect gehen, können wir dies in Aktion sehen, indem wir das div innerhalb des card-block div auswählen, dass die display-Eigenschaft auf none gesetzt ist, was den Effekt hat, dass die Elemente ausgeblendet werden. Wenn wir dann einen Namen in das Eingabefeld hinzufügen, sehen wir, dass die display-Eigenschaft von none dann entfernt wird und wir sehen nun, dass die div-Tags mit dem Namen hinzugefügt werden. Für diese spezielle App müssen wir auch die v-else-Direktive verwenden. Also werde ich bei der Verwendung von v-if und v-else bleiben. Verwendung von v-show ist jedoch eine gute Alternative, wenn Sie Ihre Elemente innerhalb des DOM behalten und sie einfach ausblenden möchten , anstatt bei Bedarf vollständig zu zerstören und erneut in das DOM zu rendern. Der Leistungsunterschied zwischen dem Umschalten der Anzeigeeigenschaft und dem Rendern mit v-if ist möglicherweise nie ein Problem für Sie, aber es lohnt sich, den Unterschied zu kennen, insbesondere bei größeren Apps. 18. Verwendung von Javascript-Ausdrücken: Innerhalb unserer App haben wir einige interaktive Daten angezeigt, indem wir Datumseigenschaften in unserer View-Instanz hinzufügen. Dann werde ich sie mit den doppelten geschweiften Klammern hineinlegen. Wenn Sie diese geschweiften Klammern verwenden, können wir mehr tun, als nur den Namen der Datumseigenschaft hinzuzufügen , die Sie innerhalb unserer Vorlagen anzeigen möchten. Wir können tatsächlich JavaScript-Ausdrücke nutzen oder sogar unsere Ansichtsdaten mit regulärem JavaScript kombinieren. Lassen Sie uns zuerst zu unserer app.js gehen und fügen Sie einige Namen in unser Gäste-Name-Array. Nur um zunächst anzuzeigen, können Sie beliebige Namen verwenden, die Sie wollen. Ich füge die Namen von James, Chris und Sam hinzu. Wenn Sie verschiedene Namen verwenden, stellen Sie sicher, dass diese Namen und vermischt. Sie sind nicht in alphabetischer Reihenfolge. Wir werden bald sehen, warum. Speichern Sie das. Wenn wir zum Browser gehen, können wir sehen, dass diese Namen anfänglich hinzugefügt werden. Nun gehen wir zu unserer Index-Seite und werfen einen Blick darauf, wie wir JavaScript-Ausdrücke innerhalb unserer doppelten geschweiften Klammern verwenden können . Derzeit innerhalb der Vollschleife geben wir den Namen aus. Wir können dies mit JavaScript kombinieren, wie die Verwendung von zwei Kleinbuchstaben. Dadurch wird sichergestellt, dass jede Kapsel innerhalb des Namens in Kleinbuchstaben geändert wird. Werfen wir einen Blick auf das innerhalb des Browsers. Jetzt können wir sehen, dass der erste Buchstabe jedes Namens jetzt Kleinbuchstaben ist. Dies ist eine Mischung aus der Verwendung von vue.js und regulärem JavaScript. Wir können auch noch weiter gehen und eine Zeichenfolge bis zum Ende dieser hinzufügen. Name Punkt zwei Kleinbuchstaben, dann plus eine Reihe von ist genial. Geben Sie das mal. Dann in Chrome, lasst uns aktualisieren. Jetzt haben wir die Zeichenfolge am Ende des Namens hinzugefügt. Es gibt jedoch eine Einschränkung, dass wir nur einen einzelnen JavaScript-Ausdruck verwenden können. Wir können Dinge wie eine if-else-Anweisung innerhalb von hier nicht verwenden. Es ist auch nicht der Weg zu gehen, wenn wir immer wieder denselben Code verwenden. Beschränkung der Menge an JavaScript, die wir innerhalb unserer Vorlagen verwenden können , macht unseren Code mehr überschaubar. Als dann müssen wir die gesamte komplexe Logik innerhalb der View-Instanz verschieben. Dies macht unseren Code wiederverwendbarer. Wir können es bei Bedarf in verschiedenen Bereichen unserer App wiederverwenden. Wir werden uns im nächsten Abschnitt ansehen, wie komplexere Bedingungen behandelt werden können. Dies ist jedoch nützlich, um einfache Aufgaben auszuführen. Wir haben auch Zugriff auf die volle Leistung von JavaScripts, auch wenn Sie vue.js Daten nicht verwenden. Fügen Sie kleine geschweifte Klammern direkt darunter hinzu. Zum Beispiel können wir eine mathematische Berechnung hinzufügen. Fünf geteilt durch zwei. Lass es uns auf dem Bildschirm sehen. Okay, und auch blasen dies, wenn wir zurück zur Indexseite gehen, können wir zum Beispiel einen mathematischen Punkt zufällig hinzufügen. Math Punkt zufällig zwischen den geschweiften Klammern und dann speichern. Jetzt können wir auch die Zufallszahl auf dem Bildschirm sehen, na ja, nicht nur beschränkt auf die Ausgabe und dieses JavaScript mit doppelten geschweiften Klammern. Sie können es auch überall dort verwenden, wo wir Zugriff auf unsere View-Instanz haben. Zum Beispiel können wir es auch innerhalb unserer V HTML Direktive innerhalb der Zitate verwenden. Lassen Sie uns auf die V HTML-Direktive gehen. Dann können wir innerhalb der Zitate mathematische Punkt zufällig hinzufügen und das speichern. Nun, wenn wir die Seite aktualisieren und überprüfen, sehen wir eine Zufallszahl jetzt auf dem Bildschirm. Ich werde nur schnell wieder zu Namen ändern und speichern Sie das. Auf diese Weise können wir die volle Leistung von JavaScript innerhalb unserer View Templates nutzen. 19. Abschnitts-Outtro: Vue Grundlagen: Herzlichen Glückwunsch zum Erreichen des Endes dieses Abschnitts. Hoffentlich können Sie schon sehen, wie Spaß und einfach es ist, mit View JS loszulegen. Sie haben bereits viele neue Konzepte gelernt, wie zum Beispiel das Einrichten der View-Instanz, die bidirektionale Datenbindung, die Ereignisbehandlung, Listenbehandlung und vieles mehr. Im nächsten Abschnitt werden wir die Dinge ein wenig weiter ausbauen, indem wir noch mehr wichtige Ansichtsthemen abdecken unsere Gästelisten-Anwendung ausfüllen. 20. Abschnittseinführung: Tiefere Einsichten in Vue: Willkommen in dieser neuen Rubrik. Wir werden beginnen, einen tieferen Blick in das zu werfen, was Vue.js zu bieten hat. Wir werden unsere Gästeliste weiter aufbauen, indem neue Funktionen hinzufügen und mehr über Vue.js erfahren, wie z. B. berechnete Eigenschaften, Uhren und Filter. Am Ende dieses Abschnitts haben Sie ein gutes Verständnis für viele der Grundlagen von Vue.js und wie alles zusammenpasst, nachdem Sie Ihr erstes Projekt abgeschlossen haben. Beginnen wir sofort mit einer verbesserten Notiz, indem wir einen Fortschrittsbalken hinzufügen. 21. So fügst du einen Fortschritts-Balken ein: In diesem Video werden wir einen Fortschrittsbalken zu unserer Anwendung hinzufügen. Wir werden auch die Anzahl der Namen einschränken, die wir zu unseren Veranstaltungen auf der Gästeliste hinzufügen können. Dieser Fortschrittsbalken wird dann als Prozentsatz erhöht, wenn das Gastnamen-Array füllt. Dies gibt uns die Chance, mehr Übung zu bekommen, indem wir reaktive Daten zu unserer App hinzufügen, und auch Stil-Attribute binden, die wir im letzten Abschnitt behandelt haben. Lassen Sie uns beginnen, indem Sie die grüne Farbe entfernen, wenn das Formular gesendet wird, da wir jetzt eine visuelle Anzeige mit dem Fortschrittsbalken haben. in der index.html Lassen Sie unsin der index.htmldie Bindungsklassen entfernen, die im letzten Abschnitt hinzugefügt wurden. Wählen Sie FormSubmitClass von allen Speicherorten entfernen aus. Lassen Sie uns dies auch aus dem Datenobjekt in app.js entfernen. Lassen Sie uns gehen und entfernen Sie dies aus dem Datenobjekt. Dann weiter unten lassen Sie uns die FormSubmitClass-Referenz von unserer Methode entfernen. Schließlich brauchen wir die übermittelten Stile in app.css nicht, Sie können sie auch entfernen. Nun, das ist dafür gesorgt, wir können zurück auf die Index-Seite gehen und wir können beginnen, unsere Fortschrittsleiste hinzuzufügen. Ich werde dies am Ende der Seite hinzufügen. Wenn wir nach dem teilnehmenden Text suchen, der anzeigt, wie viele Namen auf der Liste sind. Direkt darunter werde ich ein Break-Tag hinzufügen und dann einen HTML5-Fortschrittsbalken hinzufügen. Was kommt zu einem klaren Fortschrittsbalken für jetzt. Wir können speichern und überprüfen, dass auf dem Bildschirm angezeigt wird. Großartig, wir möchten, dass dieser Fortschrittsbalken jedes Mal erhöht wird, wenn ein Name zur Gästeliste hinzugefügt wird. Um dies zu tun, müssen wir einen Prozentsatz erarbeiten. Oben in der app.js werde ich zwei neue Dateneigenschaften zu den Datenobjekten hinzufügen. Der erste wird die Ereigniskapazität sein , so dass Sie festlegen können, wie viele Namen Sie als Maximum möchten. Ich werde sagen, Event-Kapazität anfänglich 25 zu sein. Dann direkt darunter werde ich auch die EventCapacityPercentue festlegen. Dies wird nur anfänglich als Null gesetzt werden. Wir verwenden dies, um herauszufinden, wie voll die Veranstaltung in Prozent ist. Wir werden dies innerhalb des Formulars Methode berechnen. Wenn wir nach unten zu dieser Methode scrollen und dann direkt unter this.NewNameText. Wir werden this.EventCapacityPercentue setzen, und wir werden den Prozentsatz hier berechnen. Dies wird gleich this.guestName.length sein. Die Anzahl der Namen auf der Gästeliste geteilt durch this.EventCapacity, teilen wir das durch 100, um es in einen Prozentsatz zu verwandeln. Jetzt haben wir den Prozentsatz als Wert zwischen Null und 100. Wir können unser Wissen über Bindungsstile aus dem letzten Abschnitt nehmen und verwenden Sie es setzen Sie die Breite der Fortschrittsleiste. Gehen wir zurück zum Fortschrittsbalken und fügen Sie dann ein Stil-Attribut hinzu. Auch hier wissen wir, dass wir den Doppelpunkt verwenden müssen, da dies dynamische Daten sind. Wir werden die Stile innerhalb der Klammern als Objekt beginnen. Der einzige Stil, den wir hinzufügen müssen, ist die Breite. Die Breite wird auf die EventCapacityPercentue gesetzt, die wir soeben erstellt haben. Natürlich wird dies steigen, wenn sich die Kapazität ändert. Dann bis zum Ende werden wir eine Zeichenfolge hinzufügen, die nur das Prozentsymbol ist. Alles, was wir hier tun, ist die CSS-Breiteneigenschaft zu setzen, indem wir den Prozentwert reaktiv machen, anstatt nur die Hand in einer festgelegten Zahl zu codieren. Lassen Sie uns das speichern und mit diesem an Ort gehen wir zum Browser und testen seine Arbeit. Wir können einige Namen hinzufügen und oft erhöht sich der Fortschrittsbalken mit jedem. Großartig. Es beginnt zu steigen, so dass alles scheint gut zu funktionieren. Im Moment haben wir den anwesenden Text, der zeigt, wie viele Leute gerade zu den Veranstaltungen kommen. Ich möchte jetzt auch die Kapazität hinzufügen , damit wir sehen können, wie viele Menschen auch teilnehmen dürfen. Wir haben bereits alle Daten, die wir benötigen, um dies zu vervollständigen, zurück auf der Index-Seite neben dem teilnehmenden Text. Wir haben bereits den guestName.length ausgegeben. Danach werde ich einen Schrägstrich hinzufügen und dann einfach die EventCapacity ausgeben. Wenn wir nun zur App gehen, sollten wir eine von 25 und zwei von 25 sehen, und dies steigt jedes Mal, wenn wir einen neuen Namen hinzufügen. Dies funktioniert und auch der Fortschrittsbalken scheint endgültig zu funktionieren. Aber es gibt ein Problem. Wir können immer noch über die Gesamtzahl der Namen gehen, die wir gesetzt haben, wir können über 25 gehen. Dies bewirkt, dass ein Fortschrittsbalken vom Bildschirm entfernt wird und auch die Zahl im anwesenden Abschnitt, um das maximal zulässige Maximum zu überschreiten. Fügen Sie einfach viele weitere Namen hinzu und kommen Sie auf das Maximum. Wir können sehen, dass wir das klar durchgehen können. Dies kann leicht behoben werden, indem eine weitere Kombination hinzugefügt wird, um innerhalb unserer Formular eingereichten Methode zu testen. Zurück in der app.js. Wir wissen, dass wir bereits eine [unhörbare] Aussage überprüfen, ob ein Name eingegeben wurde. Wir können auch einfach eine zweite Prüfung hinzufügen, um festzustellen, ob die EventCapacityPercentue weniger als 100 Prozent ist. Wenn er nicht weiter Namen hinzufügen möchte. Nachdem this.NewNameText.Length größer als Null ist, this.EventCapacityPercentue ist kleiner als 100. Wenn die Kapazität weniger als 100 Prozent beträgt, können wir dem Array weiterhin Namen hinzufügen. Wenn der Prozentsatz über 100 oder gleich 100 ist, werden keine neuen Namen an das Array gesendet. Lassen Sie uns dies mal gehen, wenn wir zurück zur App gehen und dann aktualisieren, können wir immer noch Namen zur Gästeliste hinzufügen, kein Problem. Sobald wir 25 sind, sollten wir sehen, dass keine neuen Namen hinzugefügt werden können. Da gehen wir, wir treffen jetzt die Kapazität und keine neuen Namen werden auf das Array akzeptiert. Lassen Sie uns nun einen Blick darauf werfen, wie wir mit komplexerer Logik umgehen können , indem wir berechnete Eigenschaften verwenden. 22. Berechnete Eigenschaften: Weit in diesem Kurs, innerhalb der wenigen Instanz, haben wir uns angesehen, wie wir mit Daten arbeiten können, mit einem Datenobjekt. Wir haben auch untersucht, wie wir ein Nachrichtenobjekt hinzufügen können, mit dem Sie unserer Anwendung Funktionalität hinzufügen können. Jetzt möchte ich Ihnen eine dritte Eigenschaft zeigen, die wir nicht alle Instanz aufrufen können, die als berechnete Eigenschaften bezeichnet werden. Wir haben im letzten Video erwähnt, dass in zu vielen JavaScript-Ausdrücken innerhalb unserer Vorlage den Code weniger wiederverwendbar und schwieriger zu pflegen machen kann. Wir haben auch begrenzt, einen JavaScript-Ausdruck zu verwenden. Hier kommen berechnete Eigenschaften ins Spiel. Wir fügen sie unserer View-Instanz wie die Daten- und Methodenobjekte hinzu, um komplexere Logik hinzuzufügen. Es gibt auch einen weiteren großen Unterschied, den wir bald betrachten werden. Fügen wir unseren berechneten Abschnitt hinzu, gefolgt von dem Doppelpunkt, und dies ist auch ein Objekt. Wir können unsere Eigenschaften innerhalb des berechneten Objekts hinzufügen, genau wie wir es innerhalb des Methodenobjekts getan haben. Ich werde eine berechnete Eigenschaft verwenden, um die Groß-/Kleinschreibung in unserem Array zu sortieren und sie dann in alphabetischer Reihenfolge zurückzugeben. Es muss den Namen eingeben. In diesem Fall werde ich diese Sortiernamen aufrufen, und das ist eine Funktion. Dann innerhalb des Körpers werden wir einige Daten zurückgeben, und die Daten, die wir zurückgeben möchten, sind dieser Punkt Fall Name dot sort. Verwendung von Salz ist eine normale JavaScript-Array-Methode, genau wie wenn wir die Push-Methode in Formularen oben eingereicht verwenden. Damit dies funktioniert, müssen wir eine Sache innerhalb unseres Indexpunkts HTML ändern. Wir müssen nun die Sortiernamen und nicht den Gastnamen durchsehen. Wechseln Sie zur Indexseite und ändern Sie den Namen der Groß-/Kleinschreibung in unsere Computereigenschaft der Sortiernamen. Dann werfen wir einen Blick auf das innerhalb des Browsers und wir sollten sie jetzt in alphabetischer Reihenfolge sortiert sehen. Wir verwenden eine berechnete Eigenschaft, wenn unser Code innerhalb von Intervalleigenschaft oder irgendeiner der Daten aus unserer View-Instanz abhängt , wenige JS überwacht Inhalte und ist sich des Computercodes und einer seiner Abhängigkeiten bewusst. In diesem Beispiel verwenden wir die Daten des Gastnamens, was bedeutet, dass sie sich bewusst sein wird, dass es dort ist. Es werden die Daten zwischengespeichert oder das einzige erneute Rendering, wenn sich die Abhängigkeit des Gastnamens geändert hat. Hier liegt der Unterschied zwischen berechneten Eigenschaften und Methoden. Methoden auf der anderen Seite, werden immer wieder rendern, wenn sich etwas ändert, auch wenn es keine Änderung an den Daten, die es zeigt. Werfen wir einen Blick auf dies in Aktion, indem wir uns an der Konsole anmelden. Vorname sind das Konsolenprotokoll an die Formularmethode gesendet und einfach die Konsole protokollieren den Text der Methode. In der neuen berechneten Eigenschaft, die wir gerade erstellt haben. Wir wollen die Texte der berechneten an der Konsole einloggen. Wenn wir zum Browser gehen und dann mit der rechten Maustaste klicken und die Konsole öffnen. Wenn wir dann einen Namen zu unserer Gästeliste hinzufügen und auf Senden drücken, können wir sehen, dass beide Methode nicht berechnet oben an der Konsole protokolliert. Dies wird erwartet, da wir dem Gastnamen-Array innerhalb der Computereigenschaft hinzugefügt haben . Es beobachtet die Eigenschaft des Gastnamens als Abhängigkeit. So View ist sich bewusst, dass die Änderungen aufgetreten sind und dann einen Inhalt erneut rendert. Wir haben das Methodenprotokoll, weil, wie wir bereits erwähnt, Methoden immer wieder rendern, wenn sich etwas ändert, auch wenn sich die Daten im Inneren nicht geändert haben. Lassen Sie uns dieses Verhalten in Aktion sehen, indem Sie eine neue Methode hinzufügen. Ich gehe zur Indexseite und füge eine Schaltfläche hinzu. Einfach den Eingabe-Bone blasen, auf der normalen HTML-Button mit dem Text oder rufen Sie eine Methode auf. Dann können wir einen Klick-Listener mit der kurzen Hand hinzufügen. Also beim Klicken werde ich dies auf einen Methodenaufruf setzen. Jetzt können wir gehen und erstellen Sie diesen Methodenaufruf innerhalb der app.js Stellen Sie sicher, dass dies unter der Form gesendet Methode und durch ein Komma getrennt ist. Wir richten diesen Methodenaufruf ein, kurz vor all dieser Funktion, und dann innerhalb des Körpers werden wir die Stile festlegen. Alles, was wir tun, ist, diese Stile einzurichten und dann den Rand oben auf 50 Pixel zu ändern. Dies ist eine Methode, die nichts mit den Daten des Gastnamens zu tun hat. Mal sehen, was passiert, wenn wir diese neue Methode aufrufen. Gehen wir zurück zur App, geben Sie einen neuen Namen in das Eingabefeld ein und klicken Sie dann auf Senden. Wir sehen sowohl die Methoden als auch zuerst berechnet, was ein Verhalten ist, das wir zuvor gesehen haben, das ist, was wir erwarten. Wenn wir jedoch die neue Methode aufrufen, indem wir die neue Schaltfläche drücken, sehen wir nur die Methode protokolliert, dies liegt daran, dass unser neuer Methodenaufruf nur die Margin Top Dateneigenschaft auswirkt und eine berechnete Eigenschaft nur auf Änderungen an der Eigenschaft „Gastname“ zu überwachen. Dies bedeutet, dass berechnet nicht protokolliert wird, da keine Änderungen vorgenommen wurden. Wir erhalten jedoch immer noch einen Methodenaufruf, da alle Methoden immer neu gerendert werden, auch wenn sich die Daten in ihnen nicht geändert haben. Dies bedeutet, es sei denn, Sie haben einen bestimmten Grund, die Methode jedes Mal neu zu rendern, dann sind berechnete Eigenschaften eine effizientere Methode, Dinge zu tun. Für viele Fälle. Mit einer berechneten Eigenschaft, Auto-Methode wird die gleichen Ergebnisse zu erzielen.Denken Sie daran, diesen Unterschied im Verhalten hinter den Kulissen. Bevor wir dieses Video einpacken, ist ein paar wichtige Punkte, die ich Ihnen zeigen möchte. Lassen Sie uns zunächst einen Test zu unseren Methodenobjekten hinzufügen, um einfach ein Konsolenprotokoll zu erstellen. Gehen wir zurück zu den Methoden und erstellt unsere Testmethode, erfüllt die gleiche Weise wie eine Funktion, die ein Konsolenprotokoll ausführt und einfach die Konsole ausgibt, die Texte des Methodentextes. Oben auf der Indexseite gehe ich unter die Schaltfläche, die erstellt wird, und rufe diese Methode innerhalb unserer doppelten geschweiften Klammern auf. das unter dem Methodennamen des Tests Speichern Siedas unter dem Methodennamen des Testsund gehen Sie zum Browser. Wir können sehen, dass wir einen Fehler bekommen. Dies liegt daran, wenn wir eine Methode innerhalb der dreifachen geschweiften Klammern als JavaScript-Ausdruck aufrufen, müssen wir sie mit der Klammer nennen. So sind die Klammer direkt nach dem Text. Lassen Sie uns sparen und einen Blick darauf werfen, und wir können in unseren Werken sehen. Wenn Kolonisten jedoch als berechnete Eigenschaft sind, wird die Klammer nicht verwendet. Die Serienaktion können wir unsere Methode nach JS verschieben und eine berechnete Eigenschaft an Ort und Stelle einrichten. Lassen Sie uns dies und fügen Sie es dann unten als berechnete Eigenschaft ein, und speichern Sie es dann. Wenn wir die Klammern über in der Indexseite entfernen, und dann sagen, ob wir zum Browser gehen können und wir sehen können, dass dies jetzt funktioniert, wird jetzt das Konsolenprotokoll erhalten. Ein Nachteil bei der Verwendung berechneter Eigenschaften ist, dass wir keine asynchronen Aufgaben ausführen können. Wir können dies jedoch tun, indem wir eine Watch-Option verwenden, die von VGS zur Verfügung gestellt wird. Dies ist auch eine alternative berechnete Eigenschaften, und wir werden uns dies im nächsten Video ansehen. 23. Watchers: Im letzten Video haben wir uns die Verwendung von berechneten Eigenschaften angesehen, die eine gute Möglichkeit sind, unserer App Funktionalität hinzuzufügen. Berechnete Eigenschaften überwachen den Code und reagieren nur, wenn sich eine der Daten ändert. Als Alternative stellt uns Vue.js auch eine Watch-Eigenschaft zur Verfügung, die wir verwenden können, wenn wir eine Dateneigenschaft beobachten und auf Änderungen reagieren möchten. Mit Watch können wir auch asynchrone Aufgaben ausführen , die wir nicht mit berechneten Eigenschaften verwenden können. Wir richten die Watch-Objekte auf der Vue Instanz ein, genau wie wir es bei berechneten Methoden und Daten getan haben. Um zu beginnen, werde ich mit dem Löschen der Beispiele aus dem letzten Video beginnen. In app.js können wir also die Testmethode löschen. Wir können auch Methodenaufruf entfernen. Also entfernen Sie diese beiden und dann wieder in index.html, können wir auch die Schaltfläche Beispiel entfernen, die wir hinzugefügt haben. Sobald dies erledigt ist, gehen wir zurück zu der app.js und das richten Sie unser Watch-Objekt ein. Dies wird natürlich wie die anderen Objekte hinzugefügt, die wir uns angesehen haben. Fügen Sie also direkt nach dem berechneten Abschnitt ein Komma und fügen Sie dann unser Watch-Objekt hinzu. Innerhalb des Watch-Objekts können wir eine Dateneigenschaft setzen, die Sie beobachten möchten. Dieser Name muss mit einem vorhandenen Datennamen übereinstimmen. Zum Beispiel müssen wir guestName oder etwas wie EventDate verwenden, das wir bereits innerhalb unserer Dateneigenschaft haben. Ich werde unsere GuestName Eigenschaft beobachten. Wir geben dann eine Funktion an, die wir ausführen möchten, wenn es eine Änderung von guestName. Bei Änderung Vue.js wird den Wert dieser Änderung an die Funktion übergeben.Innerhalb der Funktion Klammern, können wir in einem Namen übergeben, den wir an die Daten geben wollen vue übergeben wird. Dieser Name kann alles sein, was er will, aber ich werde es Daten nennen, und dann innerhalb der Funktion werde ich eine Nachricht an die Konsole protokollieren, wenn guestName, der vom Beobachter beobachtet wird, geändert wird. Dann lassen Sie uns das Konsolenprotokoll der getriggerten Uhr hinzufügen. Öffnen wir dann die Konsole im Browser und fügen Sie dann einige Namen zur Gästeliste hinzu. Also eine Sache, die Sie bemerken, ist die Uhr ausgelöst wird zweimal pro hinzugefügten Namen gedruckt. Dies liegt daran, dass wir die Dateneigenschaft von guestName beobachten. guestName wird zweimal geändert. Es wird einmal innerhalb der Formularmethode und dann wieder innerhalb der berechneten Eigenschaft geändert , um die Namen in alphabetischer Reihenfolge zu sortieren. So können wir sehen, dass diese Daten beobachtet werden und die Funktion läuft bei jeder Änderung. Natürlich ist dies ein grundlegendes Beispiel, aber es gibt Ihnen eine Vorstellung davon, wie sie verwendet werden können. Wir werden eine später verwenden, wenn wir durch die Kursprojekte gehen. Aus Leistungsgründen ist es in der Regel besser, eine berechnete Eigenschaft zu verwenden , da dieses effiziente Rendering aufgrund von Zwischenspeichern möglich ist. Beobachter, wie wir bereits besprochen haben, sind jedoch nützlich, um Änderungen in Dateneigenschaften zu beobachten und auch für asynchrone Aufgaben wie den Zugriff auf API-Daten nützlich . 24. Wichtige Events und Modifikationen: Früher im Kurs haben wir uns Ereignishandler angesehen, indem wir die V auf Direktive verwenden, ändern wir dann V auf eine kürzere Syntax, indem wir das @-Symbol verwenden. Dies löste die Methode zum Senden des Formulars aus, wenn das Submit-Ereignis erkannt wurde. Wir haben auch erwähnt, dass wir nicht darauf beschränkt sind, nur einreichen zu verwenden. Wir haben auch Zugriff auf die gesamte Palette von HTML-Ereignissen, wie On-Click, On-Change und On-Mode, um nur einige zu nennen. Ein langer Weg, um Ereignisse auszulösen, können wir auch die V auf Direktive verwenden, die Kurzschrift @ Symbol, um etwas zu tun, wenn eine Tastaturtaste gedrückt wird. Innerhalb unserer Eingaben werde ich ein Tastaturereignis zu unserer Namenseingabe hinzufügen. Wir können Standardtastaturereignisse wie Key-down verwenden. In diesem Beispiel werde ich Key-Up verwenden, gefolgt von dem Tastencode, auf den wir achten möchten. Sobald die Tastennummer 32, die die Leertaste ist, losgelassen wird, lösen wir eine Methode namens Taste gedrückt. Wir haben die Tastendruckmethode noch nicht eingerichtet, also lassen Sie uns das jetzt tun. Gehen Sie zu der Up.js, und fügen Sie dann eine neue Methode hinzu. Diese Methode wird natürlich als Taste gedrückt bezeichnet. Alles, was wir tun wollen, ist ein Konsolenprotokoll hinzuzufügen, und in diesem Konsolenprotokoll gehen wir einfach, um den Text der Taste gedrückt zu drucken. Dies meldet sich einfach bei der Konsolentaste an, die gedrückt wird, sobald die Leertaste losgelassen wird. Also lassen Sie uns das speichern und öffnen Sie es innerhalb der Konsole. Wenn wir die Leertaste innerhalb des Namenseingabefeldes drücken, können wir sehen, dass unsere wichtigsten Ereignisse erkannt wurden. Für dieses Beispiel verwenden wir die Schlüsselnummer 32, die die Leertaste ist. Wir können Google JavaScript-Schlüsselcodes für eine vollständige Liste von Zahlen für alle Schlüssel, wenn wir wollen. Vue.js stellt uns jedoch auch einige Aliase für gemeinsame Schlüssel zur Verfügung. Wir können Schlüsselnummer 32 durch das Wort Leerzeichen ersetzen und uns dann versuchen, wenn wir aktualisieren. Dies funktioniert genauso, aber es ist lesbarer und leichter zu merken. Vue.js ermöglicht es uns auch, eingeben, tab, löschen, escape, up down, und auch links und Rechte an der Stelle eines der Tastencodes zu verwenden. Versuchen wir es noch mal. Wir können den Raum auf die Escape-Taste ändern, also sagen Sie das und drücken Sie die Escape-Taste, und es funktioniert wie zuvor. So können wir Keys verwenden, um Ereignisse auszulösen, und wie wir Schlüsselmodifikatoren oder Aliase in unseren Vue Projekten verwenden können . 25. Filter: Vue JS stellt uns auch eine Eigenschaft namens filters zur Verfügung, die wir auch zu unserer View-Instanz hinzufügen können. Filter sind so konzipiert, dass allgemeine Textformatierungen oder Transformationen angewendet werden, z. B. das Ändern von Zeichenfolgen in Groß- oder Kleinbuchstaben. Sie sollen nicht für komplexe Aufgaben verwendet werden. Wenn Sie etwas komplexeres haben, ist es schlecht, stattdessen eine berechnete Eigenschaft zu verwenden. Das Hinzufügen von Filtern ist wirklich einfach gemacht. Wir können sie auch hinzufügen, wenn wir v-bind verwenden, was wir uns früher angesehen haben, oder die doppelte geschweifte Klammer Syntax verwenden. Um dies in Aktion zu sehen, werde ich zu unserer for-Schleife in der index.html gehen. Dann innerhalb der doppelten geschweiften Klammern werden Namen haben. Wir behalten an Ort und Stelle den Namen Ausdruck und fügen dann unseren Filternamen hinzu, getrennt durch ein Pipe-Symbol. Wenn wir einen Filter mit v-bind hinzufügen, können wir genau das gleiche tun. Wir fügen einfach zuerst den JavaScript-Ausdruck hinzu, dann den Namen des Filters durch die Pipe getrennt. Dann fügen wir in unserer View-Instanz unsere Filtereigenschaft hinzu. Dies ist natürlich, wo wir alle unsere Filter hinzufügen. Lassen Sie uns unsere beiden oberen Filter hinzufügen, die wir gerade hinzugefügt haben. Die Syntax ist genau die gleiche wie die Beobachter, die wir uns vorher angesehen haben. Dies ist eine Funktion, die den Wert der Daten übernimmt, die an sie übergeben werden. Für unser Beispiel wird es der Wert von name sein. Genau wie bei der Verwendung von Beobachtern können wir diesen Wert beliebig benennen. Wir geben dann den Wert transformiert in Großbuchstaben zurück. Sehen Sie sich unsere Großbuchstaben an. Es ist einfach JavaScript und wird uns nicht von Vue JS zur Verfügung gestellt. Auch hier ist dies ein gutes Beispiel dafür, wie wir Vue JS Daten mit einfachem JavaScript erstellen können. Speichern wir das und testen Sie es im Browser. Gehen Sie zum Eingabefeld, und wenn wir einen Namen innerhalb von dort mit Kleinbuchstaben eingeben und dann „Enter“ drücken, können wir sehen, dass der Name jetzt in Großbuchstaben umgewandelt wird. Wir können auch mehrere Filter verwenden und diese miteinander verketten. Alles, was wir tun müssen, ist zu den doppelten geschweiften Klammern zurückzugehen , wo wir den ersten Filter hinzugefügt haben. Auch hier trennen Sie es durch eine Pipe wir fügen den Namen unseres zweiten Filters hinzu, den wir anwenden möchten. Das funktioniert von links nach rechts. In diesem Fall wird dann „name“ an den „ToUpper“ -Filter übergeben. Dann wird der Wert des ToUpper-Filters an „FormatName“ übergeben. Also ist die Reihenfolge wichtig. Wir können diese Reihenfolge in Aktion sehen, wenn wir den „FormatName“ Filter über in der app.js hinzufügen. Direkt unterhalb des „ToUpper“ -Filters durch ein Komma getrennt. Wir können einen „FormatName“ hinzufügen. Auch hier nimmt diese Funktion den Wert auf, der von „ToUpper“ an sie übergeben wird. Wenn wir dann den an ihn übergebenen Wert einfach konsolen, gehen Sie zum Browser und öffnen Sie die Konsole. Wir können sehen, dass der Wert in Großbuchstaben ist. Dies zeigt, dass wir den Namenswert erhalten, nachdem er den ersten Filter durchlaufen hat. Dies ist nur ein Beispiel, so dass wir die beiden oberen Filter entfernen und auch von unserer Indexseite entfernen können. Jetzt können wir einige Formatierungen zu unserem Namen hinzufügen und dann zurück zu unserem Filter gehen und das Konsolenprotokoll entfernen. Das Format, in dem wir anwenden werden, wird den Namen nehmen, den der Benutzer eingibt, wird den ersten Buchstaben schneiden und dann diese in Großbuchstaben umwandeln. Alle verbleibenden Zeichen werden anschließend in Kleinbuchstaben umgewandelt. Um dies zu tun, werden wir die „value.slice“ zurückgeben. Wir werden unsere Position Null schneiden, was der erste Buchstabe ist. Wir wollen nur die Scheibe diesen ersten Buchstaben, also wird dies nur für eine Position sein. Dieser erste Buchstabe, dann werden wir in Großbuchstaben verwandeln. Dann werden wir am Ende dieses Großbuchstaben hinzufügen, wieder die „value.slice“. Dies wird der Rest der Charaktere ab Position eins sein. Der ganze Rest ist, dass Zeichen auf Kleinbuchstaben gesetzt werden. Fügen wir das am Ende hinzu und speichern Sie es dann. Nun, wenn ich zum Browser gehe. Lassen Sie uns einen Namen mit einer Mischung aus Groß- und Kleinbuchstaben hinzufügen und drücken Sie dann „Enter“, und wir können sehen, dass der Name jetzt korrekt formatiert ist. Natürlich, komplexere Formatierungen, wie wenn der Benutzer einen Namen mit einem Nachnamen oder sogar freien Namen hinzufügt, müssen wir ein wenig mehr Arbeit tun, um dies zu umgehen. Dies kann ein guter Fall sein, um zu einem berechneten Wert anstelle des Filters zu wechseln. Sowohl für die einfache Textformatierung ist die Verwendung von Filtern ein idealer Weg, dies zu tun. 26. Mehr zu Schleifen: Schlüssel und Indexzahlen: In diesem Video werden wir ein wenig tiefer in die Verwendung von Fore-Loops werfen. Wir zeigen Ihnen, wie Sie Schlüssel hinzufügen und wie Sie Indexnummern zu jedem Element hinzufügen. Manchmal, wenn wir durch ein Array schleifen, genau wie wenn wir alle unsere Gäste Namen durchlaufen und sie auf dem Bildschirm anzeigen, müssen wir möglicherweise die Indexnummer für jedes Element innerhalb des Arrays erfassen. Die Indexnummer ist die Position jedes Elements. Der hinzugefügte Vorname ist beispielsweise die Position Null, da Arrays immer an der Position Null beginnen. Der zweite hinzugefügte Name befindet sich an Position eins und so weiter. Wir haben Zugriff auf diese Indexnummer in VUGS, wenn Sie eine v-for-Schleife verwenden. Alles, was wir tun müssen, ist der v-for-Schleife wie folgt ein zweites Argument hinzuzufügen. Stellen Sie sicher, dass Sie sich in der index.html befinden. Wenn wir nach unten scrollen, haben wir die v-for-Schleife, um durch die Gastnamen zu schleifen. Die innerhalb dieser v-for-Schleife, können wir unser zweites Argument hinzufügen. Wir müssen sie in die Klammern rappen. Das erste Argument ist immer noch der Name, den wir jedem Wert innerhalb der Schleife geben. Dann ist der zweite ein Name, den wir der Indexnummer geben möchten. Diese beiden Namen liegen ganz bei uns. Wir können wählen, was wir wollen, aber es ist am besten, sie beschreibender zu halten, wenn möglich. Jetzt wird der Name für den Index gesetzt. Wir können dies mit den doppelten geschweiften Klammern hinzufügen. nach unserem prägenden Namen werden wir in den Klammern den Wert unseres Indexes ausgeben. Jetzt, wenn wir speichern und zum Browser gehen, können wir die Indexposition jedes Namens sehen. Wir haben früh gelernt, dass wir auch JavaScript innerhalb dieser doppelten geschweiften Klammer Syntax hinzufügen können . Nutzen wir dies, indem wir zurück zum Index gehen und plus eins zur Indexnummer hinzufügen. Dies bedeutet, dass unser Index jetzt an Position eins anstatt Null beginnt. Wir fügen Index plus eins hinzu und speichern das. Wenn wir nun zu unserer Anwendung zurückkehren und einige Namen hinzufügen, haben wir jetzt die Indexnummer, die der Anzahl der Gäste entspricht. Als nächstes möchte ich einen Blick auf das Hinzufügen von Schlüsseln zu unseren Schleifen werfen. Wir können die Ansicht auch erlauben, unsere Array-Werte besser zu verfolgen , indem wir jedem der Elemente einen eindeutigen Schlüssel zur Verfügung stellen. Es wird empfohlen, einen eindeutigen Schlüssel mit v-for zu verwenden, wo immer möglich. Die Standardverhaltensansicht, die beim Aktualisieren einer Liste von Elementen, z. B. eines Arrays, verwendet wird, ist das Patch und Element, das bei einer bestimmten Indexnummer vorhanden ist. Wenn [unhörbar] ein Array hinzufügt, wird dieses zusätzliche Element an der angegebenen Indexposition platziert , anstatt [unhörbare] Elemente in die richtige Reihenfolge zu verschieben. Dies sorgt für eine effiziente Art, Dinge zu tun, aber wir können eins besser gehen. Wir können sicherstellen, dass jedes Element im Array eine eindeutige Kennung hat, die wir verweisen können, wenn wir eine Änderung vornehmen müssen. View kann dann jedes Element verfolgen und beim Aktualisieren Dinge verschieben und bei Bedarf sogar Elemente wiederverwenden. Bei jedem eindeutigen Schlüssel bedeutet, dass sich die Ansicht jetzt der Elemente bewusst ist, anstatt nur zu wissen, welche Indexposition sie in einen neuen Wert patchen muss. Dies sorgt für ein sichereres und vorhersehbares Verhalten beim Ändern von Werten in einem Array. Wir können Schlüssel hinzufügen, indem wir zu unserer for-Schleife gehen. Wir verwenden Doppelpunkt für dynamische Bindung, und der Name, den wir diesem Schlüssel geben, ist ebenfalls wichtig. Es muss mit einigen vorhandenen reaktiven Daten verknüpft werden. Wenn wir versuchen, einen zufälligen Namen hinzuzufügen, der nicht in der View-Instanz deklariert ist , erhalten wir einen Fehler. Geben wir einfach einen zufälligen Namen ein und speichern Sie das dann. Wenn wir dann zur App gehen und einen Namen zur Gästeliste hinzufügen, öffnen Sie die Konsole, wird ein Fehler angezeigt. Wir können vorhandene Daten wie unseren Gastnamen verwenden. Geben Sie einen Namen innerhalb des Schlüssels ein. Nun, wenn wir das speichern und zum Browser gehen. Wenn wir auf Aktualisieren klicken, können wir jetzt sehen, dass die Fehlermeldung entfernt wird. Ansicht „Jetzt“ erkennt diesen Namen als Datumseigenschaft. Nun ist dies vielleicht nicht ideal, weil wir mehr als eine Person mit dem gleichen Namen haben können. Wir könnten ein Objekt einrichten, um eine eindeutige ID mit jedem Gastnamen zu halten. Öffnen Sie auch neue Datumseigenschaft, um einen eindeutigen Wert zu halten, und verwenden Sie es dann als Schlüssel. Für den Moment werde ich einfach gehen und kommen zurück auf diese in ein paar Videos Zeit. Die Hauptsache ist, dass es beim Erstellen einer for-Schleife wirklich empfehlenswert ist, einer Werteliste einen Schlüssel hinzuzufügen, wo immer möglich. 27. So verwendest du mehrere Vue Instanzen: In unserer Gästelisten-App verwenden wir derzeit nur eine Vue js-Instanz, um die gesamte Anwendung zu steuern. Das ist in Ordnung und klein wie dieses. Aber in großen Apps finden wir es vielleicht bequemer, bestimmte Funktionen oder bestimmte Daten in mehrere Instanzen aufzuteilen . Verwendung mehrerer Instanzen ist vollkommen in Ordnung, kann in einigen Fällen sogar sinnvoll sein, wo der Code in Abschnitten enthalten sein soll. Wir machen das genau wie zuvor. Wir erstellen eine neue Vue Instanz und auch einen neuen HTML-Abschnitt, wie das div, um an unsere Daten zu binden. Fangen wir jetzt damit an. Wenn wir auf die index.html gehen, haben wir derzeit die erste View-Instanz mit dieser div mit der ID der App verknüpft. Das erste, was ich tun möchte, ist, das öffnende Container-Div zu schneiden und dann nach oben zu bewegen. Dies ist so, dass es unseren vorhandenen Inhalt und auch das neue Navigationsdiv enthält, das ich jetzt hinzufügen werde. Lassen Sie uns ein neues div mit einer ID der Navigation erstellen. Diese ID wird mit der el Eigenschaft zu unserer Vue Instanz verlinken und wir werden diese in Kürze erstellen. Dann schneide ich die erste Zeile aus unserer App aus und füge diese dann innerhalb des Navigationsabschnitts ein, den wir gerade erstellen. Jetzt haben wir diesen neuen Navigationsbereich. Ich werde zu app.js gehen und wir können eine neue Vue Instanz direkt unter der letzten erstellen. Wenn Sie nach unten gehen, können wir nun „Neue Ansicht“ eingeben und dann wieder einfach das Objekt innerhalb der Klammern eingeben. Die erste Eigenschaft wieder, wir müssen hinzufügen, ist el. Dies ist eine ID der Navigation. Lassen Sie uns das oben hinzufügen. Dann können wir unsere Datenobjekte hinzufügen. Wir werden hier einige reaktive Daten hinzufügen, wie zum Beispiel den App-Namen. Ich werde den App-Namen so einstellen, dass er gleich der Gästeliste ist, was wir derzeit haben. Wenn wir dann zu unserem Navigationsdiv zurückgehen, können wir dann eine doppelte geschweifte Klammern verwenden, um den Gästelistext durch unseren App-Namen zu ersetzen. Speichern Sie das und wenn wir dies im Browser testen, sollten wir keinen Unterschied sehen. was bedeutet, dass es alles in Ordnung ist. Es gibt jedoch einen Nachteil, dass die in jeder Vue Instanz enthaltenen Daten voneinander getrennt sind. Das bedeutet, dass wir dieses Schlüsselwort nur verwenden können, um auf Daten innerhalb der View-Instanz zuzugreifen, in der es verwendet wird. Wenn Sie zur ersten Vue Instanz zurückkehren und dann ein Konsolenprotokoll hinzufügen. Ich werde dies innerhalb der Formularmethode hinzufügen und ich möchte this.app-Namen protokollieren. Denken Sie daran, dass der App-Name eine Dateneigenschaft aus unserer zweiten Instanz ist. Lass uns das speichern und sehen, was passiert. Wenn wir zum Browser gehen, die Konsole öffnen und auf die Schaltfläche „Formular senden“ klicken, erhalten wir eine rote Warnmeldung, die besagt, dass die Eigenschaft von App-Styles nicht definiert ist. Dies liegt an dem gleichen Problem. Das App-Style-Objekt ist eine Dateneigenschaft innerhalb der ersten Instanz. Hier versuchen wir auch, dies innerhalb der index.html innerhalb der Abschnittsteuerung durch die zweite Instanz der Navigation zuzugreifen . Wir wissen jetzt, wie man Stile bindet. Lassen Sie uns die Stile wieder in das Stylesheet verschieben, damit Sie überall zugreifen können. Wir können zur Vue Instanz gehen und das App-Stil-Objekt löschen. Nun, diese werden gelöscht. Wir können zurück auf die app.css gehen und dann den Rand oben von 25 Pixeln wieder eingeführt. Dieser Rand wird allen Zeilen hinzugefügt Verwenden Sie also die Zeile als Selektor und fügen Sie dann den oberen Rand von 25 Pixeln hinzu, und speichern Sie ihn dann. Dann, wenn wir zurück auf die Seite index.html gehen, können wir die App-Stile-Eigenschaft in allen Orten löschen. Das ist der erste und dann ein zweites. Dann lassen Sie uns schließlich den dritten und letzten entfernen. Dann können wir auch das Konsolenprotokoll von der Methode entfernen. Gehen wir zurück zu der app.js und unten zur Formularmethode und entfernen Sie diese dann. Nun, wenn wir das speichern und zurück zum Browser gehen und aktualisieren, sollten wir sehen, dass alles wieder gut funktioniert. Aufteilen von Abschnitten in mehrere Vue Instanzen ist absolut in Ordnung und es ist auch praktisch, wenn der in jeder Instanz enthaltene Code nicht verwandt ist oder es keinen Grund gibt, Daten von anderen Instanzen zu verlangen. Es gibt Verschwendung greift auf Daten von über Instanzen mit anderen Methoden zu. Aber wir werden dies später in diesem Abschnitt behandeln. Als nächstes fügen wir einige Navigationslinks zu unserer neuen Instanz hinzu und verwenden diese Links, um zu sehen, wie wir Objekte durchlaufen können. 28. Looping mit Objekten: Wir haben bereits das Durchschleifen von Arrays während dieses Projekts behandelt. In diesem Video möchte ich mit unserer neuen Vue Instanz fortfahren, indem ich ein neues Array-Objekte von Navigationslinks hinzufüge, die wir auch durchlaufen können. Die Werte in diesem Objekt enthalten auch AID. So können Sie dies auch verwenden, um einen eindeutigen Schlüssel hinzuzufügen. So kann die Ansicht den Überblick über die in unserer app.js aufgeführten Elemente behalten. Lassen Sie uns beginnen, unser Array von Objekten zu erstellen, in Richtung unserer Navigationslinks. Unterhalb des App-Namens. Ich werde mit dem Namen von NavLinks beginnen. Dies wird ein Array sein. Jedes Array-Element ist ein Objekt, das ein Schlüssel-Wert-Paar von Name und ID hat. Öffnen wir die geschweiften Klammern für den ersten Link. Ich werde den Namen als Schlüssel und nach Hause als Wert festlegen. Dann durch ein Komma trennen. Wir werden auch eine ID hinzufügen. Also werde ich es einfach halten und mit der ID eins beginnen, und dann durch ein Komma trennen, können wir unseren zweiten Link starten. Also werde ich das erste Element kopieren und einfügen. Ändern Sie den Namen in bevorstehende Ereignisse, und ändern Sie dann auch die ID in Nummer 2. Dann noch einmal, fügen Sie das gleiche, und wir nennen diesen einen Gast Vorteile. Geben Sie uns eine ID von drei, und dann den letzten Link, wir werden die neuesten Nachrichten hinzufügen und dann dazu führen, dass es ID Nummer 4 ist. Dann gehen wir auch zu unserer index.html Webseite, und schauen wir uns an, wie wir durch dieses Array von Objekten schleifen können. Ich werde ein neues div dafür erstellen, direkt unter dem schließenden div-Tag für den App-Namen. Erstellen Sie das umgebende div, und dann werde ich hier eine ungeordnete Liste erstellen, um alle Links aus der Navigation anzuzeigen. Dann innerhalb dieses, wollen wir ein HTML Template-Tag hinzufügen. Dieses Template-Tag kann mit V4 und auch mit VF2 verwendet werden. So rendern Sie einen Block aus mehreren Elementen. Template ist nur ein Container, genau wie ein gewöhnliches div. Aber dieses Template-Element wird nicht in das DOM gerendert werden. Dann würden wir innerhalb dieser Vorlage können wir die V4-Schleife erstellen. Also werde ich diesen NavLink in NavLinks nennen. Natürlich ist NavLinks der Name der Datumseigenschaft, die wir erstellt haben. Dann haben wir keine Elemente ausgerichtet, wir werden unsere Listenelemente erstellen. Wir verwenden dies mit den doppelten geschweiften Klammern. Der erste wird NavLink.Name sein. Ich werde unten ein weiteres Listenelement erstellen, das NavLink.id sein wird. Dadurch wird der Name und die ID für jedes einzelne Objekt ausgewählt. Also, jetzt haben wir den Inhalt in der Vorlage. Wenn wir zu den div-Tools gehen, können wir das div auswählen, das wir erstellt haben. Wir wählen die ungeordnete Liste aus. Wir können sehen, dass die ul -Tags da sind, und dann wird es durch den Inhalt innerhalb der Template-Tags gefolgt. Also sehen wir das Template-Element nicht tatsächlich auf dem Bildschirm gerendert. Aber wir sehen auf dem Bildschirm den Namen und auch die ID für jedes Objekt innerhalb unseres Arrays. Wir können auch die Schlüsselwertpaare jedes Objektwerkzeugs anzeigen. Geben Sie sowohl den Namen als auch die ID aus dem Objekt ein. Ist der Wert nach dem Schlüssel, z. B. nach Hause und eins. Wir können das, was wir bereits haben, in einem Listenelement vereinfachen. Also, wenn wir das zweite Listenelement löschen, und dann können wir eine zweite V4-Schleife hinzufügen. Dieser wird Wert in NavLink sein. Der Name-Wert ist optional. Dies kann alles sein, was wir wollen, aber der Name NavLink ist auch optional, aber er muss mit dem Namen innerhalb der äußeren Schleife übereinstimmen. Wir fügen auch eine horizontale Regel hinzu, so dass jedes Listenelement getrennt werden kann. Nun, wenn wir Wert in die doppelten geschweiften Klammern hinzufügen, können Sie diese Ausgabe auf dem Bildschirm sehen. Gehen Sie also zum Browser, und es druckt die Schlüssel und die Werte der Objekte als Paar aus. Wir können sie auch trennen, um mit ihnen unabhängig zu arbeiten. Wenn wir Wert innerhalb der Klammern umgeben. Wir können auch einen Schlüssel hinzufügen, was bedeutet, dass wir sowohl den Schlüssel als auch den Wert zur Verfügung haben, unabhängig voneinander zu verwenden. Sie nach dem Wert ein Komma hinzu und geben Sie dann die Schlüssel ein. Jetzt, anstatt nur den Wert auszugeben, wird auch der Schlüssel getrennt mit der Pipe ausgegeben und dann zurück zum Browser. Wir können das in Aktion sehen. Wir haben den Schlüssel und Wert für jedes Objekt gedruckt. Wir können auch ein drittes Argument hinzufügen ist Schlüssel und Wert. Denken Sie daran, dass wir der V4-Schleife eine Indexnummer hinzugefügt haben, um die Namen in unserer Gästeliste zu drucken. Nun, wir können das auch hier mit den dritten Argumenten tun. Ich werde es erneut Index nennen, weil es Sinn macht, dies zu nennen. Also durch Komma getrennt fügen Sie Index als drittes Argument hinzu. Dann als drittes Argument innerhalb der doppelten geschweiften Klammern werden wir auch den Index ausdrucken. Also speichern und dann zu unserem Projekt gehen und dann aktualisieren. Jetzt können wir auch den Index neben jedem Element gedruckt sehen. Jetzt wissen wir, wie man Objekte durchläuft. Lassen Sie uns seine Technik im nächsten Video in die Praxis umsetzen. Über unsere Navigationslinks, wie wir wollen, dass sie in unserer App aussehen. 29. So fügst du deine Navigations-Links ein: Jetzt wissen wir, wie man mit dem Durchschleifen von Objekten arbeitet, lassen Sie uns dies so strukturieren, dass es besser für unsere Anwendung geeignet ist. Außerdem fügen wir jedem Element einen eindeutigen Schlüssel hinzu und stellen sicher, dass jedes Navigationselement über eine URL verfügt, zu der ein Link verlinkt werden kann. Um zu beginnen, werde ich das vollständige Listenelement aus dem letzten Video entfernen. Ersetzen Sie dies dann durch ein Standardlistenelement, das den NavLink-Punktnamen ausgibt. Dies wird einfach die Namen von unseren Links zeigen, und da dies eine Navigationsleiste ist, wollen wir auch diese Links erstellen. Lassen Sie uns voran und umgeben Sie den nav Link mit einem Tags. Fügen Sie sie innerhalb der Listenelemente hinzu. Am a Tag mit dem href, und lassen Sie dies einfach leer für jetzt und dann schließen Sie das a-Tag. Lassen Sie uns nun einige Links zu unserem Objekt hinzufügen, zu dem wir verlinken, zurück in den Navigationslinks in der App dot js. Nach der ID, die Sie am meisten eine URL hinzufügen möchten, mit der Sie verknüpfen möchten. Dies wird nur ein Dummy-Link sein, nur um seine Arbeit zu testen, nach dem Komma werden wir die URL hinzufügen und einen Link hinzufügen, ich werde nur Google für dieses Beispiel verwenden. Geben Sie H-T-T-P-S Doppelpunkt Schrägstrich, Schrägstrich und dann www dot google dot com. Dann können wir das kopieren und in die vier Links einfügen. Ich werde die zweite auf Amazon dot com gehen, die dritte zu eBay gehen, und dann das vierte Formular, das wir als Facebook hinzufügen. Jetzt haben wir eine URL, um unsere ein Tags in HTML hinzuzufügen. Denken Sie daran, dass wir aus dem letzten Abschnitt gesagt haben, dass wir die doppelten geschweiften Klammern nicht verwenden können , um reaktive Daten zu HTML-Attributen wie diesem hinzuzufügen. Es könnte die doppelten geschweiften Klammern hinzufügen und dann navlink dot URL hinzufügen. Damit dies funktioniert, müssen wir die V bind-Direktive verwenden, um unsere URL hinzuzufügen, oder ich werde die Kurzschrift nur des Doppelpunkts verwenden. Wir müssen auch die doppelten geschweiften Klammern entfernen, damit dies innerhalb eines Attributs funktioniert. Speichern wir das, und wenn wir zu unseren Navigationslinks im Browser gehen, können wir auf die Links klicken und die Arbeit testen. Sie scheinen alle gut zu funktionieren. Wir versuchen nur noch eins. Großartig. Jetzt funktionieren die Links so, wie wir wollen. Es ist an der Zeit, den Links jetzt etwas Styling hinzuzufügen. Da haben wir bereits Bootstrap mit unserem Projekt verknüpft. Wir können einige Bootstrap-Klassen zu unserer Navigation hinzufügen. Zunächst einmal, wenn wir das URL-Tag öffnen, können wir eine Bootstrap-Klasse von nav hinzufügen, und dann in den Listenelementen können wir auch einen Cluster hinzufügen. Auch hier ist dies eine Bootstrap-Klasse von nav Bindestrich Element. Dann innerhalb der Links wird eine Klasse von NavLink hinzufügen, und dann, wenn Sie einige horizontale Linien an Ort und Stelle hinzufügen möchten, nur um unsere App zu brechen. Die erste, die ich direkt unter der Ebene eins Überschrift unseres App-Namens hinzufügen werde, also füge hr darin hinzu. Die zweite ist kurz vor dem schließenden div mit der ID der Navigation und dies wird eine Zeile über und auch unter unseren Navigationslinks hinzufügen. Das letzte, was ich für unsere Navigation tun möchte, ist, jedem Listenelement einen eindeutigen Schlüssel hinzuzufügen. Wir haben das vor ein paar Videos angefasst. Aber dieses Mal haben wir nun Zugriff auf eine ID innerhalb unserer nav links Objekt. Dies macht einen idealen Schlüssel, da jeder Wert einzigartig ist. Jetzt gehen wir zurück zu unserem HTML. Fügen wir nun diesen Schlüssel innerhalb des Template-Elements kurz nach der for-Schleife hinzu. Binden Sie den Schlüssel und legen Sie diesen Wert auf NavLink Punkt-ID fest. Theoretisch sollten sie funktionieren. Aber es wird ein kleines Problem geben, das wir sehen werden, wenn wir zu den Entwicklertools gehen. Klicken Sie mit der rechten Maustaste und überprüfen Sie Wir sehen, dass die rote Warnung Sprichvorlage nicht eingegeben werden kann. Platziert Schlüssel stattdessen auf realen Elementen. Wir erhalten die Warnung, dass wir dies für ein echtes Element verwenden müssen, da Vorlage als Container für den Inhalt der Vorlage verwendet wird. Es fungiert als Wrapper und nicht als HTML-Element. Um dies zu beheben, können wir die Template-Tags in etwas anderes ändern, wie zum Beispiel ein div und speichern Sie das. Nun, wenn wir zurück zur Konsole gehen und aktualisieren, es geht jetzt weg und wir haben einen einzigartigen Schlüssel, der an unserer Navigation arbeitet. Das ist nun unsere Navigation abgeschlossen und auch unsere zweite View-Instanz. Darauf werden wir im nächsten Video aufbauen, dem wir uns ansehen, wie wir extern von einer anderen View-Instanz aus auf eine View-Instanz zugreifen können . 30. So greifst du extern auf Vue Instanzen zu: Wir wissen jetzt, dass wir mehrere Vue Instanzen verwenden können , um bestimmte Abschnitte unserer Anwendung zu steuern. Wir diskutierten, wie dies nützlich sein kann, um gruppenbezogene Funktionen zusammen, wie die Gruppierung aller Navbar-Funktionen, wie in unserem Beispiel, oder sogar eine Sidebar könnte Fall verwenden. Wir können nicht direkt auf Dinge wie unsere Daten und Methoden von einer Instanz aus zugreifen, innerhalb einer anderen Instanz mit diesem Schlüsselwort; es gibt jedoch eine andere Möglichkeit, dies zu umgehen. Wenn Sie extern auf Daten von einer Instanz zugreifen möchten, können wir jeder Instanz einen Variablennamen geben. Wenn Sie zu unserer app.js gehen und diese machen dies ein wenig lesbarer, indem Sie auf die Schaltfläche zum Zusammenklappen auf der linken Seite klicken. Wir machen das für unsere erste Instanz. In zweiter Instanz. Kurz bevor wir New Vue aufrufen, und wir wollen einen Variablennamen von vm1 hinzufügen und dies gleich unserer neuen View-Instanz setzen; und dann dasselbe für die zweite tun; Also Variable vm2. Sie werden oft diese Variablen namens vm sehen. Distanz für Vue Modell, da Vue durch das MVVM Designmuster inspiriert wurde. Sie können mehr darüber mit dem Link am Ende des Abschnitts lesen, wenn Sie möchten. Dieser Variablenname liegt jedoch ganz bei Ihnen. Es kann so benannt werden, wie Sie wollen. Dann kann ich unsere Instanz außerhalb der Instanz mit normalem JavaScript referenzieren. Also, wenn wir von Daten in der ersten Instanz von vm1 ändern wollten, wie die Ereigniskapazität. Wir können es so machen. Wenn wir sicherstellen, dass die Außenseite sowohl vm1 als auch vm2, können wir vm1 auswählen. EventCapacity“. Dann werde ich das auf 15 setzen. Wenn wir nun zur App gehen, können wir die Änderung sehen. Wir können sehen, dass die Teilnahme jetzt 0 oder 15 ist, anstatt o von 25. Seine Änderungen werden mit normalem JavaScript und von außerhalb der View-Instanz durchgeführt. Wir können auch das Gleiche tun, aber innerhalb unserer zweiten Instanz. Lassen Sie uns eine Methode zu unserer vm2-Instanz hinzufügen. Diese Methode werde ich „Kapazität geändert nennen. Dann innerhalb hier können wir das JavaScript schneiden, das wir zuvor verwendet haben. So schneiden Sie 'vm1.eventCapacity. Fügen Sie dies nun innerhalb der Funktion ein. Dann über in HTML, können wir diese Methode aufrufen, indem wir eine neue Schaltfläche hinzufügen. Lassen Sie uns eine neue Schaltfläche innerhalb des Navigationsabschnitts hinzufügen. Kurz nach der horizontalen Linie werde ich eine Schaltfläche mit einem Klick-Handler hinzufügen. Dies wird die Methode zur Kapazitätsänderung auslösen. Wenn diese Methode aufgerufen wird, wird die Methode innerhalb der VM2-Instanz ausgeführt. Es ändert jedoch die Ereigniskapazitätsdaten von unserer vm1-Instanz. Speichern Sie das. Wenn wir den Browser aktualisieren und dann auf die Schaltfläche klicken, sollte sich die Kapazität wieder auf 15 ändern. Dies ist ein wirklich einfaches Beispiel dafür, wie wir auf Instanzen zugreifen können, beide würden JavaScript extern und auch innerhalb von Instanzen verwenden. Es ist wichtig zu wissen, wie das geht, wenn wir jemals Zugriff auf unsere Instanzen von externen Quellen haben müssen. Wir lassen dieses Video dort und wir sehen uns nächstes Mal. 31. Vue Instanz Eigenschaften und Methoden: Während der Erstellung dieses Projekts haben wir unsere eigenen Eigenschaften und unsere eigenen Methoden zur Vue Instanz hinzugefügt, die wir jetzt besser verstehen sollten, wie man mit ihnen arbeitet. Vue stellt uns auch einige Eigenschaften und Methoden zur Verfügung, auf die wir Zugriff haben. Wenn wir nach vuejs.org gehen, die uns zur Vue Homepage führt. Wenn Sie dann auf den API-Link oben klicken, können wir die API-Dokumentation sehen. Wenn wir mit der Navigation auf der linken Seite nach unten scrollen, können wir einige vertraute aussehende Dinge sehen, wie unsere Optionen von Daten, die auf Methoden berechnet werden. Weiter unten gibt es, was wir Instanzeigenschaften und Instanzmethoden nennen. Alle diese Eigenschaften sind Methoden, haben auch ein $ Zeichen Präfix, so dass wir sie leicht von anderen unterscheiden können. Wenn wir zu unserer App gehen, können wir diese als Teil unserer Instanzen sehen. Gehen wir rüber zu app.js. Sie müssen bis zum Ende gehen, können wir ein Konsolenprotokoll erstellen. Ich werde nur den Inhalt von vm1 Konsole protokollieren, die unsere erste Vue Instanz ist. Gehen wir nun zum Browser und öffnen Sie dies in der Konsole. Wir können sehen, dass wir den Inhalt der Vue Instanz haben. Einige davon werden Sie bereits erkennen, wie die Eigenschaft 'el', die Sie sehen können, ist die Verwaltung unseres div mit der Idee der App, die wir früher festgelegt haben. Wir können diese Eigenschaften und Methoden verwenden, Präfix mit einem $ Symbol, um auf Daten zuzugreifen, die wir benötigen. Beispielsweise können wir unser Konsolenprotokoll so ändern, dass die Eigenschaft 'el' angezeigt wird, indem wir nach vm1 ein $el hinzufügen. Dann innerhalb der Konsole können wir das div mit der Klasse der App sehen, die unsere Instanz verwaltet. Lassen Sie uns einfach diese el-Eigenschaft entfernen und werfen Sie einen Blick auf die vollständige Instanz wieder. Es ist eine Menge los hier und wir werden einen Blick auf mehr davon werfen, während wir durch den Kurs gehen. Eine Sache, auf die ich Ihre Aufmerksamkeit lenken möchte, ist unten in der Nähe der Unterseite, Sie können sehen, dass es viele Getter und Setter gibt. Diese werden verwendet, um Werte zu erhalten und Werte zu setzen , und bedeutet, dass Vue beobachten und auf Änderungen reagieren kann. Diese Getter und Setter werden bei der Erstellung der Vue Instanz hinzugefügt. Sie können sehen, dass diese alle unsere Dateneigenschaften, die Vue Proxies für uns und auch unsere berechneten Methoden. Wir haben Formulare eingereicht und KeyPressed über ihnen, die keine Getter oder Setter haben. Das liegt daran, dass sie unsere Methoden sind. Wie wir wissen, beobachten Methoden nicht und reagieren auf Änderungen, sie rendern einfach neu, wenn es eine Änderung an der App gibt. Wenn wir einer Vue Instanz eine neue Eigenschaft hinzufügen, nachdem sie erstellt wurde, wird sie nicht von Vue.js weitergeleitet, so dass sie nicht reaktiv ist. Achten Sie daher nicht auf Änderungen. Wir können dies in Aktion sehen, indem wir eine neue Eigenschaft zu vm1 hinzufügen. Zurück in app.js, wenn wir vm1.title hinzufügen, die noch nicht existiert, und wir werden das auf eine Textzeichenfolge mit einem neuen Titel setzen. Wenn wir nun zur vm1-Instanz in der Konsole gehen, können wir sehen, dass wir eine neue Eigenschaft namens title für die Arnold-Getter oder Setter hinzugefügt haben. Die Eigenschaft ist nicht reaktiv. Wenn Sie also Daten in unserer Anwendung haben, die Sie auf Änderungen reagieren möchten, müssen diese bei der Erstellung vorhanden sein und nicht nachträglich hinzugefügt werden. Wir brauchen diesen Code für das Projekt nicht, also werde ich die Schaltfläche und auch die Kapazitätsänderungsmethode entfernen . Gehen wir weiter und machen das jetzt. Im Index sollten wir die Schaltfläche bewegen und dann in den Methoden in app.js, können wir die Methode der Kapazität geändert entfernen. Während wir den Kurs durchlaufen, werden wir uns weitere dieser Vue Instanzeigenschaften und -methoden genauer ansehen . Beginnend mit dem nächsten Video werden wir einen Blick auf die Verwendung von refs werfen. 32. Elementenreferenz mit Ref: Im letzten Video haben wir uns einige Eigenschaften und Methoden angesehen , die uns in der Vue Instanz zur Verfügung stehen. Eine dieser Eigenschaften, die sehen kann, wird Refs genannt. Wir können Refs verwenden, einen Verweis auf ein Element zu registrieren. Wir können einen Verweis auf jedes Element platzieren, das wir wollen. Ich werde zum Index auf HTML-Seite gehen. Wenn wir nach dem Seitentitel suchen, werde ich mit dem Entfernen einer doppelten geschweiften Klammern beginnen. Dann ersetzen Sie dies einfach durch Gästeliste. Dann werde ich in h1 öffnenden Tag ein ref Attribut hinzufügen. Die Antwort ist auf einen Namen. Dies ist kein Standard-HTML-Attribut, es wird uns von Vue.js zur Verfügung gestellt. Wir können auch jeden Ref-Namen wählen, der mögen wird. Jetzt haben Sie diesen Verweis auf die Elemente. Wir können damit in unserer Vue Instanz arbeiten. Ich werde dieser Ebene auf Überschrift einen Klick-Handler hinzufügen , den Sie mit dieser Referenz verbinden können. Ich würde klicken hinzufügen. Ich werde dies als Methodenname des Änderungstitels festlegen. All dieses Element ist nicht wichtig, wir können diese Methode immer noch neu auslösen, wenn sie angeklickt wird. Dann fügen wir unsere Methode in app.js hinzu. Wir müssen dies in vm2 hinzufügen. Lassen Sie uns unsere Methoden hinzufügen und wir verwenden einen Namen oder ändern Titel. Wir wählen dann die Ref mit diesem Titel zuweisen refs. Dann von vor allen nativen Ansichtseigenschaften haben das Dollarzeichen Präfix. Dann fügen wir den Namen hinzu. Dann Punkt in einem Text, der nur JavaScript ist. Dies ist nicht etwas, das von Vue.js bereitgestellt wird. Hoffentlich können Sie jetzt beginnen, die Vue.js und normale Vanille JavaScript funktioniert fast nahtlos zusammen zu sehen . Wir können JavaScript mit Vue Eigenschaften und Methoden mischen, wo wir brauchen. Nun, wenn wir das speichern und wir gehen über zum Browser, wenn wir auf den Titel klicken, sollten wir sehen, dass der Titel jetzt geändert wird. Neben der Verwendung von Dollarzeichen Refs, um Daten zu setzen, können wir auch auf Daten zugreifen, die sie verwenden. Wenn wir ein Konsolenprotokoll hinzufügen, um dieses Punkt-Dollarzeichen Refs anzuzeigen, können wir sehen, was es zurückgegeben. Innerhalb der Change Titel-Methode in einem Konsolenprotokoll und dieses Dollarzeichen refs. Dann gehen Sie zum Browser. Wir können sehen, dass ein Objekt zurückgegeben wird. Wir können auch sehen, dass es ein h1 ist, das wir ausgewählt haben. Wenn wir diese Objekte öffnen, haben wir Zugriff auf alle dazugehörigen Daten. Wir können den inneren HTML sehen, den Sie zurückgesetzt haben , und auch alle anderen Eigenschaften, auf die wir zugreifen können. Wenn wir zum Beispiel versteckt betrachten, sehen wir, dass es standardmäßig auf false gesetzt ist. Wir können Dollarzeichen Refs Zugriffe verwenden und es innerhalb unserer Methode ändern. Innerhalb der ChangeTitle Methode können wir diesen Punkt Refs, Punktname auswählen. Innerhalb der Methode können wir den inneren Text entfernen und diesen durch Punkt verborgen ersetzen. Dass wir das so einstellen können. Nun, wenn wir diese speichern und gehen Sie zurück zu unserer App, wenn wir auf den Titel klicken. Hidden ist auf true gesetzt, sodass die Elemente verschwindet. Dies ist, wie wir das Dollarzeichen refs Eigenschaft verwenden können um zu referenzieren und Elemente und die Menge oder Zugriff Daten. Es ist auch erwähnenswert, dass wir diese refs-Eigenschaft sowohl innerhalb als auch außerhalb des View-Instanzwerkzeugs verwenden können . Es gibt jedoch etwas zu beachten, wenn Sie refs verwenden, das heißt refs und nicht reaktiv. Sie werden beim ersten Rendern nicht erstellt. Sie werden als Ergebnis der Renderfunktion erstellt. Wir ändern das Element im DOM, aber nicht in der Vorlage Vue.js. Daher ändern wir etwas, das von Vue.js zu einem späteren Tag überschrieben werden kann , wenn es ein erneutes Rendern gibt, z. B. etwas, auf das man achten muss. Verwendung von Refs kann jedoch manchmal nützlich sein und vielleicht am besten verwendet werden, um Daten zu erhalten , anstatt Daten zu setzen, weil keine Reaktivität vorhanden ist. 33. So verwendest du String-Vorlagen: Während dieses Projekts haben wir unsere View-Instanzen erstellt und dann an HTML-Elemente mit der L-Eigenschaft gemountet. Es gibt auch eine alternative Möglichkeit, eine Zeichenfolgenvorlage innerhalb der Ansichtsinstanz zu erstellen . Lassen Sie uns voran und erstellen Sie eine neue View-Instanz, um den Titel unserer App im Inneren zu speichern. Im Inneren können wir die Template-Eigenschaft verwenden, also werde ich nach unten gehen und eine neue Variable erstellen, diesmal vm3 genannt. Dann wird dies unsere neue View-Instanz enthalten, und wie immer nimmt es unser Optionsobjekt ein. Hier drinnen werden wir eine neue Template-Eigenschaft hinzufügen. Diese Eigenschaft wird in einer Zeichenfolge nehmen, daher müssen wir die Markierung umgeben, die wir innerhalb der Zitate zur Verfügung stellen. Wir werden den Titel hier erstellen. Genau wie unser vorhandener Titel werden wir die h1-Tags und dann den anderen Titel der Gästeliste öffnen und dann schließen. Wenn wir nun auf die Indexseite zurückgehen, könnten wir den Titel aus unserem HTML entfernen, um für unsere neue View-Instanz zu kommen. Nun, wenn wir das speichern, wenn wir den Browser aktualisieren, können wir sehen, dass der Titel jetzt von der Seite entfernt wird. Dies liegt daran, dass wir eine neue Ansichtsinstanz erstellt haben, aber wir haben keine L-Eigenschaft, so dass die Vorlage derzeit nicht bereitgestellt wird. Wir können die Instanz manuell mounten, indem wir $ sign mounts verwenden. Dies ist eine neue Instanzmethode, die wir noch nicht angesehen haben, weil wir unsere Vorlage in einer Variablen namens vm3 gespeichert ist. Wenn wir zurück zu der app.js gehen, können wir es so mounten. Geben wir vm3 ein. $mount, und dann innerhalb der Klammer können wir die Elemente hinzufügen, an die wir montieren möchten. Ich werde das div mit der ID der Navigation verwenden. Als eine Zeichenfolge, die in der # und dann Navigation übergeben wird, mountet dies unsere Vorlagen an das Navigationsdiv, das wir bereits in unserem HTML haben. Lassen Sie uns das speichern und sehen, welche Wirkung das hat. Wenn wir zurück zum Browser gehen und dann aktualisieren, haben wir jetzt den h1-Titel zurück , den Sie innerhalb der Vorlage einrichten, aber Sie können sehen, dass wir die Navigationslinks und auch das Styling verloren haben. Lassen Sie uns die Entwickler-Tools öffnen, indem Sie mit der rechten Maustaste klicken und überprüfen, werfen wir einen Blick auf, was los ist. Wir haben unseren Container an der Spitze, was in Ordnung ist, dann sofort danach ist unser h1-Titel, gefolgt von dem div mit der ID der App. Sie können sehen, dass es keine Bootstrap-Zeilen oder eines der 12-Spalten-Gitterdivs von Bootstrap gibt, die Sie in unserem HTML haben. Auch unsere ungeordnete Liste für die Navigationslinks ist nicht da, also warum ist das? Nun, der Grund ist, dass, wenn wir eine Vorlage an ein Element mounten, diese Vorlage jedes vorhandene Markup ersetzt. Dies bedeutet, dass alle unsere nav-Links und Bootstrap-Klassen, es wird einfach den Inhalt unserer Vorlage als neues Markup verwenden. Wir können diese zusätzlichen divs und Klassen innerhalb der Template-Zeichenfolge hinzufügen. Wenn wir zurück zu unseren Vorlagen innerhalb der App und dann innerhalb der Zeichenfolge gehen, können wir beginnen, unsere Bootstrap-Klassen um die Überschrift Ebene 1 hinzuzufügen. Zuvor können wir ein div mit einer Klasse von col-sm-12 hinzufügen, und wir können auch text-center hinzufügen, um dies in der Mitte der Seite auszurichten. Nach der Überschrift der Ebene 1 möchten wir dieses div schließen und das dann speichern. Wenn wir zurück zum Browser gehen, können wir sehen, dass dies das Bootstrap-Styling wieder eingeführt wird, das wir vorher hatten. Aber wie Sie sehen können, werden die Dinge bald in der Vorlage ziemlich chaotisch aussehen. Außerdem gibt es eine weitere Einschränkung. Wir können dies nicht in mehrere Zeilen aufteilen, um es noch lesbarer zu machen. Wenn wir die Ebene 1 Überschrift auf eine eigene Zeile verschieben und dann gleich nach Tag das schließende div auch auf seine eigene Zeile hinzufügen. Speichern Sie das und gehen Sie zurück zum Browser. Wir können sehen, dass das nicht funktioniert. Es gibt einen Weg, um dies zu umgehen, wenn wir zu den Vorlagen gehen, können wir jede Zeile in ihre eigene Zeichenfolge einfügen. Fügen Sie das Zitat am Anfang und am Ende jeder Zeile hinzu, und dann können wir diese zusammen mit dem Plus-Symbol hinzufügen. Speichern Sie das und aktualisieren Sie, damit wir sehen können, dass alles wieder in unserer Arbeit ist. Diese Lösung sieht jedoch immer noch ein wenig chaotisch aus, so dass wir die besten sein können, um mit einfachem Code zu verwenden. Auch da View JS uns diese L-Eigenschaft zur Verfügung stellt , um unsere Template-Syntax innerhalb des HTML zu integrieren. Dies wird oft als eine bessere Alternative angesehen. Ich gehe zurück zu unserer app.view und dann, wenn Sie diese neue Instanz von vm3 entfernen, nur um das Projekt wieder so zurückzukehren, wie es war. Entfernen Sie diese vm3-Variable, entfernen Sie die Mount, und schließlich, wenn wir zurück auf die Indexseite gehen, können wir den Titel der Gästeliste wieder in den HTML einführen. Speichern Sie das und jetzt ist unsere App wieder so, wie es war, bevor Sie die L-Eigenschaft verwenden. So erstellen Sie eine Bildschirmvorlage. Es ist wichtig, dies zu wissen, da Sie in Anwendungen darauf stoßen können und auch wenn Sie die Dokumentation durchlaufen, können Sie auch sehen, wenn Sie mit Komponenten arbeiten. Als Nächstes beenden wir diesen Abschnitt, indem wir uns den Lebenszyklus der View-Instanz ansehen. 34. Der Vue Lifecycle: Wir sollten jetzt ein besseres Verständnis davon haben, wie Vue.js eine Vorlage erstellt und sie im DOM verwalten. Beim Erstellen von Vue Instanzen geht hinter den Kulissen etwas Wichtiges vor sich, was wir noch nicht gesehen haben, und dies ist ein Vue Instance-Lebenszyklus. Wir können uns in verschiedene Phasen des Lebenszyklus einbinden, z. B. bevor die Instanz erstellt wird oder bevor ein Update stattfindet, und wir können Vue mitteilen, welcher Code für jeden dieser spezifischen Punkte im Lebenszyklus ausgeführt werden soll. Es gibt eine Reihe dieser Lifecycle-Hooks, die wir verwenden können, also werfen wir einen Blick auf sie jetzt. Wir sollten jetzt mit dem Erstellen einer neuen Vue Instanz vertraut sein, die neue Vue Instanz verwendet, die wir sehen können, ist oben in dieser Zeichnung. Dies ist der Lebenszyklus-Startpunkt, bevor Daten beobachtet und Ereignisse initialisiert werden. Die Bühne sollte jetzt auch Sinn machen, weil wir aus früheren Videos wissen , dass Vue.js bei der Erstellung der Vue Instanz die darin enthaltenen Daten kennt und den Watcher-Effekt erzeugt. Zwischen diesen ersten beiden Phasen können wir die erste unserer Lebenszyklushaken nennen, die BeforeCreate genannt wird. BeforeCreate ist, wie der Name schon sagt, eine Methode, mit der wir jeden Code definieren können, den wir ausführen möchten bevor eine unserer Daten beobachtet oder irgendwelche Methoden initialisiert wurden. Wenn wir den Code ausführen möchten, nachdem die Daten und Methoden initialisiert wurden, müssen wir dann den erstellten Hook verwenden. Dies bedeutet, dass unsere Instanz erstellt wird, wobei alle Daten eingerichtet werden, wie Beobachter, berechnete Eigenschaften und alle Methoden, obwohl sie zu diesem Zeitpunkt noch an das DOM gemountet werden muss. Die nächste Lebenszyklusstufe bezieht sich auf Vorlagen. Wir haben sowohl die Template-Eigenschaft als auch Vorlagen in unserem HTML-Code in diesem Abschnitt verwendet , hier wird Vue.js nach diesen Optionen suchen und dann diese Vorlagen kompilieren, wenn erforderlich. Nachdem die Vorlagen mithilfe der Template-Eigenschaft kompiliert wurden oder indem Sie die Vorlagen in HTML mit der el -Eigenschaft suchen, wird unser nächster Lifecycle-Hook ausgeführt. Dieser Haken wird als BeforeRemount bezeichnet. BeforeRemount wird aufgerufen, kurz bevor das Einhängen der Instanz beginnt, und kurz bevor die Renderfunktion zum ersten Mal aufgerufen wird. Als nächstes wird el mit Vorlage ersetzen, jetzt hat Vue.js unsere Vorlagen bereit. Es hat alle HTML vorbereitet, die vom Browser gelesen werden können. Die geschweiften Klammern oder die Interpolation, die wir im Editor sehen , werden durch die entsprechenden Datenwerte ersetzt. diesem Grund können wir die doppelten geschweiften Klammern nicht sehen wenn wir einen Blick in die Entwickler-Tools werfen. Das bedeutet, dass die Elemente, die wir mit el angeben , durch unsere kompilierte Vorlage ersetzt werden. Jetzt ist alles vorhanden, um unsere Vorlage auf das DOM zu mounten. Wir sind jedoch noch nicht fertig, sobald unsere Instanz-Montagephase erreicht ist. Wir haben die Reaktivität in diesem Kurs besprochen und wie Vue nach Änderungen beobachtet und dann auf diese Änderungen reagiert, indem wir das DOM erhalten. Dies ist der Effekt, den wir ganz links sehen können, das ist das virtuelle DOM-Re-Rendering und Patch. Dies ist ein fortlaufender Zyklus, und das virtuelle DOM-Rendern und Patch wird ausgelöst, wenn einige reaktive oder so viele Daten geändert werden. Als nächstes haben wir BeforeUpdate. Dieser Zyklus der Aktualisierung bietet uns zwei neue Lifecycle-Haken. First ist BeforeUpdate, und dies, wie es klingt, wird aufgerufen, bevor sich Daten ändern. Zweitens gibt es den aktualisierten Hook. Hier können wir jeden Code hinzufügen, den wir ausführen möchten , wenn eine Datenänderung erkannt wurde, wodurch das virtuelle DOM erneut gerendert wird. Vue.js empfiehlt, diesen Haken in den meisten Fällen zu vermeiden, da wir mit der Computereigenschaft und auch Beobachter zur Verfügung gestellt werden sollten, die wo immer möglich referenziert werden sollten. Als Nächstes gibt es den BeforeDestroy-Hook. Dies wird aufgerufen, bevor eine Vue Instanz zerstört wird. Im Moment wird es genannt, die Inzidenz ist immer noch voll funktionsfähig, für die Zerstörungsphase hat noch nichts begonnen. Dann bereitet Vue die Instanz so vor, dass sie zerstört wird, indem alle Überwachungen, Ereignis-Listener und auch alle untergeordneten Komponenten entfernt werden. Wir haben noch keine Komponenten abgedeckt, aber wir werden es bald tun. Schließlich haben wir zerstört, also sind dies alle Phasen des Lebenszyklus der Vue Instance und in der Instanz, die zerstört wird. Wenn dies geschieht, wird der endgültige zerstörte Hook aufgerufen. Hinter den Kulissen ist nichts Magie los, nur eine Reihe von Etappen der Vue Instanz, die Sie jetzt sehen können, dass wir diese Haken nutzen können. Es gibt eigentlich zwei weitere Hooks, die als aktiviert und deaktiviert bezeichnet werden. Diese sind in der Regel in dieser regulären Instanz nicht verfügbar, sondern werden bei Verwendung einer Kept-alive-Komponente zur Verfügung gestellt. Wir werden später Kept-alive-Komponenten im Komponentenabschnitt abdecken, aber jetzt gehen wir zum letzten Video. In diesem Abschnitt werden wir diese Lifecycle-Haken in die Praxis umsetzen, um sie in Aktion zu sehen. 35. Vue Lifecycle Hooks in Aktion: Jetzt wissen wir, wie der Vue Lebenszyklus funktioniert und wie wir jede dieser Lebenszyklusphasen mit Hooke's, die uns von Vue js zur Verfügung gestellt werden, nutzen können . Diese Haken sind ziemlich unkompliziert, um unsere App hinzuzufügen. Ich werde Ihnen jetzt ein grundlegendes Beispiel für diese in Aktion zeigen. Alles, was wir tun werden, ist jeden dieser Hooks zu erstellen, den wir im letzten Video angeschaut haben und dann einfach ein Konsolenprotokoll machen, sobald jeder dieser Hooks aufgerufen wird. Dies ist nützlich, wie wir sehen können, die Reihenfolge, in der sie an der Konsole angemeldet sind. Während des Instanzlebenszyklus werden diese Hooks dem Stamm der View-Instanz hinzugefügt nicht innerhalb einer der Methoden oder Dateneigenschaften. Lassen Sie uns zu unserer app.js gehen. Wenn wir dann zum Ende von vm1 scrollen und dann ein Komma direkt nach den Filtern hinzufügen, können wir hier unseren ersten Hook hinzufügen , der beforeCreates sein wird. Die Syntax ist ziemlich ähnlich wie die Methoden. Das ist eine Funktion. Dann innerhalb des Funktionskörpers können wir unser Konsolenprotokoll fragen. Ich werde nur den Text von BeforeCreates Konsole protokollieren. Obwohl dies ein einfaches Beispiel mit einem Konsolenprotokoll ist, in diesem Funktionskörper können wir in diesem Funktionskörperjeden Code hinzufügen, den wir ausführen möchten, bevor die Instanz erstellt wurde. Ich werde am Ende ein Komma hinzufügen und dann einfach kopieren, bevor ich Hook erstelle. Dann werde ich das in sieben weiteren Malen einfügen, damit Sie alle acht Haken in Aktion sehen können, also 1, 2, 3, 4, 5, 6, 7. Jetzt werde ich das Komma vom letzten entfernen. Der zweite ist der kreative Haken. Ändern Sie dann den Text, der im Konsolenprotokoll erstellt wurde. Wir haben dann BeforeRemount. Dann wird natürlich der nächste Job gemountet, also ändern Sie den Namen in den eingehängten Hook und fügen Sie dann den Text im Konsolenprotokoll hinzu. Dann gehen wir zu den aktualisierten Phasen über. Zuerst haben wir BeforeUpdate, gefolgt von aktualisiert. Schließlich sind die letzten beiden eine zerstörte Phase, also ist die zweite bis letzte BeforeDestroy. Dann schließlich ist der letzte Haken die zerstörte Phase. Speichern Sie das. Wenn wir nun zum Browser gehen und dann mit der rechten Maustaste klicken und „Inspect“, um die Entwickler-Tools zu öffnen. Wählen Sie die Konsole und wir können sehen, dass die ersten vier Haken aufgerufen werden, wir haben beforeCreates, erstellt, beforeRemount und auch montiert. Dies ist sinnvoll, da die Instanz erstellt und ebenfalls eingehängt wurde. Wir haben jedoch keine Datenänderungen veranlasst oder dazu geführt, dass die Instanz noch zerstört wird. Wenn wir auf das Eingabefeld gehen und etwas innerhalb von dort eingeben, können wir sehen, jetzt haben wir die vor Updates und Updates für jeden Tastendruck, den wir machen, ausgelöst. Wir haben dieses Verhalten, weil wir die Dateneigenschaft des neuen Namens Text Setup in unseren Datenobjekten haben . Außerdem haben wir dies dem Eingabefeld mit bidirektionaler Datenbindung mit V-Modell hinzugefügt. Denken Sie auch daran, dass jede Dateneigenschafteneinrichtung, die bei der Erstellung der View-Instanz ausgewählt wurde, dann von Vue js überwacht wird und Updates ein erneutes Rendern auslösen. Dies lässt nur einen BeforeDestroy und zerstörten Lebenszyklus-Haken ausgelöst werden. Wenn Sie sich an das Video mit Zeichenfolgenvorlagen erinnern, haben wir die Vue Instanzmethode verwendet, die Werkzeuge namens $Mounts um die Vorlage an das ausgewählte div an der Stelle der el Eigenschaft zu mounten. Vue js bietet uns auch eine andere Instanzmethode namens $Destroy. Dies, wie es klingt, zerstört eine Vue Instanz und erledigt alle Bereinigungsarbeiten, wie das Entfernen aller Ereignis-Listener und das Binden aller Direktiven, die wir einrichten. Wenn wir auf die Indexseite zurückgehen und das Formular suchen, haben wir bereits einen Ereignishandler beim Senden. Wir können es leicht verwenden, um die Destroy-Methode aufzurufen, also wenn wir einfach $Destroy innerhalb von dort hinzufügen. Nun, wenn wir den Browser aktualisieren und dann einen Text eingeben, um ein Update auszulösen. Dann schließlich, drücken Sie die Taste, die die „Destroy-Methode“ heißt, wir können jetzt sehen, alle Lebenszyklus-Hooks sind jetzt in der Konsole ausgelöst. Jetzt wurde unsere vm1-Instanz zerstört. Vue hat nicht mehr die Kontrolle über unseren Anmeldebereich. Wir können dies sehen, indem wir versuchen, einen neuen Namen zu unserer Gästeliste hinzuzufügen. Sie werden wissen, dass es sich in der Konsole befindet, während wir tippen werden keine Updates ausgelöst. Unsere Vue Instanz wurde getrennt und hat jetzt keine Kontrolle über die Ausgänge. Der HTML-Code ist noch vorhanden. Es wird einfach nicht mehr aktualisiert. Lassen Sie uns beenden, indem Sie zurück zur Indexseite und zurück zur Submit-Methode gehen. Wir können die Destroy-Methode entfernen und dann die App wieder einsetzen , um zu arbeiten, indem wir unser Formular eingereichten Methode hinzufügen. So funktioniert der Lebenszyklus von Vue js in der Praxis und wie wir uns in jede Phase einbinden können. Offensichtlich kann jeder Lebenszyklus-Hook verwendet werden, um komplexere Aufgaben auszuführen als ein einfaches Konsolenprotokoll. Aber ich wollte dir nur zeigen, welche Bühne jeder Hook genannt wird und sie auch in Aktion zeigen. 36. Abschnitts-Outtro: Tiefere Einsichten in Vue: Ich hoffe, Sie haben diesen Abschnitt genossen und Ihr erstes Projekt erstellt. Mittlerweile sollten wir uns viel mehr mit der Funktionsweise von Vue.js vertraut machen und was sie tun kann. Wenn Sie sich immer noch ein wenig überwältigt fühlen, machen Sie sich keine Sorgen. Das ist völlig normal und Sie bekommen viel mehr Übung von dem, was Sie bisher gelernt haben. Wir werden nun zu einem neuen Abschnitt übergehen, in dem wir nicht nur ein neues Projekt beginnen, sondern wir werden auch prüfen, wie wir Build-Tools verwenden können und wie sie unsere Projektsetup zusammen mit unserem Workflow verbessern können . Ich seh dich dort. 37. Abschnittseinführung: So erstellst du Tools und Workflow: Dieser Abschnitt ist fokussiert und wie wir Build-Tools verwenden können, um unsere Projekte zu verbessern. Außerdem, wie wir unseren Workflow verbessern können, ihn besser für größere Mobilitätsanwendungen geeignet zu machen. Wir werden diese neuen Build-Tools verwenden, um unser nächstes Projekt, das Creative Cards genannt wird, einzurichten . In diesem Projekt werden wir eine Grußkartenanwendung erstellen, in der der Benutzer seine eigene benutzerdefinierte Grußkarte mit eigenen benutzerdefinierten Texten und Bildern erstellen kann . Ich hoffe, Sie freuen sich auf den Start mit dem neuen Projekt. Beginnen wir mit der Installation von Node und NPM. 38. So installierst du Nodes und NPM: Während dieses Abschnitts werden wir unsere nächste Einrichtung auf eine etwas andere Weise einrichten als das letzte Mal. Wir werden ein Tool namens View CLI verwenden. Wir schauen uns die Ansicht CLI an und was es für uns im nächsten Video tun kann. Aber jetzt müssen wir Node JS und NPM installieren, die wir beide für die Ansicht CLIT benötigt haben. Ich gehe zu meinem Web-Browser. Dann werde ich zu nodejs.org gehen, und es wird Sie auf den Knoten J-s Homepage bringen. Node JS erlaubt es uns grundsätzlich, JavaScript auf dem Server zu verwenden , anstatt nur innerhalb des Browsers, in dem es historisch verwendet wurde. Es kann verwendet werden, um einen Webserver Fotos zu erstellen, sondern wird in der Ansicht CLI verschmelzen behandelt diese Fotos. Node JS-Download enthält auch NPM. NPM ist ein Knoten-Paketmanager. Wir gehen rüber zu npmjs.org. Dies ist die Website für den NPM-Paketmanager. Dies ermöglicht es uns, Zugang zu Tausenden von JavaScript-Paketen von Code zu haben, die wir zu unserem Projekt hinzufügen können. Zu den, was in diesem Projekt wird die Verwendung von Paketen wie Web Pack und Bubble sein, die wir bald näher betrachten werden. Außerdem verwenden wir Firebase für unseren Fotospeicher, der über ein NPM-Paket installiert werden muss. Sogar View selbst ist als Paket installiert. Zuerst gehen wir zurück zu Node JS, ich werde mit der Installation beginnen. Ich gehe zu den Downloads, und wenn Sie dann einen Download für Ihr bestimmtes System wählen, wenn Sie nicht sicher sind, für welches Sie gehen sollen, wird die Homepage normalerweise automatisch erkennen, welches System Sie verwenden, also wir sollten den richtigen Download zur Verfügung haben. Ich werde die neueste Version installieren. Ich werde auf Ströme klicken. Es gibt ein paar Sekunden zum Download. Sobald das erledigt ist, öffnen und installieren Sie einfach auf die übliche Weise. Ich benutze einen Mac, aber es könnte unter Windows etwas anders sein. Aber du solltest keine Probleme haben. Ich werde nur fortfahren und die Lizenzierung zustimmen und dann auf Installieren klicken. Geben Sie ihnen einfach einen Moment, um die Installation abzuschließen. Dann haben wir Node und NPM auf unserem Rechner installiert. Lassen Sie überprüfen, dass dies erfolgreich installiert wurde, ich werde zum Terminal gehen. Ich benutze einen Mac für diesen Kurs, aber wenn Sie einen Windows-Computer verwenden, haben Sie auch Zugriff auf ein Befehlszeilenprogramm, wie die Windows PowerShell. Gehen Sie zu, dass, wenn Sie einen Windows-Computer verwenden. Alle Befehle, die wir in diesem Kurs verwenden, sollten auf beide anwendbar sein. Lassen Sie das ein wenig größer machen, und wenn wir überprüfen, haben wir Node und NPM installiert, mit einigen einfachen Befehlen. Zuerst werde ich Node und dann -v eingeben . Wenn Sie sehen, die Versionsnummer angezeigt direkt darunter, das bedeutet, dass Knoten eine erfolgreich installiert, das gleiche mit NPM. NPM -v momentan ist es 5.0.3. Wenn Sie wie ich die Versionsnummern wie folgt angezeigt haben, haben Sie erfolgreich Node und NPM installiert und Sie sind jetzt bereit, zum nächsten Video zu gehen, wo wir uns die Ansicht CLI ansehen und wie Sie es verwenden, um unser Projekt einzurichten. 39. So erstellst du Scaffolding mit dem Vue-Cli: Im letzten Video haben wir node.js und den Knotenpaketmanager erfolgreich installiert. In diesem Video werden wir ein Tool namens Vue CLI verwenden, um unsere Projekte zu Gerüst zu erstellen. CLI steht für Kommandozeilenschnittstelle und es ermöglicht uns, ein neues Projekt mit den meisten gemeinsamen Setup bereits für uns gesorgt zu erstellen. JavaScript-Projekte können ziemlich komplex werden, wenn Sie alle diese Build-Tools selbst einrichten , zusammen mit allen NPM-Paketen, die wir oft sehen. Gehen wir zu Google und wir werden nach der Vue CLI suchen und wir brauchen die erste, die der GitHub-Link für die Vue CLI ist. Wählen Sie diese und dann werden wir zur offiziellen GitHub-Seite weitergeleitet. Wenn wir nach unten scrollen, können wir zuerst die Installation sehen , aber wir werden in nur einem Moment darauf gehen. Wenn wir zu den offiziellen Vorlagen gehen, können wir die aktuellen verfügbaren Vorlagen sehen, die die komplexesten enthalten, die eine voll funktionsfähige Webpack-Version ist , die alle heißen Neuladen und Tests enthält , die wir normalerweise benötigen für Projekte. Es gibt eine einfachere Version dieses Webpacks 1 und wir werden diese für dieses Projekt verwenden. Wenn Sie browserify gegenüber webpack bevorzugen, gibt es auch eine Standard- und eine einfache Version für diese beiden. Aber ich werde für den Rest dieses Kurses bei Webpack bleiben. Es gibt auch eine einfache Version, die nur eine einzelne HTML-Datei ist, die eher der Gästelistenanwendung ähnelt, die wir zuvor erstellt haben. Diese Vorlagen sparen uns viel Zeit beim Erstellen neuer Projekte, da wir sonst alles, was wir brauchen, manuell installieren und konfigurieren müssten. Für das nächste Projekt werden wir die einfache Webpack-Vorlage verwenden , da wir nicht das komplexere Webpack-Setup mit dem Test benötigen. Um dies zu installieren, gehen wir zurück zum Terminal und dann installieren wir die Vue CLI mit dem Knoten-Paket-Manager und dies geschieht mit NPM installieren und dann dash G, um dieses Paket global zu installieren und dann den Namen Das Paket ist die Vue CLI und drücken Sie dann „Enter“. Wenn Sie auf einem Mac sind und dies nicht funktioniert, müssen Sie möglicherweise vorher das Pseudo-Schlüsselwort verwenden. Dies wird mit den Administratorrechten installiert und Sie müssen auch ein Kennwort hinzufügen. Fügen Sie pseudo NPM installieren dash G Vue CLI. Alternativ, wenn Sie Ihre Privilegien ändern möchten, ohne Pseudo zu verwenden, werde ich auch einen Link am Ende dieses Abschnitts hinzufügen. Auf diese Weise können Sie Ihren Computer als Administrator konfigurieren, ohne bei der Installation eines neuen Pakets Pseudo eingeben zu müssen. Dadurch wird die Vue CLI global installiert, so dass wir sie für alle unsere Projekte verwenden können, anstatt sie nur für das Projekt verfügbar zu sein, das wir gerade erstellen. Sobald das installiert ist, ist das letzte, was ich tun möchte, zu dem Bereich zu navigieren, in dem wir das Projekt erstellen möchten. Ich werde meinen auf dem Desktop hinzufügen. Um zum Home-Verzeichnis zurückzukehren, geben wir CD ein. Wir verwenden LS, um den Inhalt des aktuellen Verzeichnisses anzuzeigen. Wir können sehen, dass wir den Desktop zur Verfügung haben, so dass wir in diese ändern können wir CD wieder verwenden, gefolgt von Desktop. Dann können wir sehen, dass wir jetzt auf dem Desktop sind. Jetzt, wenn wir das Projekt einrichten, wird es an diesem Ort installiert. Lassen Sie uns nun das Projekt innerhalb des Terminals initialisieren. Um ein neues Vue CLI-Projekt einzurichten, verwenden wir Vue, gefolgt von dem Namen der Vorlage, die wir verwenden möchten. Ich werde Webpack einfach verwenden. Dann geben wir dem Projekt einen Namen, also wird dieser Name dieses Projekts kreative Karten sein. Sobald das fertig ist, drücken Sie „Enter“. Sobald das installiert ist und sobald die Vorlage heruntergeladen wurde, müssen wir dann einige einfache Fragen beantworten. Der erste ist der Name des Projekts. Es ist derzeit auf kreative Karten eingestellt, die wir bereits getippt haben. Also, wenn wir das wollen, könnten wir einfach „Enter“ drücken. Wir können auch eine Projektbeschreibung hinzufügen, aber ich werde nur darauf eingehen. Fügen Sie den Namen des Autors hinzu, also füge ich dort meinen Namen hinzu. Verwenden Sie SASS? Ich werde keine SASS für diese Projekte verwenden, also werde ich „Enter“ drücken. Wie Sie sehen können, ist es bereits auf Nein gesetzt. Jetzt gibt es uns eine Liste der Schritte, die wir ergreifen müssen, nur um dies zu beenden. Zunächst einmal müssen wir CD, um das Verzeichnis in das Creative Cards Projekt zu ändern , das wir gerade eingerichtet haben. Ich werde „Enter“ drücken. Sobald Sie dies getan haben, ist der nächste Schritt NPM installieren und dies lädt alle NPM-Pakete, die erforderlich sind. Alle diese Pakete sind innerhalb einer Datei namens package.json aufgeführt und wir werden den Inhalt dieser Datei bald erkunden. Dies kann ein wenig Zeit in Anspruch nehmen, je nachdem, wie viele NPM-Module Sie haben. Der letzte Schritt ist NPM run dev und dies besteht darin, den Entwicklungsserver innerhalb des Browsers auszuführen. Ich werde das nur noch nicht ausführen, weil ich dies innerhalb von Visual Studio-Code ausführen werde . Schließen wir einfach diese Windows herunter und wir sollten jetzt sehen , dass unser Kreativkarten-Projekt jetzt auf dem Desktop ist. Ich werde dies in einem Visual Studio öffnen, also öffnen wir das und ziehen Sie dann über die kreativen Kartenprojekte hinein. Dann jetzt, wenn wir rüber zur Ansicht gehen und dann zum integrierten Terminal gehen, können wir dann unseren Entwicklungsserver starten. NPM führen Sie dev aus und drücken Sie dann „Enter“. Dann sollte dies hoffentlich im Browser geöffnet werden und sollte einen Moment dauern, um sich zu öffnen. Wenn du das siehst, dann sind wir gut zu gehen. Unser Entwicklungsserver ist jetzt eingerichtet. Oben im Terminal können wir sehen, wo das Projekt läuft, also können wir sehen, dass dies an Port 8080 läuft. Möglicherweise müssen Sie diesen Link kopieren und in den Browser einfügen , wenn er nicht automatisch geöffnet wird. Ein Entwicklungsserver ist nicht immer erforderlich, aber es macht Sinn, einen zu verwenden, da er uns erlaubt, unsere App und Testbedingungen ähnlich wie eine echte Serverumgebung zu erstellen. Es hat auch zusätzliche Vorteile wie Live-Nachladen. Der Browser aktualisiert Änderungen, ohne dass wir die Seite aktualisieren müssen. Jetzt haben wir das Projekt erstellt und unser Webserver läuft. Lassen Sie uns diese Dateien und Ordner erkunden, die uns mit der Vue CLI zur Verfügung gestellt wurden. 40. So erkundest du dein Projekt-Layout und baust Tools: Im letzten Video haben wir erfolgreich unsere neuen Creative Cards Projekte mit der Vue CLI erstellt . Ich habe jetzt das Projekt in Visual Studio geöffnet und der Entwicklungsserver läuft. Jetzt möchte ich mich nur ein paar Augenblicke nehmen, um die Projektstruktur zu betrachten, die wir tatsächlich erstellt haben. Wenn wir uns die Dateien und Ordner auf der linken Seite ansehen, können wir sehen, dass der erste Ordner die Knotenmodule sind. In diesem Ordner werden alle MPM-Module installiert, wenn wir den MPM-Installationsbefehl im letzten Video ausführen. Dies ist, wo Dinge wie die View Call Library befindet, und jetzt haben wir das als Paket, wir brauchen nicht, um die CDN-Links zu verwenden, wie wir es in den ersten Projekten getan haben. Als nächstes haben wir den Quellordner. Der Quellordner wird dort sein, wo wir die meiste unserer Arbeit erledigen. Hier werden wir den größten Teil unseres Codes für die Projekte hinzufügen. Dies enthält alle unsere Projekte Quelldateien, und diese werden alle auf dem Server gespeichert, anstatt für die Öffentlichkeit zugänglich zu sein. Als nächstes haben wir die dot-babelrc-Datei. Dies ist die Konfigurationsdatei für ein Tool, das wir installiert haben namens babel. Während wir den Kurs durchlaufen, werden wir einige der neuen JavaScript-Funktionen der neuesten Version von JavaScript nutzen , die ES6 oder ES2015 genannt wird. Sowohl ES6 als auch ES2015 sind das Gleiche. ES6 ist die Version, ES2015 ist das Jahr der Veröffentlichung. Das ES, das in beiden ist, steht für ECMAScripts. ECMAScript ist ein Standard oder eine Spezifikation für Skriptsprachen, während JavaScript die eigentliche Skriptsprache ist, die auf dem Standard basiert. Wenn wir über ES6 oder ES2015 sprechen, sprechen wir über dasselbe. Der Browser kann diesen neuen Code jedoch nicht verstehen. Hier kommt ein Babel ins Spiel. Es nimmt unseren Code und kompiliert ihn zurück in ES5 umgewandelt werden, die dann vom Browser gelesen werden kann. Darauf kommen wir später zurück. Gitignore ist für das git Versionskontrollsystem. Hier können wir alle Dateien oder Ordner auflisten, die Sie nicht von git verfolgt werden möchten. Dann haben wir unsere vertraute index.html Datei. Das funktioniert wie im letzten Projekt, wo wir noch unseren Haupt-App-Container haben. Wir haben auch ein Skript-Tag unten unten. Im ersten Projekt hatten wir nur eine JavaScript-Datei, die unsere Datei app.js ist, in der alle unsere Ansicht js-Code enthalten war. Dieses Projekt wird anders funktionieren, weil wir viele Dateien haben werden, hauptsächlich weil wir unsere Call-Basis in separate Module spucken, die als Komponenten bezeichnet werden . Wir verwenden dann webpack, das mit der Vue CLI installiert ist, wobei pack ein Modul-Bundler ist , der im Grunde all unseren Code, den Sie schreiben, zusammen mit allen Abhängigkeiten wie babel, und dann bündelt alles in einer Datei. Diese Bundle-Datei, die wir hier unten haben werden, wird vom Browser nicht gelesen. Die Ausgabe seiner kompilierten Datei ist die Datei build.js, die Sie hier sehen können. Möglicherweise stellen Sie auch fest, dass es in der Projektstruktur keinen dist-Ordner gibt. Dist Ordner wird nur erstellt, wenn wir für die Produktion erstellen, und wir haben dies noch nicht getan. Wir arbeiten vorerst nur mit dem Entwicklungsserver. Wir haben auch die package.json-Datei, die Sie erkennen können, wenn Sie in der Vergangenheit mit Knoten gearbeitet haben. Diese Datei enthält Informationen über unsere App und enthält auch alle Modul-Abhängigkeiten, die Sie möglicherweise haben. Ich schließe das Terminal einfach ab, damit du noch mehr sehen kannst. Die Vue CLI ist bereits gefüllt, der Name und die Beschreibung sowie einige Informationen zu diesen Projekten. Dies sind die Informationen, die wir während des Installationsvorgangs zur Verfügung gestellt haben. Die bereitgestellten ASM-Skripte wie dev und built. Wir haben dev vor dem Ausführen des Entwicklungsservers verwendet, indem wir npm run dev verwenden npm rebuilt ausführen, wird unsere App-Produktion aufbauen. Es wird auch den Distributionsordner für unser Bundle erstellen. Dieser Produktionsaufbau verkleinert auch unseren Kern 2. Dann haben wir eine Liste aller Abhängigkeiten, die Projekte, wie View js. Wir können auch alle Abhängigkeiten angeben, die wir nur für Entwicklungen in den Dev-Abhängigkeiten Objekte wie babel verwenden möchten , weil wir dies nur während der Entwicklung verwenden möchten , um dann unseren Code produktionsbereit zu konvertieren. Wir haben dann auch eine README-Datei mit den Anweisungen zum Ausführen und Erstellen unserer App und dann eine webpack.config-Datei. Dies, wie der Name schon sagt, ist, wo wir webpack konfigurieren können. Ich werde hier nicht im Detail auf alles eingehen, da Webpack selbst ein Kursthema sein kann , aber eines der wichtigsten Dinge sind die Ein- und Ausgabedateipfade, die Sie hier sehen können. Der Einstiegspunkt ist unsere Quelldatei, die main.js ist, die sich innerhalb unseres Quellordners befindet. Obwohl wir viele Quelldateien beim Erstellen von Komponenten haben, werden sie alle noch durch diese main.js Datei gerendert und wir werden uns dies bald genauer ansehen. Die Ausgabe ist unsere build.js Datei und dies ist die endgültige Datei, die innerhalb des Browsers mit all unserem Kompiliercode ausgeführt wird. Dann können wir Dinge wie Lader hinzufügen. Wie ich bereits erwähnt habe, verwenden wir babel, um jeden ES6-Code in normale JavaScripts zu konvertieren und hier ist der babel Loader , der nach Dateien mit der Erweiterung the.js sucht. Oft sehen wir hier auch eine Liste dessen, was man Presets 2 nennt , aber weil wir die babel.rc Datei haben, haben wir stattdessen alle unsere Presets aktiv. Voreinstellungen sind ein bisschen wie das Hinzufügen von Plugins. Sie sind Presets verfügbar, um nicht nur ES6-Code zu konvertieren, sondern auch Dinge wie jsx-Code und die React-Bibliothek. Wenn wir zu unserem Quellordner gehen und dann auf main.js klicken, ist dies eine Hauptdatei für Webpack zu verwenden. Diese Datei importiert sowohl die View-Bibliothek als auch die Haupt-App-Datei namens App.vue. Sie können sich das Update App.vue als Haupt-Wrapper oder die übergeordnete Datei für alle Komponenten vorstellen , in denen wir erstellen. diesem Grund ist der Webpack-Einstiegspunkt main.js, weil er App.vue rendert und dann diese App.vue Datei den ganzen Rest Follow-Code in der Anwendung enthält. Sie werden auch die vertraute el Eigenschaft sehen, die die ID innerhalb der Indexseite ist, auf der wir unseren Inhalt rendern möchten. Wenn wir App.vue erkunden, ist dies, was eine einzelne Dateikomponenten genannt wird. Es hat eine.v Erweiterung und der Inhalt ist in drei Abschnitte unterteilt. Zuallererst haben wir den Template-Abschnitt. Eine Vorlage ist der Hauptinhalt der Komponente. Hier können wir unser HTML-Markup erstellen, das wir innerhalb der Komponenten verwenden möchten. Wir können auch unsere Ansichtsdaten mit den doppelten geschweiften Klammern mischen , genau wie wir es zuvor getan haben. Darunter haben wir dann unseren Skript-Abschnitt. So viel wird das aus dem letzten Abschnitt vertraut aussehen. Die Skript-Tags, in denen wir unsere vuejs-Datumseigenschaften, unsere Methoden, berechnete Eigenschaften und den ganzen Rest, den wir bisher angesehen haben, und auch jedes einfache JavaScript enthalten möchten berechnete Eigenschaften und den ganzen Rest, den wir bisher angesehen haben . Wir werden uns dies während der Projekte genauer ansehen. Weiter unten haben wir den dritten und letzten Abschnitt unserer Komponente, die den Style Abschnitt ist. Wir können auch Stile zu dieser Vorlage hinzufügen. Wir haben die Möglichkeit, diese Stile auf die gesamte App anzuwenden. Ich werde sie nur in dieser bestimmten Vorlage enthalten. Teilen Sie unseren Code so in eine einzige Dateivorlagen wird möglich gemacht, indem Sie eine Rechnung Tools wie Webpack verwenden, die alles zusammen für uns in einer gebündelten Ausgabedatei am Ende bündelt. Dies ist also ein Überblick über die Struktur unserer neuen App, die mit der Vue CLI eingerichtet wurde. Jetzt weiß ich, dass die Dinge im Moment etwas kompliziert aussehen können, wenn diese Art von Setup Ihnen nicht vertraut ist , aber wir werden diese Struktur für den Rest des Kurses verwenden. Am Ende sollten Sie also nach etwas mehr Übung viel bequemer sein. 41. So verwendest du das Datenobjekt mit einzelnen Dateivorlagen: Im letzten Video begann, die einzelnen Dateiansicht-Vorlagen zu betrachten. Jetzt möchte ich einen Blick auf die Funktionsweise von Skripten werfen, insbesondere mit der Dateneigenschaft, die Sie bereits in diesem Kurs verwendet haben. Lassen Sie uns zunächst sicherstellen, dass unsere neue App läuft. Wenn Ihr Server läuft, großartig, können Sie einfach zu Ihrem Browser gehen und sehen, wie die App so läuft. Wenn Sie nach einer Pause zurückkommen und der Aufschlag nicht läuft, müssen wir den Entwicklungsserver neu starten. Gehen Sie zu Visual Studio Code und gehen Sie dann zum integrierten Terminal. Wenn Sie das Standardterminal verwenden, wird nicht ihre in Visual Studio oder Ihrem Texteditor verwendet. Möglicherweise müssen Sie Cd verwenden, um in das aktuelle Verzeichnis zu wechseln, und mpm ausführen, dev von dort ausführen. Innerhalb des Terminals läuft mein Entwicklungsserver noch. Ich bin Start schließt Begriff, wir haben Kontrolle und dann c, und dann werden wir zurück in das Projektverzeichnis gebracht. Um nach vorne und wieder zu kommen, müssen wir mpm run dev ausführen und dann Enter drücken. Sie dann den Browser erneut öffnen, wenn der Server gut läuft, aber nicht im Browser geöffnet wird, können Sie ihn öffnen, indem Sie localhost: 8080 im Browser eingeben und dann sollte er laufen. Die Homepage, die Sie sehen, besteht aus dem Logo, den wesentlichen Links und auch den Ökosystem-Links. Wir können diese sehen, wenn Sie zum Projekt gehen und dann die app.vue Datei öffnen. Immer Code sollte innerhalb der Template-Tags enthalten sein, was der obere Abschnitt ist, so dass wir das Bild Link ganz oben haben. Wir haben dann die Ökosystem-Überschrift gefolgt von den Links, die wir zuvor gesehen haben. Dies ist alles nur normales HTML, und Sie können sogar Ansichtsdaten mischen, genau wie wir es zuvor getan haben. Im folgenden Skript, wenn wir zu unserer View-Instanz gehen, haben wir die Nachrichtendaten-Eigenschaft, die besagt, willkommen zu Ihrer vue.js App. Wir können sehen, ob wir über den Browser gehen, wir haben diese Anzeige nicht auf der Seite. Wir können dies ganz einfach in unsere Vorlage einfügen. Ich werde das ungefähr oben hinzufügen, indem ich einfach die doppelten geschweiften Klammern öffne. Dann können wir die Nachrichtendatumseigenschaft in dort hinzufügen, und speichern Sie das. Dann jetzt, wenn wir über den Browser gehen, können wir sehen, dass es sagt willkommen zu Ihrem vue. Js App. Möglicherweise haben Sie bemerkt, dass wir diesmal keine Seitenaktualisierung durchführen mussten. Dies ist das heiße Nachladen, das von Web Pack zur Verfügung gestellt wird. Wenn wir auf die package.js auf Datei gehen, wenn wir die mpm laufen def ausführen. Wir können sehen, dass auch den dash hot Befehl ausgeführt wird, und hier kommt das heiße Nachladen von. Zurück in der App. vue, wenn wir nur eine kleine App haben, können wir unsere gesamte Anwendung innerhalb dieser einzigen Vorlage erstellen. Wir werden diese App in kleinere Komponenten im nächsten Abschnitt aufteilen. Um Dinge selbstständiger und verwaltbarer zu machen, wissen Sie, dass das Innere unserer Skript-Tags ist, unsere View-Instanz sieht ein wenig anders aus als die, die wir in den letzten Projekten verwendet haben. Wir können zum Beispiel immer noch die gleichen Methoden, berechnete Eigenschaften und Uhren einbeziehen. Die Dateneigenschaft funktioniert jedoch ein wenig anders. Die Skripte und auch der Stilabschnitt ist nicht erforderlich, um auszuführen. Wir können es sogar löschen und dann den Browser aktualisieren. Sie können sehen, dass das Absolute läuft, aber natürlich ohne die Meldungsdaten angezeigt werden. Fügen wir es wieder hinzu und wir können einen Blick auf die Unterschiede werfen. Zuallererst müssen wir unsere Skript-Tags erstellen. Das erste, was wir tun müssen, ist einen Export, Standard und dann Umgebung im Code wirft. Dies ist Teil des ES6-Modulsystems. Das Exportieren des Moduls bedeutet im Grunde, dass es jetzt als Import innerhalb von Dateien verwendet werden kann. Wir können diesen Import innerhalb der wichtigsten js sehen. Die Datei app.vue wird importiert, indem Sie einen Dateipfad und in diesem Fall der App auch den Dateinamen angeben. Wir exportieren alle Module oder Komponenten während dieses Projekts und importieren sie bei Bedarf, so dass Sie viel Übung bekommen, dies zu tun. Gehen wir zurück auf die app.vue. Wenn wir nun versuchen, unsere Nachrichteneigenschaft wieder hinzuzufügen, wenn wir versuchen, unsere Daten hinzuzufügen, genau wie wir es im letzten Video getan haben, indem wir unsere Datenobjekte erstellen und dann die Nachricht gleich einer Zeichenfolge setzen, werde ich hinzufügen, dass willkommen. Wenn wir das speichern und zum Browser gehen, werfen wir einen Blick. Wir haben nicht die Nachrichteneigenschaft Willkommensseite auf dem Bildschirm angezeigt. Öffnen wir die Entwicklertools und gehen Sie dann in die Konsole. Wir haben ein paar Fehler. Zuerst sehen wir, dass die Datenoption eine Funktion sein muss. Dann bewirkt dies auch die zweite Warnung uns mitteilt, dass die Nachrichteneigenschaft nicht definiert ist. Um dies zu beheben, müssen wir die Dateneigenschaft als Funktion einschließen , die dann einige Daten zurückgibt. Um dies zu tun, geben Sie die Dateneigenschaft in eine Funktion wie diese zurück. Dann müssen wir nur innerhalb dessen einige Daten zurückgeben. Öffnen Sie die doppelten geschweiften Klammern und dann innerhalb dieser Return-Anweisung können wir unsere Dateneigenschaft hinzufügen, genau so. Jetzt, wenn wir dies speichern und zum Browser gehen, verlieren wir jetzt die Fehlermeldungen, was großartig ist, und wir haben jetzt die Willkommensmeldung angezeigt. Es gibt einen guten Grund, warum wir die Daten innerhalb einer Funktion zurückgeben müssen , wenn Komponenten verwendet werden. Dies liegt daran, dass Komponenten wiederverwendbar sind. Wenn Sie mehr als eine Komponente haben, die genau dieselbe Dateneigenschaft teilt, muss ich alle Komponenten den gleichen Wert der Daten teilen, sie werden auch alle zusammen aktualisiert, wenn es eine Änderung gibt. Durch das Hinzufügen von Daten als Funktion können alle Komponenten ihre eigenen internen Zustände beibehalten. In unserem Beispiel könnten wir mehrere Komponenten haben, die alle eine Nachrichteneigenschaft benötigen, aber mit einer Funktion kann die Nachricht jetzt für jede Komponente unterschiedlich sein. Auf diese Weise können Komponenten eine gemeinsame Vorlage gemeinsam nutzen, die Bedarf weiterhin ihre eigenen Daten oder internen Zustände verfolgen. 42. Abschnitts-Outro: So erstellst du Tools und Workflow: Dies ist das Ende eines ziemlich sicheren, aber dennoch wichtigen Abschnitts. Wir haben jetzt ein neues Projekt-Setup, das skalierbarer ist und es uns ermöglicht, mit neuen Funktionen wie Komponenten zu arbeiten. Diese Bauteilstruktur wird das Thema unseres nächsten Abschnitts sein, daher freue ich mich darauf, Sie dort zu sehen. 43. Abschnittseinführung: Einführung in Komponenten: Da unsere Apps größer und komplexer werden, ein Setup wie unsere Gästelisten-App möglicherweise nicht ideal. Unsere einzelne App Dot View Datei kann schnell wachsen und aufgebläht werden, was es schwierig zu warten und zu testen. Mit einem Setup wie jetzt, mit Webpack, können wir jetzt unseren Code in kleinere Module oder Komponenten aufteilen. Dies macht unsere Datei kleiner, einfacher zu warten und zu testen und ermöglicht es uns, Komponenten mehr als einmal wiederzuverwenden. Wir haben in diesem Abschnitt viel zu behandeln, also lasst uns direkt zu Lernkomponenten springen. 44. Was sind Komponenten?: Eine der großen Funktionen von vue.Js ist die Fähigkeit, Komponenten zu verwenden. Sie können sich eine Komponente wie einen Baustein für unsere Anwendung vorstellen. Wir verwenden sie, um unseren Code in kleinere, wartbarere Teile aufzuteilen. Eine Komponente kann auch mehrfach von Ihrer Anwendung aus wiederverwendet werden, um Code-Wiederholungen zu vermeiden. Code-Abschnitte in eigenständigen Komponenten zu halten hilft auch beim Debuggen und halten unseren Code organisierter und wartbarer. Werfen wir einen Blick darauf, wie Komponenten auf unser Projekt angewendet werden können. Dies ist unsere fertige Kartenanwendung. Wir können sehen, dass es einige Bereiche gibt, die wiederholt werden. Wir haben die Texteingabefelder auf der linken Seite, und alle drei sind genau gleich. Dasselbe gilt für eine Karte selbst, auf der der Text angezeigt wird. Dies ist ein idealer Anwendungsfall für die Verwendung von Komponenten. Wir wissen bereits aus der Erkundung der Dateien in unserer App, dass es einen Hauptwrapper namens app.vue Datei gibt. Wir wissen, dass wir diesen Wrapper verwenden können, um den Rest unserer Anwendung zu enthalten, die alle innerhalb verschachtelt werden können. In diesem app.vue Wrapper können wir beginnen, mehr Komponenten zu erstellen, wie zum Beispiel einen Header. Dieser Header wird in einer eigenen Dateivorlage platziert, wie die Datei app.vue. Bei der Benennung von Komponentendateien ist es am besten, so beschreibend wie möglich zu sein. Dies hilft beim Erstellen größerer Apps mit vielen Komponenten. Wir können deutlich sehen, wo die Komponenten hineinpassen. In diesem Projekt habe ich diese Datei die header.vue genannt. Auch ich habe die Fußzeile in eine footer.vue Datei platziert. Sowohl die Kopf- als auch die Fußzeilendateien werden aus dem Haupt-Wrapper aufgerufen. Im Fall dieser App ist es nicht wichtig, die Kopf- und Fußzeile in separaten Komponenten zu haben. Wir hätten es innerhalb unserer app.vue Vorlage handcodieren können, da wir sie nur einmal verwenden werden. Es gibt uns jedoch mehr Übung bei der Erstellung von Komponenten. Noch in der Haupt-app.vue haben wir den Hauptkörperabschnitt, der von einer Wrapper-Komponente gesteuert wird. Für jede Seite der Karte haben wir die Kartenfront. Karte innen links, Karte innen rechts, und die Kartenrückseite. Wir wechseln zwischen diesen Komponenten über die Navigationslinks innerhalb der Kopfzeile. Diese Komponenten fungieren als übergeordneter Container für alle untergeordneten Komponenten in ihnen, z. B. Text- und Bildkomponenten. Als übergeordnete Komponente wird dies verwendet, um Daten zwischen Komponenten zu übergeben, die wir in Kürze abdecken werden. Dies hinterlässt uns jetzt mit den wiederverwendbaren Komponenten. Auf der linken Seite befindet sich ein Bereich zum Bearbeiten der Karte, und dieser spezielle Abschnitt, die Vorderseite der Karte hat freie Texteingabebereiche, innerhalb einer Datei namens text-input.vue. Die Art der Komponenten bedeutet, dass wir diese Komponente nur einmal erstellen müssen und dann können wir diese so oft hinzufügen, wie wir möchten. Text, der in diese Textbereiche eingegeben wird, wird dann innerhalb der Textausgabebereiche auf der rechten Seite angezeigt. Denken Sie daran, wie wir bei der Verwendung von Dateneigenschaften in Komponenten darüber gesprochen haben, dass die Dateneigenschaft eine Funktion sein muss. Nun, hier kommt die Bedeutung davon ins Spiel. Wenn wir nie Daten als Funktion hatten, wie wir es im ersten Projekt getan haben, wenn eine der Texteingaben bearbeitet wurden. Alle drei Texte auf der rechten Seite werden mit dem gleichen Text aktualisiert. Natürlich würde dies nicht gut funktionieren, weil wir wollen, dass die freien Textbereiche unabhängig sind. Sie können die gleiche Vorlage visuell teilen, aber wir möchten, dass die Daten nicht mit anderen geteilt werden. Wenn Datasets funktionieren, können Komponenten ihren eigenen Zustand beibehalten, so dass sie unabhängig arbeiten können. Wir machen das gleiche auch für die Bilder, es gibt zwei Komponenten. Eine für den Bild-Upload-Bereich, dann eine auf der rechten Seite, um das Bild anzuzeigen. Gehen Sie auf die Rückseite der Karte, die einfach die gleichen zwei Bildkomponenten hat , weil sie jetzt wiederverwendbar sind. Dann nur der Copyright-Text unten. So funktionieren Komponenten und wie wir sie mehrfach wiederverwenden können. Aufteilung unserer Anwendung auf diese Weise wird mit Tools wie Webpack ermöglicht, die alle diese Module, die Dateien und alle ihre Abhängigkeiten in einer einzigen Rechnungsdatei für die Produktion bündeln . Hoffentlich können Sie jetzt die Vorteile der Verwendung von Komponenten sehen. Lassen Sie uns nun fortfahren, sie in die Praxis umzusetzen. 45. So registrierst du globale Komponenten: Jetzt haben wir ein besseres Verständnis davon, welche Komponenten sind und wie wir unsere Anwendung in diese Komponenten aufteilen werden. Lassen Sie uns daran arbeiten, sie tatsächlich zu erstellen. Wenn Ihr Projekt nicht bereits ausgeführt wird, müssen Sie zum Terminal gehen und npm ausführen, dev ausführen und den Entwicklungsserver im Browser öffnen. Wir sehen auf dieser Seite und alles funktioniert gut. Um zu beginnen, lassen Sie uns den Beispielcode von oben in der app.vue Datei bereinigen. Gehen Sie zu app.vue. Das erste, was wir tun möchten, ist den gesamten Code zwischen den Template-Tags zu entfernen. Also alles vom div mit der ID der App, bis zum schließenden Template-Tag. Also, entfernen Sie das. Das gleiche für den Skript-Inhalt und auch für die Stile, auch andere eigene Stile und Skript in, wenn wir sie brauchen. Dies ist unsere leere Einzeldateivorlage. Dann werde ich eine einfache HTML-Struktur für die App hinzufügen. Denken Sie daran, dass diese app.vue Datei am Ende der Haupt-Wrapper für unsere App ist. Machen Sie also Sinn, unsere Bootstrap-Container und -Zeilen hier hinzuzufügen. Vorlagen müssen auch ein Haupt-äußere Elemente haben, so dass alle Bootstrap-Container dies abdecken. Zum Beispiel wird dies nicht funktionieren, wenn wir etwas HTML wie ein Bild-Tag und dann ein zweites Element wie API-Tag hinzufügen. Wenn wir das speichern und dann zum Browser gehen, sehen wir, dass wir einen leeren Bildschirm haben. Wenn wir in die Entwickler-Tools gehen und dann die Konsole öffnen, sehen wir, dass wir eine Nachricht erhalten, dass Komponenten Vorlage sollte genau ein Wurzelelement enthalten. Um dies zu beheben, können wir zum Beispiel ein div als Wurzelelement verwenden , um unseren Code zu umgeben. Fügen wir hier ein div hinzu und fügen Sie das schließende Tag unten und dann „Speichern“ und jetzt, wenn wir aktualisieren, sehen wir die Fehlermeldungen sind verschwunden und jetzt haben wir unsere hallo Nachricht. Lassen Sie uns weiterhin unsere Bootstrap-Zeilen hinzufügen. Wir können die Texte und auch das Image-Tag entfernen und dann weitermachen, indem wir eine Klasse, eine Bootstrap-Klasse von Containern erstellen. Dann können wir hier unsere Reihe erstellen. So Bootstrap-Klasse der Zeile, die den gesamten Inhalt umgeben wird , den wir innerhalb hinzufügen werden. Schließlich ein drittes und letztes div für den Abschnitt , der eine Klasse von col-sm-12 haben wird. Würden Sie die App vue volle 12 Spalten breit machen. Damit dies funktioniert, müssen wir den Bootstrap für CDN Link greifen. Wenn wir zum Browser gehen, dann, wenn Sie Google und dann suchen Sie nach Bootstrap für CDN und dann nach unten scrollen. Wir können unter dem Download-Titel sehen wir den Sprung zum Bootstrap CDN Abschnitt haben. Wir brauchen das JavaScript gerade nicht, also werde ich nur den CSS-Link kopieren, der die oberste Zeile ist. Kopieren Sie das und dann können wir dies auf unserer Indexseite direkt unter dem Titel hinzufügen. Also geben Sie, dass ein „Speichern“ und dann können wir einen Blick auf die Verwendung globaler Komponenten werfen. Dies ist der erste Komponententyp, den ich Ihnen zeigen werde, und das bedeutet, dass die Komponente nicht beschränkt ist , nur in einer bestimmten Instanz oder Komponenten verwendet zu werden. Wir können grundsätzlich überall dort zugreifen, wo wir ihn brauchen. Wenn wir zur Datei main.js gehen, können wir mit der Arbeit an unserer ersten Komponente direkt über der Vue Instanz beginnen. Stellen Sie sicher, dass die Komponente darüber ist, da wir sie registrieren müssen , bevor die Vue Instanz instanziiert wird, damit sie korrekt funktioniert. Wir registrieren diese globale Komponente, indem wir hier vue.components aufrufen, geben wir den Komponenten dann einen Tag-Namen innerhalb einer Zeichenfolge. Dies ist ein Name, der verwendet, um auf die Komponenten zu verweisen. Ich werde das die Texteingabe nennen. Die Namensformate von Kleinbuchstaben, die durch Bindestriche getrennt , gelten als gute Praxis, wenn auch nicht wesentlich, dann durch ein Komma getrennt und in geschweiften Klammern übergeben wir die Optionen, genau wie eine normale Vue Instanz. Wir werden damit beginnen, eine Vorlage zu erstellen und diese Vorlage innerhalb einer Zeichenfolge wird einen einzelnen Textbereich enthalten. Lassen Sie uns unsere HTML hier drinnen. Der Textbereich, der Tag öffnet und schließt. Damit dies korrekt funktioniert, müssen wir sicherstellen die vue JS-Bibliothek korrekt importiert wird, was wir bereits oben auf der Seite mit der Importansicht aus der Ansicht machen. Wenn wir das Modul aus dem Knotenmodulordner direkt hier importieren, können wir es einfach durch den Modulnamen beziehen, wie vue. Wenn etwas anderes importiert wurden, was nicht im Knoten Modulordner ist, müssen wir den Dateipfad für die Datei angeben, wie Sie mit dem Up-Import in Zeile zwei sehen und dann speichern können. Dann alle in der index.html Datei, können wir jetzt die Komponente zu unserer Haupt-App div hinzufügen, genau wie ein HTML-Elemente. Um unser div mit der ID der App und dann innen hier zu finden, werde ich es wie ein normales Element hinzufügen, also Text, Eingaben, öffnende Tag und dann unser schließendes Tag. Beachten Sie, dass dieser Elementname den Komponenten-Tag-Namen marschieren muss , der nur vor innerhalb der Vue Komponenten erfolgt. Dies sind wiederverwendbare Komponenten und wir können sie so oft hinzufügen, wie wir möchten . Wenn wir diese in ein paar Male kopieren und einfügen, sollten wir in der Lage sein, drei Komponenten zu sehen. Wenn wir das speichern und dann zum Browser wechseln, sollten wir drei Textbereichskomponenten sehen, aber wir sehen nur einen leeren Bildschirm. Dies liegt an main.js. Unsere vue Instanz überschreibt den Inhalt, indem wir den Inhalt unserer app.vue Datei rendern. Dieses Verhalten ist normalerweise das, was wir wollen, aber für dieses Beispiel werde ich die Renderfunktion auskommentieren, damit wir unsere Komponenten sehen können. Also gibt es Kommentare aus dem Abschnitt und dann, wenn wir jetzt aktualisieren, sehen wir unsere drei Textbereiche auf dem Bildschirm erscheinen. Auch weil sie global registriert sind, können wir sie in die Vue Templates innerhalb unserer App hinzufügen. die gleiche Weise mit unseren HTML-Elementen unser Optionsobjekt innerhalb der vue Komponente beschränkt sich unser Optionsobjekt innerhalb der vue Komponentenicht nur auf das Hinzufügen einer String-Vorlage, wie wir derzeit verwenden, sondern wir können tatsächlich andere Optionen verwenden, die wir in der vue Instanz, wie zum Beispiel das Hinzufügen von Daten und Methoden. Wir wissen, aus dem letzten Abschnitt mit der Dateneigenschaft in Komponenten, ist ein wenig anders. Wir müssen es als Funktion hinzufügen. Lassen Sie uns einige Daten hinzufügen, um den Platzhaltertext des Textbereichs zu ändern. Zunächst binden wir den Platzhalter an eine Datumseigenschaft oder einen Textwert. Dann an einem [unhörbar] am Ende unserer Vorlagen, um unsere Dateneigenschaft hinzuzufügen. Dies ist eine Funktion, wie wir wissen, die dann in ein Objekt nimmt und dann gibt wir ein Objekt zurück, das unsere Daten enthält. Lassen Sie uns unseren Textwert, Datumseigenschaft erstellen und dies auf eine Zeichenfolge setzen, nur vom Typ hier. Speichern Sie das und jetzt sollten wir den Wert des Typs hier innerhalb der drei Textbereiche sehen. Außerdem können wir Methoden hinzufügen, um Platzhaltertext ändert, wenn wir darauf klicken. Sie also direkt unter dem Datenabschnitt ein Komma hinzu und dann können wir unsere Methoden hinzufügen. Methoden hinzugefügt genau das gleiche, wie wir bereits wissen. Ich werde eine Methode namens Change-Text hinzufügen und dann möchte ich, dass diese Methode nur this.text-Wert auswählen, was diese Daten sind, die wir hier setzen und wir werden es nur auf eine neue Zeichenfolge von Texten ändern setzen. Um diese Methode auszulösen, müssen wir einen Klick-Listener auf den Textbereich hinzufügen, so dass jedes öffnende Tag, können wir die Kurzschrift von bei Klick hinzufügen und dann verwenden, um die Funktion des Änderungstextes auszulösen. Lasst uns das retten. Wenn wir dies im Browser überprüfen, werden Sie feststellen, dass die drei Komponenten unabhängig voneinander agieren Wenn wir also auf die erste klicken, sehen wir den Text geändert. Denn der Text innerhalb der zweiten und dritten Komponente ist genau so, wie er vorher war. So können wir weltweit Komponenten zu unserer App hinzufügen und jetzt können wir dem nächsten Video fortfahren und die Komponenten lokal registrieren. 46. So registrierst du lokale Komponenten: Im letzten Video haben wir gelernt, wie Sie eine Komponente erstellen , die Sie weltweit in der gesamten App zur Verfügung stellen möchten. Nun werden wir uns ansehen, wie wir eine lokale Komponente registrieren können, die nur im Bereich von Instanzen oder Komponenten verfügbar ist. Zuerst werde ich die globale Komponente aus dem letzten Video entfernen. Wenn Sie also auf die main.js und diese Komponente gehen, die wir registriert haben, werde ich diesen vollständigen Abschnitt entfernen und wir können auch die kostenlosen Steuereingabe-Komponenten aus der index.html entfernen. Entfernen Sie also alle drei Texteingabelemente und speichern Sie diese dann. Ich werde diese globale Komponente durch zwei separate einfache Komponenten ersetzen, die nur einen Text von Komponente 1 und auch Komponente 2 anzeigen. Zurück in der main.js werden lokale Komponenten anders als globale Komponenten erstellt. Wir müssen immer noch unser Optionsobjekt erstellen, aber dieses Mal müssen wir es innerhalb einer Variablen genau so speichern. Lassen Sie uns unsere Variable namens component1 hinzufügen und dies auf ein Objekt setzen, und dann, sobald ich eine einfache Vorlage hinzufüge, die einige p-Tags sein wird, um einen Text von component1 auszugeben und dann das p-Tag abzuschließen und dann werde ich das gleiche mit einer zweiten Komponente. Auch hier muss dies eine Variable sein, wie wir component2 mit acht Vorlagen aufrufen und diese Zeichenfolge wird auch p-Tags mit dem Text von component2 genau so sein . Unten unten können wir noch die Renderfunktion kommentiert Alpha jetzt lassen, da wir noch nicht mit der App.vue Datei arbeiten. Oben in der index.html, dann zwischen der App können wir unsere komponent1, das schließende Tag, und dann können wir auch das gleiche für unsere komponent2 tun. Lassen Sie uns dies kopieren und fügen Sie dies unten hinzu. Ändern Sie das als zweite Komponente, und speichern Sie es dann. Nun, wenn wir zum Browser gehen und dann aktualisieren, sehen wir, dass es ein Problem gibt. Lassen Sie uns die Konsole öffnen und sehen, was los ist. Auf der Registerkarte Konsole, und wir sehen zwei rote Warnmeldungen, die eine Nachricht von unbekannten benutzerdefinierten Elementen für component1 und auch component2 hat. Es gibt uns einen Hinweis darauf, was wir falsch gemacht haben. Darin steht: „Haben Sie die Komponente richtig registriert?“ Dies liegt daran, dass wir als lokale Komponenten sie dort registrieren müssen, wo wir wollen, dass sie verfügbar sind. Gehen wir auf die View-Instanz in der Datei main.js und registrieren Sie dann die Komponenten, die Sie verwenden möchten. Lassen Sie uns dies direkt unter der L-Eigenschaft tun. Wir können unsere Komponenten Option hinzufügen, und dies ist ein Objekt. So können wir mit dem String-Namen von component1 beginnen. Dies ist der Name, den wir der Komponente geben und dann durch den Doppelpunkt getrennt. Wir sind der eigentliche Name der Komponenten. Also ist es Komponente1. Wenn wir zum Browser gehen und dann aktualisieren, sehen wir immer noch die Fehlermeldungen. Dies liegt daran, dass wir diesem Namen Komponenten-1 einen Alias mit einem Bindestrich dazwischen gegeben haben. Also lassen Sie uns diesen Bindestrich für die ersten Komponenten hinzufügen und jetzt sollten wir sehen, dass die erste Komponente auf dem Bildschirm angezeigt wird. Die Warnung ist beendet und die Konsole zeigt nun nur an, dass Komponent2 unbekannt ist. Nun, lasst uns die gleiche Komponente2. In der main.js können wir ein Komma hinzufügen und dann unseren Namen hinzufügen und dies wird component2 sein und dies kann ein beliebiger Name sein, den wir verwenden möchten. Die zweite war jedoch mit dem echten Namen der Komponente übereinstimmen, was der Variablenname ist, den wir ihm gegeben haben. Component2 wird den Bindestrich innerhalb der Indexseite hinzufügen und dann sollten wir jetzt eine Aktualisierung geben und wir sehen beide Komponenten auf dem Bildschirm. So verwenden Sie Komponenten lokal und stellen Sie sie in einem bestimmten Bereich zur Verfügung. Als nächstes werden wir beginnen, unsere App mit einzelnen Dateikomponenten zu erstellen. Dies sind die Komponenten, die in ihrer eigenen Datei enthalten sind, wie die App.vue und wir werden uns diese als nächstes ansehen. 47. So erstellst du Komponenten für einzelne Dateien: In den letzten Videos, die wir gesucht haben, registrieren Komponenten sowohl global als auch lokal. Hier werden wir auf eine andere Art und Weise betrachten, um Komponenten zu verwenden , indem sie in ihrer eigenen einzigen Datei zu erstellen. In der Tat, um im vollständigen Projekt auf diese Weise neu zu erstellen. Einzelne Dateikomponenten ermöglichen es, alles, was mit den Komponenten zusammenhängt, an einem Ort zu haben. Es ist eine großartige [unhörbare], eine Komponente mit VUE.Component zu erstellen. Die App of Vue Datei ist auch eine einzelne Dateikomponente. Genau so haben wir einen Abschnitt, um unsere Vorlage in HTML zu erstellen. Macht mit beliebigen Ansichtsdaten wie doppelte geschweifte Klammern oder ein Ereignis. Diese Vorlage ist auch viel einfacher zu arbeiten als die Verwendung einer einzelnen Zeichenfolgenvorlage. Wie wir es uns bisher angeschaut haben. Wir haben auch den Skriptabschnitt über jeder Vue GIS bezogenen Logik, wie Daten und Methoden, zusammen mit jedem Vanilla JavaScript, das wir hinzufügen möchten. Dann unten unten haben wir auch unsere Styles. Wir können auch angeben, ob die Stile global sind oder ob sie nur für diese Komponente gelten. Wir haben diese Flexibilität, also bevor wir beginnen, können wir die Komponente aus dem letzten Video löschen. Lassen Sie uns die Komponente 1 und Komponente 2. Dann konnten wir den Komponentenabschnitt nicht aus der Vue Instanz entfernen. Wir werden die app.vue Datei als unseren Haupt-Wrapper verwenden. Das ist eigene Kommentare aus der Renderfunktion. schließlich auf der Indexseite Lassen Sie unsschließlich auf der Indexseitedie Elemente von Komponente 1 und 2 entfernen. Zu Beginn möchte ich einen Komponentenordner innerhalb des Quellordners hinzufügen. Wählen Sie einen neuen Ordner namens Komponenten aus. Stellen Sie sicher, dass sich dies direkt unter dem Quellordner befindet. Innerhalb des Komponentenordners werde ich eine neue Datei erstellen. Diese Datei wird header.vue genannt. Wir können auch Unterordner für unsere Komponenten erstellen, was eine gute Idee für große Apps ist, um die Dinge besser organisiert zu halten. Diese Header-Datei wird eine einfache Komponente sein. Wir werden uns daran gewöhnen, sie innerhalb unserer App zu bauen. Lasst uns anfangen. Wenn Sie die Header.vue Datei öffnen, können wir die grundlegende Struktur hinzufügen. Genau wie in unserer app.vue Datei. Beginnen wir mit der Erstellung der Vorlage. Dies benötigt das öffnende und schließende Tag. Dann können wir unsere Skript-Tags hinzufügen, und dann schließlich unten unten, können wir die Style-Tags fragen. Jetzt innerhalb des Template-Abschnitts oben werde ich beginnen, indem ich ein Menü für unsere App hinzufüge. Wenn Sie sich von vorher erinnern, müssen wir ein umgebendes div oder ein umgebendes Element für unsere Vorlagen haben. Dann im Inneren von hier werde ich eine Überschrift der Ebene 1 hinzufügen, die der Titel kreativer Karten sein wird. Wir fügen eine Bootstrap-Klasse von text-center hinzu. Dann unter dieser Überschrift können wir beginnen, unsere ul Order Liste zu erstellen, die unser Menü sein wird.oder ein umgebendes Element für unsere Vorlagen. Dann im Inneren von hier werde ich eine Überschrift der Ebene 1 hinzufügen, die der Titel kreativer Karten sein wird. Wir fügen eine Bootstrap-Klasse von text-center hinzu. Dann unter dieser Überschrift können wir beginnen, unsere ul Order Liste zu erstellen, die unser Menü sein wird, oder ein umgebendes Element für unsere Vorlagen. Dann im Inneren von hier werde ich eine Überschrift der Ebene 1 hinzufügen, die der Titel kreativer Karten sein wird. Wir fügen eine Bootstrap-Klasse von text-center hinzu. Dann können wir unter dieser Überschrift beginnen, unsere ul Order Liste zu erstellen, die unser Menü sein wird. [ unhörbar] Nun kann auch eine Bootstrap-Klasse haben, und diese wird nav sein, dann justify-content-center. Weisen Sie dann ul Order Listenelemente zu. Listenelemente haben eine Bootstrap-Klasse auch von nav Element. Der erste Link, den ich hinzufügen werde, ist für die Vorderseite der Karte. Zeigen Sie dann die [unhörbar] an, um dieses Listenelement zu kopieren, und fügen Sie dann drei weitere Male ein. Der zweite Link ist innen links. Dies ist die Innenseite links von unserer Karte. Dann innen rechts, und dann schließlich ist der vierte Link für die Rückseite der Karte. Dies funktioniert perfekt ohne die Skripte oder einen der hinzugefügten Stilabschnitte. Für das Funktionieren der Komponenten ist keine Zustimmung erforderlich. Wenn wir zum Browser gehen und dann aktualisieren, können wir immer noch sehen, dass kein Header sichtbar ist. Das liegt daran, dass wir zuerst ein paar Schritte unternehmen müssen. Wir wissen, dass die app.vue Datei ein Hauptwrapper ist. Wir müssen dieser App-Datei mitteilen, dass wir die Header-Komponenten verwenden möchten. Innerhalb der Skript-Tags von app.vue können wir beginnen, indem wir eine Impuls-Anweisung hinzufügen. Was wir tun möchten, ist den Header zu importieren, und das ist der Alias, den wir der Komponente geben. Dieser Name liegt an uns. Dann wollen wir es aus dem Dateipfad importieren, so verwenden./, und dann innerhalb des Komponentenordners gehen. Die Datei heißt Header.vue. Dies ist unsere Header-Datei importiert. Dann, wie wir uns im Video der lokalen Komponenten angeschaut haben, müssen wir die Komponente registrieren, damit sie innerhalb dieser Vorlage verwendet werden kann. Dann fügen wir unsere Exportvorgaben hinzu, die alle unsere Vue Daten enthalten. Dann können wir unsere Komponenten wie im lokalen Komponentenvideo registrieren. Wir fügen NavHeader hinzu, ist der Header.There gibt ein paar Dinge, die hier innerhalb der Komponenten-Eigenschaft zu wissen . Der Vorname auf der linken Seite ist der Tag-Name. Dies kann beliebig benannt werden, und es ist, wie referenzieren unsere Komponenten. Der Name auf der rechten Seite, vor allem der Vorname aus den Importanweisungen direkt oben. Wir können dann die Komponenten in unsere Vorlage hinzufügen den Tag-Namen verwenden, den wir alle NavHeader gegeben haben. Wie wir schon früh in diesem Abschnitt gesprochen haben. Obwohl der Name, den wir der Komponente gegeben haben, camelCase ist, empfiehlt es sich, den Elementnamen in der Vorlage als Kleinbuchstaben hinzuzufügen. Wenn wir zu unserer Vorlage gehen, können wir unsere NavHeader in Kleinbuchstaben durch Bindestriche getrennt hinzufügen und diese dann schließen. Jetzt können wir dies im Browser testen. Wenn Ihre App nicht ausgeführt wird, stellen Sie sicher, welche npm run dev zuerst im Terminal ausführen. Dann, wenn wir zum Browser gehen, sehen wir jetzt, dass wir den Haupttitel von kreativen Karten und auch die Navigationslinks haben. Der Titel ist am oberen Rand der Seite gebunden. Wir könnten dies mit ein wenig einfachem CSS beheben. Wenn wir zurück zu der header.vue Datei gehen und dann zu den Style-Tags gehen. Alles, was wir tun müssen, ist unseren Stil für die H1 hinzuzufügen, und fügen Sie einfach ein wenig Margin-top.We fügen Sie 10 Pixel hinzu. Jetzt können wir sehen, dass es gerade genug von oben geschoben wird. So können wir einseitige Komponenten verwenden. Der Header ist ziemlich einfach. Wir werden mehr dazu in den nächsten Videos.und fügen Sie einfach ein wenig Margin-top.We fügen 10 Pixel hinzu. Jetzt können wir sehen, dass es gerade genug von oben geschoben wird. So können wir einseitige Komponenten verwenden. Der Header ist ziemlich einfach. Wir werden mehr dazu in den nächsten Videos.und fügen Sie einfach ein wenig Margin-top.We fügen 10 Pixel hinzu. Jetzt können wir sehen, dass es gerade genug von oben geschoben wird. So können wir einseitige Komponenten verwenden. Der Header ist ziemlich einfach. Wir werden mehr dazu in den nächsten paar Videos hinzufügen.Jetzt können wir sehen, dass es von der Spitze gerade genug geschoben wird.Dies ist, wie wir einseitige Komponenten verwenden können. Der Header ist ziemlich einfach. Wir werden mehr dazu in den nächsten Videos.und fügen Sie einfach ein wenig Margin-top hinzu. Wir fügen dort 10 Pixel hinzu. Jetzt können wir sehen, dass es gerade genug von oben geschoben wird. So können wir einseitige Komponenten verwenden. Der Header ist ziemlich einfach. Wir werden mehr dazu in den nächsten Videos.und fügen Sie einfach ein wenig Margin-top.We fügen 10 Pixel hinzu. Jetzt können wir sehen, dass es gerade genug von oben geschoben wird. So können wir einseitige Komponenten verwenden. Der Header ist ziemlich einfach. In den nächsten Videos werden wir mehr dazu hinzufügen. Jetzt können wir sehen, dass es gerade genug von oben geschoben wird. So können wir einseitige Komponenten verwenden. Der Header ist ziemlich einfach. Wir werden mehr dazu in den nächsten Videos hinzufügen, und fügen Sie einfach ein wenig Margin-top.We werden 10 Pixel zu dort hinzufügen. Jetzt können wir sehen, dass es gerade genug von oben geschoben wird. So können wir einseitige Komponenten verwenden. Der Header ist ziemlich einfach. Wir werden mehr dazu in den nächsten Videos.und fügen Sie einfach ein wenig Margin-top hinzu. Wir fügen dort 10 Pixel hinzu. Jetzt können wir sehen, dass es gerade genug von oben geschoben wird. So können wir einseitige Komponenten verwenden. Der Header ist ziemlich einfach. Wir werden mehr dazu in den nächsten Videos.und fügen Sie einfach ein wenig Margin-top.We fügen 10 Pixel hinzu. Jetzt können wir sehen, dass es gerade genug von oben geschoben wird. So können wir einseitige Komponenten verwenden. Der Header ist ziemlich einfach. Wir werden mehr dazu in den nächsten Videos.und fügen Sie einfach ein wenig Margin-top.We fügen 10 Pixel hinzu. Jetzt können wir sehen, dass es gerade genug von oben geschoben wird. So können wir einseitige Komponenten verwenden. Der Header ist ziemlich einfach. Wir werden mehr dazu in den nächsten Videos.und fügen Sie einfach ein wenig Margin-top.We fügen 10 Pixel hinzu. Jetzt können wir sehen, dass es gerade genug von oben geschoben wird. So können wir einseitige Komponenten verwenden. Der Header ist ziemlich einfach. Wir werden mehr dazu in den nächsten Videos.und fügen Sie einfach ein wenig Margin-top.We fügen 10 Pixel hinzu. Jetzt können wir sehen, dass es gerade genug von oben geschoben wird. So können wir einseitige Komponenten verwenden. Der Header ist ziemlich einfach. Wir werden mehr dazu in den nächsten paar Videos hinzufügen.Jetzt können wir sehen, dass es gerade genug von oben geschoben wird. So können wir einseitige Komponenten verwenden. Der Header ist ziemlich einfach. den nächsten Videos werden wir mehr dazu hinzufügen. Jetzt können wir sehen, dass es gerade genug von oben geschoben wird. So können wir einseitige Komponenten verwenden. Der Header ist ziemlich einfach. Wir werden mehr dazu in den nächsten Videos hinzufügen.. Dies ist unsere Header-Datei importiert. Dann, wie wir uns im Video der lokalen Komponenten angeschaut haben, müssen wir die Komponente registrieren, damit sie innerhalb dieser Vorlage verwendet werden kann. Dann fügen wir unsere Exportvorgaben hinzu, die alle unsere Vue Daten enthalten. Dann können wir unsere Komponenten wie im lokalen Komponentenvideo registrieren. Wir fügen NavHeader hinzu, ist der Header.There gibt ein paar Dinge , die hier innerhalb der Komponenten-Eigenschaft zu wissen. Der Vorname auf der linken Seite ist der Tag-Name. Dies kann beliebig benannt werden, und es ist, wie referenzieren unsere Komponenten. Der Name auf der rechten Seite, vor allem der Vorname aus den Importanweisungen direkt oben. Wir können dann die Komponenten in unsere Vorlage hinzufügen den Tag-Namen verwenden, den wir alle NavHeader gegeben haben. Wie wir schon früh in diesem Abschnitt gesprochen haben. Obwohl der Name, den wir der Komponente gegeben haben, camelCase ist, empfiehlt es sich, den Elementnamen in der Vorlage als Kleinbuchstaben hinzuzufügen. Wenn wir zu unserer Vorlage gehen, können wir unsere NavHeader in Kleinbuchstaben durch Bindestriche getrennt hinzufügen und diese dann schließen. Jetzt können wir dies im Browser testen. Wenn Ihre App nicht ausgeführt wird, stellen Sie sicher, welche npm run dev zuerst im Terminal ausführen. Dann, wenn wir zum Browser gehen, sehen wir jetzt, dass wir den Haupttitel von kreativen Karten und auch die Navigationslinks haben. Der Titel ist am oberen Rand der Seite gebunden. Wir könnten dies mit ein wenig einfachem CSS beheben. Wenn wir zurück zu der header.vue Datei gehen und dann zu den Style-Tags gehen. Alles, was wir tun müssen, ist unseren Stil für das H1 hinzuzufügen, und fügen Sie einfach ein wenig Margin-top hinzu. Wir fügen dort 10 Pixel hinzu. Jetzt können wir sehen, dass es gerade genug von oben geschoben wird. So können wir einseitige Komponenten verwenden. Der Header ist ziemlich einfach. Wir werden mehr dazu in den nächsten Videos hinzufügen, und fügen Sie einfach ein wenig Margin-top.We werden 10 Pixel zu dort hinzufügen. Jetzt können wir sehen, dass es gerade genug von oben geschoben wird. So können wir einseitige Komponenten verwenden. Der Header ist ziemlich einfach. den nächsten Videos werden wir mehr dazu hinzufügen. 48. So fügst du die Kartenvorlagenkomponente hinzu: Jetzt wissen wir, wie einzelne Dateikomponenten zu erstellen und anzuzeigen. Wir können jetzt weitermachen und unser Projekt wirklich in Bewegung bringen. Ich gehe zu unserem Projekt und organisiere den Komponentenordner, indem ich einen Unterordner namens card hinzufüge. Dann innerhalb dieses Karten-Ordners, werde ich eine neue Datei namens CardFront mit der Ansicht Erweiterung erstellen. Wenn Sie sich von den Folien am Anfang dieses Abschnitts erinnern, werden wir eine einzelne Dateikomponente für jede Seite der Karte haben. Es werden die CardFront, CardBack, und sowohl die Innenseite, links und rechts sein. Diese Komponenten wirken wie Rapper, bei denen Sie die Text- und Bildkomponenten überall dort ablegen können , wo wir sie wollen. Sie sind auch die Abschnitte, die ausgetauscht werden, um Ansichten zu ändern, wenn auf einen Menülink geklickt wird. Aber mehr dazu in ein paar Videos. Ändern Sie einfach die Schreibweise dort. Wenn wir zurück auf die CardFront.vue gehen, ist dies wie zuvor mit einer Vorlage eingerichtet, so dass die öffnenden und schließenden Tags dort, und dann gefolgt von den Skript-Tags und dann schließlich die Style-Tags. Innerhalb der Vorlage, denken Sie daran, dass wir ein umgebendes div benötigen. Fügen wir das da drinnen hinzu. Sie können dieses div auch zu einer Bootstrap-Zeile machen, indem Sie die Klasse der Zeile darin hinzufügen. Dann müssen wir einige Bootstrap-Spalten hinzufügen, sechs auf der linken Seite und auch sechs auf der rechten Seite. Wir erstellen zunächst den linken Abschnitt. Wir können die Bootstrap-Klassen von col sm 6 hinzufügen. Dies wird die Hälfte der Breite der Seite sein. Wir werden auch eine Bootstrap-Klasse von Karte hinzufügen, und dann eine benutzerdefinierte CSS-Klasse von Bearbeitungen Bereich. Wir werden dies in nur einem Moment verwenden, um die Abschnitte zu stylen. Kopieren Sie dieses linke div und fügen Sie es dann direkt darunter ein, aber immer noch in dieser Zeile. Alles, was wir tun müssen, ist unsere benutzerdefinierte Klasse dieses Mal der Kartenanzeige hinzuzufügen. Sobald Sie das an Ort und Stelle haben, können wir zu den Style-Tags gehen und dann wieder diese benutzerdefinierten Stile ändern. Beginnen Sie mit dem Bearbeitungsbereich, der sich auf der linken Seite der Karte befindet. Wir geben diesem eine Hintergrundfarbe, eine benutzerdefinierte Farbe von d2f9f9 und dann auch eine Polsterung von 20 Pixeln. Um der Karte dann eine gewisse Höhe zu geben, fügen wir die CSS hohe Eigenschaft von 800 Pixeln hinzu. Das ist die Redaktion auf der linken Seite. Die rechte Seite ist der Kartenanzeigebereich. Lassen Sie uns einige Stile für diesen Abschnitt hinzufügen. Alles, was wir hier tun werden, ist die Höhe von 800 Pixeln zu entsprechen und dann auch die Polsterung mit 20 Pixeln dort konsistent zu halten. Wie immer wird diese Komponente noch nicht angezeigt. Damit dies funktioniert, müssen wir es registrieren und auch innerhalb der Datei importieren, in der Sie es verwenden möchten. Alle unsere Komponenten, die die Kinder von App.vue sind, also registrieren und importieren wir es innerhalb von dort, genau wie wir es mit dem Header getan haben. Wenn Sie sich sicher fühlen, dies zu versuchen, gehen Sie weiter und pausieren Sie das Video und geben Sie es selbst. Wenn Sie einen Hinweis benötigen, folgen Sie einfach den gleichen Schritten wie bei der Registrierung der Header.vue Datei. Sonst mach dir keine Sorgen und folge mit mir. Lassen Sie uns innerhalb der app.vue fortfahren und die Importanweisungen hinzufügen. Diesmal müssen wir die CardFront importieren. Allerdings ist dies ein Name für uns, aber ich werde es CardFront nennen, um es beschreibend zu halten. CardFront von und dann der Dateipfad ist Punkt Schrägstrich, geht in den Komponentenordner. Denken Sie daran, dieses Mal haben wir die Karten-Ordner innerhalb der Komponenten. Achten Sie darauf, das da drin hinzuzufügen. Der Dateiname von.bzw ist CardFront. Mit dieser Registrierung können wir nun nach unten scrollen und diese dann zu unserem Komponentenbereich hinzufügen. Ich nenne es die CardFront. Denken Sie daran, dass dieser Name auch optional ist, wenn der Name rechts neben CardFront mit der obigen Importanweisung übereinstimmen muss. Das letzte, was zu tun ist, ist, diese Datei innerhalb unserer Vorlage hinzuzufügen, also direkt unter dem nav Header. Lassen Sie uns die Kartenvorderkomponenten hinzufügen. Dies bedeutet, dass App.vue ein übergeordnetes Element sowohl der Header als auch der Karte von Komponenten ist. Dies ist alles, was wir jetzt tun müssen, um zum Browser zu gehen und hoffentlich unsere Komponente angezeigt zu sehen. Wir haben den Bearbeitungsbereich auf der linken Seite mit den blauen Hintergründen. Wir haben auch den Kartenanzeigebereich auf der rechten Seite. Wenn dies nicht ausgeführt wird und Sie nur eine leere Seite haben, haben Sie möglicherweise einen Fehler. Überprüfen Sie also in der Konsole. Möglicherweise müssen Sie auch den Entwicklungsserver neu starten. Wenn Sie das tun müssen, drücke ich Control C, um es zu schließen und führe dann npm run dev aus, und dann sollte es wieder ausgeführt werden. Schließlich, nur um diesen Abschnitt abzuschließen, habe ich ein paar grundlegende Stile, die auf die App innerhalb der App.vue Datei angewendet werden können. Gehen Sie zurück zu App.vue und scrollen Sie nach unten zum Stilbereich. Das erste, was wir tun möchten, ist, dem Körper einige Stile hinzuzufügen. Ich werde die Schriftfamilie in Verdana Genf ändern , und dann schließlich eine generische Sanserif als Rückfall. Fügen Sie eine Textfarbe hinzu, um den Wert 333 zu erhalten. Wenn wir dann aktualisieren, sollten wir jetzt sehen, dass die benutzerdefinierten Schriftarten jetzt wirksam sind. Schließlich möchte ich diese Menüpunkte in Links ändern. Wenn wir zum Header und dann innerhalb des Listenelements gehen , können wir einfach unsere a-Tags innerhalb von dort mit einer Bootstrap-Klasse von nav Linkhinzufügen mit einer Bootstrap-Klasse von nav Link und dann das a-Tag schließen. Ich werde das nur kopieren und es vor dem zweiten, dritten und vierten Element einfügen. Führen Sie dasselbe für das schließende Tag aus, fügen Sie diese in ein und speichern Sie sie, und aktualisieren Sie sie dann. Dann können wir den Cursor ändern, um einen Zeiger zu sein, während er über schwebt. Die letzten Stile sind für die a-Tags. Dies wird der Cursor sein, dies wird der Typ des Zeigers sein, und dann speichern Sie das. Jetzt sehen wir, wenn wir über die nav Links gehen, haben wir jetzt den Zeiger. Jetzt sieht das ein bisschen besser aus. Hoffentlich sollten Sie jetzt loswerden, Komponenten hinzuzufügen. Wenn nicht, keine Sorge, wir haben noch viel mehr zu erstellen für ist App. Wir haben viel mehr Übung, während du den Kurs durchgehst. Als Nächstes werden wir einen Blick darauf werfen, wie wir Daten von einem Kind an eine übergeordnete Komponente übergeben können. 49. So überträgst du Daten an übergeordnete Komponenten: Jetzt werden wir einen Blick auf die Übergabe von Daten zwischen Komponenten werfen, genauer gesagt Daten von einem Kind an eine übergeordnete Komponente. Zuerst müssen wir die Eltern-Kind-Beziehung mit Komponenten verstehen. App.vue ist der Haupt-Wrapper, und der gesamte Inhalt ist darin enthalten. Es ist effektiv auf der obersten Ebene. Dies bedeutet, dass alle Komponenten, die wir hier hinzufügen, wie der Nav-Header und die Kartenfronten. Sie sind alle untergeordneten Komponenten dieser app.vue Datei. Auch bald in diesem Projekt werden wir eine Texteingabe-Komponenten erstellen, und wenn wir dies innerhalb der Karte aus Datei tun, werden wir auch eine Komponente wie diese hinzufügen. Sobald Sie es erstellt haben, fügen wir auch die Texteingaben hinzu, wie wir es zuvor getan haben. Unsere Karte von dot-vue Komponenten, ist jetzt offensichtlich, um diese Texteingaben. Eine Texteingabe ist die untergeordneten Komponenten. Wir werden nun Daten aus unserer Header-Datei an die app.vue übergeben. Mit diesem Wissen wissen wir jetzt, dass dies Daten vom Kind an die übergeordneten Komponenten weitergibt . Wir können dies mit dem tun, was wir benutzerdefinierte Ereignisse nennen. Wenn wir auf den Header Punkt vue Datei gehen, wollen wir an die übergeordnete Datei übergeben, die app.vue ist, welche Seite aus dem Menü ausgewählt wurde. Wir wollen dies tun, so app.vue weiß, welche Komponente angezeigt werden soll, wie die Vorderseite der Karte oder die Rückseite. Das erste, was wir tun möchten, ist eine Dateneigenschaft zu erstellen , um den Überblick über die ausgewählte Seite zu behalten. Lassen Sie uns unseren Exportstandard hinzufügen, und ich möchte die Dateneigenschaft erstellen, die sich daran erinnern, dass dies eine Funktion ist, wenn Sie schwankte Komponenten verwenden. Ich werde den Namen der Dateneigenschaft der ausgewählten Seite zurückgeben. Um zu beginnen, wird dies eine leere Zeichenfolge sein. Jetzt können wir einen Klick-Listener auf jedem der Links im Menü einrichten , um den Wert der ausgewählten Seite zu ändern. Gehen Sie zurück zu den Vorlagen und innerhalb der Links, gehen Sie, um eine neue Attribute von Kunst-Klick hinzuzufügen. Wenn dies angeklickt wird, werden wir Seite setzen, wählen Sie es gleich einer Reihe von Kartenfronten sein. Sobald auf diese Schaltfläche geklickt wird, ist die Option „Spade“ nicht mehr eine leere Zeichenfolge. Es wird mit diesem Textwert der Kartenfronten ersetzt werden, und dann müssen wir das gleiche für die über freien Links tun. Kopieren Sie den Klick-Listener, und fügen Sie ihn ein. Dieses Mal wird das Karte innen links sein. Die dritte ist für die Karte innen rechts. Dann wird das letzte für die Rückseite der Karte sein. Die Komponente, die wir hier nennen werden, ist die Karte zurück. Bisher haben wir nur die Kartenvorderkomponenten erstellt, aber wir werden das Over in Kürze erstellen. Auch die Namen, die wir hier hinzufügen, allem die Komponentennamen, die wir ihnen gegeben haben, wenn wir sie registrieren, damit dies korrekt funktioniert, wie die Kartenfronten, die Sie in app.vue hinzugefügt haben. Zurück in der Kopfzeile, werde ich jetzt einen Beobachter erstellen. Dies wird für alle Änderungen an der Seite ausgewählten Daten zu beobachten, dh, wenn wir eine neue manuell auswählen. Gehen Sie zurück zum Skript, und direkt unter der Dateneigenschaft können Sie ein Komma hinzufügen, dann unseren Watch-Bereich erstellen und dann unsere Watch-Eigenschaften erstellen. Also wollen wir die Seite ausgewählte Daten zu sehen. Wenn die ausgewählte Seite geändert wird, löst sie dann eine Funktion aus. Innerhalb dieser Funktion werden wir ein benutzerdefiniertes Ereignis an die Eltern ausgeben. Das ist eigentlich einfacher, als es klingt, wir müssen nur dieses Punkt-Dollar-Zeichen emittieren verwenden. Zu Beginn des Kurses haben wir uns Refs angesehen, und wir greifen auf sie mit der nativen Ansicht Eigenschaft von Dollarzeichen refs zu. Nun, die Verwendung von Dollarzeichen emittiert ist auch nativ in der View-Instanz. Es ist eine native Instanzmethode, was bedeutet, dass sie in die View-Instanz integriert ist. Dann geben wir zwei Argumente ein. Der erste ist der Name des Ereignisses, das Bios gewählt wird, also werde ich es nennen, Seite wurde geändert und trennt es durch Komma. Die zweite ist, welche Daten wir an die Eltern weitergeben wollen. Wir möchten den Seitennamen senden, auf den geklickt wurde, und wir können darauf zugreifen, mit dieser Punktseite ausgewählt, was der Wert dieser Dateneigenschaft ist. Dies ist der erste Teil des Sendens der Daten. Die zweite ist in den Eltern vorbei, was app.vue ist. Speichern Sie das und gehen Sie zu app.vue. Wenn wir zurück zu unserer Vorlage gehen und nach dem nav Header Abschnitt suchen, die eine char Komponente ist. Hier müssen wir für die Ereignisse hören, die wir innerhalb der Komponenten Elemente erstellt haben , so einfach wie diese, können wir ein V hinzufügen. Dann werden wir für das Ereignis, das Sie gab einen Namen der Seite zu hören geändert wurde, oder wir können sogar die Kurzschrift verwenden, die das at Symbol war. Jetzt hören wir auf Ereignisse übergeben werden dann müssen wir sehen, was mit diesem Ereignis zu tun ist. Wir erhalten die ausgewählte Seite, wählen neue Dateneigenschaft erstellen, um diese Ereignisbewertung zu speichern, wenn es eine Änderung gibt, scrollen Sie nach unten zu dem Skript direkt unter dem Exportstandard. Ich werde auch die Dateneigenschaft innerhalb von hier hinzufügen, vergessen Sie nicht, das Komma hinzuzufügen. Ich werde eine neue Eigenschaft der aktuellen Seite erstellen. Ich werde dies gleich Kartenfronten setzen. Bisher haben wir nur die Kartenvorderkomponente abgestuft. Dies ist in Ordnung, weil es sinnvoll ist, die Vorderseite der Karte standardmäßig angezeigt zu haben . Dies ermöglicht es uns nun, die aktuelle Seite auf den Wert der Ereignisse genau so zu setzen. So, dass die aktuelle Seite gleich dem Dollarzeichen Ereignis. Jetzt jedes Mal, wenn der Navigationslink geklickt wird, wird dieser dann an die übergeordneten Komponenten mit den Ereignissen namens Seite geändert übergeben. Wir ändern dann die aktuelle Seite von der Kartenfront auf den Wert der Ereignisse. Wir können testen, dass dies funktioniert, indem den Wert der aktuellen Seite mit den doppelten geschweiften Klammern ausgeben. Gleich nach dem nav Header. Ich werde die doppelten geschweiften Klammern öffnen und den Wert der aktuellen Seite ausgeben , also speichern Sie das. Jetzt können wir zum Browser gehen. Zuerst wollen wir den Entwicklungsserver mit npm run dev stoppen. Jetzt sehen wir den Wert von Kartenfronten, was wir erwarten, weil dies ein Standardwert ist. Wenn wir einen anderen nav Link auswählen, sehen wir jetzt, dass der Wert jedes Mal geändert wird, wenn wir einen neuen Menüpunkt auswählen. Wenn Sie den Wert der Seite wählen Sie die Änderung sehen, wenn Sie auf einen Menülink klicken, bedeutet dies, dass Sie jetzt erfolgreich Daten von einem untergeordneten Element an übergeordnete Komponenten ausgeben. Wenn nicht, überprüfen Sie einfach den gesamten Code, bis er auf die Bühne kommt, und dann sind wir bereit, die restlichen Kartenkomponenten zu erstellen. Verwenden Sie auch dynamische Komponenten, um zwischen den einzelnen Ansichten zu wechseln. 50. Dynamische Komponenten: In dieser Anwendung möchten wir Komponenten erstellen, um die verschiedenen Seiten unserer Grußkarte, wie die Vorderseite und die Rückseite, anzuzeigen . Wir wollen auch zwischen diesen Komponenten wechseln. Wenn ein Benutzer auf das Menü Links klickt. Mit Hilfe von Dynamic Components können wir diesen Effekt erzielen. Wir können zwischen mehreren Komponenten wechseln und sie an den gleichen Befestigungspunkten platzieren. Alles, was wir tun müssen, ist die Reserve Component Elements zu verwenden. Es kann anstelle der Karte Front Components gehen. Wenn wir also auf die app.vue gehen, werden Sie diese aktuelle Seitenausgabe fortsetzen, also können wir beginnen. Wenn wir dann die Kartenfront löschen und durch Komponenten ersetzen, stellen Sie sicher, dass dies in den öffnenden und schließenden Tags ist. Anstatt also die Kartenfront zu rendern , werden Komponentenelemente den Abschnitt rendern, auf den wir klicken. So halten Sie bereits den Überblick über die ausgewählte Seite mit den Spaltenseitendaten. Jetzt können wir die ease-Attribute verwenden, um die aktuellen Seitendaten dynamisch an diese neuen Komponentenelemente zu binden . Also innerhalb des öffnenden Tags können wir die v-bind Direktive verwenden und dann die Attribute von is bindet. Im Inneren hier können wir die Dateneigenschaft von Aktuelle Seite hinzufügen. Denken Sie daran, dass wir auch die Kurzschriften-Syntax verwenden können, die nur der Doppelpunkt ist. Jedes Mal, wenn im Menü auf eine Seite geklickt wird, werden die Daten an die übergeordneten App.vue Dateikomponenten übergeben und hört auf dieses erstaunliche Ereignis, und aktualisiert dann die aktuellen Seitendaten. Die Komponentenelemente ändern dann die angezeigte Komponente. Auf der Grundlage dieser. Wir können dies in Aktion im Browser sehen. Wenn wir das speichern und dann aktualisieren. Wenn wir nun auf die Vorderseite klicken, ist das in Ordnung, weil wir die Kartenvorderkomponente zur Verfügung haben. Wenn wir jedoch einen der anderen drei Abschnitte auswählen, würden Sie eine leere Seite sehen. Das ist also in Ordnung, das bedeutet, dass alles funktioniert. Der Rest dieser Links wird von einem erstellen arbeiten, der Rest der Kartenkomponenten. Wir machen das im nächsten Video. 51. So erstellst du zusätzliche Kartenkomponenten: Wir machen gute Fortschritte mit unserem Wissen über die Funktionsweise von Komponenten. In diesem Video möchte ich die zusätzlichen Kartenkomponenten erstellen. Wir haben bereits die Karte von Komponenten, aber wir müssen immer noch die CardInsiDeleft, innen rechts, und auch die CardBack-Dateien erstellen . Wenn Sie sich sicher fühlen, dies zu tun, fühlen Sie sich frei, diese einzelnen Dateikomponenten selbst zu erstellen. Für den Moment muss der Inhalt nur mit der CardFront.vue Datei übereinstimmen. Sie können dies kopieren, um mit zu beginnen. Außerdem müssen Sie diese in die Datei App.vue importieren und sie dann auch als Komponenten registrieren. Achten Sie darauf, wenn wir die Komponenten registrieren, wir benennen sie genauso, wie wir sie in der Menünavigation oder in der Header.vue Datei gegeben haben . Andernfalls wird der Link nicht auf die richtige Seite verlinkt. Um zu beginnen, gehe ich zur Cardfront.vue Datei, wähle alle aus und kopiere dann, und wenn wir dann zu unserem Menü gehen, auf der linken Seite, und dann innerhalb des Kartenordners, werde ich eine neue Datei erstellen, und dieser wird CardInsiDeleft genannt, mit der Punkt-Vue Erweiterung, und fügen Sie es dann in den Inhalt hier, speichern Sie das. Wir müssen uns nicht zu sehr um den Inhalt kümmern, wir werden diese mit untergeordneten Komponenten wie nötig aufbauen, nur damit wir sehen können, welche Seite ausgewählt wurde. Ich werde nur einen Text im ersten Abschnitt hinzufügen, der nur CardInsiDeleft sagt, und das ist, damit wir wissen, welchen Abschnitt wir ausführen, wenn wir auf die dynamischen Komponenten klicken. Jetzt können wir die Komponenten innerhalb der App.vue importieren und dann registrieren. Wenn Sie zum Skript gehen, und dann können wir die CardInsiDeleft importieren, und dann ziehen wir diese aus dem Komponentenordner. Im Inneren haben wir einen Kartenordner und der Dateiname ist CardInsiDeleft, und dann natürlich unten im Komponentenabschnitt, getrennt durch ein Komma, fügen wir die CardInsiDeleft und setzen dies auf den gleichen Namen, den wir aufgerufen haben es hier, von CardInsideleft. Denken Sie daran, dass wir diese Elemente nicht innerhalb der Vorlage hinzufügen müssen, wie wir es mit dem nav Header getan haben. Da diese Komponente zwischen all diesen Seiten wechseln wird , folgt, wenn wir sie innerhalb des Menüs auswählen. Jetzt müssen wir nur den gleichen Vorgang wiederholen und zwei weitere Abschnitte oder zwei weitere einzelne Dateikomponenten erstellen . Ich beginne mit der CardInsideRight-Komponente. Innerhalb des Karten-Ordners erstellen wir CardInsideRight, wieder mit der Punkt-Vue Erweiterung. Dies kann auch den gleichen Inhalt der linken Innenseite haben Lassen Sie uns also alle auswählen, kopieren und dann in den Inhalt einfügen. Nur damit Sie den Unterschied erkennen können, werde ich den Text nach innen rechts ändern und dann speichern, und dann haben wir endlich auch den CardBack, den wir hinzufügen müssen. cardback.vue, und fügen Sie den gleichen Inhalt ein, und ändern Sie den Text in CardBack. Zurück zu der App.vue, und ich werde nur diese Importanweisung kopieren und dann zweimal einfügen. Der zweite ist im Inneren rechts. Ändern innerhalb des Namens und auch innerhalb der Dateipfad, und dann haben wir schließlich CardBack, und dann unten innerhalb der Instanz können wir innerhalb der Komponente Abschnitt unsere neuen Komponenten hinzufügen. CardInsideRight, und dann schließlich die CardBack-Komponenten. Das sollte sein, ist jetzt erledigt. die vier Kartenkomponenten jetzt vorhanden sind, können wir sicherstellen, dass unser Dev-Server läuft und dann zum Browser übergehen. Wenn alles richtig funktioniert, sollten wir nun in der Lage sein, auf jeden der Menü-Links zu klicken und unsere neuen Komponenten zu sehen. Wir können sehen, dass dies mit den Texten arbeitet, die wir innerhalb von jedem hinzugefügt haben. Großartig, also jetzt, wenn das vorhanden ist, machen wir gute Fortschritte mit unserer Anwendung. Jetzt ist es an der Zeit, fortzufahren und mit der Erstellung der Texteingabekomponenten zu beginnen. 52. So erstellst du Texteingabe-Komponenten: Wir haben unsere Kartenabschnitte jetzt abgeschlossen, und wir können zwischen den verschiedenen Ansichten wechseln, indem Sie auf die Menü-Links klicken. Jetzt ist es an der Zeit, die Texteingabekomponenten zu erstellen. Diese Komponenten werden unsere ersten wiederverwendbaren Komponenten sein. So können wir sie einmal erstellen und dann mehrmals in der App verwenden, wie Sie hier sehen können. Die Komponenten selbst ist ziemlich einfach. Es besteht im Grunde aus einem Textbereich Eingaben. Es verwendet bidirektionale Datenbindung mit V-Modell, um eine Dateneigenschaft zu aktualisieren, wenn ein Benutzer tippt. Diese Dateneigenschaft wird animiert, um die Torheit der übergeordneten Komponente zu Veranstaltungsorten. Wenn wir auf den Text kommen, werde ich Komponente setzen. Alles, was wir für diese Komponente tun , wissen wir bereits und wir haben bisher in diesem Kurs behandelt. Beginnen wir mit der Erstellung der Komponenten namens text inputs.view. Wenn Sie zum Zählbereich gehen. Wir können hier unsere neuen Komponenten hinzufügen. Also Texteingabe, mit der.view Erweiterung. Dann müssen wir unsere üblichen Vorlagen hinzufügen. Fügen Sie diese also oben mit den öffnenden und schließenden Tags hinzu. Sie können auch unsere Skript-Tags unten hinzufügen, und wir verwenden diese sehr bald. Wir brauchen die Style-Tags in diesen speziellen Komponenten nicht. Da die Bootstrap-Klassen kümmern sich um alle Styling-Fotos. Unsere Vorlage Sie unkompliziert. Alles, was Sie tun müssen, ist einige Bootstrap-Divs für das Layout, eine Überschrift und dann einen Textbereich hinzuzufügen . Lassen Sie uns also beginnen, indem wir unser erstes div erstellen, das die Klasse der Zeile haben wird. Dann fügen wir in dieser Zeile unser 12-Säulen-Raster hinzu. Fügen Sie also ein verschachteltes div innerhalb von dort hinzu, und dann können wir einige weitere Bootstrap-Klassen von Kohle hinzufügen, SM 12, um es die volle Breite der Seite zu machen, und dann können wir unseren Container für den Textbereich hinzufügen. Also lassen Sie uns ein Bootstrap div mit der Klasse der Formulargruppe hinzufügen. Dies wird Ihnen nur einen schönen Stil geben. Am oberen Rand dieser Komponente möchten wir ein h für Überschrift hinzufügen, und dies wird den Text des Edit-Textes hinzufügen. Dies ist, wie wir verwenden, kann deutlich sehen, dass dies der Bearbeitungsbereich ist , während die Bedürfnisse in einigen Text eingeben, und dann können wir unseren Textbereich hinzufügen. Also werde ich nur den Namen entfernen und die ID ersetzen dies durch eine Bootstrap-Klasse der Formularsteuerung. Also werden Spalten dies ein wenig größer machen und diese 50 Spalten machen, und wir brauchen nur vier Zeilen. Ich werde dann einen Platzhalter hinzufügen, und der Text, den wir hinzufügen, ist nur, fügt Text hier hinzu. Nur um dem Benutzer einige Anweisungen zu geben. Wir benötigen dann eine Dateneigenschaft, um den vom Benutzer eingegebenen Text zu speichern. So können wir es dann an die übergeordneten Komponenten diese Daten ausgeben, werden wir bidirektionale Datenbindung verwenden, um von diesem Textbereich aktualisiert zu werden. Unten in unserem Skript können wir unsere Objekte erstellen. Exportieren Sie Standardwerte, und lassen Sie uns unsere Dateneigenschaft auf die übliche Weise erstellen, und ich werde die Dateneigenschaft von Textfeld-Eingaben zurückgeben. Anfangs werde ich dies auf eine leere Zeichenfolge setzen. Da hier noch kein Text hinzugefügt wird. Jetzt haben diese Textfeld-Eingaben als Dateneigenschaft. Wir können es zu unserem Textbereich hinzufügen, indem wir das Modell verwenden, um es zu binden. Also gleich nach dem Platzhalterattribut möchten wir dies in einer neuen Zeile hinzufügen. Also V-Modell, und dies wird Textfeld-Eingabe sein. Also, jetzt werden wir die bidirektionale Datenbindung einrichten. Wir können nun den Wert dieses Textbereichs an die Eltern ausgeben. Dies kann erreicht werden, indem eine Methode hinzugefügt wird, die On Each Keyboard Events aufgerufen wird. Immer noch in diesem Textbereich werde ich einen Ereignis-Listener hinzufügen, um eine neue Methode namens Text Changed auszulösen. Jedes Mal, wenn ein Schlüssel freigegeben wurde. Also dann fügen wir das @ Symbol und dann die Ereignisse des Schlüssels hinzu. Jedes Mal, wenn ein Schlüssel freigegeben wird, können wir ein Ereignis namens Text geändert auslösen. Dann können wir unsere Methode unten erstellen, um die benutzerdefinierten Emit-Ereignisse auszulösen. Also unten innerhalb des Skripts, unter den Datenobjekten fügen Sie ein Komma hinzu, und dann können wir unsere Methoden hinzufügen. Diese Methode muss natürlich die gleiche sein, was wir hier von Text geändert haben, und dann innerhalb des Funktionskörpers wollen wir diese Daten emittieren. Also diese.$ Zeichen emittiert. Dann denken Sie daran, von vorher, wir müssen zwei Argumente übergeben. Der erste ist ein Zeichenfolgenwert, und dies ist der Name unserer Ereignisse. Ich werde diesen Anzeigetext geändert nennen. Sie können einen anderen Namen verwenden, wenn Sie es bevorzugen. Nun, ich denke, dieser Name beschreibt, was wir in Ordnung machen, und dann ist der zweite Parameter der Wert, den Sie senden möchten. Dies beginnt also Textfeld-Eingabe, die wir hier haben. Also am Ende als zweites Argument. So haben wir jetzt die benutzerdefinierten Ereignisse namens Anzeigetext geändert. Wir können die Komponente der Konferenz Punkt v-Datei als untergeordnete Komponenten hinzufügen und für das Ereignis zu warten. Aber wir gehen zurück zu den Folien, wie wir hier sehen können. Wir verwenden die gleiche Komponente dreimal. Wenn wir die Kartenfronten öffnen, die Ansichtsdatei, können wir diese Komponenten innerhalb von hier hinzufügen. Zuerst müssen wir die Komponenten innerhalb des Skripts importieren. So wie wir es vorher getan haben, können wir die Texteingabekomponenten Impulse geben und dann den Dateipfad hinzufügen, der Punktschrägstrich ist. Dieser wird nur Texteingaben sein. Das liegt daran, dass sich die Texteingabe im selben Ordner befindet wie die Kartenfronten. Wir müssen nicht in den Karten- oder Komponentenordner gehen, da wir bereits da sind. Dann müssen wir unsere Komponenten erstellen, Datumseigenschaft. Also exportieren, Standard, dann fügen Sie unsere Komponenten. Also werde ich ein CC-Präfix hinzufügen, das für kreative Karten steht. Dies ist, um sicherzustellen, dass der Name ein wenig weniger generisch und besser auf unsere App zugeschnitten ist . So CC Texteingaben, die Alias für die Texteingabe ist. Der CC kann auch jegliche Namenskonflikte mit irgendwelchen View JS Plugins oder Bibliotheken vermeiden, die wir in Zukunft hinzufügen könnten. Also lassen Sie uns das speichern und dann zum Vorlagenabschnitt gehen. Dann innerhalb des Bearbeitungsbereichs, werden wir unsere Komponenten hinzufügen. So CC Texteingabe. Wenn Sie dann sicherstellen, dass Ihr Entwicklungsserver betriebsbereit ist, speichern Sie, und gehen Sie dann über und gehen Sie nach vorne. Wir sollten nun sehen, dass die Textbereichskomponente nun zu unserer App hinzugefügt wird. Wir lassen dieses Video dort und wir werden zurückkommen und mit diesen Texteingaben im nächsten Video fortfahren. 53. So erhältst du Daten aus der Texteingabe: Im letzten Video haben wir erfolgreich unsere neuen Texteingabekomponenten erstellt und registriert. Jetzt werden wir fortfahren, indem diese Komponente noch zwei Mal auf der Vorderseite der Karte hinzufügen. Lassen Sie uns zur Kartenvordertür Ansicht gehen und hier, wo wir die CC-Texteingaben erstellt haben, kopieren wir dies und fügen Sie es in zwei weitere Male ein. Sie sollten ein bisschen ein Muster in meinem [unhörbar] sehen um die Komponenten anzuzeigen, die wir es wie HTML-Elemente hinzufügen. Alles, was wir tun müssen, ist dies dreimal hinzuzufügen, und dann können Sie sehen, wie sie dreimal in der Vorderseite der Karte angezeigt wurden. Jetzt haben wir unsere drei Komponenten, wir müssen auch den Ereignis-Listener hinzufügen, den wir innerhalb der Texteingabe hinzugefügt haben. Wir geben derzeit das Ereignis „Text geändert anzeigen“ aus. Von [unhörbar] zu diesem innerhalb der Komponenten mit @ Anzeigetext geändert und dann müssen wir auch diese zu unserer zweiten und dritten Komponente hinzufügen. Kopieren Sie diese einfach und fügen Sie sie ein. Hier haben wir drei Komponenten hinzugefügt, die alle für das Anzeigetext Änderungsereignis warten , um es übergeben werden. Wir müssen jetzt freie Dateneigenschaften hinzufügen, um den empfangenen Textwert zu speichern , so dass es eine für jede Komponente ist. Lassen Sie uns zu unserem Skript gehen und wir können unsere Dateneigenschaft hinzufügen. Der erste, den wir hinzufügen möchten wird ein Name des Textbox-Werts 1 sein, der anfänglich eine leere Zeichenfolge sein wird. Da Sie drei separate Komponenten haben, werde ich auch das gleiche für Nummer 2 und 3 hinzufügen. Textfeld Wert 2, wieder auf eine leere Zeichenfolge für jetzt und dann Textfeld Wert 3 gesetzt. Wenn diese jetzt vorhanden ist, können wir sie nun mit dem Wert der Ereignisse aktualisieren , die von den [unhörbaren] Komponenten übergeben wurden. Wir werden dies genau so tun, wie wir es zuvor im Ereignis-Listener betrachtet haben. Wir können damit beginnen, Textfeld-Wert 1 in die erste Komponente hinzuzufügen und ist sicherlich gleich dem Wert des Ereignisses und dann tun wir genau das gleiche für die zweite und dritte Komponente. Textfeld Wert 2 und dann Textfeld 3. Mit diesem jetzt an Ort und Stelle, alles, was wir tun müssen, ist zu überprüfen, ob die Daten von jeder unserer Komponenten empfangen werden, ist, einfach Werte mit der Textinterpolation auszugeben. Beginnen wir mit der Ausgabe eines Textfeld-Wert 1 und dann Textfeld-Wert 2, dann das gleiche für Wert 3, speichern Sie das. Stellen Sie sicher, dass der Entwicklungsserver einsatzbereit ist und dann, wenn wir zum Browser gehen. Wenn wir nun beginnen, indem wir etwas Text in den ersten einfügen, können wir sehen, dass der Text unten unten angezeigt wird, das ist unser Textbereich 2. Jetzt haben wir auch Textbereich 2 angezeigt. Versuchen wir es mit dem dritten. Auch dort erscheint der Textbereich 3. Wir können jetzt sehen, dass wir drei der gleichen Komponenten auf dem Bildschirm angezeigt haben. Jetzt werden wir unsere Komponente dreimal wiederverwenden. Die Daten werden jedoch unabhängig voneinander gespeichert, so dass jeder, wenn wir eingeben, ihren eigenen entsprechenden Datenwert hat. Wenn es Ihnen gelingt, das alles zum Laufen zu bringen, herzlichen Glückwunsch. Sie sollten jetzt den Hang der Komponenten bekommen und Sie sind jetzt bereit, mit dem nächsten Video zu übergehen. Wir beginnen, die Textausgabebereiche zu erstellen. 54. So erstellst du Textübertragungskomponenten: Wir haben jetzt die Texteingabe-Komponenten erstellt und auch in den Bildschirm angezeigt, jetzt werde ich die Textausgabedatei erstellen. Dies wird die Komponente sein, die den Text auf der Karte anzeigt. Auch hier werden wir, genau wie die Eingaben, drei dieser Komponenten verwenden, um den Text auf der Karte anzuzeigen. Zuerst können wir die Textfeld-Wertefelder aus der Karte Frontdatei löschen. Lassen Sie uns TextBoxValue1, 2 und 3. Wir haben diese bereits getestet und wir wissen, dass es nicht funktioniert. Wie wir es mit den Eingabekomponenten getan haben, lassen Sie uns eine neue Komponentendatei erstellen, diesmal TextOutput genannt. Gehen Sie zum Kartenordner, erstellen Sie eine neue Datei namens TextOutput, mit der Erweiterung.veu. Jetzt können wir unsere Vorlage hinzufügen. Moment wird diese Vorlage ziemlich einfach sein, alles, was ich tun werde, ist ein div als Wrapper zu erstellen, und dann innerhalb des div, fügen Sie einfach etwas Text hinzu, nur von Beispieltext, so dass wir die Komponenten auf dem Bildschirm sehen können. Direkt unter der Vorlage können wir auch unsere Skript-Tags hinzufügen, und ich werde nur einen leeren Exportstandard erstellen, gefolgt von den Style-Tags. Sobald Sie das tun, müssen wir dann die Komponente innerhalb der CardFront.vue importieren und registrieren . Wir sind auf den Skript-Abschnitt und dann werde ich einfach diese Import-Anweisung kopieren, und fügen Sie sie dann unten. Aber dieses Mal ändern Sie es in TextOutput. Dasselbe gilt für den Dateipfad. Sie unten im Komponentenabschnitt ein Koma hinzu. Ich schaue uns unseren ccTextOutput an. Gib dem einen Tresor. Jetzt haben wir Zugriff auf die Komponente in dieser Datei. Es ist Zeiten, jetzt fügen Sie es in den Kartenanzeigebereich innerhalb der Vorlage. Gehen Sie zum Karten-Anzeige-Abschnitt, und dann können wir ccTextOutput hinzufügen und, das schließende Tag. Wie bereits erwähnt, werden wir dies dreimal anzeigen. Letztendlich werden diese Ausgabe-Abschnitte den Text aus diesen drei Texteingabe-Abschnitten anzeigen . Speichern Sie das, und starten Sie dann die Server mit npm run dev. Wenn Sie müssen, dann können wir zum Browser gehen, und wir sehen die Komponente in Aktion, aber wir werden den Text an Benutzertypen an die Komponente im nächsten Video übergeben, wir werden unseren ersten Blick auf die Verwendung von Requisiten werfen. 55. So lieferst du Daten mit Props: So sieht unsere Struktur so weit aus. Wir haben Text-Input- und Output-Komponenten innerhalb einer übergeordneten Komponente namens CardFront. Daten können zwischen zwei gleichgeordneten Komponenten übergeben werden. So können wir den Text nicht direkt von der Eingabe in die Output-Komponenten verschieben. Stattdessen müssen wir über die übergeordnete Komponente kommunizieren, die Card Front ist. Wir wissen bereits, wie Daten von einem Kind an eine übergeordnete Komponente übergeben werden. Wir tun dies, indem wir ein benutzerdefiniertes Ereignis ausgeben und wir tun dies bereits in unserer App, also haben wir diesen Teil abgedeckt. Als nächstes brauchen wir einen Weg, dies den ganzen Weg zu tun. Die übergeordnete Komponente muss diese Daten an eine untergeordnete Komponente zurückgeben. In unserem Fall auf die Textausgabe-Komponente. Wir können dies mit Requisiten tun, die für Eigenschaften kurz ist. Requisiten sind benutzerdefinierte Attribute für die Weitergabe von Daten an untergeordnete Komponenten. Wenn Sie aus einem Hintergrund von react.js kommen, funktioniert es auf die gleiche Weise. Das erste, was zu tun ist, ist, innerhalb der untergeordneten Komponente die Requisiten zu deklarieren , die wir erwarten. Also, wenn wir auf die TextOutput.vue Datei gehen, und dann auf das Skript. Wir können dann unsere Requisiten hier drinnen hinzufügen. Die Requisiten-Option ist ein Array von Requisitennamen, die wir erwarten, als String übergeben werden. Ich habe diese Stütze den Anzeigetext genannt, um die Daten zu reflektieren, die an sie weitergegeben werden. Wir können zu unseren Vorlagen zurückgehen und den Beispieltext entfernen. Dann können wir an der Stelle dieses können wir den Namen der Requisite hinzufügen, die Anzeigetext ist. Sobald diese Daten weitergegeben werden, wird dies innerhalb unserer Vorlage angezeigt. Wir können jetzt diese Requisite über in der übergeordneten Komponente hinzufügen, die CardFront.vue ist. Also, um zu beginnen, fügen wir eine benutzerdefinierte Attribute innerhalb der Output-Komponente, die der Name der Requisite ist. Also werde ich hinzufügen, Text anzeigen hier. Also dieser Test wird nur eine Reihe von hinzufügen, Hallo. Stellen Sie nun sicher, dass der Entwicklungsserver läuft. Wenn wir nun hinübergehen, sollten wir nun den Wert der Requisite auf dem Bildschirm sehen. Dieser Wert wird also an die untergeordnete Komponente von Textausgabe weitergegeben. Wir sagen dann vue.js, welche Requisiten wir erwarten, und dann können wir sie in unseren Vorlagen ausgeben. In diesem Fall funktioniert dies jedoch nur, weil wir eine Zeichenfolge verwendet haben. Wenn wir versuchen, dynamische Daten zu verwenden, wie unsere TextboxValue1. Also kopieren wir das und fügen das ein. Wir sehen, dass das nicht funktionieren wird. Wir erhalten nur den String-Wert und nicht die dynamischen Daten. Wenn die Daten dynamisch sind, müssen wir v-Binds oder die Shorthand-Syntax verwenden. Also kurz vor Anzeigetext, können wir die kurze Syntax des Doppelpunkts hinzufügen, jetzt speichern. Nun, wenn wir zum Browser gehen, und wir beginnen Text innerhalb des ersten Texteingabefeldes einzugeben. Wir können sehen, dass die Änderungen nun auf der rechten Seite reflektiert werden. Wir versuchen das mit dem zweiten. Wir sehen, dass nichts passiert, weil wir noch keine Requisiten zur zweiten oder dritten Komponente hinzugefügt haben. Also gehen wir rüber zur CardFront und wir können das jetzt für die zweite und dritte Komponente tun . Kopieren Sie also die Requisiten und fügen Sie dies in der zweiten und dritten Komponente hinzu. Um diese eindeutig zu machen, müssen wir die Datumseigenschaft oder TextBoxValue2 und TextBoxValue3 hinzufügen . Also, sparen Sie das. Jetzt sollten wir drei unabhängige Komponenten haben. Also box1, box2 und schließlich box3. Diese arbeiten also alle unabhängig mit ihren eigenen Daten. Alle drei dieser Textbereiche arbeiten unabhängig voneinander, da sie über eine andere Datenquelle verfügen. Auf diese Weise können wir Requisiten verwenden, um Daten an untergeordnete Komponenten weiterzugeben. Es ist wichtig, dass wir verstehen, dass die Requisiten eine unidirektionale Bindung bilden, was bedeutet, dass, wenn die übergeordneten Daten aktualisiert werden. Die Daten werden automatisch an das Kind weitergegeben. Es darf jedoch nicht umgekehrt funktionieren. Wir sollten den Wert der Requisite innerhalb der untergeordneten Komponente nicht ändern, wir sollten sie als schreibgeschützt behandeln. Wenn wir den Wert einer Requisite ändern müssen, die weitergegeben wird, sollten wir es nicht direkt tun. Wenn wir eine Requisite verwenden und dann den Wert ändern möchten, sollten wir zuerst eine Dateneigenschaft innerhalb der untergeordneten Komponenten einrichten. Wir sollten dann die Datumseigenschaft als Anfangswert der Requisite zuweisen und dann Ihre Daten ändern, anstatt den Prop-Wert direkt zu ändern. 56. So erhältst du Komponenten aufrecht: Wenn Sie dynamische Komponenten verwenden und zwischen ihnen wechseln, wie wir hier sind, gibt es ein kleines Problem, das wir möglicherweise angehen müssen. Wenn wir etwas in eines der Texteingabefelder eingeben, sehen wir das Ergebnis auf der rechten Seite. Das Problem tritt auf, wenn wir die aktive Komponente mit den manuellen Links wechseln. Wenn Sie eine andere Komponente auswählen, z. B. Innenseite links, kehren Sie zurück zur Vorderseite. Wir sehen, dass der Text, den wir hinzugefügt haben, verloren geht. Auch spät im Projekt, wenn wir Text- und Bildeingaben auf allen Seiten hinzufügen. Dasselbe wird auch mit all diesen Komponenten geschehen. Warum passiert das? Nun, zu Beginn des Kurses haben wir uns den Lebenszyklus der Ansicht angesehen, der die Phasen der Sichtinstanz von der Kuration bis hin zur Zerstörung durchläuft . Wenn wir die dynamischen Komponenten ändern, Komponente oder weg von, wird dann zerstört und aus dem Speicher entfernt. Sehen Sie sich Jazz-Anbieter mit einer einfachen Lösung dafür an. Alles, was wir tun müssen, ist unsere dynamischen Komponenten mit ANOVA reservierten Elementen zu umwickeln , die Keep Life genannt werden. Wenn wir zurück zu unserem Texteditor gehen und dann zur App Punktansicht gehen, haben wir eine Komponente, die die aktuelle aktive Seite registriert. Lassen Sie uns dies in den Keep-Alive-Wrapper einschließen, um das öffnende Tag hinzuzufügen, und nach der Komponente und nach der Komponentekönnen wir auch das close-Tag hinzufügen. Das habe ich nicht gerettet. Wenn wir nun zum Browser gehen, können wir beginnen, indem wir einige Daten innerhalb des ersten Textbereichs hinzufügen, und ein jetzt, wenn wir weg und dann zurück nach vorne gehen, werden wir sehen, dass die Daten jetzt erhalten bleiben. Dies ist eine wirklich einfache Lösung, die GS-Anbieter anzeigen , um dynamische Komponentendaten innerhalb des Speichers zu halten. 57. So sondierst du CSS-Stile: Zu Beginn dieses Abschnitts haben wir alle Komponenten der Karten erstellt. Wir haben die meine Kopie Karte aus Datei erstellt. Diese Datei hatte bereits einige Styling innerhalb der Style-Tags. Wenn wir bis zum Ende der Karte Front gehen, können wir zwischen Style-Tags sehen, haben wir den Bearbeitungsbereich und Kartenanzeige-Stile. Duplizieren dieser Datei wurden auch die gleichen Stile zu allen Kartendateien hinzugefügt. Zum Beispiel, wenn Sie gehen zu Card Back und scrollen Sie nach unten zu dem Stil, wir können sehen, dass wir doppelte Code haben. Wenn wir die Stile aus dieser Cardback.vue Datei löschen wollen, speichern wir diese und sehen, was passiert. Wir gehen zum Browser und dann, wenn wir zum „Zurück“ gehen, können wir immer noch sehen, dass das Styling immer noch gilt, weil wir die Hintergrundfarbe, die Polsterung und auch die Höhe von 800 Pixeln haben . Dies liegt daran, dass jeder Stil, in dem wir innerhalb der Komponentendatei hinzufügen , immer noch überall in unserer App angewendet wird. Um den Code innerhalb unserer App zu reduzieren, können wir alle Stile aus dem Card Back löschen, was wir bereits getan haben. Die CardInsiDeleft, also verschieben Sie diese in Styling-Abschnitte. Dann endlich aus der CardInsideRight. Dadurch bleibt unser Styling jetzt nur innerhalb des ursprünglichen CardFront-Bereichs. Die Stile werden nur in der CardFront-Datei belassen, da sie für alle anderen gelten. Aber was wäre, wenn wir einen Fall hätten, in dem wir das CSS in eine einzelne bestimmte Komponente enthalten wollen ? In diesem Fall können wir dem öffnenden Style-Tag „Scoped“ wie folgt hinzufügen. Fügen Sie die Bereichsattribute hinzu und speichern Sie diese. Jetzt gehen wir zum Browser. Wenn Sie nach vorne gehen, können wir sehen, dass das Styling innerhalb der Card Front gilt. Versuchen wir InsideLeft, InsideRight und auch das Zurück. Jetzt können wir sehen, dass das Styling auf eine einzelne Dateikomponente beschränkt ist. Ich gehe zurück zur Kartenfront und entferne „Geltungsbereich“. Dies liegt daran, dass es auf alle anderen Seiten angewendet werden soll. Wir haben jedoch einige Verwendungen für die Verwendung von Scoped in unserer App. Zum Beispiel können wir in der TextOutput-Datei den Text innerhalb der HTML-p-Tags ausgeben. Wir können diesen Text dann stylen und lassen das Styling nur für den Text gelten, der auf der eigentlichen Karte angezeigt wird, was dieser Bereich innerhalb unserer Vorlagen ist. Lassen Sie uns zum Stil gehen und fügen Sie hier „Scoped“ hinzu. Dies gilt nur für den TextOutput. Dann werde ich eine neue Schriftfamilie festlegen, die nur auf den Kartenbereich angewendet wird. Ich gehe zu Google und wähle eine Google-Schriftart aus. Ich werde nach Google Fonts Tangerine suchen und dann auswählen, dass. Dies ist die Schriftart, die ich für dieses Projekt verwenden werde. Sie können es natürlich ändern, wenn Sie es vorziehen. Sobald Sie Ihre Schriftart ausgewählt haben, klicken Sie auf das Plus-Symbol oben, und dann können wir erweitern. Hier erhalten Sie einige Anweisungen, wie Sie die Google Fonts hinzufügen. Das erste, was Sie tun möchten, ist, den Link oben zu kopieren. Dies ist der Link für die Stylesheets. Dann gehen Sie zu der index.html, und dann fügen wir dies direkt unter dem Bootstrap-Link hinzu. Fügen Sie das dort ein und geben Sie, dass ein Speichern und zurück über Google Fonts. Wir können dann die Zeile von CSS kopieren. Kopieren Sie dies und dann können wir dies in unsere TextOutput-Datei innerhalb des CSS für die P-Elemente hinzufügen und dann den Code einfügen, den Sie gerade kopiert haben. Speichern Sie das, stellen Sie sicher, dass der Entwicklungsserver aktiv ist und ausgeführt wird, und gehen Sie dann zurück zum Projekt. Wir beginnen, innerhalb der Eingabekomponenten zu tippen. Wir können sehen, dass der Text angewendet wird, obwohl er für jetzt wirklich klein ist, aber es funktioniert, und wir können sehen, dass die Schriftarten angewendet werden. Um dies zu beheben, gehe ich zurück zu der Datei und füge etwas mehr Styling hinzu. Ich werde die Standardschriftgröße auf 42 Pixel einstellen. Ich werde auch die Zeilenhöhe von 42 Pixeln anpassen. Nur um ihm ein bisschen ein besseres Aussehen zu geben, werde ich den Text-Schatten von zwei Pixeln, zwei Pixeln, zwei Pixeln für die drei Seiten hinzufügen ; und dann die Farbe von aaa. Die Farbe des Textes, ich werde meine als 4d4d4d hinzufügen. Gehen Sie auch etwas Rand hinzufügen, fünf Pixel oben und unten, und Null auf der linken und rechten, nur um es ein wenig Abstand zu geben. Ich werde auch eine Grenze hinzufügen und wir werden sehen, warum bald. Nur ein Pixel gepunktet und eine graue Farbe. Dann die White-Space-Eigenschaft von pre-line. Pre-line behält die Zeilenumbrüche bei, wodurch alle Texte in derselben Zeile angezeigt werden. Wenn der Benutzer auf „Enter“ klickt und mit der Eingabe in ein Textfeld in der Zeile darunter beginnt, wird das gleiche auf der Ausgabeseite angewendet, so dass sich nicht alles in derselben Zeile befindet. Dann werden wir schließlich Überlauf von versteckten, nur für den Fall, dass der Benutzer zu viel Text eingibt, der nicht in den Bereich passen kann. Wir speichern das und sehen, wie das aussieht. Jetzt sehen wir, dass der Text ein bisschen größer ist, und wir haben auch einige Schriftschatten. Ich scheine nicht zu sehen, das gepunktete, ich werde das ändern, um gepunktet zu werden und da gehen wir. Sie bemerken, dass wir ein paar hübsche, hässlich aussehende gepunktete Linien haben. Dies liegt daran, dass der gepunktete Linienrahmen ohne den Text keine Höhe hat. Wir können diese für jetzt ignorieren, weil wir Requisiten an diese Komponenten im nächsten Video weitergeben , dem die Höhe der Komponenten festgelegt wird. Dann haben wir einen schönen gepunkteten Rand um jeden Abschnitt. Die Hauptsache ist ein Text für die Karte ist Stil jetzt. Diese Stile sind nur auf diese Komponenten anwendbar. 58. Prop-Validierung: Wenn Sie Daten über Requisiten an untergeordnete Komponenten weitergeben, möchten Sie manchmal sicherstellen, dass wir den richtigen Datentyp eingeben, der verwendet werden soll. Wenn beispielsweise die untergeordneten Komponenten erwartet, dass eine Zahl an sie übergeben wird oder stattdessen eine Zeichenfolge empfängt, kann dies zu Problemen führen. Verwendung der Prop-Validierung ist eine Möglichkeit, die Anforderungen für die zu empfangende Requisite festzulegen. Wenn die Validierung fehlschlägt und VGS während der Entwicklung einen Konsolenfehler aussendet. Zuerst gehen wir über die Karte Front v-Datei gehen und fügen Sie eine neue Aufforderung, um an die Textausgabe-Komponenten übergeben wahrscheinlich verwendet, um die Höhe der Steuercontainer auf der Karte zu setzen. Latente Ursache, dass wir das gleiche mit der Bildanzeige tun. Wir können die Höhen der Komponenten neu anordnen, um die Karte korrekt zu passen. Wir müssen und diese Sonde innerhalb der CC-Text-Ausgabe-Komponenten. Ich werde diese Stütze die Containerhöhen nennen und dies auf einen Wert von 130 setzen. Dieser Wert von 130 wird also als CSS-Eigenschaft verwendet. Lassen Sie uns dasselbe für die zweite, dritte Komponente tun , kopieren Sie diese und fügen Sie sie dann zweimal ein. Sobald dies in der Textausgabedatei erledigt ist, können wir dem Array den richtigen Namen hinzufügen. Wir haben bereits unsere Requisiten Setup. Wir können sie mit einem Komma trennen und auch unsere zweite Requisite, Containerhöhe bei Requisiten zum Array hinzufügen , wie dies funktioniert gut. Aber wir wollen einige Validierungen Tele-Komponente hinzufügen. Welche Art von Daten erwarten wir? Um dies zu tun, wenn es traurige Requisiten ist, ein Objekt zu sein. Wir können den Datentyp festlegen, den wir innerhalb eines Arrays erhalten möchten. Beachten Sie, dass mehrere Datentypen verwendet werden können, z. B. eine Zeichenfolgennummer, boolesche Funktion, ein Objekt oder sogar ein Array. Also lassen Sie uns in unserer Requisite von Anzeigetext hinzufügen. Lassen Sie uns das wieder hinzufügen. Fügen Sie dies ist ein Typ von String zu dem Array. Wir können diese Validierung testen, indem wir eine neue Autobahn passieren und sehen, was passiert. Über in der Kartenfront, anstatt das Textfeld Wert getragen zu senden, gehen einen Zeichenfolgenwert zu senden. Sagen wir 12. Wenn Sie nun die Konsole öffnen, können wir sehen, dass ein Fehler vorliegt. Es sagt, das erwartete String-Buch hat eine Zahl. Das bedeutet also, dass die Validierung funktioniert. Also, jetzt lasst uns dies zurück zu Textfeld-Volumen ändern. Auf diese Weise können wir grundlegende Datenvalidierung hinzufügen. Es gibt auch mehr Dinge, die wir tun können, getrennt durch ein Komma. Fügen wir nun die zweite Stütze der Containerhöhe hinzu. Da dies mehr als eine Art von Validierung haben wird, müssen wir dies als Objekt festlegen und dann als Zahlentyp hinzufügen. Wir können auch erklären, ob wir wollen, dass diese Requisite benötigt wird. Dies ist ein boolescher Wert, den ich auf true setzen werde. Dies teilt VGS diese Requisite meist Anwesenheit sonst eine Konsolenwarnung erhalten. Wir können testen, indem wir jeden Container hohe Stütze von den Eltern von Cartoons entfernen, und dann auf die Konsole gehen. Im Inneren erhalten wir die Warnmeldung, die besagt, dass erforderliche Stütze der Behälterhöhe fehlt. Fügen wir das jetzt wieder hinzu und speichern Sie es dann. Also wieder über in unseren Eingabeaufforderungen in der Textausgabe. Außerdem können wir einen Standardwert hinzufügen, wenn kein Wert übergeben wird. Offensichtlich wäre dies nicht sinnvoll, mit erforderlichen hinzugefügt werden, Schlamm ersetzen mit Standard erforderlich, und wollen es auf einen Wert von 200 zu verkaufen, was natürlich eine Zahl ist.Also, jetzt, wenn keine Stütze durch eine Komponente übergeben wird, Stattdessen wird der Standardwert 200 verwendet. Jetzt haben wir diese validierten Daten als validierte Requisite übergeben. Wir verwenden im nächsten Video, um einen Container Höhen zu setzen, indem Sie es zu Stil Objekt hinzufügen. 59. So lieferst du Prop-Daten an ein Stil-Objekt: Unsere App wird nun eine validierte Requisite übergeben, die eine Nummer ist. Wir können diese Zahl verwenden, um von außen die Höhe zu setzen die wir wollen, dass das Textfeld auf der rechten Seite sein, das ist dieser Bereich hier drüben. Diese Requisite heißt enthalten Höhen, und wir werden den Wert an ein Stilobjekt übergeben , um die Containerhöhe mit CSS zu setzen. Um dies zu tun, lassen Sie uns eine berechnete Eigenschaft innerhalb der Textausgabedatei einrichten. Wir werden nur wieder rendern, wenn es eine Änderung der Behälterhöhe Requisite. Fügen wir unseren berechneten Abschnitt direkt unter den Requisiten hinzu, getrennt durch ein Komma. Ich werde es eine berechnete Eigenschaft unser StyleObject nennen und dann werden wir die Höhe zurückgeben. Ich werde die Höhen so einstellen, dass sie gleich this.containerheight sind, was unsere Requisite ist, an die übergeben wird. Dann, weil wir eine Zahl übergeben und ein CSS-Wert sein wollten, können wir auch px für Pixel am Ende hinzufügen. Dieses Stilobjekt fügt eine CSS hohe Eigenschaft hinzu, legt den Wert der Requisite fest, die derzeit 130 ist, die Sie hier festgelegt haben. Dann fügen wir innerhalb des Objekts px hinzu, um zu erklären, dass dies eine Pixelgröße ist. Jetzt ist unser Stilobjekt erstellt Wir können es zu unserem öffnenden p-Tag als Style-Attribut hinzufügen. Scrollen Sie zurück zu unseren Vorlagen und innerhalb des öffnenden Tags, verwenden Sie den Doppelpunkt, um die Stile zu binden, da diese dynamisch sind. Dies wird gleich unserer berechneten Eigenschaft sein, die StyleObject ist. Fügen wir dies zu einer separaten Zeile hinzu. Retten Sie sie. Wenn wir zurück auf die Karte gehen, können wir sehen, dass wir die freien Textausgabefelder auf eine Höhe von 130 Pixel eingestellt haben, und deshalb haben wir früher den gepunkteten Rahmen festgelegt. Wir können deutlich sehen, welcher Abschnitt welcher ist. Lassen Sie uns zu den Entwickler-Tools gehen und wir sollten auch in der Lage sein, diese CSS-Eigenschaft zu sehen. Wenn wir das Textausgabefeld auswählen, können wir innerhalb der p-Elemente sehen, haben wir den Stil auf eine CSS-Höhe von 130 Pixel gesetzt. So können wir mit unseren Requisiten arbeiten, die an die Komponente weitergegeben werden. Beachten Sie, dass dies in Ordnung ist, da wir den Wert der Requisite nicht direkt ändern. Wir verwenden nur den Prop-Wert und fügen ihn dann zu einem CSS-Objekt hinzu. 60. Einführung in Slots: Wir wissen jetzt, wie Daten von der übergeordneten Komponente zu der untergeordneten Komponente mit Requisiten analysiert werden. Wir können auch Daten an die untergeordnete Komponente mit einer Methode namens Slots übergeben. Slots werden für das, was als Inhaltsverteilung bezeichnet wird, verwendet. Oft müssen wir die übergeordnete und untergeordnete Komponente immer zufriedenstellend mischen. In unserer App bisher, wenn Sie auf die App.vue gehen, können wir sehen, dass wir den Header an der Spitze haben und dann darunter die dynamischen Komponenten Elemente haben. Wir haben unsere Komponenten nicht immer ordentlich übereinander gestapelt, wie wir es bisher in dieser App tun. Komponenten können ineinander verschachtelt werden, oder wir können sogar HTML-Inhalt zwischen den Komponenten öffnen und schließen Tag verschachteln. Angenommen, wir wollten, dass unsere Komponentenelemente innerhalb der Header-Komponente verschachtelt werden. Lassen Sie uns den nav-Header öffnen und dann, wenn wir den Inhalt der Komponente, einschließlich der Keep-Alive-Tags ausschneiden und dann einfügen. Wir haben jetzt eine Situation, in der die Dinge ein bisschen chaotisch werden. Die nav-header Komponente verfügt über eine eigene Vorlagendatei, ebenso wie die dynamische Komponente wie Konferenz. Wir brauchen eine Möglichkeit, Vue js mitzuteilen, wo innerhalb des nav-Headers unsere dynamischen Komponenten hinzugefügt werden. Diese Header-Datei hat ihre eigenen Vorlagen. Wird die dynamische Komponente also vor oder nach dieser Vorlage gerendert? Nun, das liegt eigentlich an uns. Dies ist, wo Slot kommen in. Slot ermöglichen es uns, die Verteilung dieser Inhalte zu steuern. Wir deklarieren einen Slot innerhalb der Vorlage, um den Inhalt innerhalb zu platzieren. Derzeit, wenn wir über den Browser jetzt, wir sehen nur die Kopfzeile an der Spitze und keine Anzeichen den Inhalt, die wir in der App verschachtelt haben. Nur hier. Sie sehen nur diesen Header-Abschnitt und sonst nichts. Um den verschachtelten Inhalt anzuzeigen, über in der Header.vue Datei, können wir das spezielle Slot-Element innerhalb der übergeordneten Vorlage hinzufügen. Direkt unter dem div-wrapper möchte ich den Schlitz, das Öffnen und Schließen Tag hinzufügen . Speichern Sie das. Dann können wir jetzt sehen, dass der Inhalt jetzt im Inneren platziert wird. Dies ist die dynamische Komponente, die an der Spitze ist und dann unten haben wir den Header. Dies liegt daran, dass wir einen Slot über dem Header-Abschnitt platziert haben, der hier ist. Wir können den Slot auch überall hinzufügen, wo wir wollen. Wir können das mit der Vorlage ausschneiden und es dann unter den Menü-Links hinzufügen und jetzt sehen wir, dass unsere App wieder normal ist. Wir beschränken uns nicht nur auf die Verschachtelung von Komponenten. Wir können auch HTML-Elemente innerhalb von Komponenten verschachteln. Lassen Sie uns zuerst unsere App wieder darauf zurückbringen, wie es war. Wenn wir diese Slots entfernen, dann über in App.vue, wenn wir die Komponenten außerhalb des Header-Abschnitts verschieben. Ich werde eine neue Fußzeilenkomponente erstellen und dann den Inhalt über Verschachtelung von HTML-Elementen an diese übergeben. Werfen wir einen Blick auf das in Aktion. Oben in den Komponenten, werden wir eine neue Datei hinzufügen. Dieses Mal werden wir außerhalb des aktuellen Abschnitts hinzufügen. Stellen Sie also sicher, dass dies neben der Header.vue ist. Dies ist die Footer.vue Datei. Ich habe dies außerhalb des Karten-Unterordners aufbewahrt, um nur kartenbezogene Komponenten darin zu halten. Lassen Sie uns unsere vertraute Vorlage hinzufügen. Wir brauchen ein Wurzelelement, um unseren Inhalt zu umgeben. Wir können das HTML-Datei-Fußzeilenelement anstelle eines div verwenden. Wie wir bereits wissen, müssen wir die Komponente importieren und registrieren , um sicherzustellen, dass diese verfügbar ist. In der App.vue Datei, lassen Sie uns das jetzt tun. Ich werde nur eine Importanweisung kopieren und dasselbe einfügen und dann in die Fußzeile ändern, auch für den Dateipfad. Stellen Sie sicher, dass dies nur Komponenten/Fußzeile ist, wir brauchen den Kartenordner nicht. Unten in den Komponenten können wir es durch ein Komma getrennt registrieren. Ich werde meinen CCFooter aufrufen, der eine Footer-Datei ist. Jetzt ist dies registriert, wir können auf die Vorlage noch in App.vue gehen. Direkt unter der kept-alive Komponente, gehen, um diese Elemente von ccFooter hinzuzufügen. Unsere Fußzeilenkomponente enthält derzeit keinen Inhalt in der Vorlage, daher werden wir keine Änderungen an der App sehen. Dies liegt daran, dass wir den Footer-Inhalt als verschachtelte HTML-Elemente innerhalb dieser Footer-Komponente hinzufügen . Anstatt unseren Inhalt in der Footer-Datei zu haben, können wir ihn zwischen diesen beiden Tags hinzufügen. Ich werde damit beginnen, einen Text von Creative Cards hinzuzufügen. Ich werde die HTML-Entität für das Copyright-Symbol hinzufügen, das das kaufmännische Und-Zeichen und eine Kopie mit einem Semikolon am Ende ist. Dann möchte ich eine Bootstrap-Klasse für ein Styling von Text-Center hinzufügen. Dort kommen wir an die Arbeit, indem wir einige nav Links hinzufügen. Öffnen Sie die Nav-Elemente und dort können wir unsere ungeordnete Liste erstellen. Ich werde einige Klassen zur ungeordneten Liste von nav hinzufügen und dann Content-Center rechtfertigen. Dann können wir einige Listenelemente hinzufügen. Ich werde nur zum Header gehen und eines dieser Listenelemente greifen, nur damit wir die Klassen konsistent halten und dies dann innerhalb der ul einfügen können. Wir haben die Klasse von Nav-Item. Wir haben den Link , der durch diesen Klick jetzt angezeigt wird. Die erste, die ich als Home hinzufügen werde und dann, wenn ich ein paar weitere Links hinzufüge, kopieren Sie das und fügen Sie es zwei weitere Male ein. Jetzt haben wir unsere drei Links. Der erste ist Zuhause. Die zweite, die ich werde zu Über uns ändern und dann den dritten und letzten Link, werde ich zu Kontaktieren Sie uns ändern und dann geben, dass eine speichern. Wenn wir zum Browser gehen und aktualisieren, sehen wir, dass keine Änderungen angewendet wurden. Aus unserem früheren Beispiel wissen wir, dass verschachtelte Inhalte nicht angezeigt werden. Wir müssen unser Slot-Element zur übergeordneten Komponente hinzufügen, die footer.vue ist, also lassen Sie uns dies hier hinzufügen. Mit dem hinzugefügten Slot-Element weiß Vue js jetzt, wo wir Inhalte verteilen möchten , die wir zwischen den Fußzeilen-Tags hinzugefügt haben. Stellen Sie sicher, dass das gespeichert ist und gehen Sie dann zum Browser, und dann unten unten haben wir unsere Fußzeileninhalte. Auf diese Weise können wir Slots verwenden, um Inhalte dort zu verteilen, wo sie erscheinen sollen. Dies ist ein grundlegender Blick auf die Verwendung von Slots. Es gibt noch ein paar weitere Dinge zu behandeln, wenn Sie diese verwenden, und wir werden uns diese im nächsten Video ansehen. 61. Slot Scope und Fallback-Inhalte: Wir gehen jetzt weiter, tiefer ein Schlitze zu schauen und mehr über sie zu verstehen. Im letzten Beispiel haben wir ein einzelnes Slot-Elemente in unseren Fußzeilenkomponenten verwendet. Wenn es nur ein einzelnes Slot-Elemente gibt, wie wir hier haben, der gesamte Inhalt, der zwischen den Komponenten-Tags hinzugefügt wurde, was all dies ist, innerhalb dieses Steckplatzes eingefügt werden. Oben in der Fußzeile können wir auch Inhalte zwischen den Slot-Elementen wie folgt hinzufügen. Also lassen Sie uns etwas Text innerhalb von hier hinzufügen. Alle Fußzeilentext, und das ist, was wir Fallback-Inhalt nennen. Wenn wir zum Browser gehen und zur Fußzeile scrollen, können wir sehen, dass der Text nicht unten in der Fußzeile angezeigt wird. Dies liegt daran, dass der Inhalt zwischen den Slot-Tags als Fallback-Inhalt betrachtet wird. Dies bedeutet, dass es nur angezeigt wird, wenn kein Inhalt eingefügt werden soll. Also für Kommentare die verschachtelten Elemente in den übergeordneten Komponenten, die app.vue ist. Kommentieren Sie diesen Abschnitt, bis zum schließenden nav tag. Es ist jetzt zurück in die Fußzeile und wir können sehen, dass wir den Fallback-Inhalt von Fußzeilen-Text-Schrägstriche zu langen Kommentaren haben . Dieser Abschnitt wieder raus. Dies ist nur etwas zu beachten, wenn der Inhalt nicht sofort verfügbar ist. Vielleicht möchten wir es zum Beispiel mit Visual verwenden, und wir könnten den Fallback-Inhalt zeigen, bis visuell wahr wird. Eine weitere Überlegung ist der Umfang des Inhalts. Derzeit haben wir einen nav Abschnitt innerhalb der Fußzeile, die verschachtelt ist. Ist der gesamte Code in hier in den Eltern oder im Kind-Bereich kompiliert? Nun, schauen wir uns mal an und finden es heraus. Nehmen wir an, unsere kreativen Karten Texte in der Fußzeile, die gerade oben hier ist, waren dynamisch. Anstatt diesen Abschnitt hier zu haben, wenn dies dynamisch war, hätten wir eine Dateneigenschaft wie AppName, würde diese AppName-Dateneigenschaft im Skriptabschnitt der übergeordneten oder untergeordneten Komponenten wiederhergestellt ? Nun, die Antwort ist innerhalb der übergeordneten Komponenten. Wenn wir zum Skriptabschnitt gehen, und innerhalb des Datenabschnitts, lassen Sie uns unseren AppName hinzufügen. Ich habe das so eingestellt, Creative Cards. Gehen Sie zum Browser, wir sehen, dass die kreativen Karten unten unten erschienen sind, und die dort eine zusätzliche Kalibrierung bekommen, also lassen Sie uns das entfernen. Wir sehen jetzt den Browser, dass der Text in der Fußzeile angezeigt wird. Wir können jetzt sehen, dass der AppName innerhalb des übergeordneten Abschnitts funktioniert. Wenn wir jedoch versuchen, diese Dateneigenschaft über in die Fußzeile zu verschieben. Lassen Sie uns AppName entfernen und dann wollen wir nur diesen Datenabschnitt kopieren und fügen Sie diese innerhalb der Fußzeile. Fügen Sie also die Skript-Tags, die Exportvorgaben hinzu und fügen Sie dann in unseren Datenbereich ein. Hier können wir unseren AppName als eine Reihe von hinzufügen, „Creative Cards“. Also speichern Sie das und gehen wir zurück zur App, und wir können sehen, dass der Text nicht mehr erscheint. Wir können sehen, dass der Bereich innerhalb der übergeordneten app.vue Datei ist. Lassen Sie uns einfach das Skript-Tag aus der Fußzeile entfernen und dies wieder in die app.vue hinzufügen. Alles innerhalb der Eltern ist also einfach innerhalb des übergeordneten Bereichs. Alles innerhalb der untergeordneten Komponenten befindet sich innerhalb des untergeordneten Bereichs. Solche nur ein paar Dinge, über die man bei der Verwendung von Slots nachdenken muss. Als Nächstes werden wir einen Blick auf die Verwendung von Namens-Slots werfen. 62. Benannte Slots: Bisher haben wir nur ein einzelnes Slot-Elemente verwendet. Dieser einzelne Slot, wie er ist, wird verwendet, um den gesamten Inhalt Abschnitt zu erhalten , den wir an ihn übergeben. Wie der gesamte Abschnitt zwischen der Fußzeile hier. Als Randnotiz, wenn keine Slot-Elementpräsenz vorhanden war. Wenn wir es auskommentieren oder den Slot-Abschnitt verschieben und speichern, wenn wir zum Browser gehen, sehen wir den gesamten Inhalt, der an ihn übergeben wird. Als Nächstes innerhalb der übergeordneten Komponenten wird verworfen. Lassen Sie uns einfach diesen Slot-Abschnitt rückgängig machen und diese wieder in. Anstatt nur einen einzigen Slot zu verwenden, um den vollständigen Inhalt zu akzeptieren. Wir könnten auch ein oder mehrere Slot-Elemente mit einem speziellen Namen Attribute verwenden. Innerhalb der footer.vue können wir ein name-Attribut zu unserem Slot hinzufügen. Dies ist der Name unserer Wahl, jemandes Name, dieser App-Name. Jetzt können wir zu den übergeordneten Komponenten gehen und seinen Namen mit dem Inhalt übereinstimmen , den wir mit dem Slot-Attribut an ihn übergeben möchten. Der App-Name-Abschnitt , der oben oben hier ist. Ich werde ein Attribut innerhalb des Eröffnungsteils hinzufügen. An den Slot-Attribute und kommt Übereinstimmungen mit dem Ausgabeslot mit dem Namen, den Sie gerade gab es alle „app-name“. Mal sehen, wie das aussieht. Jetzt unten unten wird nur der App-Name in der Fußzeile angezeigt , da wir nur diesen Inhalt verteilt haben. Ich werde das Copyright-Symbol kurz vor einer dynamischen Daten hinzufügen, also und signieren Kopie und das Semikolon, und dann werden wir das Copyright-Symbol wieder auf dem Bildschirm sehen. Wie Sie sehen können, verschwinden der Rest der Elemente. Wir haben nicht mehr die genug Links. Damit der Rest davon angezeigt wird, haben wir ein paar Optionen. Zuerst können wir weiterhin weitere Slots hinzufügen. Auch mit den Namensattributen, wie wir es hier getan haben. Oder wir können den ganzen Rest des eigenen Namens Inhalt fangen und verteilen es auf Slot-Element invertieren, diesmal ohne Namensattribut. Wenn Sie den Fußzeilentext entfernen. Ich bringe das dort auf, und wir können auch ein zweites Slot-Element hinzufügen, genau wie zuvor gemacht, aber ohne Namensattribute, und jetzt, wenn wir zum Browser gehen, sollten wir sehen, dass der Rest des Fußzeileninhalts erscheint. Jetzt haben wir unseren Text, der der Name Slots ist. Dann werden alle zusätzlichen Inhalte, die Navigationslinks sind, jetzt durch unsere unbenannten Slot-Elemente gerendert. Dies ist ein einfacher Fall der Verteilung von Inhalten mit Slots. Wenn unsere Fußzeile mehr HTML-Code erlaubt hatte, verwendet Slots, um Inhalte genau dort zu platzieren, wo wir wollten, ist wirklich nützliches Werkzeug zu haben. 63. Abschnittsoutro: Einführung in Komponenten: Hi. Es ist wieder Chris. Ich möchte in diesem Stadium nur eine kurze Verschnaufpause machen. Wir haben bereits viele Gründe besprochen und viel über Komponenten gelernt, und wie sie miteinander kommunizieren können. Auch unser Projekt kommt jetzt gut zusammen, aber wir haben noch viele Funktionen und Verbesserungen im nächsten Abschnitt hinzuzufügen, wie zum Beispiel Firebase zum Speichern unserer Bilder zu verwenden, und auch Benutzern erlauben, den Stil des Textes festzulegen. Ich werde Sie im nächsten Abschnitt sehen, wo Sie am Ende eine vollständige voll funktionsfähige Grußkarte Anwendung haben. 64. Abschnittseinführung: Mehr zu Komponenten und Firebase Storage: Willkommen in diesem brandneuen Abschnitt, in dem wir weiterhin mit Komponenten arbeiten werden. Wir werden auch mit Firebase integrieren, um unsere hochgeladenen Bilder zu speichern. Es gibt auch viele Verbesserungen an unserer App zu machen, wie es Benutzern erlaubt, Texte auf der Karte zu stylen, und auch die Bilder ziehbar zu machen und neu zu positionieren. Wir werden auch einige neue Dinge lernen, wie die Verwendung des eventbus und auch das Hinzufügen von Mixins. diesem Abschnitt gibt es viel zu durchstehen. Also lasst uns anfangen. 65. So richtest du Firebase ein: In diesem Abschnitt werden wir mit unserer App fortfahren und den Benutzern erlauben , Bilder hochzuladen, die auf der Karte angezeigt werden. Diese Bilder müssen irgendwo gespeichert werden. Dafür werde ich Firebase verwenden, die Teil von Google ist. Wir verwenden eine der Firebase-Funktionen, nämlich Speicher. Obwohl es für viel mehr verwendet werden kann, einschließlich Datenbanken und Authentifizierung für Plattformen wie iOS, Android und Web. Wenn Sie zum Webbrowser gehen und zu Google gehen, lassen Sie uns eine Suche nach Firebase machen. Aktueller Zugriff auf Firebase auf firebase.google.com, was das Top-Ergebnis ist. Firebase ist kostenlos zu verwenden und verfügt über großzügige Nutzungsbeschränkungen, mit denen Sie testen können. Es gibt Preispläne, aber Sie werden diese nur benötigen, wenn Ihre App wächst, um diese zu erfordern. Wenn Sie mehr über Firebase erfahren möchten, schauen Sie sich diese Website an, und dann werde ich beginnen, indem ich auf die Konsole übergehe. Möglicherweise müssen Sie sich zuerst bei Google anmelden, um zu dieser Phase zu gelangen. Daher habe ich mich mit Ihrem Google-Konto angemeldet. Wenn Sie einen haben, wenn nicht, ist es einfach, einen einzurichten. Folgen Sie einfach zusammen mit den Anweisungen, und klicken Sie dann auf Gehe zur Konsole. Also, sobald Sie auf den Bildschirm gebracht werden, können wir auf Projekte hinzufügen klicken, und fügen Sie dann einen Projektnamen, Ich werde meine Creative Cards App anrufen, und wählen Sie dann Ihr Land, klicken Sie auf Projekt erstellen, und Geben Sie ihnen einfach einen Moment zum Einrichten. Dann werden wir zu einem Willkommensbildschirm gebracht, und als Nebenanmerk haben Websites wie diese die Gewohnheit, Layouts im Laufe der Zeit zu ändern . Wenn Ihre Version also ein wenig anders aussieht als meine, keine Sorge, es bedeutet nur normalerweise eine Schaltfläche oder ein Menü-Link verschoben wurde, funktionieren beide Dinge im Allgemeinen gleich. Dann, um loszulegen, können wir entweder unser Projekt zu iOS, Android oder Web hinzufügen , so dass wir auf Hinzufügen Firebase zu Ihrer Web-App. Wir kopieren irgendwie den vollständigen Satz von Code, aber ich werde es nicht tun, weil dies ein Skript-Tag für Firebase enthält, und ich werde Firebase als npm-Paket hinzufügen, also brauchen wir diesen Abschnitt nicht. Alles, was wir brauchen, ist der initialisierte Abschnitt aus dem zweiten Skript, also kopieren wir diesen Abschnitt ohne die Skript-Tags, und dann, wenn wir zurück zu unserer App gehen. Wir werden eine neue Datei in unseren Projekten erstellen, und diese Datei wird den ganzen Firebase-Setup-Code enthalten. Ich werde diese Firebase Config aufrufen, und dies wird in der Wurzel unserer Quelle erstellt werden. Öffnen Sie also eine neue Datei namens firebaseConfig.js, in der leeren Datei können wir die Initialisierung einfügen , die wir gerade aus Firebase kopiert haben, und speichern Sie diese. Dies sind also die Abschnitte, die wir brauchen, um Firebase zu verwenden, es enthält unseren eindeutigen API-Schlüssel. Firebase weiß also, wer auf die Informationen zugreift, zusammen mit Links zum Standort unserer Projekte. Dann müssen wir das Firebase-Paket mit dem Node Package Manager zu unserem Projekt hinzufügen. Wenn Sie das Terminal öffnen, stellen Sie sicher, dass Sie sich im Projektordner befinden, wenn Sie eine separate Konsole verwenden. Wenn Sie Visual Studio Code verwenden, gehen Sie einfach nach unten, und stellen Sie sicher, dass der Server durch Drücken von Control C geschlossen wird, dann können wir Firebase installieren, indem Sie npm installieren Bindestrich, Bindestrich, speichern, um zu speichern ist als Abhängigkeit, und der Name des Pakets ist einfach Firebase, und drücken Sie die Eingabetaste. Dann geben Sie das einfach ein paar Momente zu installieren, es sollte nicht zu lange dauern. Sobald es fertig ist, können wir zu der package.json-Datei gehen, und wir sehen jetzt innerhalb des Abhängigkeiten Objekt, haben wir Firebase neben Ansicht. Das erste, was wir jetzt tun müssen, ist Firebase in die firebase.config-Datei zu importieren . Also oben können wir Firebase aus Firebase importieren, und denken Sie daran, dass wir nicht den vollständigen Dateipfad zu Firebase hinzufügen müssen , wenn es sich um ein Node-Modul handelt. Ich verwende gerne einen Großbuchstaben für den Modulnamen, also werde ich diesen einfach unten ändern, um übereinzustimmen. Jetzt haben wir auch unsere Einstellungsdatei, öffnen Sie es, um dies in die Wurzel unseres Projekts hinzuzufügen, die App.vue ist. Scrollen Sie nach unten zu den Skript-Tags, und dann können wir diesen Abschnitt importieren, so importieren Sie FireBaseConfig, so ist dies. /FirebaseConfig.js. Um sicherzustellen, dass alles in Ordnung ist, wird es wahrscheinlich sinnvoll, jetzt den Dienst zu starten Gehen Sie also zum Terminal und führen Sie npm aus, führen Sie dev aus. Dann können wir in das Projekt gehen, und wir können die Konsole öffnen. Also klicken Sie mit der rechten Maustaste und überprüfen. Wenn Sie in die Konsole gehen und Sie keine roten Pfeile haben, ist dies ein gutes Zeichen dafür, dass alles in Ordnung ist. Wenn Sie irgendwelche roten Pfeile haben, stellen Sie sicher, dass Sie zurückgehen und diese beheben, bevor Sie weitermachen. Dies ist alles, was wir jetzt brauchen, um Firebase zu unserer App hinzuzufügen. Es macht im Moment nichts, aber im nächsten Video schauen wir uns das Erstellen des Bildes an, laden Komponenten hoch, um Bilder zurück zu Firebase zu schieben. 66. So erstellst du die ImageUpload-Komponente: Hoffentlich sollten Sie Firebase jetzt in Ihrer App ohne Konsolenfehler initialisiert haben. Wenn Sie dies tun, können Sie das Bild mit Fließkomponenten erstellen. Diese Komponente wird dafür verantwortlich sein, ein paar Dinge zu tun. Sie haben eine HTML-Dateieingabe, damit Benutzer ein Bild aus einem System auswählen können. Sie werden auch das ausgewählte Bild an Firebase übertragen. Sie haben einen Fortschrittsbalken, um den Fortschritt des Uploads auf Firebase anzuzeigen. Es handelt sich um ein Miniaturbild für die Bildvorschau. Haben Sie auch einen Bone, um dann zu bestätigen, dass wir dieses ausgewählte Bild verwenden möchten. Schließlich wird es den Namen des Bildes ausgeben, das an die übergeordneten Komponenten ausgewählt wurde. Später wird dieser Image-Name an die Bildausgabekomponente übergeben , um die Datei von Firebase herunterzuladen. Beginnen wir mit dem Erstellen der Komponenten. Also geh zurück zu den Projekten. dann innerhalb des Kartenordners Lassen Sie unsdann innerhalb des Kartenordnerseine neue Datei namens Bild-Upload erstellen. Mit der Punktansicht-Erweiterung verwendet die Komponente zunächst die Karte aus der Datei. Gehen wir rüber zur Kartenfront und importieren und registrieren Sie es. Unten im Skript werden wir die Importanweisungen kopieren und dann in den Bild-Upload ändern. Dasselbe mit dem Dateipfad. Dann registrierte dies unten unten als Komponenten. Irgendwo kombinieren CCImageUpload. Jetzt können wir die Komponenten als Element einfügen, wo immer wir wollen. Ich möchte meins direkt nach dem ersten Textfeld platzieren. Führen Sie einen Bildlauf nach oben zu den Vorlagen durch. Kurz nach diesen ersten cc-Text-Eingaben werde ich CCImageUpload und das schließende Tag hinzufügen. Ich werde auch eine horizontale Linie hinzufügen, nur um diese getrennt zu halten. Dann speichern Sie das. Jetzt können wir einige HTML-Inhalte innerhalb der Komponentendatei hinzufügen. Gehen wir zurück zum Bild upload.view, und wir können unsere Vorlagen hinzufügen. Wieder, mit unserem umgebenden Container , der unser div ist, und lassen Sie uns einige Bootstrap-Klassen für das Styling hinzufügen. Dies wird eine Reihe sein, und lassen Sie uns innerhalb dieses div können wir ein zweites div hinzufügen, das die Klasse von col-sm-12 haben wird, um dies die volle Breite zu machen. Dann möchten wir h4 mit einem Text des Upload-Bildes hinzufügen. Dies wird am oberen Rand des Upload-Abschnitts angezeigt. Sie können genau sehen, in welchem Abschnitt sie sich befinden. Dann möchten wir ein weiteres div hinzufügen, das für das Formular sein wird. Dieses div wird eine Bootstrap-Klasse der Formulargruppe haben. Dann im Inneren können wir unsere Dateieingaben hinzufügen. Dies ist der Bereich, in dem wir eine Datei von allen Systemen auswählen können, um auf Firebase hochzuladen. Der Eingabetyp ist der Datei, wir werden einige Stile des Formulars hinzufügen, Steuerdatei, wird auch die ID benötigen, die wir später der Datei-Upload verwenden. Nach diesem Abschnitt werden wir ein break-Tag hinzufügen. Fügen Sie einfach etwas Platz hinzu. Dann können wir hinzufügen, um unsere Bildelemente hinzuzufügen. Ich werde diesem einen Bildausweis geben. Was ist die Bildquelle leer? Weil wir das später mit JavaScript hatten und wir werden das im nächsten Video tun. Dies ist effektiv ein leeres Element, bis ein Bild mit der Eingabe ausgewählt wurde. Dann können wir endlich eine Schaltfläche am unteren Rand hinzufügen. Diese Schaltfläche wird verwendet, um das Bild zu setzen. Sobald der Benutzer die Vorschau sehen kann, wird diese Schaltfläche dann auf das Bild der Firebase drücken. Lassen Sie uns einen Typ hinzufügen, eine Schaltfläche Typ der Schaltfläche und auch eine ID, die wir später von Set Image Button verwenden werden. Dann können wir die Skript-Tags addieren. Jetzt keine Exportvorgaben. Kern war nur für den Moment leer. Dann schließlich unsere Style-Tags, um diese Vorlagen zu beenden. Nun, wenn wir das speichern und zum Browser gehen, wenn wir keine Fehler sehen, sollten wir jetzt die neuen Komponenten auf dem Bildschirm sehen. Wir haben den Rand für Titel, wir haben den Bild-Upload-Bereich , auf den wir klicken und ein Bild von einer Maschine auswählen können. Wir haben auch die Schaltfläche „Bild einstellen“. Das funktioniert alles gut. Wenn Sie die Komponenten nicht sehen oder einen leeren Bildschirm haben, überprüfen Sie den Aufruf auf Fehler und überprüfen Sie auch das Terminal und die Konsole auf Hinweise, wo der Fehler liegen könnte. Dies ist jetzt die grundlegende Komponenten-Setup. Als Nächstes werden wir mit diesen Komponenten fortfahren, um die Miniaturansicht des Bilds anzuzeigen und auch das ausgewählte Bild auf Firebase zu übertragen. 67. So lädst du Bilder auf Firebase hoch: Wir haben nun die Schaltfläche „Komponente“ eingerichtet , mit der der Benutzer eine Datei aus seinem System auswählen kann. Wir müssen dieses Image auch zur Speicherung an Firebase senden. Diese Funktionalität kann zu einer Methode hinzugefügt werden , die aufgerufen wird, wenn die Dateieingabe ausgelöst wird. Wir können dies mit einem onchange Ereignishandler erkennen. Fügen wir dies in unserer Vorlage für den Bild-Upload hinzu. Wenn Sie die Dateieingaben finden, werden wir einen onchange Ereignishandler hinzufügen. Verwenden Sie also die at change und ich werde dies auf eine Methode namens UploadFile setzen. Jetzt können wir zum Skript gehen und unsere Daten und erforderlichen Methoden einrichten. Innerhalb des Exportstandards können wir unsere Dateneigenschaft nur auf die übliche Weise hinzufügen, und in der Dateneigenschaft ist das, was ich einrichten werde, für den Dateinamen. Anfangs wird dies eine leere Zeichenfolge sein, bis der Benutzer ein Bild hochlädt. Dann unterhalb dieses Datenabschnitts können wir unsere Methoden einrichten, die wir gerade UploadFile genannt haben. Also richten Sie die Methoden ein und fügen Sie dann unseren Methodennamen UploadFile hinzu. Da es sich um ein Ereignis handelt, haben wir Zugriff auf die Ereignisdaten, indem wir einen Namen innerhalb der Klammern übergeben. Dies kann ein Name Ihrer Wahl sein, aber ich werde diesen Namen Ereignis nennen. Zu Beginn möchten wir die ausgewählte Datei erfassen und an unsere Dateidateneigenschaft übergeben. Lassen Sie uns ein Konsolenprotokoll machen, und dann können wir den Wert der Ereignisse protokollieren und sehen, wie wir diese Datei Daten von diesem Ereignis greifen können. Speichern Sie das, und wenn wir dann zur Konsole gehen, klicken Sie mit der rechten Maustaste auf Inspect und gehen Sie dann zur Konsole. Ich werde eine Datei mit unserem Datei-Upload-Bereich hochladen. Um diesem Teil folgen zu können, müssen Sie ein Bild finden Wenn Sie noch kein Bild auf Ihrem Computer gespeichert haben, gibt es viele kostenlose Websites zur Verfügung, auf denen Sie ein Bild herunterladen können. Ich habe eine auf dem Desktop gespeichert, also gehe ich zum Desktop und klicke auf Beach.JPEG, und klicke dann auf „Öffnen“. Nichts passiert noch in der App, was in Ordnung ist. Aber in der Konsole haben wir den Wert des Ereignisses. Im Inneren können Sie sehen, dass wir die Ziele haben, die wir öffnen können, und wenn wir dann nach unten scrollen, müssen wir nach unserer Liste der Dateien suchen, dann öffnen Sie diese. Wenn Sie auf Null klicken, die das erste Element ist, können wir die Details der Datei sehen, die wir gerade hochgeladen haben. Wir können Dinge wie den Namen, die Größe und auch die Art des Bildes sehen. Wir laden nur jeweils ein Bild hoch, damit wir immer die Position Null verwenden können. Jetzt wissen wir, wo die Dateidaten gespeichert sind, können wir sie an unsere Dateidateneigenschaft übergeben. Gehen wir zu der Methode und entfernen Sie das Konsolenprotokoll. Jetzt können wir diese Punktdatei auswählen, die unsere Daten sind, und wir werden dies gleich der event.target.files setzen, und dann, wie wir gerade gesehen haben, müssen wir Position Null auswählen. Um dies auf Firebase zu übertragen, müssen wir eine Firebase-Speicherreferenz hinzufügen. Diese Referenz ist der Speicherort innerhalb der Firebase, wo Sie unsere Dateien hinzufügen möchten. Wir richten die Speicherreferenz so ein. Lassen Sie uns Firebase.Storage.ref wählen. Da wir uns auf die Speicher- und Ref-Methoden beziehen , die Teile des Firebase-Moduls sind, müssen wir auch Firebase in die Datei importieren. Lassen Sie uns dies am Anfang des Skripts tun. Importieren Sie Firebase also aus Firebase. Unten in der Ref werden wir zwei Dinge tun. Zuerst weisen wir Firebase den Ordnernamen an, in dem die Bilder gespeichert werden sollen. Wenn der Ordner derzeit nicht vorhanden ist, wird er erstellt. Dies ist das erste Argument, das als String übergeben wird. Lassen Sie uns eine neue Datei namens user_uploads erstellen, gefolgt von dem Schrägstrich. Wir können dann den Dateipfad danach hinzufügen. Wir fügen am Ende dieses Filename hinzu , den wir derzeit als Dateneigenschaft haben. Wir werden am Ende this.file.name hinzufügen. Dieser Ordnername plus dieser Dateiname erstellt den Dateipfad, um das Bild in einer Firebase zu speichern. Wir können dann diese Codezeile in einer Variablen namens StorageRef installieren. Jetzt haben wir die Speicherreferenz. Wir können die Firebase Put-Methode aufrufen, um das Bild tatsächlich auf Firebase hochzuladen. Das Bild, das Sie hinzufügen möchten, ist diese.file. Jetzt ist das Setup, wir können voran gehen und das testen. Wenn wir zurück zur Firebase-Konsole gehen. Gehen Sie zu Firebase und klicken Sie dann auf die Konsole, um zu dieser Seite weitergeleitet zu werden. Wählen Sie die Creative Cards App, und dann auf der linken Seite sollten wir die Speicheroption sehen, klicken Sie darauf. Dies ist der Inhalt unseres Speichers. Derzeit sind hier keine Bilder aufgelistet, also lasst uns das mal ausprobieren. Wenn wir zu unserer App gehen, können wir versuchen, ein Bild in diesen Ordner zu schieben. Wählen Sie den Bild-Upload aus, wählen Sie das Bild aus und klicken Sie auf Öffnen. Dann gehen wir zurück zu Firebase und aktualisieren. Wir können nach der Aktualisierung sehen, dass nichts passiert. Wir haben immer noch keine Bilder im Speicher aufgelistet. Wenn wir zurück zur App gehen und die Konsole öffnen, und lassen Sie uns sehen, was hier passiert. Wir können sehen, dass wir einen Fehler in der Konsole haben. Der Grund, warum wir diesen Fehler erhalten, ist, dass Firebase-Sicherheit standardmäßig eine Authentifizierung erfordert. Für die Zwecke dieser Demonstration werde ich dies nur für unser Beispiel deaktivieren, damit wir uns auf view js konzentrieren können. Natürlich sollten wir das für Apps auf Produktionsebene nicht tun. Um die Regeln öffentlich festzulegen, müssen wir auf die Registerkarte Regeln gehen und dies ändern. Wählen Sie Regeln innerhalb des Speicherabschnitts aus, und dann müssen wir den Schreibabschnitt ändern, und dann müssen wir dies ändern, um lesen und auch schreiben zu können. Löschen Sie dies und lassen Sie einfach lesen, schreiben, und klicken Sie dann auf „Veröffentlichen“. Okay, jetzt gehen wir zu unserer App und dann aktualisieren, und wählen Sie dann Neue Datei. Ich wähle das Strandbild erneut aus und klicke auf „Öffnen“. Das ist ein gutes Zeichen, wir sehen keine Fehlermeldungen in der Konsole. Gehen wir rüber und gehen dann zu den Akten. Ok, großartig. Jetzt können wir sehen, dass ein neuer Ordner hinzugefügt wurde namens useruploads. Dies ist die Datei, die wir innerhalb unserer Speicherreferenz hinzugefügt haben, und dann können wir wieder zu Firebase gehen und diesen Ordner öffnen. Jetzt sehen wir auch, dass wir die Datei von Beach.JPEG hinzugefügt haben. Wenn dies für Sie nicht sofort funktioniert hat, müssen Sie es möglicherweise nur ein paar Augenblicke geben, damit die neuen Einstellungen wirksam werden. Herzlichen Glückwunsch, wenn Sie es geschafft haben, auf die Bühne zu kommen. Dies ist ein großer Teil unserer App, um die wir gekümmert haben. Jetzt gehen wir zum nächsten Video über, wir fügen eine Miniaturansicht der Bildvorschau hinzu, damit der Benutzer sehen kann, welches Bild er ausgewählt hat. 68. Bildvorschau: Wir machen gute Fortschritte mit unserer Grußkarte. Der nächste Schritt, den wir machen wollen, ist die Bilddateidaten, die wir jetzt erhalten, gespeichert in der Dateidateneigenschaft, die gerade hier ist, und zeigen Sie sie in einer Bildvorschau auf dem Bildschirm. Um dies zu tun, werden wir die Vorteile der JavaScript-Dateileser-Objekt zu nehmen. Wir werden File Reader verwenden, um den Inhalt der Bilddatei zu lesen, die wir bereitgestellt haben. Wir werden dann die Ergebnisse der Ereignisse an unser Image-Tag als Quellattribut im Inneren übergeben . Werfen wir einen Blick darauf, wie wir es verwenden können. Wir werden dies innerhalb unserer Upload-Dateimethode hinzufügen. Stellen Sie also sicher, dass dies innerhalb der Codebasis liegt. Dies bedeutet also, dass dies jedes Mal ausgelöst wird, wenn eine Datei hochgeladen wurde. Um ein neu konstruiertes Datei-Leseobjekt erstellen zu können, installieren Sie es in einer Variablen namens reader. Das ist also ein neuer FileReader. Dann innerhalb dieser Variablen können wir auf eine neue Methode namens ReadAsDataURL zugreifen. Diese Methode liest den Inhalt der Datei, in der wir an sie übergeben. Die Datei, die wir lesen möchten, ist also dieses Datumsobjekt hier, das Sie mit dieser Punktdatei zugreifen können. Die Ereignishandler von A und onload, die auch verwenden könnte. Also reader.onload. Dieses onload-Ereignis löst eine Funktion aus. Jedes Mal, wenn der Lesevorgang erfolgreich abgeschlossen ist, wird diese Funktion in das Ereignis als Parameter nehmen, der die Dateidaten enthält. Dieses Mal rief ich das Ereignis E Verwechseln Sie es nicht mit dem Ereignisnamen, den wir zuvor verwendet haben. Also hier werden gute Orte an der Bildquelle sein, wo wir das Thumbnail anzeigen möchten. Wir haben bereits das Image-Tag innerhalb unserer Vorlagen, die Sie gerade hier, die keine Quellattribute hat. In Augenblicken. Wir können es durch die ID des Bildes auswählen und die Bildspeicher so einstellen , dass sie den Ereignissen Zielergebnissen entsprechen. Also zurück nach unten, können wir dieses Bild mit JavaScript auswählen. Also documents.getElementById, und ID gaben wir das Bild oder einfach Bild, und wir können Punktquelle verwenden, um die Quelle gleich diesen Ereignissen zu setzen. Tun Sie das also mit e.target.result. Um die Dinge zu beenden, können wir diesem Bild eine maximale Breite hinzufügen , um sicherzustellen, dass große Bilder nicht mit unserem Layout verwirren. Also innerhalb der gleichen Datei werde ich zu den Startups gehen, und dieses Mal wird es Bereich sein, also gilt nur für dieses Finale. Wir können dann das Bild ausrichten und dann die maximale Breite des Bildes auf 200 Pixel einstellen. Das sollte also alles sein, was wir jetzt tun müssen. Wählen Sie den Server starten, wenn er nicht bereits mit npm ausgeführt wird, führen Sie dev aus. Sobald es geöffnet wird, sollten wir in der Lage sein, ein Dateibild auszuwählen und als Vorschau erscheinen zu sehen. Jemand wählt noch einmal mein Strandbild aus und öffnet es. Ok, großartig. Jetzt funktioniert der Dateileser und wir können die Bildvorschau sehen , die auf dem Bildschirm angezeigt wird, indem Sie die Bildquelle einstellen. Als nächstes fügen wir eine Bild-Upload-Fortschrittsleiste und machen diese Dateidaten auch an die Eltern. 69. Lade FortschrittsBalken und $emit Dateidaten hoch: Wir können nun ein Bild vom Benutzercomputer auswählen und dieses erfolgreich auf Firebase hochladen. Außerdem haben wir eine kleine Bildvorschau unter dem Dateileser gerade hier. Ich möchte zwei Dinge in diesem Video machen. Erstellen Sie zunächst einen HTML-Fortschrittsbalken, um dem Benutzer den Fortschritt des Bild-Uploads auf Firebase anzuzeigen . Diesen Upload-Fortschritt zu verfolgen, wird später wichtig sein. Dann wollen wir den Namen der Datei an die übergeordnete Komponente ausgeben. Dies ist auch wichtig, denn wenn wir die Komponenten erstellen , um das Bild auf der Karte dort anzuzeigen, müssen wir den Namen des Bildes über Requisiten an ihn übergeben. Wir können das richtige Bild von Firebase herunterladen. Wir beginnen innerhalb der Bild-Upload-Datei indem Sie die HML-Fortschrittselemente in den Vorlagen hinzufügen. Ich werde es direkt über dem Break-Tag hinzufügen. Fügen Sie einen Fortschrittsbalken hinzu. Dann werden wir hier drinnen den Anfangswert auf Null setzen. Dies ist der Ausgangspunkt für den Fortschrittsbalken. Weil wir in Prozent arbeiten wollen, wir den Maximalwert auf 100 setzen. Sie können auch eine ID des Fortschrittsbalkens hinzufügen. Dies ermöglicht es uns, diese Elemente später mit JavaScript auszuwählen. Damit dies funktioniert, müssen wir dann einen Status geänderten Ereignishandler für die Put-Methode erstellen , die wir bereits haben. Wir scrollen zurück zur Upload-Dateimethode. Wir haben eine [unhörbare] Methode gerade hier, die ich in einer Variablen speichern werde, damit wir mit dem Namen Upload darauf zugreifen können. Wir werden diese Variable verwenden, um die Status geänderten Ereignisse mit einem Zustandsänderungsbeobachter zu überwachen , der von Firebase bereitgestellt wird. Immer noch innerhalb dieser Upload-Datei-Methode, werden wir diesen Beobachter hinzufügen. Ich werde dies nur unter der Funktion reader.onload hinzufügen. Wir können mit diesem Upload-Variablennamen darauf zugreifen , den Sie ihm gerade gegeben haben, so weiter. Dann ist der erste Parameter Zustand geändert Alarm. Dies wird von Firebase zur Verfügung gestellt. Dies wird jedes Mal ausgelöst, wenn eine Zustandsänderung eingetreten ist. Dies ruft eine Funktion auf. Diese Funktion nimmt die Task-Snapshots auf. Dies ist ein Objekt, das von Firebase bereitgestellt wird. Der Snapshot enthält Eigenschaften, die wir verwenden können, um den Upload zu überwachen. In unserem Fall werden wir die übertragenen Bytes und die Gesamtbyte-Eigenschaften verwenden , um den Prozentsatz des Fortschritts zu erstellen. Dann können wir diesen Prozentsatz in einer Variablen speichern. Ich werde diese Variable Progress nennen. Wir greifen auf die Schnappschüsse zu. Die Eigenschaft wird Bytes übertragen. Dies ist die Anzahl der Bytes, die derzeit übertragen werden geteilt durch die snapshots.TotalBytes. Dies ist die Gesamtzahl der Bytes aus der Datei. Machen wir das zu einem Prozentsatz. Wir multiplizieren dies mit 100. Dies gibt uns einen Wert zwischen Null und 100 und speichert ihn in einer Variablen namens Progress. Jetzt haben wir diesen Upload-Wert als Prozentsatz. Wir können diese Informationen dann an den Fortschrittsbalken senden, um sie zu aktualisieren. Um dies zu tun, wissen Sie nur, dass es variabel ist, ich werde auf die Fortschrittsleiste mit einem document.getElementById zugreifen. Wir erhalten den Fortschrittsbalken oder eine ID oder Fortschrittsbalken an diesem Ende der Zeichenfolge. Dann möchte ich nur den Wert so einstellen, dass er dieser Fortschrittsvariablen entspricht , usw. Nun gehen wir zum Browser und überprüfen, ob dies funktioniert. Wir können alle Fortschrittselemente sehen. Wählen wir nun eine Datei aus dem Uploader und wählen Sie Öffnen. So besänftigt, wir arbeiten gut. Wir sehen, dass die Upload-Statusänderung in einem Fortschrittsbalken verursacht wird , um zu erhöhen. Das sieht vorerst alles gut aus. Großartig. Dies ist der erste Teil abgeschlossen. Wir brauchen gerade eine solche der Emit-Methode, genau wie wir es zuvor mit den Textkomponenten getan haben. Dadurch wird der Name des ausgewählten Images an die übergeordneten Komponenten gesendet. Machen wir sie jetzt. Eigentlich füge ich zuerst einfach einen Kommentar hinzu. Dies war die festgelegte Antwort auf, Abschnitt ist mit Kommentaren nur so lassen Sie uns für später erstellen. Dies kann [unhörbar] sein. Dies ist für den Fortschrittsbalken. Scrollen Sie nun unter diesem Fortschrittsbalkenabschnitt. Wir werden diese $emits hinzufügen, um den Namen des Bildes an die Eltern zu senden. Ich werde dieses benutzerdefinierte Ereignis anzeigen Bild geändert aufrufen. Die Daten, die wir senden möchten, ist wiederum diese.file, das sind diese Daten hier. Dann können wir auf den Namen einer Datei mit.name zugreifen. Dieser Dateiname wird nun an die übergeordnete Datei gesendet, die carfront.view ist. Muss nun zu dieser Datei gehen und eine neue Dateneigenschaft hinzufügen , in der der Name dieses Bildes gespeichert werden soll. Unten innerhalb des Datenabschnitts, durch Komma getrennt, können wir unseren Bildnamen hinzufügen. Dies wird zunächst eine leere Zeichenfolge sein. Wenn ich nach den Ereignissen auf der tatsächlichen Komponente hören muss, in der es übergeben wird, muss ich nach dem CC-Image Upload des Bilds suchen und dann auf die Ereignisse hören. Das Ereignis hieß „Bild geändert anzeigen“. Wir können nun den Bildnamen auf den Wert der Ereignisse setzen. Der Name des Bildes entspricht $events. Das ist alles etwas, was wir vorher getan haben. Es ist ziemlich dasselbe von dem, was wir mit den Texteingaben gemacht haben. Alles, was wir tun, ist, den Namen des Bildes zu übergeben, anstatt den Wert des Textes. Lassen Sie uns testen, dass das funktioniert. Wir müssen die Bildnamendaten mit den doppelten geschweiften Klammern ausgeben. Ich werde das vorerst auf der Karten-Anzeigeseite machen. Öffnen Sie die doppelten geschweiften Klammern und wir können nun den Wert dieses Bildnamens setzen und sagen, dass. Gehen wir zum Browser. Wenn wir nun eine Datei auswählen, wählen Sie das Bild aus. Großartig. Wenn alles richtig gelaufen ist, sehen wir den Namen des Bildes, das wir ausgewählt haben, auf der Karte ausgeben. Das ist ein großer Schritt. Wir haben jetzt das Bild gedrängt Firebase. Wir haben nun die Bildvorschau auf dem Bildschirm angezeigt. Wir haben auch den Namen des Bildes, das an die übergeordneten Komponenten übergeben wird. Jetzt sind wir bereit, die Bildausgabekomponenten zu erstellen, die das Bild der nur Karten-Anzeige-Abschnitt anzeigen. Wir fangen damit im nächsten Video an. 70. Image Output-Komponente: Wir haben jetzt alles, was wir brauchen, um die Bildausgabe-Komponenten zu erstellen. Lassen Sie uns tatsächlich das Bild über auf der Karte anzeigen. Wir beginnen auf die übliche Weise, indem wir die Bildausgabekomponenten erstellen. Ich gehe zu Visual Studio und ich werde diese Komponenten innerhalb des aktuellen Abschnitts hinzufügen. Dies wird ImageOutput.vue genannt. Beginnen wir also mit der Erstellung unserer Vorlagen an der Spitze und dann unsere Skript-Tags, verwenden wir für jetzt einen leeren Exportstandard. Dann endlich die Style-Tags und speichern Sie das dann. Dann, sobald dies getan ist, müssen wir importieren und registrieren innerhalb der Cardfront.vue. Denken Sie daran, dass CardFront der Container sein wird , der alle Bild- und Textkomponenten enthält. also zum Skriptabschnitt scrolle, werde ich unsere ImageOutput importieren . /imageOutput.vue. Also sollten wir in der Lage sein, ein bisschen wie ein Muster hier auftauchen zu sehen. Wenn Sie sich die Vorderseite der Karte ansehen, haben wir die TextInput und TextOutput, gefolgt von ImageUpload oder ImageInput und dann auch die ImageOutput. Setzen Sie also Daten ein, übergeben Sie sie an die übergeordneten Komponenten und übergeben Sie diese Daten dann an dieses untergeordnete Element als Requisiten. Lassen Sie uns dies nun im Komponentenabschnitt registrieren. Also werde ich diesen CCImageOutput aufrufen, was natürlich das ImageOutput ist, das wir gerade importiert haben. Dies bedeutet nun, dass Sie die Komponenten innerhalb unseres ausgewählten Standorts innerhalb des Kartendisplays platzieren können . Also innerhalb dieses Kartenanzeigeabschnitts werde ich die doppelten geschweiften Klammern von vorher entfernen und dann unser ImageOutput hinzufügen. Genau wie der Editorbereich werde ich dies als zweite Komponente hinzufügen. Also cc-image-output und das schließende tag. Als nächstes müssen wir einige Requisiten übergeben. Zuerst den Namen des zu ladenden Bildes, das Sie in der Eigenschaft Image-Name Datumsangaben speichern, die gerade hier ist. Fügen wir die erste Requisite zum öffnenden Tag hinzu. Verwenden Sie also den Doppelpunkt, um dies zu binden und wir werden diese Stütze das DisplayImage nennen. Übergeben Sie dann den Wert von ImageName. Dann ist die zweite Requisite, die wir hinzufügen werden, auch diese Containerhöhen, die genau das gleiche wie die TextsOutput ist. Dieses Mal möchte ich also, dass das Bild ein wenig größer ist als der Text, also werde ich dies auf 350 setzen, also speichern Sie das. Jetzt können wir zum ImageOutput gehen und dort anfangen zu arbeiten. Die Vorlage ist ziemlich einfach. Im Moment benötigen wir nur ein Bildelement, um dieses Bild anzuzeigen. Lassen Sie uns also das div als Wrapper erstellen. Dann im Inneren werden wir unser Bild erstellen und dann brauchen wir keine Quelle für jetzt. Alles, was wir tun möchten, ist eine ID hinzuzufügen und dies auf OutputImage zu setzen. Denken Sie daran, dass diese Komponente Requisiten erhält, also müssen wir eine Requisite Validierung haben. Unten im Exportstandard können wir hier unsere Requisiten hinzufügen. Dann wird dies ein Objekt sein. Das erste ist also für das Anzeigebild, das die erste Requisite ist, die Sie an sie übergeben. Hier drinnen werden wir dies auf einen Typ von String setzen, dann durch Komma getrennt. Wir können auch den Container hohe Stütze hinzufügen. Dies wäre eine Art von Zahl. Standardmäßig wird dies auch auf den Wert 200 gesetzt. Nun, was ich getestet bin, erhalten wir tatsächlich diese Requisiten suchen Ausgabe des Anzeigebildes in der Vorlage. Öffnen Sie also die doppelten geschweiften Klammern und geben Sie dann das Anzeigebild aus, das eine Requisite ist, die wir vom Elternteil erhalten, das gerade hier ist. Geben Sie das ein Speichern und lassen Sie uns dies im Browser überprüfen. Wählen Sie eine Datei aus und laden Sie das Bild hoch. So können wir sehen, dass der Name heruntergeladen wurde und dies ist eine Sonde, die an die Komponenten von den Eltern übergeben wird. Dann lassen Sie uns einige Stile hinzufügen, die der Textfeldwahl entsprechen. Scrollen Sie also nach unten zum Startabschnitt am unteren Rand. In der Tat möchten wir eine Klasse zu der umgebenden tun zuerst des Image-Containers hinzufügen. Wir können dieses Ziel innerhalb des Stilabschnitts verwenden, so.image-container. Dann im Inneren hier werden wir unsere Grenze hinzufügen, die zu einem Pixel und gepunktet wird. Genau wie das Textfeld kann der Überlauf ausgeblendet werden. Auch ein Rand von fünf Pixeln oben und unten und Null auf der linken und rechten. Also im Moment erhalten wir die Container High Requisite, die wir bestanden haben. Aber wir verwenden es nicht tatsächlich, um die Höhe des Containers einzustellen. Wenn wir auf die TextOutput.vue Datei gehen, setzen wir zu gehorchen berechnete Eigenschaft, um diese Requisite als Stilobjekte zu verwenden. Der Code in der Bildausgabe wird genau derselbe sein, also könnte ich diesen berechneten Abschnitt einfach kopieren und einfügen. Gehen Sie dann zurück zum ImageOutputs.vue. Dann können wir das in unsere Objekte einfügen. Suchen Sie also das schließende Requisiten-Tag und fügen Sie ein Komma hinzu und fügen Sie es dann ein. Jetzt bleibt nur noch das StyleObject an das container-div zu binden. Gehen Sie also zum umgebenden Container mit der Spalte, die wir die dynamischen Stile kombiniert haben, und setzen Sie dies auf unser StyleObject, das ist der berechnete Wert, den wir gerade hinzugefügt haben, so speichern Sie das. Starten Sie den div-Server und laden Sie ihn im Browser. Das erste, was Sie sehen werden, wenn alles richtig funktioniert, ist, dass es einen Bildcontainer gibt , der größer ist als der TextOutput-Container. Dies liegt daran, dass wir das Bild auf 350 Pixel eingestellt haben. Während wir nur den Container für die TextBox auf 130 setzen. Dann können wir auch sehen, ob wir unser Bild hochladen. Der Bildname sollte über Requisiten an die Karte übergeben werden. Wir haben das richtig funktioniert, gut gemacht. Sie können nun den Bildnamen verwenden, um das Bild herunterzuladen und auf die Karte anzuzeigen. 71. So lädst du Bilder von Firebase herunter: Gut gemacht, um diese Phase des Kurses zu erreichen. Wir haben bisher viel gedeckt, und ich hoffe, es ergibt Sinn. Wenn Sie immer noch Schwierigkeiten haben, bestimmte Teile zu verstehen, machen Sie sich keine Sorgen. Wenn du mit diesem Kurs weitermachst, wirst du viel mehr Chance zum Üben bekommen. Sie haben bereits die meisten Kernkonzepte von UGS behandelt. In diesem Video werden wir das Bild herunterladen und auf die Karte anzeigen. Bereits, wir haben den Bildnamen übergeben schließlich Anzeige Bild Requisite, die gerade hier ist. Im Inneren unseres Bildes, unser Profil. Wir können eine Watch-Eigenschaft einrichten, um Änderungen zu erkennen, die verursacht werden, wenn der Benutzer ein neues Bild hochlädt. Scrollen Sie nach unten, ich werde nur das direkt unter den Requisiten hinzufügen. Ich werde die Watch-Eigenschaft hinzufügen. Wir werden diese Display-Bild-Eigenschaft zu sehen. Füge das da drinnen hinzu. Hier drinnen wollen wir mit Firebase kommunizieren, um das Bild herunterzuladen. Zuerst müssen wir Firebase in diese Datei importieren. Direkt unter dem öffnenden Skript-Tag, um Firebase aus Firebase zu importieren. Dann müssen wir als nächstes eine Speicherreferenz hinzufügen, genau wie wir es in den Bildeingabekomponenten getan haben. Gehen Sie zum Bild-Upload. Wenn Sie sich erinnern, haben wir in diesem Abschnitt zur Upload-Datei eine Speicherreferenz hinzugefügt, die den Namen der Datei an Firebase weiterleitet. Ich werde diese Codezeile kopieren und dann zu den Bildausgaben zurückkehren und dies innerhalb der Watch-Eigenschaft hinzufügen. Dadurch wird eine Variable namens Speicherreferenz erstellt, die sich auf eine Datei innerhalb der Datenbank bezieht. Dieses Mal, anstatt diese Top-Datei zu schieben, wollen wir mit diesem Punktdarstellungsbild auf sie verweisen, das ein Name des Bildes ist, das wir übergeben haben. Wir können dann die Speicherreferenz mit der Get-Download-URL-Methode verwenden , um die URL für diese Datei abzurufen. Direkt unten werden wir auf die Speicherreferenz zugreifen, die wir gerade erstellt haben und dann Punkt Download-URL erhalten. Auch dies ist eine Methode, die von Firebase zur Verfügung gestellt wird. Dieses Problem wurde erfolgreich behoben. Dann weisen wir eine Callback-Funktion zu laufen. Wir müssen auch die URL in die Klammer übergeben, die wir gerade heruntergeladen haben. Jetzt haben wir die URL des Bildes. Wir können den Code hinzufügen, um die Bildquelle zu setzen. Denken Sie daran, dass wir keine Bildquelle direkt oben haben. Wir können dieses Bild über seine ID des Ausgabebildes zugreifen. Innerhalb dieses Körpers werden wir unsere Variable des Bildes erstellen und diese auf die Bild-ID mit document.getElementById setzen . Die Bild-ID war das Ausgabebild. Dann können wir die Bildpunktquelle so einstellen, dass diese URL gleich ist, die in der Vergangenheit sein wird. Geben Sie dem ein Sparen. Dies ist ein ziemlich einfaches Beispiel, um das Bild herunterzuladen. Wir können noch weiter gehen, indem wir auch Fehlerbehandlung hinzufügen , aber ich möchte vorerst nicht zu tief in Firebase eingehen. Speichern Sie das und starten Sie den Entwicklungsserver und wir können überprüfen, dass dies in Ordnung ist. Gehen Sie zu den Projekten wählen Sie eine Datei. Großartig. Jetzt sehen wir, dass das Bild erfolgreich von Firebase heruntergeladen wurde. Dies bedeutet, dass unser Code gut eingegrenzt ist. Es gibt jedoch ein kleines Problem und wenn Sie das Bild auf der rechten Seite nicht sehen können, haben Sie dies möglicherweise bereits erlebt. Wenn Sie ein Bild zum ersten Mal hochgeladen haben, wird dieses möglicherweise nicht in der Karte angezeigt. Werfen wir einen Blick auf das Problem. Wenn wir gehen über, um neue Datei zu wählen und haben ein neues Bild auf dem Desktop, das noch nicht auf Firebase gepusht wird. Wenn wir dies auswählen, sehen wir, dass dies nicht funktioniert. Wenn wir eine Bilddatei auswählen, um VUGS Passagen Dateiname zu den Eltern zu verwenden. Dieser Dateiname wird an die untergeordnete Komponente übergeben, die dann versucht, das Bild viel in diesem Dateinamen herunterzuladen. Das Problem ist, dass dies viel schneller geschieht als die Zeit, die benötigt wird , um das Image tatsächlich auf den Firebase-Server hochzuladen. Das bedeutet [unhörbar], dass wir versuchen, ein Bild herunterzuladen , bevor es überhaupt auf Firebase hochgeladen wurde. Wenn wir bereits ein bestimmtes Bild wie das Strandbild von früher hochgeladen haben, wird es kein Problem verursachen, da das Bild bereits in der Firebase verfügbar ist. Dies ist ein Problem, das wir ziemlich einfach beheben können. Wir werfen einen Blick darauf, dies im nächsten Video zu tun. 72. So richtest du den Image-Button ein: Innerhalb des Bild-Upload-Punkt-Vue Datei haben wir eine „Bild einstellen“ innerhalb unserer Vorlagen gesetzt. Der Zweck dieser Schaltfläche besteht darin, zwei Dinge zu tun. Zunächst kann der Benutzer bestätigen, ob er dieses Bild aus der Miniaturansicht verwenden möchte. Wie wir bereits im letzten Video erwähnt haben, versuchen wir, ein Bild herunterzuladen, bevor es die Zeit hatte, auf den Server hochgeladen zu werden. Diese Schaltfläche kann auch dieses Problem lösen wenn wir eine Schaltfläche verwenden, um den Dateinamen auszugeben. Wir können die Schaltfläche ausblenden und sie nur sichtbar machen, wenn der Fortschrittsbalken bei 100 Prozent liegt. So können wir beginnen, indem wir die Schaltfläche ausblenden, bis ein Bild geladen ist. Dies kann mit einigen einfachen CSS getan werden. Als Attribut fügen Sie die Stileigenschaft hinzu und legen Sie diese so fest, dass keine angezeigt wird die Stileigenschaft hinzu und legen Sie diese so fest . Jetzt sollten wir sehen, dass die Schaltfläche entfernt wird. Unten in unserer Upload-Dateimethode, wenn wir die On Load-Funktion finden, und dann direkt darunter, wo wir den Fortschrittsbalken aktualisieren , können wir hier den Button wieder einführen, wenn der Upload-Fortschritt 100 Prozent erreicht. Darunter, wo wir den Fortschrittsbalken erhalten, können wir eine if-Anweisungen erstellen, die ausgeführt werden sollen, wenn der Fortschritt gleich 100 Prozent ist. Also, wenn der Fortschritt , der dieser Prozentsatz hier ist, gleich 100 ist, und jetzt können wir ein document.getElementById verwenden, um diese Schaltfläche durch seine ID auszuwählen. Also zurück innerhalb der if-Anweisung, können wir unsere documents.getElementById hinzufügen, und dann in der Set Image Button Id übergeben, und dann können wir dies verwenden, um die Schaltfläche wieder einzuführen, indem Sie den Anzeigetyp gleich Inline-Block setzen. Denken Sie also daran, dass standardmäßig der Schaltflächenmodus angezeigt wird, da wir die Anzeige auf keine einstellen. Dann beobachten wir unten, sobald der Fortschritt 100 Prozent erreicht, und dann, sobald dies passiert, werden wir dann den Anzeigetyp der Schaltfläche auf Inline-Block setzen, der auf dem Bildschirm angezeigt wird. Also lassen Sie uns das jetzt speichern und versuchen Sie es im Browser. Standardmäßig wird die Schaltfläche nicht angezeigt. Also wählen wir jetzt eine Datei aus. Sobald der Fortschrittsbalken 100 Prozent erreicht hat, nun die Schaltfläche Bild einstellen wieder auf dem Bildschirm angezeigt. Jetzt wird diese Schaltfläche nur angezeigt, wenn das Bild vollständig in Firebase geladen ist. Wir können dies nun verwenden, um die Emit-Methode auszulösen, wenn Sie darauf klicken. Gehen wir also zurück auf die Schaltfläche innerhalb der Vorlagen. Dann direkt nach der Stil-Eigenschaft, werden wir einen Klick-Listener hinzufügen, um eine Methode namens Set Image auszulösen. Dann lassen Sie uns unsere Set Image Methode unten einrichten. So scrollen Sie nach unten, sobald Sie bis zum Ende der Upload-Datei Methode, die gerade hier ist, ein Komma, und dann können wir unsere Set Image Methode hinzufügen. Dann hier drin, alles, was wir tun müssen, ist, diese Codezeile zu schneiden, die den Dateinamen ausgibt, und dann innerhalb unserer Methode zu verschieben. Denken Sie daran, dass die Schaltfläche zum Senden dieser benutzerdefinierten Ereignisse nur angezeigt wird, wenn der Upload-Fortschritt 100 Prozent beträgt. Es ist also jetzt sicher, diesen Dateinamen an Firebase zu senden. Lasst uns das speichern und testen. Wenn wir zum Browser gehen, ist das erste, was ich tun möchte, gehen Sie über die Firebase-Konsole. Gehen Sie also zu Firebase, und klicken Sie dann auf die Konsole, und wählen Sie dann die kreativen Karten aus, und gehen Sie dann zum Speicher. Ich werde die Benutzer-Upload-Datei löschen. Klicken Sie also auf die Schaltfläche auf der linken Seite und wählen Sie dann Löschen aus. So gibt es jetzt keine Bilder in der Datenbank gespeichert. Wir können nun zu unserer App gehen und testen, indem wir ein neues Bild auswählen, um zu überprüfen, ob es zurückgehalten wird, bis wir die Schaltfläche Bild einstellen auswählen. Gehen Sie also zu Datei auswählen und wählen Sie eine neue Datei aus, die sich nicht in der Firebase dann Bild festlegen. Jetzt können wir sehen, dass wir nicht das Problem haben, das wir im letzten Video hatten weil wir das Bild nicht von Firebase herunterladen können, bis es jetzt vollständig hochgeladen ist. Das funktioniert also alles gut, sowohl wenn wir Uploads im Bild wie gerade verwenden, dann noch einmal auf die Schaltfläche Datei auswählen klickt. Wir möchten, dass diese Schaltfläche „Bild einstellen“ wieder verschwindet, bis ein neues Bild vollständig hochgeladen ist. Sonst haben wir das gleiche Problem wie zuvor. So können wir dieses Bild sofort entfernen, nachdem die Schaltfläche „ Datei auswählen innerhalb der Upload-Datei-Methode geklickt wird. Gehen wir nach oben für die Upload-Dateimethode, und dann werde ich hier ganz oben ein document.getElementById hinzufügen. Wieder einmal werden wir jetzt die Schaltfläche Bild festlegen greifen, und alles, was wir tun werden, ist die Stil-Eigenschaft der Stil-Punkt-Anzeige gleich keine. Geben Sie das also ein Speichern, und testen Sie es jetzt im Browser. Wählen wir unser erstes Bild aus und setzen Sie es dann ein. Wenn wir nun auf Datei auswählen klicken, sollten wir nun sehen, dass die Schaltfläche Bild einstellen vorübergehend entfernt wird. Wählen Sie also ein Bild aus, und öffnen Sie dann. Großartig, hast du das gesehen? Wir haben die Bildschaltfläche verloren, bis die Datei vollständig hochgeladen wurde. Also, das funktioniert alles gut. Das Bild hier auf der Displayseite vielleicht ein bisschen zu groß oder zu klein, aber mach dir keine Sorgen darüber im Moment. Wir werden das im späteren Video beheben. 73. Textoptionen-Menü: Schriftgrößen: Wir kehren nun zu unseren Textausgabe-Komponenten zurück und fügen ein Optionsmenü hinzu. Das Menü wird angezeigt, wenn der Benutzer mit der Maus über den Text auf der rechten Seite bewegt, damit wir die Schriftgröße, Textausrichtungen und sogar fett oder kursiv ändern können. In diesem Video werde ich damit beginnen, das Menü so einzurichten, dass Hover angezeigt wird, und auch eine Schriftgrößenoption hinzufügen. Lassen Sie uns also beginnen, indem Sie unser Menü mit v-show erstellen , um ein- oder auszublenden, sobald Sie den Mauszeiger über diesen Textbereich bewegen. Also lassen Sie uns zu unserer TextOutput.vue Datei gehen. Also, direkt unter dem öffnenden div, werde ich ein Formular hinzufügen. Dieses Menü wird Form sein, wie es mit Formulareingaben gebildet ist. Also werde ich eine Klasse, Bootstrap-Klasse von klein hinzufügen . Dies macht eine Form ein wenig kleiner, so dass es besser in die Textausgabe passt. Dann können wir unsere V-Show hinzufügen. Also wollen wir dies binden, um Optionen anzuzeigen, die noch nicht erstellt sind. Dann werde ich nur einen einfachen Text innerhalb von P-Tags hinzufügen. Also fügen wir einfach Test dort hinzu. Jetzt, unten innerhalb unseres Skripts können wir diese ShowOptions-Dateneigenschaft einrichten. Wir scrollen nach unten und ich werde dies direkt unter den Requisiten hinzufügen, also fügen Sie unsere Daten hinzu. Ich habe das Abschlusskomma dort. Dies wird also unsere ShowOptions-Daten zurückgeben. Also werde ich den Anfangswert so einstellen, dass er wahr ist, nur um zu sehen, ob das im Browser funktioniert. Großartig. Also jetzt haben wir den Text des Tests, der oben auf jeder Komponente erscheint. Also, jetzt wissen wir, dass es funktioniert, können wir das wieder auf falsch ändern. So zeigt nur jedes Mal, wenn wir den Mauszeiger über die Gegend bewegen. Jetzt ist es entfernt. Um also den ShowOptions-Bereich umzuschalten, können wir einige Maus-Ereignishandler hinzufügen, wenn der Benutzer den Mauszeiger über das Textausgabe-div bewegt. Öffnen Sie also das öffnende div. Ich schaue auf Fortgeschrittene namens Mouseover. Jedes Mal, wenn die Maus über den Textbereich geht, können wir ShowOptions so einstellen, dass es wahr ist. Wir können das gleiche tun jedes Mal, wenn die Maus verlässt, aber dieses Mal werden wir die Optionen auf falsch setzen. Ich werde retten. Jetzt sehen wir, dass es standardmäßig ausgeblendet ist, aber wenn Sie den Mauszeiger über den Textausgabebereich bewegen, können wir sehen, dass der Text angezeigt wird. Also jetzt mit diesem an Ort und Stelle, können wir ein Auswahlfeld hinzufügen, um es uns zu ermöglichen, die Schriftgröße zu wählen, die wir für den Text verwenden möchten. Also geh zurück zum Formular. Wir können dieses P-Tag durch einen ausgewählten Bereich ersetzen. Ich werde mit einem Etikett für diesen ausgewählten Bereich beginnen. So beschriftet für SelectBox. Dann gehe ich zu einem Titel der Schriftgröße. Lass uns etwas Platz schaffen. Dann werden wir unsere SelectBox direkt unter diesem Label hinzufügen. In diesem Auswahlbereich werde ich diesen Namen durch eine Bootstrap-Klasse der benutzerdefinierten Auswahl ersetzen. Geben Sie diesem eine ID von SelectBox, die mit der Beschriftung direkt oben übereinstimmt. Im Inneren können wir unsere Optionen hinzufügen, und jede dieser Optionen wird ein anderer Pixelwert für die Schriftgröße sein. Also das erste werden wir als 42 Pixel mit dem Text von 42 Pixeln hinzufügen. Dann werden wir diese kopieren und einfügen, um einige weitere Optionen hinzuzufügen. Also werden wir vier Optionen hinzufügen. Der zweite von 48 Pixeln, der dritte als 56 und schließlich der größte von 64 Pixeln. Also speichern Sie das und schauen wir uns an, wie das im Browser aussieht. Wenn wir also den Mauszeiger über die Textausgabe bewegen, können wir jetzt sehen, dass wir die Optionen haben, um die Schriftgrößen auszuwählen. Wir brauchen nun eine Möglichkeit, diesen ausgewählten Wert in den Platten als Schriftgröße zu verwenden. Es stellt sich heraus, dass wir bereits einige dieser Setups haben. Die P-Tags, die den Text anzeigen, den wir ändern möchten, haben bereits eine Stilobjektbindung. So können wir das einfach hinzufügen. Zuerst müssen wir eine Dateneigenschaft hinzufügen und ich werde diese SetFontSize aufrufen. Scrollen Sie also nach unten zu den Daten und fügen Sie durch ein Komma eine neue Dateneigenschaft von SetFontSize hinzu und setzen Sie dies auf eine leere Zeichenfolge, um zu beginnen. Wir können diese dann zu den ausgewählten Eingängen mit V-Modell hinzufügen. Scrollen Sie also zurück zum öffnenden Select-Tag und direkt nach der ID werde ich V-Modell hinzufügen und dies auf setFontSize setzen. Bei dieser bidirektionalen Datenbindung wird die Dateneigenschaft SetFontSize auf den ausgewählten Wert festgelegt. Jetzt können wir den ausgewählten Wert an das Stilobjekt übergeben, das wir bereits haben. Scrollen Sie also nach unten zum Stylobjekt, das sich im berechneten Abschnitt befindet. Dann können wir die Schriftgröße Eigenschaft setzen. Da dies JavaScript ist, muss es ein Fall werden. Ich werde diese Schriftgröße so einstellen, dass sie gleich ist. und möchten die Datenoption von SetFontSize. Dann, weil dies nur eine Zahl erhält, wenn dies Pixel hinzufügt , machen wir es erneut zu einem CSS-Wert. Also, jetzt sollte dies getan werden. Also werde ich retten. Jetzt sollten wir in der Lage sein, dies im Browser zu versuchen und zu sehen, ob es die Schriftgröße ändert. Fügen wir also etwas Text hinzu und bewegen Sie den Mauszeiger über und ändern Sie die Schriftgröße. Das sieht gut aus. Großartig. Das scheint zu funktionieren und jedes Mal, wenn ich auf eine andere Größe klicke, sehen wir jetzt, dass der Text geändert wird. So funktioniert das vorerst großartig. Als nächstes werden wir mit diesem Menü fortfahren, indem Sie die Textausrichtungsoptionen hinzufügen. 74. Textoptionen-Menü: Textausrichtung: Unser Menü erscheint nun, wenn wir den Mauszeiger über den Text bewegen, und wir haben auch erfolgreich eine ausgewählte Eingabe hinzugefügt, um die Schriftgröße zu ändern. Jetzt können wir mit dem Menü fortfahren und einige weitere Optionen hinzufügen. Speziell freie Schaltflächen, um die Textausrichtung einzustellen. Es wird einen ähnlichen Prozess wie das Auswahlfeld folgen, aber dieses Mal werden wir Optionsfelder verwenden. Wenn Sie sich sicher fühlen, würde ich Sie ermutigen, voranzugehen und dies auf eigene Faust zu gehen, bevor Sie mit mir folgen. Wenn nicht, werde ich jetzt voran gehen und dies innerhalb der Textausgabe.vue Datei tun. Sichern Sie sich die Vorlagen oben. Wenn wir nach der schließenden Auswahloption suchen, lassen Sie uns etwas Raum schaffen und sicherstellen, dass dies immer noch innerhalb des Formulars ist. Ich werde damit beginnen, ein div hinzuzufügen, dann werden wir einige Bootstrap-Klassen hinzufügen, um dies ein wenig schöner aussehen zu lassen. Der erste wird Formularüberprüfung dann auch Formularcheck in Zeile sein. Dann können wir das Label auch die Bootstrap-Klasse des Formular-Check-Labels fragen. Dann innerhalb dieser, in der Tat, können wir unsere Eingabe zwischen dem Etikett hinzufügen. Der Eingang wird die Art des Radios sein. Einige Klassen für Styling oder Formularprüfung Eingaben und dann schließlich können Sie einen Wert hinzufügen. Die erste, die ich nach links setzen werde, also ist dies für die linke Ausrichtung. Ich werde diesen vollständigen div-Abschnitt kopieren und zwei weitere Male einfügen. Der mittlere wird sein, den Text in der Mitte auszurichten und der letzte wird für die linke Ausrichtung sein und direkt nach der Eingabe wir den Text hinzufügen. Der erste ist links, zentriert und dann rechts. Dann, genau wie wir es mit dem Auswahlfeld getan haben, können wir auch eine Dateneigenschaft einrichten, um den ausgewählten Wert zu übergeben. Zurück zum Skript, direkt unter der Schriftgröße, die wir im letzten Video verwendet haben, werden wir das gleiche hier tun, aber dieses Mal setzen Sie die Textzeile. Dies wird eine leere Zeichenfolge sein, mit der zu beginnen und auch einige Daten an diese übergeben wird. Jetzt haben wir unsere Dateneigenschaft können wir Zwei-Wege-Datenbindung mit V-Modell einrichten, so sichern Sie sich die Eingaben. Zuallererst werden wir V-Modell als Attribut zum linken Abschnitt hinzufügen. V-Modell dies wird Sets text-align sein. Dies wird für alle drei dieser Eingaben gleich sein, so dass wir dies als Attribut zur Mitte und auch auf der rechten Seite hinzufügen können . Stellen Sie sicher, dass die bidirektionale Datenbindung alle auf die gleiche Datumseigenschaft festgelegt ist. Dadurch wird festgelegt, Text mit dem Wert aus unserem Radio-Bone ausgerichtet , den Sie hier hinzugefügt haben, den Sie dann in unsere Stilobjekte übergeben können. nach unten scrollen, werfen wir einen Blick auf das Stilobjekt innerhalb des berechneten Abschnitts. Wir werden das gleiche tun wie zuvor mit der Schriftgröße, indem den Text ausrichten und dies wird this.set text-align sein. Das ist alles, was wir tun müssen, also können wir zum Browser gehen und überprüfen, dass alles funktioniert. Fügen Sie hier einige Texte hinzu und bewegen Sie dann den Mauszeiger über Mitte, rechts und links. Gut gemacht, wenn Sie es geschafft haben, dies alleine zu tun, wenn nicht, ist es völlig in Ordnung. Dies funktioniert jetzt alles, also kann jetzt zum nächsten Video gehen und diesen Menüabschnitt durch Hinzufügen der fett und kursiv Optionen vervollständigen. 75. Textoptionen-Menü: Schriftart und Gewicht: Jetzt ist es an der Zeit, unser Hover-Menü zu beenden, indem Sie Optionen hinzufügen , um den Text so zu ändern, dass er fett und kursiv ist. Wir können die Optionsfelder verwenden, wie wir es im letzten Video getan haben, weil wir in der Lage sein wollen, sowohl die fett als auch kursiv zur gleichen Zeit auszuwählen. Radio-Bonds erlauben nur eine von uns ausgewählte. Stattdessen können wir dies durch die Verwendung von Kontrollkästchen erreichen. Lassen Sie uns zur TextOutput.vue Datei gehen. Wir können diese direkt unter dem Textausrichtungsabschnitt hinzufügen, sich direkt über dem schließenden Formular-Tag befindet. Beginnen wir mit der Erstellung unseres div. Lassen Sie uns einige Klassen zu diesem umgebenden div hinzufügen. Die erste Klasse wird alle Form-Check und auch Form-Check-Inline sein. Wir können auch unser Etikett hinzufügen. Ich werde nur einige Klassen zu diesem von form-check-label hinzufügen, ich werde unsere Eingabe hinzufügen. Denken Sie daran, dass dies die Art des Kontrollkästchens sein wird, und wir werden auch einige Klassen hinzufügen, um es schön aussehen von Form-Check-Eingaben, und diese alle Boucher-Oberflächen. Kurz nach der Eingabe werden wir den Namen der Fettteile hinzufügen. Dies ist ein Text, der direkt neben dem Kontrollkästchen angezeigt wird. Dies ist eine für fett, wir brauchen auch eine für kursiv. Kopieren Sie dieses vollständige div, und drücken Sie es dann in knapp unten. Wir können die gleichen Klassen verwenden, form-check-inline für die Eingabe. Dies ist auch ein Kontrollkästchen, aber mit dem Namen Kursiv. Checkboxen funktionieren ein wenig anders als Funkanleihen. Vorher bei Funkanleihen setzen wir unsere Dateneigenschaft mit einem bestimmten Wert wie links oder rechts. Checkboxen geben einen booleschen Wert von true oder false zurück, wenn sie aktiviert oder deaktiviert sind. Wenn wir zu unserem Text gehen, der das Stilobjekt gebunden hat, was gerade hier ist. Wir können diese true oder false Wertsätze oder vor Ort eine CSS-Klasse verwenden, die binden wird. Zuerst richten Sie die Datumseigenschaften für fett, kursiv ein. Beide werden zunächst auf false gesetzt. Der Text ist Standard, um zu beginnen. Gehen Sie zu den Daten, und fügen Sie ein Komma hinzu. Der erste ist, was wir SetBold mit dem Anfangswert false genannt haben. Dann fügen Sie ein Komma am Ende, und wir können setzen, SetItalic auch auf den Anfangswert von false. Dann können wir das Modell verwenden, um diese Daten mit den Checkboxen zu verknüpfen. Sichern Sie sich zu den Checkboxen. Lassen Sie uns Vue Modell zur Eingabe hinzufügen, um bidirektionale Datenbindung einzurichten. Dieser erste wird die SetBold Daten sein. Dann natürlich, die zweiten Eingaben für kursiv, werden wir dies auf SetItalic setzen. Wir können prüfen, ob diese Daten beim Nachverfolgen geändert werden indem wir den Wert innerhalb der geschweiften Klammern ausgeben. Kurz nach dem Kursivtext werde ich die doppelten geschweiften Klammern einrichten. Der zweite wird kursiv gesetzt. Ich werde dasselbe für SetBold tun. Jetzt hatte über den Browser, und wenn Sie mit dem Mauszeiger über unser Menü, sehen wir eine extra fett und kursiv, wir haben die Anfangswerte von false. Lassen Sie uns zuerst fett überprüfen. Guter Start ändert sich zu true und dann zurück false und auch die kursive Arbeit zu. Das bedeutet, dass die Dateneigenschaft mit dem Vue Modell aktualisiert wird. Wir können jetzt sehen, dass die Kontrollkästchen unsere Daten korrekt setzen. Beginnen Sie, geschweifte Klammern zuerst zu bewegen, einige der SetBold und auch SetItalic. Dann können wir diesen booleschen Wert verwenden, um an unsere Klassen zu binden. Genau wie ich bereits erwähnt habe, können wir, wenn wir zum P-Text gehen, derzeit die Stilbindungen hat, auch ein zweites Attribut hinzufügen, um die Klasse zu binden. Dies wird auch ein Objekt sein. Innerhalb dieses Objekts werden wir die erste Eigenschaft von bold hinzufügen. Dies wird unsere Dateneigenschaft von setBold sein und durch ein Komma getrennt. Wir werden das gleiche auch für kursiv tun. Dies ist unsere festgelegte Datumseigenschaft im Inneren. Wenn fett auf true gesetzt ist, wenden Sie die fett -Klasse an. Wenn gesetzt kursiv auf true gesetzt ist, wird die Kursivklasse gesetzt. Jetzt müssen wir nur unsere fett und kursiv Klassen innerhalb des CSS setzen und dann sollten wir fertig sein. Blättern Sie nach unten zu Stilen. Wir fangen mit der mutigen Klasse an. Ich möchte hier tun, ist das Schriftgewicht fett zu sein, und auch das gleiche für eine Kursivschrift, war diesmal im Formularstil kursiv. Speichern Sie und gehen Sie dann zum Browser, und bewegen Sie den Mauszeiger über das Menü. In der Tat, zuerst, werden wir etwas Text hinzufügen. Sie können die angewendeten Stile sehen. Sie den Mauszeiger über das Menü, und fangen wir mit fett an. Gut. Wir können sehen, dass der Text zwischen fett und standard umgeschaltet wird. Lassen Sie uns kursiv versuchen. Gut, die Stile gelten jetzt in den Text. Wenn Sie die div-Tools öffnen, mit der rechten Maustaste, überprüfen und wählen dann den Ausgabetext aus. Nun, wenn Sie fett markieren. Wir können jetzt sehen, dass die Klasse fett in den Entwicklertools angewendet wurde. Lassen Sie uns das gleiche für kursiv tun, und dann sehen wir die Klasse der fett und kursiv anwenden und sobald er als Attribute hinzugefügt wird, werden diese fett und kursiv Stile dann wirksam. Alles, was noch zu tun ist, ist ein wenig mehr Styling hinzuzufügen. Hauptsächlich, um sicherzustellen, dass, sobald Sie den Mauszeiger über das Menü bewegen, diesen Text nicht heruntergedrückt wird, wenn. Wir wollten eigentlich über dem Text erscheinen wenn anstatt ihn wie wahrscheinlich nach unten zu schieben. Zurück zu den Stilen. Ich gehe mit dem Formular. Wir werden die Position so einstellen, dass sie absolut ist. Wir fügen einen Rahmen direkt am unteren Rand hinzu und ich möchte dies auf ein Pixel gepunktet und eine graue Farbe einstellen. Ich werde etwas Rand an die Spitze von 10 Pixeln hinzufügen. Ein wenig an der Unterseite von fünf Pixeln, und dann auch einige Padian nur auf der Unterseite. Auch fünf Pixel. Halte uns einfach von der Kante fern. Nur um dies zu beenden, werde ich der Auswahlbox nur etwas Styling hinzufügen. Alles, was zu tun ist, ist die Höhe auf 40 Prozent zu setzen, nur um es ein wenig besser passt. Geben Sie dem ein Sparen. Nun, mal sehen, wie es im Browser aussieht? Gut. Wenn ich nun den Mauszeiger über das Menü führe, sehen wir, dass der Textcontainer nicht mehr nach unten gedrückt wird. Das Menü befindet sich nun schön auf dem div. Ich werde sehen, wie wir mit einigen Texten aussehen. Gut, dass offensichtlich gut funktioniert. Unser Hover-Menü ist jetzt komplett. Jetzt können wir unseren Bildkomponenten noch einen letzten Schliff verleihen. 76. So entfernst du den Image-Button: In den nächsten Videos werde ich einige zusätzliche Funktionen hinzufügen, um unsere Bildkomponenten zu beenden. Zu Beginn möchte ich eine Schaltfläche hinzufügen, die angezeigt wird, wenn der Benutzer den Mauszeiger über das Bild bewegt, damit das Bild entfernt werden kann. Sobald Sie dies verschieben, legen wir ein Standard-Platzhalterbild auf die Karte fest. Wechseln Sie zur Bildausgabe.vue Datei. Wir können eine Schaltfläche mit etwas Bootstrap-Styling hinzufügen. Kurz nach dem ersten Öffnen div, werde ich eine Schaltfläche innerhalb von hier mit dem Text von entfernen Bild hinzufügen. Dann innerhalb des öffnenden Knopf-Tags, gehen, um einige Attribute hinzuzufügen, wird mit dem Typ beginnen und setzen Sie dies wird Schaltfläche sein. Dann einige Bootstrap-Klassen, um etwas Styling anzuwenden. Zunächst einmal BTN dann BTN skizzieren Gefahr und dies fügt einen roten Rahmen zu der Schaltfläche. Dann schließlich BTN-SM, um den Knopf ein wenig kleiner zu machen. Auch, genau wie die Textoptionen, werde ich visuell hinzufügen, um nur das Menü beim Hover anzuzeigen. Hier im Inneren werde ich eine Datumsoption namens Show-Optionen erstellen und dann gehen wir zu unserer View-Instanz und erstellen dies. Direkt unter den Requisiten können wir unseren Datenbereich hinzufügen. Vergessen Sie nicht, das Koma kurz danach hinzuzufügen. Dann können wir unsere Daten zurückgeben. Die Dateneigenschaft, die wir erstellt haben, hieß show options und das ist anfänglich setzt show options auf false. Dann können wir dies auf true setzen, sobald der Benutzer über das Bild schwebt. Wir tun dies, indem wir einige Mausereignisse hinzufügen. Gehen wir zurück auf die Vorlage und fügen Sie einen Mouseover, eine Maus verlassen Ereignisse. Ich werde dies im öffnenden div hinzufügen, direkt nach dem bindierten Stilobjekt. Wir fangen mit Mouseover an. Wenn der Benutzer die Maus über das umgebende Bild, div, fügt werden wir dann zeigen Optionen auf true und dies wird dann auslösen V Show und aktivieren Schaltfläche angezeigt. Wir werden dann die Maus verlassen durch das Gegenteil hinzufügen sobald die Maus weg vom Bildcontainer bewegt wird. Diesmal ist die Option show auf false gesetzt. Also sagen Sie das und wir können testen, dass dies in Ordnung im Browser funktioniert. Bewegen Sie nun die Maus über den Bildbereich und wir sehen, dass die Schaltfläche angezeigt wurde. Wenn wir dann die Maus weg bewegen, wird die Taste nicht entfernt. Schließlich, um sicherzustellen, dass die Schaltfläche oben auf dem Bild und nicht dahinter sitzt. Wir können auch einige CSS einrichten. Also zurück zur oberen Bilddatei. Wir können dies unten im Stilbereich am unteren Rand tun. Wir können einige Stile zu der Schaltfläche hinzufügen. Zuerst setzen wir die Position auf absolut und dann den Z-Index auf einen Wert von eins, damit die Schaltfläche oben auf dem Bild sitzen kann. Gleiches, lassen Sie dies einfach im Browser überprüfen. Das sieht immer noch in Ordnung aus. Mit unserer Schaltfläche jetzt an Ort und Stelle, können wir es im nächsten Video verwenden, um das Bild zu entfernen. 77. So lieferst du Daten mit Callbacks: Wir haben uns bereits mit der Kommunikation von Eltern-Kind-Komponenten befasst. Wir wissen, dass ein Elternteil Daten über Requisiten an ein Kind übergibt, und auch ein Kind übergibt Daten mit einem benutzerdefinierten Ereignis an das übergeordnete Element. Es gibt auch eine Alternative, die wir Sie aufmerksam machen möchten, und dies ist durch die Verwendung von Callback-Funktionen. Ich werde dies mit einer Schaltfläche demonstrieren, die im letzten Video hinzugefügt wurden. Es funktioniert ein wenig anders als das Ausgeben von benutzerdefinierten Ereignissen. Dieses Mal müssen wir die Funktionalität innerhalb der übergeordneten Komponenten hinzufügen, also müssen wir eine klare Bildmethode innerhalb von Cardfront.Vue erstellen, also gehen wir über die CardFront, und öffnen Sie diese dann, und dann können wir nach unten gehen zum -Methodenabschnitt. In der Tat müssen wir das schaffen. Ich werde das nur nach dem Datenabschnitt hinzufügen, also fügen Sie das dort mit dem Komma hinzu, um es zu trennen. Ich werde die Methode von ClearImage hinzufügen, und dies wird natürlich verwendet, um das Bild vom Bildschirm zu entfernen. Wenn wir diese Methode auslösen, möchten wir, dass sie das aktuelle Bild durch ein Standard-Platzhalterbild ersetzt, so dass die Karte nicht so schlecht aussieht. Sie können ein vorhandenes Image verwenden, das Sie bereits in einer Firebase haben, oder Sie können ein neues Bild hinzufügen. Ich gehe zur Firebase-Konsole und füge ein Standardbild hinzu, also öffne die Firebase-Konsole, öffne dann unsere App, wähle Speicher, und es gibt unsere Benutzer-Uploads. Im Moment habe ich gerade das Bild beach.jpg drin. Ich gehe rüber, um Datei hochzuladen und wähle die Datei von meinem Desktop aus, also werde ich diese mit dem Namen Sea auswählen. Jetzt werde ich den Namen dieses Bildes kopieren, also kopieren Sie den Namen dieses Bildes über das, das Sie gerade hochgeladen haben, oder ein vorhandenes Bild, das aus Ihrer Liste stammt, und jetzt können wir diesen Namen verwenden, um unsere Eigenschaft für den Bildnamen festzulegen. Um dies zu tun, wählen wir dies mit this.imageName, das ist dieser Wert gerade hier, und jetzt werde ich dies auf einen String-Wert des Namens des Bildes setzen. Mit diesem Setup können wir es nun als Requisite an die untergeordneten ImageOutput-Komponenten übergeben. Scrollen wir zurück, können wir nach der cc-image-Ausgabe suchen, die gerade hier ist, und jetzt können wir eine dritte Requisite hinzufügen. Denken Sie daran, den Doppelpunkt zu verwenden, und rufen Sie dieses ClearImageProp auf , und dies wird gleich ClearImage sein, was der Name der Methode ist, die Sie gerade hier eingerichtet haben. Dann in der ImageOutput-Datei können wir dies nun zu unserer Liste der Requisiten hinzufügen, also gehen Sie zu ImageOutput.vue, und dann bis zum Skriptabschnitt, lassen Sie uns die Requisiten suchen. Wir werden dies als eine validierte Funktion einrichten und wir können dies bis zum Ende hinzufügen, kurz nach ContainerHeight. Der Name der Requisite war ClearimageProp. Wir werden dies auf die Art der Funktion setzen, dann um diese Funktion von dieser untergeordneten Komponente auszulösen, können wir es mit einem Klick-Listener auf der Schaltfläche aufrufen, also scrollen Sie zurück nach oben zur Schaltfläche innerhalb der Vorlagen. Dann gleich nach der v-Show werden wir auch einen Klick-Listener hinzufügen, dann können wir hier den Namen von ClearimageProp hinzufügen und diesem ein Speichern geben. Nun, wenn wir zum Browser gehen und dann unser Projekt öffnen. Lassen Sie uns überprüfen, ob es funktioniert. Wenn wir unser Strandbild hochladen, dann klicken Sie auf Öffnen, und dann setzen Sie dies. Wenn ich nun den Mauszeiger über und die Schaltfläche auswähle, sollten Sie diese Callback-Methode auslösen, um dann das neue Standardbild mit dem Namen festzulegen , den Sie an sie übergeben haben , der gerade hier war. Bevor wir dieses Video einpacken, gibt es noch eine Sache zu beachten. Wir wollen dieses Standardbild nur dann einstellen, wenn der Benutzer bereits ihre hinzugefügt hat. Wenn wir einen leeren Bildschirm haben, möchten wir dem Benutzer nicht erlauben, auf Entfernen zu klicken. Alles, was wir tun müssen, um diesen Fall abzudecken, ist, if-Anweisungen innerhalb der Methode hinzuzufügen, um zu überprüfen, ob die Bildnamendaten nicht leer sind. Zurück in der CardFront, wenn Sie auf die klare Bildmethode gehen, direkt darüber, können wir eine if-Anweisung hinzufügen. Also, wenn this.ImageName nicht gleich einer leeren Zeichenfolge ist, also mit anderen Worten, wenn es ein Bild vorhanden ist, dann können wir weitergehen und this.ImageName auf diesen Standardnamen setzen, den wir gerade übergeben haben. Lassen Sie uns das versuchen. Wenn wir aktualisieren, und jetzt, wenn wir auf den Entfernen-Button klicken, sehen wir, dass kein Bild heruntergeladen wird. Dies ist ein alternativer Weg, um zwischen Komponenten zu kommunizieren. Wir haben immer noch das Problem unserer Bilder, die nicht ganz richtig in den Container passen. Wir werden dies im nächsten Video beheben und auch die Bilder ziehbar machen, so dass der Benutzer sie dorthin verschieben kann, wo sie erscheinen sollen. 78. So machst du Bilder verschiebbar: Die gesamte Bildfunktionalität ist jetzt fast vorhanden. Eines der Probleme, wie wir erwähnt haben, ist, wenn Sie ein Bild hochladen, das größer oder kleiner als der Cal Container ist, sieht es nicht so toll aus. Wir können jQuery in unsere App hinzufügen, um unser Bild leicht ziehbar zu machen, durch den Benutzer. Wenn Sie mit jQuery nicht vertraut sind, ist es eine JavaScript-Bibliothek, die es uns ermöglicht, einfach Funktionen wie DOM-Manipulation, Animationen und Ereignisbehandlung hinzuzufügen , um nur einige zu nennen. hinaus gibt es auch die jQuery UI Library, die Funktionen der Benutzeroberfläche, wie Effekte und Interaktionen, hinzufügt . Dies wird die Bibliothek sein, die uns das ziehbare Feature gibt. Beginnen wir damit, unser Projekt mit jQuery zu verknüpfen. Ich bin zu Google gegangen, bin gegangen, um nach dem jQuery Google CDN zu suchen. Die eine, die wir brauchen, sind diese gehosteten Bibliotheken, also werde ich darauf klicken. Hier aus dem Menü auf der rechten Seite müssen wir zuerst den jQuery-Rückruf greifen, wir klicken auf das jQuery-Band. Ich kopiere die neueste Version kostenlos und füge sie der, /index.html. hinzu. Wir werden die Skript-Tags für Version drei kopieren und dann auf die /index.html gehen, und wir können diese direkt nach den Google-Schriften hinzufügen. Einfügen, die ich betrete. Dann können wir den jQuery UI Link auswählen. Klicken Sie auf die jQuery UI, also kopieren Emoticons das Skript und nicht die Stylesheets. Kopieren Sie den Skriptabschnitt von der Öffnung zum schließenden Tag, und fügen Sie ihn dann ein, sprengen Sie einfach die jQuery, erinnern Sie sich. Dies ist wichtig, es muss unter dem jQuery-Rückruf platziert werden, damit es funktioniert, korrekt. Geben Sie ihnen ein Speichern und dann, wenn wir zu den Bildausgabe-Komponenten gehen , können wir dies einrichten. Scrollen Sie nach unten zum Ende des Skripts, suchen Sie das schließende Skript-Tag, und stellen Sie sicher, dass dieser Code außerhalb der View JS-Inzidenz liegt. Unter nur JS-Code anzeigen, werde ich eine JavaScript-Funktion namens SetDraggable hinzufügen. Dies ist nur schlichtes JavaScript. In dieser Funktion müssen wir das Bild, das wir ziehen wollen, durch seine ID greifen , so dass das Bild eine ID der Ausgänge Bild hat, die Sie gerade hier sehen können. Zurück zu unserer Funktion. Innerhalb eines Funktionskörpers können wir das $ -Symbol verwenden. Wir verwenden dieses $ Symbol in jQuery, um ein Element auszuwählen, anstatt wenn Vanille-JavaScript wie document.getElementById verwendet wird. Innerhalb der Klammern können wir dies als String hinzufügen, so dass Sie '#' sehen, weil es eine ID ist, und die ID war Ausgabebild. Dann fügen wir /.draggable zu den ausgewählten Elementen hinzu. Alles ist jetzt noch zu tun, ist die SetDraggable Funktion aufzurufen, wo wir müssen. Ich werde diesen Funktionsaufruf innerhalb des Display-Bild-Watchers direkt nach der Bildquelle hinzufügen innerhalb des Display-Bild-Watchers . Wenn wir zum Anzeigebild scrollen, und dies ist innerhalb des Uhr-Bereichs. Direkt unter der Bildquelle können wir diesen Aufruf der Funktion von SetDraggable hinzufügen. Dies ist unsere ziehbare Funktionalität jetzt Setup. Mal sehen, ob es im Browser gut funktioniert. Geben Sie das Speichern auf seinem Kopf über Chrome, Barcodes Projekte, und dann müssen wir ein Bild auswählen, und klicken Sie dann auf Bild festlegen. Sobald es geladen ist, versuchen wir, auf das Bild zu klicken, das Sie jetzt können, ziehen Sie das Bild um den Abschnitt, und lassen Sie gehen, um dies mit einem Stück CSS zu beenden. Wenn wir zurück zu dem Bild oberen Komponenten, und scrollen Sie nach unten direkt unter der Schaltfläche, wählen Sie das Bild, und dann alles tun wollen, ist die Breite des Bildes auf ein 130 Prozent. Dies macht das Bild zu 130 Prozent des Containers, und ich habe dies aus zwei Gründen hinzugefügt. Erstens befasst es sich mit dem Problem, dass Bilder viel größer oder viel kleiner als der Container sind. Zweitens, indem Sie das Bild ein wenig größer machen, als der Behälter. Es gibt dem Benutzer einige zusätzliche Freiheit beim Ziehen des Bildes. Dies geschieht jetzt mit den Bild- und Textkomponenten, wir können jetzt voran gehen und diese dem Rest der Karte hinzufügen. 79. So stellst du die CardInsideLeft-Komponente fertig: Die Kartentransaktion, an der wir bisher gearbeitet haben, ist nun abgeschlossen. Wir können nun einen Text und Bildkomponenten wiederverwenden, um die verschiedenen Seiten der Karte zusammenzustellen , beginnend mit der Innenseite links. Die Innenseite links ist ein einfacher Abschnitt, der eine Texteingabe und eine volle Höhe Textausgabe hat , so dass der Benutzer einen Textblock in der Karte in der linken Datei hinzufügen kann . Innerhalb des aktuellen Abschnitts, alles, was wir bisher haben, sind die Container und einige Klassen. Da wir die Texteingabe- und -ausgabekomponenten verwenden, können wir sie zunächst importieren, damit wir sie in dieser Datei verwenden können. Unten im Skript können wir unseren Import hinzufügen. Die erste ist die Texteingaben und Dateipuff ist. /TextInputs.vue. Wir können das Gleiche auch für die Textausgaben tun. Importieren Sie die Textausgabe. Die Komponenten sind die gleichen wie Kartenfront, so dass wir diese kopieren und in unsere inneren linken Platten einfügen können. Geh rüber zur Kartenfront und dann bis zu den Vorlagen. Zuerst werde ich die cc-Text-Eingaben auswählen und diese dann auf die Karte im Inneren links bringen. Wir können nun den Text von oben entfernen und dann die cc-text-Eingaben einfügen. Wir können das auch mit der Textausgabe tun, also kopieren Sie dies von der Kartenfront. Ich werde diese zuerst kopieren und dann in der Kartenanzeigeseite hinzufügen. Die Ausgabekomponenten sind die Höhe der Karte, die 800 Pixel beträgt. Ich werde die Containerhöhe davon auf 750 einstellen. Dies ist alles kann für einige Podium zu ermöglichen. Nun gibt es die Daten, die für unsere Textfeld-Werte hinzugefügt werden sollen. Wir haben nur eine Texteingabe, so dass die einzige Dateneigenschaft, die wir hinzufügen müssen, Textfeldwert 1 ist. Sprengen Sie einfach die Importe, wir können unsere Daten einrichten. Lassen Sie uns den Exportstandard und dann unsere Daten hinzufügen. Wir werden den Textfeld-Wert 1 zurückgeben. Genau wie wir es zuvor getan haben, setzen wir dies auf einen Anfangswert einer leeren Zeichenfolge. Schließlich müssen wir auch unsere Komponenten registrieren, um sie in dieser Datei verfügbar zu machen, also direkt unter den Daten, fügen Sie Komma hinzu und dann können wir unsere Komponenten hinzufügen. Wir müssen die cc-Text-Eingaben hinzufügen, dann fügen Sie ein Komma hinzu. Wir können das gleiche auch für die cc-Text-Ausgaben tun , und speichern Sie das. Lassen Sie uns das jetzt im Browser öffnen und sehen, wie es aussieht. Wenn wir nach innen links gehen, können wir sehen, dass wir unsere Textkomponenten auf der linken Seite haben, und wir können sehen, dass wir den gepunkteten Rahmen für die Ausgaben auf der rechten Seite haben. Einige der Stylings fehlen, daher müssen wir möglicherweise auf die Kartenfront gehen und dann zu den Stilen gehen und den Bereich entfernen. Dies gilt dann für alle aktuellen Abschnitte, aber innen links. Jetzt können wir sehen, dass wir die gleichen Stile wie die Vorderseite haben. Das sieht so aus, als ob es alles in Ordnung ist, wir müssen nur einige Texte eingeben. Wir können sehen, dass alle auf dem Ausgabe-Abschnitt erscheinen. Wenn Ihr so aussieht, sind wir jetzt bereit, zum inneren rechten Abschnitt zu gehen. 80. So stellst du die CardInsideRight-Komponente fertig: Jetzt gehen wir auf die rechte Innenseite der Karte. Das sollte ziemlich unkompliziert sein, da wir die meiste Arbeit bereits erledigt haben. Wir müssen nur die drei Texteingaben und Ausgabekomponenten hinzufügen , um dies zu öffnen, wie wir hier sehen können. Es ist so ziemlich eine Wiederholung der Innenseite links, aber wir müssen drei Komponenten und auch drei Datumseigenschaften hinzufügen. Gehen wir rüber zur Karte, die innen rechts ist. Derzeit haben wir nur den Text der Karte innen rechts. Ich gehe zum inneren linken Abschnitt, den wir im letzten Video hinzugefügt haben , „Command“ oder „Control A“, um alle zu kopieren und dann in das Innere rechts zu gehen und dann fügen Sie diese anstelle der aktuellen Daten und dann können wir duplizieren Sie die Texteingabe noch zwei Mal, also kopieren Sie diese und fügen Sie sie in zwei weitere Male ein. Der einzige Unterschied ist, dass wir die TextBox benötigen, um value2 und dann value3 zu sein. Auch das gleiche für den TextOutput, bekam „Copy“ und fügen Sie dies dann in zwei weiteren Malen ein, ändern Sie den TextBox-Wert in eins, zwei und dann drei. Dann werde ich die ContainerHeight auf eine Höhe von 240 setzen, so dass alle drei auf die Karte passen können und dann jetzt auf die Daten hinunter, wir haben bereits unsere Texteingabe- und -ausgabekomponenten. Diese beiden werden importiert, also ist das in Ordnung, aber ich muss einen TextBoxValue2 und auch drei zurückgeben. Wir haben die Komponenten bereits eingerichtet, also müssen wir nur speichern und sehen, wie es im Browser aussieht. Das ist die Front. Gehen Sie nach innen rechts, also haben wir die drei Komponenten, also Box eins, Box zwei und Box drei und wir können auch sehen, wenn Sie den Mauszeiger über alle drei bewegen, werden sie immer noch das individuelle Menü für jeden haben. Da diese über die eigene Datumseigenschaft verfügen, funktionieren diese alle unabhängig, sodass die Menüoptionen nur für den Abschnitt gelten. Dies ist jetzt die Karte vorne, die Innenseite links und innen rechts abgeschlossen, was uns mit nur einem Rücken zu vervollständigen lässt und wir werden dies im nächsten Video tun. 81. So stellst du die CardBack-Komponente fertig: Wir sind jetzt gegen das Ende des Projekts, so gut gemacht, um so weit zu kommen. Die Rückseite ist die letzte Seite der Karte, die wir beenden müssen, und es wird so aussehen. Auch hier sollte es einfach sein, denn wir haben die Komponenten, aus denen sich das zusammensetzt, bereits fertiggestellt. Wir müssen das Bild hochladen und Ausgaben hinzufügen, dann nur ein einfaches Copyright-Logo, um die Dinge zu beenden. Dies ist eine gute Chance, dies selbst zu gehen, indem Sie den Bild-Upload und dann die oberen Komponenten hinzufügen. Denken Sie daran, dieser braucht auch eine Callback-Methode, um das Bild zu löschen, genau wie wir in den Kartenvorderkomponenten verwendet haben. Lasst uns zu den Komponenten der Kartenrückseite gehen. Wählen Sie das aus. Alles, was wir im Moment haben, ist der Text der Karte zurück. Ich werde alle Inhalte entfernen und dann zur Kartenfront gehen, alle auswählen und kopieren, und fügen Sie diese dann innerhalb der Kartenrückseite hinzu. Denken Sie daran, dass die Stile nicht mehr gültig sind. Daher können wir diese entfernen, es sei denn, sie gelten weiterhin. Wir haben keinen Text im Abschnitt, also nur die Bild-Upload und die Bildausgabe. Wir können die ersten beiden Komponenten entfernen. Wir werden diese klare Bildmethode nutzen, so dass wir das in lassen können. Öffnen Sie dann den Datenbereich, wir brauchen nur den Bildnamen, da wir nicht mit einem der Lehrbuch-Werte arbeiten. Wir können auch die Importe für die Texteingaben und auch für die Textausgabeentfernen und auch für die Textausgabe und dann an unseren Vorlagen arbeiten. Wir brauchen einen CC-Bild-Upload, den wir bereits haben, so dass wir die freien Texteingaben entfernen können, also die von knapp oben und dann zwei von unten. Dasselbe für die Ausgänge können wir die Textausgänge von oben und die beiden Ausgänge von unten verschieben . Jetzt haben wir nur das Bild hochladen, und dann wird das Bild auf der rechten Seite ausgegeben. Wir werden die Containerhöhen benutzen, und dieses Mal werde ich das auf 400 setzen. Wir brauchen immer noch die klare Bildstütze, weil wir dies verwenden, um das Bild zu entfernen und dann die Methode auszulösen , um dann das Standardbild festzulegen, das hier ist. Wenn all das erledigt ist, lassen Sie uns unsere Sparen treffen und sehen, wie es aussieht. Gehen Sie auf die Rückseite der Karte, wählen Sie eine Datei aus, und legen Sie dann das Bild fest. Gut, das funktioniert. Wir haben auch die Möglichkeit, das Bild zu ziehen. Dann versuchen wir, ein Bild zu entfernen. Großartig. Das ist unser Standardbild, das mit der Kartenrückseite arbeitet. Jetzt funktioniert das, dies ist der letzte Abschnitt, der abgeschlossen werden soll. Wir haben jetzt alle Abschnitte unserer Karte alle funktionieren. Wir sehen uns im nächsten Video. Wir werden einen Blick auf den Event Boost werfen. 82. Einführung in den Event-Bus: Bei der Betrachtung von Komponenten in diesen letzten Abschnitten haben wir untersucht, wie übergeordnete und untergeordnete Komponenten kommunizieren können. Wir wissen, dass wir Daten vom Kind mit benutzerdefinierten Ereignissen an die Eltern weitergeben. Außerdem wissen wir, dass wir Daten von den Eltern mit Requisiten an das Kind weitergeben. Das funktioniert gut, wenn die Komponenten, die kommunizieren sollen, nur eine Ebene auseinander liegen, wie bisher in unserer App. Beispielsweise sind die Texteingabe- und -ausgabekomponenten direkte untergeordnete Elemente der Kartenfront. Dies macht die Kommunikation einfach zu erreichen. Es gibt jedoch häufig Situationen, in denen Komponenten zwei oder mehr Ebenen voneinander getrennt sind und kommunizieren müssen. Dies ist üblich, da unsere App größer wird. Wenn Sie eine App betrachten, die eine Struktur wie diese hat, die beiden Komponenten am unteren Rand keine direkten übergeordneten Komponenten, haben die beiden Komponenten am unteren Rand keine direkten übergeordneten Komponenten,zwischen denen Daten übergeben werden können. Es ist möglich, Ereignisse in der Kette weiterzugeben, zurück zur obersten Ebene und Requisiten den ganzen Weg zurück nach unten zu übergeben , denn dies kann schnell chaotisch und unwartbar werden. Um diese Kommunikation zu erleichtern, können wir einen sogenannten Event-Bus verwenden. Ein Eventbus ist nichts anderes als eine leere Vue Instanz, die wir als zentrale Datenquelle verwenden. Wir importieren dies in eine beliebige Komponentendatei, in der wir es verwenden möchten. Dies wird für die nächste Funktion nützlich sein, die wir unserer App hinzufügen. Innerhalb der vier Kartenanzeigen werde ich ein Kontrollkästchen hinzufügen, um diesen Abschnitt als abgeschlossen zu markieren, dann werden Daten an den Header übergeben, um einen Fortschrittsbalken zu aktualisieren. Wie wir auf der letzten Folie gesehen haben, teilen diese beiden Komponenten keine gemeinsamen übergeordneten Komponenten, zwischen denen Daten übergeben werden. Der Fortschrittsbalken ist dem Header untergeordnet, und das Kontrollkästchen ist den Kartenabschnitten untergeordnet, daher ist der Ereignisbus ideal für seinen Service. Ich werde diesen Ereignisbus oder diese Vue Instanz zu unserer Datei main.js hinzufügen. Gehen Sie zu der main.js, und wir müssen sicherstellen, dass wir dies vor der Renderfunktion hinzufügen. Direkt unter den Importen werden wir eine Konstante namens Event-Bus exportieren, und wir werden dies auf eine neue Vue Instanz setzen. Dadurch wird eine Konstante namens Event-Bus exportiert, wir können diese nun in jede Datei importieren, die wir darauf zugreifen möchten , indem wir den Ereignisbusnamen verwenden, den wir ihm bereits gegeben haben. Dieses Kontrollkästchen wird eine neue Komponentendatei sein, damit wir sie zu den Prognoseabschnitten hinzufügen können. Wir können voran gehen und dies auf die übliche Weise schaffen. Also gehen Sie zu den Komponenten, und dann innerhalb der Karte, werde ich eine neue Datei namens sectionCompleted.Vue erstellen, dann können wir die Vorlage Abschnitt mit dem Kontrollkästchen und auch den Text hinzufügen. Fügen Sie unsere Vorlagen ganz oben hinzu. Um zu beginnen, werde ich eine umgebende Busshop-Reihe hinzufügen. Also im Eröffnungsabschnitt können wir die Klasse der Zeile hinzufügen und dann ein zweites div nest innen und das wird für unsere Formulargruppe sein. Lassen Sie uns einige günstige Shopklassen der Formularprüfung hinzufügen, und bilden Sie auch Check in line. Dies sind Stile, die wir zuvor verwendet haben. Diese stimmen mit dem Rest der App überein. Dann noch ein div hier mit der Klasse des Formularchecklabels. Dies ist das umgebende div für unsere Eingaben. Die Eingaben werden eine Art von Kontrollkästchen haben, so dass wir auswählen können, sobald der aktuelle Abschnitt bearbeitet wurde, und es ist abgeschlossen. Schließlich einige Klassen von Formularüberprüfungen Eingabe. Danach können wir unseren Text der Markierung Abschnitt als abgeschlossen hinzufügen. Um zu beginnen, werde ich das in der Kartenvorderseite platzieren. Wir können es bald dem Rest hinzufügen. Also gehen Sie auf die Cardfront.Vue, und dann können wir nach unten gehen, um das Skript und wir können unsere Importe hinzufügen oder Abschnitt abgeschlossen. Dies ist auch in der gleichen Ordner der Karte, so werden wir wählen. /sectionCompleted. Dann können wir dies als eine Komponente innerhalb der Instanz registrieren und nennen wir mine ccSectionCompleted, das ist der Abschnitt abgeschlossen Name, den wir dem Import gerade hier gegeben haben. Die Komponente kann nun zu den Vorlagen hinzugefügt werden. Ich werde dies am Ende des Bearbeitungsabschnitts hinzufügen, scrollen Sie also zurück zu den Vorlagen, und der Bearbeitungsabschnitt ist dieses erste div hier. unterhalb der letzten cc-Text-Eingabe können wir unseren cc-section-completed und das schließende Tag hinzufügen. Geben Sie das sicher und wir sollten jetzt in der Lage sein, die div-Server zu starten und die Komponenten zu sehen. Mine läuft bereits, also werde ich zum Browser gehen und dann nach unten scrollen. Wir sollten jetzt sehen, dass wir die Komponenten auf dem Bildschirm haben. Wir werden das Kontrollkästchen und den Text des Markierungsabschnitts als abgeschlossen haben. Das Kontrollkästchen erscheint aus der Bildschirmliste lassen Sie uns einen Blick auf den SectionCompleted werfen. Bedecken Sie dies, so bilden Sie Checklabel, so ändern Sie das. Toll, das war also das Problem dort. Wir hatten gerade ein Styling-Problem. Jetzt haben wir diese Komponente eingerichtet. Im nächsten Video werden wir dies verwenden, um Daten an den Eventbus zu senden. 83. So fügst du Events zum Event-Bus hinzu: Wir haben jetzt eine SectionComplete Komponenten und die EventBus-Setup. In diesem Video werden wir den EventBus in den heutigen SectionComplete-Komponenten importieren dann eine benutzerdefinierte Ereignisse zurück an den EventBus senden. Beginnen wir mit dem Importieren der EventBus-Datei. Also sprengen Sie einfach die Vorlagen, ich werde die Skript-Tags hinzufügen. Lassen Sie uns zunächst den EventBus importieren. Das ist also ES6-Syntax. Diese codierten Klammern importieren ein einzelnes Mitglied eines Moduls, das wir den EventBus aus der Datei main.JS nennen. Der Dateipfad ist also../.. /main.js. Anstatt also den vollständigen Inhalt des Haupt-JS zu importieren, was nicht das ist, was wir wollen. Wir wollen nur diesen EventBus importieren, das ist dieser Export, den wir hier gemacht haben. Jetzt können wir eine Eigenschaft namens Checked erstellen. Also blasen Sie den Impuls. Wir können unsere Exportvorgaben erstellen und dann unsere Daten auf die übliche Weise hinzufügen. Lassen Sie uns also eine Dateneigenschaft namens Checked erstellen, die anfänglich eine leere Zeichenfolge ist. Dies wird verwendet, um einen true oder false Wert aus der Checkbox zu enthalten. Daher müssen wir dies mit V-Modell als Checkbox-Attribute verwenden. Also lassen Sie uns V-Modell zur Checkbox hinzufügen. Also innerhalb der Eingabe können wir V-Modell hinzufügen und dies auf unseren Datenwert von checked setzen. Dieses Kontrollkästchen benötigt auch einen Klick-Handler. Also lassen Sie uns das auch hinzufügen. Also bei Click und wollen einen Klick-Handler einrichten , der eine Methode namens Abschnitt abgeschlossen auslöst. Sobald Sie darauf geklickt haben, löst dies eine Methode namens Section Completed aus. Ich werde diese Methode verwenden, um mit dem EventBus zu kommunizieren. Also jetzt lassen Sie uns diese Methode unten einrichten. Gehen Sie also zurück zu unserer View-Instanz. Dann direkt nach den Daten können Sie ein Komma hinzufügen und dann unsere Methoden einrichten. Also nennen wir diesen Abschnitt abgeschlossen. Also zuvor haben wir benutzerdefinierte Ereignisse mit diesem ausgegeben. $emittieren. Um dies mit dem Ereignis zu tun, verwenden wir EventBus. $emittieren. Natürlich, wenn Sie den EventBus etwas anderes benennen, müssen Sie einen Namen verwenden, den Sie erstellt haben. Also der EventBus. $emittieren. Dann wie zuvor übergeben wir den Namen, den wir diesem benutzerdefinierten Ereignis innerhalb der Zitate geben möchten . Also werde ich dieses benutzerdefinierte Ereignis als abgeschlossen markieren nennen. Dann trennen Sie es durch ein Komma. Wir wollen den Wert der Schecks senden. Also füge diese.checked hinzu. Diese Komponenten müssen auch in den Overcrowd-Abschnitten zu platziert werden. Gehen wir weiter und machen das jetzt. Wir müssen importieren, registrieren und auch die Komponenten in die Vorlagendateien hinzufügen, genau wie wir es in CardFront.view getan haben. Also lassen Sie uns einfach diese Importanweisung von Abschnitt abgeschlossen kopieren. Wir können diese in der Karte Inside Left hinzufügen. Dann bei diesem als Komponenten durch Komma getrennt. So cc Abschnitt abgeschlossen, die Abschnitt abgeschlossen ist. Dann können wir dies innerhalb der Vorlagen hinzufügen, genau wie wir es mit CardFronts getan haben. Also haben wir dies am unteren Rand des Bearbeitungsbereichs getan. Also lasst uns dasselbe für Inside Left tun. Also direkt unter den Texteingaben, können Sie den cc Section Completed hinzufügen. Dasselbe gilt für das Inside Right, das den Import durchführt, registrieren Sie die Komponenten und dann wieder in die Vorlage unter allen Texteingaben. Das ist die Fronten innen links und innen rechts, die nur den Kartonback.Vue verlassen. Also Tempo des Imports und wir werden genau das gleiche tun. Registrieren Sie die Komponenten des cc-Abschnitts abgeschlossen. Dann fügen wir dies im Editorbereich zusammen mit dem schließenden Tag hinzu und drücken dann auf Speichern. Dann lassen Sie uns dies innerhalb des Browsers testen. Fangen wir also mit der Card Front an. Also haben wir die Komponente, die auf dem Bildschirm angezeigt wird. Innen links können wir es auch sehen. Die Innenseite rechts sieht auch gut aus. Dann endlich die Rückseite. Dies ist also eine Komponente, die jetzt abgeschlossen ist und benutzerdefinierte Ereignisse an den EventBus sendet. Wir werden überprüfen, dass dies im nächsten Video funktioniert wo wir unsere endgültige Komponente für dieses Projekt erstellen , mit der wir den Wert dieses Ereignisses aus dem EventBus erhalten werden. 84. So erhältst du Events aus dem Event-Bus: Wir haben nun Daten an den zentralen Ereignisbus mit einem Dollarzeichen gesendet , um diese benutzerdefinierten Ereignisse zu senden. Nun beginnen wir mit der Erstellung der endgültigen Komponenten dieses Projekts, die der Fortschrittsabschnitt innerhalb der Kopfzeile sein wird. Diese Komponente verwendet auch den Ereignisbus, aber dieses Mal wird es auf das Ereignis warten und die Daten verwenden, die an sie übergeben werden. Wie immer beginnen wir mit der Erstellung der Komponentendatei. Ich werde diese Datei CardProgress.vue nennen. Also innerhalb des Kartenordners werde ich eine neue Datei von CardProgress.vue hinzufügen. So können wir hier unsere üblichen Vorlagen erstellen. Ich werde Tags schreiben, und dann werde ich schließlich Tags stylen. Innerhalb des Skripts werde ich einen leeren Exportstandard für alle View-Instanz erstellen, die wir bald zu Ihnen zurückkommen werden. Diese Komponente wird innerhalb der Header-Komponente verschachtelt. Also müssen wir dies in der header.vue Datei registrieren. Also lassen Sie uns durch diese Datei gehen und wir können damit beginnen, diese neue CardProgress-Datei zu importieren. Also am Anfang der Skripte werde ich unseren Import von CardProgress hinzufügen. Der Dateipfad ist also. /, dies befindet sich auch innerhalb des Kartenordners. So CardProgress.vue, und dann innerhalb unserer Instanz können wir unsere Komponenten registrieren. Also, gerade unter dem Beobachter werde ich ein hinzufügen, und dann unsere Komponenten hinzufügen. Die einzige Komponente, die wir hinzufügen müssen, ist diese Datei. Also werde ich meine CCCardProgress anrufen. Also jetzt mit all der Datei importiert und registriert, können wir jetzt gehen und dies zu unseren Vorlagen hinzufügen. Direkt unter den ungeordneten Listen für die nav Links, wir eine horizontale Linie hinzufügen, und dann unterhalb dieser bei, die ccCardProgress. Wie immer benötigt dies eine Öffnung und das schließende Tag. So ist es jetzt importiert, registriert und eine Vorlage. Wir können nun wieder zur Datei cardprogress.vue zurückgehen und beginnen, unsere Vorlagen hinzuzufügen. Ich werde mit einem umgebenden div beginnen, das das div für unsere Reihe sein wird. So können wir hier Bootstrap-Klassen der Zeile hinzufügen. Dann ein zweites div, und dieses div wird unsere Klasse von col-sm-12 enthalten. Dies ist also eine volle Breite Komponenten. Der Inhalt dieser Vorlage wird also ziemlich unkompliziert sein. Alles, was wir tun werden, ist einen Fortschrittsbalken hinzuzufügen und auch den Text zu vervollständigen , der besagt, wie viele Abschnitte angekreuzt wurden, also zum Beispiel 104 und 204. Also lassen Sie uns diesen Text zuerst mit den P-Tags hinzufügen. Innerhalb hier werden wir die Texte der abgeschlossen hinzufügen. Standardmäßig wird es Null oder vier sein. Die Seriennummer wird dynamisch sein. Dies muss jedes Mal erhöht werden, wenn der Benutzer auf das Kontrollkästchen klickt. Also, um dies dynamisch zu machen. Wir können diese Span-Tags vor und nach der Null hinzufügen, und dann, damit wir den Inhalt zwischen diesen Tags ändern können, werde ich eine ID des Zählers hinzufügen. Dies ist nur so, dass wir später in diesem Video mit JavaScript darauf zugreifen können. Diese Komponente greift auf den Ereignisbus zu. Also müssen wir dies innerhalb der Skripte importieren. Also unten oben auf den Skript-Tags, werden wir den Ereignisbus importieren. Ich werde dies mit der ES6-Syntax tun, die wir uns zuvor angesehen haben. Dadurch wird das einzelne Mitglied des Ereignisbusses aus der Datei main.js importiert. Um auf diese Datei main.js zuzugreifen, ist der Pfad../,../, die main.js. Also, wenn Sie sich von früh an in diesem Kurs erinnern, haben wir uns die View Lifecycle Hooks angesehen. Einer dieser Hooks war der erzeugte Hook, und wir können diesen erzeugten Hook verwenden, um eine Funktion auszuführen. Jede Komponente wird erstellt. In diesem Hook können wir für eine benutzerdefinierte Ereignisse auf der View-Instanz mit der Dollar-Sign On-Methode warten . Also lassen Sie uns das jetzt hinzufügen. Zurück zum Exportstandard, können wir den erstellten Hook hinzufügen. Innerhalb dieses erstellten Hook können wir den Ereignisbus zugreifen und dann ein Dollar-Sign on verwenden, Instanz-Methode, um für eine benutzerdefinierte Ereignisse zu hören. Das Ereignis, auf das wir hören möchten, ist als abgeschlossen markiert. Also diese Markierung als abgeschlossen Ereignis ist diejenige, die an den Ereignisbus aus unserem Abschnitt abgeschlossen Datei übergeben wird . Also wir nur hier, also jedes Mal, wenn der Benutzer auf das Kontrollkästchen klickt, das boolesche Wert von true oder false ist, wird dies dann an den Ereignisbus ausgegeben, und dann haben wir Zugriff auf diese mit der Karte Fortschrittsdatei. Jedes Mal, wenn es eine Änderung an diesem Ereignis gibt, wird dies dann eine Funktion auslösen. Diese Funktion nimmt die Ereignisdaten zwischen den Klammern auf. Also werde ich diese Daten aufrufen, und wir können diese Daten dann innerhalb unseres Funktionskörpers verwenden. Wie wir gerade erwähnt haben, der Wert, der an den Ereignisbus übergeben wird, ein Checkbox-Wert von true oder false. Dies bedeutet, dass diese Daten, die an uns nur hier veröffentlicht werden, entweder wahr oder falsch sein werden. So kann eine if-Anweisung hinzufügen, um zu überprüfen, ob die Daten wahr sind. Wenn dies der Fall ist, möchten wir den Zähler jedes Mal um eins erhöhen. So können wir auf den Zähler mit der ID des Zählers zugreifen, das Span-Tag ist, das in Null umgeben ist. So können wir mit documents.getElementsById darauf zugreifen. Die Id ist natürlich Zähler. Also, jetzt haben wir diesen Zähler ausgewählt. Wir wollen auf den inneren Text zugreifen. Also wollen wir jedes Mal Null um eins erhöhen. Wir können dies leicht mit Punkt in einem Text tun, plus. Wenn die Daten hier also wahr sind, wird die Anzahl jedes Mal um eins erhöht. Also lassen Sie uns das ein Speichern geben und dies im Browser überprüfen. Also gehen Sie zum Browser, und dann, wenn wir markieren Abschnitt als abgeschlossen, wir sehen jetzt, dass wir den Wert von eins oder vier haben. Um zu einem zweiten Abschnitt zu gehen und nehmen Sie ein jetzt sagen zwei oder vier, und dann frei, und dann schließlich vier vor vier. So können wir sehen, wenn Sie immer auf das Kontrollkästchen klicken, der Wert steigt und steigt. Wir müssen dann sicherstellen, dass, wenn der Benutzer das Kontrollkästchen deaktivieren, dass der Wert auch um eins reduziert wird. So können wir dies leicht innerhalb einer else Anweisungen tun. Also, kurz nach der if-Anweisung, können wir auch andere hinzufügen, und dann werde ich nur this.getElementById basierend kopieren , wo auch wir den Zähler auswählen werden. Aber dieses Mal werden wir bei jedem Klick um eins dekrementieren, also speichern Sie das, und jetzt, wenn wir rüber gehen und aktualisieren, fangen wir mit der Front an. Also, jetzt sehen wir eine, die Einsicht links, jetzt sehen wir zwei, und klicken Sie dann wieder auf, und jetzt reduziert es sich wieder auf eins. Versuchen wir es einfach mit einer weiteren Komponente, also zwei, und dann zurück zu einer. So dass alles in Ordnung zu funktionieren scheint. Das letzte, was zu tun ist, ist jetzt erhöhen und verringern den Fortschrittsbalken, um dem Benutzer eine visuelle Anzeige zu geben. Also haben Sie bereits größtenteils mit den if-else-Anweisungen eingerichtet. Also in den if-Anweisungen werde ich wieder in diese documents.getElementById einfügen. Aber dieses Mal möchten wir den Fortschrittsbalken auswählen. Fügen wir also den Fortschrittsbalken direkt unter diesem abgeschlossenen Abschnitt hinzu. Beginnen wir also mit 0 Prozent. Also wird der Wert anfänglich auf Null gesetzt, und dann wollen wir, dass der Maximalwert gleich 100 ist. Dann können wir diesen Wert jedes Mal erhöhen, wenn wir eine ID von CardProgress hinzufügen , also speichern Sie das. Jetzt können wir diese CardProgress Id innerhalb der document.getElementById verwenden. Anstatt den Zähler auszuwählen, fügen wir den CardProgress ein. Aber dieses Mal wollen wir den Wert erhöhen. So dass der Wert jedes Mal um 25 erhöht werden. Das liegt daran, dass es ein Prozentsatz ist, wir haben vier Abschnitte. Jedes Mal, wenn es angeklickt wird, wird es um 25 Prozent steigen, also plus entspricht 25. Also werde ich das kopieren und das in die else-Anweisungen einfügen. Aber dieses Mal, ändern Sie das Plus in ein Negativ und speichern Sie es dann. Dann gehen wir zum Browser und geben Sie uns einen Ausflug. Versuchen wir also, auf einen der Abschnitte zu klicken. So Mark ist als abgeschlossen, und jetzt sehen wir, dass der Fortschrittsbalken zunimmt. Das versucht, das zu bewegen, und es geht auch nach unten. Versuchen wir noch einen Abschnitt, okay gut. Damit alles an Ort und Stelle aussieht, so wie auch der fertige Text steigt und nach unten geht, sehen wir auch den Wert des Fortschrittsbalkens ändern. Eine letzte Sache zu tun, um diese Komponenten zu beenden ist, den Fortschrittsbalken die volle Breite der Seite zu machen. Dies kann mit einem einfachen CSS in der Datei CardProgress.vue erfolgen. Gehen wir also zu den Style-Tags und machen diesen Bereich. Die Stile würden also nur für diesen Abschnitt gelten. Wir wollen den Fortschrittsbalken anvisieren und dann die Breite auf 100 Prozent einstellen. Also mal sehen, wie das jetzt aussieht, wenn wir den Browser aktualisieren, okay gut. Wir sehen, dass der Fortschrittsbalken die volle Breite des Containers umfasst. Also lassen Sie uns dies testen, also klicken Sie auf das Kontrollkästchen. Versuchen wir es mit einem zweiten, es sieht alles gut aus, und ein drittes, okay gut. Das funktioniert jetzt alles, also herzlichen Glückwunsch. Sie haben den Ereignisbus jetzt erfolgreich für die Kommunikation zwischen übergeordneten und untergeordneten Elementen verwendet. 85. So fügst du Mix-Ins hinzu: Da unsere App größer wird, kann es manchmal Situationen geben, in denen Komponenten denselben Code wiederverwenden müssen. Normalerweise ist es nicht empfehlenswert, denselben Code mehr als einmal zu wiederholen. In unserer App, wenn wir uns die CardFront ansehen, so gehen Sie auf die Cardfront.vue, und dann bis zum Skript. Hier haben wir eine neue Methode namens ClearImage. Auch wenn wir zu den CardBack-Komponenten gehen, haben wir auch die gleiche wiederholte Methode gerade hier. Wiederholen Sie also die gleiche ClearImage-Methode mehr als einmal. Um mit diesem vue.js Geräte mit Mixins zu helfen. Mixins sind eine einfachere Möglichkeit, jede Funktionalität von unseren Komponenten zu nehmen. Dies beinhaltet alles, wie unsere Daten, Methoden und berechneten Eigenschaften und platziert in einer eigenen separaten Datei. Diese Datei kann dann in jede Komponente importiert werden, die darauf zugreifen muss. Lassen Sie uns diese Datei im Quellordner erstellen. Ich werde diese Datei die ClearImageMixin nennen, und es kommt nach der Erweiterung the.js. Dann können wir es als Konstante namens ClearImageMixin exportieren. Exportieren Sie also die Konstanten von ClearImageMixin, und Sie können das alles aufrufen, was Sie wollen, aber ich werde dieses ClearImageMixin nennen, da es beschreibend ist. Jetzt kann unsere ClearImage-Methode aus der Cardback.vue Datei aufgerufen werden. Also gehen Sie zum Cardback.vue und dann werde ich diese vollständigen Methoden aufrufen, nicht nur den ClearImage-Abschnitt. Schneiden Sie also die vollständige Methode bis zu dort ab. Stellen Sie auch sicher, dass Sie das schließende Komma entfernen. Dann kann diese Methode nun in unsere Mixin-Datei eingefügt werden. Gehen Sie also rückwärts zu diesen Objekten und fügen Sie dies ein. Wir können hier auch alles andere aus unserer Vue Instanz hinzufügen, wie z. B. alle Daten und berechneten Eigenschaften, die verwandt sein können. Diese Konstante wurde jetzt exportiert. So können wir jetzt zurück auf die Karte, zurück Komponenten, und wichtig die neue Mixin. Zurück zum Anfang des Skripts können wir Importanweisungen für die ersten drei hinzufügen. Auch hier, genau wie der Eventbus, verwenden wir die geschweiften Klammern, um anzugeben, dass wir ein einzelnes Mitglied dieses Moduls auferlegen wollen. In unserem Fall ist der Name ClearImageMixin und dann möchten wir diesen aus dem Dateipfad von../importieren. /ClearimageMixin. Jetzt wird das importiert. Wir können dies jetzt mit dem Rest unseres Codes in der Vue Instanz mischen. Daher können wir innerhalb der Exportstandardwerte auch die Mixin-Eigenschaft hinzufügen, und dies ist ein Array. Ich bin mir sicher, dass es gerade danach aus dem Komma kommt, um dies von den Daten zu trennen. Also im Inneren hier können wir den Namen unseres Mixin hinzufügen, der ClearimageMixin war. Dies ist also die ClearImage-Methode, die jetzt wieder in unsere Komponenten hinzugefügt wurde. Nur wenige, die den Inhalt in unsere vorhandenen Daten mischen. Wenn sich im Objekt widersprüchliche Schlüssel befinden, in denen zusammengeführt werden soll, die Komponentenoptionen Priorität. Wir können unseren Code auch in mehr Mixins aufteilen. Wir sind nicht darauf beschränkt, nur einen Morgen zu benutzen. Der Prozess ist der gleiche, wie wir es gerade getan haben. Wir verschieben den Code in eine eigene Datei, importieren Modul, und dann können wir auch den Namen des mixin zu diesem mixin Array durch ein Komma getrennt hinzufügen . Jetzt müssen wir nur das gleiche in unserem Code aus der Datei machen. Wir werden auch die ClearImage-Methode hinzufügen. Speichern Sie diese Datei und gehen Sie zu CardFront.vue. Also machen wir genau das Gleiche. Wir müssen die vollständige Methode aus der Vue Instanz entfernen. Wir müssen dann den ClearImageMixin importieren. Also fügen Sie diese auf die Unterseite der Importe, genau wie wir es zuvor getan haben. Also ClearimageMixin. Der Dateipfad ist derselbe, es ist../.. /ClearimageMixin. Dann gehen wir zu unseren Exportvorgaben und fügen unser Mixin-Array hinzu. Wir haben nur einen, daher ist ClearImageMixin der einzige Wert innerhalb des Arrays. Jetzt können wir zu unserer App gehen und die ClearImage-Methode testen, damit sie sowohl innerhalb der CardFront- als auch der CardBack-Komponenten funktioniert. Speichern Sie diese Datei und gehen Sie zum Browser. Wir können innerhalb des CardFront-Abschnitts beginnen. Lassen Sie uns eine Datei auswählen, dann fügen Sie das Bild ein, und sobald es heruntergeladen wird, gehen Sie zu dem Bild und klicken Sie auf die Entfernung. Gut. So dass man noch funktioniert. Wir werden dies auch innerhalb der CardBack von Drücken zu testen finden. Wählen Sie also ein Bild aus, öffnen Sie es, stellen Sie das Bild ein, bewegen Sie den Mauszeiger über und entfernen Sie das Bild. Großartig. Also, das funktioniert alles noch. Denken Sie daran, dass wir in unserer App so viele Mixins verwenden können, wie Sie möchten. Das Wort bedenken, wenn wir Code an mehr als einem Ort verwenden müssen. Mixins sind also eine gute Möglichkeit, unsere Projekte zu organisieren und auch jede Code-Wiederholung zu vermeiden. 86. Abschnitts-Outro: Mehr zu Komponenten und Firebase Storage: Herzlichen Glückwunsch zum Erreichen des Endes dieses Abschnitts. Wir haben so viel in diesem Abschnitt behandelt, einschließlich der Arbeit mit Firebase, das Hinzufügen des Textoptionsmenüs, Arbeit mit Komponenten und auch alternative Möglichkeiten, Daten zwischen ihnen zu übergeben. Mittlerweile sollten wir auch eine voll funktionsfähige Grußkartenanwendung mit Funktionen haben, und hoffen, dass Sie auch viel davon gelernt haben. Sie haben jetzt viel über das Erstellen von Anwendungen mit Vue.js gelernt. Lassen Sie uns jetzt weiter lernen im nächsten Abschnitt. 87. Abschnittseinführung: Übergänge und Animationen: Willkommen in dieser brandneuen Rubrik. Wir werden eine Pause vom Hinzufügen neuer Funktionen zu unserer App und auch Komponenten machen, um einige Möglichkeiten zu betrachten, um unsere App wirklich viel schöner zu nutzen. In diesem Abschnitt geht es um das Hinzufügen von Übergängen und Animationen. Dies ist eine großartige Möglichkeit, Ihre Apps viel polierter aussehen zu lassen und die Benutzererfahrung wirklich zu verbessern. Wir hoffen, dass Sie sich auf diesen neuen Abschnitt freuen und wir sehen uns dort. 88. Kurseinheiten zu Übergängen: Bei der Arbeit mit Enter Leave Übergängen gibt es sechs Klassen, die in verschiedenen Phasen des Übergangs angewendet werden. Wir haben frei für die Schnittstelle, die sich mit Start, Ende und auch mit der aktiven Phase befasst . Gleiches gilt auch für die Austrittsphase, wo wir auch Zugang zu den Start-, Verlassen-, eine aktive Klasse haben . Um zu verstehen, was jeder von ihnen tut, habe ich einen einfachen Übergang erstellt, der die Deckkraft einer Elemente oder Komponenten festlegt. Hier haben wir die Schnittstelle und der Übergang beginnt in der v-enter Klasse. Innerhalb dieser Klasse können wir zum Beispiel CSS-Klassen hinzufügen, um zu erklären, wie die Elemente oder Komponenten beginnen zu übergehen. In diesem Beispiel werden unsere Elemente als transparent beginnen. So könnten wir hier die Deckkraft auf Null setzen. Dies gilt nur für das erste Bild des Übergangs. Verwenden Sie es also nur für die anfängliche Startphase. Nach dieser ersten Phase, v-enter dann entfernt, und dann v-enter-to übernimmt. v-enter-to legt den Endzustand für die Enterphase fest. Zum Beispiel könnten wir hier die Deckkraft auf eins setzen, da das Element jetzt eingefügt wird. Während der vollständigen Schnittstelle haben wir auch Zugriff auf eine andere Klasse namens v-enter-active. Da diese gemütliche volle Zwischenphase, ist dies ein idealer Ort, um CSS hinzuzufügen, um die Zeitdauer oder Verzögerung des Übergangs festzulegen. Dann gehen wir zum Urlaubsweg über. Hier haben wir im Grunde das gleiche wie die ersten drei Klassen, überarbeitet. Für das erste Bild des verlassenen Übergangs ausgelöst wird, setzen wir den Anfangszustand mit v-leave. Genau wie die Schnittstelle für einen Frame dauert, dann ist v-leave-to für den Endzustand verantwortlich. Unentschieden, wenn v-leave nach dem ersten Frame entfernt wird. V-Leave-to ist, wo wir den Endzustand für den Übergang hinzufügen. Genau wie zuvor hat der Austrittsübergang auch eine Klasse, die den vollen Urlaub in der Phase abdeckt, genannt v-leave-active. Auch dies ist ideal für bestimmte Dinge wie die Dauer des Übergangs. Das sind also die sechs Klassen, auf die wir während des Übergangs zugreifen können. Die Klassennamen beginnen standardmäßig mit dem Präfix v, wenn sie mit den Übergangselementen verwendet werden. Wir können auch einen Namen zu diesem Übergang hinzufügen, und dieser Name würde dann das Präfix v ersetzen. Zum Beispiel, wenn unser Übergang den Namen fade hatte, werden die Klassen fade-enter, fade-enter-aktiv und so weiter genannt . Aber das sind einige Dinge, die wir im nächsten Video genauer betrachten werden. Wir werden damit beginnen, dies in die Praxis umzusetzen. 89. So fügst du CSS-Übergänge hinzu: Zurück in den kreativen Autos Projekte, um zu beginnen, einige Übergänge in die Praxis umzusetzen. Jetzt haben wir die Übergangsklassen gesehen, die wir verwenden können. Die erste Technik, die ich Ihnen zeigen möchte, ist, einen Übergang anzuwenden , der sich auf Elemente oder Komponenten bezieht. Ich gehe zu der TextOutput.vue Datei. Es ist also wie die TextOutput.vue. Ich werde diesen Übergangs-Wrapper um die Formularelemente hinzufügen. Dies ist das Optionsmenü, das angezeigt wird, wenn Sie über den Text. Dies ist ideal, um einen Übergang hinzuzufügen, da er derzeit nur ohne Effekte wie Ein- und Ausblenden ein- und ausgeblendet wird. Also, was wir über der Form der Übergang Wrapper tun müssen. Also ist die Öffnung so und dann unten am abschließenden Formular, um diesen Übergang zu schließen und dem ein Speichern zu geben. Beachten Sie jedoch, dass die Übergangselemente nur in bestimmten Fällen verwendet werden können. Wir können es mit V verwenden, wenn von V auch wir Komponenten zeigen, die wir bald betrachten werden. Dieser Formularabschnitt funktioniert mit V show. So finden wir im letzten Video, das wir erwähnt haben, den Übergang zu benennen. Um einen Namen anzugeben, fügen wir diesen Namen innerhalb des Übergangs öffnungstags hinzu. Also zurück zum Übergang. Öffnen Sie das Tag. Der Übergang wird verwendet, um das Menü ein- und auszublenden. Nennen wir das Fade. Also Name gleich verblassen. Dieser Übergangsname ersetzt das V-Präfix in CSS. Also lassen Sie uns dies im Stilbereich einrichten. Scrollen Sie also nach unten zu den Style-Tags unten. Wir sind das nicht gerade nach der Auswahl. Hier können wir alle unsere Übergangsklassen hinzufügen. Beginnen wir mit Fade-Enter, Fade-Enter-Aktiv, Fade-Enter-Zu, Fade-Leave. Die letzten beiden sind Fade-Leave-aktiv. Endlich, verblasst Leave-to. Dieses Fade ist der Name des Übergangs, den wir gegeben haben. Dies ist der Ersatz für das Präfix V, das wir zuvor erwähnt haben. Das mag wie eine Menge Dinge aussehen, die hier vor sich gehen, aber wir können die Dinge für dieses Beispiel nicht vereinfachen. Wenn wir also dieses Beispiel von vorher betrachten, hat V Antwort die Kapazität von Null. Auch im Austrittsübergang hat v-leave-to auch die Kapazität von Null. So können wir diese Inside the CSS kombinieren, um die Dinge ein wenig einfacher zu machen. Also über die Spitze haben wir Fade-Enter. Ich werde auch Fade-Leave-hinzufügen, um diesen Abschnitt zu setzen und die Klammern einzugeben und diese mit Fade-Antwort zu kombinieren. Wir werden die Deckkraft genau so einstellen, wie wir es im Beispiel zuvor gesehen haben. Das wird Null sein. Auch v-enter-to und v-leave hat die gleiche CSS-Deckkraft wie eins. So könnten wir diese auch kombinieren. müssen wir jedoch nicht tun. Der Grund dafür ist, dass die CSS-Deckkraft standardmäßig auf eins gesetzt ist. Es gibt keine Notwendigkeit, es zu deklarieren, es sei denn, es ist etwas anderes als Standardwerte. Die Deckkraft, die wir auf Null setzen, wird nach dem ersten Frame entfernt, wodurch die Standardwerte wieder hergestellt werden. Das bedeutet, dass wir V-enter-to entfernen können. Auch v-leave für dieses Beispiel. Lasst uns die beiden entfernen. Das lässt uns also nur mit den aktiven Klassen für die Ein- und Auslassphasen. Wir können eine bestimmte Zeitspanne verwenden, die der Übergang braucht, um zu erscheinen und auch zu entfernen. Diese beiden Klassen können auch kombiniert werden. Stellen Sie die gleiche Übergangszeit ein, halten Sie sie gleichmäßig. Also lasst uns das hier schneiden. Dann lassen Sie uns das einfach da drin hinzufügen. Dann lassen Sie uns Übergang zu beiden Klassen hinzufügen. Also werden wir CSS Übergangseigenschaft verwenden. Also wollen wir die Deckkraft von 0,5 Sekunden einstellen. Also gib dem ein Sparen. Nun, wenn wir zum Browser gehen und dann, wenn wir den Mauszeiger über eines der Elemente bewegen, können wir sehen, dass das Menü schön in und aus einer halben Sekunde verblasst. Das sieht nur ein bisschen schöner aus als vorher. Eine andere Sache, die wir tun können, ist, dass wir auch das CSS für diesen Phasenfade-Übergang verschieben und es als globalen Stil in die Up-to View-Datei hinzufügen können . Sie sind nützlich, wenn wir den Fade-Stil in alle Elemente hinzufügen möchten. Gehen wir rüber zum CSS. Wenn wir die Stile ausschneiden, speichern Sie die Datei. Dann, wenn wir auf die app.vue gehen, können diese in als globale Stile einfügen. Fügen Sie diese einfach unten ein. Wenn ich nun den Mauszeiger über das Menü führe, können wir sehen, dass der Phade immer noch gilt. Während wir dabei sind, können wir auch das Gleiche für die Schaltfläche „Bild entfernen“ tun , um es schön ein- und ausblenden zu lassen. Also habe ich die Bildausgabedatei und dann, um diesen Knopf zu runden, können wir genau das gleiche tun. Wir können den Übergang Wrapper hinzufügen und diesem dann einen Namen von Fade geben. Dann schließen Sie diesen Wrapper ab. Einfach so und geben Sie dem eine Rettung. Wenn wir nun zur App gehen, können wir jetzt sehen, dass die Schaltfläche, sowie das Menü, schön ein- und ausblendet. Dies ist also ein einfaches Beispiel für einen Übergang, aber es macht wirklich einen Unterschied für das Aussehen und das Gefühl unserer App. Als nächstes betrachten wir das Hinzufügen von InCSS-Animationen. 90. So fügst du CSS-Animationen hinzu: Neben Übergängen haben wir auch die Optionen, um Animationen hinzuzufügen. Animationen ermöglichen es uns, schrittweise von einem Stil zum anderen zu wechseln. Wir könnten nach und nach ein Element von einer Farbe zur anderen ändern. In diesem Beispiel werde ich einen Skalierungseffekt auf die Schaltfläche „Bild entfernen“ hinzufügen. Dies bedeutet, dass eine Schaltfläche klein beginnt und dann auf die volle Größe wächst, wenn die Maus über sie schwebt. Wenn die Maus verlässt, schrumpft die äußere Ansicht dann, wenn die Maus verlässt. Wir können auf die gleiche Weise beginnen, indem Sie die Übergangs-Mapper verwenden. Wechseln Sie zur Datei „ImageOutput.vue“. Dann, wenn wir nach der Schaltfläche suchen, um das Bild zu entfernen, das gerade hier ist, werde ich den Namen des Übergangs ändern, um skaliert zu werden. Für die Animation müssen wir die At Keyframes Regel einrichten. Wir müssen Keyframes einrichten, um die Schritte der CSS-Animation zu steuern. Lassen Sie uns zunächst die Keyframes für die Skalierung und die Skalierung einrichten. Unten im CSS, direkt am unteren Rand der Seite, blase einfach diesen Bildselektor dann die at Keyframes. Ich werde eine für die Skalierung erstellen, und dann eine zweite für die Skalierung, einfach so. Dies ist Standard-CSS, es ist nicht Vue spezifisch. Dann müssen wir die Schritte der Animation stoppen. Um die Dinge einfach zu halten, werde ich nur einen Anfang und eine Endphase hinzufügen. Wenn wir es wollten, könnten wir während der Animation sogar mehr Stufen mit unterschiedlichen Prozentsätzen hinzufügen. Fangen wir mit null Prozent an, was der Anfang ist. Bei null Prozent werde ich eine Transformation festlegen. Ich werde die Skala so transformieren, dass sie anfänglich bei Null beginnt, und dann unten werden wir die 100-Prozent-Regel festlegen. Dies wird wieder eine Transformation der Skala sein, aber dieses Mal wird es eins sein. Dadurch werden die Frames eingerichtet, wenn die Animation skaliert wird. Bei Null Prozent ist die Skala Null, also kommt es hierher. Dann am Ende der Transformation wird die Skala dann bis zu eins aufgenommen, was sie in voller Größe macht. Ich werde auch dasselbe für die Skalierung tun, indem ich diese beiden Codezeilen kopiere und sie einfüge. Aber weil wir skalieren, wollen wir das Gegenteil tun. Bei null Prozent wollen wir dieses Mal, dass die Skala eins ist, so dass sie vollständig auf dem Bildschirm in voller Größe sichtbar ist. Dann wollen wir am Ende bei 100 Prozent wieder nach unten geschrumpft werden, damit wir es sehen können. Wir setzen die Skalierung auf Null, wenn wir nur die Null auf 100-Prozent-Stufen hinzufügen. Wir können dies auch ändern, um zu und von statt Null auf 100 Prozent aufgerufen zu werden. Wenn man gut funktioniert, haben wir jetzt die Keyframes Setups steuern, wie die Animation funktionieren soll. Wir können diese zu den CSS-Regeln hinzufügen, genau wie wir es zuvor getan haben. Über den Keyframes werde ich die CSS-Regeln hinzufügen. Denken Sie daran, weil wir diese Animationsskala nennen, Ich werde die Skalenklasse eingeben aktiv hinzufügen. Hier werden wir die Animation setzen, die wir verwenden möchten. Die Animation wird im Keyframe-Abschnitt skaliert, und dann legen wir die Dauer fest. Ich möchte, dass das über 0,5 Sekunden passiert. Dann unten können wir die Urlaub aktive Phase machen. So skalieren Sie aktiv lassen. Dies nimmt wieder eine Animation auf. Dieses Mal, weil wir die Animation verlassen, möchten wir den Scale-Out-Abschnitt verwenden. Die Animation wird verkleinert. Ich werde das über 0,5 Sekunden für die Dauer behalten. Denken Sie daran, die Eingabe aktiv und lassen Sie aktive Klassen, decken Sie die volle Enter und Verlassen Phase. Hier ist ein idealer Ort, um unsere Animation hinzuzufügen, zusammen mit der Zeitskala für seine Aufnahme. Lassen Sie uns das speichern und gehen Sie dann zum Browser. Wenn wir zur Bildausgabe gehen, können wir sehen, wenn wir den Mauszeiger über den Abschnitt bewegen, dass die Schaltfläche, die mit dem Übergang gerundet wurde, jetzt von Null bis zu 100 Prozent der Größe skaliert, über eine halbe Sekunde. Sobald wir diese Keyframes eingerichtet haben, ähnelt das Hinzufügen einer Animation den Übergängen, die wir im letzten Video angesehen haben. Wir haben immer noch Zugriff auf die CSS-Klassen, wie v verlassen und v geben Sie zu. Aber durch die Erinnerung, wenn v enter verwendet wird, wird dies nicht sofort entfernt, nachdem das Element eingefügt wurde. Stattdessen geschieht dies mit den Endereignissen der Animation. Die Root-Übergangselemente sowohl ein Übergangsende als auch ein Animationsende Ereignis-Listener angehängt, sodass Vue JS weiß, wann der Übergang beendet ist. Dies ist ein kleiner Unterschied, der bei der Verwendung von Animationen beachtet werden muss. Als Nächstes fügen Sie Übergänge zu Komponenten hinzu. 91. Komponenten-Übergänge und Übergangsmodi: Wir sind nicht darauf beschränkt, Übergänge auf Animationen zu nur Elementen hinzuzufügen. Wir können sogar zwischen Komponenten wechseln, wenn wir auf die Menü-Links klicken. Es beginnt mit dem bekannten Transition Wrapper , den wir immer noch mit den Keep-Alive-Tags verwenden können. Beginnen wir von vorn in der App.vue. Wenn wir diesen Keep-Alive-Abschnitt mit den Komponenten finden, werde ich nur etwas Platz oben und auch unten erstellen. Dann werden wir den vertrauten Übergang Wrapper erstellen. Fügen Sie dies am Anfang hinzu. Dann auf dem schließenden Tag, direkt nach dem letzten Keep-Alive-Tag, genau so. Dann werde ich den Fade-Namen wiederverwenden, nutzen Sie die Stile, die wir bereits unten festgelegt haben. Nur hier. Lassen Sie uns dies tun, indem Sie den Übergangnamen innerhalb des öffnenden Tags hinzufügen. Der Name gleich dem Fade, und geben Sie ihnen dann eine gleiche. Nun, wenn wir zum Browser gehen, können wir einen Blick auf die Effekte werfen. Wenn wir nun auf die verschiedenen Seiten klicken, können wir sehen, dass es einen Übergang passiert. Aber wenn wir uns genauer ansehen, können wir ein Problem sehen. Um dies genauer zu zeigen, werde ich verkleinern. Dann jetzt, wenn wir auf die verschiedenen Webseiten klicken, können wir sehen, dass die Webseite am unteren Rand beginnt und dann springt. Jetzt ist es wieder in voller Größe. Das ist nicht das Verhalten, das wir erwarten. Der Grund ist, dass standardmäßig die Übergangselemente ein- und verlassen Phase beide gleichzeitig passieren. Wenn eine neue Komponente eintritt, wird der Raum immer noch von allen Komponenten belegt. Sobald die alte Komponente verlässt, wird dann der Raum für die neuen Komponenten erstellt, wodurch das Ende an Ort und Stelle springt. Glücklicherweise schreibe Vue dies einfach mit einem Übergangsmodus, um damit umzugehen. Wir können den Modus als Attribut zum Übergang öffnenden Tag hinzufügen. Gleich nach dem Namen werde ich den Modus hinzufügen. Hier können wir entweder In-Out oder Out-In setzen. Beginnen wir mit In-Out und werfen einen Blick, und geben Sie diese Auffrischung. Jetzt können wir sehen, dass es eine kleine Verzögerung gibt, aber die Seite wird geändert. In-out ist für diese nicht nützlich, da sie zuerst die neue Komponente einfügt und dann die vorhandenen Komponenten entfernt. Lassen Sie uns versuchen, out-in, und mal sehen, wie das aussieht. Wenn wir zurück zum Browser gehen und wir werden wieder verkleinern, nur um sicherzustellen, dass. Großartig. Nun, wenn wir die verschiedenen Seiten auswählen, können wir sehen, dass die Komponente in der gleichen Position geschaltet wird, anstatt unten zu beginnen und dann wieder an Ort und Stelle zu springen. Das ist genau das, was wir wollen. Die alte Komponente wird zuerst entfernt, dann beginnt die neue Komponente zu verblassen. 92. Einführung in Javascript Hooks: In diesem Abschnitt haben wir CSS verwendet, um Animationen und Übergänge in unserer App zu erstellen. Vgs stellt uns auch JavaScript-Hooks zur Verfügung, die wir in bestimmten Phasen des Übergangs verwenden können. Wenn Sie sich von früher im Kurs erinnern, haben wir uns untersucht, wie wir Hook in verschiedenen Lebenszyklusphasen verwenden können. Nun, Transition Hooks Arbeit auch so. Durch die Verwendung dieser Hooks haben wir Zugriff auf alle Funktionen, die JavaScript-Offiziere nicht beschränkt auf nur in CSS anwenden. Er kann die verschiedenen Haken sehen, die wir benutzen können. Genau wie die Übergangsklassen. Wir haben einen Eingang und verlassen in Phase, beide mit vier Haken jeweils. Unterhalb dieser selbsterklärenden. Aber wird mit beginnen, bevor Sie eintreten. Wie es sich anhört, wird dieser Haken am Anfang aufgerufen, bevor die Enter-Phase beginnt. Wir haben dann eingeben, welche Läufe wollen Übergang hat die Schnittstelle begonnen. Der letzte Haken der Zwischenphase ist nach der Eingabe, und dies wird 1C-Elemente oder Komponenten genannt, hat den Übergang in abgeschlossen. Der endgültige Enter Hook heißt Enter abgebrochen. Dies ist nützlich, wenn die Übertragung abgebrochen wird, während in Bearbeitung. Zum Beispiel, wenn VCO falsch wird, bevor der Übergang eine Chance hatte zu beenden, können wir hier einige Bereinigungsarbeiten durchführen oder den Übergang zurück in seinen ursprünglichen Zustand wiederherstellen. Wir haben auch das gleiche auf der Blattphase, aber vor dem Urlaub, verlassen, nach dem Urlaub, und dann auch abgesagt verlassen. Die Anwendung ist eine einfachere ist relativ einfach zu tun. Alles, was wir tun müssen, ist, die Hooks hinzuzufügen, die Sie als Attribut zu den Übergangselementen verwenden möchten . Zum Beispiel, hier haben wir die Eingabe und verlassen Haken als unsere Attribute. Das sind also die Haken, die wir zur Verfügung haben. Gehen wir nun zurück zum Projekt und sehen sie in Aktion. 93. Javascript Hooks in Aktion: Jetzt wissen wir, welche Haken wir uns während des Übergangs zur Verfügung haben. Wir können sie nun zu unserer Anwendung hinzufügen. Ich werde sie verwenden, um einige Anweisungen zu unserer App hinzuzufügen. Diese Anweisungen geben dem Benutzer einfach an, den Abschnitt auf der linken Seite zu bearbeiten, und die Änderungen werden dann auf der Karte auf der rechten Seite angezeigt. Um dies zu tun, werde ich auf die App.vue gehen, und dann am Ende, um sich an den Komponentenübergang zu haken. Auf dem öffnenden Tag werde ich diese auf ihre eigene Zeile hinzufügen, nur damit es besser lesbar ist, und dann am unteren Ende werden wir @ Enter verwenden gleich Enter. Hier verwende ich das @ Symbol als kurze Hand für v auf, um den Enter Hook aufzurufen, füge dann den Methodennamen Enter hinzu. Wir können diese Methode bald erstellen. Aber zuerst fügen wir unsere Anweisung hinzu, die wir anzeigen möchten. Ich werde dies nur über den Übergang tun, aber unter dem nav Header. Ich werde zunächst ein div erstellen, und das wird der umgebende Abschnitt für unsere Anweisungen sein. Lassen Sie uns ein div und auch das schließende Tag erstellen. Hier werde ich Ihnen einige ID von Anweisungen geben, und dann einige Klassen, um es ein wenig schöner aussehen zu lassen. Textmitte und auch kursiv. Innerhalb dieses div werde ich ein neues Bootstrap-Div mit der Klasse der Zeile erstellen , genau so. Dann werde ich hier zwei neue Abschnitte erstellen. Dies wird die Seite in unterteilen, also wird es zwei, sechs Spaltenabschnitte sein. Die linke Seite wird einige Texte haben, um zu sagen, einige Änderungen im Editorbereich unten vornehmen. der rechten Seite wird dem Benutzer dann mitgeteilt , dass die Änderungen unten auf der rechten Seite angezeigt werden. Lassen Sie uns ein weiteres div hinzufügen. In der Tat, lassen Sie es Clustern. Klasse oder Bootstraps col-sm-6, also ist es die Hälfte der Breite der Seite. Dann fügen wir einige p-Tags hinzu, um Text hinzuzufügen, und dann im Inneren verschachtelt ich werde die m-Tags hinzufügen, um dem Text etwas Nachdruck hinzuzufügen. Ich werde mit HTML-Entität beginnen. Das kaufmännische Und-Zeichen, larr, dann Semikolon, und dies ist für den Pfeil nach links. Das retten wir. Wir können sehen, dass der linke Pfeil auf der Seite erscheint. Dann gehe ich voran und füge den Text von Änderungen im Bereich Code bearbeiten unten hinzu. Speichern Sie das und lassen Sie uns sehen, wie das aussieht. Großartig, genau das wollten wir von dem Text oberhalb des Bearbeitungsbereichs. Jetzt werden wir dieses div kopieren und dasselbe für den Ausgabebereich tun. Kopieren Sie diesen sechsspaltigen Abschnitt und fügen Sie ihn dann direkt darunter ein. Etablierte Notwendigkeit, den Text zu ändern, und dieses Mal wird es unter sein wird auf der Karte zeigen, einfach so. Dann brauchen wir die HTML-Entität diesmal des rechten Pfeils. Das kaufmännische Und-Rarr-Semikolon. Toll, also genau das wollten wir. Wir haben nun einige Anweisungen für den Benutzer. Jetzt können wir fortfahren und die Enter-Methode einrichten. Wir haben den Namen der Enter Methode direkt oben hinzugefügt, sorry, direkt unter dem Übergang von Enter. Gehen wir nun zur View-Instanz und erstellen Sie eine neue Methode. Lassen Sie uns dies einfach direkt unter den Daten tun. Fügen wir hier unsere Methoden hinzu, so Nummer eins heißt Enter. Wenn Sie es auf die übliche Weise erstellen und wie bei allen Ereignissen, die wir uns zuvor angesehen haben, haben wir einige Daten an diese Methode übergeben, die Sie in die Räumlichkeiten der Funktion übergeben. Ich werde dies L nennen, da die Daten, die an sie übergeben werden, das Element sind, das wir übergehen, also macht das Sinn. Wir können dies mit einem Konsolenprotokoll sehen. Lassen Sie uns schnell ein Konsolenloggen Sie sich hier ein und geben Sie dann den Wert von L aus, ich habe vergessen zu inspizieren. Gehen Sie dann zur Konsole. Wir werden dies in Aktion sehen, wenn wir zwischen den Komponenten wechseln. Da gehen wir. Jetzt sehen wir die Elemente, die an sie weitergegeben werden. Dies kann bei jedem Javascript verwendet werden, das wir mögen. Ich werde es verwenden, um den Anzeigetyp der Anweisungen auf keine zu setzen. Dies bedeutet, dass Anweisungen zunächst angezeigt werden, wenn die App geladen wird, aber dann werden sie mit JavaScript entfernt werden, wenn wir zwischen Komponenten wechseln. Lassen Sie uns dieses Konsolenprotokoll entfernen und es durch JavaScript ersetzen. Dokument Punkt erhalten Element nach ID. Die ID, die wir greifen möchten, ist dieser Anweisungsabschnitt , den wir eine ID der Anweisungen nur hier geben. Jetzt können wir es packen und dort in die Klammern legen. Dann, um es zu entfernen, können wir den Stil einstellen, obwohl Anzeige gleich nicht sein. Natürlich können wir auch jeden der Haken verwenden, den wir uns im letzten Video zwei angesehen haben, wenn wir müssen. Lasst uns das retten. Wenn wir nun zur Ausgabe gehen, können wir die Anweisungen noch da sehen. Aber wenn wir zu verschiedenen Komponenten wechseln, sehen wir, dass es jetzt entfernt wird. Die Anweisungen sind nur vorhanden, wenn der Benutzer die Website zum ersten Mal besucht. Natürlich können wir auch alle anderen Haken verwenden, die wir uns im letzten Video angeschaut haben. Es ist jedoch eine wichtige Sache zu beachten, wenn Sie sowohl Enter als auch Leave Haken verwenden. Wenn Sie nur JavaScript verwenden, anstatt JavaScript-Hooks zusammen mit CSS-Übergängen zu mischen, müssen wir ein zweites Argument hinzufügen. Das zweite Argument ist der fertige Callback. Wir übergeben dies in die Klammern unserer Methode neben L. Getrennt durch Komma, werden wir als zweites Argument getan hinzufügen. Dann nennen wir es als Funktion am Ende unseres JavaScript-Codes. Gerade am Ende dieser Methode können wir getan hinzufügen, um die Funktion aufzurufen. Dies wird es dann als Funktion am Ende unseres Codes aufrufen . CSS-Übergänge haben Dinge wie Zeitdauer, das Signalende eines Übergangs oder eine Animation. Bei der Verwendung von JavaScript müssen wir am Ende des Codes getan hinzufügen , um Vue.js mitzuteilen, wenn der Übergang tatsächlich abgeschlossen ist. Wenn wir dies in Kombination mit CSS verwenden, ist der fertige Rückruf optional, wenn Hooks über diese Enter und Leave verwendet werden, nur L ist erforderlich. Schließlich gilt es als gute Praxis, Vue.js mitzuteilen , wenn wir nur JavaScript für einen Übergang verwenden, anstatt sowohl JavaScript als auch CSS zusammen zu verwenden. Auf diese Weise kann Vue.js die CSS-Erkennungsstufe überspringen. Wir können dies tun, indem wir dem Übergang weitere Attribute hinzufügen. Gehen wir zurück zum Übergang öffnung-Tag, und direkt nach dem @ Enter und wollen eine v-Bind zu tun. CSS ist gleich false. Dies ist natürlich nicht für unsere Verwendung, da wir auch den JavaScript-Hook mit dem Fade-CSS gemischt haben, so dass wir diese Zeile entfernen können. Aber es ist nützlich, sich bewusst zu sein, und Sie können es in der Zukunft brauchen. So können wir JavaScript-Hooks verwenden. Im nächsten Video schauen wir uns an, wie wir sowohl Übergänge als auch Animationen mischen können. 94. Verbindung von Animationen und Übergängen: Wir haben bisher sowohl Übergänge als auch Animationen unabhängig betrachtet. Beide können auch gemischt werden, um zusammenzuarbeiten. Um dies zu tun, müssen wir die Don't call Markierung aus der app.vue Datei entfernen. Lassen Sie uns gehen und tun, dass jetzt innerhalb der app.vue und unten innerhalb der Methode, wir können die fertig, zweiten Argumente und dann auch den Aufruf am Ende unserer Methode entfernen . Geben Sie uns Rettung. Wir entfernen dies, weil es verhindert, dass VGS die CSS-Übergänge erkennt, die wir verwenden werden. Lassen Sie uns also beginnen, indem wir auf die imageoutputs.vue Datei gehen. Ich schneide zuerst die Stile von hier aus und verschiebe sie dann in die Hauptdatei app.js innerhalb der Style-Tags. Lassen Sie uns damit beginnen, die Skala zu schneiden. Skalieren von Enter-aktiv bis zu den Keyframes. Schneiden Sie also die außerhalb der Bildausgabe, speichern Sie das und gehen Sie dann zum app.vue. Unten in der Art können wir diese unter den gefälschten Klassen hinzufügen. Also kleben Sie das da rein. diese Styles jetzt weltweit verfügbar sind, können wir sie in der gesamten App verwenden. Als Beispiel können wir in Skalenanimation mit dem vorhandenen Fade mischen. Also, was ich zuerst tun werde, ist, das Fade-Enter-Aktiv und auch das Fade-Leave-Aktive auf ihre eigenen Linien aufzuteilen. So können wir sie unabhängig voneinander nutzen. Also werde ich dies in Aktion mit dem Fade-Enter und dem zweiten ausschneiden und auch den Fade-Leave vom ersten entfernen. Wir können jetzt die Skalierung in und Skalierung von Animationen mischen, aber die Dauer ändern, um länger zu sein. Sagen wir zwei Sekunden. Also innerhalb des fade-enter-active, gehen, um den Übergang der Deckkraft für diese Zeit zu halten, werden wir es mit Animation mischen. Lassen Sie uns die Animation der Skalierung hinzufügen. Diese Zeit über eine Dauer von zwei Sekunden. Animation schnell skalieren, setzen wir mit den Keyframes unten. Beginnen Sie das hier. Wenn wir jetzt auch verblassen, können wir auch Scalout verwenden. Lassen Sie uns dies innerhalb des Fade-Leave-Active tun. Wir können eine Animation, verwenden Sie die Skalierungs-Keyframes über eine Dauer von zwei Sekunden. Jetzt speichern wir das und gehen Sie zum Browser und sehen, wie das aussieht. Machen Sie es ein bisschen kleiner, damit wir sehen können, wie es rein- und rauskommt. Großartig. Es sieht also nicht hübsch aus, aber man kann als Demonstration sehen, wie Animation und Übergang zusammenarbeiten. Jetzt haben Sie eine Animation und einen Übergang, aber beide fließen für unterschiedliche Dauer, Dinge können ein wenig durcheinander sein. Wir müssen VGS sagen, wenn wir die Animation wollen, alle der Übergang eine Priorität für die Zeit in sein. Wir tun dies innerhalb der Übergangselemente, indem wir den Übergangstyp festlegen. Gehen wir also zurück zum Editor und finden Sie den Übergangs-Wrapper , den Sie verwendet haben. Nur hier. Kurz nach dem JavaScript-Hook können wir einen Typ hinzufügen. Lassen Sie uns die Priorität für die Animation festlegen und sehen, wie wir aussehen. Daher ist die Animation eine Priorität. Lassen Sie uns dies in Übergang ändern und dann speichern und jetzt können wir sehen, dass es ein wenig anders aussieht. Es funktioniert nicht ganz für unsere Anwendung, aber es zeigt Ihnen, wie wir den Typ oder die Priorität für den Übergang festlegen können. Ich werde diesen Typ entfernen, da wir ihn nicht brauchen. Dies liegt daran, dass ich auch die Animation aus dem CSS entfernen werde. Lassen Sie uns den Typ entfernen und dann zu den Stilen, lassen Sie uns die Animationen entfernen, die wir gerade hinzugefügt haben, weil Sie diese nicht für unsere Verwendung benötigen. Also gib uns sparen und hoffentlich sollte es wieder normal werden. Großartig. So können wir einstellen, ob ein Übergang oder eine Animation beim Mischen beider Typen Priorität haben 95. Benutzerdefinierte Kurseinheiten zu Übergängen: Bisher haben wir bei der Verwendung von Übergängen die Klassen verwendet, die uns von vuejs zur Verfügung gestellt werden, wie v-enter und v-leave, die Sie hier sehen können. Dies ist ideal für Kleinbuchstaben, aber vielleicht möchten wir unsere eigenen benutzerdefinierten CSS-Klassen verwenden. Diese Situationen können auftreten, insbesondere wenn eine Bibliothek von Drittanbietern für Animationen verwendet wird. Animationsbibliotheken wie animate.css arbeiten, indem sie die Bibliothek als CSS-Datei einschließen oder einen CDN-Link zur Bibliothek verwenden. Dann, um auf die Animationen zuzugreifen, verwenden wir die benutzerdefinierten Klassennamen für jede Animation, wie Klasse gleich Grenzen, f oder Beispiel. Wir zählen diesen benutzerdefinierten Klassennamen mit den Hooks bereitgestellten Tools. Stattdessen stellt vuejs uns jedoch einige benutzerdefinierte Klassen zur Verfügung, um jede Übergangsklasse zu ersetzen. Zum Beispiel können wir das Anti-Class-Attribut mit unserer eigenen benutzerdefinierten CSS-Klasse hinzufügen . Dies wird dann die v-enter Klasse ersetzen. Wir können dies in Aktion sehen, wenn Sie zu unserer App gehen. Beginnen wir mit der Bildausgabedatei. Wir gaben diesem Übergang einen Namen der Skala, für die Schaltfläche „Bild entfernen“, auch über in der app.vue, unten im Stilbereich, unten unten unten unten. Wir haben dann die Klassennamen erstellt. Wir verwenden von Skala geben aktiv ein und skalieren lassen aktiv. Anstatt diese voreingestellten Namen zu verwenden, können wir die benutzerdefinierten Klassen fragen, die wir gerade in den Folien betrachtet haben. Um dies zu tun, über in den Bildausgaben, können wir den Namen entfernen, den Sie zuvor angegeben haben. Lassen Sie die Namensattribute entfernen, und dann in der nächsten Zeile werde ich einige neue Attribute hinzufügen, um dann unsere benutzerdefinierten Klassennamen einzurichten. Also werde ich mit der Eingabe der aktiven Klasse beginnen, und dann ist es auf unseren benutzerdefinierten Namen der benutzerdefinierten Eingabe aktiv, natürlich kann dies ein beliebiger Name sein. Dann möchte ich dasselbe für verlassen aktive Klasse tun und dies wieder auf unseren benutzerdefinierten Namen setzen. Also werde ich benutzerdefinierte verwenden, aktiv lassen. Um dies nun mit dem CSS zu verknüpfen, gehen wir zurück zum app.vue und gehen dann zu den Web-Scale-Klassen. Wir können dann ändern, ist es, Phasen zu aktivieren, um unsere benutzerdefinierten CSS-Klassennamen zu sein. Also die erste, anstatt zu skalieren, war es benutzerdefinierte, geben Sie aktiv ein. Dann natürlich das gleiche für die Urlaubsphase des benutzerdefinierten verlassen aktiv. Also geben Sie es ein Speichern und dann lassen Sie uns aktualisieren oder überprüfen Sie dies im Browser. Also, wenn alles gut funktioniert, sollten wir jetzt mit dem Mauszeiger über die Schaltfläche „Bild entfernen“ bewegen und sehen, wie sie wie zuvor skaliert werden, aber diesmal unsere benutzerdefinierten Klassen verwenden. 96. Anfängliche Rendering-Übergänge: Wenn unsere App zum ersten Mal geladen wird, erscheint die Karte ohne Styling. Wenn wir zwischen den Komponenten wechseln, haben wir diese Fade-Effekte hinzugefügt. Es wird auch schön sein, wenn wir die Karte auch einblenden könnten, wenn die App geladen wird. Um dies zu tun, stellt Vue.js uns das Attribut „appear“ zur Verfügung. Wir können diese Attribute einfach innerhalb der Übergangselemente hinzufügen. Ich gehe zu der „App.vue“, wo sich dieser Übergang befindet. Es verwendet Fade-Übergang hier um die gehalten lebendigen Komponenten. Wir können dies als Attribut hinzufügen, genau wie der Name und auch der Modus. Fügen Sie einfach „Erscheinen“ hinzu und geben Sie diesem dann ein „Speichern“. Nun, wenn wir auf die Fade-Klasse innerhalb des CSS gehen. Wenn Sie erscheinen verwenden, wird der Übergang, den es gilt, aus dem CSS genommen, das wir bereits eingerichtet haben, um einzugeben und auch zu verlassen. Da Sie das Einblenden der Deckkraft haben, ist dies der Effekt, der beim Erscheinen verwendet wird. Wir können das in Aktion sehen. Wenn wir eine der Dauern auf drei Sekunden ändern. Ich werde das in der erscheinenden Klasse tun. Also „fade-enter-aktiv“. Anstatt 0,5 Sekunden, werde ich dies auf drei Sekunden ändern und dann „speichern“. Wenn wir nun den Browser neu laden, dauert das anfängliche Laden länger, bis es eingeblendet wird. Ändern Sie das zurück auf 0,5 Sekunden, „aktualisieren“. Jetzt können wir sehen, dass es viel schneller ist. Wenn wir jedoch wollten, müssen wir diese vorhandene Fade-Klasse nicht automatisch verwenden. Wir können dies mit einem benutzerdefinierten Klassennamen überschreiben. Genau wie wir es uns im letzten Video angeschaut haben. Wir können die gleichen Namen verwenden, aber mit dem angezeigten Präfix, wie „AppeActiveClass“, um den Übergang zu sichern. Ich werde einen benutzerdefinierten Namen einrichten. Also „AppeActiveClass“. Dann können wir unseren benutzerdefinierten Namen hinzufügen, 'custom-appear-active-class“. Jetzt ist das Setup, wir können jetzt zum CSS gehen. In der Tat werde ich einfach diesen benutzerdefinierten Namen kopieren. Dann bis zum CSS können wir das einrichten. Ich muss nur „fade-enter-aktiv“, fügen Sie das ein. Wieder möchten Sie den Übergang für die Deckkraft einrichten. Lassen Sie uns dies zum Beispiel auf eine Sekunde setzen. Jetzt wird dieser eine zweite Übergang unabhängig sein und alle vorhandenen Klassen außer Kraft setzen. Lassen Sie uns dies in Aktion mit „refresh“ sehen. Das sieht ungefähr eine Sekunde aus. Das scheint jetzt in Kraft zu treten. diese Weise können wir Übergänge zum ursprünglichen Rendering hinzufügen. 97. Element-Übergänge und Tasten: Die Übergänge, die wir bisher betrachtet haben, haben nur ein einzelnes Element zum Beispiel, der Bildübergang entfernen war ein einzelnes Tastenelement. Auch die Text-Optionen wir verblassen es in und aus, obwohl diese hatten viele Elemente innen verschachtelt, sie werden immer noch eine Form als Haupt-äußere Element. Wir können auch zwischen zwei getrennten Elementen übergehen. Eine häufige Notwendigkeit Finish ist bei der Verwendung von v-if und v-else. Ich gehe zurück zum ersten Projekt, wo wir das auch anwenden können. Aber zuerst werde ich die Skalenanimation aus der app.vue Ihrer Datei kopieren. Gehen Sie zum CSS, erweichen Sie die Skala, geben Sie aktiv ein. In der Tat, wir benennen dies in benutzerdefinierte, aber jetzt lassen Sie uns einfach kopieren und dies in einem Moment ändern. Öffnen wir nun die Besetzungslisten-Anwendung von Anfang an im Kurs. Ziehen Sie das Projekt in Visual Studio. Dann öffnen wir dies, indem Sie auf die Indexseite doppelklicken. Lassen Sie uns daran in der Datei index.html arbeiten. Wir haben eine if-else-Anweisung, um die Namen zu zeigen, die der Liste hinzugefügt wurde, die gerade hier unten ist. Beide if-Anweisungen und else Abschnitt unten zeigt ein div. Dieser if-Abschnitt zeigt den Namen an. Wenn Namen, die innerhalb des Gästelistennamen-Array verfügbar sind. Wenn nicht, haben wir dann ein separates div direkt unten, das besagt, dass der Text noch keine Namen hinzugefügt wurden. Dies ist perfekt für den Wechsel zwischen diesen beiden div-Elementen. Um dies zu tun, müssen wir nur unseren vertrauten Übergangs-Mapper hinzufügen. Schließen wir diese Seitenleiste für mehr Platz. Dann knapp unter dem div mit der Klasse des Kartenblocks. Lassen Sie uns den Übergang Wrapper hinzufügen. Lassen Sie uns etwas Platz machen, dann nach dem keine Namen Adjektiv hinzufügen. Wir können das hier einschließen, einfach so. Jetzt können wir den Namen der Skalierung hinzufügen, um dies mit der Animation CSS zu verknüpfen, die wir zuvor hinzugefügt haben, also lassen Sie uns Namen zum öffnenden Tag der Skalierung hinzufügen. Dann in keine app.css. Wir können dann das CSS hinzufügen, das Sie aus allen vorherigen Projekten kopiert haben. Alles, was wir tun müssen, ist benutzerdefinierte durch den Skalennamen zu ersetzen oder für die Eingabe aktiv und auch für die verlassen aktiv, so speichern Sie das. Jetzt haben wir diese Indexseite im Browser geöffnet und dann aktualisiert. Wir können einen Namen zur Gästeliste hinzufügen und dann einreichen. Wir können sehen, dass der Name wie zuvor hinzugefügt wird. Wir können keine dieser Skalierungen in Kraft sehen. Das funktioniert eindeutig nicht. Der Grund, warum es nicht funktioniert, ist, dass wir zwischen zwei div-Elementen mit dem gleichen, wenn else Block wechseln . Das Problem wird immer auftreten, wenn beide Elemente gleich sind. Wenn es sich um div-Tags oder eines der Elemente handelt. Um dies zu beheben, benötigen wir einen anderen Schlüssel für jedes Element, so dass View JS zwischen ihnen unterscheiden kann. Gehen wir zurück zur App. Dann innerhalb des v-if-Blocks, werde ich einen Schlüssel hinzufügen und wir werden diese Namen nennen. Dann fügen die meisten im zweiten Block für die else-Anweisung keinen zweiten Schlüssel mit unserem Namen der Liste leer hinzu. Dies kann ein beliebiger Name sein, den Sie wollen, also geben Sie dem einen Speichern. Wenn wir nun zurück zum Browser gehen und dann neu laden, fügen wir einen Namen zur Liste hinzu und geben Sie ein. Jetzt können wir sehen, dass wir die Skala im Übergang haben. Es sieht ein wenig seltsam aus, weil wir das Fold Div anstatt nur einen Namen übergehen . Aber wir können deutlich sehen, dass es jetzt funktioniert. Denken Sie daran, wenn wir zwischen zwei Elementen wechseln, die nicht identisch sind, wie AP-Elemente und ein div, müssen wir diesen Schlüssel nicht hinzufügen. Wenn wir weitere Namen hinzufügen, können Sie sehen, dass der Übergang nicht nach dem Vornamen gilt. Der Übergang mit Listen funktioniert ein wenig anders, und wir werden uns ansehen, wie das als nächstes zu tun ist. 98. Gruppen-Übergänge: Im letzten Video erwähnten wir das Hinzufügen von Übergängen zu einer Liste, wie wir hier mit der v for-Schleife machen, funktioniert ein wenig anders. Lassen Sie uns beginnen, indem Sie den Übergang bewegen, um nur v für Schleife zu umgeben. Lassen Sie uns das öffnende Übergangstag schneiden. Dann werde ich dies direkt nach den v if-Anweisungen hinzufügen, indem ich dort beginne und dann das schließende Übergangstag ausschneide, aber auch dies ausschneide und dann direkt nach dem Block für die for-Schleife einfügen. [ unhörbar] und lassen Sie uns dies im Browser öffnen und aktualisieren. Probieren wir das aus. Lassen Sie uns beginnen, indem Sie einige Namen hinzufügen. Fügen wir ein zweites hinzu. Wir können sehen, dass nur der Vorname, den wir hinzugefügt haben, auf der Gästeliste erschienen ist. Das sieht etwas seltsam aus. Öffnen wir die Konsole und sehen, was los ist. Klicken Sie mit der rechten Maustaste, und gehen Sie zu Überprüfen Lassen Sie uns die Konsole aktualisieren und öffnen, also fügen Sie einen Namen und eine Antwort hinzu. Sie können sehen, dass dort kein Fehler vorliegt. Lassen Sie uns versuchen, einen zweiten Namen hinzuzufügen. Jetzt sehen wir einen roten Fehler. Meinungen sind die Konsole. Lasst uns das aufmachen. Die Fehlermeldung gibt uns einen Hinweis darauf, wie wir das beheben können. Er sagt, der Übergang kann nur für ein einzelnes Element verwendet werden. Wir müssen Übergangsgruppe für Listen verwenden. Lass es uns mal ausprobieren. Lassen Sie uns den Übergang zu Übergangsgruppe ändern. Lassen Sie uns versuchen, im Browser zu scannen. Die erste wird angezeigt, und dann wird auch die zweite angezeigt, und wir sehen keine Fehlermeldungen in der Konsole. Es gibt einen Unterschied bei der Verwendung von Übergangsgruppe. Es wird ein umgebendes Span-Element zu unserer Liste rendern. Wir können dies sehen, wenn wir die Dev-Tools wieder öffnen und die Namenselemente überprüfen. Klicken Sie auf den Inspektor, und gehen Sie dann über die Namenselemente. Wählen Sie eine dieser Optionen aus. Der erste ist in Ordnung. Lasst uns ein bisschen mehr Platz machen. Wenn wir nun den Code in den Entwicklungstools betrachten, sind dies drei Namen von A, B, C, die Sie gerade hinzugefügt haben, und haben auch die Spanne ta, die all diese drei Namen umgibt. Wir wissen, dass wir das nicht in den Code geschrieben haben, weil wir es hier nicht sehen können. Wenn Sie die normalen Übergangselemente verwenden, wird dadurch kein Element gerendert. Wir müssen uns dessen bewusst sein, wenn Übergangsgruppe verwendet wird. Wir haben jedoch die Kontrolle darüber, welches Element es verwendet. Wir sind nicht darauf beschränkt, nur saubere Spannelemente zu verwenden. Der Elementtyp kann durch Hinzufügen eines Tag-Attributen geändert werden, und dies geschieht innerhalb des öffnenden Übergangs-Gruppen-Tags. Gleich nach dem Namen werde ich auch die Tag-Elemente hinzufügen. Fügen wir zum Beispiel ein p-Tag hinzu. Dies wird die Spanne zu einem p-Elemente ändern. Zurück öffnen Sie Anpassungswerkzeuge. Lasst uns das mal ausprobieren. Lassen Sie uns aktualisieren, und dann müssen wir einen Namen hinzufügen. Lassen Sie uns Namen hinzufügen, klicken Sie auf den 'Inspector' und wählen Sie unseren Namen. Dort habe ich den Namen Chris, und jetzt habe ich ein umgebendes p-Tag anstatt die Spanne. Ich werde dieses Tag-Attribut als Spanne entfernen, unser CSS oder Layout nicht durcheinander bringen, also ist es in Ordnung, dort zu bleiben. Ich wollte dir nur zeigen, wie du das machst, falls du irgendwelche Probleme hast. Das letzte, was Sie vielleicht bereits entdeckt haben, ist das erste Mal, dass wir der Liste hinzufügen, der Name ist nicht animiert. Lassen Sie uns einfach die Entwicklungstools schließen. Lassen Sie uns unseren Vornamen hinzufügen, und Sie können sehen, dass er direkt hineinspringt, ohne flüssige Animationen. Dieses Problem liegt in unserem if-Zustand. Der Übergang gilt nur, wenn das Namensrecht größer als Null und nicht gleich ist. Um dies zu beheben, können wir unseren Code umgestalten und ihn bekannt machen, aber kompakter zu. Lassen Sie uns zuerst dieses vollständige öffnende div mit if Bedingung kopieren, dann möchte ich es löschen. Entfernen Sie auch das schließende div. Nun dieser andere Abschnitt, wir möchten dies entfernen und fügen Sie in die if-Anweisungen, die wir gerade von zuvor kopiert. Wir brauchen den Schlüssel nicht mehr, also können wir ihn entfernen. Alles, was ich tun möchte, ist, das Größer-als-Zeichen durch die Gleichheitszeichen zu ersetzen. Dadurch wird der Text ohne Namen noch angezeigt, wenn das Array Names Null ist. Dann wird alles andere die Namen in dem obigen div enthalten. Nun hoffentlich können wir das retten und sollten jetzt funktionieren. Geben Sie ihm eine Aktualisierung, und lassen Sie uns dies in Aktion sehen. Fügen Sie einen Vornamen hinzu, und jetzt können wir den Übergang, unseren zweiten Namen und so weiter sehen . Das funktioniert alles gut. Wenn wir zurück zum Anfang gehen, können wir sehen, dass unsere keine Namen Text noch hinzugefügt wird, wenn es keine Namen innerhalb des Arrays gibt, dann wird es durch irgendwelche Namen ersetzt, die mit Animationen hinzufügen, all meine Arbeit. 99. V-move Kurseinheit und dynamische Übergange, Namen: Wenn Sie sich früher im Kurs erinnern, als wir die Gästelisten-App erstellt haben. Wir haben es eingerichtet, so dass die hinzugefügten Namen alphabetisch angeordnet sind. Wenn ich a, b und dann c hinzufüge , dann wenn wir wieder ein hinzufügen, können wir sehen, dass dies am Anfang platziert wird und der ganze Rest bewegt sich, um Platz zu machen, anstatt diese Namen nur aus dem Weg springen. Diese Bewegung der Elemente kann auch mit einer v-move-Klasse animiert werden. V move funktioniert wie Übergangsklassen, die wir uns bereits angesehen haben. Wir ersetzen das v durch den Namen, den Sie in der Übergangsgruppe hinzufügen möchten. Innerhalb unserer App haben wir bereits einen Namen der Skala. Dies wird einen Klassennamen der Skalenbewegung erstellen, die wir in einer CSS-Datei verwenden können. Also lasst uns zur App gehen, CSS. Ich werde das jetzt hinzufügen. Fügen Sie dies dann direkt über den Schlüsselbildern hinzu. So skalieren Sie sich. Dann möchte ich einen Übergang hinzufügen, die Transformation über 1 Sekunde setzen. Mit einer neuen Klasse können wir jeden Übergang hinzufügen, den wir wollen. Ich werde nur die Bewegung von 1 Sekunde übergehen, um den Zug ein wenig glatter zu machen. Mal sehen, wie das im Browser aussieht. Also lassen Sie uns hinzufügen a, b, und dann c. Nun, wenn ich ein in wieder hinzufügen, sehen wir eine schöne glatte Effekte für die b. Jetzt aus dem Weg. So sieht das jetzt viel besser aus. Wir haben jetzt diesen reibungslosen Übergang, wenn neue Elemente hinzugefügt werden. Eine letzte Sache, bevor wir dieses Video aufpacken, ist die Namensattribute , die wir dem Übergang hinzugefügt haben, können auch dynamisch sein. Wir können entweder v bind verwenden, wie wir es in der Vergangenheit tun mussten, oder wir können auch die kürzere und den Doppelpunkt verwenden, um Eigenschaft des Staates innerhalb des Öffnungs-Tags zu bieten. Fügen wir einen Doppelpunkt hinzu, um dies dynamisch zu machen. Dann können wir dies als Dateneigenschaft einrichten, um seinen Namen zu ändern. Anstatt zu skalieren, wenn wir dies zum Beispiel den Effekt1 nennen würden. Wir können es dann als Dateneigenschaft einrichten. Lassen Sie uns zur app.js gehen, und wir können dies innerhalb unserer Daten hinzufügen. Also innerhalb der öffnenden und schließenden Datentags werde ich diese zum Prozentsatz der Ereigniskapazität hinzufügen. Der Name war Effekt1. Wir können unseren Namen der Skala wieder hier drinnen hinzufügen. Dies ist also nur ein grundlegendes Beispiel, das in unserem Skalenübergangsnamen verwendet wird. Um das vorhandene CSS zu verwenden. Wir könnten mehrere Übergänge innerhalb der CSS-Datei regeln und diese basierend auf dem Namen der Dateneigenschaft anwenden. Zum Beispiel könnten wir ein Kontrollkästchen haben oder eine Eingabe auswählen , damit der Benutzer den Übergangstyp ändern kann. Drücken Sie also auf Speichern, und lassen Sie uns im Browser aktualisieren und überprüfen Sie, dass unser Skalenübergang immer noch funktioniert. Alles scheint dort immer noch richtig zu funktionieren. Außerdem funktioniert diese Bindung auch bei Attributen, wie JavaScript-Hooks. So könnten wir zu unserer Übergangsgruppe innerhalb der Indexseite zurückkehren. Wir könnten etwas tun, wie vor-enter, setzen Sie dies ein Wert oder Doppelpunkt eingeben, und tun Sie das gleiche nur hier. Dies macht all diese Haken und Übergänge wirklich flexibel. Obwohl wir nur relativ einfache Übergänge und Animationen zu dieser App hinzugefügt haben, können sie am Ende einen großen Unterschied machen indem wir unsere App viel polierter und vollständiger aussehen lassen. 100. Abschnitts-Outro: Übergänge und Animationen: Herzlichen Glückwunsch zum Ende dieses Abschnitts. Ich hoffe, Sie haben genossen, alles darüber zu erfahren, wie wir Übergänge und Animationen zu unseren Projekten hinzufügen können. Hoffentlich kann jetzt sehen, dass auch nur durch das Hinzufügen von einigen kleinen Effekten zu unseren Apps, es kann wirklich beenden sie und machen sie aussehen und fühlen sich viel schöner für den Benutzer. Dies ist ein weiteres großartiges Feature des Vue.js Frameworks und ich hoffe, dass Sie diesen Abschnitt wirklich genossen haben. 101. Vielen Dank: Herzlichen Glückwunsch zum Ende dieses Kurses. Mittlerweile sollten Sie sich viel sicherer fühlen, Anwendungen mit vue.js zu erstellen. Wir haben eine Menge bisher abgedeckt, einschließlich gelernt, wie man vue installiert und wie man die vue Instanz zusammen mit allen Eigenschaften verwendet , die wir dieser Instanz hinzufügen können, wie Daten, berechnet, Methoden und Filter. Während der Erstellung dieser Projekte haben wir uns auch die Liste und das bedingte Rendering, die bidirektionale Datenbindung und auch die Direktiven angesehen , die uns vue.js bereitstellt, um nur einige zu nennen. Wir tauchen dann ein wenig tiefer ein, indem wir einen besseren Workflow einrichten indem wir moderne Build-Tools wie die vue-cli, wo, pack und auch bubble verwenden. Dies ermöglicht es uns, einen Schritt in Richtung Aufbau größerer, wartbarer Apps zu machen, indem wir unseren Code in Komponenten aufteilen, eine Übergabe von Daten mit verschiedenen Methoden. Danke, dass Sie diesen Kurs genommen haben und tschüss vorerst. 102. Folge mir auf Skillshare: Ein herzlicher Glückwunsch von mir, dass ich das Ende dieser Klasse erreicht habe. Ich hoffe, Sie haben es wirklich genossen und etwas Wissen daraus gewonnen. Wenn Sie diese Klasse genossen haben, stellen Sie sicher, dass Sie den Rest meiner Klassen hier auf Skillshare überprüfen, und folgen Sie mir auch für alle Updates und auch um über alle neuen Klassen informiert zu werden, sobald sie verfügbar sind. Vielen Dank nochmals, viel Glück, und hoffentlich sehe ich Sie wieder in der zukünftigen Klasse.