Alles über Vue 3 für Anfänger:innen

1. Willkommen beim Kurs!: Hey, willkommen zu diesem Kurs. Dieser Kurs wird Ihnen alles vermitteln, was Sie wissen müssen, um mit Vue.js zu beginnen und auch alle neuen und verbesserten Funktionen mit Vue Version 3. Sie werden diese vier Projekte erstellen, während Sie aus über 130 klaren und organisierten HD-Video-Lektionen lernen , jeweils mit Untertiteln und auch dem Quellcode für jede Projektphase geliefert werden. Sie sollten also keine Probleme haben, wenn Sie stecken bleiben. Wer bin ich? Mein Name ist Chris und ich bin ein Webentwickler aus Großbritannien. Ich habe meine erste Website vor über 20 Jahren gebaut. Das Web hat sich in dieser Zeit sehr verändert, aber meine Leidenschaft für das Lernen und auch das Lehren davon bleibt bestehen. Ich habe auch Vue.js von den frühen Tagen verwendet, also habe ich viel Erfahrung sowohl mit für meine eigenen Websites als auch mit dem Unterricht davon. Ich freue mich auf diesen hier, und ich werde dich in der Klasse sehen. 2. Was du für diesen Kurs brauchst: Um mit diesem Kurs beginnen zu können, gibt es sehr wenig, was Sie brauchen. Wenn Sie sich dieses Video ansehen, stehen die Chancen, dass Sie bereits die meisten Dinge, die Sie benötigen, bereits eingerichtet haben. Wir werden einen Web-Browser benötigen und ich werde Google Chrome während dieses Kurses verwenden , aber Sie können jeden anderen großen Browser verwenden. Auch für die Bearbeitung des Codes benötigen wir einen Texteditor. Ich werde Visual Studio Code verwenden und Sie können den Link nur hier finden. Dies ist auch kostenlos zu verwenden. Wenn es etwas gibt, was wir während des Kurses brauchen, werden wir es herunterladen. Es wird keine zusätzlichen Käufe geben, also brauchen Sie nur den Eifer, Vue 3 zu lernen. Ich werde das im nächsten Video beginnen. 3. Teile deine Arbeit auf Skillshare!: Wenn Sie an einem Kurs teilnehmen, ist es wirklich wichtig, dass Sie sich nicht angewöhnen, dem nur zu folgen um eine weitere Vorlesung abzubrechen. Nehmen Sie sich die Zeit, jede Lektion zu bearbeiten, den von Ihnen geschriebenen Code zu überprüfen und darüber nachzudenken, wie Sie diese Lösungen selbst angehen können . Vor diesem Hintergrund ist dieser Kurs projektbezogen und bietet Ihnen die Möglichkeit, wirklich etwas Persönliches und Einzigartiges zu schaffen. Sie müssen sich nicht zu sehr verirren und vom Unterricht ablenken, und Sie können sogar einen Schritt zurücktreten , nachdem Sie den Kurs beendet haben und danach zurückkommen und einige Projektänderungen vornehmen. Das gibt dir wirklich eine gute Gelegenheit, das Gelernte außerhalb des Unterrichts zu üben . auch daran, Ihr Projekt auch hier auf Skillshare zu teilen. Ich werde es mir nicht nur ansehen, sondern es wird auch Kommilitonen inspirieren. Weitere Informationen zum Klassenprojekt findest du auf der Registerkarte Projekt und Ressourcen, wo du nicht nur dein Projekt hochladen kannst, sondern auch andere Klassenprojekte sehen kannst. In diesem Sinne freue ich mich darauf zu sehen, was Sie hier auf Skillshare erstellen und hochladen. 4. Was ist Vue.js und was kann man damit machen?: Am grundlegendsten ist Vue.js ein Framework zum Erstellen von Benutzeroberflächen. Seine Hauptaufgabe besteht darin, einen Teil der Website-Anwendung zu handhaben , mit dem der Benutzer sieht und mit ihm interagiert. Es nimmt einige Daten auf und zeigt sie dem Benutzer an. Da Vue für die Benutzeroberfläche verantwortlich ist, benötigt es einige Daten, um mit denen zu arbeiten. Die Daten, die sie empfängt, können in beliebiger Form kommen, z. B. von einem Webserver, einer API. Wir können es innerhalb unserer Anwendung und auch von der Benutzereingabe zu speichern. Für Anfänger kann es sehr freundlich sein, mit zu beginnen, nur einige HTML-, CSS und ein wenig JavaScript-Kenntnisse zu benötigen . Sobald Sie sich mit Vue.js und für fortgeschrittene Benutzer noch komfortabler machen, werden Sie auch schätzen, wie schnell und skalierbar Vue sein kann. Zusammen mit einem ausgereiften Ökosystem auch, das den Vue.js Kern erweitert, wenn nötig. Der Kern Vue.js selbst ist sehr leicht und kann von der einfachen Steuerung eines einzelnen Teils einer Website bis hin zur Handhabung einer komplexen einseitigen Anwendung verwendet werden. Wenn Sie sich nicht sicher sind, was eine einseitige Anwendung gerade ist, wird es später im Kurs mehr dazu geben. Am einfachsten, stellen Sie sich vor, wir hätten eine bestehende Portfolio-Website, die nur mit HTML und CSS erstellt wurde. Weiter unten auf der Linie möchten wir vielleicht einige neue Funktionen oder Abschnitte zu dieser Website hinzufügen, wie zum Beispiel unsere letzten Tweets. Wir könnten den langen Weg gehen und alle unsere Tweets manuell in unsere HTML-Datei kopieren , jedes Mal, wenn es einen neuen Beitrag oder einen neuen Tweet erstellt, oder wir würden wahrscheinlich wollen, um dies mit der Twitter API umgehen , um in unsere letzten Beiträge automatisch. Mit einem solchen Anwendungsfall könnten wir Vue.js verwenden, um nur einen Teil unserer Website zu steuern, oder sogar mehrere Teile, wenn wir wollten. Alles, was wir tun müssen, ist die Vue.js CDN Link zu verknüpfen, die ein Link zur Vue Bibliothek ist. Der CDN-Link wird wie bei jedem anderen CDN-Link in eine HTML-Datei eingefügt . Dann können wir Vue Funktionen aus einer JavaScript-Datei zugreifen. Wir werden darauf zurückkommen und dies sehr bald versuchen. Neben der Steuerung eines Teils der Benutzeroberfläche kann Vue auch unsere ganzseitige Anwendung steuern. Wir werden ein Tool in dem kommenden Projekt namens Vue CLI verwenden, das es uns ermöglicht, diese Anwendungen zu erstellen, und wie ich bereits erwähnt, benötigen wir eine Datenquelle wie einige Produkte und [unhörbar] sie vorbei an der Vue, die dann zeigen sie dem Benutzer in irgendeiner Weise, die wir wollen, zusammen mit der Behandlung von Datenänderungen und Aktualisierungen auf dem Weg auch. 5. Übersicht über die Änderungen in Vue 3: Vue.js Version 3 ist ein wichtiger Neuschreibvorgang. Eine, die aus mehreren Gründen zustande kam. Die Codebasis für Vue 2 war schnell, effizient in Bezug auf die Leistung, aber es gibt immer Raum für Verbesserungen im aktuellen Design. Angeführt durch das Lernen und Entdecken neuer Dinge über das Projekt, neben der Möglichkeit, jetzt auf neuere JavaScript-Funktionen zugreifen , die in modernen Browsern verfügbar sind, wird dieses Video Ihnen einen Überblick über einige der wichtigsten Änderungen geben . Dann später, wenn wir ein bisschen mehr Vue.JS Code mit einem besseren Verständnis dafür rollen , wie es funktioniert, wird es einige dedizierte Abschnitte geben, um uns etwas mehr Details zu geben. Vielleicht ist es nicht, was für ein Grab, das, wenn etwas davon im Moment keinen Sinn ergibt. Zuallererst möchte ich ein großes Missverständnis über Vue 3 ansprechen. Seit der Ankündigung der neuen Version denken viele Leute, dass alles, was sie bisher über Vue wissen , jetzt veraltet ist. Das ist nicht wahr. Sie können die Vue 3-Bibliothek und immer noch richtige Vue Apps so ziemlich wie in Vue 2 verwenden. Viele der Änderungen oder unter der Haube Leistungsverbesserungen, die dem Entwickler nicht direkt bewusst ist, Vue 3 hat auch einige Funktionen, aber diese sind in der Regel zusätzliche. Das heißt, wenn Sie bisher etwas Vue Wissen haben, ist dies alles vollständig übertragbar. Eine der großen Verbesserungen von Vue Version 3 ist die Leistung. Dies wurde auf verschiedene Arten verbessert, und eines der wichtigsten Dinge ist die Verwendung einer ES6-Funktion namens Proxy. Dies führt zu einem schnelleren und effizienteren Änderungserkennungssystem. Dies ist ein wesentlicher Bestandteil der Vue 3-Reaktivität , bei der Vue auf Änderungen reagiert und bei Bedarf aktualisiert wird. Wenn ein Benutzer beispielsweise eine Artikelmenge in einem Einkaufswagen aktualisiert hat, möchten wir auch, dass der Gesamtpreis aktualisiert wird. Dies ist der Prozess der Reaktion auf eine Änderung. In Vue 2 werden alle Daten, die wir beim Hochladen hatten, automatisch reaktiv, einige Datenänderungen fehlen, und es gibt einen anderen Teil der Anwendung, der darauf beruht. Dieser Teil wird ebenfalls aktualisiert. Wenn der Benutzer seinen Benutzernamen ändert und dies im Kopfzeilenabschnitt angezeigt wurde, würde er auch seine automatische Aktualisierung vornehmen. einer der Vorbehalte des Vue 2-Reaktivitätssystems bestand darin, wenn eine neue Eigenschaft zu Vue.JS hinzugefügt wurde, nachdem die Anwendung geladen wurde, wäre sie dann nicht reaktiv. Dies ist etwas, das Proxies gelöst haben und wir werden diese später genauer betrachten. Reduzieren der gesamten Größe des Codes kann auch die Dinge verbessern. Wenn wir ein Framework verwenden, benötigen wir oft nicht alle Funktionen, die es bietet. Das heißt, wenn eine Anwendung geladen wird, wir möglicherweise zusätzliches JavaScript oder Assets herunter , die wir für unser Projekt nicht benötigen. Um dabei zu helfen, ist Vue 3 modularer. So können modernere Werkzeuge jeden nicht benötigten Code aussetzen, aber mit der Paketgröße. Eine weitere große Verbesserung ist ein Neuschreiben des virtuellen DOM. Wieder gibt es später ein dediziertes Video, wenn wir mit Vue.JS komfortabler werden, aber jetzt bedeutet das virtuelle dom-Update, dass Sie jetzt effizienter überprüfen können , welche Elemente sich nach einem Update geändert haben. Die Vue 2-Bibliothek wurde in regulärem JavaScript geschrieben. Im Laufe der Zeit wurde erkannt, dass ein Projekt dieser Größe von der Einführung von Typen profitieren würde, die dazu beitragen, das Risiko von Fehlern zu reduzieren. Obwohl die Vue 3 Ursache mit Typoskript neu geschrieben wird, können Entwickler Code sogar in normalem JavaScript oder dem jetzt voll unterstützten Typoskript 2 schreiben . Typescript war in Vue 2 Puts viel tiefer in Vue 3 integriert und erfordert auch keine zusätzlichen [unhörbaren]. Die Kompositions-API ist wahrscheinlich die am meisten besprochene Funktion in Vue Version 3, und auch die eine Funktion, die das meiste Missverständnis darüber verursacht hat , wie Vue 3 uns zwingen wird, Apps auf eine völlig neue Art zu schreiben. Wie bereits erwähnt, soll die Wettbewerbs-API nicht alles ersetzen, was wir bisher über Vue wissen. Es soll rein additiv sein und gibt uns eine Möglichkeit unser Projekt wartungsfähiger und wiederverwendbarer zu machen, wenn sie wachsen. Wir werden später viel tiefer in das eintauchen. Darüber hinaus haben wir auch einige Vue Funktionen zu erkunden, wie Portale, Fragmente, Spannung und vieles mehr. Der Schlüssel zum Mitnehmen ist Vue ist immer noch Vue unabhängig davon, ob es Version 2 oder 3 ist, aber Version 3 hat einige nette Leistungsverbesserungen zusammen mit einigen zusätzlichen Funktionen, die Sie verwenden können. Jetzt haben Sie einen kleinen Hintergrund, lassen Sie uns weitergehen, etwas Vue Code zu schreiben. 6. Projekt-Quellcode: Wenn Sie eine neue Fertigkeit lernen und unsere vier Projekte programmieren, wird es wahrscheinlich einen Punkt geben, an dem Sie stecken bleiben. Manchmal funktioniert Ihr Code einfach nicht, und Sie können diesen Fehler nicht erkennen. Nun, um dies mit dem Kurs nach jeder der Vorlesungen zur Verfügung gestellt zu helfen , ist der Quellcode in jeder einzelnen Phase, und Sie können diesen von GitHub herunterladen. Innerhalb von GitHub und meinem Profil, das chrisdixon161 ist, und dann /vue-3-course. Hier finden Sie den gesamten Projektquellcode für diesen Kurs. Es sollte ziemlich einfach sein zu navigieren. An der Spitze haben wir die ersten vier Projekte nummeriert 1-4, und diese sind in der gleichen Reihenfolge, in der Sie sie während des Kurses nehmen werden. Zum Beispiel, wenn Sie auf dem Portfolio-Projekt stecken, klicken Sie in dieser, und dann werden wir in der Reihenfolge alle Vorträge sehen, die für diese Projekte durchlaufen werden. Sie sind nummeriert, also haben wir Nummer 2, das ist die Abschnittsnummer und Video 1, Abschnitt 2, Video 2 und dann der Videoname. Sie können in diese klicken, und sehen Sie den endgültigen Code nach diesem Video, und gehen Sie in jede dieser Dateien. Zusammen mit diesem, wenn wir zur Wurzel unseres Repos zurückkehren, haben wir auch die Starter-Dateien für alle vier unseres Projekts. Die Starter-Dateien werden sicherstellen, dass wir auf den gleichen Versionsnummern sind wenn Sie fortfahren, geben Ihnen einen reibungslosen Pfad während dieses Kurses, und wir werden einen Blick darauf werfen, wie Sie diese einrichten, während wir Fortschritte. Um auf diese zugreifen zu können, müssen wir auf diesen grünen Button klicken. Es wird ein Dropdown-Menü geben, und Sie können dieses vollständige Repository als ZIP-Datei herunterladen. Dann erhalten Sie Zugriff auf alle diese Starter und alle Codebeispiele. Gehen Sie weiter und laden Sie diese herunter, und platzieren Sie sie irgendwo bequem wie Ihren Desktop, und wir können die Starter-Dateien bei Bedarf greifen. 7. Abschnittseinführung – ein erster Blick auf Vue.js: Um Ihre Vue Lernreise zu starten, werden wir viele Kenntnisse, die wir in diesem Abschnitt lernen, in ein Projekt anwenden . Dieses Projekt wird relativ unkompliziert sein. Wir werden ein HTML herunterladen, eine Datei starten, und dann werden wir den Prozess der Umwandlung dieser Datei über Vue.js beginnen. Wir lernen alle Grundlagen kennen, die Sie kennen müssen, z. B. Ereignisse, die wir uns den Lebenszyklus von Vue ansehen, Daten finden, wir werden uns auch Listen, Methoden und vieles mehr ansehen . Lass uns reinspringen und ich werde dich im nächsten Video sehen. 8. Die Vue-Instanz: In einem früheren Video erwähnten wir Vue.js und steuern entweder alle Teile einer Benutzeroberfläche. Um etwas Erfahrung mit Vue.js zu bekommen, werden wir jetzt eine einfache HTML-Seite nehmen, die eine persönliche Website ist, und einige Vue.js anwenden, um einen Blog-Abschnitt zu erstellen. Wir können in Vue.js springen, das Starter-Projekt steht zum Download aus dem GitHub-Repository zur Verfügung. Um dies zu finden, müssen Sie zu diesem Link gehen , der github.com/chrisdixon161/vue-3-course ist. Sie können dies auch als Pin-Repository aus meinem Profil finden. Sobald Sie in diesem Abschnitt gegangen sind, werden wir den gesamten Code haben, den Sie für diesen Kurs benötigen. Derzeit haben wir nur den Portfolio-Starter, aber Ihre Version wird den gesamten Beispielcode haben, der für andere Projekte benötigt wird, zusammen mit dem endgültigen Code für jedes Video, damit wir vergleichen können, wenn Sie stecken bleiben. Was Sie tun müssen, ist, all dieses Repository herunterzuladen. Wenn Sie also in den Codebereich gehen, können Sie dies als ZIP-Datei herunterladen. Lasst das öffnen. Dann können wir von hier aus alle Informationen extrahieren, die wir brauchen. Also lassen Sie dies einfach auf dem Desktop platzieren und öffnen Sie dies. Von hier aus haben wir den Portfolio-Starter, der nur das grundlegende HTML und CSS ist, dem wir testen, wie die Ansicht an einem einfachen Projekt funktioniert. Was Sie tun müssen, ist, dies umzubenennen, ich werde das nur als Portfolio behalten und dann getrennt vom Rest des Codes halten. Öffnen Sie dies in Visual Studio-Code oder Ihrem Editor Ihrer Wahl. Dann innen hier, alles wird sehen, ist eine Index-Seite, die nur einige reguläre HTML wir von unserem Kopfabschnitt haben, wir werden auf eine Schriftart verlinken, wir verlinken auf eine bereitgestellte Stylesheets, wir haben einen grundlegenden Header-Abschnitt, der einen Titel hat, und dann einige Navigationslinks. Dann haben wir diesen Blog-Bereich. Dieser Blog-Abschnitt hat nur zwei statische HTML-Artikel, ich werde dies dynamisch mit Vue.js machen. Das Wichtigste ist jetzt unten, Sie haben ein Skript, das ein Link zum Vue CDN ist, also ist dies ein Link zur Vue Call Library, die wir verwenden werden, um einige der Vue Funktionen zu erkunden. Dies bedeutet, dass wir nichts Besonderes tun müssen, wie zum Beispiel das Herunterladen von Paketen. Alles, was wir hier tun, ist, es direkt mit Vue.js zu verknüpfen. Dann können wir einige der Funktionen in unser Projekt einbeziehen. Um mit Vue.js zu beginnen, wir eine neue Datei erstellen, die eine JavaScript-Datei sein wird, und ich werde dies die script.js nennen. Wir können dies wie jedes reguläre Skript unten am Ende unseres HTML verknüpfen, und wir fügen das Quellattribut hinzu, das auf die script.js verlinken wird. Wir können diese Index-Seite auch im Browser öffnen, wir können auf den Index oder HTML-Datei innerhalb unseres Projekts doppelklicken. Oder wenn Sie einen Visual Studio-Code verwenden, können wir mit der rechten Maustaste auf diese Registerkarte klicken und dann den Pfad kopieren, fügen Sie diesen in. Dies ist das Starter-Projekt, das nur HTML ist. Wir werden damit beginnen, diese HTML-Abschnitte zu konvertieren, um von Vue.js gesteuert werden. Um dies zu tun, gehen wir zu der Skriptdatei. Das erste, was wir tun müssen, ist eine neue Vue Instanz zu erstellen. Wir tun dies mit Vue, Großbuchstabe V, und verwenden dann einen Funktionscode, um CreateApp zu erstellen. Wir haben Zugriff auf Vue.CreateApp, da wir den CDN-Link unten auf unserer Indexseite verwenden . In den kommenden Videos werden wir auch ein Optionsobjekt übergeben, das auch eine Instanz ist. Aber vorerst müssen wir diese Vue Anwendung auf unserer Indexseite mounten. Um dies zu tun, müssen wir Vue genau sagen, wo wir hineinfahren wollen. Wir könnten die vollständige HTML-Seite steuern, wenn Sie möchten. Alle können nur auf einen bestimmten Pfad montiert werden, wenn Sie wollten. Zum Beispiel wird diese Vue Instanz unseren Blog-Abschnitt steuern, der ein Wrapper für alle unsere Artikel ist. Wird diesen Abschnitt mit der Idee des Blogs haben, so werden wir diese nutzen und Vue.js sagen, dass dieser Abschnitt der Teil des HTML ist, die Sie steuern möchten. Dies hat den ID-Blog, also müssen wir nur zu CreateApp gehen und dann die Mount-Methode aufrufen, bei der wir die Elemente übergeben werden, zu denen Sie verlinken möchten. Dies ist genau wie normale CSS-Selektoren Wenn dies also eine Idee ist, verwenden wir den Hash, wir verwenden die [unhörbar] oder wir können direkt jedes unserer Elemente mit Namen anvisieren, so dass wir diesen Abschnitt anvisieren können, und wir wollen im Blog. Obwohl wir hier auf ein Abschnittelement abzielen, spielt es keine Rolle, auf welche Art von Elementen wir mounten. Es könnte der Körperteil sein, es könnte DIV sein, alles ist völlig in Ordnung. Wir könnten auch mehrere Vue Instanzen erstellen. Wenn wir das dupliziert haben, könnten wir Vue.CreateApp erneut aufrufen, aber dieses Mal könnte es in einen anderen Abschnitt eingehängt werden. Zum Beispiel, wenn wir diese Vue Instanz haben wollten, um den Blog zu steuern, und dann wollten wir auch den Header-Abschnitt steuern, alles, was wir tun müssen, ist in unserem anderen Selektor übergeben und gehen wir für das Header-Element Das ist der Header-Abschnitt, der unsere Level-1-Überschrift enthält, neben unseren nav Links. Wir können diesen Titel auch ändern, um unseren Namen zu sein, und auch für den Seitentitel. Das bedeutet, dass wir jetzt zwei separate Vue Anwendungen erstellt haben , die völlig unabhängig sind und ihre eigenen Daten haben können, wie wir im nächsten Video sehen werden. 9. Daten und Listen: unsere App jetzt eingehängt ist, benötigen wir nun einige Daten, mit denen wir arbeiten können. Um dies zu tun, werden wir einige Optionen hinzufügen, um App zu erstellen. Hier drinnen werden wir ein Objekt übergeben, und dieses Objekt wird dort sein, wo wir von nun an arbeiten werden. Die erste Option, die auf diesem Objekt gehen wird, ist die Dateneigenschaft, die Sounds verwendet wird, um die Daten unserer Anwendung zu halten, die manchmal als Zustand bezeichnet wird. Status ist eine Funktion, die ein Objekt zurückgeben wird. Dies wird alle unsere Dateneigenschaften enthalten, die Sie sich als Ort vorstellen können, um die Informationen zu speichern, die unsere Anwendung benötigt. Genau wie wir es mit Variablen tun würden. Wenn Sie Vue 2 in der Vergangenheit verwendet haben, könnte die Dateneigenschaft entweder als eine Funktion wie diese oder auch als Objekt deklariert werden, sowohl die Vue frei und muss jetzt immer als Funktion deklariert werden. Zurück zu unserem Index, unserem HTML. Denken Sie daran, dass wir eine Vue App sowohl im Header-Bereich als auch im Blog-Bereich an knapp unten montiert haben. Das bedeutet, dass wir jetzt die Vue [unhörbar] Kontrolle jeder der Daten innerhalb dieser beiden Abschnitte verwenden können. Derzeit arbeiten wir in, innerhalb des Header-Abschnitts, was bedeutet, dass wir unsere Dateneigenschaften innerhalb dieses Header-Abschnitts ausgeben können. Der erste, den ich von der Vue Anwendung aus kontrollieren werde, wird der Portfoliotitel sein. Also, wenn wir unseren Namen hier draußen setzen, und dann können wir diesen in einer Eigenschaft namens „Name“ speichern. Dies wird eine Zeichenfolge sein, also fügen Sie dies innerhalb der Zitate hinzu. Nun, anstatt diesen „Namen“ als hartcodiertes HTML zu haben, können wir jetzt diese Dateneigenschaft namens name verwenden. Ich werde das irgendwo innerhalb unseres Header-Abschnitts platzieren. Wir können die doppelten geschweiften Klammern verwenden und dann auf unsere Namenseigenschaft zugreifen. Lassen Sie uns zum Browser gehen und überprüfen, dass dies noch funktioniert, da dies mit unserem Header-Abschnitt verknüpft oder gemountet ist, dieser Namenswert nicht außerhalb dieses Namens verwendet werden. Wenn Sie direkt unter unseren Header gehen und versuchen, diese Namensvariable oder an den Browser auszugeben, sehen wir, dass dies als reguläre Zeichenfolge ausgegeben wird, anstatt durch den tatsächlichen Namen, Dateneigenschaft ersetzt zu werden. Der Vorteil der Deklaration unserer Daten innerhalb des Datenabschnitts, anstatt hartcodiertes HTML, besteht darin, dass die Daten reaktiv sind, was bedeutet, dass, wenn sich einer der Werte in diesem Bereich ändern würde, alle HTML-Abschnitte, die -Daten werden dann sofort aktualisiert. Dies ist ein ziemlich einfaches Beispiel, das eine Textzeichenfolge verwendet. Aber was wäre, wenn wir mehrere Elemente hätten, wie ein Array? Nun, wir haben drei Werte innerhalb unserer ungeordneten Liste. Haben Sie das Zuhause, das Portfolio, und auch die Kontakt-Me-Sektion. Zurück zum Skript, können wir jetzt sehen, wie dies als Dateneigenschaft aussehen würde. Der zweite Wert, der durch ein Komma getrennt wird, wird Links sein. Ich werde das als Array einrichten. Dieser erste wird zu Hause sein. Der zweite Link war Portfolio, und der dritte von kontaktieren Sie mich. Da dies ein Array ist, das mehrere Werte enthält, haben wir einige Möglichkeiten, wie wir dies ausgeben können. Die grundlegendste Option besteht darin, diese direkt als Dateneigenschaft auszugeben. Wir könnten den Namen der Links ausgeben. Dies wird direkt ausgegeben, genau wie eine Zeichenfolge. Dies ist jedoch unwahrscheinlich, was wir wollen. Stattdessen könnten wir auf jeden dieser Links einzeln zugreifen. Genau wie ein normales Array könnten wir die doppelten geschweiften Klammern verwenden, auf unsere Links zugreifen und dann auf jeden einzelnen Link durch die Indexnummer zugreifen. Der erste Wert innerhalb eines Arrays ist Null, der zweite ist Position eins und der dritte von Kontaktieren Sie mich. Es wird auch Links geben. Auch hier wird dies perfekt funktionieren, aber es ist ein langer Weg, Dinge zu tun, wenn Sie viele Array-Elemente haben, eine effizientere Möglichkeit, mit Listenelementen wie diesem umzugehen, besteht darin, eine for-Schleife zu verwenden. Bis zu unserer ungeordneten Liste können wir eine V for-Schleife verwenden, die Link und Links sein wird. Links mit dem S ist die Eigenschaft unseres Datums in unserem Skript gespeichert, und dann wird der Wert des Links für jede Schleife aktualisiert. wir also zum ersten Mal diese drei Elemente durchlaufen, wird der Link-Wert auf home gesetzt. Das zweite Mal, wenn es durchläuft, wird auf Portfolio gesetzt, und das dritte und letzte Mal, wenn es durchgeht, wird dies eingestellt, um mich zu kontaktieren. v-for ist eine Vue.js Direktive, die ein spezielles Attribut ist, das wir unserem HTML hinzufügen. Direktiven beginnen mit einem V-Bindestrich Präfix. Und diese spezielle erlaubt Vue.js, eine bestimmte Dateneigenschaft zu durchlaufen. Laufe des Kurses werden wir uns auch mit weiteren Richtlinien befassen. Da wir drei Elemente innerhalb unseres Link-Arrays haben, wird der Inhalt hier dreimal wiederholt. Also effektiv haben wir unsere ungeordnete Liste dreimal wiederholt. Aber das ist auch nicht das, was wir wollen. Stattdessen können wir die v-for-Schleife ausschneiden und stattdessen unseren Listeneintrag dreimal wiederholen. Wir können das zweite und dritte Listenelement entfernen, wobei nur eine vorhanden ist, die wir für jedes Element innerhalb von Links wiederholen werden. Wir können dies dann durch unsere Link-Variable ersetzen, speichern Sie diese, und unsere drei Links und jetzt wieder an Ort und Stelle. Also, nur um zusammenzufassen, haben wir drei Elemente innerhalb der Links. Das erste Mal durchläuft, wird der Link auf home gesetzt. So wird dies durch zu Hause ersetzt werden. Das zweite Mal, das durch Portfolio ersetzt wird und so weiter. Dateneigenschaften können auch über Datentypen sein, wie Booleans und auch Zahlen, und auch Objekte, auf die wir als nächstes entdecken werden. 10. Looping mit Objekten: Wir können auch mit Objekten in Vue.js arbeiten. Wir werden dies tun, um einige Beiträge zu unserem Beispiel hinzuzufügen. Dazu können wir in diesem Skript die zweite Vue Instanz verwenden, die wir für unseren Blogbereich erstellt haben . Wir können das Optionsobjekt für die CreateApp nicht einrichten , die über unseren Blogbereich als Objekt gemountet wird, und wir werden noch einmal mit der Dateneigenschaft arbeiten. Dies ist eine Funktion wie oben, die alle Daten zurückgeben wird, die wir in unserem Blog-Abschnitt verwenden können. Hier drinnen werden wir auf unsere Beiträge zugreifen, die ein Array sein wird. Jeder dieser Beiträge wird innerhalb eines Objekts gespeichert werden , das eine ID, einen Titel und den Körperbereich haben wird . Die erste ID wird der Wert eines durch ein Komma getrennt sein, der Titel für den Blogbeitrag. Dies ist nur [unhörbar], so dass Sie alles, was Sie wollen, zu diesem Blog-Beitrag hinzufügen können. Der dritte Punkt ist der Körper, der eigentliche Inhalt unseres Blogbeitrags ist. Ich werde den Inhalt von unserer Indexseite abrufen. Als Zeichenfolge können wir dies innerhalb des Körperabschnitts einfügen. Wenn Sie Fehler sehen, wie wir hier sehen, dies daran, dass wir mehrzeiligen Text verwenden. Wir könnten jede dieser Linien einzeln durchlaufen und sie alle auf die gleiche Linie bringen. Genau so, aber das ist keine effiziente Art, Dinge zu tun. Oder eine andere Möglichkeit, dies zu tun, besteht darin, die Backticks zu verwenden. Anstatt diese Zitate könnten wir diese durch das Backtick-Symbol ersetzen. Dies ermöglicht es uns nun, mehrzeiligen Text zu verwenden. Nur um uns einige Inhalte zu geben, mit denen wir arbeiten können, werde ich dieses Objekt kopieren, und dann füge ich es für einen zweiten Blogbeitrag ein. Die ID von zwei, ändern Sie den Titel. Dieser wird das Vue CDN verwenden. Dann der dritte, der die ID von drei hat. Dieser wird sein, wie ich Vue gemeistert habe, die Sie schreiben können, wenn Sie diesen Kurs beenden. Obwohl diese Beiträge Objekte sind, ist es immer noch ein Array von Objekten. bedeutet, dass wir die V-for-Direktive wieder in unserem HTML verwenden können. Bis zum Blog-Abschnitt, den wir mit dieser Vue Instanz steuern. Wir haben zwei hartcodierte Artikel. Der Einfachheit halber entfernen wir den zweiten. Wir können nun eine V-for-Schleife verwenden, um dies so oft wie nötig zu wiederholen. Wir wollen den Artikel wiederholen. So können wir die V-for-Direktive hinzufügen. Dieses Mal wird dies in Beiträgen posten. Denken Sie daran, dass post der Name unseres Arrays ist und die Post-Variable der Name für jedes Array-Element ist. Wir können jetzt innerhalb unseres Artikels darauf zugreifen. Innerhalb der doppelten geschweiften Klammern können wir unseren Beitrag ausgeben. Mal sehen, wie das im Browser aussieht. Wenn wir den Beitrag ausgeben, ist dies der Wert unseres vollständigen Post-Objekts. Dies wird dreimal wiederholt. Da wir drei separate Blog-Beiträge haben, ist auch einzigartig. Wir haben die ID von eins, die ID von zwei und die ID von drei unten. Anstatt auf diesen vollständigen Blogbeitrag zuzugreifen, können wir dies in den heiligen Schriften schreiben, indem wir auf eine dieser Eigenschaften zugreifen. Das war der Titel des Beitrags. Wir können darauf mit post.title zugreifen. Dann, anstelle dieses Textes innerhalb der p-Elemente, können wir auf die post.body zugreifen. Das funktioniert jetzt ganz gut. Zurück zu unserem Skript, wenn Sie viel mehr Dateneigenschaften wie diese hinzufügen würden. Unsere Vue Instanz kann schnell sehr überfüllt werden. Um dies zu helfen, können wir auch unsere Reihe von Objekten nehmen und diese außerhalb der Vue Instanz platzieren. Lassen Sie uns den gesamten Inhalt des Arrays greifen, einschließlich der eckigen Klammern. Schnappen Sie sich all dies und lassen Sie nur die Post-Variable. Außerhalb der Vue Instanz können wir eine reguläre JavaScript-Variable erstellen. Das nennt man Beiträge. Dann können wir dies gleich unserem Array setzen. Dieses Post-Array kann jetzt unten innerhalb unserer Vue Instanz referenziert werden. So kann die post date Eigenschaft gleich unserem posts Array sein. Lassen Sie uns überprüfen, dass das funktioniert. Rüber zum Browser. Der kostenlose Blog-Beitrag ist noch vorhanden. Ich verwende auch die ES6-Kurzschrifteneigenschaftssyntax, da der Name und der Wert beide gleich sind, können wir ihn auf nur den einzelnen Wert verkürzen , der auch völlig gut funktioniert. 11. Verzeichnisse und Schlüssel auflisten: Im Moment nehmen wir keine Änderungen an unseren Listen vor, so dass Vue.js nicht wirklich viel zu tun hat. In realen Anwendungen können sich unsere Daten jedoch oft ändern, entweder wenn der Benutzer etwas in ein Formular hinzufügt oder ein Update von unserem Server. Vielleicht wird sogar ein neuer Blogpost hinzugefügt und mit einer API aktualisiert. Sobald Vue diese Aktualisierungen erhält, da wir die Dateneigenschaft verwendet haben, wird unser HTML mit einem neuen Wert aktualisiert, da Dateneigenschaften reaktiv sind. Das ist einfach genug für etwas wie eine Textzeichenfolge, aber was wäre, wenn wir Tausende von Blogposts hätten? Stellen Sie sich vor, wir haben eine in der Mitte gelöscht oder aktualisiert, wie geht Vue.js damit um? Die Antwort besteht darin, ein spezielles Attribut zu verwenden, das als Schlüssel bezeichnet wird. Ich werde dies zu unserem Blogpost hinzufügen, der in dem Artikel umgeben ist. Kurz nach unserer v-for-Schleife können wir Schlüsselattribute hinzufügen und dies auf einen bestimmten Wert setzen. Dieser Schlüssel ist eine Möglichkeit, jedem dieser Listenelemente einen eindeutigen Bezeichner bereitzustellen. Wenn wir Hunderte oder sogar Tausende von Blogposts hatten, ermöglicht es Vue, js, jedes Element besser zu identifizieren, wenn die Zeit kommt zu aktualisieren oder neu zu ordnen. Wenn wir niemals Schlüssel verwenden, müssten Sie auf einen Algorithmus zurückverweisen, um eine dieser Änderungen zu erkennen. Dieser Schlüssel sollte eindeutig sein, z. B. eine Produkt-ID oder für unseren Blog, wir haben auch eine eindeutige ID für jeden Blogpost. Schauen wir uns mal an. Wir haben eine eindeutige ID, die in dieser ID-Eigenschaft gespeichert ist. Wir können die post.id übergeben. Wenn wir ein Attribut in genau wie dieses hinzufügen, würde Vue.js diesen Schlüsselwert als String namens post.id lesen. Anstatt die tatsächlichen Werte der Variablen zu extrahieren, die der Wert von eins ist, zwei oder drei. Wenn wir etwas JavaScript oder eine Variable einfügen würden, genau wie wir hier verwenden. Wir müssen diesen Schlüssel dynamisch machen. Der Weg, dies zu tun, besteht darin, die v-bind-Direktive zu verwenden. Dies ist ein Präfix, das Vue.js mitgeteilt wird, um den Wert im Inneren hier als Variable zu lesen , anstatt die Zeichenfolge von Texten, die post id ist. Dies ist eine andere Vue.js Direktive. Dies kann auch verkürzt werden, um einfach nur den Doppelpunkt zu verwenden. Das ist unser Schlüssel, der sich jetzt gekümmert hat. Auch bei der Verwendung der v-for-Direktive können wir auch auf die Indexnummer zugreifen. Dies ist die Position jedes unserer Elemente innerhalb des Arrays. Unser erster Blogpost ist die Position 0, dann Position 1 und so weiter. Um dies zu tun, können wir unsere Variable in die Klammern einwickeln genau so. Wir können immer noch auf die Post zugreifen, aber wir können auch auf die Indexnummer 2 zugreifen. Wenn wir wollten, könnten wir den Index ausgeben. Wieder innerhalb der doppelten geschweiften Klammern haben wir Position 0, Position 1 und dann Position 2. Dies ist auch genau wie JavaScript, können wir plus eins hinzufügen. Dies könnte der erste Wert, der zweite Wert usw. sein. Dies kann nützlich sein für Dinge wie die Nummerierung unserer Artikel, die wir anzeigen. Nun, für unseren Blog ist Übung nicht erforderlich. können wir auch entfernen. Eines der wichtigsten Dinge zu beachten ist, es empfohlen wird, diese Indexposition nicht als Wert für unseren Schlüssel zu verwenden. Dies liegt daran, dass, wenn kein Schlüssel geliefert wird, wir sowieso die Indexposition verwenden werden. Neben der Bindung dieser Schlüsselattribute können wir auch andere Attribute binden, die wir als nächstes betrachten werden. 12. Attribute einbinden: Wir hatten einen ersten Blick auf Bindungsattribute im letzten Video mit dem Schlüssel. Wir werden jetzt auf die Suche nach Bindungsklassen- und Stilattributen Vue gehen. Um dies zu tun, können wir einen DarkMode für unseren Blog erstellen, den der Benutzer ein- oder ausschalten kann. Um die Stile für diesen DarkMode zu erstellen, müssen wir zu unserem Stylesheet gehen, und dann unten unten können wir eine DarkMode-Klasse hinzufügen , die wir ein- oder ausschalten werden. Das wird ziemlich einfach sein. Wir können den Hintergrund erstellen und diese auf eine dunklere Farbe setzen, die, die ich verwenden werde, wird 38383a sein. Um dies zu versetzen, ändern wir die Farbe in einen helleren Wert von whitesmoke. Um diese DarkMode anzuwenden, werden wir dies als eine Klasse hinzufügen, und um alle unsere Inhalte, wie den Header-Abschnitt und unser Blog haben wir dieses umgebende div-Element. Im öffnenden Tag, nur innerhalb des Körpers, können wir dies als reguläre Klasse hinzufügen und dies wird unsere Änderungen anwenden. Das funktioniert gut, aber wir brauchen eine Möglichkeit, dies ein- und auszuschalten und dies auch in unsere Vue App zu integrieren. Derzeit haben wir ein kleines Problem, das ist, dass wir Vue verwenden, um den Header-Abschnitt und auch den Blog-Abschnitt unabhängig zu steuern . Aber wenn wir nur DarkMode umschalten, möchten wir, dass diese Klasse auf die gesamte Website angewendet wird. Wir können die Dinge vereinfachen, indem wir unsere beiden Vue Instanzen zusammenführen. Um dies zu tun, müssen wir nur unsere Beiträge aus der zweiten App greifen und diese dann in die Dateneigenschaft für unseren ersten Abschnitt einfügen. Wir haben hier keine weiteren Daten, also können wir diese vollständige Instanz entfernenund dann werden wir diese in also können wir diese vollständige Instanz entfernen den Body Abschnitt einhängen. Dies bedeutet, dass die Vue Instanz jetzt alle unsere Webseite kontrolliert. Der erste Schritt, damit diese Klasse ein- und ausgeschaltet werden kann , besteht darin, diese als Dateneigenschaft festzulegen. Eine Dateneigenschaft wird ein boolescher Wert sein, und ich möchte dies das DarkModeSet nennen, das ein anfänglicher boolescher Wert von false sein wird. Um die DarkMode-Klasse basierend auf dieser bestimmten Dateneigenschaft dynamisch umzuschalten, müssen wir unser Klassenattribut als Objekt und nicht als reguläre Attribute übergeben , genau wie folgt. Im Inneren von hier müssen wir ein Objekt mit den geschweiften Klammern hinzufügen. Wir möchten nur, dass diese dunkle Klasse angewendet wird, wenn die Dateneigenschaft, die DarkModeSet ist, gleich wahr ist. Derzeit ist dies falsch, so dass Vue.js diese dunkle Klasse nicht anwenden wird. Wir können dies sehen, wenn wir den Browser aktualisieren, die dunkle Klasse gilt nicht mehr. Aber wenn es dies umschalten sollte, um wahr zu sein, sollte Vue.js dann unsere Klasse anwenden. Aber wenn wir dies aktualisieren, sehen wir keine Änderungen, und das liegt daran, genau wie wenn wir die Schlüsseleigenschaft früher setzen, müssen wir dies als dynamischen Wert binden. Derzeit liest Vue.js dies als eine Zeichenfolge, die wir sehen können, wenn wir in die Entwicklertools gehen. Ich werde mit der rechten Maustaste klicken und den „Body Abschnitt“ untersuchen und dann sofort im Inneren sehen wir, dass unsere Klasse als String ausgegeben wird. Dies ist keine gültige Klasse, also, was wir tun werden, ist die v-Bind-Direktive zu verwenden. Oder wie früher können wir das verkürzen, um einen Doppelpunkt zu werden. Jetzt anstelle einer Zeichenfolge wird dies als JavaScript interpretiert, und wenn wir die Entwicklertools aktualisieren, werden wir sehen, dass die Klasse der Dunkelheit jetzt angewendet wurde, und dies wurde auch auf unser Projekt angewendet. Neben dieser Klasse können wir auch Dateneigenschaften zu Inline-Stilen hinzufügen . Lassen Sie uns das entfernen. Ich werde eine reguläre Stil-Eigenschaft einrichten, die nur normales HTML ist. Im Inneren können wir den Farbwert einstellen, lassen Sie uns für einen Wert von hotpink gehen. Dies ist nur reguläres HTML, wenn wir also aktualisieren, wird dies dann auf unsere Projekte angewendet werden. Wir können diese Farbeneigenschaft auch zu einer Dateneigenschaft verschieben. Innerhalb des Skripts lassen Sie uns die TextColor auf den String-Wert von hotpink setzen. Dann, wie wir es mit den Klassenattributen getan haben, müssen wir diesen Stil als Objekt übergeben. Der erste Schritt besteht darin, dies in den geschweiften Klammern zu umgeben und dann diese Zeichenfolge von hotpink durch unsere Dateneigenschaft zu ersetzen, die TextColor war. Dies ist eine Variable, also müssen wir dies mit v bind oder der Kurzschrift binden, die der Doppelpunkt war. Aktualisieren, und dieses Mal wurde unser Styling von der Dateneigenschaft angewendet. Wenn wir mehrere Stil-Eigenschaften hätten, die wir so hinzufügen wollten, könnte unser HTML schnell chaotisch werden. Stattdessen könnten wir dies entfernen, in den Stil-Attributen bleiben, und dann können wir in unserem Skript ein Stilobjekt als Dateneigenschaft erstellen. Wir können dies entfernen, und dann werden wir stattdessen unsere darkMode.CSS mit den gleichen Stilen einrichten , die wir unten angewendet haben. Lassen Sie uns dies auskommentieren und dann unseren Hintergrund einrichten, der der Hex-Wert von 38383a war. Auch die Farbe für den Text , der Whitesmoke sein wird. Dieses DarkMode-Objekt kann nun direkt als Attribut platziert werden. Da sein Wert bereits ein Objekt ist, müssen wir die geschweiften Klammern nicht darin platzieren. Dies kann einfach direkt hinzugefügt werden. Versuchen wir es mal. Unser DarkMode wurde jetzt angewendet. Wir können sogar mehrere Stilobjekte hinzufügen, zum Beispiel, wenn wir eine Basisschriftfamilie oder einige Basisstile einrichten möchten, können wir ein neues Objekt einrichten, und lassen Sie uns die FontFamily auf den Wert von monospace setzen. Wenn Sie nicht vertraut sind, CSS-Eigenschaften mit JavaScripts hinzuzufügen, müssen alle diese CSS-Eigenschaften zu einem Fall werden. Wenn wir CSS direkt in unserem Stylesheet verwenden würden, würden wir die FontFamily ganz in Kleinbuchstaben setzen und mit den Bindestrichen getrennt. Stattdessen setzen wir dies in JavaScript als CamelCase ein, so dass jedes Wort nach dem ersten mit einem Großbuchstaben beginnt. Jetzt werden wir diese mehrere Stilobjekte haben, die wir hinzufügen möchten. Diese können nun als Array platziert werden. Wir können die eckigen Klammern übergeben, und dann unser zweites Objekt, das Basis war, speichern Sie dies, und das Styling für beide unserer Objekte wurden zusammengeführt. Wenn wir in die Entwickler-Tools gehen, können wir dies sehen, indem wir den Mauszeiger über unser Hauptdiv bewegen. Dies hat unsere Hintergrundfarbe, es hat die TextColor und dann unsere FontFamily aus dem zweiten JavaScript-Objekt. 13. Mini-Challenge – dynamische Links: Mit dem, was wir bisher gelernt haben, haben Sie eine Mini-Herausforderung, um Dinge selbst auszuprobieren. Was ich möchte, dass Sie tun, ist, zum Headerbereich zu gehen , der unsere kostenlosen Navigationslinks enthält. Derzeit hat jeder dieser Links ein href-Attribut, das auf den Schrägstrich zeigt. Anstatt dies hartcodiert zu haben, könnten wir dies als dynamisches Attribut erstellen und den href-Wert innerhalb unserer Dateneigenschaft festlegen. Wenn wir zu unseren Skripten gehen, wäre ein guter Ausgangspunkt, dieses Links-Array durch ein Array von Objekten zu ersetzen, genau wie oben, wo wir unsere Blogposts als ein Array von Objekten erstellt haben, und es kann dieses Array als einen guten Ausgangspunkt von Ihre Links. Das ist Nummer 1 abgedeckt. Dann als nächstes sollte das Objekt URL-Eigenschaft mit einem Link haben. Anstelle der ID, des Titels und des Bodys, den wir in unserem Blogbeitrag haben, können wir uns vielleicht ändern, um die ID, den Namen und die URL zu sein . Die URL kann erstellt werden, es kann ein externer Link sein, oder ein interner Link zu einer fiktiven Seite wie Schrägstrich Portfolio. Aber jetzt, keine Sorge, ob die Seite, auf die wir verlinken, erstellt wird oder nicht. Alles, worüber wir uns Sorgen machen, ist eine dynamische Verbindung zu schaffen. Dann, genau wie bei den Blogbeiträgen, besteht die Nummer 3 darin, dieses Array mit v-for zu durchlaufen und einen eindeutigen Schlüssel zu setzen. Schließlich, mit dem Element, werden wir einen Link zu jeder Seite zu erstellen. Als Hinweis können wir die v-Bind Direktive verwenden, die wir im letzten Video für das href Attribut 2 gelernt haben. 14. Dynamische Links: Meine Lösung: Ich hoffe, dass das für Sie gut gelaufen ist, und ich werde jetzt diese Herausforderung abschließen und Ihnen meine Lösung zeigen. Beginnend mit Nummer 1, die ein Objekt mit allen unseren Links erstellen sollte, genau wie wir es mit dem Blogbeitrag getan haben. Außerhalb von Vue Instanz, unsere Konstante für unsere Links, die eine Reihe von Objekten sein wird. Der erste ist die ID von 1, der Name, der unser Zuhause sein wird. Die dritte Eigenschaft wird für unsere URL sein, dies wird der Ort sein, an dem wir verlinken werden. Der Home-Link wird die index.html durch ein Komma getrennt sein. Wir brauchen zwei weitere Links, die ID von 2 und dieser wird zu unserem Portfolio verlinken, und die URL wird portfolio.html sein. Wie bereits im letzten Video erwähnt, spielt es keine Rolle, ob diese Seite erstellt wurde oder nicht. Alles, was wir in diesem Stadium interessiert sind, ist, einen dynamischen Link zu erstellen. Der dritte ist für Kontaktieren Sie mich in der contact.html. Entfernen Sie das Array aus unserer Dateneigenschaft und wir können dies entweder über Links setzen oder wir können Sie die ES6 Kurzschrift sehen. Da beide Wörter gleich sind, kümmert sich dies um Schritt eins und Schritt 2, und für Schritt 3 müssen wir für diese Links eine Schleife erstellen und ich werde sie in unserem HTML einfügen. Oben in unserer Index-Seite haben wir bereits die for-Loop-Setup, so dass dies erledigt wird. Der nächste Schritt besteht darin, acht dynamische Schlüssel hinzuzufügen, die link.id sein wird. Da link jetzt ein Objekt ist, müssen wir auch den Namen übergeben und es sollte jetzt alles noch im Browser funktionieren. Schließlich besteht Schritt 4 darin, das <a> Element zu verwenden, um eine dynamische href zu erstellen. Zunächst einmal die v-Bind Direktive, oder wir können noch einmal die Kurzschrift verwenden, die e Doppelpunkt ist, und dann können wir anstelle des Schrägstrichs auf die link.url zugreifen. Ich kann alle Links im Browser ausprobieren, Home-Link wird immer noch auf diese aktuelle Seite, das Portfolio verlinken. Dies verweist auf den Schrägstrich portfolio.html und der Schrägstrich Kontakt mit mir funktioniert auch. Nochmals, keine Sorge, wenn dies auf eine Datei verlinkt, die wir nicht erstellt haben. Alles, was zählt, ist, dass unsere Links jetzt funktionieren. 15. Javascript-Ausdrücke: In unseren HTML-Dateien haben wir bereits die doppelten Calibraces verwendet, auch als Interpolation bezeichnet werden, um unsere Dateneigenschaften auszugeben, und auch innerhalb unserer Schleifen, um auch eine Variable auszugeben. Bei Bedarf können diese Doppelkalibraces auch JavaScript-Ausdrücke unterstützen. Ein kleines Symbol könnte diese verwenden, um eine JavaScript-Berechnung durchzuführen und dann das Ergebnis auszugeben. Überall im Inneren von hier, lassen Sie uns direkt unter die Kopfzeile gehen. Wir können diese Doppelkalibraken verwenden und eine einfache Ergänzung wie 1 plus 3 erstellen. Wenn Sie nur diesen Ausdruck auswerten und dann das Ergebnis von 4 ausgeben, könnten wir auch unsere JavaScript-Ausdrücke verwenden, wie dividieren oder wir könnten 10 dividiert durch 2 sagen, der Wert von 5. Wir können auch integrierte JavaScript-Methoden verwenden. Zum Beispiel könnten wir auf das mathematische Objekt zugreifen und dann eine Methode namens „random“ auswählen. Dies erzeugt dann eine Zufallszahl zwischen Null und eins, jedes Mal, wenn wir den Browser neu laden. Wir können auch auf unsere vorhandenen Dateneigenschaften wie den Namen zugreifen und diese mit JavaScript-Methoden wie ToUpperCase umwandeln. Es nimmt dann unseren ursprünglichen Namen , der in einer Datumseigenschaft platziert wird, und transformiert diese dann in Großbuchstaben, bevor Sie dies im Browser ausgeben. Wir könnten noch weiter zu seltsamen Dingen wie dem ternären JavaScript-Operator gehen. Wir könnten überprüfen, ob der Name.length größer als Null ist. Dies ist derzeit der Fall, da wir mehr als Null Zeichen in der Zeichenfolge haben. Wenn dies wahr ist, was wir wissen, dass es ist, so werden wir nur eine Zeichenfolge der Begrüßung ausgeben, gefolgt von dem Namen unseres Benutzers. Wenn nicht, verwenden wir den Doppelpunkt, um eine zweite Bedingung bereitzustellen, die „Willkommen Gast“ sein wird. Dies ist normales JavaScript und es ist nichts Spezifisches, JS anzuzeigen. Die einzige Betrachtungsbeteiligung ist, dass wir dies mit den doppelten Kalibrennen ausgeben. Wir wissen, dass unser Name.length größer als Null ist, so dass wir die Botschaft der Begrüßung auf unserem Namen sehen. Wenn wir eine leere Zeichenfolge erstellen würden. Zum Beispiel, wenn ein Benutzer nicht angemeldet ist, würden wir die Meldung „Willkommen Gast“ sehen. Eine andere Sache, die wir tun können, ist, Ausdrücke zu unseren dynamischen Attributen hinzuzufügen, genau darüber, wo wir diese dynamische Stil-Eigenschaft setzen. Nehmen wir an, wir wollten das DarkMode-Objekt nur setzen, wenn eine bestimmte Bedingung erfüllt ist. Als zufälliges Beispiel könnten wir sagen, wenn 10 weniger als fünf ist, wenn dies wahr ist, werden wir dann den DarkMode anzeigen, oder wenn nicht, wir eine leere Zeichenfolge ausgeben, was bedeutet, dass keine Klasse angewendet wird. Speichern Sie diese und aktualisieren Sie sie. Zehn ist weniger als fünf, so dass der DarkMode nicht angewendet wird, wenn wir dies ändern, um wahr zu sein, also 10 ist größer als fünf, DarkMode sollte jetzt auf unser Projekt angewendet werden, oder als realistischeres Beispiel, zurück in unseren Skripten. Wir haben diese DarkMode set Eigenschaft. Wir können dies nun verwenden, um unseren DarkMode bedingt zu rendern anstatt diesen Zahlenwert Wir können „DarkModeSet“ sagen, was momentan wahr ist, also bleibt DarkMode aktiviert. Wenn wir dies auf false setzen, sollte es jetzt entfernt werden. Wir können auch unsere Begrüßungsnachricht entfernen. Das manuelle Ein- und Ausschalten dieses DarkMode ist nicht ideal. Im nächsten Video werden wir das so einstellen, dass es auf eine Schaltfläche reagiert. 16. Event-Handhabung: Zusätzlich zu den Richtlinien, die wir bisher geprüft haben, zu denen V4 und V-Bind gehören. Wir werden nun eine weitere nützliche Direktive namens V-on betrachten, die es uns ermöglicht, auf bestimmte Ereignisse zu reagieren. Diese V-on-Direktive wird auch an unsere Elemente übergeben, innerhalb des öffnenden Tags als Attribut, und wir werden es verwenden, um zwischen dem hellen und dem dunklen Modus zu wechseln. Wenn der Benutzer auf eine Schaltfläche klickt, bringt uns zurück in unsere index.html. Unten innerhalb unseres Blog-Abschnitts, werden wir eine HTML-Button hinzufügen. Wir können dann innerhalb der offenen Seite des V-auf die Direktive einschließen, die für einen Klick Ereignisse zu hören wird. Wir können auch auf Ereignisse hören, genau wie in regulärem JavaScript, wie beim Senden, On-Mouseover, On-Cube, und so weiter. Der einzige Unterschied ist, dass wir das On-Präfix entfernen, was bedeutet, dass nicht in Ereignissen wie On-Mouseover einfach zu mouseover wechseln würde. Wir möchten jedoch bei dieser Gelegenheit auf einen Klick auf diesen Button hören, und dann innerhalb der Zitate wollen wir tatsächlich etwas tun, wenn auf diese Schaltfläche geklickt wurde. In diesem Fall wollen wir zwischen dem dunklen Modus umschalten, und wir haben diese als Dateneigenschaft namens Dark Mode gesetzt. Im Inneren hier werden wir die Liste umschalten, indem dunklen Modus einstellen, um gleich dem Gegenteil zu sein. Das Ausrufezeichen bedeutet, dass, wenn der dunkle Modus momentan true gesetzt ist, dies auf false umstellt, und auch das Gegenteil gilt. Lassen Sie uns dies versuchen, in der Tat, wir müssen etwas Text zwischen unserer Schaltfläche hinzufügen. Klicken Sie darauf, und dies schaltet nun unseren dunklen Modus um. Wir können die Ausgabe des dunklen Modus gesetzt sehen, wenn wir diese greifen, und dann können wir diese in zwischen den geschweiften Klammern ausgeben. Um dies klarer zu sehen, ist dies derzeit auf false gesetzt. So wird es wahr sein, falsch, und so weiter. Neben dieser V-on-Syntax ist es auch eine Abkürzung, genau wie wenn wir die Bindung verkürzt haben, um einen Doppelpunkt zu verwenden, können wir V-on verkürzen, um das at-Symbol zu verwenden, und das funktioniert genau gleich. Diese Umschaltfläche ist nicht die am besten aussehende, daher werden wir dies stattdessen durch eine HTML-Entität ersetzen. Wir können dann zwischen einem Sohn und einem Mond-Icon umschalten, abhängig von unserem Toggle-Zustand. Die beiden Symbole, die wir anzeigen werden, werden diesen Umschalter Text ersetzen. Lassen Sie uns zunächst unsere beiden Icons ausgeben. Das erste ist das kaufmännische Und-Zeichen, das harte und dann 9788 gefolgt vom Semikolon. Das zweite ist das kaufmännische Und-Zeichen, das harte, und das ist 9789. Dies wird uns unsere beiden Icons geben, die wir brauchen, aber wir wollen nur eines davon auf einmal zeigen. Wir können den ternären JavaScript-Operator verwenden, um zwischen diesen beiden Symbolen zu wechseln. Öffnen Sie die doppelten geschweiften Klammern und wir können überprüfen, ob der dunkle Modus eingestellt ist derzeit wahr. Wenn dies der Fall ist, werden wir als String ausgegeben, das erste Symbol, das die Sonne ist. Wenn nicht, verwenden wir den Dickdarm und gehen dann in den Mond. Nachladen. Wir befinden uns momentan im Lichtmodus, also sehen wir den Mond. Klicken Sie auf diese und dies wird zur Sonne wechseln. Wie wir bereits erwähnt haben, neben dem Hören auf unsere Klick-Ereignisse, können wir auch über Ereignisse hören, wie Mouseover, und dies sollte jetzt unseren Zustand jedes Mal, wenn wir den Mauszeiger über diese bestimmte Schaltfläche bewegen. In diesem Beispiel ist ein Click-Ereignis jedoch sinnvoller. Ich habe JavaScript-Ausdrücke nicht direkt in das Click-Ereignis wie folgt vergeben, ist für kleine Beispiele in Ordnung, wird aber im Allgemeinen als besser angesehen, dies aus unserem HTML zu extrahieren und in eine Funktion oder eine Methode zu setzen, und das ist, was wir als Nächstes entdecken werden. 17. Methoden: Innerhalb von Vue.CreateApp haben wir bisher nur innerhalb dieses Datenabschnitts gearbeitet. Jetzt werden wir einen neuen Abschnitt hinzufügen, der für unsere Methoden sein wird. Dies ermöglicht es uns, viele coole Dinge zu tun, wie die Änderung unserer Daten und generell machen unsere Apps viel interaktiver und nützlicher. Wenn Sie mit Funktionen in JavaScript vertraut sind, tun Methoden dasselbe. Zum Beispiel haben sie die name -Methode, weil sie Teil dieses Objekts sind. Während unser Datenabschnitt als Funktion eingerichtet wurde, unsere Methode, um als Objekt einzurichten, weil wir sie manuell aufrufen werden. Stellen Sie sicher, dass wir uns außerhalb unseres Datenabschnitts befinden. Scrollen wir nach unten zur schließenden geschweiften Klammer. Danach werden wir unsere Methoden einrichten, verwenden Sie es als Objekt. Die erste Methode, die wir verwenden werden, ist, unseren dunklen Modus umzuschalten. Dies liegt daran, dass wir nicht möchten, dass zu viel JavaScript-Logik in unserer HTML-Datei ersetzt wird. Wir werden das Umschalten unseres Farbschemas in diese Methode abstrahieren. Lassen Sie uns das ausschneiden und fügen Sie es in unsere Methode ein. Dann müssen wir den dunklen Modus ändern, der auf this.DarkModeSet eingestellt ist. Der Grund, warum wir dies verwenden, ist dieses Schlüsselwort, weil sowohl der Datenabschnitt auch der Methodenabschnitt Teil der sogenannten Options-API ist. Die Abschnitte unter anderem, die wir bald betrachten werden, haben Zugriff auf jede Vue Eigenschaften, indem Sie dieses Schlüsselwort verwenden. Zum Beispiel können unsere Methoden auf alles aus dem Datenabschnitt zugreifen, solange wir dieses Schlüsselwort verwenden, so könnte auf this.name, this.links zugreifen und auch im Gegenzug kann der Datenabschnitt unsere Methode aufrufen, oder wir könnten dies sagen. Togglemode. Jetzt ist alles, was noch zu tun ist, diese Methode von unserer Indexseite aus aufzurufen. Übergeben Sie es Umschaltmodus, aktualisieren Sie den Browser, und jetzt können wir immer noch zwischen unseren beiden Farbversionen für diese Zeit wechseln , indem wir den gesamten Code in eine Methode extrahieren. 18. Rohe HTML: Wenn wir wollten, können wir auch HTML mit Vue.js ausgeben. Zurück im Inneren unserer script.js und bis an die Spitze, wir haben diese Reihe von Blog-Posts. Nehmen wir an, wir wollten den Körper dieses Blog-Beitrags formatieren , indem wir einige HTML-Elemente innerhalb dieses Textes hinzufügen. Zum Beispiel könnten wir jedes dieser Wörter ausschneiden und dann die starken Elemente erstellen. Platzieren Sie dieses Wort wieder dazwischen. Wir könnten auch jedes der Elemente hinzufügen, wie das break-Tag, das dann auf eine neue Zeile platziert. Gehen wir zurück zum Browser und sehen, welche Wirkung dies haben wird. Wir können sehen, dass wir nicht ganz das Ergebnis bekommen, das wir wollen, die starken Elemente und auch das break-Tag wurde gerade als Teil einer Zeichenfolge ausgegeben. Dies liegt daran, dass wir dies in unserer index.html zwischen diesen doppelten geschweiften Klammern ausgeben. Diese doppelten geschweiften Klammern geben den Wert als Nur-Text aus. Dies macht diese geschweiften Klammern keine gute Wahl für Text, der HTML-Elemente enthält. Stattdessen bietet Vue eine neue Direktive namens V-HTML. Wie immer fügen wir unsere Direktiven als Attribut hinzu, und dies wird unsere doppelten geschweiften Klammern ersetzen. Dies ist V-HTML und dann können wir dies gleich unserem Beitrag, dem Körper, setzen. Wir können dies auch entfernen, den Browser aktualisieren. Unser starkes Tag ist nun wirksam geworden und auch unser Break-Tag. Das funktioniert jetzt alles gut, aber aus Sicherheitsgründen müssen wir vorsichtig sein, wenn wir V-HTML verwenden. Wir sollten nur HTML aus vertrauenswürdigen Quellen injizieren. Zum Beispiel sollten wir niemals HTML verwenden, das vom Endbenutzer unserer Website bereitgestellt wird , da dies zu potenziellen Cross-Site-Scripting-Angriffen führen könnte. Es ist wirklich wichtig, wenn wir diese Direktive verwenden , dass wir absolut sicher sind, dass diese Quelle sicher ist. So können wir V-HTML verwenden. Als nächstes werden wir Lifecycle-Haken entdecken. 19. Vue-Lebenszyklus: Wenn wir unsere Vue obere Übersichtsinstanz erstellen, gibt es hinter den Kulissen eine Reihe von Bühnen. Die Vue Dokumentation hat ein ziemlich gutes Diagramm was genau passiert, wenn wir eine neue Vue App erstellen. Sie müssen sich nicht daran erinnern oder für den Moment vollständig verstehen, aber beachten Sie, dass wir Code in jeder Phase dieses Lebenszyklus ausführen können. Zum Beispiel, oben sehen wir Vue.CreateApp, während wir unsere Optionen übergeben. Dies ist die Anfangsphase, die wir bereits angesehen haben, und dann wollen wir dies mit app.mount zum DOM. Nachdem diese Instanz erstellt wurde, haben wir Zugriff auf die BeforeCreate und auch die erzeugten Hooks. Diese Lifecycle-Hooks können zu unserem Objekt hinzugefügt werden, das Sie neben den Daten und den Methoden, die wir derzeit verwenden, in CreateApp übergeben . Werfen wir einen Blick auf diese ersten beiden Lebenszyklus-Hooks über in unseren Skripten. Neben unseren Daten werden wir uns zuerst ansehen, bevor erstellt. Der zweite durch ein Komma getrennt ist der erzeugte Hook. Innerhalb dieser beiden Hooks können wir jeden Code hinzufügen, den Sie in diesen ersten beiden Phasen ausführen möchten. Um genau sehen zu können, wann jeder dieser Hooks ausgeführt wird, können wir ein Konsolenprotokoll durchführen. Die erste, die ich werde einen Text von BeforeCreate hinzufügen, so dass wir genau wissen, welches Konsolenprotokoll läuft, und dann denken Sie daran, dieses Schlüsselwort zu verwenden können wir auf alle anderen Eigenschaften unserer Vue Instanz zugreifen, die unsere -Aktionen von Daten. Wir können den Wert unseres Namens mit this.name ausgeben. Damit können wir dies auch innerhalb des erstellten Hook über an die Konsole ausgeben. Klicken Sie mit der rechten Maustaste und überprüfen Sie, und auch hauptsächlich, um zu aktualisieren. Wir sehen, dass der vor erstellen Hook einen Wert von undefined zurückgibt. Aber unter diesem innerhalb des kreativen Hakens haben wir Zugriff auf unsere Dateneigenschaft. Warum ist das? Nun, es ist nicht bis zur erstellten Phase, in der Vue die Verarbeitung und Einrichtung der Dinge auf unserem Optionsobjekt abgeschlossen hat . Das hat unsere Daten und Methoden. führt, dass irgendetwas aus unserer Vue Instanz wie dazuführt, dass irgendetwas aus unserer Vue Instanz wie unsere Dateneigenschaften als undefiniert innerhalb des vor erstellt Hook zurückgegeben werden. Dies bedeutet, dass wir dies nur für etwas wie einen API-Aufruf verwenden würden, nicht mit irgendwelchen Überabschnitten wie unseren Dateneigenschaften verknüpft ist . Wir können das auch sehen, wenn wir zur Zeichnung zurückkehren. Wir können innerhalb dieses Abschnitts sehen wir keinen Zugriff auf eine der Viewer-Aktivitäten haben , bis nach dem BeforeCreate-Hook. Danach gehen wir dann auf die Template-Option, die uns zwei separate Optionen gibt. Wir werden uns diese Template-Option bald ansehen, wenn wir uns Komponenten ansehen. Dies ist im Grunde der Abschnitt, in dem wir alle unsere HTML ausgeben, die die dynamischen Abschnitte mit einem doppelten geschweiften Klammern enthält. Wenn diese Template-Option nicht verfügbar ist, wird sie zu unserem Abschnitt gehen, in den wir mounten, und bewerten den Inhalt von hier. Danach haben wir eine Reihe von Stufen, wenn die Anwendung auf das DOM gemountet wurde, können wir vor dem Mount zugreifen oder sobald die App gemountet wurde. Sobald die App auf das DOM gemountet wurde, können wir auch auf Änderungen hören. Wir können dann einige Code ausführen, bevor das Update stattgefunden hat oder nachdem das Update abgeschlossen ist. Die letzten beiden Stufen sind, wenn eine Komponente aus dem DOM entfernt wird und wir können darauf vor einem Mount Hook und auch den unmontierten Haken zugreifen. Diese letzten beiden Stufen sind nützlich für jede Bereinigungsarbeit, vielleicht wollen aufhören, auf irgendwelche Ereignisse zu hören, und dies ist der richtige Ort, um es zu tun. Sehen Sie, wie das alles in der Praxis funktioniert und jetzt werden wir einen einfachen API-Aufruf machen , um einige Blogbeiträge von einer externen Quelle zu erhalten. Die Quelle für diesen Blogbeitrag wird über den JSON-Platzhalter verfügbar sein. Dies ist eine sehr einfache API und Bewertungen, die wir verwenden können, um einige Beispieldaten wie unsere Blog-Posts zu erhalten. Wir können sehen, dass wir Blogposts bekommen können, wir können Kommentare bekommen. Wir haben Alben, Fotos, Todos, und auch Benutzer. Wir werden den Abschnitt /post zugreifen, der eine 100 Beispiel-Blogbeiträge zurückgeben wird. Das ist also ziemlich einfach, wir fügen einfach /posts am Ende dieser URL hinzu. Dies wird eine Liste von 100 Blogbeiträgen im JSON-Format zurückgeben, und wir können auch einen Aufruf zu dieser URL von einer Vue Methode machen. Gehen Sie zurück zu Visual Studio Code und in unser Skript, wir können dies innerhalb unseres Methodenabschnitts aufrufen, und die Methode, die ich nennen werde, wird getposts sein. Hier drinnen werden wir die Fetch-API verwenden, um einen Aufruf zu dieser URL zu machen. Fügen Sie dies als String ein, und diese Fetch-API ist nur normales JavaScript. Es hat nichts mit Vue JS zu tun. Wir können dann die Daten speichern, die wir zurück innerhalb einer Variablen namens Antwort erhalten haben. Da wir eine externe API erreichen, wird dies ein asynchroner Aufruf sein. Das bedeutet, dass die Daten, die wir zurückbekommen, in ein paar Millisekunden zurückkommen können. Es kann fünf Sekunden dauern, es kann überhaupt nicht zurückkommen. Um damit umzugehen, können wir ein einzelnes Gewicht verwenden, das eine JavaScript-Funktion ist. wird uns erlauben, auf die Daten zu warten , bevor wir tatsächlich etwas damit tun. Um dies zu tun, können wir unsere Methode als asynchron markieren. Also fügen wir kurz zuvor das asynchrone Schlüsselwort hinzu, und dann warten wir auf unsere Daten zurück. Dies bedeutet, wenn wir versuchen, auf die Antwortvariable zuzugreifen, bevor diese Daten zurückkommen, wird kein Fehler ausgelöst. Jetzt bleibt dies mit dem Antwortobjekt aus unserem API-Aufruf, und dann müssen wir den JSON aus der Antwort extrahieren. Um dies zu tun, werden wir auf unsere Antwort zugreifen und dann die JSON-Methode aufrufen. Dies wird den JSON aus unserer Antwort extrahieren, die wir in einer Konstante oder einer Variablen namens Daten speichern können. Wir werden dies auch [unhörbar], um sicherzustellen, dass dies beendet ist, bevor wir auf unsere Daten zugreifen, und dann würde es in der Konsole protokollieren. Bevor wir noch weiter gehen, wir einen Schritt zurück und denken darüber nach, was wir tun wollen. Wir haben eine Liste von Blogposts, die wir von der API zurückbekommen, und dies wird innerhalb dieser Datenvariablen gespeichert. lassen uns mit zwei Dingen, die wir tun müssen. Zuerst müssen wir diese Daten an unseren Datenbereich weiterleiten und diese zu unseren Beiträgen hinzufügen. Das zweite, was wir tun müssen, ist, diese Methode tatsächlich aufzurufen. Wie wir uns zuvor angeschaut haben, könnten wir eine Schaltfläche zu unseren Seiten hinzufügen und diesen Anruf tätigen, sonst wäre dies kein guter Nutzen. Stattdessen wollen wir dies automatisch tun, und wir könnten dies von einem Lebenszyklushaken aus tun. Wir können den BeforeCreates-Haken verwenden. Da denken Sie daran, dass dies aufgerufen wird, bevor die App erstellt wird, so dass die get post Methode undefiniert ist. Wir könnten mountet verwenden, sobald die App an das DOM gemountet ist, oder wir könnten noch früher gehen und den erstellten Haken verwenden , den wir vorher nachgeschlagen haben. Wir brauchen dieses BeforeCreate nicht mehr, also werden wir das verschieben und dann zum erstellten Abschnitt gehen. Anstatt ein Konsolenprotokoll zu machen, rufen wir unsere GetPost-Methode auf, die wir mit this.getPosts zugreifen können. Über zum Browser, und wir können die Entwickler-Tools öffnen. Ich werde sagen, dass Reponse nicht definiert ist, also haben wir einen Rechtschreibfehler. Da gehen wir. Antwort. Aktualisieren. Es gibt unser Konsolenprotokoll mit 100 verschiedenen Blogbeiträgen. Jeder dieser Blogbeiträge hat eine ID, einen Text, einen Titel und auch die Benutzer-ID, die ihn erstellt hat. Dies sind genau die gleichen Daten, die wir bereits haben, plus diese zusätzliche Benutzer-ID, die wir ignorieren können, wenn wir nicht verwenden wollen. Wir werden diese Daten nun nutzen, um die kostenlosen Blogbeiträge zu ersetzen, die wir bereits haben. Zuerst werden wir die Blog-Beiträge, die wir bereits aus unserer Dateneigenschaft haben, löschen. Um dies zu tun, können wir bis zu unseren Beiträgen scrollen und dann setzen dies ein leeres Array, und wir können jetzt diese Beiträge von unserer Methode aktualisieren. Tun Sie dies anstelle eines Konsolenprotokolls. Was wir tun werden, ist auf this.posts zuzugreifen und dies auf unsere Daten zu setzen. Rüber zum Browser. Dies lässt uns jetzt mit 100 verschiedenen Blog-Posts innerhalb unserer Seite. Der Grund dafür ist, dass die Daten, die wir von der API zurückerhalten haben, die wir im Konsolenprotokoll gesehen hätten, genauso strukturiert sind wie unsere ursprünglichen Blogbeiträge. Wir können dies innerhalb unserer Index-Seite sehen. Unten im Blog-Bereich haben wir Zugriff auf den Titel, den Körper, und diese haben auch eine ID zu. Wenn die Daten, die von unserer API zurückkamen, etwas anders waren, zum Beispiel, wenn der Body Abschnitt Inhalt betitelt wurde, müssten wir dies nur hier ändern, und wir werden gut gehen. 20. Abschnittseinleitung – Komponentengrundlagen: Wenn Sie mit Front-End-Frameworks oder Bibliotheken wie Vue.js arbeiten, ist eines der wichtigsten Konzepte, die Sie lernen müssen, Komponenten. In den kommenden Videos werden wir entdecken, wie Vue.js Komponenten verwendet, was sie sind, die verschiedenen Komponentententypen, und dann können wir uns Dinge ansehen, wie wir Daten zwischen diesen Komponenten weitergeben können. Beginnen wir mit dem nächsten Video, und wir werden einen Blick darauf werfen, was genau eine Komponente ist. 21. Was sind Komponenten?: Vue.js und einige andere Freunde und Frameworks oder Bibliotheken haben dieses Konzept, unsere Anwendungen unter Verwendung von Komponenten zu erstellen. Der Grund dafür ist, unsere App in kleinere Teile zu zerlegen, wodurch unser Projekt einfacher zu warten, zu organisieren und zu debuggen ist. Aber was ist eine Komponente? Nun, bedenken Sie dieses Bild, das von unserem bevorstehenden Projekt stammt. Dies ist eine Countdown-App, wo wir Ereignisse hinzufügen und sie werden in der Datumsreihenfolge angezeigt werden. Wir können auch die Anzahl der Tage, um die Veranstaltung zu sehen. Wir könnten diese App vollständig in der App.vue Datei erstellen. Aber obwohl dies keine große Anwendung ist, kann es schnell überfüllt und unorganisiert werden oder sich in einer einzigen Datei befindet. Um dies zu helfen, können wir unsere App in Teile oder Abschnitte aufteilen, wie unsere Schaltfläche oben, die sogar Teil der App.vue Datei sein kann , oder wir könnten sie zu einer separaten Komponente verschieben. Auch mit unseren Ereignissen könnte der Code für diese aus dieser App.vue Datei entnommen und in eine unabhängige Komponente platziert werden. diesen Code in eine Komponente wie diese isolieren, wissen wir jetzt , wo wir suchen, um diesen Code zu bearbeiten, anstatt durch eine große Datei zu scrollen. Wenn es ein Problem mit diesem Ereignisabschnitt gibt, ist unser Code jetzt auch isoliert, was bei der Behebung des Problems hilft. Dieses Projekt enthält auch ein Formular, das wir verwenden, um entweder ein neues Ereignis hinzuzufügen oder ein vorhandenes zu bearbeiten. Dies wäre auch ein guter Anwendungsfall für eine Komponente. Es gibt keine harte oder schnelle Regel, um genau zu bestimmen, welchen Pfad wir in eine Komponente machen sollten, es ist etwas, das Sie selbst beurteilen müssen , wenn eine Datei groß wird oder gehört zu pflegen. Dies kann ein gutes Zeichen dafür sein, dass Sie in eine separate Komponente auslagern müssen, oder Sie können auch nach Features organisieren, genau wie wir hier mit diesem Bearbeitungsformular sehen. Die Anzahl der Komponenten, die wir erstellen, behindert unsere Leistung nicht oder erhöht die Größe Blase nach oben, da wir Webpart verwenden, um sie am Ende effizient zu bündeln. Es ist in diesem Bundle, das der Browser für unsere Single-Seiten-Anwendungen verwendet. 22. Ein erster Blick auf Komponenten: Die vorherigen Folien verwendeten das Konzept der einzelnen Dateikomponenten, es ist eine Komponente, die in eine dedizierte Datei spielt, um die Dinge besser organisiert zu halten. Um dies zu tun, brauchen wir ein viel ausgefeilteres Setup , das wir im nächsten Abschnitt betrachten werden. Diese Komponenten, die in einer eigenen Datei platziert wahrscheinlich die am häufigsten verwendete Art von Komponenten. Aber zuerst werden wir uns einige verschiedene Möglichkeiten ansehen, dies zu schreiben, beginnend mit der globalen Komponente. Das erste, was ich in unserer script.js tun werde, ist, unsere View-Instanz innerhalb einer Konstante namens App zu speichern. Jetzt haben wir diese Anwendung in dieser App-Referenz gespeichert. Wir werden dann diese Aufruf-Mount verwenden, also app.mount. Dann stellen wir das wieder in den Körperbereich ein. Wenn wir den Browser aktualisieren, sehen wir hier keine Änderungen, aber jetzt, mit diesem separaten Verweis auf unsere Anwendung bedeutet, dass wir jetzt eine Methode namens Komponente aufrufen können. Diese app.component nimmt zwei Argumente an. Der erste ist der Name, den wir dieser Komponente geben möchten, und meins wird App-Header sein. Wenn Sie den CDN-Link genau wie wir verwenden, sollte der Name dieser Komponente in Kleinbuchstaben, mehr als ein Wort und durch Bindestriche getrennt sein. Dies liegt daran, dass wir dies wie ein normales Element wieder in unser HTML einfügen werden , so dass wir keine Namenskonflikte wollen. Diese Namenskonvention bedeutet auch, dass wir nicht mit regulären HTML-Elementen wie dem Header, dem Nav,auch einem regulären hv zum Beispiel kollidieren regulären HTML-Elementen wie dem Header, dem Nav, . Danach wird das zweite Argument, das durch ein Komma getrennt wird, ein Objekt sein. Dieses Objekt ist wie eine Mini-Anwendung. Es kann seine eigenen Daten, seine eigenen Methoden und im Grunde alles, was wir gerade oben in unserer regulären View-Instanz haben. Daneben hat es auch eine Vorlage, die eine Zeichenfolge ist, und dies wird der HTML sein, den wir innerhalb des Browsers ausgeben möchten. Dies kann ein beliebiger HTML-Code sein, z. B. eine Überschrift der Ebene eins. Fügen wir hier vorerst nur einen Text hinzu. Jetzt können wir diesen App-Header innerhalb unserer Index-Seite wie ein normales HTML-Element verwenden. Lassen Sie uns den Header-Abschnitt auskommentieren und dann können wir ihn durch unsere app-Header-Elemente ersetzen, speichern, und dies wird jetzt anstelle unserer regulären Header ausgegeben. Jetzt wissen wir, dass dies funktioniert, können wir jetzt unseren regulären Header-Abschnitt greifen. Wir können das auskommentieren und diesen Ort ausschneiden, und dann können wir dies jetzt als unsere Template-Zeichenfolge platzieren. [ unhörbar] von all diesen roten Unterstreichungen, aber der Texteditor hebt ein Problem hervor. Dies liegt daran, dass wir Zitate verwenden, um all diesen HTML-Code zu umgeben. Dies funktioniert perfekt, wenn wir eine einzelne Zeile HTML verwenden, genau wie unsere Ebene 1-Überschrift. Wenn wir jedoch mehrere Zeilen von HTML genau so haben, müssen wir diese Zitate durch die Bacticks ersetzen. Wenn wir die View CLI verwenden, um unser Projekt bald einzurichten, wird dies uns eine sauberere Möglichkeit geben, unseren HTML-Code innerhalb dieser Komponenten zu schreiben. Aber für jetzt Mover zum Browser. Dies erscheint jetzt innerhalb eines Header-Abschnitts, aber wir fehlen die Variablen. Wir sehen nicht mehr Dinge wie unsere dynamischen Abschnitte, die der Name ist, und auch den Link direkt unten. Damit dies funktioniert, können wir auch den Datenabschnitt einrichten, den er für diese Vorlage benötigt. Scrollen Sie also bis zum Datenabschnitt, den wir verwendet haben. Wir brauchen den Namen und auch den Link, also werde ich diese aus der View-Instanz ausschneiden und diese dann wieder in unsere Komponente einfügen. Wir haben die Daten so eingerichtet, wie wir es oben getan haben. Dies ist eine Funktion, die ein Objekt zurückgeben wird , und wir können in unseren Namen und unsere Links einfügen. Vergessen Sie nicht, den Datenbereich und die Vorlage durch ein Komma zu trennen. Dadurch werden unsere Daten nun wieder in den Browser gesetzt, aber diesmal, von einer Komponente. 23. Props und Wiederverwenden von Komponenten: Neben der Isolierung unseres Codes besteht ein weiterer Vorteil der Verwendung von Komponenten darin, dass sie auch wiederverwendet werden können. Nicht nur das, sondern wir können auch die gleichen Komponenten wiederverwenden und auch verschiedene Werte übergeben. Um dies zu sehen, werden wir über einen unserer Blogbeiträge in eine Komponente bewegen. Wir können schneiden oder ersetzen Sie den vollständigen Artikel Abschnitt unseres Blogs über in unserer index.html. Genau wie im letzten Video, werden wir eine neue Komponente erstellen. erneut sicher, dass dies knapp über dem Betrag liegt. Also wieder, das ist up.components und das erste Argument wird der Name sein, den ich den Blog-Beitrag nennen werde, getrennt durch ein Komma, das wir in unserem Objekt übergeben. Dies wird in unserer Vorlage nehmen, die mehrzeilig ist. Also wieder verwenden wir die hintere Ticks Paste in unserem Artikel. Der Einfachheit halber werden wir die for-Schleife entfernen. Wir können dies auch ändern, um einfach einen Titel und den Körperbereich zu sein. Also werden wir das einen einzigen Beitrag weitergeben. Dann, genau wie wir es mit der Header-Komponente getan haben, werden wir unseren neuen Blog-Beitrag innerhalb des HTML ausgeben. Dies wird wieder innerhalb unseres Blog-Bereichs platziert werden. Diesmal jedoch, anstatt die Daten innerhalb der Komponente zu haben, genau wie wir es mit dem Header-Abschnitt getan haben. Dieses Mal werden wir die Daten an diese Komponente mit Hilfe von Requisiten weiterleiten. Requisiten sind genau wie normale Attribute, die wir verwenden können , um die Daten zu senden, die die Komponente benötigt, und diese Komponente benötigt den Titel und auch den Körper und die Art, dies zu tun, ist, wie ein Attribut, in das öffnende Tag des Blogs zu gehen Beiträge. Zunächst einmal können wir den Titel übergeben und dies nur einige Beispieldaten für jetzt, so können wir diesem jeden Titel geben, den Sie wollen. Dies benötigt auch den Körperteil, so dass wir diesem ein zweites Attribut oder eine zweite Stütze geben können. Auch hier wird dies eine einfache Zeichenfolge sein. Da es sich um eine Verbindung handelt, können wir diese beiden auch wiederverwenden. Also lassen Sie uns das kopieren und einfügen. Ändern Sie den Titel. Jedes Mal, wenn wir dies tun und die Komponenten wiederverwenden, ist jede Komponente Inzidenz unabhängig von den anderen und hat auch ihre eigenen Daten, die auch als Zustand bezeichnet wird. Das heißt, obwohl wir zwei separate Blog-Beiträge haben, werden sie nicht miteinander in Konflikt geraten. Also haben wir unsere beiden Requisiten übergeben, wir haben den Titel und auch die Leiche bestanden. Diese werden diesen Variablen jedoch nicht automatisch zugewiesen. Eine Sache, die wir zuerst tun müssen, ist genau zu erklären welche Requisiten diese Komponente erwartet zu erhalten. Da wir mehrere Requisiten erhalten, können wir dies als Array hinzufügen und dann ein Komma am Ende hinzufügen. Die erste Requisite ist der Titel, und dann die zweite ist der Körper. Dies bedeutet nun, dass diese beiden Requisiten jetzt innerhalb unserer Vorlage verwendet werden können. Lassen Sie uns das im Browser ausprobieren. Wenn ich zwei Blog-Post-Komponenten schwebe, jede mit unabhängigen Daten. Obwohl dies völlig gut funktioniert, ist es keine effiziente Möglichkeit, sagen wir, 100 Blogbeiträge zu erstellen . Ein besserer Weg, dies zu tun, wäre es, diese Komponente mit einer V for-Schleife wiederzuverwenden. Zurück zu unserer Index-Seite und anstatt in zwei separaten Blog-Posts zu haben, was wir tun werden, ist nur unseren einzelnen Blog-Post. Dann können wir eine V for-Schleife verwenden. Innerhalb dieser V for-Schleife wollen wir die Daten nutzen, die wir bereits haben. Dies sind alle Blog-Beiträge, die wir hier gespeichert haben. So können wir sagen, post, in Beiträgen übergeben in einem Schlüssel , der wird unsere post.id sein. Jetzt anstatt unseren Titel und unseren Körper als Klartext zu übergeben, stattdessen werden wir eine Requisite oder Post übergeben, die gleich unserem Beitrag aus der Schleife gerade oben. Da dies eine Variable ist, müssen wir dies auch mit einer v-Bind-Syntax binden. Dies wird als Inhalt unserer Variablen und nicht als Zeichenfolge von Post übergeben. Jetzt ist dieser Blogbeitrag vorbei an einem Objekt namens post over to unserem Skript auf bis zu unseren Komponenten. Anstatt sowohl den Titel als auch den Körper zu erhalten, erhält dieser nun den Beitrag als Objekt. Dann können wir auf den post.title und auch auf den post.body zugreifen. Schauen wir uns das an. Unsere Blog-Post-Komponente wird nun wieder eingesetzt. Aber dieses Mal haben sie alle Daten, die sie benötigen, die als Requisite weitergegeben wurden. 24. Lokale Komponenten: Die Art der Komponenten, die bisher mit dieser app.component verwendet werden , wird als globale Komponente eingestuft, was bedeutet, dass sie sofort überall in unserer Anwendung verwendet werden können. Dies schließt auch Unterkomponenten ein. Mit Unterkomponenten meine ich Komponenten, die in anderen verschachtelt sind. Zum Beispiel nicht, dass es viel Sinn macht, aber wir könnten auch unsere Header-Komponenten innerhalb dieses Blog-Beitrags platzieren. Diese Vorlage ist genau wie unser HTML, also konnten wir dies genau wie auf der Indexseite platzieren, aber das war App-Header, und auch schließen Sie dies ab. Wenn wir das jetzt speichern und unser Projekt aktualisieren, sehen wir, dass unser Header-Titel und unsere Navigationslinks in jedem unserer Blog-Beiträge verfügbar sind, und das liegt daran, dass sie global verfügbar sind. Wenn Sie dieses Verhalten nicht ausdrücklich möchten, können wir auch die Verwendung von Komponenten einschränken, indem wir sie stattdessen lokal registrieren. Lokale Registrierung beinhaltet das Verschieben von app.component und das Erstellen regulärer JavaScript-Objekte. Diese Objekte müssen über Vue.CreateApp erstellt werden, und wir werden sehen, warum in einem Moment. Der erste wird für unseren AppHeader sein. Genau wie wir gesagt haben, wird dies ein normales JavaScript-Objekt sein. Die zweite Komponente war für BlogPost. Jetzt können wir den Inhalt beider Komponenten erfassen und sie innerhalb dieser Objekte platzieren. Also der erste ist der AppHeader, also scrollen ich nach unten zu unserer AppHeader-Komponente, und dann können wir alle Inhalte innerhalb dieser geschweiften Klammer kopieren. Kopieren Sie diese geschweifte Klammer nicht, wir werden nur den Inhalt bis zum schließenden Headerabschnitt kopieren. Lassen Sie uns das packen und fügen Sie es dann in unser Objekt ein. Der nächste ist unser BlogPost, und wir können genau das gleiche tun. Sie werden die Requisiten und auch die Vorlage zu greifen. Füge das hier drinnen hinzu. Wir werden dann unsere Absicht registrieren. Sie verwenden diese Komponenten innerhalb von Vue.CreateApp. Wir können dies tun, indem Sie einen Komponentenabschnitt erstellen, und fügen Sie dann ein Komma am Ende hinzu. Der Name der ersten Komponente wird also Blogpost sein, gleich unserem Objekt sein wird, das Sie oben erstellt haben, das BlogPost ist. Getrennt durch Komma, wird der zweite der AppHeader sein. Unsere Komponenten sind nun für die Verwendung innerhalb unserer Indexseite registriert. Ein paar Dinge, die zuerst zu beachten ist, das JavaScript-Objekt, das wir oben erstellen, muss das JavaScript-Objekt, das wir oben erstellen,über dieser CreateApp deklariert werden , damit wir dann innerhalb unserer Komponenten auf sie zugreifen können. Wenn wir auch mehrere Vue Instanzen haben, können wir jetzt genau steuern, welche Komponenten wir in jeder Version erscheinen oder verfügbar sein sollen. Wir brauchen diese globalen Komponenten nicht mehr unten unten, also werde ich den AppHeader und auch den BlogPost zum Browser auskommentieren. Aktualisieren Sie die Seite, fügen Sie unseren BlogPost und erscheinen jetzt neben unserem Header. Aber eine Sache zu beachten, dass in jedem unserer BlogPost diesen AppHeader nicht mehr sehen würde. Denken Sie daran, von vorher, wenn wir zu unseren Komponenten scrollen, haben wir immer noch diese AppHeader-Komponenten in jedem BlogPost, aber wir sehen es nicht mehr im Browser. Warum ist das hier? Nun, dieser App-Header ist jetzt eine Unterkomponente unseres BlogPost, und jetzt, da unsere Komponenten lokal und nicht global sind, haben wir jetzt keinen Zugriff auf unsere Komponenten überall, wo wir wollen. Wenn wir diesen AppHeader oder andere Komponenten innerhalb von hier verwenden möchten, müssten wir auch die Komponentenoption übergeben. Genau wie wir es in einer Vue.CreateApp getan haben, können wir auch unsere Komponenten übergeben. Dies ist wiederum ein Objekt, und dann werden wir erklären, dass wir diesen App-Header verwenden, auf das AppHeader-Objekt verweist. Speichern und aktualisieren, und seine lokale Registrierung platzieren Sie jetzt unseren AppHeader in jedem dieser BlogPosts. Natürlich brauchen wir das nicht für unser Projekt, also werde ich diese Komponenten und auch die Codezeile innerhalb von hier entfernen. Dies ist jedoch ein Beispiel, wenn Sie eine Komponente lokal innerhalb einer anderen registrieren möchten . Jetzt verstehen wir mehr über Vue und Komponenten. Als nächstes entdecken wir ein besseres Setup mit einer Vue CLI zusammen mit dem Beginn unseres nächsten Projekts. 25. Abschnittseinleitung – Tools und einseitige Anwendungen erstellen: Importieren von Vue.js als CDN-Link ist wirklich nützlich für einfache Projekte oder für die ersten Schritte, um alles über Vue zu lernen. Aber für größere oder mehr reale Anwendungen möchten wir in der Regel ein ausgefeilteres Setup verwenden. Dies ermöglicht es uns, unsere Anwendungen in wiederverwendbare Komponenten zu zerlegen, sie in separate Dateien zu platzieren und Dinge wie einseitige Anwendungen zu erstellen. Um dies zu tun, konzentrieren sich die kommenden Videos auf ein Tool namens Vue CLI. 26. Einseitige Anwendungen: Im vorherigen Projekt haben wir uns angesehen, wie wir Vue.js verwenden können, um mit nur einem einzigen Pfad für die Anwendung zu arbeiten. Wir können eine bestehende Website oder Anwendung aufnehmen, eine neue Vue Instanz erstellen und sie dann auf einem der HTML-Elemente einhängen, auf denen Sie sie verwenden möchten. Wie bereits erwähnt, können wir auch Vue.js verwenden, um unser vollständiges Front-End zu steuern. Wir können es verwenden, um die so genannte Single-Seiten-Anwendung zu erstellen. Dies ist eine App, die vollständig von JavaScript gesteuert wird und innerhalb des Browsers funktioniert. Mit der traditionellen Art, Websites zu erstellen, kann man auf eine Seite Link klicken, wie zum Beispiel diesen Link Über. Die Seite wird dann von einem Webserver angefordert , der dann mit dem Seiteninhalt antwortet und diese dann im Browser angezeigt. Einseitige Anwendungen funktionieren anders als diese. Anstatt Seiten auf Assets anzufordern, wie wir sie brauchen, baut Vue unsere App in JavaScript-Pakete auf. Wenn ein Benutzer zum ersten Mal eine einzelne Seite Anwendung besucht, wird das Paket dann vom Server heruntergeladen. Dieses JavaScript-Paket enthält die Inhalte unseres Projekts, wie unsere Seiten, was bedeutet, dass die gesamte Navigation zwischen diesen Seiten durch JavaScript im Browserverarbeitet wird JavaScript im Browser ohne dass weitere Seiten angefordert werden müssen vom Server, daher der Name Single-Seite-Anwendung. Wie jeder Feinheit Ansatz hat es Vor- und Nachteile. Einer der Profis ist, dass die Geschwindigkeit wirklich schnell ist. Wechseln zwischen Seiten mit JavaScript ist viel schneller als das Anfordern einer Seite von einem Webserver. Dies bietet eine großartige Benutzererfahrung, da es kein Laden gibt und die Navigation unserer App ist fast sofort. Auch da dieses Bundle im Browser gespeichert ist, kann es auch offline funktionieren. Es hat auch einige Nachteile, wie das Herunterladen eines großen Bündels kann zunächst langsamer sein , wenn der Benutzer Ihre Website zum ersten Mal besucht. Dies kann jedoch mit Code-Splitting optimiert werden und wir werden uns dies später im Kurs ansehen. Außerdem wird es im Allgemeinen nicht als SEO-freundlich betrachtet , wie herkömmliche Server generierte Seiten. Da der zurückgegebene HTML-Inhalt minimal ist und der Rest des Inhalts innerhalb des Browsers generiert wird, was zu Inhalten führt, die schwieriger von Suchmaschinen zu crawlen sind, obwohl die größeren Suchmaschinenfirmen wirklich hat dies vor kurzem verbessert. Auch als Nebenanmerkung, da JavaScript im Browser und auch im Server ausgeführt werden kann. Es ist auch möglich, Vue zu verwenden, um eine serverseitige gerenderte App zu erstellen. Dies wandelt unsere JavaScript-Anwendung mehr wie die traditionelle Art, Dinge zu tun, wo wir Seiten anfordern, wenn nötig. Dies ist jedoch eher ein fortgeschrittenes Thema und eines, das in diesem Kurs nicht behandelt wird. Es gibt auch ein Framework-Tool wie Node.js, das dabei helfen wird. wir als nächstes einen Blick auf einige Werkzeuge, die uns helfen, diese Arten von Single-Page-Anwendungen zu erstellen. 27. Die Vue-CLI: In dem Projekt, mit dem wir bisher gearbeitet haben, haben wir einen CDN-Link verwendet, um auf die Vue JS-Funktionen zuzugreifen. Das Setup ist in Ordnung für kleinere Projekte oder nur für die Arbeit mit einem Teil unserer Website. Für größere Projekte benötigen wir jedoch oft ein besseres Setup mit mehr Funktionen und Tools. Um dies zu helfen, gibt es die Vue CLI, die auf cli.vuejs.org verfügbar ist, die Plugins für viele gängige Tools hat, die TypeScript, Babel, Testing, und auch um einfach Pakete hinzuzufügen, die wir benötigen, wie die Vue Router. Selbst wenn Sie nicht planen, viele der Funktionen oder Plugins zu verwenden, werden Sie wahrscheinlich ein solches Setup wünschen, das es uns ermöglicht, Komponenten einfacher zu verwenden und auch für die Produktion zu erstellen. Es enthält auch Tools wie Webpack, so dass wir alle unsere Dateien und Assets bündeln können , um diese einzelnen Seiten Anwendungen zu erstellen. Die CLI wird vom Vue JS-Kernteam erstellt und gepflegt. Obwohl wir wissen, dass es nicht erforderlich ist, da wir bereits ein Vue JS-Projekt ohne es gebaut haben, wird es allgemein als Standardmethode akzeptiert, um Vue JS-Projekte zu erstellen. Wenn wir nach unten scrollen, gibt es unten einen Abschnitt „Erste Schritte“ , um uns innerhalb des Terminals einzurichten. Eine Sache, die hier zu beachten ist, ist, dass Node.js erforderlich ist, bevor wir voran gehen und dies tun. Wenn Sie Node.js nicht bereits installiert haben, wenn Sie auf nodejs.org gehen und dann auf die aktuelle Version klicken, um für Ihr Betriebssystem herunterzuladen. Wenn es eine Weile her ist, seit Sie aktualisiert haben, kann es sich auch lohnen, den Installationsprozess zu durchlaufen. Es ist nur ein Fall von ein paar Klicks. Node.js ist eine Möglichkeit für uns, JavaScript auf dem Server auszuführen. Wir werden keinen Node.js Code oder in der Tat keinen serverbezogenen Code schreiben. Dies ist nur eine Voraussetzung hinter den Kulissen für die Vue CLI. Sobald dies heruntergeladen wurde, müssen wir nur das Paket entpacken und dann durch den Installationsprozess für Ihr bestimmtes Betriebssystem fortfahren . Alles erledigt. Wir können jetzt dieses Fenster schließen. Wenn Sie Node so installieren, wird auch npm installiert, das ist der Paketmanager des Knotens, dem wir sowohl die Vue CLI als auch alle zusätzlichen Pakete installieren , die wir für unsere Projekte benötigen. Um mit der Installation fortzufahren, müssen Sie zum Terminal gehen. Sie können ein beliebiges Terminal verwenden, z. B. das integrierte Mac-Terminal, Sie können Windows PowerShell verwenden, und es gibt auch ein in Visual Studio Code integrierte. Wenn Sie sich öffnen, wählen Sie die Terminal-Option und gehen Sie dann zu „Neues Terminal“, das dies unten in unserem Texteditor öffnet. Über, ich werde iTerm für dieses Projekt verwenden. Das erste, was zu tun ist, ist zu überprüfen, dass sowohl npm als auch Knoten korrekt installiert sind. Zuerst können wir in Knoten und dann Bindestrich v eingeben . Dies wird uns die aktuelle Version der Knoten zurückgeben, die installiert ist. Als nächstes npm -v, die dann die installierte Version von npm zurückgibt. Beide Befehle sollten die Versionsnummer zurückgeben, aber wenn Sie einen Fehler sehen, müssen Sie Node und npm korrekt installieren, bevor Sie fortfahren. Zurück zur Vue CLI Homepage, wir haben diesen Installationsabschnitt unten unten. Wir können entweder npm oder den Yarn Paketmanager verwenden. So oder so ist völlig in Ordnung. Wenn Sie derzeit kein Garn Setup auf Ihrem Computer haben, würde ich empfehlen, den Befehl npm zu verwenden da dies keine zusätzliche Installation erfordert. Lassen Sie uns kopieren und einfügen, dies ist vorbei, drücken Sie „Enter“, und dies wird durch den Installationsprozess für die CLI gehen. Wenn Sie ein Mac-Benutzer sind und irgendwelche Installationsfehler in Bezug auf Berechtigungen auftreten, müssen Sie möglicherweise auch das Pseudo-Präfix vor dieser npm-Installation hinzufügen, dann müssen Sie das Kennwort eingeben, wenn Sie dazu aufgefordert werden. Oder noch besser, Sie könnten auch die Berechtigungen korrigieren , die Sie von der Installation blockieren. Sobald Sie dies getan haben, können wir dann den Befehl Vue create verwenden, gefolgt von dem Namen unseres Projekts. Aber zuerst werden wir den Befehl cd verwenden, um in unser Verzeichnis zu wechseln , in dem wir unser Projekt installieren möchten. Ich werde in den Desktop wechseln, drücken Sie „Enter“. Nun, du könntest das überall hinstellen, wo du willst. Wir können dann Vue erstellen und den Namen des Projekts, das ich die CLI-Demo nennen werde , drücken Sie „Enter“. Zum Zeitpunkt der Aufnahme gibt uns die Vue CLI die Option entweder Vue Version 2 oder Vue 3, die auch mit dem Babel und auch ESLint Setup für uns geliefert wird. Wählen Sie „Vue 3" aus. Denken Sie auch daran, dass in Zukunft die Option für Vue 2 möglicherweise nicht vorhanden ist. Manchmal ändern sich die Optionen, aber es ist in der Regel ziemlich selbsterklärend. Es sollte uns jetzt mit unserem Demo-Projekt auf dem Desktop verlassen. Jetzt müssen wir in dieses Demo-Verzeichnis wechseln. Wie es heißt, kann Babel cd verwenden, um das Verzeichnis in unsere CLI-Demo zu wechseln. Jetzt sind wir in dieser Demo, wir können dann unseren Entwicklungsserver laufen. Wenn Sie eine npm verwenden, können wir in npm serve eingeben, drücken Sie „Enter“. In der Tat ist dies npm run serve, drücken Sie „Enter“. Damit wird nun unser Entwicklungsserver eingerichtet. Sobald dies erledigt ist, wird es uns einen Link geben, den Sie jetzt im Browser öffnen können. Sehen Sie das Starter-Projekt alle Setup. Alles, was wir jetzt tun müssen, um dies zu bearbeiten, ist, dieses Projekt innerhalb unseres Texteditors zu öffnen , damit wir das einstecken können. Jetzt sind wir gut, in unserem Vue JS Code schreiben zu gehen. Dieses Projekt sieht jedoch ein wenig anders aus als die bisherige Projektstruktur. Als nächstes nehmen wir einen Überblick darüber, was genau in diesem Projekt Setup enthalten ist. 28. Projektstruktur: Ich möchte mir nur ein paar Augenblicke Zeit nehmen, um die Projektstruktur zu betrachten, die wir gerade erstellt haben. Wenn wir in der Seitenleiste schauen, werden wir alle Dateien und Ordner sehen , die sich jetzt in unserem Projekt befinden. Der erste Ordner, den wir sehen, sind die Knotenmodule. In diesem Ordner sind alle MPM-Module installiert. Wenn Sie zuvor Knoten verwendet haben, werden Sie mit dieser Art von Setup vertraut sein. In der Regel werden Projekte, die Knoten verwenden, in Pakete aufgeteilt. Jeder fügt einige Funktionen hinzu. Wir können zum Beispiel ein Paket haben, das Datumsformate formatiert, eines, das die Formularvalidierung durchführt. Wir können auch hier unsere eigenen Pakete hinzufügen, indem wir MPM verwenden, das wir gerade eingerichtet haben. Hier befinden sich Dinge wie die Codebibliotheken vue.js, anstatt sie mit dem CDN-Skript zu verknüpfen, wie wir es im ersten Projekt getan haben. Wenn Sie mit all dem vertraut sind, wurde eine MPM-Installation für uns ausgeführt, wenn wir das Projekt mit der CLI einrichten. Danach haben wir den Öffentlichen Ordner, der unsere statischen Dateien enthält, wie alle Bilder, die wir verwenden möchten, und auch jede HTML-Datei. Zuerst haben wir das Favicon, das ist das Symbol, das im Browser-Tab angezeigt wird. Dann haben wir die index.html. Wenn wir diese index.html öffnen, sehen wir nicht viele Inhalte in hier, und wie ich im einseitigen Anwendungsvideo erwähnt habe, haben diese Arten von Apps eine minimale HTML-Struktur. Dann wird der Rest des Codes gebündelt und in dieses div mit der ID der App injiziert. Genau wie im ersten Projekt, in dem wir die View-Instanz auf ein bestimmtes Element in HTML gemountet haben . Dies ist der Speicherort in diesem Projekt, dem es eingehängt wird. Wir werden sehr bald sehen, wie das gemacht wird. Danach haben wir den Quellordner. Dieser Ordner ist, wo wir die meiste unserer Arbeit machen. Dies ist, wo wir in den meisten unserer Code für dieses Projekt sein werden. Hier haben wir die Assets Ordner, das ist, wo wir die Assets für das Projekt wie alle CSS-Dateien alle Symbole unserer Telefone speichern und wir können auch Bilder innerhalb von hier zu platzieren. Darunter ist der Komponentenordner etwas, das wir uns bald genauer ansehen werden. Anstatt Komponenten zu erstellen, wie wir uns im letzten Abschnitt angesehen haben, können wir sie in separate Dateien organisieren. Und hier werden wir sie aufbewahren. Die einzelne Komponente, die wir eingerichtet haben, ist dieses HelloWorld-Beispiel. Dies ist ein Beispiel für eine einzelne Dateikomponente. Dies ist in der Regel in drei Abschnitte unterteilt. Zuallererst haben wir den Template-Abschnitt , der unseren HTML-Code enthalten wird. Dies ist ähnlich dem letzten Abschnitt, in dem wir unsere globalen und unsere lokalen Komponenten erstellt haben, wir hatten den Template-Abschnitt als String. Bei einer einzelnen Dateikomponente ist dies jedoch viel bequemer, da wir dies wie normales HTML auslegen können. Wir können auch die doppelten geschweiften Klammern verwenden, um unsere Daten einzufügen. Das sollte also alles ziemlich vertraut aussehen. Wenn wir bis zum Ende des Template-Abschnitts scrollen, haben wir dann einen Skriptabschnitt. Es ist tatsächlich, wo wir sowohl unser JavaScript als auch unseren View JS-Code hinzufügen werden. Innerhalb dieses Exportstandardabschnitts ist, wo wir Dinge wie unsere Daten und Methoden einrichten können . Dann haben wir schließlich unten auch einen Style-Abschnitt, in dem wir unser CSS platzieren könnten, indem wir unseren Code in einzelne Dateikomponenten wie diese aufteilen. Es wird durch die Verwendung von Bill-Tools wie Web Park ermöglicht, die alles zusammen bündelt, wirft in eine Ausgabedatei, die dann für die Produktion verwendet wird. Als nächstes sehen wir die App.vue Datei, und dies ist eine spezielle Vue Datei, die Sie sich als Hauptdatei oder Hauptkomponente vorstellen können . Genau wie beim HelloWorld-Beispiel, das wir uns gerade angesehen haben, hat diese Datei auch einen Template-Abschnitt, ein Skript und auch den Style-Abschnitt. Wir könnten unseren vollständigen Projektcode innerhalb dieser einzigen Datei schreiben. Es wird jedoch sehr groß werden. Stattdessen nehmen wir in der Regel unseren Code und zerlegen diese in kleinere Komponenten. Da diese Komponenten in ihrer eigenen separaten Datei, müssen wir sie importieren, genau wie wir hier sehen, bevor wir sie in unserer Vorlage verwenden können. Also mit all diesem Vue.js Code an Ort und Stelle, wir brauchen jetzt nur eine Möglichkeit, dies auf das dom zu mounten. Wir haben bereits in der index.html gesehen, wir haben diesen Bergpunkt, der das div mit der ID der App ist. Dieses Einhängen erfolgt in der nächsten Datei, die main.js ist. Dies ist die Haupt-JavaScript-Datei für unser Projekt und der Ort, an dem wir auch Plugins wie den Router hinzufügen können. Da wir jetzt das View MPM-Modul verwenden, müssen wir nun die Teile dieser Bibliothek importieren, die wir benötigen. Der Hauptteil, den wir brauchen, ist diese CreateApp und wir verwenden die geschweiften Klammern. So importieren wir nur den einzelnen Abschnitt der Vue Library. Dies wird auch als benannter Import bezeichnet. Jetzt haben wir Zugriff auf CreateApp. Wir können es wie im früheren Projekt verwenden und dann mit der ID der App, die wir gerade auf unserer Indexseite gesehen haben, an das div mounten . Im früheren Projekt haben wir ein Objekt zu CreateApp hinzugefügt. Wir haben dies manuell getan, indem wir ein Objekt übergeben und dann speichern wir Dinge wie unsere Daten. Aber jetzt importieren wir stattdessen mit dieser Art von Setup die Root-Komponenten, die die App.vue ist. Dann werden alle unsere Komponenten im Inneren von hier verschachtelt. Dies mag zunächst alles ein wenig komplex erscheinen, aber alles, was wir im Allgemeinen tun, ist eine Indexseite oder eine HTML-Datei zu erstellen und dann unsere View-Anwendung darauf zu mounten. Der Unterschied, anstatt ein Objekt zu übergeben, ist, dass diese neue App-Datei auch Komponenten enthalten kann, aber letztendlich alle unter dieser einen App.vue Datei verschachtelt sind. Danach haben wir die gitignore Datei. Wenn Sie git für die Versionskontrolle verwenden, haben wir eine Datei, um zu sagen, welche Dateien wir nicht in gits aufnehmen möchten, gefolgt von einer babel-Konfigurationsdatei, die wir verwenden können, um benutzerdefinierte babel-Einstellungen hinzuzufügen. Babel ist ein Werkzeug, das verwendet wird, um jeden neueren JavaScript-Code zu transformieren , der in die ältere Stile-Syntax schreibt. Wenn der Browser es noch nicht unterstützt, ist die package.json eine Konfigurationsdatei, die wir in knotenbasierten Projekten haben. Es enthält Projektinformationen wie den Namen und auch alle Skripte, die wir verwenden werden, um unser Projekt zu starten und auch für die Produktion zu erstellen. Wir haben dieses Serve Skript bereits verwendet, wenn wir MPM run serve ausgeführt haben, starten Sie unseren Entwicklungsserver. Abhängigkeiten direkt unten sind die wichtigsten Pakete unser Projekt benötigt, und wir können nicht mehr zu einem späteren Zeitpunkt hinzufügen. Wir werden es mit Vue.js Paket verknüpfen, anstatt einen CDM-Link zu verwenden. Dev Abhängigkeiten sind Pakete, die wir nur während der Entwicklung benötigen, wie der Entwicklungsserver, um das Projekt auszuführen, und auch Dinge wie eslint, die unsere Codequalität innerhalb des Editors während der Entwicklung überprüfen. Diese werden nicht enthalten, wenn wir unsere Website in die Produktion verschieben und wir haben eine Sperrdatei, die wir nicht berühren. Meine ist eine Garnversion, aber Ihre ist vielleicht nicht, wenn Sie nur MPM verwenden. Dies ist eine automatisch generierte Datei, die alle Pakete auflistet, die wir verwenden, zusammen mit allen Abhängigkeiten von den genauen Versionsnummern, die wir installiert haben. Schließlich, eine kurze Notiz auch, wir haben nur eine kleine Menge von Abhängigkeiten und Entwicklungsabhängigkeiten innerhalb eines hier. Dies führte jedoch zu viel mehr Knotenmodule. Dies liegt daran, dass einige dieser Pakete auch untergeordnete Abhängigkeiten haben. So werden auch weitere Pakete mit MPM eingezogen. Aber jetzt ist dies ein Überblick über unser Kursprojekt und wir werden uns viel vertraut machen, wenn wir unser nächstes Projekt erstellen. 29. Die Vetur-Erweiterung: Im vorherigen Video diese App.vue Datei unter anderem hatte diese App.vue Datei unter anderemeinige schöne farbcodierte Syntax-Hervorhebung innerhalb unseres Texteditors. Aber Ihre Version mag ziemlich schlicht sein, genau wie wir hier sehen. Die Syntaxhervorhebung, unter anderem, wurde innerhalb von Visual Studio Code durch eine neue Erweiterung erstellt. Wenn Sie Visual Studio Code verwenden, würde ich Ihnen empfehlen, dies auch zu installieren. Um dies zu tun, gehen Sie in die Registerkarte Erweiterungen. Dann können wir nach einer Erweiterung namens Vetur suchen. Wählen Sie diese Option aus, und Sie müssen dies installieren und aktivieren. Ich habe dies bereits installiert, also klicke ich auf die Schaltfläche Aktivieren. Dann können wir wieder in unsere App.vue gehen. Vetur gibt uns jetzt diese nette Syntax-Hervorhebung, um unseren Code viel lesbarer zu machen, zusammen mit einiger Formatierung und Auto-Vervollständigung auch. Wenn Sie Visual Studio Code verwenden, würde ich Ihnen empfehlen, diese Erweiterung zu installieren, aber viel bessere Entwicklererfahrung. 30. Abschnittseinleitung – Countdown-Projekt: Diese kommenden Abschnitte werden sich auf die Erstellung eines neuen Projekts konzentrieren, dem es sich um eine Event-Countdown-Anwendung handelt. Wir werden das anspruchsvollste Vue CLI-Setup verwenden und auch lernen, wie Daten zwischen Komponenten übergeben werden können, und auch viele weitere Techniken, die Vue zu bieten hat, wie Beobachter, berechnete Eigenschaften und so noch viel mehr. Lassen Sie uns zum nächsten Video springen, wo wir den Starter herunterladen werden, und dann können wir beginnen, unser Projekt zu bauen. 31. Startprojekt herunterladen: Für dieses Projekt habe ich eine Starter-Vorlage zur Verfügung gestellt , die aus dem GitHub-Repository heruntergeladen werden kann. Früh, als wir das vollständige Repository heruntergeladen haben, wurde mir als Vue-3-Course-Master auf dem Desktop gespeichert. Hier drinnen werden Sie viel mehr Ordner sehen. Für den, an dem Sie interessiert waren, ist ein Vue-Countdown- Starter. Lassen Sie uns dies in Visual Studio-Code ziehen. Ich werde anfangen, mit unserem neuen Projekt zu arbeiten. Die Verwendung des Starterprojekts ist genau das gleiche wie das VUE-CLI-Setup, das wir uns im vorherigen Abschnitt angesehen haben. Aber mit einem Starter-Projekt bedeutet, dass wir alle auf die gleichen Versionsnummern. Ich werde dies auch aktualisieren, wenn es sicher ist, dies zu tun. In einem Visual Studio-Code sehen Sie alle vertrauten Dateien und Ordner aus der vorherigen Demo. Der einzige Unterschied ist, wenn wir zur App.vue Datei gehen. Innerhalb unseres Skripts haben wir dieses Ereignisdaten-Array. Dies ist ein Array von Objekten, die wir als Ausgangspunkt für dieses Projekt verwenden werden. Dies wird nur, sagen wir, ich habe einige verschiedene Ereignisse eingegeben, so dass wir diese Informationen im Browser sehen können. Aber sehr bald werden wir diese Ereignisse erstellen. Wir werden sie aktualisieren und sie auch aus unseren Projekten entfernen. Wenn Sie möchten, können Sie auch jede dieser Ereignisinformationen ändern, z. B. die Ereignisnamen, die Details und alle Hintergrundfarben. Aber eine Sache, die zu beachten ist, sind diese Daten. Sehr bald werden wir ein Ereignisdatum benötigen, das in der Vergangenheit oder abgelaufen ist. Wir werden in Zukunft einige brauchen, und wir werden auch für den heutigen Tag etwas brauchen. Dies wird uns nur erlauben, Dinge zu testen, wenn wir zu dieser Phase kommen, aber wir werden sehr bald darauf zurückkommen. Um die Download-Größe gering zu halten, habe ich auch die Knotenmodule entfernt. Wir müssen zum Terminal gehen und auch das installieren. Wenn Sie ein integriertes Terminal in einem Visual Studio-Code verwenden, würden Sie zu Terminal, New Terminal gehen, und dies würde innerhalb Ihres Projektordners geöffnet. Wenn Sie ein separates Terminal verwenden, müssen Sie den CD-Befehl verwenden , der zu unserem Projektverzeichnis navigiert. Meines wird auf dem Desktop gespeichert. Um es zu beginnen, lassen Sie uns CD in den Repository-Ordner , der der vue-3-course-master ist. Dann werden Sie von hier aus in die Ansicht Countdown Starter CD. Stellen Sie sicher, dass Sie sich im richtigen Ordner befinden. Dann werden wir die Knotenmodule mit npm i installieren. Npm i ist kurz für installiert. Dies wird alle Pakete einziehen, die wir für dieses Projekt benötigen. Sobald dies erledigt ist, können wir den Entwicklungsserver mit npm run serve starten. dann wird dies unser Projekt auf lokalem Host öffnen. Wenn wir Command oder Control klicken, wird dies innerhalb des Browsers geöffnet. Bei der Entwicklung dieses Projekts. Wir können diesen Entwicklungsserver laufen lassen. Aber wenn wir das schließen wollen, müssen wir nur Control-C drücken, wodurch unser Entwicklungsserver geschlossen wird, damit wir nicht mehr auf unsere Seite zugreifen können. Um dann die Dinge neu zu starten, führen wir dann npm run serve noch einmal aus. Wir können nun wieder über den Browser auf unser Projekt zugreifen. 32. Komponenten einzelner Dateien: Früher, als wir uns Komponenten anschauten, hatten wir eine Vorschau dessen, was wir jetzt bauen werden, und auch die Komponentenstruktur. Mit dieser Ansicht CLI-Setup, können wir diese Komponenten in ihrer eigenen Datei erstellen, um sie organisiert mit der Einzeldateikomponenten-Methode zu halten . Dies ist möglich, da die CLI Tools wie Web Park verwendet , um sie alle für die Produktion zu bündeln. Wir sind also nicht dafür bestraft, dass wir viele Dateien für den Benutzer herunterladen können. Zu beachten ist, dass wir einen Komponentenordner haben, aber wir können Komponenten überall innerhalb dieses Quellordners erstellen. Aber im Allgemeinen gruppieren wir sie zusammen in den Komponenten-Ordner, so dass es besser organisiert ist. Lassen Sie uns nun unsere erste Komponente für dieses Projekt erstellen, das das Event.VUE sein wird. Als Namenskonvention beginnen wir in der Regel Komponentennamen mit einem Großbuchstaben. Diese Bedürfnisse haben die Erweiterung „die.vue“. Diese event.vue wird die Komponente sein, die wir für jedes der aufgeführten Ereignisse verwenden werden. Hier können wir die Komponenten so einrichten, wie wir es zuvor mit unseren kostenlosen Abschnitten gesehen haben. Haben Sie den Template-Abschnitt. Wir haben den Skriptabschnitt mit unseren Exportvorgaben. Dann schließlich am unteren Rand des Stile-Abschnitts. Dies funktioniert wie früher, wenn wir globale und lokale Komponenten betrachteten. Wir bewegen uns über den Template-Abschnitt unseres HTML. Dies ist jetzt viel bequemer, da wir es einfach wie eine normale HTML-Datei schreiben können, anstatt eine dies als String einzufügen. Unser JavaScript geht in die Skript-Aktion, beinhalten unsere Daten, unsere Methoden, Requisiten und andere auch. Wir wickeln diese dann in einen Exportstandard ein, so dass wir alle Komponenten in andere Dateien importieren können. Der Style-Abschnitt, kann es wie ein normales Stylesheet geschrieben werden. Das CSS, das wir schreiben, gilt für alle unsere Anwendung, nicht nur für die Vorlage innerhalb dieser Datei. Wenn Sie dies jedoch nur auf die einzelne Datei anwenden möchten, haben wir die Bereichsattribute. Wenn wir auch andere Sprachen verwenden möchten, können wir dies als Lang-Attribute innerhalb des entsprechenden Loaders hinzufügen. Setzen Sie später mehr dazu. Sehen Sie sich unsere Komponente an. Wir müssen zuerst einige Inhalte innerhalb der Vorlage hinzufügen. Nun, gehen wir zu unserer event.vue und fügen Sie einfach AP-Elemente mit dem Text von hi. Im Moment ist unsere Eventkomponente nur eine reguläre Vue Datei. Um es zu sehen, müssen wir es genau dort platzieren, wo wir es sehen wollen. Denken Sie daran, von früh wir hart an dieser App.vue Datei, die die Hauptdatei Vue.js ist, die an das DOM gemountet ist. Das bedeutet also, dass alles von hier aus beginnt. Dies wird der Ort sein, an dem wir hinzufügen und registrieren können, unsere Komponente anzuzeigen. Zuallererst könnten wir die HelloWorld-Komponenten entfernen. Wir können dies auch aus dem Komponentenordner entfernen. Dann können wir unsere neue Event.vue Datei registrieren. Scrollen Sie nach unten direkt unter diesem Beispielobjekt. Hier sehen wir, dass wir immer noch versuchen, das HelloWorld-Beispiel zu importieren. Wo stattdessen möchten wir unsere Veranstaltung importieren, die sich auch innerhalb des Komponentenordners befindet. Wir müssen dann diese Komponente registrieren, um in unserer Vorlage zu verwenden. Um dies zu tun, geben wir unseren importierten Namen in das Komponenten-Objekt. Mit diesem jetzt registriert, können wir auf die Vorlage gehen. Dann werde ich dies zwischen eine Template-Tags setzen. Wir können dies sogar wie ein HTML-Element mit dem öffnenden und schließenden Tag tun. Oder wir können auch ein selbstschließendes Tag verwenden, genau wie wir es mit einem Bild tun würden. Speichern Sie dies und wir sehen den Text von hoch im Browser. Dies ist ein weiterer Vorteil der Verwendung des Vue CLI-Setups. Standardmäßig beinhaltet es das heiße Neuladen Wenn wir das Projekt speichern, wird es sofort im Browser aktualisiert. Wir wollen natürlich nicht diese Nachricht von hi, also gehen wir stattdessen zu unseren event.vue Komponenten, und ersetzen durch unsere Ereignisdaten. Jede unserer Veranstaltungen wird in einem Artikel umgeben sein, so dass wir dies zu einem Artikel Elemente ändern können. Als nächstes wird ein div, das die Klasse der Daten haben wird. Dann neben diesem werden wir ein zweites div haben, und das wird die Klasse des Countdown haben. Dies wird uns die Struktur geben, die wir für unsere Veranstaltungen brauchen. Der Datenbereich wird den Namen und auch die Details zu unseren Veranstaltungen enthalten. Dann wird der Countdown-Abschnitt unten der Abschnitt auf der rechten Seite sein, die Anzahl der Tage für diese Ereignisse herunterzählt. Also zuerst innerhalb der Daten, die Ebene drei Überschrift, die für den Titel sein wird. Moment können wir in jedem Fall innerhalb von hier nur hart codieren, wie eine Graduierung, eine Klasse von Namen. Was NCSS verwenden wird, sehr bald. AP-Elemente, die die Details sein wird. Dann können wir einen Text für unsere Details hartcodieren. Dies wird die gesamte Struktur für den Datenabschnitt sein, also bis zum Countdown. Dies wird in zwei Abschnitte aufgeteilt: Der erste wird ein div sein, das eine Schaltfläche enthält. Diese Schaltfläche gibt einfach ein Kreuz aus, so dass wir das Ereignis löschen können. Der Wrapper wird eine Klasse von remove_btn_wrapper haben, dann können wir unsere Schaltfläche innerhalb verschachtelt platzieren. Um uns das Kreuz zu geben, können wir eine h kleine Entität hinzufügen, die das kaufmännische Und-Zeichen, der Hash und dann der Wert von 10060 ist. Dies wäre ein Semikolon und eine Buttonklasse, aber ich werde Stil, in dem remove_btn sein wird. Wir werden bald etwas Styling hinzufügen, so dass dieser Datenbereich auf der linken Seite und dann ist dieser Countdown-Abschnitt auf der rechten Seite. Moment aber, wenn wir unter diesen remove_btn_wrapper gehen, ist die nächste Sache, AP-Elemente hinzuzufügen, die die Anzahl der verbleibenden Tage sein wird. Denn jetzt wäre dies ein hart codierter Wert von 56, ein Break-Tag, und dann innerhalb der kleinen Elemente können wir die Texte von Tagen übrig haben. Scrollen Sie vorerst nach unten, alles, was wir innerhalb unserer Skript-Aktion tun müssen, ist, diesen Komponenten einen Namen zu geben. Angesichts einer Komponente namens konnte nicht beim Debuggen helfen, da der Komponentenname neben Nachrichten und auch in den Vue Entwicklertools angezeigt werden kann . Dann werde ich schließlich Abschnitt am unteren Rand stylen, und das wird auch die Formenattribute haben. Diese Stile gelten also nur für diese Vorlage. Von ganz oben ist die ganze Veranstaltung in den Artikelelementen umgeben. Die Farben werden bald dynamisch sein, aber jetzt können wir eine Hintergrundfarbe von hellschiefergrau einstellen. Dadurch wird auch die Flexbox für das Layout verwendet, so dass Flex angezeigt wird. Dann ermöglicht es uns, eine Zeile Posten zu verwenden und dann unsere Inhalte zensieren. Der Grenzradius eines Rem. Da es mehrere Ereignisse geben wird, können wir auch einige Marge auf der Außenseite dieses Artikels von einem Rem oben und unten und Null auf der linken und rechten hinzufügen . Einige Polsterung, das ist der Raum in, innerhalb des Ereignisses von 0.2 Rems oben und unten. Dann ein größerer Wert von einem Rem auf der linken und rechten Seite. Die Textfarbe zeichnet sich ausschließlich durch die dunkleren Hintergründe des weißen Rauchs aus. Endlich das Schriftgewicht von 300. Als nächstes haben wir innerhalb des Datenabschnitts und auch den Countdown-Abschnitt verschachtelt. Diese werden die Flexbox nutzen, so dass wir etwas Platz hinzufügen können. Um dies zu tun, können wir zunächst einen Flex-Wert auf die Daten anwenden. Es sollte ein Wert von drei sein. Dann können wir zum Countdown-Sektion gehen. Wenn wir hier den Flex-Wert auf eins setzen, nimmt der Datenabschnitt nun dreimal den Platz des Countdown-Abschnitts ein. Nach der Innenstadt, die Text-Ausrichtung in der Mitte sein, die Schriftgröße von 1.6 Rems. Dann ein Brett auf der linken Seite, das unsere beiden Abschnitte aufteilen wird. Wir können dies mit einem Rand links tun, der ein Pixel breit und eine durchgezogene Linie sein wird. Danach legen wir die Schriftgröße für unseren Text des Namens und auch Details fest. Wir nennen nur Abschnitte etwas größer, so dass wir die Schriftgröße auf 1,8 Rems einstellen können. Dann der Detailabschnitt , der ein wenig kleiner sein wird, also lassen Sie uns für eine Schriftgröße von 1,6 gehen. Der letzte Abschnitt ist zu kümmern ist dieser Entfernen-Button und auch der Text. Also zuerst, lassen Sie uns durch die eigentliche Schaltfläche gehen. Wenn wir nach oben scrollen, können wir sehen, dass dies eine Klasse von remove_btn hat . Ein transparenter Hintergrund, um die weiße Hintergrundfarbe zu entfernen. Legen Sie die Rahmenbreite Schaltfläche keine fest. Wir können auch den Cursor ändern, um ein Zeiger zu sein. Wenn der Benutzer den Mauszeiger über diese Schaltfläche bewegt. Schließlich können wir diese Taste auf die rechte Seite drücken, indem wir die Textzeile auf dem Wrapper setzen. Der Wrapper hatte die Klasse remove_btn_wrapper. Die einzige CSS-Eigenschaft besteht darin, die Textzeile so zu setzen, dass sie richtig ist. Das gibt uns jetzt die Basis, die wir für unsere Veranstaltung brauchen. Jetzt können wir eine for-Schleife verwenden, um dieses Ereignis zu durchlaufen und den Inhalt dynamischer zu machen. 33. Unsere Events dynamisch gestalten: In diesem Kurs in der App.vue Datei enthalten, habe ich ein Array von Objekten zur Verfügung gestellt. Dies ist unsere EventData, die wir jetzt verwenden werden, um durchzuschleifen und diese als Requisiten für unsere Ereigniskomponente bereitzustellen. Derzeit wird dies kommentiert, da wenn wir eine Variable wie diese haben und wir sie nicht verwenden, das ESLint-Plugin, das wir in verwenden, einen Fehler auslösen wird. Jetzt werden wir das benutzen. Wir können all dies auswählen und all dies auskommentieren. Wir können dies alles gleichzeitig mit Highlight und dann einen Befehl oder ein Steuerelement neben dem Schrägstrich tun. Eine Sache, auf die wir hier achten sollten, ist, dass wir keinen JavaScript-Code innerhalb dieses Skriptabschnitts einfügen können , aber Soul Vue erkennt es, es muss auch innerhalb des Exportstandards vorhanden sein. Also müssen wir jetzt eine Datumseigenschaft erstellen und dann dieses Array ihm zuweisen. Erstellen Sie diesen Datenabschnitt und dann innerhalb des Rückgabeabschnitts, werden wir eine Datumseigenschaft namens Ereignisse erstellen. Dies wird gleich unserem Array sein, das EventData ist. Vue kennt diese EventData jetzt, da sie jetzt innerhalb von Ereignissen gespeichert ist. Wir können jetzt zu unserer Vorlage gehen und wir werden alle diese Ereignisse durchlaufen. Dann wird für jede Komponente eine neue Komponente erstellt. Dazu erstellen wir eine ungeordnete Liste und erstellen ein Listenelement, um jedes unserer Events auszugeben. Dieser Listeneintrag wird wiederholt werden, so dass wir v-for verwenden können. Wir werden sagen „Ereignis in Veranstaltungen.“ Außerdem benötigt dies einen dynamischen Schlüssel dahinter. Wir haben einen eindeutigen Wert für jeden, der diese ID ist. Als nächstes können wir unsere Event-Komponenten innerhalb dieses Listenelements verschieben , wo wir unsere Veranstaltung als Requisite übergeben werden. Verwenden Sie einen Doppelpunkt, da dies einige dynamische Daten einnimmt, und wir werden diesen Namen als Ereignis festlegen, das gleich unserer Ereignisvariablen aus der Schleife sein wird. Speichern Sie dies und sofort werden wir sehen, dass wir sechs verschiedene Ereignisse im Browser haben. Da wir sechs Ereignisse innerhalb unserer Veranstaltungsdaten haben, haben wir jedoch alle die gleichen Informationen, alle haben den gleichen Namen und auch die gleiche Beschreibung und das gleiche Datum. Um dies zu beheben, gehen wir zu unserer Event.vue Komponente. Der erste Schritt besteht darin, diese Daten als Requisiten zu erhalten. Requisiten ist ein Array, das unsere Strings einnimmt, und nur die Requisite, die wir erhalten, ist die Ereignisinformationen. Wir können dies jetzt in unserer Vorlage verwenden. Wir haben den Ereignisnamen, also öffnen Sie die doppelten geschweiften Klammern, und ersetzt dann durch die event.name. Das ist unser Name, um den wir uns gekümmert haben. Entfernen Sie diese dann im Detailbereich. Dies war die Event.details. Gut. Dies funktioniert alles, aber diese alle haben immer noch die gleiche Hintergrundfarbe. Wenn wir zu unseren EventData gehen, können wir sehen, dass für jedes dieser Ereignisse eine andere Hintergrundfarbe zur Verfügung gestellt wurde. Wir können dies nun in unserer Ereigniskomponente nutzen, indem wir dies als dynamische Stileigenschaft übergeben und diese verwenden, um den Hintergrund zu setzen. Innerhalb des Eröffnungsartikels können wir den Doppelpunkt verwenden, um einen dynamischen Stilabschnitt zu binden. Denken Sie daran, dass unsere Stile als Objekt übergeben werden, also müssen wir die geschweiften Klammern öffnen. Hier drinnen werden wir den Hintergrund so einstellen, dass er unserem event.background entspricht. Gut. Dies lässt uns nur die Anzahl der verbleibenden Tage, auf die wir zurückkommen werden da wir keine Berechnung aus dem EventDate durchführen müssen. Ich werde auch den Farbkontrast für Hintergründe wie dieses Gelb korrigieren, wo wir den Text, der überlagert wurde, nicht sehen können. Um dies zu beenden, werden wir nur ein wenig CSS hinzufügen, zuerst, um unsere Liste in den App-Bereich und scrollen Sie nach unten zum Styling-Abschnitt unten. Die Ereignisse sind in der ungeordneten Liste umgeben, die wir auf ein Null-Padding setzen, um alle Browser-Standardeinstellungen zu entfernen. Dann wird jedes dieser Ereignisse im Listenelement gespeichert. Also werden wir den List-Stil auf keine setzen Dann wird der Cursor jedes Mal ein Zeiger sein, wenn ich über eines dieser Listenelemente schwebe. Um auch die maximale Breite dieser Ereignisse einzuschränken, wenn wir den Browser dehnen, werden wir nun die maximale Breite innerhalb dieses App-Wrapper festlegen. Diese App ist der Wrapper für unsere gesamte Anwendung, und wir können dies sehen, wenn wir in unsere index.html gehen. Dies ist der Abschnitt gerade hier, in dem unsere Anwendung eingehängt wird. Dies gilt weltweit. Alles, was ich hier tun werde, ist, die maximale Breite auf 600 Pixel zu setzen. Dann können wir dies mit Marge Null Auto zentrieren. Null setzt den Rand ganz oben und unten und dann wird automatisch den gesamten Rand anwenden , der links und rechts gleich verfügbar ist. 34. Verbleibende Tage kalkulieren: Für jede unserer Veranstaltungen müssen wir die Anzahl der verbleibenden Tage berechnen, bis das Ereignis eintritt. Um dies zu tun, werden wir eine Berechnung basierend auf dem aktuellen Datum und dann das Datum innerhalb unserer Objekte erstellen , so dass diese Eigenschaft innerhalb jedes unserer Artikel. Sobald Sie dieses und das aktuelle Datum haben, können wir dann die Differenz zwischen diesen beiden Daten ermitteln und diese dann in die Anzahl der Tage umwandeln. Dieses innerhalb des [unhörbaren] werden wir eine Methode erstellen. Unter dem Datenabschnitt können wir unseren Methodenabschnitt erstellen, und der Name der Methode wird Days Left sein. Die verbleibenden Tage werden in dem besonderen Ereignis, das wir berechnen wollen, nehmen. Dies wird bald die Anzahl der verbleibenden Tage berechnen. Aber zuerst brauchen wir eine Möglichkeit, diese Methode tatsächlich aufzurufen und auch die Ereignisdaten bereitzustellen. Nun, wir können das nicht alles auf einmal in unserer Vorlage machen. Wir können eine Eigenschaft einrichten, die an unsere Veranstaltungen weitergegeben wird. Dies wird dynamisch sein, und das wird die Anzahl der verbleibenden Tage sein. Dies kann auf alte Methode gesetzt werden, die auch Days Left genannt wird, wo wir in jedem einzelnen Ereignis übergeben werden, das von unserer Schleife stammt. Eine Sache, vor der wir uns hier hüten müssen, sind wir nicht tatsächlich übergeben diese Methode als Requisite. Stattdessen, was wir tun werden, ist das Ergebnis dieser Methode zu übergeben, die zurück zurückgegeben werden wird. Die Art und Weise, wie wir dies tun können, besteht darin, diese Funktion aufzurufen und dann am Ende einen Rückgabeabschnitt bereitzustellen. Wir werden Wert und nicht den tatsächlichen Verweis auf diese Methode zurückgeben. Lassen Sie uns zuerst überprüfen, dass unsere Methode funktioniert und wir erhalten die Ereignisdaten, indem Sie ein Konsolenprotokoll. Lassen Sie uns das event.date machen und dafür müssen wir mit der rechten Maustaste in die Browser-Entwickler-Tools gehen und inspizieren, öffnen Sie die Konsole und jetzt sehen wir sechs verschiedene Termine, da wir diese Methode für jeden unserer aufrufen Ereignisse, vor allem funktioniert das gut. Jetzt müssen wir mit einigen JavaScript-Datumsmethoden arbeiten, und um das aktuelle Datum zu erhalten, können wir date.now verwenden. Zuerst lassen Sie uns dies innerhalb eines Konsolenprotokolls tun und wir können überprüfen, dass wir alle Informationen haben , die wir brauchen, um Daten jetzt zu protokollieren. Dann können wir den Browser aktualisieren, und das mag ziemlich verwirrend aussehen, aber wir müssen uns jeden dieser Beeinträchtigungen ansehen. Wir tun es zwei Konsolenprotokolle für jedes Mal, wenn die Methode aufgerufen wird. Die ersten beiden sind für das erste Ereignis, das dritte, vierte Element ist für das zweite Ereignis und so weiter. Wir können sehen, dass sowohl das event.date, das das erste am date.now ist, in völlig anderen Formaten ist. Die erste des Ereignisdatums ist eine Zeichenfolge, die das Jahr, den Monat und schließlich den Tag und dann unter dem aktuellen Datum ist . Das aktuelle Datum wird seit dem 1. Januar 1970 in mehreren Millisekunden formatiert . Um diese beiden zu vergleichen, müssen wir das Ereignisdatum konvertieren, um im gleichen Format zu sein, und um dies zu tun, bietet uns JavaScript eine Datumsmethode namens Pass, auf ist zu ersetzen, wieder werden wir auf das Datumsobjekt zugreifen und rufen die Methode Call Pass. Wo wir in unserem event.date übergeben werden, aktualisieren Sie den Browser und wir werden jetzt sehen, dass jedes Paar von Daten, die wir haben, jetzt im gleichen Format ist. Das ist gut, denn das bedeutet jetzt, dass wir unsere beiden Termine vergleichen können, die wir haben. Wir müssen das in einer Reihe von Stufen aufbauen. Die erste Stufe besteht darin, das aktuelle Datum vom Datum des Ereignisses abzuziehen. Schnappen Sie sich das und dann werden wir date.now abziehen. Dies wird uns den Unterschied geben, den ich in einer Konstante namens Time speichern werde. Genau wie die Ergebnisse innerhalb der Konsole diesmal, Variable wird auch in Millisekunden gespeichert werden. Diese Zeitkonstante wird in Millisekunden gespeichert, also müssen wir diese jetzt konvertieren. Schnappen Sie sich alle Konstanten und um Millisekunden in Sekunden zu konvertieren, teilen wir das Ergebnis durch 1000, was uns dann die Anzahl der Sekunden zwischen dem aktuellen Datum und dem Ereignisdatum gibt. Aber wir wollen nicht die Anzahl der Sekunden. Was wir tun wollen, ist, dies in die Anzahl der Tage umzuwandeln. Um diese Sekunden Tage zu konvertieren, müssen wir dies zuerst mit 60 Sekunden multiplizieren und dann wieder, wir werden dies mit 60 Minuten multiplizieren und zuletzt werden wir dies mit 24 multiplizieren, da wir 24 Stunden an einem Tag haben. Dies werden unsere neuen Ergebnisse sein, die wir innerhalb einer Konstante namens Days speichern können und sicherstellen können, dass der Texteditor diese Klammern nicht an den falschen Stellen platziert. Wir müssen die Klammern um die Zahlen angeben. Nur als Zusammenfassung haben wir die Zeit in Millisekunden. Um dies in Sekunden umzuwandeln, teilen wir dies durch 1000. Wir multiplizieren dies mit der Anzahl der Sekunden an einem Tag, der Anzahl der Minuten an einem Tag und dann der Anzahl der Stunden an einem Tag, was die Anzahl der Tage zwischen unserem aktuellen Datum und auch dem Ereignisdatum ergibt. Wir können einen Schritt aus diesen beiden machen, indem wir 60 multipliziert mit 60 reduzieren , anstatt das Ergebnis von 3.600 zu übergehen. Dies ist genau das gleiche, aber nur eine kürzere Art, Dinge zu tun. Das letzte, was zu tun ist, um unsere korrekt formatierte Anzahl von Tagen zu erhalten, ist, diese Zahl aufzurunden. Schneiden Sie das Ergebnis davon aus, verwenden Sie eine mathematische Funktion namens Seal, die unsere Nummer auf die nächste ganze Zahl aufrunden wird. Pässe [unhörbar]. Wir können unsere Konsolenprotokolle bereinigen und es ist diese Anzahl von Tagen, die wir von dieser Methode zurückkehren möchten. Es ist Rückgabewert, der als Requisite an die Ereigniskomponente übergeben wird. Lassen Sie uns jetzt zu dieser Ereigniskomponente gehen, wir können dies als Requisite innerhalb unseres Arrays erhalten. Diese Requisite war noch Tage, dann können wir überprüfen, ob dies funktioniert, indem wir dies innerhalb unserer Vorlage ausgeben. Anstelle dieses hartcodierten Wertes entfernen wir diesen und geben Sie Requisite aus, die Tage übrig war. Über zum Browser und dies hat sich jetzt für jede unserer Veranstaltungen geändert. Beachten Sie, dass er sowohl positive als auch negative Zahlen sehen wird, und das ist völlig normal, und das ist etwas, mit dem wir uns bald beschäftigen werden. 35. Bedingtes Rendering: Früher, als wir uns dieses Ereignisdatenarray zum ersten Mal angesehen haben, empfahl ich, dass Sie einige der Datumsangaben in diesen Objekten in der Vergangenheit und einige in der Zukunft festlegen . Wenn Sie dies noch nicht getan haben, wird es jetzt an der Zeit sein, es zu tun. Das ist, was ich möchte, dass Sie tun: Legen Sie mindestens ein Datum in der Vergangenheit, eines mit dem heutigen Datum, eines mit dem Datum morgen, und eines mit einem zukünftigen Datum. Dies wird sehr bald beim Testen der Dinge helfen. Um dies zu tun, werden wir das bedingte Rendering verwenden, was eine Möglichkeit ist, nur etwas, wie unser Ereignis, zu zeigen , wenn eine bestimmte Bedingung erfüllt ist. In unserem Fall wird die Bedingung die Anzahl der verbleibenden Tage sein, die wir vom letzten Video innerhalb dieser Methode eingerichtet haben. Wenn dies eine positive Zahl zurückgibt, ist dieses Ereignis noch nicht stattfinden. Wenn es jedoch eine negative Zahl zurückgibt, wissen wir, dass dieses Datum verstrichen ist. bedeutet, dass wir dies vor dem Benutzer innerhalb des Browsers verstecken können. Um dies zu tun, gehen wir zu unserer event.view und öffnen dann innerhalb des Eröffnungsartikelabschnitts. Wir können diese Ereignisse ein- und ausblenden, indem wir eine View-Direktive namens v-show.v-show verwenden, ist eine andere Direktive und wird dieses Element nur zeigen, wenn diese Bedingung wahr ist. Wenn beispielsweise 10 größer als 1 ist, ist dies nun wahr und unsere Ereignisse werden nun angezeigt. Wenn wir sagen, wenn 10 gleich 1 ist, ist das nicht wahr, also wird dies jetzt unsere Ereignisse entfernen. Aber stattdessen, was wir tun müssen, ist, in diesen Tagen links Requisite zu suchen und zu entscheiden, ob es eine positive oder negative Zahl ist. Um d dies zu tun, können wir eine JavaScript-Funktion namens Math.Sign verwenden. Dies ermöglicht es uns, eine beliebige Zahl zu übergeben und entweder eine negative, eine positive oder eine Null zurückzubekommen . Wir können hier mit den Beispielen sehen, wenn wir den Wert von drei übergeben, wird eine Ausgabe von eins erhalten. Wenn es negativ ist, erhalten wir den Wert von negativem. Wenn es Null ist, erhalten wir den Wert von Null. Es kümmert sich nicht um den Wert der Zahl, die wir übergeben, wir werden immer nur eine, eine negative oder eine Null zurückbekommen . Dies wird perfekt für die Verwendung in unserer V-Show lassen Sie uns in Math.Sign passieren und dann unsere Tage verlassen Requisite. Wir können nun prüfen, ob dies dem negativen entspricht oder dem Projekt. Die Ergebnisse, die Sie hier sehen, hängen vom Datum ab, das Sie für jede Ihrer Veranstaltungen festgelegt haben. Ich habe derzeit nur ein Ereignis, das in der Vergangenheit ist, also sehe ich nur eine im Browser. Um die Ereignisse zu sehen, die noch nicht geschehen sind, können wir dies in ein positives ändern. Aber mit diesen beiden Optionen haben wir nur fünf von sechs Veranstaltungen gesehen. Dies liegt daran, dass wir eines dieser Ereignisse auf das heutige Datum gesetzt haben, was bedeutet, dass es keine Tage mehr gibt. Um damit umzugehen, werden wir festlegen, dass dies nicht gleich negativ ist, die alle Verfallsdaten filtern und uns nur mit dem Datum belassen , die entweder heute oder in der Zukunft sind. Das nächste, was Sie kümmern müssen, ist der Text, die verbleibenden Tage ist. Wenn die Anzahl der verbleibenden Tage Null ist, sollte sie heute gelesen werden, und für alle vergangenen Ereignisse sollte es vor Tagen lesen. Wir können wieder die übrige Tage Requisite verwenden, die EventReceive ist, und kombinieren Sie sie mit einigen weiteren View-Direktiven namens v-if und v-else. Wie sie klingen, funktionieren diese genau wie JavaScript if-else-Anweisungen. Wir bieten zwei Abschnitte von Code genannt if und else. Wenn die Bedingung erfüllt ist, wird dieser Abschnitt ausgeführt. Wenn es falsch ist, wird der else Abschnitt, der stattdessen ausgeführt wird. Unten am Ende dieser Ereignisvorlage haben wir diese p-Elemente, die ich in diesem Abschnitt direkt oben setzen werde. Lassen Sie uns zuerst mit den heutigen Ereignissen umgehen. Öffnen Sie die p-Elemente und wir werden den Text so einstellen, dass er heute sein wird. Also, welche Bedingung wollen wir dieses Element anzeigen? Nun, wir werden überprüfen, ob die Anzahl der verbleibenden Tage gleich dem Wert von Null ist. Wir können dies dann mit einer v-if-Direktive kombinieren und prüfen, ob die Anzahl der verbleibenden Tage gleich Null ist. Wenn dies der Fall ist, wird dies den Text von heute für dieses besondere Ereignis darstellen. Speichern Sie das, und wir haben nur ein Ereignis, das heute ist, und wir sehen diesen Text hier drinnen. Dies lässt nun unsere beiden p Elemente nebeneinander liegen, aber wir wollen nur das eine oder andere zeigen. Dazu können wir die v-else-Direktive zum nächsten p-Element hinzufügen. Speichern Sie das, und jetzt sehen wir immer nur einen dieser Abschnitte, abhängig von der Anzahl der verbleibenden Tage. Es ist eine Sache, die man beachten muss, wenn man v-if und v-else verwendet, der v-else-Abschnitt muss sofort dem v-if-Element folgen, also konnten wir nichts dazwischen haben, wie eine Spanne. Wie wir sehen können, wird dies einen Fehler verursachen. Dies bedeutet nun, dass das erste Element von heute angezeigt wird, wenn die Anzahl der Tage Null ist. Wenn sich das Ereignis in der Vergangenheit oder in der Zukunft befindet, wird das zweite p-Element angezeigt. Innerhalb dieser zweiten p Elemente gibt es einige weitere Arbeit, die wir tun müssen, um die richtigen Worte zu zeigen. Zunächst einmal, innerhalb des kleinen Abschnitts, haben wir dieses Wort der Tage. Dieses Wort sollte auf das Wort Tag geändert werden, wenn nur noch ein Tag übrig ist und der ternäre JavaScript-Operator dabei helfen wird. Schneiden Sie das aus, öffnen Sie die geschweiften Klammern. Wir können überprüfen, ob die Anzahl der verbleibenden Tage gleich eins ist. Wenn es wahr ist, geben wir die Zeichenfolge des Tages aus. Wenn nicht, sagen wir Tage. Das ist ein Fragezeichen. Wir speichern dies ist alles in unserer Arbeit und wir sehen einen Tag im Browser, 59 Tage und eine 144 Tage zu. Wir müssen auch etwas Ähnliches für dieses Wort von „links“ tun. Um dies zu sehen, sollte der Text „vor Tagen“ lauten, wenn wir das durchgehen und vorübergehend ändern, um es positiv zu sein alle Ereignisse, die abgelaufen sind, , alle Ereignisse, die abgelaufen sind,der Text „vor Tagen“ lesen. Lassen Sie uns das Wort „links“ entfernen, öffnen Sie die doppelten geschweiften Klammern, und dann werden wir eine ähnliche Sache zu tun an der, wo wir Math.Sign, um zu überprüfen, ob dies eine positive oder negative Zahl ist, wie in den Tagen links. Dann werden wir überprüfen, ob die zurückgegebene Nummer nicht gleich negativer ist. Dies wird true zurückgeben, wenn das Datum in der Zukunft ist, und wir können den Text ausgeben, der „links“ sein wird. Oder alternativ der Text von „ago“. Über zum Browser funktioniert der Abschnitt jetzt, wir sehen „vor 12 Tagen“. Ändern Sie dies, um negativ zu sein. Für zukünftige Ereignisse sehen wir noch Tage. Etwas anderes, worum wir uns kümmern müssen ist, wenn wir dies ändern, um eine positive Zahl, für alle Ereignisse, die abgelaufen sind, sehen wir immer noch negativ 12. Dies sollte vereinfacht werden, um einfach „vor 12 Tagen“ zu sagen. Dazu können wir eine andere JavaScript-mathematische Funktion verwenden, die absolut genannt wird. Wenn wir zurück auf die Mozilla-Website und unten in den Methodenabschnitt gehen, haben wir diese Maths.abs. zum Beispielabschnitt können wir sehen, unabhängig davon, ob wir eine negative Zahl oder eine positive Zahl übergeben, dies wird immer den absoluten Wert ohne das negative Symbol zurückgeben und dies ist ideal für unseren Anwendungsfall. Zurück zu unserer Vorlage und wo wir die Anzahl der verbleibenden Tage ausgeben. Wir werden das jetzt in Math.abs übergeben, speichern Sie das, und jetzt sollte unsere negative Zahl entfernt werden. Lassen Sie uns einfach überprüfen, dass die positiven Zahlen gut funktionieren und das funktioniert jetzt auch. 36. Mehr über bedingtes Rendering: Bisher haben wir v-show, v-if und v-else verwendet, um unsere Elemente ein- und auszublenden. Aber was ist der Unterschied zwischen ihnen? Werfen wir einen Blick auf diese und einige andere Dinge, die wir mit bedingtem Rendering tun können. Hier ist ein einfaches Beispiel, das für eine Banking-App oder ähnliches verwendet werden könnte, das den Benutzer auffordert, das Passwort nach einigen Tagen zu ändern. Dieses einfache Beispiel wäre nicht gut, wenn der Benutzer das Passwort gestern oder sogar vor 10 Minuten geändert hat . Wir würden bedingte Renderings verwenden, die diese Meldung nur anzeigen , wenn der Benutzer nicht mehr als 100 Tage angemeldet ist. Das würde funktionieren, aber die V-für-Richtlinie wurde wiederholt. Vielleicht kein großes Problem für dieses kleine Beispiel. Was ist, wenn sich ein vollständiger Abschnitt auf diese Bedingung stützt , der diese Richtlinie zu vielen Elementen hinzufügen muss? Eine andere Möglichkeit besteht darin, alle diese Elemente innerhalb eines Template-Tags zu gruppieren. Wir könnten dann die v-if-Direktive zu diesem Wrapper hinzufügen. Das heißt, es würde für alles im Inneren gelten. Diese Vorlage könnte auch ein div, ein Abschnitt oder eines der Elemente sein. Zum Vorteil der Verwendung der Vorlage ist, dass es nicht im Browser gerendert wird. Der Browser wird den Code lesen, genau wie wir unten sehen. Es wirkt wie ein unsichtbarer Wrapper, so dass wir den Rest unseres Codes nicht stören unnötige schnelle Divs optimieren. Im vorherigen Video haben wir uns die Verwendung von v-if und v-else angesehen. Aber was wäre, wenn wir eine dritte Bedingung hätten? Das heißt, wir könnten auch von v-else-if Gebrauch machen. In diesem komplexeren Beispiel begrüßen wir den Benutzer, wenn die Anzahl der Tage seit dem letzten Login weniger als 50 beträgt. Dann kann v-else-if mit dem Template-Wrapper an die nächsten einzelnen Elemente oder eine Gruppe von Elementen angehängt werden. Der Abschnitt überprüft, ob die Anzahl der Tage seit dem letzten Login zwischen 50 und 99 liegt, und fordert den Benutzer dann auf, sein Passwort bald zurückzusetzen. Dann als letzter Abschnitt können wir die else-Direktive verwenden, und sie wird ausgeführt, wenn die beiden oben genannten Bedingungen nicht erfüllt wurden. bedeutet, dass dies ausgeführt wird, wenn sich der Benutzer seit hundert Tagen oder länger nicht eingeloggt hat. Wir werden sie dann auffordern, ihr Passwort zurückzusetzen. Wir könnten auch mehrere v-else-if Abschnitte verwenden, und das ist, wenn wir mehr als drei Bedingungen haben, die wir überprüfen wollen , genau wie wir es mit normalem JavaScript tun können. Wir können so viele von ihnen verwenden, wie wir wollen, solange jedes einzelne dieser Elemente voneinander folgen. Wir haben jetzt sowohl v-show als auch v-if als verschiedene Möglichkeiten gesehen , Elemente bedingt zu rendern. Aber warum hat Vue beide Möglichkeiten, wenn sie das Gleiche auf der Oberfläche zu tun scheinen? Nun, darunter Dinge zu zeigen und zu verstecken, gibt es einige Unterschiede. Die Show-Elemente werden immer im DOM gerendert. Auch wenn sie nicht sichtbar sind, sind sie immer noch da. Es verwendet die CSS-Anzeigeeigenschaft unter den Hauben zum Ein- und Ausblenden. Es kann weder in Kombination mit Template-Elementen als Wrapper verwendet werden, noch in Kombination mit v-else verwendet werden. Da diese Direktive immer im DOM vorhanden ist und die CSS-Anzeigeeigenschaft zum Umschalten verwendet wird, ist es oft eine gute Wahl, wenn wir erwarten, dass sie regelmäßig umgeschaltet wird. V-if ist eher ein echtes bedingtes Rendering. Im Gegensatz zu v-show ist v-if nicht immer im DOM vorhanden, sondern wird nur dann gerendert, wenn die Bedingung auf true gesetzt ist. Wenn eine Bedingung falsch wird, werden alle Abschnitte und Steuerelemente vollständig zerstört, einschließlich aller Ereignis-Listener oder untergeordneten Komponenten. Da die Kosten für das vollständige Add-In oder Verschieben der Abschnitte etwas höher sind, kann es vorteilhaft sein, wenn wir erwarten, dass sich die Bedingung weniger häufig ändert. Alle von ihnen müssen es vollständig vom DOM unmounten. 37. Berechnete Eigenschaften: Wir haben kürzlich diesen DaysLeft Abschnitt erstellt , der ziemlich viel JavaScript-Logik darin verschachtelt hat. Obwohl dieser ganze Code perfekt funktioniert hat, beginnen die Dinge ein wenig chaotisch zu werden. Es kann generell empfohlen werden, komplexere Logik aus unseren Vorlagen zu extrahieren , wenn möglich, so dass die Vorlage näher am HTML liegt , für den sie gedacht war. Hilfe dabei, wir können diese Logik nicht als Methode in unseren Skriptbereich auslagern. Lasst uns das machen. Nun, die Requisiten. Preview-Methoden und der Methodenname, den ich geben werde, ist DaysLeft String. Dies wird dafür verantwortlich sein, eine Zeichenfolge zurückzugeben, die den gesamten Text ersetzt, den wir auf der rechten Seite sehen. Es wird DaysLeft sagen, vor Tagen, abhängig von der Anzahl der verbleibenden Tage. Dazu können wir den größten Teil des Abschnitts zwischen diesen kleinen Tags wiederverwenden, also kopieren Sie die beiden Codezeilen innerhalb der geschweiften Klammern. Dies kann nun als Ausgangspunkt für unsere Methode verwendet werden. Wir jetzt nicht mehr in unserer Vorlage, also müssen wir die doppelten geschweiften Klammern für jeden dieser Abschnitte entfernen. Auch, da wir jetzt auf DaysLeft beziehen, und diesen Pfad unserer Vue Instanz. Wir müssen dies mit this.daysleft in unseren beiden Codezeilen verweisen. Speichern Sie dann jede dieser Zeilen in einer Konstante. Dies wird entweder der Tag oder das Wort Tage sein. Ich will nicht meinen konstanten Tag oder Tage anrufen. Das ist also gleich diesem Wert. Als nächstes eine zweite Konstante, die entweder das Wort links oder go sein wird. Dann können wir den Wert dieser beiden Wörter kombiniert zurückgeben. Wir müssen etwas zurückgeben, wie vor Tagen oder DaySleft. Wir können dies tun, indem wir den Wert zurückgeben. Dann müssen wir beide Konstanten addieren und diese von der Methode zurückgeben, also wäre dies Tag oder Tage plus der Wert von left or go. Wir können diese Methode nun anstelle von dort aufrufen, wo wir diese beiden Codezeilen ausschneiden. Zwischen den kleinen Abschnitten öffnen wir die doppelten geschweiften Klammern und rufen dann unsere Methode auf. Da wir diese Funktion tatsächlich ausführen wollen, nennen wir sie mit den Klammern. Dies wird durch den neuen Zeichenfolgenwert ersetzt , der von unserer Methode zurückgegeben wird. Dies hinterlässt uns eine viel sauberere Vorlagen, und wir können den Code auch an anderer Stelle wiederverwenden, wenn nötig. Lassen Sie uns das testen. Siehst du eines Tages noch, das ist alles, was wir beschränkt sind, und ändere das in eine positive Zahl. Dies sollte jetzt vor Tagen sagen, der größte Raum zwischen diesen, alles, was wir tun müssen, ist nur ein Leerzeichen innerhalb unserer Zeichenfolge hinzuzufügen. Nach Tag oder Tagen, und ein Leerzeichen und dies wird im Browser angezeigt werden. Dies ist gut, aber nicht immer die beste Lösung für alle Fälle, da eine Methode manuell aufgerufen werden muss, genau wie wir es hier tun. Die Methode wird erst aufgerufen, wenn die Komponente geladen wird. Wenn ein Tag vergeht und sich die Anzahl der Tage ändert, wird die Benutzeroberfläche nicht mit dem neuen Wert aktualisiert, bis wir entweder die Seite aktualisieren oder diese Methode manuell aufrufen. In solchen Situationen könnten wir eine berechnete Eigenschaft verwenden. Computed ist ein weiterer Abschnitt, der mögliche Optionen API ist, die wir bisher mit den Daten und den Methoden Abschnitten verwendet haben. Die Struktur ist genau die gleiche wie unser Methodenabschnitt. Alles, was wir tun müssen, ist, dies zu ändern, um berechnet zu werden. Ich werde sofort sehen, dass dies einen Fehler verursacht , weil wir im Gegensatz zu einer Methode dies nicht mit den Klammern aufrufen müssen. Alles, was wir tun müssen, ist eine Referenz zur Verfügung zu stellen, die berechnete Eigenschaft ist und es immer noch genau das gleiche funktioniert. Eine Methode und eine berechnete Eigenschaft sehen auf der Oberfläche gleich aus. Wir rufen eine Methode manuell auf, aber eine berechnete Eigenschaft aktualisiert automatisch die Vorlage, wenn irgendwelche Änderungen innerhalb von hier passieren. Wir sehen derzeit im Inneren von hier haben wir einige reaktive Daten, die this.daysleft ist. Wenn eine berechnete Eigenschaft reaktive Daten wie diese oder eine andere Dateneigenschaft oder -methoden enthält . Jedes Mal, wenn die Daten aktualisiert werden, wird die Vorlage automatisch aktualisiert. Das bedeutet, dass sich unsere Vorlage automatisch in ändern würde, wenn sich DaysLeft ändert. Diese berechneten Eigenschaften sind auch sehr effizient, sie werden zwischengespeichert und werden nur neu bewertet, wenn sich etwas reaktives ändert. Wenn sich nichts innerhalb von hier ändert, würde [unhörbar] diese berechnete Eigenschaft dazu führen, dass die zwischengespeicherten Ergebnisse zurückgegeben werden, was die Verwendung sehr effizient macht. Ein weiteres Beispiel für eine berechnete Eigenschaft wäre, den Farbkontrast zwischen unseren Ereignishintergründen und unserem Text zu ändern . Wenn wir dies auf einen negativen zurückgeben, ist der gelbe Hintergrund schwer zu lesen, und auch ein wenig für das Grün. Für die Ereignisse, die diese beiden Hintergrundsätze haben, werden wir die Textfarbe verdunkeln. Dies wird auch eine berechnete Eigenschaft sein, so dass unmittelbar nach unserer DaysLeft Zeichenfolge die zweite berechnete Eigenschaft ChangeContrast genannt wird. Dies ist unser [unhörbares] genau wie eine Methode und es genau wie unser vorheriger berechneter Abschnitt. Der erste Schritt besteht darin, eine Konstante einzurichten , die ein Array mit unseren beiden Hintergrundfarben sein wird. Ich nenne das die kontrastarmen Hintergründe. Wenn Sie eine der Farben ändern, die mit Ihren Ereignissen verwendet werden sollen, kann dies auch die Werte innerhalb von hier ändern. Die gelben und die grünen Werte werden f9f970 sein, und dann ist das zweite Array-Element 68ee94. Mach dir keine Sorgen, wenn du zu diesem Zeitpunkt einen Fehler siehst. Dies bedeutet nur, dass wir dieses Array erstellt haben, aber wir haben es noch nicht verwendet. Als nächstes müssen wir überprüfen, ob dieses aktuelle Ereignis eine dieser beiden Hintergrundsätze hat, wir haben das Ereignis als Requisite übergeben. Jedes dieser Ereignisse hat eine Hintergrundeigenschaft. Das bedeutet, dass Sie jetzt überprüfen können, ob unsere event.background eine dieser Array-Farben enthält. Der Weg dazu besteht darin, auf eine JavaScript-Array-Methode namens Includes zuzugreifen. Möglichkeit, dies zu tun, besteht darin, auf unser Array zuzugreifen, das kontrastarme Hintergründe ist, und dann eine JavaScript-Methode namens includes aufzurufen. Dies wird landen greifen alle Werte innerhalb von hier, und überprüfen, ob einen bestimmten Wert enthält. Ein bestimmter Wert, den wir überprüfen möchten, ist die event.background, da dies auch innerhalb unserer View-Instanz ist, verwenden wir dieses Schlüsselwort, bevor wir event.background aufrufen. Eine berechnete Eigenschaft muss immer einen neuen Wert zurückgeben. Dieser neue Wert ist entweder true oder false, je nachdem, ob diese Farbe als Ereignishintergrund enthalten ist. So können wir diese ChangeContrast berechnete Eigenschaft nennen. Innerhalb der doppelten geschweiften Klammern oder Stellen direkt unter unserem Abschlussartikel. Dies, und über zum Browser, so dass der gelbe ein wenig schwer zu sehen ist, aber wirklich alle auswählen. Wir können sehen, dass der gelbe ist wahr. Wir wie falsch für die anderen Farben. Dieser grüne wird auch falsch angezeigt, also lassen Sie uns sehen, was hier vor sich geht. Das ist 68ee94, wir können das einfach vergleichen. Das war die Konferenzansprache, ich denke, das ist nur wegen der Großbuchstaben. Also lasst uns das ändern und dies einer exakten Übereinstimmung machen. Nun ist dies auf zwei gesetzt, wie erwartet. Wir wollen nicht nur den Wert true oder false ausgeben, so in unserer Vorlage. Eine bessere Verwendung wäre, nur eine dunkle Textfarbe anzuwenden, wenn dies wahr ist. Wir haben bereits untersucht, wie Sie dies tun, indem Sie einen bindierten Stil-Attribute verwenden. Dies ist bereits für jeden unserer Artikel durch ein Komma getrennt abgewickelt. Wir können auch die CSS-Farbeigenschaft festlegen, abhängig vom Wert von ChangeContrast. Wenn ChangeContrast gleich zwei sein wird, verwenden wir den ternären JavaScript-Operator, der Umschalten zwischen zwei verschiedenen Farben. Wenn dies wahr ist, ist die Farbe, die wir platzieren möchten, ein Hex-Wert von 45, bevor sie fallen wird. Wenn das falsch ist, was bedeutet, dass wir nicht auf den kontrastarmen Hintergründen sind. Wir können dann die Schriftfarbe so einstellen, dass der Wert von weißem Rauch ist. Speichern und die Textfarbe wurde jetzt für den gelben und auch den grünen Hintergrund aktualisiert. Die Vorteile der Verwendung einer berechneten Eigenschaft hier besteht darin, dass wir später dem Benutzer erlauben werden, jedes dieser Ereignisse zu bearbeiten, einschließlich der Hintergrundfarbe, was bedeutet, dass es auf Änderungen am Hintergrund, und aktualisieren Sie dann die Farbe nach Bedarf. 38. Watcher und mehrfache Wurzelknoten (Fragmente): Neben Computereigenschaften bietet uns UJS auch eine andere Möglichkeit, auf Datenänderungen zu achten. Wenn Sie dann etwas Code ausführen, nachdem dies passiert ist, verwenden Sie einen Watcher. Um dies zu tun, müssen wir die watch-Eigenschaft zu unserem Optionsobjekt innerhalb der App.Vue Datei hinzufügen , neben unseren Daten und unseren Methoden. Wir können in unserer Uhrenabteilung als Objekt platzieren. Im Inneren hier werden wir in einer Callback-Funktion übergeben, die läuft, wenn eine der Daten, die wir beobachten und ändern wird. Wir können beobachten, wenn sich eine Dateneigenschaft, eine Requisite oder sogar eine berechnete Eigenschaft ändert, indem wir die Callback-Funktion auf den Wert benennen, den Sie beobachten möchten. Wenn wir zum Beispiel eine Dateneigenschaft namens DarkModeSet hatten, die ursprünglich auf false gesetzt wurde, würden wir dann unseren Beobachter nach dieser Eigenschaft benennen, die wir beobachten. Also für diesen wird dies DarkModeSet sein, und dann würden wir Code innen ausführen. So sehen Sie dieses Beispiel besser, wir können auch eine Schaltfläche hinzufügen, die dies zwischen true und false umschalten wird. Öffnen Sie die Vorlage ganz oben, richten Sie die Schaltfläche mit einem at click Ereignis-Listener ein , der DarkModeSet so einstellen wird, dass sie gleich dem Gegenteil ist, und dann werde ich den Wert direkt unten setzen, um zu überprüfen, dass dies funktioniert. Ich sollte jetzt in der Lage sein, die Liste zwischen true und false umzuschalten. Eine andere Sache, die wir hier gemacht haben, ist auch die Vorteile einer anderen Vue freie Funktion, die mehrere Wurzelknoten ist, auch als Fragmente bezeichnet. Hier in unserer Vorlage haben wir einen Button neben unserer ungeordneten Liste platziert. Also effektiv haben wir zwei Wurzeln oder übergeordnete Knoten. Früher müssten wir bei der Verwendung von Vue 2 all diesen Inhalt in ein einzelnes übergeordnetes Element einbinden. Zum Beispiel müsste ein div oder einen ähnlichen Wrapper verwenden und dann unseren Code darin platzieren. Dies ist in Vue Version 3 nicht mehr erforderlich und vermeidet das Hinzufügen unnötiger Wrapper in unser HTML. Zurück zu unserem Beobachter, der eingerichtet wurde, können wir auch an unseren Beobachter den Wert übergeben , der der Wert sein wird, nachdem sich die Daten geändert haben. Ich möchte das als Val nennen, aber das kann alles sein, was Sie bevorzugen. Wir können dies mit einem Konsolenprotokoll sehen und dann öffnen Sie die Entwicklertools. Wir haben nichts im Browser angezeigt, aber wenn wir auf die Umschaltfläche klicken, wird dies dann die Daten widerspiegeln, nachdem sich dies geändert hat. Also das ist jetzt wahr, klicken Sie nochmals darauf. Dies wird nun in false geändert. Dies gibt uns jetzt die Möglichkeit, jeden Code auszuführen, den Sie wollen, nachdem etwas geändert wurde. Es gibt uns auch Zugriff auf den neuen Wert. Aber was wäre, wenn wir auch auf den alten Wert zugreifen wollten, bevor die Änderung aufgetreten ist. Dies können wir in zwei Parametern übergeben. Wieder, wir Namen unserer Wahl. Der erste kann also der neue Wert sein, dann der zweite, der alte Wert. Platzieren Sie beide in unserem Konsolenprotokoll. Öffnen Sie die Entwicklertools. Wenn wir nun auf „Toggle“ klicken, wird uns dies nun Zugriff auf die neuen und auch die alten Werte geben. So funktioniert ein Beobachter höchstens einfach, und das reicht oft aus, um so viele gebrauchte Fälle abzudecken. Aber es gibt auch noch ein paar weitere Optionen, die verfügbar sind und auch einige Edge-Fälle. [ unhörbar] ein Objekt oder ein Array beobachten wollen, lassen Sie uns dies sehen, indem Sie dies ändern, um unser Ereignis-Array zu beobachten. Jetzt können wir versuchen, ein neues Ereignis hinzuzufügen und sehen, was passiert, wenn wir versuchen, dies zu aktualisieren. Also zurück zu unserer Vorlage, und dieses Mal werden wir auf unsere Veranstaltungen zugreifen. Dann kann auf das Ende ein neues Ereignis schieben. Wir können jedes dieser Ereignisse als Vorlage greifen, fügen Sie es ein und ändern Sie einfach einige der Details, es wird Nummer sieben sein. Da wir innerhalb dieser doppelten Anführungszeichen sind, müssen wir wissen, dass die einfachen Anführungszeichen innerhalb dieses Objekts verwendet werden. Gehen Sie also durch jedes einzelne von diesen und ändern Sie die doppelten Anführungszeichen in einzelne. Dann, wenn wir damit fertig sind, können wir jetzt alle den Wert von Ereignissen setzen. Speichern Sie diese Datei. Wir sehen, dass wir alle Werte von eins bis sechs haben. Klicken Sie auf eine Schaltfläche. Unser sieben Objekt wird jetzt hinzugefügt. Öffnen Sie die Entwicklertools, klicken Sie auf „Aktualisieren“. Mal sehen, was mit unserem Beobachter passiert. Klicken Sie auf „Toggle“. Jetzt wurde unser siebtes Event hinzugefügt, aber wir sehen nichts in der Konsole. Obwohl wir immer noch auf die alten und die neuen Ereignisse achten und auch versuchen, dies auf der Konsole nur hier zu protokollieren, bedeutet dies jetzt, dass unser Beobachter scheint nicht auf Änderungen zu reagieren. Dies geschieht, wenn wir ein Array oder ein Objekt beobachten. Wenn Sie mit dem Umgang mit primitiven und Referenztypen von JavaScript vertraut sind, ist dies im Moment sinnvoller. Wenn nicht, wird dies in einem späteren Reaktivitätsvideo behandelt. Moment müssen Sie jedoch verstehen, dass, wenn wir uns auf ein Objekt oder ein Array beziehen, Änderungen an den Elementen oder den Objekteigenschaften, die darin verschachtelt sind, keine Aktualisierung auslösen. Damit dieser Watcher ausgelöst wird, müssten wir das vollständige Array oder Objekt ersetzen, anstatt nur eine der Eigenschaften, die wir im Inneren haben. Oder alternativ können wir eine tiefe Option übergeben, die Vue anzeigt, nur auf Änderungen zu achten, die innen verschachtelt sind. Um dieses tiefe Objekt zu übergeben, müssen wir auch die Art und Weise ändern, wie wir unseren Beobachter konstruieren. Anstatt eine Callback-Funktion wie hier einzurichten, müssen wir dies auch ändern, um ein Objekt zu sein. Dieses Objekt bedeutet jetzt, dass wir immer noch auf diese Ereignisse achten. Wir können nun einige der Optionen übergeben. Die erste Eigenschaft ist diese tiefe Option, die wir auf true setzen werden. Getrennt durch Komma, fügen wir dann unsere Handler-Funktion hinzu, die ausgeführt wird, wenn sich diese Ereignisdaten ändern, und es ist innerhalb dieser Handler-Methode, die unsere Callback-Funktion ersetzen wird. So wie bei all dem, kann auch den Wert übernehmen, den Sie in der Konsole anmelden, aktualisieren und öffnen Sie die Entwickler-Tools. Jetzt, wenn wir unsere zusätzlichen Ereignisse hinzufügen, wird dies jetzt in der Konsole reflektiert. Öffnen Sie dies und klicken Sie auf den Array-Abschnitt, und wir haben sieben verschiedene Objekte. Beachten Sie auch hier innerhalb unseres Beobachters, dass wir nur einen einzelnen Parameter an den Handler übergeben. Dies ist wieder auf die Tatsache zurückzuführen, dass wir ein Objekt oder ein Array beobachten. Wir haben jetzt nur Zugriff auf den neuen Wert, anstatt auf den alten Wert. Eine weitere Eigenschaft, die wir diesem Beobachter hinzufügen können, ist Sofort. Die Option Sofort ermöglicht es uns, den Watcher zu starten, sobald unsere Komponente geladen wird, zusammen mit den Änderungen auch. Also, lassen Sie mich derzeit den Browser aktualisieren. Wir sehen, dass dieser Watcher erst dann ausgeführt wird, wenn wir Änderungen an diesen Daten vornehmen. Wenn wir wollten, dass dieser Watcher auch ausgeführt wird, sobald die Komponente geladen wird, übergeben wir die Option Sofort, und dann werden wir dies auf true setzen. Testen Sie dies aus, öffnen Sie den Browser, aktualisieren Sie ihn. Wir sehen, dass der Watcher sofort ausgeführt wird, und kann auch auf die Schaltfläche „Toggle“ klicken. Es ist ziemlich viel los hier und Sie fragen sich vielleicht, warum Vue uns sowohl den Watcher als auch die berechneten Optionen zur Verfügung stellt. Wenn beide scheinen ähnliche Dinge auf der Oberfläche zu tun. Nun, es gibt tatsächlich einige wichtige Unterschiede zwischen diesen beiden Optionen, die wir als nächstes entdecken werden. 39. Berechnet oder Watcher?: Wenn Sie zuerst mit Vue JS beginnen, ist es vielleicht verwirrend, warum sowohl die berechnete Eigenschaft als auch der Watcher existieren, wenn beide eine ähnliche Sache zu tun scheinen was Sie für eine Änderung benötigen und dann Code ausführen. Aber es gibt einige wichtige Unterschiede, und einer davon ist, wenn Sie auf mehrere Datenstücke achten möchten. Die View-Dokumentation zeigt dieses großartige Beispiel, wo wir den Vornamen und Nachnamen haben. Wir brauchen nicht zwei Uhren für den Vor- und Nachnamen zu erstellen , um den vollständigen Namen zu konstruieren, den wir brauchen. In diesem Fall wäre eine berechnete Eigenschaft besser, da wir mehrere Teile von reaktiven Daten referenzieren können und es wird ausgeführt, wenn eine dieser Änderungen. In Anbetracht dieses exakt gleichen Beispiels, beachten Sie hier, dass wir einige Daten aufnehmen und dann einen neuen Wert zurückgeben. Wie wir wissen, kann auf diesen Wert überall in unserer Vorlage zugegriffen werden , indem Sie den berechneten Namen von Create full name verwenden. Dies ist vollkommen gültig mit einer berechneten Eigenschaft auf der richtigen Weise, sie zu verwenden. Aber wir sollten nicht versuchen, sie zu verwenden, um irgendwelche externen Daten oder Status zu ändern, wie etwa irgendetwas innerhalb unserer Dateneigenschaften, da dies zu einem sogenannten Nebeneffekt führt , der dann einen Fehler auslöst. Der Schlüssel hier ist, eine berechnete Eigenschaft zu verwenden, wenn wir eine Datenänderung beobachten und dann einen neuen Wert zurückgeben wollen . Wenn wir dann unsere Daten oder unseren Zustand aktualisieren möchten , sollte dies dann mit einem Beobachter geschehen. Zusammenfassend können wir eine Watch-Eigenschaft verwenden, wenn wir eine Funktion ausführen möchten , wenn sich Daten ändern. Wenn wir jedoch einen neuen Wert zurückgeben möchten, der auf einigen vorhandenen Daten berechnet wird, würden wir dann einen berechneten Wert verwenden. Auch berechnet ermöglicht es uns, mehrere Datenquellen zu beobachten, viel effizienter zu. Wie wir uns in der letzten Folie angeschaut haben, sollten wir keine berechnete Eigenschaft verwenden, um den Status direkt zu mutieren, noch sollten wir ihn für asynchrone Operationen verwenden. heißt, wenn wir eine asynchrone Aufgaben wie Mais einiger API-Daten hatten, die einige Zeit dauern können, um vom Server zurückzukommen. Ein Beobachter ist der Weg zu gehen. Wie wir bereits gesehen haben, sind berechnete Eigenschaften auch direkt aus der Vorlage zugänglich. So können wir unsere Ausgabe, den neuen Rückgabewert verwenden . Ein weiterer Unterschied besteht darin, dass nicht berechnete Eigenschaften auch zwischengespeichert werden. Stellen Sie sich vor, eine Datumseigenschaft wird sowohl von einer berechneten unter Watch-Eigenschaft beobachtet? Wenn die Dateneigenschaft dann aktualisiert wird , ist der Wert derselbe wie zuvor. Eine berechnete Eigenschaft wird nicht neu berechnet, da sich der Wert nicht geändert hat. Die watch -Eigenschaft führt jedoch immer noch die Callback-Funktion aus, unabhängig davon. Wie Sie sehen können, haben beide ihre Verwendung und Vorteile, sowohl für verschiedene Anwendungsfälle. 40. Ordnen und wechseln vergangener Events: Innerhalb unserer event.vue oben oben auf der Vorlage, haben wir manuell zwischen Ereignissen in der Vergangenheit und Zukunft durch Änderung diese-show saß in. Aber jetzt werden wir dies ändern, indem wir eine Schaltfläche hinzufügen, tun Sie dies folgt. Zusammen mit diesem, wir werden auch eine berechnete Eigenschaft hinzufügen, wir werden diese Ereignisse in Datumsreihenfolge zu arrangieren. Kurz bevor wir dies tun, können wir auch die Daten aus dem vorherigen Watches Video entfernen. Da wir dies für unser Projekt nicht benötigen, brauchen wir den Watch-Abschnitt nicht, dies kann entfernt werden, die Dark-Mode-set-Eigenschaft und auch den Abschnitt aus unserer Vorlage, der die Schaltfläche war, und auch die Ereignisausgabe. Also in diesem app.vue Abschnitt, lassen Sie uns mit der Umschaltfläche beginnen, indem Sie eine neue Dateneigenschaft hinzufügen, die ShowPastEvents genannt wird. Dies wird ein boolescher Wert sein, der zunächst auf false gesetzt wird, und öffnen Sie dann die Vorlage. Das können wir auch an unsere Eventkomponenten weitergeben. Stellen Sie sicher, dass dies auch dynamisch ist Daher verwenden wir den Doppelpunkt zum Binden des Eigennamens von ShowPastEvents, ebenfalls gleich dem Wert mit dem gleichen Namen ist. Da diese Daten eine Eigenschaft sind, müssen Sie auch zu unserer event.vue gehen und diese in unsere Requisiten übergeben. Diese Requisite kann jetzt auch innerhalb unserer Vorlage verwendet werden , um jedes dieser Ereignisse ein- und auszublenden, und innerhalb der v-Show werden wir direkt den O- Operator übergeben. Es zeigt auch Ereignis, wenn unsere ShowPastEvents Prop gleich wahr ist. Wir haben derzeit diesen Wert auf false gesetzt, also lasst uns dies im Datenabschnitt nach unten umschalten. Wenn wir dies wahr machen, aktualisieren Sie den Browser und jetzt werden alle vorherigen Ereignisse auch angezeigt, es ist alles in unserer Arbeit. Also jetzt müssen wir eine Schaltfläche einführen, die dies für uns innerhalb der app.vue Vorlage und direkt über unserer ungeordneten Liste wechseln wird, so dass dies oben in unserer Anwendung erscheint. Erstellt ein neues div mit der Klasse der Optionen. Dies wird der Wrapper für unseren Button neben einigen anderen Buttons sein, die wir später hinzufügen werden. Die Schaltfläche wird für ein Klick-Ereignis zu hören , wo wir den Wert von ShowPastEvents umschalten werden. Diese Schaltfläche benötigt auch einen Namen, damit wir dies im Browser sehen können. Dann über den Browser, wir werden auch unsere Schaltfläche versuchen, und dies wird nun zwischen Ein- und Ausblenden von vergangenen Ereignissen umschalten. Wir werden später auf diese Schaltfläche zurückkommen und etwas Styling hinzufügen, aber jetzt werden wir eine berechnete Eigenschaft hinzufügen, um diese Ereignisse in der Datumsreihenfolge zu organisieren. Wir können hier sehen, dass dieser, der heute ist, an der Spitze stehen sollte, wir sollten dann den einen Tag noch sehen, 59. Also sind diese Ereignisse derzeit nicht in Ordnung. Diese app.vue Datei enthält alle unsere Ereignisse, die in dieser Dateneigenschaft gespeichert sind. Anstatt diese jetzt direkt durchlaufen zu lassen, werden wir zuerst eine berechnete Eigenschaft einrichten, die diese in der richtigen Reihenfolge neu anordnen und dann das neu angeordnete Ereignisarray zurückgeben wird . Dazu benötigen wir einen berechneten Abschnitt mit einer Eigenschaft namens Order-Events. Was wir in diesem berechneten Abschnitt tun wollen, ist, alle unsere Veranstaltungen zu greifen und die Reihenfolge neu zu ordnen. Wie wir aus früheren Videos wissen, können wir den Zustand nicht direkt manipulieren , so dass wir den Wert innerhalb dieser Dateneigenschaft nicht ändern können. Stattdessen, was wir tun werden, ist eine lokale Variable zu erstellen , die die Kopie dieser Ereignisse sein wird. Also eine Konstante namens EventsToOrder. Die Menge ist gleich einer Kopie mit this.events. Berechnete Eigenschaften müssen etwas zurückgeben, ein [unhörbares] mit einem Wert dieses EventsToOrder , nachdem wir die JavaScript-Sortiermethode aufgerufen haben. Wenn unser Ereignisarray keine Objekte enthielt und viel einfacher war und es aus Dingen wie Textzeichenfolgen oder sogar Zahlen bestand, wäre dies alles, was wir tun müssen, da standardmäßig die Werte, wenn wir die Sortiermethode verwenden, konvertiert in Strings und wird alphabetisch in aufsteigender Reihenfolge sortiert. Unser Fall ist jedoch etwas komplexer. Wir haben ein Array von Objekten und wir müssen sie nach der Datumseigenschaft sortieren. Um dies zu tun, können wir in die Sortiermethode eine optionale Vergleichsfunktion übergeben. Dies wird zu jeder Zeit zwei Elemente in unserem Array vergleichen. Die Namen, die wir diesen beiden Elementen geben, liegen ganz bei uns, und wir können diese als Pfeilfunktion übergeben. So übergeben Sie alle Variablennamen für unsere beiden Elemente zu vergleichen. Ich möchte dies einfach a und b nennen. Dies wird jetzt alle unsere Objekte innerhalb dieses Arrays durchlaufen und es dann mit einer anderen Zeit vergleichen. Ich werde Zugang zu diesen beiden Objekten haben, die mit diesen a und b Variablen verglichen werden , was bedeutet, dass wir die Daten von jedem vergleichen können. Zunächst werden wir überprüfen, ob die day-Eigenschaft auf Objekt a größer ist als die day-Eigenschaft auf Objekt b Wenn dies wahr ist, verwenden wir den ternären JavaScript-Operator , der einen Wert von eins zurückgibt. Wenn dies falsch ist, geben wir dann den Wert von negativem ein zurück. Es ist positive oder negative Zahl wird unsere Objekte neu anordnen , indem Sie die Indexposition setzen. Wenn also diese Daten verglichen werden, wenn eines von ihnen höher ist, wenn eines von ihnen höher ist,wird es dann die Indexposition mit einer positiven Zahl nach oben geschoben. Wenn nicht, wird es mit der negativen Zahl nach unten gedrückt, und dann, wenn es fertig ist, durch den Vergleich aller Elemente in unserem Array zu sortieren, werden wir dann zurück zum ursprünglichen Array in der neuen Reihenfolge, die wir dann in unserer Vorlage verwenden können, um durch an der Stelle unserer ursprünglichen Ereignisse. Jetzt werden wir Bestellereignisse bis zu unserer ungeordneten Liste erfassen und dann anstelle unserer Dateneigenschaft durchlaufen, speichern Sie diese und sofort unsere Ereignisse und jetzt in der richtigen Reihenfolge aktualisiert. Oben ganz oben haben wir irgendwelche früheren Ereignisse, die vorbei sind, wir haben das heutige Ereignis, und dann werden diese jetzt vom nächstgelegenen zum weitesten entfernten angeordnet, und sie sollten auch noch funktionieren, wenn wir irgendwelche früheren Ereignisse verstecken. Außerdem kenne ich die Vorteile, wie wir in einer berechneten Eigenschaft vermissen. Wenn der Benutzer später das Datum für eines dieser Ereignisse bearbeitet, wird auch die Reihenfolge neu berechnet. 41. Teleport: Im Moment hat unsere Anwendung hartcodierte Ereignisse. Aber bald werden wir es dem Benutzer erlauben, sowohl neue Ereignisse hinzuzufügen als auch bestehende zu bearbeiten. Sie werden dies tun, indem Sie ein Formular hinzufügen, dieses Formular könnte eine Komponente sein, und es könnte sogar auf einer eigenen Seite platziert werden. Ein häufiges Szenario besteht jedoch darin, das Formular in ein Pop-up-Modell zu platzieren. Dies bedeutet, dass der Benutzer auf der gleichen Seite bleibt, aber das Formular wird über den Inhalt angezeigt. Abhängig von der HTML-Struktur können Modale schwierig sein, mit CSS zu positionieren, jeder Teleport könnte dabei helfen. Als Beispiel innerhalb der App.vue Datei, ganz oben in unserer Vorlage, stellen Sie sich vor, wir hatten ein Formularelement wie dieses, in diesem werde ich nur sagen, fügen Sie neue Ereignisse hinzu. Um dies als Pop-up-Modal zu erstellen, müssten wir kein CSS anwenden. Derzeit ist dieses Formular nur an der Spitze der Komponenten beginnen, aber im Allgemeinen wollen wir ein modales Pop-up über den Rest des Inhalts. Oft tun wir dies, indem wir die CSS-Positionseigenschaft auf absolut setzen, jedes Element, das auf absolut gesetzt ist, wird für ein übergeordnetes Element suchen, das relativ ist, und dann diesen relativen Container verwenden, um zu referenzieren. Im Moment ist dies kein großes Problem, da wir uns hier in den Top-Level-Komponenten befinden. Nun, wenn diese Form tief in viele verschiedene Komponenten und viele verschiedene Wrapper verschachtelt war , wird es zu einer komplexeren CSS-Aufgabe werden. Die Positionierung Modal genau dort, wo wir es wollen, um damit zu helfen, wird die Teleportfunktion uns erlauben, diesen Code immer noch innerhalb der Vorlage zu halten , um ihn an anderer Stelle zu rendern. Dies bietet einige Vorteile, wie wir diese Formulare HTML-Struktur innerhalb der gleichen Komponenten wie die Formulardaten oder ihre Logik halten können . Es kann immer noch auf alles aus unserer Sicht Abschnitte wie unsere Daten und unsere Methoden zugreifen, aber anstatt innerhalb dieser Komponente gerendert zu werden, kann seine Ausgabe in einem anderen Teil überall wie andere Komponenten sein, ein Modal erfüllen, es kann ein Vorteil sein, dies innerhalb des Stammindexes oder der HTML-Datei zu platzieren. Wenn wir in den Öffentlichen Ordner gehen, ist dies innerhalb von hier enthalten. Diese Indexseite hat unseren Haupt-App-Container, hier wird der Rest Ihrer Anwendung injiziert. Wie wir gerade erwähnt haben, können wir unser Formular auf jede dieser verschachtelten Komponenten teleportieren. Oder alternativ könnten wir dies dem Körperteil hinzufügen oder sogar teleportieren ist ganz verschiedene Elemente. Ich hatte ein anderes div mit der ID von modal. Wir könnten diesen Formularcode und Orte innerhalb dieses div-Abschnitts teleportieren, was bedeutet, ist völlig unabhängig vom Rest der verschachtelten Struktur. Dies würde dazu führen, dass unsere Form oder jeder andere Abschnitt, den wir wollten dass der Teleport eine linke Wrapper hat und auch umgebenden Code zu behandeln, und auch ein weiterer Vorteil, der mit Formularen zusammenhängt. Wenn Sie wissen, was die Ereignispropagierung ist, sollten Sie dies auch entfernen, da es jetzt keinen elementaren Durchgang hat. Wir haben jetzt dieses Element auch zu mounten, aber wie fügen wir das tatsächlich zu dem Abschnitt hinzu? Nun, um das zu tun, werden wir unsere Formular-Abteilung ausschneiden. Dann verschachteln Sie dies innerhalb der Teleport-Tags. Im öffnenden Teleport-Tag können wir dann zwei Attribute übergeben, die zu unseren Elementen verlinken wird. Dies ist genau so, wenn wir einen Abfrage-Selektor verwenden oder wenn wir ein Element mit CSS auswählen, was bedeutet, dass wir die harte für eine ID verwenden, und dies ist die ID von modal. Speichern Sie dies und jetzt über den Browser, denken Sie daran, bevor wir den Teleport auf dem Formular hinzugefügt, wurde ganz oben im Browser erscheinen. Wenn wir nun aktualisieren und nach unten scrollen, wird dieses Formular jetzt am Ende unseres Projekts platziert, was bedeutet, dass unser Teleport wirksam wird. Dies wird letztendlich ein Pop-up-Formular sein, also brauchen wir jetzt eine Dateneigenschaft. Wir können dies ein- und ausschalten, um den Datenabschnitt, sagt Gehorchen Dateneigenschaft, die ein boolescher Wert namens ShowForm sein wird. Dies wird auch eine Schaltfläche in unserer Vorlage benötigen, und wir können dies innerhalb unserer Optionen Wrapper hinzufügen, so dass kurz nach der ersten Schaltfläche werden wir eine zweite Schaltfläche hinzufügen, aber unser CSS, können wir die Klasse von AddNew hinzufügen. Dies wird auch für einen Klick zu hören. Genau wie oben, wenn wir die Dateneigenschaft umgeschaltet haben, tun wir genau das gleiche für ShowForm, und zwischen dem unteren Teil fügen wir auch eine HTML-Entität hinzu, die das Plus-Symbol sein wird. Das Plussymbol besteht aus dem kaufmännischen Und-Zeichen, dem Hash 43 und einem Semikolon. Dann schließlich werden wir dieses Formular ein- und ausblenden, basierend darauf, ob diese ShowForm-Dateneigenschaft als wahr oder falsch bezeichnet wird. Wir können dies mit v-if tun. Speichern Sie das, und jetzt können wir das im Browser testen. Sie haben das Plus-Symbol, klicken Sie darauf, siehe Neue Ereignisse hinzufügen, klicken Sie erneut darauf, und dies wurde jetzt entfernt. Dieser Effekt wird auch klarer sein, wenn wir die Browser-Entwickler-Tools öffnen und den Körperbereich öffnen. Jetzt können wir hier das div mit der ID der App und auch das div mit der ID von modal sehen . Dies waren die beiden Abschnitte, die wir innerhalb unserer Index-Seite haben. Nun, wenn wir das Modal öffnen, sehen wir die Form innerhalb verschachtelt. Wenn wir jedoch die Liste umschalten, indem wir auf eine Schaltfläche klicken, reagiert dies nun auf unseren wahren oder falschen Zustand. Es ist auch viele andere Anwendungen für Teleport wie Anzeige von Nachrichten an den Benutzer, Tooltips, oder einfach einfach nur Platzieren von Inhalten an anderen Orten, so dass wir nicht durch unsere aktuelle Komponente eingeschränkt. Im kommenden Abschnitt werden wir dieses Formular verwenden, das wir gerade zu beiden Bearbeitungen hinzugefügt haben und auch neue Ereignisse hinzufügt. 42. Abschnittseinleitung – Formulare, Events und Modifier: Diese kommenden Videos werden sich auf einen wirklich wichtigen Teil von konzentrieren, nicht nur Vue.js, sondern Web-Entwicklung im Allgemeinen, und dies ist der Umgang mit Formularen. Wir werfen einen Blick auf viele Dinge wie das Ausgeben von Daten, Backup auf eine übergeordnete Komponente, Validierung aller Formulare, Bindung unserer Daten mit Vue.js, und auch einige andere Dinge wie Ereignispropagierung und wie wir umgehen können dies mit Modifikatoren. 43. Unsere Formularkomponenten: Da Vue.js diese Idee hat, Vorlagen in unseren einzelnen Dateikomponenten zu erstellen, ist das Erstellen eines Formulars im Allgemeinen das gleiche wie bei normalem HTML. Wir benötigen ein Formular, das es uns ermöglicht, sowohl ein neues Ereignis als auch bestehende Ereignisse zu bearbeiten. Wir könnten entweder zwei Formen davon erstellen, oder beide dieser Operationen können die gleichen Formularkomponenten verwenden, wenn wir wollten. Lassen Sie uns zunächst eine Komponente erstellen. Also öffne ich den Quellordner in die Komponenten, und dann wird unsere neue Datei AddUpdateForm genannt; wieder mit der.vue Erweiterung. Jetzt können wir auf die App.vue gehen und dann können wir diese Datei registrieren, so dass wir sie anstelle dieser Form verwenden können, die wir innerhalb des Skripts erstellt haben. Unter unserem Objekt können wir einen neuen Import erstellen, aber dieses Mal wird unser Import unser AdduUpdateForm importieren. Genau wie das obige Ereignis ist./ Komponenten. Dann, wenn wir in diese gehen, haben wir die AddUpdateForm. Vergessen Sie nicht, dies auch innerhalb der Komponenten zu registrieren. Dann bis zum Teleport ganz oben in unserer Vorlage, also werden wir diesen Formularabschnitt ersetzen. Denken Sie daran, dass dies den v-if-Abschnitt hat, so können wir diese Komponenten auf ein ausschalten. Wir müssen dies auch zu unserer neuen Komponente bringen, also werde ich alle Komponenten innerhalb des Modals platzieren, das auch die v-if bedingten Anweisungen der show Form enthalten wird. Mit diesem jetzt an Ort und Stelle, brauchen wir nicht mehr diesen Formularabschnitt knapp oben. Wir fügen alle Formulareingaben innerhalb unserer neuen Komponenten hinzu. Dann können wir wie gewohnt mit der Vorlage für unser HTML beginnen und es dann innerhalb eines div-Abschnitts verschachteln, der die Klasse von form_ wrapper haben wird. Dann können wir unser Formular platzieren und darin verschachteln. Der Grund, warum wir diesen form_ Wrapper um unser Formular herum haben , ist, weil er uns später helfen wird, wenn wir dieses Modal stylen. Wir werden diesen Form-Rapper als dunkleren Hintergrund haben, so dass er den Rest des Inhalts abdeckt, wenn dieses Modal aktiv ist. Dann wird dieser Formularabschnitt einen helleren Hintergrund haben, so dass dies dieses div überlagert. Der erste Abschnitt wird in einem div umgeben sein, und dies wird für unsere Formulareingabe des Namens sein. Dies wird der Name des Ereignisses wie Graduierung sein. Zunächst einmal das Etikett, das für den Namensabschnitt sein wird, und dies wird die Bezeichnung des Namens haben. Die Eingabe, die Art des Textes. Die ID dafür wird Name sein, der mit unseren vier Attributen übereinstimmt. Der nächste, wenn wir unser Objekt auschecken, wird dieses für die Details sein und wir brauchen eine für das Datum und dann eine für die Hintergrundfarbe. Lassen Sie uns diesen div-Abschnitt kopieren, da dieser nächste auch die Eingabe mit dem Typ des Textes sein wird, aber dieses Mal wird dies für die Details sein; das Label auch von Details und auch die passende ID. Auf dem Browser können wir überprüfen, dass dies funktioniert, indem wir auf unsere Schaltfläche klicken und nach unten scrollen, und wir haben unsere beiden Formulareingaben. Der nächste direkt darunter wird für unseren Datumsdienst sein, wir werden die Eingabe mit der Art des Datums haben. Dies gibt uns eine Datumsauswahl, um das Datum der Veranstaltung auszuwählen. Dieses Etikett ist auch Datum, und auch der Text für das Etikett. Jetzt bleibt dies nur die Hintergrundfarbe, und dafür haben wir sechs verschiedene Optionen für unsere sechs Beispiel-Events. Ich werde die gleichen sechs Farben verwenden, die wir im Inneren von hier verwendet haben. Um zwischen einem dieser zu wählen, werden wir eine ausgewählte Eingabe verwenden. Dies wird auch einen div Wrapper haben, um das Styling konsistent zu halten, auch das Label für den Hintergrund. Aber dieses Mal wird dies die HTML-Select-Eingaben haben. Select hat eine Öffnung und ein schließendes Tag, so dass wir alle Optionen hinzufügen können , die wir dazwischen auswählen müssen. Es ist ID ist so viel ist das Label des Hintergrunds, und dann haben wir unsere sechs verschiedenen Optionen, die wir einschließen werden und der erste Wert ist die Hex-Farbe von F34949. Dies ist für unsere rote Option. Die zweite Option war für unsere rosa Farbe und dies hat den Hex-Wert von F07949 und den Text von Rosa. Die dritte Option wird für den violetten Wert sein, der die Hex-Farbe 997AF0 hat. Für das Blau ist dies 7AD3F0. Als nächstes fügen wir eine grüne Option hinzu, und die grüne Farbe, die ich verwenden werde, ist 68EE94. Die Option für die gelbe, dies wird ein Wert von F9F970 sein. Schließlich fügen wir auch eine Option für die orange Farbe hinzu, und dieser Hex-Wert wird EB980F sein; jeder Text von Orange. Dies sind jetzt alle Optionen, die wir brauchen, und um das gesamte Formular abzuschließen , legen wir einfach ein div am unteren Rand mit der Schaltfläche, so dass wir ein neues Ereignis hinzufügen können. Aber jetzt wird diese Schaltfläche nichts tun, wir werden nur den Text hinzufügen. Wir können zum Browser gehen und überprüfen, dass alles funktioniert, also werde ich dies einschalten. Wir haben unsere Texteingaben, die Datumsauswahl, damit wir ein Datum für das Ereignis auswählen können. Ich habe die Select Option mit all unseren verschiedenen Farbwerten und schließlich die Schaltfläche am unteren Rand. Sehr bald werden wir einen Blick darauf werfen, wie wir die Werte aus dieser Formulareingabe extrahieren und diese in unsere Daten einfügen können . Aber als nächstes werden wir zu diesem Formular zurückkommen und etwas Styling hinzufügen, und es in ein Popup-Modal verwandeln. 44. Stylen und Positionieren des modalen Formulars: Wie frühere im letzten Video erstellt, braucht jetzt etwas Stil in nicht nur machen es ein bisschen schöner, sondern auch machen diese Overlay alle Rest des Inhalts. Denken Sie daran, im letzten Video, Wir haben dieses Formular erstellt. Wir haben dieses div auch als Wrapper hinzugefügt. Dies wird es uns ermöglichen, einen modalen Effekt zu erzeugen und dieser Wrapper wird die volle Höhe auf der vollen Breite der Seite dehnen. Es wird eine dunklere Hintergrundfarbe haben, die uns den Effekt eines Auftauchens über den Rest des Inhalts geben wird. Und dann oben auf diesem dunklen Abschnitt, werden wir dann unsere Form einbetten, die in der Seite zentriert sein wird und auch eine hellere Hintergrundfarbe haben, um es hervorzuheben. Um dies unten unten zu tun, werden wir gehen blasen unsere Vorlage, erstellen Sie unseren Stil Abschnitt. Es kann auch auf die Stile beschränkt werden, die nur auf diese bestimmte Komponente angewendet werden. Also zuerst werden wir den Form Wrapper anvisieren , der unser ganzes Formular umgibt, und wir geben ihm diese dunklere Hintergrundfarbe. Also, um es diese dunklere Hintergrundfarbe zu geben, waren dabei, einen RGBA-Wert hinzuzufügen. Dies wird uns zunächst erlauben, die dunkle Farbe von 000 zu schaffen. Und dann wird der vierte Kanal, der das Alpha ist, der das Alpha ist,uns erlauben, den Opazitätswert von 0,7 hinzuzufügen, dies ist ähnlich wie 70 Prozent Kapazität. Und das wird sicherstellen, dass unser Hintergrund etwas transparent sein wird. Jetzt wird dies eine dunklere Hintergrundfarbe sein, aber wir können den Inhalt immer noch im Hintergrund sehen. Als nächstes werden wir einige Positionierung vornehmen, damit wir das so auslegen können , dass es die volle Breite und die volle Höhe der Seite ist. Zuerst werden wir dies aus dem Fluss des restlichen Inhalts ziehen , indem wir sicherlich Positionswert absolut sein. Dann können wir die vier Werte von oben, rechts, unten und links verwenden , was unsere Formularkomponenten auf die vier Seiten der Seite dehnen wird. Wir können dies mit dem oberen Wert von Null, dem rechten Wert von Null, und dann auch das gleiche für den unteren und auch die linke tun. Wenn wir nun hinüber gehen und unser Modell öffnen, sehen wir, dass die dunklere Hintergrundfarbe eingestellt wurde, aber sie ist leicht transparent. Dies erstreckt sich auch auf alle vier Seiten des Browsers. Derzeit sind alle Formulare in der oberen linken Ecke platziert. Um dies in die Mitte der Seite zu verschieben, werden wir die CSS-Flexbox verwenden. Also beginnen wir mit dem Anzeigetyp von Flex, und dann können wir den Inhalt für die Ausrichtung in der Mitte einstellen, was uns die Ausrichtung über die Seite gibt. Jetzt können wir die vertikale Ausrichtung mit ausrichten Elemente einstellen. Dies ist jetzt wie mit dem Formular Wrapper und jetzt können wir nach unten gehen, um den tatsächlichen Formularabschnitt zu stylen. Um dies herausragend zu machen, geben wir diesem eine weiße Hintergrundfarbe. Und machen Sie dies auch ein bisschen breiter und auch größer. Daher legen wir die minimale Breite 60 Prozent der Ansichtsfensterbreite mit 60 vw fest. Dann auch die minimale Höhe von 40 Prozent der Höhe des Ansichtsfensters. Einige Polsterung, um etwas Leerzeichen in, innerhalb des Formulars hinzuzufügen . Gehen wir vorwärts nach Rems und runden dann die Ecken mit einem gewissen Grenzradius ab. Gut. Das geht jetzt irgendwo hin. Als nächstes gehen wir zu jeder dieser Formulareingaben. Denken Sie daran, von oben, als wir eine dieser Eingaben erstellt haben, sie waren alle in einem div-Abschnitt umgeben. Also wählen wir zuerst unser Formular aus und dann werden wir jedes div anvisieren, das sofort folgt. Diese haben den Anzeigetyp Flex. Wenn sie also vertikal gestapelt sind, haben sie die Flexrichtung von Spaltenräumen. Wir können einen gewissen Rand auf der Ober- und Unterseite eines Rem anwenden und den Wert der Marge auf der linken und rechten Seite bei Null halten. Als nächstes wird die Schriftgröße von 1.6 Rems und dann weiter innerhalb dieses Formularabschnitts bewegt, wenn wir in unsere divs gehen, werden wir dann den Eingabestil innerhalb von hier haben. Gehen wir also zum Ende unseres Style-Abschnitts. Wir werden den gesamten Formularabschnitt und jede Eingabe, die sich im Inneren befindet, anvisieren. Lassen Sie uns zunächst einen gewissen Rand auf die obere und untere Seite dieser Eingaben hinzufügen, die diese aus dem Label 0.6 Rems oben und unten und Null auf der linken und rechten. Also ich bin Padding Wert wieder, 0,6 Rems oben und unten. Dann ein Rem auf der linken und rechten Seite. Der Wert eines Rem auf der linken und rechten Seite, wird uns einige Abstände geben, wenn wir in die Eingabe eingeben. Dies ist der Abstand, den wir auf der linken Seite sehen. Die Grenzen für unsere Formulareingaben setzen wir sie auf ein Pixel, wie grau und eine durchgezogene Linie. Um mit dem äußeren Formular Wrapper übereinzustimmen. Wir setzen auch den Grenzradius auf 0,3 Rems ein. Dies gilt für unsere Freiformeingaben. Um dies auch konsistent zu halten, können wir dies auch auf unsere ausgewählte Eingabe anwenden, und wir werden dies tun, indem wir es für denselben Abschnitt hinzufügen, getrennt durch ein Komma. Schließlich haben wir die Formularschaltfläche am unteren Rand. Also zuerst die Hintergrundfarbe, die RGB sein wird, und der rote Wert von eins, zwei, drei, der grüne Wert von eins, neun vier und der blaue Wert von eins, zwei, drei. Die Breite, ich werde dies auf 100 Pixel einstellen. Entfernen Sie den Rahmen, fügen Sie mit dem Auffüllen von 0,6 Rems einen inneren Raum hinzu, ein passender Grenzradius von 0,3. Schließlich legen wir auch die Schriftgröße auf 16 Pixel fest. Lassen Sie uns auch die schwarze Farbe OC für das Etikett abfärben, und wir können dies nur unten und die Hintergrundfarbe dafür tun. Also die Textfarbe, lassen Sie uns mit einer schwarzen Farbe beginnen und dann können wir eine hellere Farbe auswählen , indem Sie den Mauszeiger über diese und wählen Sie einen erleuchteten Wert aus der Farbauswahl. Sobald Sie eine Farbe haben, mit der Sie zufrieden sind, geben Sie dieser Datei ein Speichern. Jetzt, wenn wir zum Browser gehen, ist unser Styling jetzt abgeschlossen. Sie können auch damit spielen, wenn Sie möchten und das Styling des Layouts ändern. Das ist auch ganz in Ordnung. Aber eine Sache ist hier zu beachten, wenn wir versuchen jetzt auf diese Umschaltfläche ganz oben zu klicken, wird unser Formular jetzt nicht geschlossen. Dies geschieht, weil unser Modal, oder insbesondere unser Modal Wrapper , den wir gerade hier haben, jetzt aufgegriffen wird oder die volle Breite und Höhe der Seite bedeckt, die nun den Rest des Inhalts verdeckt. Um dies zu beheben, fügen wir als nächstes eine geschlossene Schaltfläche innerhalb des Modals hinzu und schauen Sie sich an, wie wir dies mit benutzerdefinierten Ereignissen tun können. 45. Benutzerdefinierte Events aussenden: Wir haben jetzt ein Formular, aber dieses Formular bleibt offen, bis wir die Seite aktualisieren , da wir keinen Zugriff mehr auf diese Umschaltfläche hinter diesem Modal haben. Der Fix dies, wir werden ein kleines Kreuz in der oberen Ecke unseres Modals hinzufügen , auf das wir klicken, um dies zu schließen. Wir werden dies innerhalb unserer AddUpdateForm nur innerhalb dieses öffnenden Formularelements tun. Also lassen Sie uns eine Spanne hinzufügen, dies wird eine Klasse von close zusammen mit einer HTML-Entität haben, die das kaufmännische Und-Zeichen, ein Hash 10060 und ein Semikolon ist. Dies wird uns ein rotes Kreuz geben, das wir jetzt hinuntergehen und etwas Styling hinzufügen können. Das erste, was zu tun ist, ist dieses Formular, das der direkte Wrapper ist, wir werden dies setzen, um die Flex-Box zu verwenden , so dass wir dies oben rechts ausrichten können, bis zum Formularabschnitt, wir können den Anzeigetyp auf Flex sein, und dann so alle Elemente übereinander gestapelt sind, können wir die Flex-Richtung, die Spalte ändern. Da der Wrapper nun die Flex-Box verwendet, können wir diesen Schließknopf nun mit align-self steuern. Lasst uns das ganz oben machen. Diese Schaltfläche haben die Klasse der schließen. Align-self wird dieses einzelne Element direkt nach rechts schieben , wenn wir den Wert auf Flex-End setzen. Der Benutzer weiß also, dass dies anklickbar ist, können wir den Cursor auch als Zeiger festlegen. Das verlässt unser Kreuz jetzt genau dort, wo wir es haben wollen. Dieses Kreuz ist jetzt an Ort und Stelle, aber das lässt uns jetzt auch etwas, das wir lösen müssen. Dieses Kreuz wird innerhalb unserer AddUpdateForm-Komponente platziert, aber dies wird von unserer übergeordneten App.vue Komponente umgeschaltet. Im Moment ist unsere App genau so strukturiert. Wir haben die App.vue, die unsere AddUpdateForm hat, und auch die Ereigniskomponenten im Inneren verschachtelt. Von dieser App.vue haben wir eine Schaltfläche, die dieses Formular umschaltet, um es als unser Pop-up-Modal anzuzeigen und auszublenden. Dies funktioniert, weil ShowForm sich auch innerhalb der App.vue und dies verwendet wird, um die Formularkomponente ein- und auszublenden. Aber was ist mit diesem Kreuz, das wir gerade hinzugefügt haben? Dies wird innerhalb der Komponente platziert, aber die ShowForm Datumseigenschaft, die wir ändern müssen, befindet sich im übergeordneten App.vue. Wir wissen bereits, wie Daten von einer übergeordneten Komponente an ein untergeordnetes Element mithilfe von Requisiten weitergegeben werden können. Was ist mit andersherum? Wir möchten die ShowForm-Daten auf false ändern, aber dieses Mal, von der AddUpdateForm-Komponente. Um dies zu tun, können wir ein benutzerdefiniertes Ereignis vom Kind bis zur Komponente des übergeordneten Elements ausgeben. Zurück in der App.vue, wusste wissen, wie man ein reguläres Ereignis wie ein Keep oder ein Click-Ereignis verwendet. Wir verwenden klicken, um das Formular mit v-if umzuschalten. Neben diesen regulären Elementen können wir auch ein eigenes Custom Event erstellen. Genau wie hier in unserer AddUpdateForm-Komponente, statt eines Klicks auf unsere eigenen Ereignisse, hören wir statt eines Klicks auf unsere eigenen Ereignisse,die als close-form bezeichnet werden. Für diese Ereignisnamen wird empfohlen, Kleinbuchstaben zu verwenden, die durch einen Bindestrich getrennt sind. Da dieses Ereignis an die untergeordnete Komponente übergeben wird, ist es innerhalb dieses untergeordneten Elements, wo wir es nennen werden. Zuerst fügen wir die Liste der Ereignisse zu einem Emits-Array hinzu. Dies ist neu in Vue 3, wir haben sie nicht zuvor in Version 2 deklariert. Das [unhörbare] ist so besonders neben unseren Requisiten, ermöglicht es uns, leicht zu sehen, welche Daten in die Komponente kommen und welche Daten dann wieder an die Komponente abgegeben werden. Innerhalb der Vorlage ordnen wir unser rotes Kreuz mit der Spanne an. Wenn wir darauf klicken, lösen wir unser benutzerdefiniertes Ereignis mit Dollar-Symbol emittieren aus, das ShowForm auf false gesetzt wird. Daher verstecken wir unser Formular zurück in unserer Anwendung. Das ist genau das, was wir jetzt tun werden. Beginnend in der App.vue gehen wir zum Template-Abschnitt, wo wir unser benutzerdefiniertes Ereignis einrichten können, übergeben Sie dies an unser AdduUpdateForm. Wie wir gerade gesehen haben, wird dieses Ereignis als „Nahform“ bezeichnet werden. Wenn dies ausgelöst wird, werden wir ShowForm auf false setzen. Dies wird an AddUpdateForm weitergegeben, so dass wir hier hineingehen, und dann können wir dies zu einem Emit-Array hinzufügen. Wir haben derzeit keinen Skriptabschnitt, so dass wir das jetzt erstellen können, stellen sicher, dass auch der Exportstandard hinzugefügt wird, und wir übergeben dies innerhalb eines Arrays. Es sollte uns nun Zugriff auf unsere benutzerdefinierte Ereignisschleife innerhalb der Vorlage geben. Die Spanne, die wir gerade für unser Kreuz hinzugefügt haben, führt dann Code aus, wenn der Benutzer auf diese Schaltfläche klickt, und der Code, den Sie ausführen möchten, ist dieses Emit-Ereignis. Wir können darauf zugreifen mit diesem Punkt-Dollar-Symbol emittieren, dann übergeben Sie den Namen unserer Veranstaltung, die in der Nähe ist. Dieses Dollar-Symbol-Präfix bedeutet, dass es eine Vue JS integrierte Methoden der Eigenschaften ist, und wir werden mehr von diesen während des Kurses sehen. Speichern Sie diese Datei und über im Browser, das ist aktualisieren, öffnen Sie unser Formular, klicken Sie auf das Kreuz, und dies wird jetzt unser benutzerdefiniertes Ereignis in der übergeordneten Komponente auslösen. 46. Formulareingaben einbinden: Wir haben auch mehr benutzerdefinierte Ereignisse zu emittieren, wie das Hinzufügen neuer Einträge zu unserem Array, Bearbeiten vorhandener Ereignisse und auch das Entfernen dieser Ereignisse. Bevor wir unsere Ereignisse hinzufügen und bearbeiten können, benötigen wir eine Möglichkeit, zu erfassen, was der Benutzer in all diesen Formularfeldern eingibt. Eine Ansicht gibt uns eine Direktive dafür, die V-Modell genannt wird. Dies bedeutet, dass wir eine Dateneigenschaft einrichten können , die alle Werte enthält, die der Benutzer eingibt, wie diesen Namen. Um dies zu tun, gehen wir zu AddUpdate-Formular und dann in unseren Skript-Abschnitt. Wir brauchen eine Dateneigenschaft, die alle diese Werte enthält, die der Benutzer eingibt. Beginnen wir zunächst mit dem Namen, den wir zunächst auf eine leere Zeichenfolge setzen können. Um dies in Aktion zu sehen, können wir auch diesen Namen ausgeben, Schleife innerhalb der Vorlage. Nun, um den Wert zu greifen, der in unsere Namenseingabe hinzugefügt wurde und diesen innerhalb unserer Dateneigenschaft zu speichern, werden wir die Direktive hinzufügen, die wir gerade erwähnt haben, die V-Modell ist, und dann weisen wir dies unserem Namen und Dateneigenschaft zu. Wir können das jetzt loslegen, wenn wir das Formular öffnen und irgendetwas drinnen eingeben. Wie wir innerhalb dieses Feldes eingeben, können wir sehen, dass dieser Wert in unserer Vorlage aktualisiert wird. Das Gute an v-model ist, dass es auch eine bidirektionale Datenbindung einrichtet. Dies bedeutet, dass die Eingabe nicht nur unsere Dateneigenschaft aktualisiert , sondern auch umgekehrt funktioniert. Es fügt zu unserem Namensabschnitt hinzu, anstatt eine leere Zeichenfolge zu übergeben. Wenn dies einen Anfangswert wie diesen hatte, können wir diesen und über in den Browser speichern. Jetzt in unserer Form akzeptiert dies nun den Anfangswert, der von unserer Dateneigenschaft übergeben wird , und dieser kann auch aktualisiert werden. Diese Idee wird bald nützlicher, wenn wir auch dieses Formular verwenden, um die bestehenden Ereignisse zu bearbeiten. Es kann alle aktuellen Ereignisdaten nehmen und dann kann der Benutzer mit diesem Formular aktualisieren. Auch wenn wir reguläre HTML verwenden, haben wir einige verschiedene Möglichkeiten, um die Anfangswerte zu setzen. Zum Beispiel, wenn wir zum Detailbereich für unsere Texteingabe gehen, könnten wir den Anfangswert so einstellen, dass alles, was Sie übergeben und wir können dies nur hier sehen. Dies ist eine Möglichkeit, den Anfangswert mit textbasierten Eingaben oder Kontrollkästchen zu setzen, wir haben die aktivierten Attribute und wir können für ausgewählte Eingaben ausgewählt verwenden. Wenn Sie jedoch Vue.js verwenden, werden alle diese Anfangswerte ignoriert und wir sollten stattdessen v-model für den Anfangswert verwenden, wenn wir einen bereitstellen möchten. Moment konzentrieren wir uns jedoch darauf, neue Ereignisse hinzuzufügen. Dazu müssen wir anstelle unseres Namens ein Ereignisobjekt einrichten. Anstatt alle diese einzeln zu setzen, werden wir diese in ein Ereignisobjekt gruppieren, dies kann auch innerhalb unserer Ausgabe ersetzt werden. Auch unser V-Modell wird nun der event.name sein. Lassen Sie uns das auch kopieren und wir können dies in jedem unserer Eingaben hinzufügen. Die Eingabe für unsere Details ist event.details, das Datum und dann auch der Hintergrund. Dies wird innerhalb des select Wrapper hinzugefügt und dieser ist event.background. Lassen Sie uns das jetzt sehen, wir sollten ein Objekt sehen, wie wir in jedes unserer Felder eingeben. Der Name, die Details, das Datum und auch die Hintergrundfarbe werden unser Ereignisobjekt aktualisieren, wodurch wir alle Informationen erhalten, die wir benötigen, um ein neues Ereignis zu erstellen. 47. Daten mit einem benutzerdefinierten Event aussenden: Wir haben nun die Formulardaten des Benutzers erfasst und diese innerhalb dieser Dateneigenschaft gespeichert. Nun werden wir diese Daten verwenden, um ein neues Ereignis zu unserem Array hinzuzufügen. Derzeit befinden sich diese neuen Ereignisdaten in der AddUpdateForm-Komponente. Das eigentliche Ereignisarray befindet sich jedoch innerhalb dieses übergeordneten Elements, App.vue, was bedeutet, dass wir eine benutzerdefinierte Ereignissicherung aus unserem Formular ausgeben müssen. Lassen Sie uns das so einrichten, wie wir zuvor in der App.vue nachgeschaut haben. Lassen Sie uns zum AddUpdateForm gehen. Innerhalb von hier können wir ein neues Attribut hinzufügen, das für unsere benutzerdefinierten Ereignisse sein wird. Diese benutzerdefinierten Ereignisse können wir diesen beliebigen Namen geben, den Sie wollen. Meines wird ein neues Ereignis hinzufügen. Gerade als wir dieses geschlossene Ereignis hinzugefügt haben, setzen wir diese ShowForm-Daten direkt auf false. Das ist sehr einfach, aber unser Add new Event wird noch ein paar Schritte haben. Anstatt diese Vorlage zu blähen, können wir stattdessen eine Methode übergeben. Diese Methode muss dann in unserem Skript-Abschnitt festgelegt werden. Lassen Sie uns durch unsere Methodenabschnitt gehen. Ganz oben können wir in unserer Add-Methode platzieren. Dies wird dafür verantwortlich sein, zu unserem Event-Array zu drängen. Bevor wir jedoch weiter gehen, machen wir einen Schritt zurück und denken darüber nach, was wir tun wollen. Die Aufgabe dieser Methode besteht darin, unserem Array ein neues Ereignis hinzuzufügen aber wie greifen Sie auf diese neuen Ereignisdaten zu, die Sie verschieben möchten? Nun, dies kann übergeben werden, wenn wir das benutzerdefinierte Ereignis in unserem AddUpdateForm auslösen. Erstens, genau wie wir es mit geschlossener Form getan haben, müssen wir dies hinzufügen, um Array zu emittieren. Wir werden dies dann ausgeben, wenn auf die Schaltfläche Hinzufügen geklickt wird. Dies ist die Schaltfläche, die Sie gerade hier sehen, und dies wird unsere benutzerdefinierten Ereignisse in die Schaltfläche auslösen. Wenn Sie darauf klicken, wird dies unsere benutzerdefinierten Ereignisse ausgeben , die wir als ersten Parameter übergeben, und dies wurde neue Ereignisse hinzufügen. Der Unterschied diesmal, wenn wir ein Ereignis namens Close-Form emittierten, hatte dies keine Daten, die wir übergeben mussten. Wir können auch dieses Schlüsselwort entfernen, dies ist in unserer Vorlage nicht erforderlich. Aber als zweites Argument werden wir die tatsächlichen Daten übergeben, die die Ereignisse sind. Wir könnten dies auch extrahieren und eine Methode platzieren, die innerhalb von hier aufgerufen wird, wenn wir wollten, aber das ist für den Moment ziemlich einfach. Da wir jetzt diese Informationen neben unserem benutzerdefinierten Ereignis übergeben, wieder über in der App.vue, können wir diese Informationen jetzt mit einer speziellen Variablen namens Dollar-Symbol-Ereignis erhalten. Nur um auch hier klar zu sein, wird dies immer als Dollar-Symbol-Ereignis bezeichnet. Wir haben dieses Ereignis nicht nur genannt, da wir einige Event-Informationen übergeben. Wenn wir einen Benutzer hätten, der übergeben wird, würde dies immer noch als Dollar-Symbol-Ereignis bezeichnet werden. Nun, dies wird in unsere Add-Methode übergeben, es ist jetzt in unserer Methode unten verfügbar. Wir erhalten das genau so, wie wir es normalerweise mit jedem Event tun würden, also können wir diesem einen beliebigen Namen geben, den wir wollen. Wir können testen, ob dies mit einem Konsolenprotokoll funktioniert, und überprüfen, dass wir die Ereignisinformationen aus unserem Formular erhalten. Um dies zu testen, müssen wir aktualisieren und in die Entwicklertools gehen, öffnen Sie die Konsole und dann können wir versuchen, ein neues Ereignis hinzuzufügen. Es spielt keine Rolle, welche Daten wir jetzt setzen, dies können beliebige Werte sein, klicken Sie auf „Hinzufügen“. Was gerade dort passiert ist, sehen wir nichts in der Konsole, und jetzt werden alle Formulare geschlossen. Nun, wenn wir einen genaueren Blick auf diesen Aktualisierungspfeil werfen nur hier, können wir das neue Formularereignis hinzufügen. Sehen Sie, wie dieser Pfeil verschwindet, wenn wir auf „Hinzufügen“ klicken Dies aktualisiert jetzt die Seite und löscht auch unsere Konsole. Dies geschieht, weil das Standardverhalten des Browsers darin besteht, beim Absenden eines Formulars zu aktualisieren. Wenn Sie zuvor darauf gestoßen sind und mit anderen Bibliotheken gearbeitet haben oder mit JavaScript arbeiten, haben Sie möglicherweise bereits etwas wie event.preventDefault innerhalb der Methode geschrieben. Aber Vue bietet auch eine Verknüpfung dafür, und dies ist, um einen Ereignismodifikator hinzuzufügen, den wir hinzufügen können, wenn [unhörbar] in unserer Form verwenden, wenn wir auf diese Schaltfläche klicken. Zurück zu AdduUpdateForm, hier verwenden wir die V auf Syntax, und dann können wir auch dot verhindern. Dieser Ereignismodifikator sollte nun das Standardverhalten verhindern. Gehen wir zurück zum Browser und testen Sie das aus. Öffnen Sie die Dev-Tools, klicken Sie auf „Hinzufügen“, was uns dann unser Konsolenprotokoll mit allen Formulardaten gibt. Wir können jetzt diese Daten verwenden, um einen neuen Eintrag in unser Array zu verschieben, aber eine Sache, die wir auch tun müssen, ist, eine ID hinzuzufügen. Derzeit haben wir den Namen, Details, Daten und Hintergründe, aber denken Sie daran, dass jedes dieser Ereignisse auch eine eindeutige ID benötigt. Wenn Sie diesen Eintrag in einer Datenbank speichern, würden wir oft eine eindeutige ID aus der Datenbank erhalten, die wir dann verwenden könnten. Aber der Einfachheit halber werde ich diese einfach in der Reihenfolge nummerieren, genau wie wir es mit unseren Beispieldaten haben. Um dies zu tun, können wir eine neue Eigenschaft zu unserem Ereignisobjekt namens ID hinzufügen, und dann müssen wir auch herausfinden, wie viele Ereignisse sich derzeit innerhalb unseres Arrays befindet, und fügen Sie dann eine Zahl am Ende hinzu. Wenn Sie derzeit sechs Ereignisse haben, wird die nächste, die wir hinzufügen, Nummer sieben, Nummer acht usw. sein . Zuerst können wir die Länge unseres aktuellen Arrays mit this.events.length erfassen und dann diese ID auf eine zusätzliche setzen. Als nächstes werden wir auf unsere Ereignisse zugreifen und dann die JavaScript-Push-Methode aufrufen, die unsere neuen Ereignisse bis zum Ende dieses Arrays schiebt. Dann können wir endlich unser Formular schließen. Lasst uns das mal ausprobieren. Klicken Sie auf „Hinzufügen“, es gibt eine, die wir gerade hinzugefügt haben. Versuchen wir es noch mal. Wir gehen für die andere Farbe dieses Mal und überprüfen, dass alles in Ordnung ist, fügen Sie dies hinzu. Nun werden nun zwei Ereignisse im Browser angezeigt. 48. Mehrere Events aussenden: Wir sind nicht darauf beschränkt, sie nur in einem einzigen Ereignis aus unseren Komponenten zu emittieren. Wir können so viele aussenden, wie wir wollen. Oben im Add-Update-Formular, unten im Emit-Abschnitt, werden wir Zugriff auf mehrere benutzerdefinierte Ereignisse haben, und wir können sie gleichzeitig verwenden. beispielsweise in der Update-Ansicht Wenn wirbeispielsweise in der Update-Ansichtdieses neue Ereignis nur hier hinzufügen, anstatt das Formular mit dieser Methode zu schließen, könnten wir stattdessen das benutzerdefinierte Ereignis in geschlossener Form verwenden. Um dies zu tun, müssen wir nur zu unserer Vorlage gehen, und dann müssen wir nur ein Komma hinzufügen und unser zweites benutzerdefiniertes Ereignis übergeben. Wenn wir mehrere Ereignisse wie diese verwenden würden, kann es auch sauberer sein, diese aus der Vorlage zu extrahieren und sie in separate Methoden zu verschieben. Denken Sie daran, dass wir dieses Punkt-Show-Formular auskommentiert haben. Also, jetzt, wenn dies das Formular schließt, nachdem wir senden, würde jetzt wissen, dass dies mehrere benutzerdefinierte Ereignisse emittiert. Auch hier spielt die Ereignisinformationen eine Rolle, wir können beliebige Daten hinzufügen. Klicken Sie auf „Hinzufügen“. Die Veranstaltung zeigt sich jetzt, und auch unser Formular wurde geschlossen, aber dieses Mal, von unseren benutzerdefinierten Ereignissen. 49. Modifikatoren: In unserem Formular haben wir Modifikatoren etwas früher berührt, wenn wir das Schlüsselwort „prevent“ verwenden, das das Standardverhalten des Browsers verhindert, das beim Absenden eines Formulars aktualisiert wird. Es gibt auch andere Modifikatoren, die wir während des Kurses zusammen mit den Key-Modifikatoren sehen werden. Tastenmodifikatoren ermöglichen es uns, bestimmte Dinge zu tun, wenn eine Tastaturtaste gedrückt wird. Sie könnten den Fall verwenden, wäre es, dem Benutzer zu erlauben, „Enter“ zu drücken, um das Formular zu senden, anstatt immer diese Schaltfläche „Hinzufügen“ zu verwenden. Aber das können wir dieses Click-Ereignis kopieren und es dann in unseren Form Wrapper einfügen. Kopieren Sie all dies, klicken Sie auf „Abschnitt“, und scrollen Sie dann nach oben zum öffnenden Formular-Tag, fügen Sie es in ein. Jetzt, anstatt auf einen Klick zu hören, werden wir auf einen Schlüssel hören. Dies ist etwas, das wir bereits wissen, aber der Unterschied ist, dass wir einen Modifikator verwenden , um genau zu sagen, auf welche Taste wir hören möchten. Oben in der View-Dokumentation, haben Sie eine Liste von gemeinsamen Schlüssel-Aliasen, die wir verwenden können , wie löschen, Escape , Space, aber wir werden verwenden Enter. Natürlich deckt dies nicht alle Tasten ab, die auf der Tastatur verfügbar sind, dies sind nur einige der Aliase für die gängigsten. Wenn wir eine Tastenschaltfläche verwenden wollen, die hier nicht aufgeführt ist, könnten wir stattdessen alle gültigen Schlüsselnamen verwenden, und wir können eine Liste nur hier sehen. Wir können auf jeden dieser Schlüssel verweisen, wie zum Beispiel Seite unten, die wir hier sehen. Aber anstatt es einfach so zu tippen, müssen wir dies in Kleinbuchstaben machen und es durch Bindestriche trennen. Für unser Beispiel werden wir nur die „Enter“ -Taste verwenden, [unhörbar] dies kurz nach oben. Lassen Sie uns unsere Anwendung ausprobieren und neue Ereignisse aktualisieren. Damit dies funktioniert, müssen wir mit allen Formularen interagieren da wir dies dem Formularelement hinzugefügt haben. Klicken Sie also auf eine dieser Eingaben, und von hier aus können wir „Enter“ drücken, die dann unser Formular absenden wird. 50. Das Formular validieren: Lassen Sie uns nun fortfahren, um in irgendeiner Form Validierung zu unserem Formular hinzuzufügen. Derzeit, wenn wir nur gehen und keine Werte in diese Eingaben hinzufügen, können wir auf „Hinzufügen“ klicken, und dies wird dann eine leere Ereignisse senden. Um dies zu beheben, werden wir zuerst eine Validierungsmethode passieren , die überprüft, ob alle erforderlichen Felder ausgefüllt wurden. Wenn nicht, werden wir dann die Fehlermeldungen an den Benutzer anzeigen. Da nicht mehr als ein Feld fehlen kann, werden diese innerhalb eines Arrays gespeichert. In unserem Add-Update-Formular besteht der erste Schritt darin, eine neue Dateneigenschaft hinzuzufügen, die diese Fehler speichern wird. Um diese Fehler zu übergeben, müssen wir dann eine Methode hinzufügen , die alle unsere Formulareingaben validiert. Kurz nach dem Datenabschnitt geht es um Methoden, und dieser Methodenname wird validiert werden. Wir gehen davon aus, dass dies alle diese Räume jedes Mal füllt , wenn der Benutzer auf die Schaltfläche Hinzufügen klickt. Zuerst möchten wir alle vorherigen Fehler zurücksetzen. Wir können dies tun, indem wir these.errors so setzen, dass sie wieder auf ein leeres Array gesetzt werden. Dann überprüfen wir unser Formular. Wir hatten einige if-Aussagen. Die erste, wir werden überprüfen, ob this.events.name nicht existiert. Wir können dies tun, indem wir das Ausrufezeichen hinzufügen. Dann wird diese if-Anweisung nur ausgeführt, wenn die name-Eigenschaft nicht existiert. Wir könnten dann den Code, den wir ausführen möchten, in diesen geschweiften Klammern hinzufügen oder stattdessen, Einfachheit halber, wenn wir das alles in der gleichen Zeile behalten. Das wird auch gut funktionieren. Wenn dieser Name nicht existiert, möchten wir eine neue Nachricht an unser Fehler-Array senden. Wir greifen zuerst auf diese.errors und unsere Push-Methode zu, die dann eine neue Textzeichenfolge schiebt, die Name ist erforderlich. Duplizieren Sie dies und wir können jetzt dasselbe für die Eventdetails tun. Wir haben dann auch das Datum im Hintergrund, um das Sie kümmern müssen, also duplizieren Sie es erneut. Das hier ist das Datum. Dann endlich der Hintergrund. Überprüfen Sie, ob dies funktioniert, indem Sie diese Fehler Array in unserer Vorlage ausgeben. Wir brauchen diese Ereignisinformationsausgabe nicht mehr, aber wir können dies durch unser Fehler-Array ersetzen. Um dies tatsächlich zu sehen, müssen wir unsere Validate-Methode über diese Schaltfläche aufrufen. Wir extrahieren diesen ganzen Code aus dem Click-Handler und platzieren ihn dann in eine neue Methode bis zu den Methoden unten. Zuerst richten wir unsere neue Methode ein, bei der Sie das Ereignis hinzufügen und dann in unseren Mittelteil einfügen. Entfernen Sie das Komma zwischen diesen. Jetzt, da dies innerhalb unseres JavaScript- oder unseres View-Abschnitts ist, müssen wir jetzt emit diesem Präfix aufrufen, silbern Linie 1, Zeile 2 und auch wenn wir auf das Ereignis zugreifen. Jetzt, wenn dieses Formular eingereicht wird, ist das erste, was wir tun wollen, die Validate-Methode zu passieren. Dann rufen wir Add Events sehr bald an. Auch unser Add unten, wir werden dann die Validate-Methode aufrufen. Auch das gleiche für alle Formular-Wrapper. Erhalten Sie Ergebnisse und rufen Sie validieren auf. Wenn wir jetzt zu unserem Validierungsabschnitt gehen, werden wir hier im Inneren zwei Ergebnisse haben. Das erste Ergebnis wird sein, dass die Form Fehler hat. Wir möchten nicht zu der Veranstaltung hinzufügen. Das zweite Ergebnis ist, dass alles in Ordnung ist. Wir haben keine Fehler. Jetzt wollen wir dieses Ereignis erstellen. Wenn dies der Fall ist und wir keine Fehler haben, wollen wir nur diese Add-Ereignismethode aufrufen. Da dies auch auf der View-Instanz lebt, müssen wir dies mit diesem Präfix aufrufen. Wenn es jedoch einige Fehler gibt, möchten wir kein neues Ereignis hinzufügen. Stattdessen wollen wir zu dieser Validate-Methode zurückkehren, bevor wir zu diesem Add-Event-Abschnitt gelangen , obwohl wir zuerst überprüfen können, ob this.errors, das unser Array ist. Wir können überprüfen, ob die Länge größer als Null ist. Dies bedeutet, dass wir Fehler haben und wir werden aus dieser Validierungsmethode zurückkehren. Lassen Sie uns das im Browser ausprobieren. Zunächst einmal, wenn wir die Schaltfläche „Hinzufügen“ drücken, ruft dies dann die Validierungsmethode auf und aktualisiert dann unser Fehlerarray mit unseren vier Nachrichten. Dies bedeutet, dass unsere Fehler größer als Null sind und das return-Schlüsselwort wird sicherstellen, dass Sie aus dieser Validierungsmethode ausbrechen , bevor Sie diese neuen Ereignisse schieben. Das ist in Ordnung. Auch hier können wir etwas im Namen und den Details hinzufügen, klicken Sie auf „Hinzufügen“. Sie sehen, dass das Datum im Hintergrund fehlt. Lassen Sie uns dies ohne Fehler versuchen. Fügen Sie das Datum im Hintergrund hinzu. Dies ermöglicht es uns nun, unsere neue Veranstaltung hinzuzufügen. Die letzte Stufe besteht darin, diese Fehler als Liste und nicht als Array auszugeben. Um dies zu tun, anstatt einfach unsere Fehler als Datumseigenschaft auszugeben, würde stattdessen eine Schleife durchlaufen. Erstellen Sie einen div Wrapper. Wir wollen diesen Abschnitt nur zeigen, wenn unsere errors.length größer als Null sein wird. Wenn dies der Fall ist, geben wir diese als ungeordnete Liste und geben dann jeden dieser Fehler als Listenelement aus. Wir können dies mit v-for tun und dies wird Fehler in Fehlern sein. Übergeben Sie einen dynamischen Schlüssel, der unserem Fehler entsprechen kann , da jede unserer Fehlermeldungen eindeutig ist. Dann werde ich die Fehlermeldung setzen. Lassen Sie uns dies bei den neuen Ereignissen ausprobieren und die Fehlermeldungen werden nun als ungeordnete Liste ausgegeben. 51. Events aktualisieren: Willkommen zurück. Nun, um eines dieser Ereignisse zu aktualisieren und zu entfernen, müssen wir wieder unsere benutzerdefinierten Ereignisse verwenden. Wir werden auch das gleiche Formular verwenden, mit dem wir ein neues Ereignis hinzugefügt haben, aber dieses Mal werden wir alle Details des Formulars mit den Details des aktuellen Ereignisses vorfüllen . Das erste, was wir tun müssen, bevor wir auf irgendeines davon kommen, ist, einen Click-Handler für eines dieser Ereignisse zu aktivieren. Sobald wir auf diese Ereignisse klicken, möchten wir, dass dieses Formular dann geöffnet wird, damit der Benutzer dann dieses bestimmte Ereignis bearbeiten kann. Um dies zu tun, werden wir jetzt auf einen Klick in der app.view innerhalb dieser Ereigniskomponente hören oder in der Tat ist dies im Listenelement umgeben, so dass wir dies auch dem übergeordneten Wrapper hinzufügen können. Wir werden einen Klick-Listener hinzufügen und dann werden wir eine neue Methode namens SetForm auslösen. Das SetForm wird dann die Details des aktuellen Ereignisses übergeben. Wir greifen die Event-Details aus unserer Schleife. Jedes Mal, wenn wir auf eines dieser besonderen Elemente klicken, wird es dann die Ereignisdaten für das, auf das wir geklickt haben, erfassen. Bis zum Methodenabschnitt. Diese Methode muss jetzt zwei Dinge tun. Es muss zuerst das Formular anzeigen und auch das ausgewählte Ereignis an die Dateneigenschaft übergeben. Diese Dateneigenschaft wird dann als Requisite für die Formularkomponente selbst verwendet, was bedeutet, dass wir alle Daten haben, um alle Abschnitte vorauszufüllen. Um unsere Methode zu beginnen, die SetForm war, erhalten wir die Details des Ereignisses und ein Komma am Ende. Das erste, was wir tun möchten, ist, die aktuelle Ereignisdaten-Eigenschaft, die wir noch nicht erstellt haben, zu setzen . Dies wird als aktuelles Ereignis bezeichnet. Eigentlich ist das [unhörbar] Fall. Wir setzen dies gleich dem Ereignis, das übergeben wird. Wenn ein Fehler vorliegt oder keine Daten übergeben werden, senden wir einfach ein leeres Objekt. Jetzt werden wir dieses aktuelle Ereignis als Dateneigenschaft direkt oben festlegen und dies zunächst auf ein Objekt setzen. Was passieren wird, ist, dass wir auf diesen Abschnitt oder eines dieser Ereignisse klicken. Dies wird dann diese Methode auslösen, wir werden dann diese Ereignisdaten an das aktuelle Ereignis übergeben, das wir dann in nur einer Sekunde an alle Form übergeben können. Aber zuerst müssen wir tatsächlich dieses Formular anzeigen. Wir können dies tun, indem Sie diese ShowForm Eigenschaft umschalten. Wir möchten, dass dies wahr ist, so dass das Formular auf dem Browser angezeigt wird . Schauen wir uns das an. Klicken Sie auf eines dieser, alle Formulare erscheint, und das alles scheint für jede unserer Veranstaltungen zu funktionieren. Dieses Formular benötigt nun diese Ereignisdaten, die wir im aktuellen Ereignis gespeichert haben. Wir können diese greifen und zu unserer Vorlage gehen und dann an unser AddUpdateForm übergeben. Das wird dynamisch sein, also brauchen wir die Bindung. Der Eigenschaftsname wird aktuelles Ereignis sein, das auch den Daten des aktuellen Ereignisses entspricht. Overt zu dem Formular können wir jetzt in unserem Requisiten-Array innerhalb des Exportvorgangs hinzufügen. Die einzige Stütze, die wir im Moment haben, wird das aktuelle Ereignis sein. Im Moment haben wir das aktuelle Ereignis, das an dieses Formular weitergegeben wird. Wir haben das Ereignisobjekt, das in Daten gespeichert ist. Dieses Ereignisobjekt verwendet auch v-model, um dies an alle unsere Formulareingaben zu binden. Um nun dieses aktuelle Ereignis als Anfangswert zu übergeben, müssen wir zuerst dieses Ereignis so einstellen, dass es unserem aktuellen Ereignis entspricht. Wir können dies tun, sobald die Anwendung innerhalb des eingehängten Hook geladen wird, wo wir this.event auf this.current Ereignis setzen. Lassen Sie uns testen, dass alles funktioniert, indem Sie auf eines dieser Ereignisse klicken und zuerst aktualisieren. Wir haben den Abschluss. Lassen Sie uns den Geburtstag versuchen. Das Konferenzgespräch. Auch jetzt, wenn wir in unser Plus-Symbol für Formular hinzufügen gehen, das nächste, was wir tun werden, ist, diese Schaltfläche am unteren Rand zu schalten, derzeit sehen wir die Schaltfläche Hinzufügen, aber wenn wir in den Abschnitt Bearbeiten gehen, sehen wir immer noch die Schaltfläche Hinzufügen zu. Dies liegt daran, dass wir innerhalb der Vorlage nur die einzelne Add-Schaltfläche haben. Wir müssen dies auch duplizieren und eine Update-Schaltfläche erstellen. Dies wird für die Aktualisierung sein. Dies muss auch die gleiche Validierungsmethode durchlaufen , um sicherzustellen , dass alle Formularfelder, die wir verwenden, sich ändern, nach dem Speichern noch vorhanden sind. Wir möchten nur eine dieser Schaltflächen gleichzeitig anzeigen. Die Art und Weise, wie wir dies tun können, besteht darin, zu überprüfen, ob unser Ereignis eine ID-Eigenschaft hat. Dies liegt daran, dass die id Eigenschaft erst hinzugefügt wird , wenn wir speichern, daher ist das Ereignis bereits vorhanden, also müssen wir es aktualisieren. Innerhalb der ersten Schaltfläche, die aktualisiert wird, fügen wir einen v-if-Abschnitt hinzu, und dies wird überprüfen, ob die CurrentEvent.id vorhanden ist. Wenn diese Aussage wahr ist, werden wir die Schaltfläche Aktualisieren sehen. Wenn nicht, fügen wir den el-Abschnitt hinzu, um die Schaltfläche „Hinzufügen“ anzuzeigen. Probieren wir das aus. Wir gehen auf die Schaltfläche Hinzufügen, um zu beginnen. Wir werden beide hier sehen, weil wir keine v-else hinzugefügt haben. Wir brauchen das, weil dies nicht nur normales JavaScript ist. Ich werde jetzt nur die Update-Schaltfläche sehen, also funktioniert das alles gut. Jetzt zurück zu unseren zwei Knöpfen. Jetzt beide Schaltflächen, eine erste, die Validate-Methode aufruft. Wenn wir dies aufrufen, muss es wissen, ob wir ein Ereignis aktualisieren oder ein neues hinzufügen möchten. Um dies zu tun, werden wir eine Zeichenfolge übergeben und für diese wird dies aktualisiert werden. Dieser wird hinzugefügt werden. Jetzt haben wir eine Art von Ereignis, die Sie nach der Validierung ausführen möchten. Übergeben Sie dies an unsere Validate-Methode. Dies ist ein Variablenname, den ich Typ aufrufen werde. Dies wird die gesamte Validierung durchlaufen. Bevor wir voran gehen und ein neues Ereignis hinzufügen, möchten wir diese Methode nur aufrufen, wenn der Typ gleich addieren ist. Wir fügen eine if-Anweisung hinzu. Wenn externe Variable gleich addieren ist, werden wir dann this.addEvent aufrufen. Wenn nicht, fügen wir einen el-Abschnitt hinzu, also muss dies bedeuten, dass der Typ aktualisiert wird und daher möchten wir eine andere Methode aufrufen, die UpdateEvent genannt wird. Aktualisierung unseres Ereignisses wird dieser AddEvent-Methode sehr ähnlich aussehen, so dass wir dies duplizieren können, um zu beginnen, es ändert sich zu aktualisieren. Wir haben noch kein benutzerdefiniertes Update-Ereignis erstellt, daher lassen wir dieses Feld einfach leer. Sie müssen auch noch die neuen Eventdetails erhalten und das Formular schließen, damit der Rest alles in Ordnung ist. Lassen Sie uns nun dieses benutzerdefinierte Ereignis über in der app.view bis zum AdduUpdateForm Abschnitt erstellen. Dies wird einem ähnlichen Muster folgen wie dieses Add new event Abschnitt. Aber dieses Mal ist dies für die Aktualisierung, so dass wir ein neues benutzerdefiniertes Ereignis namens Update-Ereignis hinzufügen. Dies wird eine Update-Funktion auslösen und wir erhalten auch die Ereignisdaten. Lassen Sie uns das jetzt in unseren Methoden aufstellen. Dies wird in den Ereignisdetails, die übergeben wird, nehmen. Das erste, was wir tun müssen, wenn wir ein Ereignis innerhalb dieses Ereignis-Arrays aktualisieren, wollen wir die Indexposition für die finden, die wir aktualisieren möchten. Die Art und Weise, wie wir dies tun können, ist this.event aufrufen, um unser vollständiges Array zu greifen, und dann müssen wir eine JavaScript-Array-Methode namens findIndex aufrufen. Dies wird dann eine Funktion aufrufen, und diese Funktion wird für jedes Element innerhalb unseres Ereignis-Arrays aufgerufen werden. Wir durchlaufen effektiv jeden und führen dann eine Funktion aus. Jedes Mal, wenn wir durch ein einzelnes Ereignis schleifen, speichern wir dann den Wert oder das Element innerhalb dieser el Eigenschaft. Dies ist nur ein Variablenname, so dass Sie dies alles aufrufen können, was Sie wollen. Wir werden dann überprüfen, ob dieses Element.id gleich der ID sein wird, die von diesem Ereignis übergeben wird. Dies ist in einer Konstante namens Index. Dies sollte uns nun die Indexposition unseres Ereignisses innerhalb dieses Ereignis-Arrays geben. Wenn wir die erste ausgewählt haben, wird dies die Indexposition Null sein. Dies wird Position eins, zwei, drei und so weiter sein. Wir rufen dann this.events auf und greifen die bestimmte durch die Indexnummer, und ersetzen Sie diese dann durch unser neues Ereignisobjekt. Alles, was jetzt noch zu tun ist, ist dieses benutzerdefinierte Ereignis von unserer Komponente aus aufzurufen. In das Add-Update-Formular müssen wir dies zuerst im Emit-Array erhalten. Dann ist dies bereit, von unserer Methode aus aufzurufen. In Update-Ereignis und wir können dies durch Update-Ereignis ersetzen, sagen Sie dies, und wir können unsere Update-Funktionalität testen. Gehen Sie in eine dieser, wir können die Details bearbeiten. Klicken Sie auf Update, und dies ist jetzt gespeichert. Versuchen wir es mit einem anderen. Ich ändere die Hintergrundfarbe in orange. Das funktioniert alles gut. Lassen Sie uns einfach eine kurze Zusammenfassung machen, weil es hier ziemlich viel los ist. Wir geben Daten zwischen zwei verschiedenen Komponenten weiter. Das erste, was wir in der app.view getan haben , war, für einen Klick auf eines dieser Ereignisse zu hören. Wir haben dann eine Methode namens SetForm ausgelöst. Dies erhielt auch die aktuellen Ereignisdaten. Jetzt innerhalb dieser Methode, das erste, was wir getan haben, war, eine Dateneigenschaft namens aktuelles Ereignis zu setzen. Dies war gleich unseren Veranstaltungsinformationen und dann tauchte es auch das Formular auf. Dieses aktuelle Ereignis zurück nach oben wurde dann an unser Formular übergeben, das es dann verwendet, um alle Abschnitte innerhalb von hier auszufüllen. Dies tat es, weil wir dies unserem Dateneigentum zugewiesen haben. Sobald diese Komponente diese Update-Schaltfläche eingehängt hat, rief dann die Validate-Methode auf. Sobald Sie die gesamte Validierung überprüft haben, haben wir dann entweder die Add oder die Update-Methode aufgerufen, die wir direkt oben mit unseren benutzerdefinierten Ereignissen eingerichtet haben. Kurz bevor wir weitermachen, werden wir auch nur überprüfen, ob die Validierung funktioniert oder der Update-Abschnitt. Wenn wir einen Namen entfernen, ist der Name erforderlich und auch Ereignisdetails sind erforderlich. Eine Sache ist jedoch zu beachten, wenn wir diese Anwendung aktualisieren, wird die App wieder so zurückkehren, wie sie ursprünglich war, da wir keine Datenbank verwenden, um alle diese Ereignisse in zu speichern. Als Nächstes werden wir diese Ereignisse tatsächlich entfernen , wenn der Benutzer auf diese Schaltfläche klickt. 52. Events entfernen und Verbreitung anhalten: Kurz bevor wir mit diesem Kreuz-Button unsere Ereignisse entfernen, werden wir ein kleines Problem beheben, das wir uns im letzten Video angesehen haben. Nun wurde dieses Problem hervorgehoben. Wenn wir in den Abschnitt Neue hinzufügen gehen, werden wir sehen, dass wir keines dieser Formulare vorausgefüllt haben. Wenn wir jedoch in einen Abschnitt Bearbeiten gehen , der alles funktioniert völlig gut. Schließen Sie dies, und jetzt, wenn wir wieder in den Abschnitt Hinzufügen gehen, sind alle unsere Arbeitsformularfelder jetzt vorausgefüllt. Der Grund dafür liegt darin, dass, sobald Sie den Abschnitt Bearbeiten öffnen, dies in der app.view, unserer Dateneigenschaft, die CurrentEvent ist,festgelegt unserer Dateneigenschaft, die CurrentEvent ist, wird und dies dann an die CurrentEvent-Daten sendet. Um dies zu beheben, werden wir dies zurück auf ein leeres Objekt zurücksetzen , wenn wir dieses Formular schließen. Wenn wir dieses Formular schließen, schauen Sie sich ganz oben an, alles, was Sie tun, ist, die ShowForm -Eigenschaft auf false zu setzen. Wir werden dies jetzt auf eine Methode verschieben, und wir können auch unsere CurrentEvent-Daten zurücksetzen. Wir schneiden das aus, wir werden es in einem Moment benutzen. Diese Methode wird als geschlossene Form bezeichnet werden, und dann können wir nach unten scrollen und diese direkt unten erstellen. Geschlossene Form muss keine Daten aufnehmen, alles, was wir tun müssen, ist, dies wieder einzufügen. Jetzt, da wir in unserer Ansicht Abschnitt sind, beziehen wir uns auf diese mit diesem Schlüsselwort. Danach setzen wir unser CurrentEvent-Datenfeedback zurück, um ein leeres Objekt zu sein. Lassen Sie uns das ausprobieren, aktualisieren Sie den Browser. Das ist leer. Das ist in Ordnung. Dann zurück in unser Add-Formular, das ist jetzt alles leer. Jetzt können wir unsere Ereignisse mit diesem Kreuz-Button entfernen. Das Entfernen von Ereignissen folgt einem ähnlichen Muster zum Erstellen eines benutzerdefinierten Ereignisses und zum Doppelpunkt von den untergeordneten Komponenten. Diesmal wird es jedoch von der Ereigniskomponente statt vom Formular aufgerufen. Über die event.view, wo wir diese Schaltfläche bereits eingerichtet haben, und sehr bald werden wir dies an ein benutzerdefiniertes Ereignis anschließen. Schauen Sie richtig, es ist ein benutzerdefiniertes Ereignis wie immer in der app.view. Lassen Sie uns zunächst eine Methode einrichten, die dieses benutzerdefinierte Ereignis aufrufen wird. Dies wird als entfernen bezeichnet werden. Dies werden auch frühere Ereignisdaten sein, so dass wir wissen, welche Ereignisse wir entfernen möchten. Jetzt, genau wie im Update-Abschnitt, müssen wir auch die Indexposition finden, damit wir wissen, welche wir aus unserem Array entfernen möchten. Wir können dies kopieren und einfügen Sie dies innerhalb von hier, und wir können diese Indexposition nur verwenden, um das richtige Ereignis auszuwählen. Zuerst werden wir this.events auswählen, dann wird die JavaScript-Array-Methode, die splice genannt wird, uns erlauben, ein bestimmtes Element zu entfernen. Das wird zwei Dinge aufnehmen. Der erste wird die Position des Elements sein, den wir entfernen möchten. Wir wissen, dass wir das bereits aus dem Index haben. Zweitens die Anzahl der Elemente aus dieser Indexposition. Wir möchten nur das einzelne Ereignis entfernen, was bedeutet, dass der Wert eins ist. Dann scrollen wir nach oben zu unseren Vorlagen und den Veranstaltungsbereich , wo wir unser benutzerdefiniertes Ereignis passieren möchten. Als Attribut werden wir unsere Kristallmethode übergeben, die remove-event ist. Dies wird gleich unserer entfernenden Methode sein, die auch die Ereignisdaten erhält. Der nächste Schritt sollte ziemlich vertraut sein. Wir gehen zu den Ereigniskomponenten, und dann werden wir unser Emits-Array hinzufügen. Dieses emittiert Array wird derzeit nur in einem Ereignis zu nehmen, und dies ist remove Ereignis. Bis zu unserem Knopf. Um dies auszulösen, müssen wir auf einen Klick hören. Dann werden wir auf diese Schaltfläche klicken, dies wird dann die remove-Methode aufrufen, die jetzt direkt unten eingerichtet wird. Wir haben keinen Methodenabschnitt, also müssen wir dies einrichten und dann unsere remove-Methode einrichten, wo wir unser benutzerdefiniertes Ereignis ausgeben werden. Da wir im Ansichtsbereich sind, müssen wir es mit diesem Schlüsselwort aufrufen. Geben Sie unseren Ereignisnamen ein, der remove-events ist. Dann wollen wir die Ereignisdaten übergeben. Wir haben dies bereits als Requisite gespeichert, also geben wir dies als zweites Argument an. Versuchen wir es mal. Über zum Browser und aktualisieren. Wenn wir nun versuchen, auf eines dieser Ereignisse zu klicken, können wir im Hintergrund sehen, dass das Ereignis entfernt wurde. Wir werden auch sehen, wie dieses Formular auftaucht. Lassen Sie uns das noch einmal versuchen. Wir werden den Geburtstag entfernen, und wir können aus dem Hintergrund sehen, dass dies weg ist. Aber warum sehen wir diese Form? Nun, das liegt daran, obwohl wir in dieser Komponente auf diese Schaltfläche klicken. Diese Schaltfläche ist innerhalb der app.view verschachtelt und innerhalb dieser Paarung app.view, wir haben dies auch in einem Klick-Listener umgeben , der SetForm auslöst. Dann innerhalb von ShowForm, wenn wir nach unten scrollen, können wir sehen, dass wir in this.ShowForm gesetzt, um gleich wahr zu sein. Warum wird aufgerufen, wenn wir auf die Schaltfläche Entfernen klicken? Nun, der Grund, warum dies passiert, ist etwas, das Ereignispropagierung genannt wird. Das hat nichts mit Vue.js zu tun, nur etwas, das Sie bei der Verwendung von JavaScript generell beachten sollten. Ja, wir klicken auf die Schaltfläche Entfernen, die innen verschachtelt ist, aber wenn Sie auf ein Ereignis innerhalb des HTML klicken, würde eine Kettenreaktion auslösen. Um dies zu sehen, können wir die Entwicklertools öffnen. Klicken Sie mit der rechten Maustaste und überprüfen Sie Was wir finden müssen, ist diese Schaltfläche Entfernen, also in den Körperbereich, die App-Abschnitt. Dann innerhalb von hier haben wir eine ungeordnete Liste mit allen Ereignissen, und dann können wir einen unserer Listenelemente auswählen. Wenn wir dies öffnen, ist dies in einem Artikel Wrapper, und die Schaltfläche ist im Countdown-Abschnitt nur hier verschachtelt. Wie wir sehen können, ist dies tief verschachtelt, es hat umgebende divs, es hat Listenelemente. Um den Körperabschnitt aufzulisten, und es geht direkt bis zum Anfang des Baums, der das Fenster ist. Obwohl wir auf diese Schaltfläche klicken, wird es eine Reihe von Phasen auslösen. Es beginnt ganz oben und dies wird dann durch alle Elemente passieren , bis es unseren Knopf erreicht. Dies wird als Erfassungsphase bezeichnet. Dann erreicht es die Schaltfläche oder die Elemente, auf die wir geklickt haben, und dies wird als Ziel bezeichnet. Daher wird die Bühne als Zielstufe bezeichnet. Schließlich, sobald es diesen Knopf erreicht, klettert es dann wieder nach oben durch alle übergeordneten Elemente eins nach dem anderen. Dabei lösen wir auch alle Ereignisse auf dem Rückweg aus. Wie wir uns gerade angeschaut haben, wird eines dieser Ereignisse auf dem Rückweg immer noch das Formular öffnen. Dieses Stadium wird die sprudelnde Phase genannt. Nun, Sie müssen das alles vorerst nicht vollständig verstehen. Alles, was Sie verstehen müssen, ist, dass, wenn wir auf ein Ereignis klicken, es durch alle übergeordneten DOM-Elemente geht und wir werden auch andere auf dem Weg auslösen. All dies wird als Ereignispropagierung bezeichnet. Vue.js stellt uns auch einen Ereignismodifikator zur Verfügung, um dieses Verhalten bei Bedarf zu stoppen. Oben in der event.view. Genau wie früher, als wir den Modifikator „verhindern“ hinzugefügt haben , der das Standardverhalten des Browsers gestoppt hat, stoppt dieser Stop-Modifikator diese Ereignispropagierung. Lassen Sie uns das speichern und zu unserem Projekt. Klicken Sie auf diese. Jetzt werden diese Ereignisse erfolgreich entfernt. Nur um die Dinge zu beenden, werde ich einen kleinen Refactor in der app.view machen. Im Moment, innerhalb dieser entfernen-Methode und auch des Updates, duplizieren wir diese Codezeile. Um dies zu verhindern, lassen Sie uns diese Codezeile in eine eigene wiederverwendbare Methode einfügen. Wir schneiden dies aus, und auch diese auch, und erstellen dann eine neue Methode namens FindEventIndex, wo wir diese Codezeile einfügen können. Diese Methode benötigt auch Zugriff auf unser Ereignis, so dass wir die Ereignis-ID zuschneiden können. Oder alternativ können wir dies vereinfachen und einfach die ID der Ereignisse übergeben. Wir können dies tun, genannt findEventIndex, also lasst uns dies und zuerst in die remove-Methode greifen. Wir haben jetzt keinen Zugriff auf diese Indexkonstante, also werden wir dies durch einen Methodenaufruf ersetzen. Wir können findEventIndex aufrufen, wo wir es auch in einer gültigen ID übergeben müssen, die wir von der event.id greifen können. Dies muss auch aufgerufen werden, wenn das Schlüsselwort dieses, und wir können auch diesen Abschnitt kopieren und den Update-Abschnitt ersetzen , wo wir den Index aufrufen. Wir fügen das ein. Jetzt müssen wir den Wert von dieser Methode zurückgeben. Anstatt dies innerhalb einer Konstante zu speichern, werden wir seine Indexnummer zurückgeben, die dann innerhalb dieser beiden Abschnitte verfügbar sein wird. Lassen Sie uns das testen. Zuallererst können wir ein Ereignis entfernen, und das funktioniert gut. Dann die Update-Funktionalität, ändern Sie alle Details. Klicken Sie auf Aktualisieren, und das funktioniert auch gut. 53. Abschnittseinleitung – Validierung und ein genauerer Blick auf Props: Wir wollen nicht nur alte Daten in alte Komponenten werfen. Wir möchten genauer über die Art der Daten, die wir erhalten werden , und die Formate, in denen sie sich befinden, sprechen. Andernfalls können wir Fehler bekommen, und wir wollen diese nicht in unserer Anwendung. Wir werden uns das im nächsten Video ansehen, und dann werden wir einen Blick auf etwas werfen, das als Nicht-Prop-Attribute bezeichnet wird, was eine andere Art ist, Daten zwischen unseren Komponenten zu übergeben. 54. Prop-Validierung: In unserem Projekt sind Requisiten ein wichtiger Teil davon, wie alles funktioniert. Es ist eine gute Idee, eine Validierung hinzuzufügen, um sicherzustellen, dass wir die richtigen Informationen durch unsere Komponenten übergeben bekommen. Innerhalb dieser app.view-Hauptdatei ist dies die oberste Ebene Komponente, so dass diese keine Requisiten übergeben wird. Um mit der Prop-Validierung zu beginnen, gehen wir in die events.view-Komponenten. Das erste, was wir tun müssen, um Validierung hinzuzufügen, ist, dieses Array in ein Objekt zu ändern, das sind häufige Ergebnisse, und dann werden wir unsere Requisiten Eigenschaft für diese Zeit als Objekt wieder einbauen. Die erste, die wir gerade oben haben, sind die Ereignisse. Seine einfachste Proof-Validierung, es kann nicht einfach die Art von Daten, die wir erwarten, zu deklarieren. Das Ereignis wird ein Objekt sein. Dann durch ein Komma getrennt, haben wir die DaysLeft. Der DaysLeft wird eine Nummer sein. Dann haben wir endlich ShowPastEvents. Der Datentyp dafür ist ein boolescher Wert. Dies ist nur eine einfache wahr oder falsch, so dass wir die Ereignisse verstecken können, wenn die Tage abgelaufen sind. Wir können auch in einem gültigen Datentypen übergeben, wie Array, Funktion, Symbol, Datum und Zeichenfolge. Probieren wir das aus. Oben im Browser, aktualisieren, sehen wir, dass alles perfekt funktioniert. Öffnen Sie die Entwicklertools und wir können überprüfen, dass es keine Bereiche innerhalb der Konsole gibt. Ja, das ist alles in Ordnung. Aber jetzt, wenn wir zur app.view gehen, werden wir eine Änderung an den Daten vornehmen, die wir sie an diese Ereigniskomponente weitergeben. Lassen Sie uns zum Beispiel für ShowPastEvents gehen, die entweder wahr oder falsch ist. Wenn wir nun die Bindung entfernen, bedeutet dies nicht, dass dies als Zeichenfolgenwert und nicht als Boolescher Wert weitergegeben wird. Öffne das, aktualisiere es, und jetzt sehen wir eine Warnung für alle unsere sechs verschiedenen Ereignisse. Die Warnung ist der ungültige Prop-Typ, die Typprüfung für die ShowPastEvents-Prop fehlgeschlagen. Wir sehen, dass wir einen Boolean erwartet haben, weil dies ist, was wir in unseren Komponenten gesetzt. Aber dann haben wir eine Schnur. Wir sind auch nicht auf einen einzigen Datentyp beschränkt. Wenn wir eine Zeichenfolge neben diesem booleschen Wert akzeptieren wollten, müssen wir dies nur als Array übergeben. Es ist um dies innerhalb dieser eckigen Klammern, dann durch ein Komma getrennt wird auch einen Zeichenfolgenwert akzeptieren. Aktualisieren, und jetzt verschwinden unsere Fehler jetzt. Wir wollen nicht Boolean für dieses spezielle Beispiel, so können wir die eckigen Klammern und auch an der Bindung wieder in hier entfernen. Diese Fehler, die Sie sehen, werden nur in Entwicklungen angezeigt und können wirklich nützlich sein , wenn wir einen Fehler machen oder unsere Daten unerwartet ändern. Wir können nicht noch weiter gehen, indem wir nicht nur den Datentyp deklarieren, was wir derzeit tun, sondern auch die Werte einschränken, die Sie auch erhalten dazu können wir zusätzliche Eigenschaften übergeben und dies in ein Objekt verwandeln, also rufen Sie uns auf und fügen Sie die geschweifte Klammer hinzu, um dies in ein Objekt zu verwandeln, können wir dann den Typ mit der type-Eigenschaft übergeben. Was wir diese Requisite wieder setzen, um ein Objekt zu sein, die DaysLeft, wir tun das gleiche für diese und die type-Eigenschaft, und auch das gleiche für alle booleschen. Nun sind dies alle Objekte, diese können jetzt mehrere Eigenschaften akzeptieren. Wenn wir beispielsweise sicherstellen wollten, dass diese Requisite erforderlich ist, können wir dies auf wahr setzen. Auch das gleiche für den DaysLeft. Dies bedeutet, dass dies in einem Fehler fließen sollte, wenn selbst eine dieser Eigenschaften nicht an diese Komponenten weitergegeben wird. Testen Sie dies auf die app.view, wir können eine von diesen entfernen. Gehen wir zum DaysLeft. Rufen wir das vorübergehend aus. Jetzt über im Browser sehen wir die fehlende oder erforderliche Requisite von DaysLeft für alle sechs unserer Veranstaltungen. Oben in der event.view, beachten Sie hier, wie wir die erforderliche Eigenschaft aufgehört haben, um ShowPastEvents. Dies liegt daran, dass dieser Requisitentyp ein boolescher Wert ist. Wenn wir diese Requisite nicht übergeben würden, wird ein boolescher Wert sowieso immer standardmäßig auf false gesetzt, was bedeutet, dass er trotzdem vorhanden wäre. Dies ist nur etwas, auf das man achten muss, wenn man boolesche Requisiten übergibt. Lassen Sie uns einfach schnell wieder seine DaysLeft und speichern Sie diese Datei. Requisiten können auch einen Standardwert erhalten , den wir verwenden können, wenn kein Wert angegeben wird. Anstatt zu sagen, dass dieser Requisitentyp vorhanden sein muss, können wir auch sagen, wenn dies nicht vorhanden ist, werden wir stattdessen einen Standardwert übergeben. Dies ist der Zahlentyp, und lassen Sie uns für eine Anzahl von 10 gehen. Dies macht derzeit keinen Unterschied, wenn wir den Browser aktualisieren, da wir die Requisite immer noch an diese Komponenten weiterleiten. Aber wieder, wenn wir das heraus könnten, aktualisieren, obwohl Ereignisse jetzt standardmäßig auf 10 Tage zurückgesetzt werden. Machen wir das einfach rückgängig und speichern Sie diese Datei. Dies funktioniert nur für Dinge wie Zahlen oder Strings, Boolean bei der Validierung der Funktionen, Arrays sind Objekte. Wir müssen diese Standardeigenschaft als Funktion übergeben. Unser Ereignis ist der Typ des Objekts, so dass wir dies versuchen können, entfernen Sie die erforderliche Eigenschaft, und dann ändert es sich, um die Standardeinstellung zu sein. Da dies ein Objekt ist, müssen wir dies als Funktion einrichten. Wenn dann keine Ereignisprop übergeben wird, werden wir dieses Standardobjekt zurückgeben. Dies muss das gleiche Setup haben, wie wir derzeit hier drin haben. Wir haben die ID, zu jedem Ereignis, die nur einige zufällige Informationen geben. Wir haben den Namen, der ein Zeichenfolgenwert ist, die Ereignisdetails. Wenn es in Ordnung ist, speichern Sie dies, und natürlich sollte es nichts beeinflussen, was wir derzeit haben weil wir immer noch die Event-Requisite erhalten. Aber wenn wir dies entfernen, sollten wir jetzt unsere Standardereignisse mit Daten eintreten, die wir hier hineingeben. Was wir eigentlich betrachten wollen, ist die Validator-Eigenschaft. Lassen Sie uns einfach unsere Veranstaltung hier drinnen hinzufügen und dann zurück zu unseren Veranstaltungen. Die validator-Eigenschaft ist eine benutzerdefinierte Funktion, die uns eine viel flexiblere Möglichkeit gibt , unsere Requisiten zu validieren. Es ist ähnlich wie unsere Standardfunktion angelegt , aber stattdessen ersetzen wir dies durch Validator. Diese Funktion wird auch einen Wert übernehmen, der den Wert der Prop ist, die übergeben wird. Derzeit wird dies die Veranstaltung sein. Wir können diesen Wert nun in irgendeiner Weise validieren, die wir wollen, indem wir Javascripts verwenden. Wenn wir zum Beispiel nur bestimmte Ereignisnamen zulassen wollten, könnten wir so etwas tun. Lassen Sie ein offenes Array mit den laut Ereignisnamen einrichten , die Sie durch diesen Validator übergeben möchten. Lassen Sie uns für zwei unserer aktuellen Veranstaltungsnamen gehen. Wir haben Geburtstag, und wir haben auch ein Weihnachtsfest. Dann können wir die JavaScript-Include-Methode verwenden, um zu überprüfen, ob unserer Veranstaltungen entweder den Titel Geburtstag oder Weihnachten enthält. Wir wissen, dass die Ereignisinformationen innerhalb dieses Wertes übergeben werden, so dass wir auf unsere Objekte und dann auf den Ereignisnamen zugreifen können. Wenn eines unserer Veranstaltungen den Titel Geburtstag oder Weihnachten enthält, möchten wir diesen Wert zurückgeben, und dies wird entweder wahr oder falsch sein. Speichern wir dies und gehen Sie zurück zum Browser in die Entwicklertools. Wir werden nun sehen, dass dieser Validator für unsere vier Veranstaltungen fehlgeschlagen ist, die weder den Titel noch den Namen Geburtstag oder Weihnachten enthalten. Wir brauchen diese Validator-Funktion innerhalb dieses Projekts nicht, aber es ist nützlich zu wissen, dass dies da ist und es uns eine wirklich flexible Möglichkeit gibt , unsere Requisiten zu validieren. Wir können auch Requisitentypvalidierung zu unserem AddUpdateForm hinzufügen, scrollen Sie nach unten zu unserer Skript-Aktion. Wir haben hier nur die einzelne Requisite, also können wir dies auskommentieren, setzen diese App ein Objekt hat, das in unseren aktuellen Ereignissen basiert, das den Objekttyp hat. Speichern Sie diese Datei. Wenn wir nun den Browser aktualisieren, die Konsole öffnen, funktioniert alles jetzt noch wie erwartet. 55. Non-Prop-Attribute: Im vorherigen Projekt haben wir eine Option im dunklen Modus hinzugefügt, und ich werde jetzt etwas Ähnliches tun, das einen GrayMode anwenden soll. Wenn dieses Farbschema, das Sie derzeit haben, ein bisschen zu viel für den Benutzer ist, sollte dies ziemlich vertraut sein, wir reduzierten mit vielen der Techniken, die wir bereits verwendet haben. Beginnend mit der App.vue benötigen wir zunächst einige Dateneigenschaften. Innerhalb des Rückgabeabschnitts wird der erste GrayModeSet sein, dies ist ein boolescher Wert, der derzeit auf false gesetzt wird. Dann auch ein GrayMode-Objekt, das das Farbschema enthalten wird, aber unseren Hintergrund und auch unsere Schriftfarbe. Dies wird für unser CSS-Silizium sein, setzen Sie zuerst die Hintergrundeigenschaft auf hellschiefergrau. Dann auch unsere Farbeigenschaft für den Text, und Sie können jede Farbe wählen, die Sie wollen, und ich werde für einen Hex-Wert von 454444 gehen . Wechseln Sie zu den Vorlagen, dies benötigt auch eine Schaltfläche, damit wir diese ein- und ausschalten können. Ich werde dies innerhalb unserer Optionen div platzieren, und auch zwischen diesen beiden Farbtasten. Der erste Schritt ist, zumindest jetzt für einen Klick auf diese Schaltfläche und dann werden wir diese GrayModeSet ein- und ausschalten. Genau wie wir oben mit der Show vergangenen Ereignisse getan haben, werden wir das gleiche tun, aber dieses Mal für GrayModeSet. Wir stellen das Gegenteil dar. Wir könnten auch einen Text innerhalb von hier hinzufügen, aber stattdessen werde ich ein verstecken meine Entität verwenden, das wird die Sonne oder der Mond sein. Um dies dynamisch zu machen, benötigen wir die doppelten geschweiften Klammern und wir werden auch den ternären JavaScript-Operator verwenden. Wenn der Graumodus eingestellt ist derzeit wahr, werden wir das Symbol setzen, das der Mond ist. Das Mond-Icon ist also das kaufmännische Und-Zeichen, das harte auf der Zahl von 9788;. Wenn das falsch ist, zeigen wir das Bild des Mondes. Wir setzen diesen Standardwert auf false, so dass wir das Symbol des Mondes im Inneren von hier sehen. Lassen Sie uns darauf klicken, wir sehen die Sonne. Das scheint also alles gut zu funktionieren. Nun müssen die Stile, die als Dateneigenschaft eingerichtet wurde, nun an diese Ereigniskomponenten weitergegeben werden. Wir können die Hintergrundfarbe und auch den Text für jedes dieser Ereignisse ändern. In der Vergangenheit haben wir Requisiten an diese Ereigniskomponenten weitergegeben. Genau wie wir hier sehen. Wir könnten das noch einmal tun, aber dieses Mal werden wir die Vorteile von Nicht-Prop-Attributen nutzen. Das funktioniert ähnlich wie die Requisiten, die wir uns in der Vergangenheit angesehen haben. Nun, anstatt innerhalb der Komponenten, wird die Vorlage automatisch diese Werte erben. Für diese speziellen Komponenten ist der Artikel die wichtigsten Wrapper-Elemente, und alle nicht gewinnorientierten Attribute werden automatisch von diesem Haupt-Wrapper vererbt. Sie erscheinen auch wie ein reguläres Attribut innerhalb des öffnenden Tags Wenn wir also ein ID-Attribut übergeben, würde es ungefähr so aussehen. Lassen Sie uns das entfernen und um dies zu tun, gehen wir zurück zu den Eltern app.vue, und dann können wir das an den Event-Komponenten weitergeben. Mit dem gleichen Beispiel werden wir die ID gleich einer Zeichenfolge setzen, sagen wir dies und über zum Browser, wir können die Entwicklertools aktualisieren und öffnen. Verwenden Sie den Selektor und wählen Sie eines dieser Ereignisse aus. Diese werden innerhalb einer ungeordneten Liste gespeichert, und wenn wir innerhalb unserer Listenelemente auf dem Artikel gehen, hat dies um einen Artikel jetzt unsere ID geerbt. Das bedeutet, wenn wir zu unserer event.vue gehen, müssen wir diese nicht mehr als unsere Requisiten registrieren, sie werden automatisch innerhalb der Vorlage vererbt. Als praktischeres Beispiel werden wir diese ID durch die Stile ersetzen, die Sie als Dateneigenschaft festgelegt haben. Wir kombinieren dies als Stilattribut, bei dem wir unsere Hintergründe und auch unsere Farbe weitergeben werden. Innerhalb des Datenabschnitts haben wir diesen Satz innerhalb unseres GrayMode-Objekts. Jetzt wollen wir diese Werte nur weitergeben, wenn GrayModeSet wahr ist. Wir können nun den ternären JavaScript-Operator verwenden, um festzustellen, ob wir dies als Objekt übergeben werden, und wir können dies mit dem ternären JavaScript-Operator tun. Wir können zuerst überprüfen, ob GrayMode gesetzt ist. Wenn es so ist, gehen wir dann zu übergeben unser Objekt, das GrayMode ist. Wenn nicht, geben wir einfach eine leere Zeichenfolge weiter, so dass keiner dieser Stile angewendet wird. Lassen Sie uns einen Sprung zum Browser geben, und unser Toggle funktioniert jetzt. Innerhalb der Entwicklertools können wir dies sehen, wenn wir in den Elementbereich gehen, Ihre ungeordnete Liste, und dann bis zu unserem Artikel, wo wir jetzt diese dynamische Stil-Eigenschaft haben, die die Hintergrundfarbe und auch die Textfarbe hat auch. Klicken Sie auf die Sonne und dann würde unser reguläres CSS einfach gelten. Jetzt mit all dieser Arbeit und wir werden nur einige Styling es auf diese drei Tasten an der Spitze anwenden , und die Show vergangenen Ereignisse Schaltfläche neben diesem Schalter wird über auf der linken Seite bleiben. Wir werden diesen AddNew Vamp-Button nach rechts drücken. Tun Sie dies in der App.vue, bis zu den drei Schaltflächen, und wir werden unsere ersten beiden Schaltflächen innerhalb eines div gruppieren. Also können wir diese greifen, ein div hinzufügen und diese wieder hineinlegen. Der Stil, und wir werden diesem eine Klasse von Option auf den Schädelknöpfen geben. Dies bedeutet jetzt, dass unsere Optionsklasse jetzt dieses div und auch diese Schaltfläche hat. Wir können die CSS-Flexbox verwenden, um die Ausrichtung festzulegen und einige Abstände zwischen diesen beiden Abschnitten hinzuzufügen. Abschnitt mit Stil verkleinert. Zunächst einmal, diese Optionen Wrapper, der Anzeigetyp von Flex, die jetzt vielleicht konnten wir den gerechtfertigten Inhalt nicht setzen, um uns etwas Abstand zwischen zu geben. Dies gibt uns nun den Abstand dazwischen, so dass wir uns jetzt auf diese Zeit konzentrieren können und für diese einzelnen Tasten, beginnen wir mit diesem AddNew Button. Wenn wir wieder auf unsere Vorlage gehen, die Schaltfläche über auf der rechten Seite, wie diese Klasse von AddNew. Dann haben unsere beiden Tasten auf der linken Seite diese Klasse von Optionstasten. zu unserem Style-Abschnitt Gehen wirzu unserem Style-Abschnittzunächst für die Schaltfläche AddNew. Wir können dies ein wenig größer mit der Schriftgröße von drei rems und auch der Schriftfarbe, die ein RGB-Werte sein wird. So ist das Rot 92, das Grün ist 84 und dann 84 für das Blau auch. Der Cursor, dies wird ein Zeiger sein, so dass er sich ändert, wenn der Benutzer mit dem Mauszeiger über diese Schaltfläche bewegt. Entfernen Sie dann auch den Standardhintergrund und auch den Rahmen. Nun, die Optionsgruppe auf der linken Seite, die die Klasse der Optionsschaltflächen hatte. Wenn wir dann die beiden Tasten anvisieren wollen, die innen verschachtelt sind, beginnen Sie mit einer Polsterung von 0,5 Rems oben und unten und dann bei einem Rem auf der linken und rechten Seite. Dies wird nur diese Schaltflächen ein wenig größer machen und um auch einige Abstände dazwischen hinzuzufügen, können wir einen gewissen Rand auf der rechten Seite anwenden, den Hintergrund von keiner. Dann gehen wir zur Grenze. Zunächst einmal gibt uns der Grenzradius eines Rem die abgerundeten Ecken und dann die tatsächliche Grenze, die zwei Pixel breit sein wird, eine Farbe von hellem Stahlblau und auch eine durchgehende Linie. Die Schriftgröße von 1,2 rems und dann schließlich der Cursor, gerade so viel ist ein Zeiger geworden. Der letzte Schliff, um sicherzustellen, dass wir vertikale Ausrichtung von unseren beiden Tasten auf der linken Seite zu allen Knopf über auf der rechten Seite haben. Wir können sehen, dass dies bedeutet, dass es etwas niedriger ist und der Weg, dies zu beheben, innerhalb des Wrappers ist, und alles, was wir innerhalb von hier tun müssen, ist, die Eigenschaft align items in der Mitte zu setzen , die jetzt unsere beiden Abschnitte. Es gibt auch noch ein paar Dinge zu entdecken mit nicht-prop-Attributen, und wir werden diese als nächstes entdecken. 56. Weiteres zu Non-Prop-Attributen: Wir wissen jetzt, wie man grundlegende Nicht-Prop-Attribute übergibt, aber es gibt auch ein paar weitere Dinge, die wir uns ansehen können. Eines dieser Dinge ist, die automatische Vererbung abzubrechen. Wir wissen aus dem letzten Video, dass die untergeordnete Komponente die Attribute automatisch erbt. Aber wenn wir nicht wollen, dass das passiert, haben wir die volle Kontrolle darüber. Innerhalb der untergeordneten Komponente, die die event.vue ist, gehen wir zu unserem Skript-Abschnitt und wir können eine neue Eigenschaft hinzufügen, die inheritAttrs ist. Wenn wir dies dann auf false setzen, bedeutet dies jetzt, dass unsere Vorlage nicht automatisch alle Nicht-Prop-Attribute erbt, die wir übergeben. Wir können beweisen, dass dies funktioniert, indem wir umschalten, setzen wir es einfach hier, und unser Farbschema bleibt genau gleich. Aber warum sollten wir das tun wollen? Nun, sagen wir zum Beispiel, wir wollen nicht, dass alle diese Attribute auf diesem Top-Level-Wrapper vererbt werden. Nun, wir sind nicht darauf beschränkt, nur diesen Top-Level-Wrapper zu verwenden, Vue gibt uns Zugriff auf diese Attribute irgendwo innerhalb dieser Vorlage und auch in unserem Skript-Abschnitt. Lassen Sie uns dies tun, indem Sie den montierten Hook hinzufügen, und sobald diese Komponente eingehängt ist, sobald sie sich an der Konsole anmeldet, der Wert davon. $attrs. Wenn wir also auf unsere Attribute innerhalb unseres Skriptabschnitts zugreifen, verwenden wir das Schlüsselwort 'this'. Wenn wir direkt auf sie in unserer Vorlage zugreifen, denken Sie daran, wir kein Schlüsselwort 'this' verwenden müssen, und wir können direkt über die Konsole darauf zugreifen. Schauen wir uns das an. Aktualisieren. Wir haben jetzt sechs verschiedene Attribute. Da wir sechs verschiedene Ereignisse haben, wir innerhalb von hier habenwir innerhalb von hier immer noch Zugriff auf unser Stilobjekt und wir können auf alle anderen Nicht-Prop-Attribute zugreifen , die an dieses Ereignis weitergegeben werden. Dieses Dollar-Symbolattribut ist eine integrierte Ansichtseigenschaft. Wir sind jetzt frei, das überall zu verwenden, wo wir wollen. Zum Beispiel, wenn wir dies in einem anderen div platzieren wollten, können wir dies tun, indem wir v-bind verwenden. Denken Sie daran, dass wir dies derzeit nicht automatisch erben, so dass dieser Artikel keinen automatischen Zugriff hat. Jetzt können wir dies in jedem anderen Abschnitt mit v-bind platzieren und dann unsere Attribute in die Konsole übergeben. Oben in unserer App befindet sich das Optionsobjekt mit allen drei Schaltflächen. Also blasen Sie das, öffnen Sie die ungeordnete Liste. Für jedes Ereignis haben wir das Listenelement, wir haben den Artikel Wrapper, und so unseren Artikel. Dann das div mit der Klasse der Daten, lasst uns diese Schaltfläche umschalten. Dann sehen wir, dass unser Style-Attribut jetzt zu diesem Abschnitt mit diesem hinzugefügt wurde. Dies ist nur ein Beispiel dafür, wie wir diese Attribute in einem beliebigen Abschnitt für unsere Vorlage platzieren können . Etwas, das wir uns auch bewusst sein müssen, ist, wenn wir mehrere Root-Level-Elemente haben. Um dies zu sehen, lassen Sie unsere v-Bind entfernen. Wenn wir auch, kommentieren Sie unsere geerbten Attribute. Nun, wenn wir zurück zu unserer Vorlage gehen und wenn wir diesen Entfernen-Button ausschneiden, den vollständigen div Abschnitt, und dann platziert direkt über unserem Artikel. Denken Sie daran, dass dieser Artikel automatisch geerbt wurde. Alle nicht-prop-Attribute, die weitergegeben werden, aber jetzt haben wir zwei Elemente nebeneinander. Welcher würde diese Attribute automatisch erben? Nun, lassen Sie uns einen Blick in den Browser werfen. Zurück in die Entwicklertools, in die Konsole. Aktualisieren. Wir sehen nun auch einige Fehlermeldungen in der Konsole da die Vererbung nur auftritt, wenn es ein Wurzelelement gibt. Es macht also Sinn, dass dieses Verhalten existiert, denn wenn wir zwei Elemente wie dieses nebeneinander haben, müsste Vue erraten, zu welchem man montieren soll. Wir werden dies dann wieder lösen, indem wir unsere v-Bind Syntax verwenden und dann Vue.js mitteilen, an welches dieser Elemente wir binden möchten, genau wie bevor wir unsere Attribute binden. Wenn wir dann zurück zu den Entwicklertools gehen, in die Konsole, sehen wir keine Fehler mehr. Das letzte, was wir uns ansehen werden, ist auch ein vorübergehender Ereignis-Listener als Attribute. Bisher, wenn wir zu unserer App.vue gehen, und dann, wo wir unsere Event-Komponenten rendern. Bisher haben wir uns nur die Übergabe von Daten wie Stilen angesehen, aber das Übergeben eines Ereignis-Listener funktioniert genauso. Wenn wir auf ein Ereignis wie einen Klick hören wollten, können wir dies auch in unsere Komponenten bei @click weitergeben. Dann, wie bei jedem anderen Ereignis, können wir dann eine Methode auslösen, oder wir können einfach ein einfaches JavaScript machen, wie zum Beispiel einen grauen Modus, um wahr zu sein, speichern Sie dies in unserem Browser. Denken Sie daran, in der event.vue, wir binden derzeit diese Attribute an diese Schaltfläche entfernen. Nun, wenn wir auf diese Schaltfläche entfernen klicken, sehen wir die dunklere Hintergrundfarbe erschienen ist, ist es, dass wir es Graumodus setzen wahr zu sein. Wir können dies jetzt auch sehen, wenn wir zu den Entwicklertools gehen, wo wir immer noch das Konsolenprotokoll für jedes unserer Attribute machen. Wenn wir dies öffnen, und dann ist es der Zielabschnitt, sehen Sie, dass wir diese Stil-Eigenschaft haben, aber auch jetzt ein OnClick-Ereignishandler. Dies ist nur ein einfaches Beispiel dafür, wie ein Klick-Listener mit nicht richtigen Attributen funktioniert. Also werden wir das entfernen, da wir das in unserem Projekt nicht brauchen. Auch in dem Fall, wenn wir dies umschalten, übergeben wir immer noch die Attribute an die Schaltfläche. Wir möchten, dass diese tatsächlich für den Artikel gelten, also werden wir alle v-Bind entfernen und dann an unseren Artikel weitergeben. Lassen Sie uns dies testen, indem Sie auf unseren Schalter klicken, und alles funktioniert noch einmal. Auf diese Weise funktionieren Nicht-Prop-Attribute. Als nächstes werden wir einen Blick auf einige andere Möglichkeiten werfen, Daten mithilfe von Slots zu übergeben. 57. Abschnittseinleitung – Slots und dynamische Komponenten: Bisher haben wir verschiedene Möglichkeiten der Datenübergabe zwischen unseren Komponenten untersucht. Wir haben uns untersucht, wie wir Requisiten von einem Elternteil an eine untergeordnete Komponente übergeben können, und wie wir benutzerdefinierte Ereignissicherung weglassen können. Aber als nächstes in diesem Abschnitt werden wir einen Blick auf etwas werfen, das Slots genannt wird, was eine wirklich flexible Möglichkeit ist, Daten zwischen unseren Komponenten zu übergeben. Aber auch, wir haben ein neues Projekt zu stylen, das eine Dashboard-Anwendung ist. Als nächstes werden wir einen Blick darauf werfen, wie wir das herunterladen und loslegen können. 58. Kursübersicht und Startprojekt: In den kommenden Abschnitten werden wir einen Blick auf verschiedene Arten werfen, um Daten zwischen unseren Komponenten zu analysieren. Der Abschnitt wird sich auf Schlitze konzentrieren. Dann werden wir im folgenden Abschnitt einen Blick auf etwas werfen namens Bereitstellen und Inject. Um dies zu tun, haben wir ein neues Projekt, mit dem wir beginnen können. Dies ist ein Dashboard, das Sie gerade hier sehen können. Wir werden das in diesem Abschnitt aufbauen. Zu Beginn haben wir einen Übersichtsbereich , auf den wir in diesem linken Menü klicken. Dadurch erhalten wir Zugang zu unseren Daten , die zwischen unseren drei Komponenten getrennt werden. Wir haben den Artikel verkauft, wo wir die Daten, die Verkaufssumme analysieren und auch nach dem meistverkauften Artikel filtern. Der nächste Link ist für unsere Bestellungen. Dies wird durchlaufen alle unsere Bestellungen und zeigen sie auf dieser Seite zusammen mit unseren Gesamtverkaufskomponenten. Diese wird in unserem Übersichtsbereich wiederverwendet. Außerdem wird dies auch unsere Bestseller-Seite haben. Dies wird wieder alle unsere Aufträge durchlaufen. Wir extrahieren dann alle verkauften Produkte und dann werden wir sie in der Reihenfolge der verkauften Menge aufsummieren. Dieses Projekt ermöglicht es uns, ein tieferes Verständnis dafür zu bekommen, wie Slots in Vue funktionieren. Wie bei den vorherigen Projekten, wenn Sie zum GitHub-Repository gehen. Innerhalb der Downloads haben Sie die Daten eines Dashboards. Dies ist genau wie bei den vorherigen Projekten, bei denen wir ein minimales Vue CLI-Setup haben. So ziemlich der einzige Unterschied liegt in der Quelle, wir haben die Hello World Beispiele entfernt. Außerdem haben wir diese Bestellungen. js-Datei. Dies ist ein Array von Objekten und dies sind nur einige Beispieldaten, einige Beispielaufträge, um uns mit unseren Daten zu arbeiten. Alles, was es enthält, ist eine ord-Nummer oder eine Bestellnummer. Dann haben wir eine Reihe von Artikeln, die für diese Bestellung verkauft wurden. Wenn Sie den Starter heruntergeladen haben, ziehen Sie ihn in Ihren Texteditor, um zu beginnen . Dann können wir NPM installieren ausführen. Gehen Sie in das Projektverzeichnis und installieren Sie dann die Module mit NPM install. Dann wird ein Server laufen NPM laufen dienen, um unseren Entwicklungsserver zu starten. Öffnen Sie dies dann im Browser. Als nächstes richten wir die Komponenten und Seiten ein, die wir für dieses Projekt benötigen.pa 59. Projektseiten und Komponenten: Dieser Abschnitt wird sich auf etwas konzentrieren, das Slots und auch dynamische Komponenten genannt wird . Um mit diesen beiden arbeiten zu können, benötigen wir zunächst einige Inhalte, mit denen wir arbeiten können. Denken Sie daran, früher haben wir gesagt, dass Komponenten überall innerhalb unseres Quellordners platziert werden können . Wir müssen sie nicht nur auf einen Komponentenordner beschränken. In diesem Sinne werde ich einen neuen Ordner erstellen, wieder innerhalb dieses Quellverzeichnisses, und dies wird als Ansichten bezeichnet. Dies enthält auch Komponenten oder.vue Dateien, aber es ist üblich, einen Views oder einen Seitenordner zu haben, um unsere Komponenten besser zu organisieren, die wir für unsere Hauptseiten verwenden werden. So wie wir sehen, als wir einen Blick auf die endgültige Version hatten, waren die Seiten, die wir in unserer Anwendung haben, die Übersicht. Wir hatten die Verkaufsseite und auch die Bestseller. Dieser Views Ordner enthält in der Regel diese Arten von Dateien, die wir verwenden werden, um zwischen vier verschiedenen URLs zu wechseln. In Anbetracht dieser Dateistruktur haben wir im Quellordner und dann innerhalb einer Komponente auf einem Views Ordner. Beide enthalten die.vue Einzeldateikomponenten. Dieser Ansatz bedeutet, dass wir sie so organisieren können, dass die Seiten, zwischen denen wir wechseln werden, alle zusammengefasst sind. Hier sind die drei Seiten, die wir für zu Hause, Kontakt und Konto haben , auch Links innerhalb unserer Kopfzeile. heißt, wenn wir auf das Konto klicken, wird dann zum Beispiel die account.vue Datei angezeigt. Diese Seitenkomponenten müssen nicht den gesamten Inhalt der Seiten enthalten. Auch sie können aufgeschlüsselt werden und enthalten mehrere Komponenten. Dieses Beispiel neben Benutzerkomponenten auf der Seite und dieser Komponente kann auch auf beliebig vielen Seiten wiederverwendet werden. Über unsere Anwendung, wo wir beginnen können, unsere Seiten und unsere wiederverwendbaren Komponenten einzurichten . also zunächst im Komponentenordner Erstellen Siealso zunächst im Komponentenordnereine neue Datei und dies wird für unsere Bestseller.vue sein. Daneben haben wir auch die ItemsSold. Also denken Sie daran, dies sind nur die einzelnen Komponenten , die wir auf unsere Seiten platzieren werden. Danach wird die dritte für den SalesTotal sein, und schließlich ist die letzte Komponente, die wir brauchen, für unsere Sidebar. Ok, schließen Sie das. Jetzt, innerhalb unserer Vues, werden wir unsere kostenlosen Seiten erstellen, die wir vorher gesehen haben. Die erste ist also für die BestSeller, und diese Seiten oder diese Vues werden auch die.vue Erweiterung, die Bestellungen und dann auch unsere Übersichtsseite haben . So haben die.vue Dateien innerhalb unseres vues Ordners und auch die in unserem Komponenten-Ordner überhaupt keinen Unterschied, außer der Tatsache, dass sie in verschiedenen Ordnern organisiert sind. Lassen Sie uns also beginnen, indem wir einige Inhalte in unsere Vues einfügen. Beginnend mit den BestSellers, und alles, was wir hier tun werden, ist unsere Vorlage hinzuzufügen und all dies wird für jetzt enthalten ist eine Ebene 3 Überschrift, ein Klassendatei-Styling von Seitentitel, und dieser wird Bestseller sein. Wählen Sie das alles aus und kopieren Sie es in unsere Bestellungen, platzieren Sie es in, fügen Sie den Titel und dann dasselbe für die Übersicht. Dann unsere Komponenten. Nur um klar zu sein, wird die BestSeller-Komponente für die Nummer 1 meistverkauften Produkte sein und die BestSeller-Seite wird eine Liste aller Bestseller Artikel vom höchsten bis zum niedrigsten sein. Also die Vorlage, wieder ein HTML-Artikel-Tag, und dies wird eine Klasse von Statistiken haben. Wir werden dies auf der Übersichtsseite verwenden, also haben wir dies als Komponente auf der linken Seite und dann haben wir die ItemsSold und dann das SaleTotal auch. Lassen Sie uns nun eine Stufe 4 Überschrift des meistverkauften Artikels geben. Wählen Sie alle aus und kopieren Sie sie. Bis zu itemsSold können wir dies einfügen. Alles, was Sie tun müssen, ist, diese Überschrift der Stufe 4, die ItemsSold, zu ändern. Als nächstes wird der Salestotal, der auch sehr ähnlich sein wird , die den Titel des Gesamtumsatzes haben wird, und im Moment werden wir dies durch leere signiert lassen. Ok, gut. Jetzt haben wir einige Inhalte an Ort und Stelle. Wir haben unsere Ansichten, alle Seiten und auch einige Komponenten. Im nächsten Video werden wir einen Blick darauf werfen, wie wir Daten mithilfe von Steckplätzen an diese Komponenten weitergeben können. 60. Einführung in Slots: Frühere Videos konzentrierten sich auf die Weitergabe von Daten zwischen Komponenten, die Verwendung von Requisiten und das Ausgeben benutzerdefinierter Ereignisse. Diese kommenden Videos werden Ihnen zeigen, wie Slots in Vue.js funktionieren, was eine wirklich flexible Möglichkeit ist, Daten in unseren Apps zu übergeben. Dieses Beispiel, das wir uns im letzten Video angeschaut haben, enthielt eine Seitenkomponente, die die account.view war. Wir verwenden die darin verschachtelten Komponenten wieder, wir geben Informationen an diese Komponenten mit Requisiten weiter, genau wie wir hier für den Namen des Benutzers sehen. Eine andere Möglichkeit, unsere Komponenten auszugeben, ist die Verwendung eines öffnenden und schließenden Tags anstelle des selbstschließenden Stils von vorher. Dieser Stil funktioniert auch genau gleich. Für diesen Stil lässt uns nun auch die Möglichkeit , Dinge zwischen unseren Komponenten Tags hinzuzufügen. Es würde in einer Level-3-Überschrift passieren, aber was genau passiert mit dieser Überschrift zwischen unseren Tags? Nun, das liegt ganz an uns. Wenn wir nichts tun, wird der Inhalt ignoriert oder wir können Slots verwenden, um diese Daten in unseren Benutzerkomponenten zu verwenden. Mit Blick auf unsere Benutzerkomponenten Vorlage auf der rechten Seite haben wir ein weiteres Element, das eine kostenlose Liste Elemente enthält, und das ist alles ziemlich Standard. Werfen Sie einen Blick über dieses nav, und wir haben, was ein Schlitz genannt wird. Slot wirkt wie ein Halter für den Inhalt, den wir in sie zwischen den Komponenten öffnen und schließen Tags übergeben , und in unserem Fall war es eine Ebene 3 Überschrift. Dieses Slot-Element ist sehr flexibel und kann überall in der Vorlage unserer Komponente platziert werden. Dieser Ansatz kann Ihnen helfen, darüber nachzudenken, warum wir sogar Slots zur Verfügung haben , wenn wir Requisiten einfach weitergeben können? Nun, das ist eine sehr gültige Frage und eine, die sehr verständlich ist, wenn man ein einfaches Beispiel wie dieses betrachtet. Aber es ist auch viel mehr zu Slots und viel mehr Anwendungsfälle, und wir werden uns diese in den kommenden Videos ansehen. 61. Übersicht Seitenstruktur: Sie sehen diese Slots in Aktion innerhalb unseres Projekts. Wir brauchen zunächst einige Inhalte, um mit denen wir arbeiten können. Derzeit haben wir alle unsere Ansichten und unsere Komponenten eingerichtet, aber wir haben noch nichts auf der Seite registriert. Um dies zu tun, werden wir zu unserer App.vue gehen. Im Inneren haben wir dieses div mit der Klasse von app_wrapper. Diese Klasse verweist einfach auf einige Stile, die die Schriftfamilie und auch die Grundschriftfarbe festlegen werden. Was wir tun werden, ist eine gewisse Struktur zu dieser App hinzuzufügen, und auch importieren und registrieren Sie unsere erste Seite, die die overview.view ist. Um dies zu tun, importieren wir dies genau wie alle normalen Komponenten. Der Name ist Übersicht und dies ist von./. Dies befindet sich in unserem Views Ordner, und dann Komponentenname ist Übersicht. Richten Sie unseren Bereich Komponenten ein. Drinnen hier haben wir nur eine Komponente für jetzt, also übergeben Sie es in. Wir sehen einen Fehler, weil wir dies noch nicht verwendet haben, aber wir werden zuerst unsere Struktur in unserem app_wrapper hinzufügen. Das erste, was wir tun werden, ist, einen Header-Abschnitt zu erstellen, und dies wird einen Level 1 Titel mit dem Text von Chris Dashboard enthalten. Dieser Header Abschnitt ein div mit der Klasse des Inhalts, und dieser Abschnitt wird zwei verschachtelte Abschnitte enthalten. Die erste ist die Seitenleiste mit Links zu unseren kostenlosen Seiten, und dann auf der rechten Seite werden wir einige Inhalte haben, die für jede dieser Seiten, die wir angeklickt haben. Zuallererst das beiseite Element. Dann danach, das Haupt. Der beiseite Abschnitt für jetzt wird nur drei verschiedene Links enthalten. Wir brauchen href nicht, weil wir es mit View steuern werden. Der erste Link ist „Übersicht“. Ich habe zwei weitere Seiten, die zweite ist Bestellungen, und die dritte ist Bestseller. Das war's für die beiseite Bar. Dann in den Hauptbereich, was wir tun werden, ist, zuerst, in diesen kleinen Tags übergeben, und im Inneren von hier werden wir einige Brotkrumen passieren, um den Benutzer genau wissen zu lassen, wo sie sich auf unserer Website befinden. Dies würde sagen, etwas genau wie Dashboard/Übersicht. Wir ändern diesen Abschnitt je nachdem, auf welcher Seite wir uns gerade befinden. Um dies zu stylen, schneide ich auch den Dashboard-Abschnitt aus und füge ein Span-Element hinzu. Also geben wir diesem eine andere Farbe innerhalb unseres CSS. Danach wird der tatsächliche Seiteninhalt, und für jetzt haben wir nur eine Komponente angezeigt. Dies ist die Übersicht, wir werden sehr bald einige Daten zu dieser Übersicht veröffentlichen. Aber jetzt gehen wir zu den Stylesheets. Wir werden mit unserem Header-Abschnitt beginnen. Der Kopfzeilenabschnitt wird eine weiße Hintergrundfarbe haben. Es wird auch die CSS-Flexbox verwenden. Erstens, Hintergrund, der eine weiße Farbe ist. Dann fügen Sie einen Rahmen oben und auch unten hinzu. Dies wird ein Pixel, eine durchgezogene Linie und dann die Farbe von ddd sein. Diese Chris graue Linie ganz oben, werden wir auch eine auf der Unterseite hinzufügen, und dann bald werden wir auch eine vertikale Linie hinzufügen, die unsere Seitenleiste nur Inhalt trennen wird . Duplizieren Sie das. Ich werde auch einen auf der Unterseite hinzufügen. Nach unserem Header-Abschnitt haben wir unseren Inhaltsbereich, das div ist, das sowohl den beiseite als auch den Hauptabschnitt umgibt. Dies ist im Grunde der gesamte Inhalt unter unserem Header. Um dies zu formatieren und zu positionieren, stellen wir die Anzeigezeit auf Flex ein. Die Standard-Flexrichtung ist unformatiert, wenn Sie Flexbox verwenden. Nun werden diese beiden Abschnitte nun nebeneinander angezeigt. Um die Breite jedes einzelnen festzulegen, werden wir die Flexbox-Schriftarten wieder verwenden, und der beiseite Abschnitt kann den Flex-Wert von 1 haben, und dann wird der Hauptbereich den Flex-Wert 3 haben. Das bedeutet, dass der Hauptbereich dreimal die Breite der Seitenleiste einnehmen wird, über der beiseite Leiste der Flexwert von 1. Aber auch viel in Grenzen, aber dieses Mal wird dies vertikal sein. Dann müssen wir diesen Rahmen rechts platzieren, und das ist unsere Linie gerade da, und wir müssen sicherstellen, dass diese Zeile die volle Höhe der Seite hat. Was wir für diesen Abschnitt tun werden, ist, dass die minimale Höhe 100 Prozent des Ansichtsfensters beträgt. Diese Linie geht jetzt bis ganz nach unten. Jetzt zu unserem Hauptteil von auf der rechten Seite, es hat den Haupt-Wrapper. Der Flex-Wert von 3, also benötigt dies etwa das Dreifache des verfügbaren Platzes von der Seitenleiste und dann den Füllwert 1ram. Das letzte, was in diesem Abschnitt zu tun ist, ist auch, die Farbe unserer Paniermehl zu ändern. Also werden wir jetzt das Armaturenbrett mit dieser Klasse von Blau umgeben. Wir können diese nun verwenden, um die Farbe zu setzen. Die Textfarbe hat einen RGB-Wert von 25, 149 und 243. Wir können auch Platz innerhalb dieses Ordners /2 von HTML alles, was wir tun müssen, ist ein Leerzeichen hinzuzufügen kurz vor und nach und da gehen wir. Dies gibt uns jetzt eine Basis, um zu beginnen, unsere Slots im kommenden Video zu erkunden. 62. Slots in der Praxis: In den Folien ein wenig früher, haben wir festgestellt, dass wir Daten an eine untergeordnete Komponente übergeben können , indem wir sie zwischen den Komponenten übergeben, Tags öffnen und schließen. Diese Methode wird Slots genannt, und wir werden jetzt einige Slot-Inhalte einrichten. Die Seite, die wir derzeit innerhalb von hier gesetzt haben, ist diese Übersicht, die wir in der App.vue registriert haben. Auf dieser Seite werden nun unsere drei Komponenten des Bestsellers, der verkaufte Artikel und auch der Gesamtumsatz angezeigt . Genau wie hier in der endgültigen Version. Obwohl dies, müssen wir diese zuerst in unserer overview.vue Datei registrieren. Wir werden hier hineingehen und um dies zu tun, erstellen wir unseren Skript-Abschnitt und registrieren dann unsere drei Komponenten. Der erste Import wird für verkaufte Artikel sein. Dies wird von dem Ort sein, der.. /components und dann in die verkauften Artikel Komponenten, die sich ändern. Außerdem können wir dies durch das @-Symbol ersetzen, und dies ist eine Verknüpfung zum Quellordner. Wir müssen das noch zwei Mal duplizieren. Die zweite ist für die Umsatzsumme, ändern Sie den Dateipfad. Der dritte ist der Bestseller. Bis zum Export. Das erste, was ist, einen Namen für diese Komponente zu erstellen, und meins wird die Übersicht sein. Dann registrieren Sie unsere drei Komponenten, damit wir sie innerhalb unserer Vorlage verwenden können. Wir haben Artikel verkauft, die Gesamtumsätze und auch den Bestseller. Um diese anzuzeigen, erstellen wir einen neuen Abschnitt direkt unter unserem Titel. Dieser Abschnitt wird dann unsere drei Komponenten anzeigen und dann werden wir zwischen unseren Slot-Inhalten verschachteln. Der erste ist verkaufte Artikel und schließt auch ab. Der zweite ist für den Gesamtumsatz und dann für den Bestseller. Speichern Sie das und wir sehen die Titel für alle drei unserer Komponenten, die innerhalb unserer Level 4 Überschrift beginnen. Jetzt werden wir unsere Slot-Inhalte zwischen jedem dieser Elemente übergeben. Genau wie wir auf der endgültigen Version sehen, haben wir die verkauften Artikel, die Verkaufssumme und auch den meistverkauften Artikel, aber jetzt wird dies nur einige statische Daten sein. Aber sehr bald werden wir alle diese Werte erfassen , die in unserer Datei orders.js enthalten sind. Zurück zu unserer Übersicht und zwischen den verkauften Artikeln werden wir unsere Slot-Daten weitergeben. Dies kann alles wie normaler Text sein. Wir können es in HTML-Elementen übergeben und auch js Daten zwischen doppelten geschweiften Klammern anzeigen. Ich werde nur die Spanne ausgeben, und die Spanne wird auch eine Klasse haben. So können wir etwas Styling anwenden, oft Lichttext, in einen beliebigen Wert im Inneren platzieren und diesen kopieren. Der nächste ist für unsere Verkaufssumme, Platz in jedem Währungssymbol und auch jeden Geldwert zu. Endlich der Bestseller. Jedes Produkt für jetzt ist in Ordnung, ich werde in der Vue Hoodie in Größe Medium platzieren. Speichern Sie das, und im Moment sehen wir nichts im Browser. Dies liegt daran, dass wir Vue.js zuerst genau mitteilen müssen, wo dieser Inhalt in unseren Komponenten angezeigt werden soll . Das ist ziemlich einfach zu tun. Alles, was wir tun müssen, ist zu unseren Komponenten zu gehen und dann die Slot-Elemente hinzuzufügen. Dies ist im Grunde ein Ausblick für den Inhalt, den wir durch diese Komponente gehen. Wir können überall hier drinnen hingehen. Aber ich werde dies unter der Ebene 4 Position platzieren, das gleiche für den Umsatz insgesamt, wie in unserem Slot. Wir sehen die Werte, die darin erscheinen unter jedem unserer Titel, ein Bestseller. Andere Slots in hier auch, und dies erscheint jetzt auf der Seite. Gut. Nun lassen Sie uns ein wenig Stil in über auf der Übersichtsseite hinzufügen. Am Anfang, denken Sie daran, dass alle drei dieser Abschnitte innerhalb dieses Abschnitts Wrapper umgeben waren. Lassen Sie uns diese über die Seite gehen, genau wie wir hier sehen, wir werden diesen Abschnitt anvisieren und den Anzeigetyp auf flex setzen. Um dies zu tun, benötigen wir einen Style-Abschnitt. Dies kann auch Gültigkeitsbereich sein, also gilt nur für diese Komponente. [ unhörbar] Abschnitt und stellen Sie das Display auf Flex ein. Einige Abstände, können wir auch die Vorteile der gerechtfertigten Inhalte und verteilen alle verfügbaren Speicherplatz zwischen diesen drei Elementen sein. Platzieren Sie auch einen Rahmen um alle drei dieser Abschnitte, fügen Sie ein Ziel, diese einzelnen Überschriften und Slot-Inhalte. Wir werden jetzt auf die App.vue gehen. Dieser Stilabschnitt ist nicht zulässig, daher gelten alle diese Stile für alle Komponenten, einschließlich aller drei dieser Abschnitte. Beginnen Sie unsere Level-4-Überschrift, die der Titel für alle drei unserer Komponenten ist. Wir werden jeden Standard-Rand entfernen, indem wir diesen Wert auf Null setzen, und fügen dann einige Polsterung am Ende dieses Titels hinzu, um uns mehr Abstand von unserem Slot-Inhalt zu geben. Dieser Slot-Inhalt hatte auch eine Klasse. Wenn wir auf die Übersichtsseite und bis zu den Vorlagen gehen, hatte dies die Klasse des Light-Textes. Lasst uns das schnappen. Alles, was wir in diesem Abschnitt tun werden, ist das Schriftgewicht auf einen Wert von 300 zu reduzieren. Um die Grenze um jedes dieser Elemente anzuwenden, wenn wir in die Komponente gehen, jeder dieser Artikel hat die Klasse der Statistiken. Hier drinnen setzen wir den Rahmen auf das Gewicht eines Pixels, eine durchgezogene Linie und eine hellgraue Farbe, die ddd ist. Der Grenzradius von fünf Pixeln. Dann befindet sich ein interner Raum mit dem Füllwert , der ein 1rem sein wird. Gut. Lassen Sie uns unsere Komponenten jetzt stylen. Nur um mit diesem Header-Abschnitt zu arbeiten, werde ich die Überschrift der Ebene 1 reduzieren. Dies ist ein wenig zu groß, daher werden wir den Header H1 markieren und dann die Schriftgröße reduzieren. Versuchen wir 1.4 rems, und das sieht besser aus. Ich kann auch mit der Schriftfamilie herumspielen, ich werde das entfernen und es zu Avenir ändern, aber Sie können es auch ändern, um Ihren Stil anzupassen. So können wir Slots auf einer sehr einfachen Ebene verwenden. Im nächsten Video werden wir einen Blick auf den Umfang der Slots werfen und auch, wie dynamische Daten übergeben werden. 63. Dynamische Daten und Umfang weitergeben: Im letzten Video haben wir uns die Übergabe von Daten als Slot in Form eines HTML-Elements angesehen. Dies kann alles sein, was wir wollen, einschließlich eines einfachen Textes und auch dynamischen Inhalts. Diese drei Abschnitte haben wir hier verkauft Artikel, Umsatz insgesamt und Bestseller enthalten alle dynamischen Inhalt als Requisiten von der übergeordneten app.vue. Jetzt, auf der app.vue, setzen wir jetzt unsere kostenlosen Requisiten in die Übersichtskomponente ein. Die erste Requisite wird die Menge der verkauften Artikel sein, die gleich 32 ist. Dies kann wiederum ein beliebiger Wert sein. Es spielt nur noch keine Rolle. Auch wenn es um Zahlen geht, müssen wir auch v-bind verwenden. Dies wird als JavaScript-Ausdruck und nicht als Zeichenfolgenwert ausgewertet. Als Nächstes wird der Gesamtumsatzwert. Füge hier alles hinzu. Der dritte wird für den Bestseller sein. Dies muss nicht v-bind verwenden, da dies nur ein Zeichenfolgenwert sein wird. Da es sich um Requisiten handelt, müssen wir auch zu unserer Übersichtskomponente gehen und diese in unserem Skript registrieren. Wir können auch einige einfache Validierung hinzufügen. Also werden wir das als Objekt einrichten. Der erste ist der Gesamtumsatzwert, und der Typ ist Zahl. Die zweite ist die Menge der verkauften Artikel. Dies wird auch die Art der Nummer haben. Der dritte ist für den Bestseller. Dieser hat den Typ der Zeichenfolge. Diese drei Requisiten können nun den Inhalt ersetzen, den wir in unseren Slot übergeben haben. Die erste, entfernen Sie den ersten Wert von sieben, und wir können dies innerhalb der doppelten geschweiften Klammern durch unsere Requisite ersetzen, die Menge der verkauften Artikel war. Die nächste, können wir immer noch in das Währungssymbol verlassen, aber ersetzen Sie den Wert durch die Requisite, die Gesamtverkaufswert war. Der dritte, für unseren Bestseller, und das fehlt, also schauen wir uns mal an. Das will nur ein Kleinbuchstaben B sein, und da gehen wir. Das alles funktioniert jetzt mit unseren dynamischen Daten. Wie Sie sehen können, sind Slots egal, ob es sich bei den Daten um Text, HTML-Element oder sogar um dynamische Inhalte handelt. Aber welche Komponenten haben beim Übergeben dynamischer Daten, genau wie wir hier sind , Zugriff auf diese Daten? Innerhalb unserer Übersicht, zum Beispiel, haben wir diese Menge von Artikeln verkauft Requisite. Dies ist innerhalb unserer Übersichtskomponente, aber es wird auch dann innerhalb unserer verkauften Artikel gerendert Komponente. Welche dieser beiden Komponenten hat Zugriff darauf? Nun, Sie haben vielleicht schon erraten, dass diese Datei, da wir gerade in unserer Übersichtsdatei verwenden, vollen Zugriff auf diese Daten hat. Das ist richtig. Aber was ist mit der untergeordneten Komponente, bei der es sich um verkaufte Artikel handelt, in denen diese Daten innerhalb von gerendert werden? Nun, lasst uns das packen und einen Blick in die verkaufte Komponente werfen. Dann können wir versuchen, dies innerhalb der doppelten geschweiften Klammern auszugeben. Wir sehen jetzt keine Daten angezeigt, so dass dies nicht funktioniert. Aber wie wäre es damit, als Requisite verfügbar zu sein? Nun, wir könnten das auch versuchen. Wir könnten in das Drehbuch setzen. Wir können sehen, dass wir über Requisiten Zugang dazu haben. Dieser, wir haben immer noch keinen Zugriff auf diese Daten. Dies bedeutet nun, dass die eigentliche untergeordnete Komponente, die den Inhalt anzeigt, nur dafür verantwortlich ist, diese im Browser zu präsentieren. Es hat keinen Zugriff auf unsere Variablen. Diese sind nur im Bereich des übergeordneten Elements verfügbar. Wenn wir den Zugriff auf diese Daten innerhalb dieser beiden Komponenten wollten, gibt es einen Weg, wie wir dies tun können, und dies ist durch das, was ein Scoped Slot genannt wird. Wir werden uns diese sehr bald ansehen. 64. Fallback-Inhalt: Hier hier haben wir diesen Slot überleben die Inhalte, die weitergegeben wurden, aber was ist, wenn wir etwas zwischen diesen beiden Tags auch hinzufügen? Nun, wir tun dies, wenn wir einige Fallback-Inhalte bereitstellen wollen , um zu zeigen, ob nichts an den Slot übergeben wird. Wir können vielleicht eine Nachricht hinzufügen, die keine Daten zur Verfügung hat. Über zum Browser, wir sehen diese Nachricht nur noch nicht, aber wenn wir zu den Eltern gehen, was ist die Übersicht, und dann entfernen Sie vorübergehend die Span-Elemente, die wir in an Artikel verkauft übergeben. Dies wird nun durch diese Meldung ersetzt, dass keine Daten verfügbar sind. Dies wird für jeden Fallback-Inhalt verwendet, wenn wir unseren untergeordneten Komponenten keine Slotdaten zur Verfügung stellen Ich möchte dies rückgängig machen und diese Datei speichern, aber das ist nützlich für eine Reihe von Situationen. Zum Beispiel haben wir möglicherweise nicht immer einige Slot-Daten, die an die untergeordneten Komponenten weitergegeben werden, vor allem, wenn wir die Komponenten mehrfach wiederverwenden oder es eine Verzögerung bei der Erzeugung der Slot-Daten geben kann, also wenn diese Daten, die wir platziert haben innerhalb eines wurde er vielleicht aus einer Datenbank oder einer API holen. Während wir darauf warten, dass diese Daten zurückkommen, möchten wir möglicherweise einige Ladeauswahlfelder oder eine Platzhalternachricht anzeigen. Wenn wir eine Komponente verwenden, sagen wir fünf Mal in unserem Projekt, wenn die Daten für vier von ihnen gleich sein werden, könnten wir den Fallback-Inhalt verwenden um den Standard für diese vier bereitzustellen -Komponenten. Dann änderte es die fünften Komponenten durch Übergabe von Slotdaten. Das ist wirklich einfach, aber auch wirklich nützlich. Als Nächstes werden wir subjektive Slots verfolgen und entdecken wie wir mehrere Slots in unseren Komponenten platzieren können. 65. Benannte Slots: Hier in unserer Übersichtsseite links, innerhalb jeder dieser drei Komponenten, passieren wir derzeit nur ein einziges Element. Das ist völlig in Ordnung, aber für komplexere Situationen ist es möglicherweise nicht ideal, viel mehr Inhalte in einen einzigen Slot zu übergeben. Für diesen Anwendungsfall haben wir, was Name Slot genannt wird. Dies ist eine Möglichkeit, diesen Slot-Inhalt an verschiedene Positionen in den untergeordneten Komponenten zu verteilen . Wir könnten mehrere Codezeilen haben und sie dann in unseren Komponenten an verschiedenen Orten platzieren . Der erste Schritt, um dies zu tun, besteht darin, unseren Inhalt grundsätzlich innerhalb des Template-Elements zu gruppieren . Dafür werden wir unsere erste Vorlage erstellen. Dadurch wird ein Symbol an alle drei dieser untergeordneten Komponenten weitergegeben. Wir haben unsere erste Vorlage und wir werden auch in einer zweiten Gruppe innerhalb der Vorlage 2 hinzufügen. Was wir hier innerhalb der zweiten Vorlage tun werden, ist, unsere ursprünglichen Spannelemente zu greifen und diese nach oben in den zweiten Abschnitt zu verschieben. Der erste Abschnitt, den wir in unserem Symbol hinzufügen werden, und dies wird auch ein Span-Element sein. Die HTML-Entität für dieses Symbol wird das kaufmännische Und-Zeichen, der Hash und dann 128200 gefolgt von diesem Semikolon sein. Da diese Namens-Slots sein werden, müssen wir jedem dieser Vorlagen einen eindeutigen Namen geben. Wir können dies mit v Schlitz tun. V-Slot ist auch eine Direktive. Ich werde den ersten das Symbol nennen. Dann auf die zweite Vorlage, wieder hinzufügen v Schlitz. Dieser wird für die Menge sein. Also werde ich dies sparen, und wir befinden uns zwischen den verkauften Artikeln Wenn wir also zu diesen Komponenten gehen, müssen wir jetzt unsere beiden Standorte bereitstellen, an denen diese angezeigt werden sollen. Zu Beginn geht das Icon an einen Platz neben unserem Level 4 Kopf in. unseren Slot hinzu, und dann Abbildung, welchen Inhalt wir hier platziert werden wollen, fügen wir die Namensattribute hinzu. Dies wird für den Icon-Bereich und der zweite für die Menge. Schließen Sie den Browser und wir sehen unser Icon und auch unsere Menge zu. Wenn wir auch wollten, könnten wir auch einen dieser Slot-Namen weglassen, und dies als Standard verwenden. Dies lässt nur einen unserer Slots mit einem Namen übrig, und dies wird für den Standardinhalt sein. Die Art und Weise, wie wir dies festlegen, besteht darin, zu unserer Vorlage zurückzukehren dies als Standardspeicherort festzulegen und es funktioniert immer noch genau gleich. Lassen Sie uns jetzt nach unten gehen und tun das gleiche für unsere Verkaufssumme und den Bestseller auch. Diese benötigen eine Vorlage und wir können diesen Gesamtverkaufswert aufbringen und dann unser Symbol innerhalb des ersten Abschnitts platzieren. Dies wird auch eine Spanne sein, wenn dies nur das kaufmännische Und-Zeichen ist, das harte 128176. Fügen Sie unserer Vorlage hinzu, fügen Sie die V-Slot-Direktive hinzu und diese ist für das Symbol 2. Die zweite in der V-Slot-Direktive platziert, und diese kann als Standardstandort bis zum Bestseller bleiben und dies wäre genau das gleiche. Die Vorlagen und wir werden in den v-Slot platzieren, ist lustige Elemente für das eigentliche Symbol und die Entität dafür ist das kaufmännische Und-Zeichen, der Hash 128293. Der letzte ist unsere Standard-Slots. Wir werden eine Spanne haben und diesem auch den Namen geben , der standardmäßig sein wird. Okay, dann können wir unsere Verkaufsstellen finden und die erste war für die Gesamtsumme. In diese Komponente Platz in den Schlitz für unsere Icon-Position. Es hat den Namen des Symbols. Dann können wir unseren zweiten Slot für den Standardstandort verlassen. Schließlich werden die Bestsellergegner das gleiche tun wie die letzten beiden Komponenten. Fügen Sie unsere Slots hinzu, platzieren Sie unseren Namen des Symbols und wieder, dies ist der Standardinhalt 2. Gut. Wir können im Browser sehen wir alle unsere drei Icons haben und wir haben immer noch den Inhalt, der weitergegeben wird. Das letzte, was man sich ansehen muss, ist eine Kurzschrift, die wir auf unsere v-Slot-Direktive setzen können. Wenn wir zurück zur Übersicht, alles, was wir tun müssen, um dies zu verkürzen, ist v Slots mit dem harten zu ersetzen. Wir können dies für unser Symbol und auch den Standard-Slot tun 2, ersetzen Sie alle sechs von diesen. Speichern Sie unsere Datei, und alles funktioniert immer noch wie zuvor. 66. Angelegte Slots: Dies bringt uns jetzt zu Scoped Slots. Hier beginnen die Dinge etwas interessanter im Hinblick auf den Zugriff auf unsere Daten zu werden. In dieser overview.view-Datei übergeben wir derzeit dynamische Daten an diese untergeordneten Komponenten, oder wenn es umgekehrt war und diese Daten innerhalb unserer untergeordneten Komponenten lebten, was wir innerhalb dieser Datei darauf zugreifen wollten. Nun, wir können das mit Scoped Slots machen. Früher haben wir eine Sidebar-Komponenten hinzugefügt, aber wir haben noch keine Komponenten hinzugefügt. Also gehen wir zu diesem und wir können beginnen, innerhalb unserer sidebar.view zu arbeiten, indem wir unsere Vorlage platzieren, dies wird unsere freien Links innerhalb der Seitenleiste rendern und uns auch eine Chance geben, Scoped Slots zu betrachten. Platzieren Sie die Navigation und ungeordnete Liste, dann können wir durch unsere Seiten mit dem Listenelement Schleife. Wir haben diese noch nicht erstellt, aber wir werden diese Seiten aufrufen, also werden wir durch die Seite in Seiten durchlaufen auch einen dynamischen Schlüssel binden. Dies wird einfach die Seite sein, nur der Einfachheit halber. Innerhalb von hier, platzieren Sie es in einem Link-Element, und dies wird nur zwischen den doppelten geschweiften Klammern, unserer Seite ausgegeben. Dies ist alles, was wir für die Vorlage brauchen, also gehen wir zum Skriptabschnitt, können wir unsere Dateneigenschaft für alle Seiten einrichten. Seiten wird ein ziemlich einfaches Array sein, also fangen wir einfach in unseren freien Strings an. Die erste war Übersicht, wir haben Bestellungen und auch Bestseller. Dies wird gerendert und in unserer App.vue registriert werden. Gehen Sie zu unserem Skript und wir können zuerst unsere neuen Komponenten importieren. Dies ist die Seitenleiste, die über den Pfad verfügbar ist, bei dem es sich um Punktschrägstrichkomponenten handelt. Dann Schrägstrich Seitenleiste. Registrieren Sie dies innerhalb der Komponenten, dann können wir dies in unserer Vorlage verwenden. Der Ort, um dies zu tun, wird innerhalb des beiseite Abschnitts sein. Wir können unsere kostenlosen bestehenden Links entfernen und dann in unserer Seitenleiste platzieren. Gut, jetzt haben wir unsere kostenlosen Links immer noch angezeigt, aber jetzt sind diese von unseren Sidebar-Komponenten. Aber gehen Sie zu unseren sidebar.vue Komponenten, wir haben diesen Link gerade hier, die unsere dynamischen Daten sind, die in diesen untergeordneten Komponenten lebt. Stellen Sie sich als Beispiel vor, ob wir diese Navigation mehrmals in unserer Anwendung verwenden werden. Möglicherweise möchten wir, dass dieser Link an verschiedenen Orten anders gestaltet wird oder dass er verschiedene einzigartige Layout-Optionen hat. Wie wir bereits wissen, wenn wir das ausschneiden und dann zwischen unserer Sidebar platzieren würden, wird dies nicht funktionieren, da der Umfang dieser Seite innerhalb der Sidebar-Komponenten ist , nicht diese app.vue. Wenn dies umgehen wollte, müssten wir Scoped-Slots nutzen damit wir Daten zurück Schleife an seine Eltern übergeben können. Zuerst in der sidebar.vue passieren wir zuerst die Slot-Komponenten, wo wir möchten, dass diese Daten angezeigt werden. Wir wollen jetzt übergeben ist Seite Variable Backup an die Eltern. Die Art und Weise, wie wir dies tun können, besteht darin, eine dynamische Attribute zu binden. Ich möchte das nicht konsistent halten und diese Seite aufrufen. Diese Attribute werden als Slot-Requisiten bezeichnet. Wir können jetzt auf diese Attribute innerhalb der übergeordneten Komponenten zugreifen, die die app.vue ist. Zuerst werden wir diesen Link in eine Vorlage einbinden und ihm den Standardspeicherort zuweisen. Genau wie wir uns im letzten Video angeschaut haben, können wir unsere Vorlagen erstellen und dann die Slots oder die Kurzschrift verwenden, die der Hash ist. Dann geben Sie diesem den Standardort, an dem wir jetzt unseren Link wieder hineineinfügen können. Dies sieht so ziemlich das gleiche wie das letzte Video, aber der Unterschied diesmal ist hier werden wir einen Wert an v Schlitz übergeben. Dieser Wert ist ein Variablenname , den wir alles nennen können, was Sie wollen. Um diese beschreibend zu halten, werde ich diese SlotProps nennen. Nun, indem wir diese Variable verwenden, haben wir Zugriff auf die Daten, die von unserem Slot weitergegeben worden waren. Jetzt haben wir Zugriff auf diese Seite. Anstatt direkt auf unsere Seite zuzugreifen, müssen wir zuerst auf unsere Slot-Requisiten zugreifen, dann auf die Seitenattribute. Wir sehen sofort, dass unsere kostenlosen Seiten jetzt in der Seitenleiste erscheinen, so dass wir jetzt diese Daten von unseren untergeordneten Komponenten erhalten. Alternativ, anstatt auf alle unsere Requisiten auf diese Variable zugreifen, können wir die JavaScript-Destrukturierung verwenden. Wir können jede unserer Variablen oder eines unserer Attribute, wie unsere Seite, herausziehen . Jetzt können wir direkt in unserer Vorlage darauf zugreifen. So funktioniert ein Slot-Requisite. Sie denken vielleicht mit all dem, warum haben wir eine andere Möglichkeit, Daten zu übergeben, wenn wir bereits alle Requisiten und Emisierungen haben. Nun, hier geht es darum, uns als Entwickler absolute Flexibilität zu geben. Scoped Slots öffnen die Tür zu so vielen verschiedenen Dingen. Zum Beispiel, wenn diese Seite hatte Benutzerauthentifizierung und wir hatten Zugriff auf unseren Benutzer aus unseren Daten. Als Beispiel, wenn wir eine Dateneigenschaft wie diese hatten, und wenn dieses Beispiel einen Benutzer Objekte hatte. Wenn Sie nur bestimmte Links anzeigen wollten, wenn der Benutzer eingeloggt war, müssen Sie diese verwendeten Objekte dann über Requisiten an die Sidebar-Komponenten übergeben. jedoch Scoped Slots verwenden, könnten wir genau das gleiche Setup tun und wir können überprüfen, ob der Benutzer anwesend ist , indem wir dieses v-if auf diese übergeordneten Komponenten platzieren, können wir überprüfen, ob der Benutzer existiert, bevor wir einen unserer Links rendern. Ein Benutzer ist momentan vorhanden. Wenn wir zu null wechseln, wird dies dann unsere freien Links entfernen. Dies ist nur ein Beispiel, um zu vermeiden, dass die Requisiten an die untergeordneten Komponenten übergeben werden. Wir können dies auch entfernen, da dies nicht erforderlich ist. Auch ein weiteres Beispiel, wenn wir diese Komponente an mehreren Standorten mieten wollten, könnten wir den Inhalt einfach so duplizieren und wir könnten jedem unserer Listenelemente verschiedene Klassen hinzufügen. Dies könnte beispielsweise in der Seitenleiste platziert werden. Wir wollen vielleicht, dass das Styling für den Header anders ist. Dies wird uns die Flexibilität geben, vielleicht eine andere Farbe Links hinzuzufügen, wir könnten auch die Kopfzeilennavigation horizontal über die Seite platzieren, die Seitenleiste könnte vertikal sein und wir haben volle Flexibilität zu tun, was wir wollen beides einzigartig zu halten. Lassen Sie uns dies entfernen und runden Sie dieses Video ab, indem Sie unseren kostenlosen Links etwas Styling hinzufügen. [ unhörbar] dies über in der Seitenleiste, erstellen Sie diesen Stilbereich. Lassen Sie uns zunächst für die ungeordnete Liste gehen. Wir können die Aufzählungszeichen entfernen, indem Sie den List-Stil auf „none“ setzen. Dann setzt es jede Standard-Polsterung auf Null zurück. Dann können wir diesen Links mit dem Listenelement etwas Platz hinzufügen , indem wir plötzlich 10 Pixel oben und unten und dann Null links und rechts auffüllen . Es hat einige Abstände zwischen diesen drei Links. 67. Bestellseite: Bisher haben wir nur an dieser Übersichtsseite gearbeitet. Bald werden wir dynamische Komponenten verwenden, zwischen diesen drei Seiten wechseln. Aber zuerst fügen wir unseren Inhalt zu den Bestellungen und Bestsellern hinzu. Die Seite Bestellungen besteht aus zwei Abschnitten. Für den ersten Abschnitt werden wir in den Umsatz Gesamtkomponenten platzieren , so dass wir den Gesamtverkaufswert sehen können. Dann unten wird ein neuer Abschnitt erstellt, der alle unsere Bestellungen anzeigen wird. Gehen wir zu unserer Bestellseite, öffnen Sie die Seitenleiste, und dies ist im Abschnitt Ansicht. Unser erster Abschnitt, knapp unter der Überschrift der Ebene drei. Dies wird ein Slot sein, der den Inhalt unserer Verkäufe Gesamtkomponenten ausgibt. Geben wir ihm einen Namen von total. Wir werden dies in einem Augenblick über unsere Vorlage weitergeben. Der zweite Abschnitt, wird der Wrapper für unseren zweiten Slot sein, und dies wird für die Liste der Bestellungen sein. Platz in unserem zweiten Schlitz hier drinnen. Wir müssen ihm keinen Namen geben, da dies den Standardwert erben kann. Neben der App.vue. Wir können zuerst mit der Arbeit an dieser Bestellseite beginnen. Wir werden diese Übersicht und auch die Registrierungkommentieren und auch die Registrierung und diese dann durch unsere Importe für unsere Bestellungen ersetzen. Dieser befindet sich im Ordner „Ansichten“. Registriert dies innerhalb des Komponentenabschnitts. Dann sichern Sie sich zu unseren Vorlagen, lassen Sie Auskommentieren Übersichtsabschnitt, und ersetzen Sie diese durch unsere Bestellungen. Wir werden diesen Slot-Inhalt übergeben, so dass dies die Öffnung und das schließende Tag benötigt. Wir haben zwei Slot-Standorte, so dass dies zwei Vorlagen benötigt. Diese Slot-Attribute, für die erste, für die Summe sein. Der zweite wird für unseren Standardinhalt sein , der unsere Liste der Bestellungen sein wird. Dieser erste Template-Abschnitt wird unsere Verkaufsgesamtkomponenten enthalten, genau wie wir oben in der Übersicht verwendet haben. Wenn wir einen Blick auf diesen Abschnitt werfen, enthält dies auch Slots zu. Hier geben wir unser Symbol und auch den Gesamtverkaufswert weiter . Um dies konsistent zu halten, können wir diesen vollständigen Komponentenabschnitt kopieren, dann nutzen Sie dies über in unserer App.vue. Fügen Sie das hier ein. Dies muss auch registriert und importiert werden. Lass uns das jetzt machen. Importieren Sie unsere Verkaufssumme, Punkt Schrägstrich, und dies ist in den Komponenten. Dann holen wir uns unsere Umsätze insgesamt. Dann schließlich, registrieren Sie diese Komponente. Angenommen, es gibt jemand anderes hier innerhalb seiner Bestellseite, wird jetzt die Komponente angezeigt. Wir können das Symbol sehen, aber wir haben noch nicht unsere dynamischen Inhalte weitergegeben, was der Gesamtumsatz ist. Lassen Sie uns dies jetzt tun, wenn wir zu unseren Vorlagen innerhalb der App.vue zurückkehren. Früher, als wir die Übersichtsseite erstellt haben, haben wir diesen Gesamtumsatzwert als Requisite weitergegeben. Dies waren nur einige Dummy-Daten, aber jetzt werden wir unsere realen Daten, die mit diesem Projekt zur Verfügung gestellt werden. Um dies innerhalb der Seitenleiste zu erfassen, werfen Sie einen Blick auf die Datei Orders.js. Wir können dies jetzt importieren und alle unsere Aufträge durchlaufen, um alle Daten zu extrahieren , die wir an diese Komponenten weitergegeben werden müssen. Nutzen Sie dies, wir müssen zuerst diese Datei importieren, damit wir diese innerhalb unseres JavaScript verwenden können. Wir können unsere Bestellungen aus unserer Bestelldatei importieren. Dies ist ein benannter Import innerhalb dieser geschweiften Klammern. Dies ermöglicht es uns, ein einzelnes Mitglied aus unserer Bestelldatei zu importieren. Ein einzelnes Mitglied, das wir importieren möchten, ist diese Auftragsvariable. Wir können dies importieren, weil wir dies als Konstante exportiert haben. Wenn die Bestellungsdatei andere Exporte hatte, könnten wir sie auch einzeln in hier importieren, aber wir haben nur diese Einzelbestellungen. Dann müssen wir nach unten scrollen und unseren Datenabschnitt erstellen, damit wir dies in Ansicht JS nutzen können. Platzieren Sie die Bestellungen, die wir gerade importiert haben. Jetzt haben wir Zugriff auf diese innerhalb unserer Vorlage. Um diese korrekt innerhalb unserer Vorlage auszugeben, müssen wir zuerst zwei Schleifen machen. Die erste Schleife wird jede unserer Bestellungen durchlaufen und dann für jede Bestellung müssen wir alle Artikel innerhalb dieser Bestellung durchlaufen. Lassen Sie uns das jetzt tun, drüben in der App.vue, scrollen Sie nach oben. in diesem Bestellabschnitt Achten Siein diesem Bestellabschnittauf diese zweite Standardvorlage. Es ist hier drin, wo wir diese beiden Schleifen erstellen werden. Zuerst ein Wrapper div, das die Klasse der Ordnung, Unterstrich, Wrapper haben wird. Als nächstes, innerhalb dieses Wrapper, ein zweites div, das jeden unserer Bestellungen umgeben wird. Um diese Aufträge durchlaufen zu können, werden wir alle Bestellungen Dateneigenschaft durchlaufen. Dies wird auch einen dynamischen Schlüssel benötigen, den wir von der eindeutigen ID erfassen können, die für jede dieser Bestellungen verfügbar ist. Wir können mit order.id darauf zugreifen. Nun, um diese zu strukturieren, lassen Sie uns etwas Text ganz oben hinzufügen, und dies wird die Bestellnummer anzeigen. Wir wissen, dass wir bereits Zugriff auf diese Bestellnummer mit order.id haben. Wir können diese innerhalb der doppelten geschweiften Klammern platzieren und dann jede dieser Bestellnummern blasen. Erstellen Sie eine ungeordnete Liste, die wir jeden unserer verkauften Artikel durchsehen werden. Der Wrapper. Dann verwenden wir das Listenelement, um eine v-for-Schleife für jeden unserer Artikel zu erstellen. Wir können jede von ihnen in der Variablen starten, die item ist, in order.items. Finden eines dynamischen Schlüssels. Nun, wir müssen vorsichtig mit dem Schlüssel für jeden von ihnen sein. Wenn wir einen Blick auf jede unserer Bestellungen werfen, denken Sie daran, dass die Artikelgruppe das gleiche Produkt in einer der Bestellungen enthält. Daher könnten wir doppelte IDs verwenden. Nun, wenn wir eine Datenbank verwenden, könnten wir eine eindeutige ID generieren. Aber zu Demonstrationszwecken, da wir keine Datenbank verwenden und keinen Zugriff auf eine eindeutige ID haben. auch, um auf die Indexnummer zuzugreifen und diese mit dem Element zu kombinieren. Kurz nach dem Gegenstand, schnappen Sie sich den Index. Platziert dies als Schlüssel. Wenn dies eine echte Produktionsstätte war, ist dies wahrscheinlich etwas zu vermeiden. Sie sollten wirklich versuchen, eine eindeutige ID für jedes dieser Produkte zu generieren. Für Demonstrationszwecke wird das gut sein. Im Inneren wird hier ein P-Element erstellen, das den item.name ausgeben wird. Dann können wir auch den Artikelpreis ausgeben, kurz danach mit item.price. Geben Sie diesem eine Aktualisierung, Sie sehen nun eine Liste aller unserer Bestellungen, und diese sind jetzt als ungeordnete Liste formatiert. Wir beenden dies auf unsere Orders.vue Datei, wo wir in ein wenig CSS hinzufügen können. Zunächst einmal, die ungeordnete Liste [unhörbar] Aufzählungszeichen mit List-Stil, lassen Sie dies auf nicht setzen. Der Schriftstil von kursiv. Dann der Wrapper für jeden unserer Aufträge, die hart an der Klasse der Ordnung. Ich bin Padding, um diesem einen Abstand von 10 Pixeln zu geben. Um dies etwas Abstand oben und unten zu geben, können wir einen Rand von 10 Pixeln oben und unten und dann Null auf der linken und rechten. Ein Boarder für jede unserer Bestellungen von einem Pixel. Eine durchgezogene Linie. Ich werde für einen Grauwert von DDD gehen, Grenzradius von fünf Pixeln. Speichern Sie diese und aktualisieren Sie den Browser. Jetzt haben wir alle unsere Befehle in Kraft. 68. Bestseller-Seite: Als nächstes haben wir unsere Bestseller Seite , an der wir arbeiten werden, und dies ist innerhalb des Views Ordner. Derzeit haben wir nur diese Stufe 3 Überschrift, aber was wir jetzt tun werden, ist eine Tabelle mit all unseren Daten zu erstellen, die wir aus unserer Datei orders.js erhalten werden. Um dies zu erreichen, werden wir zwei Schleifen erstellen. Die erste Schleife wird alle unsere Orders Array durchlaufen, und dies wird uns jede dieser Aufträge geben. Dann wird unsere zweite Schleife im Inneren dann alle diese Elemente durchlaufen, und dann werden wir jeden dieser Elemente greifen und auf ein neues Array drücken. So wird unser neues Array aussehen, wir extrahieren alle Produkte aus unseren Bestellungen und schieben sie dann zu diesem neuen Array. Zusätzlich zu der ID, dem Namen und dem Preis werden wir auch ein Mengenfeld hinzufügen. Dies wird vermeiden, dass wir viele doppelte Produkte haben. Stattdessen, wenn wir auf ein Produkt innerhalb unserer Schleife stoßen, das sich bereits innerhalb dieses Arrays befindet, erhöhen wir das Mengenfeld um eins. Dies ist der erste Schritt, und der zweite Schritt danach besteht darin, dieses Array mit der Menge am höchsten zum niedrigsten neu anzuordnen. Lassen Sie uns auf die app.vue gehen und wir erstellen dies als berechnete Eigenschaft direkt unter den Daten, richten Sie dies ein , und den berechneten Namen von SortedItems. Der erste Schritt besteht darin, unser neues Array namens SortedItems zu erstellen, und wir setzen dies zunächst auf ein leeres Array. Der nächste Schritt besteht darin, unsere erste Schleife zu erstellen, die alle unsere Aufträge durchlaufen wird. Wir haben dies oben in den Zustandseigenschaften gespeichert, so dass wir auf this.orders zugreifen können, und dann alle diese Aufträge abbilden, eine Callback-Funktion entsteht. Jeder Artikel in dieser Bestellung, wir werden diese innerhalb der Variablen namens Reihenfolge speichern. Wie wir gerade erwähnt haben, werden wir unsere Bestellung greifen und dann werden wir eine zweite Schleife im Inneren erstellen, die alle Elemente durchlaufen wird. Wir werden diese abbilden und dann eine Funktion für jedes dieser Elemente ausführen. Bevor wir weiter gehen, denken Sie daran, dass berechnete Eigenschaften immer einen Wert zurückgeben müssen. Also werden wir unser neues Array zurückgeben, das Elemente sortiert ist. Stellen Sie sicher, dass dies außerhalb unserer Schleifen liegt. Wir werden diesen Wert zurückgeben. Backup innerhalb dieser Schleife ist, wo wir jedes dieser Elemente in dieses neue Array schieben , aber kurz bevor wir dies tun, müssen wir zuerst überprüfen, ob dieses Element bereits innerhalb dieses Arrays ist , um Duplikate, und die Art, dies zu tun, besteht darin, auf unser neues Array zuzugreifen, das sortierte Elemente ist. Wir können die JavaScript-Methode finden aufrufen. Dies wird eine Funktion für jedes Element innerhalb unseres Arrays ausführen jedes Element innerhalb dieser Variablen speichern, die ich sortiertes Element aufrufen werde. Diese Funktion ist verantwortlich für die Überprüfung, ob die sortierte item.id gleich der Item-ID aus dieser aktuellen Schleife ist. Wenn die ID des aktuellen Elements, das wir besitzen einer der IDs übereinstimmt, die innerhalb dieses Arrays sind, wird dies dann das aktuelle Element zurückgeben. Wir werden dann speichern diese innerhalb einer Konstante namens Element existiert. Dann können wir eine if-Anweisung direkt darunter erstellen, um zu überprüfen, ob Element existiert wahr ist. Wenn es wahr ist, haben wir ein doppeltes Element und alles, was wir tun wollen, ist auf diesen Artikel zuzugreifen, das Element existiert, und dann wählen Sie das Mengenfeld, Inkrementieren dies um eins und dann können wir aus dieser Anweisung zurückkehren. Wenn dieses Element nicht existiert, bedeutet dies, dass dies das erste Mal ist, dass dieses neue Element in unser Array geschoben wird. Also, was wir tun werden, ist ein neues Objekt namens new item zu erstellen. Dies wird gleich unserem Artikel sein, den wir besitzen, und wir werden auch im Mengenfeld hinzufügen. Die Menge wird ein Anfangswert von eins sein, und dann mit dem JavaScript-Spread-Operator werden wir auch den Wert aus dem Element übergeben. Wir haben jetzt dieses neue Element und das letzte, was zu tun ist, ist, dies auf dieses Array zu schieben. Kurz nach unserem Objekt greifen Sie unser sortiertes Elemente-Array und greifen Sie dann auf die JavaScript-Push-Methode zu, die unser neues Element schiebt. Lassen Sie uns das testen. Wir können auf unsere sortierten Elemente berechnete Eigenschaft innerhalb der doppelten geschweiften Klammern zugreifen, also überall in unserer Vorlage. Da gehen wir. Anstatt jedes unserer Produkte einzeln aufgeführt zu haben, haben wir jetzt die Menge erhöht. Erstens, wir haben kubische Gegenstände. Wir haben kostenlose T-Shirts, wir haben zwei unserer kleinen Custom Shirts, wir haben, vier, die Hoodies, und dann eine der Hüte. Jetzt funktioniert das. Der letzte Schritt besteht darin, die Artikel innerhalb dieses Arrays nach der höchsten verkauften Menge neu anzuordnen . Derzeit haben wir die Menge frei. Dann haben wir zwei, wir haben vier, und dann haben wir eins, also ist das nicht in Ordnung. Wir können diese neu anordnen, kurz bevor wir sie aus unserem berechneten Abschnitt zurückgeben. Direkt über der return-Anweisung, greifen Sie auf die sortierten Elemente, und dann können wir die JavaScript-Sortiermethode verwenden. Die JavaScript-Sortiermethode durchläuft alle unsere sortierten Elemente und führt dann eine Vergleichsfunktion aus. Diese Vergleichsfunktion wird zwei Variablen mit dem Namen unserer Wahl aufnehmen. Ich werde das nur A und B nennen, um es einfach zu halten, und das sind die beiden aktuellen Elemente, die verglichen werden. Aber ich werde überprüfen, ob die Mengeneigenschaft Element A größer ist als die Menge auf Element B Mit dem ternären Operator, werden wir dann die Indexposition, wenn dies wahr ist, als negativ festlegen , Wenn dies falsch ist, wird es dann positiv sein. Denken Sie daran, dass beim Umgang mit Arrays zuerst eine niedrigere Indexnummer in unserem Array angezeigt wird. Wenn Sie dies als negativ festlegen, wird dies im Array höher nach oben schieben. Wir können sofort im Browser sehen, dass die Menge von vier zuerst platziert wird, wir haben die Menge von drei, und schließlich, unsere Vue Hut, die die Menge von eins ist. Jetzt haben wir alle Daten, die wir brauchen, wir können jetzt die Bestseller Seite innerhalb dieser app.vue importieren. Wir werden dies auch registrieren und dies innerhalb der Vorlage anzeigen. Lassen Sie uns das duplizieren, und das hier ist für unsere Bestseller. Fügen Sie dies zu unseren Komponenten hinzu, aber ich werde unsere Audit-Komponenten und auch den ältesten Abschnitt aus unserer Vorlage auskommentieren . Schnappen Sie sich das bis zum schließenden Tag, kommentieren Sie es aus, und wir können jetzt unsere Bestseller in unserer Vorlage platzieren. Dies ist nur unserer Einfachheit halber, so dass wir uns auf eine Komponente nach dem anderen konzentrieren können. Wir sehen hier einen Fehler, dass die Umsatzgesamtkomponente nicht verwendet wird, also können wir dies auch auskommentieren. Auch die Anmeldung, auch diese bei unseren Bestsellern Seite. [ unhörbar] oben, wir werden diesen berechneten Abschnitt entfernen und dann unsere Tabelle innerhalb der Bestseller einrichten. Platzieren Sie diese innerhalb des öffnenden und schließenden Tags, so dass dies als Slot-Inhalt übergeben wird. Zuerst richten wir unseren äußeren Tabellenabschnitt ein, die Tabellenüberschrift für unsere Titel und dann unsere erste Tabellenzeile. Innerhalb dieser Zeile werden wir unser erstes Stück Daten innerhalb der Tabellenüberschrift einfügen, und dies gilt für die verkaufte Menge. Die nächste Tabellenüberschrift bezieht sich auf den Produktnamen, die dritte für die Produkt-ID und schließlich auf den Produktpreis. Nach dem Kopfabschnitt haben wir den Tabellenkörper, und es ist innerhalb dieses Tabellenkörperabschnitts werden wir alle Daten aus unserem berechneten Abschnitt zur Verfügung stellen. Um dies zu tun, erstellen wir eine neue Tabellenzeile, und wir müssen dies für jedes Element innerhalb dieses berechneten Abschnitts wiederholen. [ unhörbar] Für Loop. Wir können in unserem Artikel in sortierten Artikeln hinzufügen. So könnten wir entweder auf den vollständigen Artikel zugreifen oder wir könnten auch die Struktur verwenden und die ID, dieMenge, den Namen und auch den Preis herausziehen Menge, den Namen . Wir müssen auch einen dynamischen Schlüssel binden, und der dynamische Schlüssel dafür kann die Produkt-ID sein. Diese vier Variablen können nun als Tabellendaten ausgegeben werden. Innerhalb der Zeile sind die Tabellendaten für die erste für die Menge, und wir haben den Namen, die ID und dann den Preis. Dies sind alle Slot-Daten, die wir jetzt übergeben müssen, also über unsere Bestseller Seite in den Ansichten, und wir werden dies als Slot ausgeben. Da sind wir. Es gibt eine Worttabellenüberschrift und auch unsere Tabellendaten, und jetzt werden diese Elemente von der höchsten bis zur niedrigsten Menge aufgelistet. Nur um diese Seite zu beenden, gehen Sie zu unseren Bestseller-Komponente , wo wir einige grundlegende Stile für diese Tabelle einrichten können. Zunächst einmal der Tabellen-Wrapper, der Rand eines Pixels, eine durchgezogene Linie und die Farbe von DDD. Richten Sie den Text mit der Mitte ausgerichtetem Text aus. Der Umrandungsradius von fünf Pixeln. Dann geben wir diesem auch etwas Platz mit einigen Auffüllwerten innerhalb der Tabellenüberschriften und auch den Tabellendaten. Dadurch werden nun alle unsere Daten innerhalb unserer Tabelle abgelegt. Dies ist jetzt unsere Bestseller-Seite abgeschlossen. Im nächsten Video werden wir einen Blick darauf werfen, wie wir mit dynamischen Komponenten zwischen diesen drei Seiten wechseln können . 69. Dynamische Komponenten: Wenn wir bisher an unseren drei Seiten gearbeitet haben, haben wir jede dieser Seiten kommentiert und dann eine neue hinzugefügt, um an der Arbeit zu arbeiten. Große Apps wechseln häufig über einen Router zwischen Seiten. Ich werde dies für unser abschließendes Projekt tun. Für diesen einfachen Fall werden wir eine dynamische Komponenten einrichten, um dies zu handhaben, öffnen Sie die Vue. Wir werden unsere endgültige Komponente, die die Bestseller ist,kommentieren die die Bestseller ist, dann durch die Komponentenelemente ersetzen. Um zu erklären, welche Seite oder welche Komponenten wir in diesem Komponentenspeicherort angezeigt werden, können wir dann die is-Eigenschaft binden und diese gleich einer Datumseigenschaft namens SelectedPage setzen . Ich werde es einfach alles nennen, was Sie wollen, solange es mit einer Datumseigenschaft übereinstimmt , die wir jetzt erstellen werden. Zu diesem Zweck können wir dies zunächst auf unsere erste Seite setzen, die die Übersicht ist. Die ausgewählte Seite wird aktualisiert, wenn wir auf einen der Seitenleisten-Links klicken. Eine Sache zu wissen, wenn die dynamischen Komponenten verwendet werden, ist Vue nicht weiß, welche Komponente wir verwenden werden Daher wird es keinen Fehler werfen, wenn wir irgendwelche Importe haben, die wir nicht verwenden. Wie wir hier sehen können, haben wir immer noch den Import, die Bestseller. Wir verwenden dies derzeit nicht in der Vorlage. Um alle diese Komponenten verfügbar zu machen, werden wir die Übersicht, die Aufträge und auch die Umsatzsumme auskommentieren , und das gleiche, wenn wir auch unsere Komponenten registrieren. Da wir die SelectedPage, die Übersicht, eingestellt haben, sehen wir dies jetzt im Browser. Nun, aktualisieren Sie diese Seite können wir jetzt für einen Klick auf eine dieser Sidebar-Links auflisten, bis zum Sidebar-Abschnitt und innerhalb unseres Links, Liste jetzt für einen Klick auf eine dieser drei Seiten, werden wir die ausgewählte Seite auf gleich die Seite, die innerhalb dieser Variablen nur hier gespeichert ist. Wir können die gleiche Seite der hinteren Ticks wie eine Vorlagenzeichenfolge haben. Lassen Sie uns das im Browser gehen. Aktualisieren. Wie Sie sehen können, funktioniert die Übersicht gut, aber wir haben noch keine der Daten weitergegeben. Die Aufträge, wieder, wir sehen nur den Titel, weil wir noch keine dynamischen Daten weitergegeben haben. Die Bestseller, wir sehen nichts, wenn wir auf diese Seite klicken. Lassen Sie uns in die Entwickler-Tools gehen und sehen, was los ist. In der Konsole heißt es, dass der Tag-Name von Bestsellern kein gültiger Name ist. Denken Sie daran, dass wir versuchen, eine unserer Komponenten basierend auf diesem Seitennamen zu laden. Versuchen Sie eine Pause und nehmen Sie sich einen Moment Zeit, um darüber nachzudenken, was diesen Fehler verursachen könnte. Wenn Sie es noch nicht herausgefunden haben, ist die Antwort der Abstand zwischen diesen beiden Wörtern. Wir versuchen, auf eine Seite zu verlinken, die am besten ist, und ein Raum, und dann Verkäufer. Aber wenn wir einen Blick auf unseren Seitennamen werfen, hat dies keinen Platz dazwischen. Die Lösung ist, dass wir Leerraum entfernen müssen, wenn diese Komponenten aufgerufen werden. Wir können festlegen, dass dies innerhalb unserer dynamischen Komponenten sein wird. Eine Möglichkeit, dies zu tun, ist die Verwendung einer JavaScript-String-Ersetzungsmethode. Dies wird unsere Existenz String nehmen, die selectedPage ist. Wir können es dann ändern, um beliebige Leerräume zu entfernen und dann einen neuen zurückzugeben. Rufen Sie die replace -Methode auf. Dann können wir in einem regulären JavaScript-Ausdruck zwischen diesen beiden Schrägstrichen platzieren. Bei regulären Ausdrücken können wir jeden Leerraum durch die Verwendung des umgekehrten Schrägstrichs und des S, getrennt durch ein Komma, ersetzen wir dann diesen Leerraum durch eine leere Zeichenfolge, die überhaupt kein Leerzeichen enthält. Lasst uns das speichern und das ausprobieren. Die Übersicht, die Bestellungen und wann auch die Bestseller-Seite erscheint. Großartig. Wir können jetzt die Seiten wechseln, aber ein Großteil der Inhalte fehlt. Dies liegt daran, dass wir keine Requisiten oder Slot-Inhalte an diese drei Seiten weitergegeben haben. Dynamische Komponenten können auch sowohl Requisiten als auch Slot-Inhalte akzeptieren, wenn wir wollten. Aber denken Sie daran, dass jede Komponente unterschiedliche Daten hat. Für Requisiten müssten wir alle Requisiten, die wir jemals brauchen, innerhalb dieser einzigen Komponente übergeben . Wenn Sie einen Slot-Inhalt übergeben, ist es auch schwierig, da jede Komponente unterschiedliche Daten hat. Obwohl im nächsten Abschnitt, werden wir diese Probleme lösen, indem wir eine Technik namens liefern und injizieren. 70. Abschnittseinleitung – Provide/Inject: Bei der Arbeit mit Vue.js und der Weitergabe von Daten müssen wir Requisiten an jede Komponente weitergeben. Wenn wir eine untergeordnete Komponente haben, die vielleicht zwei oder mehr Ebenen tief ist, müssen wir alle Requisiten von unserem Elternteil übergeben und dann bis zu jeder der Kernkomponenten auf dem Weg. Dies ist wirklich nützlich, um die Kontrolle über unsere Daten zu behalten, aber es ist nicht immer ideal. Diese Vue.js hat uns mit einer Technik namens liefern und injizieren abgedeckt, und wir werden einen Blick auf diese während dieses Abschnitts. 71. Was bedeutet Provide/Inject?: Wenn wir in einer idealen Welt arbeiten, müssen unsere Daten oder unser Staat nicht sehr weit reisen, wie diese Anwendung hier, die mit den cal-Komponenten kommuniziert. Das ist ziemlich unkompliziert. Wir haben viele Optionen, die wir in der Vergangenheit betrachtet haben, wie zum Beispiel die Weitergabe von Daten als Requisiten und das Ausgeben von Daten mit benutzerdefinierten Ereignissen. Auch die Möglichkeit, die Slots zu verwenden, beginnt selbst diese ziemlich einfache Anwendung, Komponenten tiefer als eine Ebene verschachtelt zu bekommen . Diese View JS Anwendung wechselt zwischen drei Seiten und unsere Übersichtsseite ist in unseren kostenlosen untergeordneten Komponenten verschachtelt. Wenn sich unsere Daten in der Haupt-app.vue befinden, könnten wir Requisiten verwenden, um sie an alle unsere Seiten weiterzugeben. Dann könnten wir auch weiterhin die Requisiten der im Inneren verschachtelten Komponenten weitergeben, und diese Kette kann so viele Ebenen tief wie nötig weitermachen. Dies verursacht jedoch viel zusätzlichen Code. Wir müssen sie als jede Komponente registrieren, diese Requisiten validieren und sie dann als Attribut an das nächste Kind weitergeben. Um sie wieder zu übergeben, verwenden wir benutzerdefinierte Ereignisse. Auch hier ist dies wirklich gut für einfache Anwendungen, aber für viele Ebenen tief, kann es ein Schmerz werden. Es wäre so viel bequemer, wenn wir all dies umgehen und die Daten direkt in jede untergeordnete Komponente bereitstellen könnten . Vue hat eine State-Management-Bibliothek, die als separates Modul namens Vuex verfügbar ist, was wirklich gut ist und auch vom Kernteam vue.js gepflegt wird. Dies bietet einen zentralen Datenspeicher, aber es kostet auch Kosten für die Installation und Einrichtung eines neuen Pakets. Es ist ziemlich einfach zu erlernen und auch zu verwenden, aber es ist etwas Extra, das wir in diesem Stadium nicht ganz brauchen. Auch wahrscheinlich besser für größere Anwendungen verwendet. Alternativ hat Vue auch eine integrierte Funktion namens liefern und injizieren. Das Konzept ist, wir haben einen Anbieter, der verwendet wird, um Daten für den Rest unserer Anwendung zur Verfügung zu stellen , und dies wird in jeder übergeordneten Komponente platziert. Dann kann jede untergeordnete Komponente auf jeder Ebene mit diesen Daten injiziert werden. Nicht nur das, sondern ein bisschen wie, wenn wir benutzerdefinierte Ereignisse ausgegeben haben, um die Kette zu sichern. Wir können auch den Zustand im Elternteil ändern, indem wir Methoden auslösen. Dies ist liefern und injizieren, was wir jetzt in diesem Abschnitt einen Blick auf. 72. Einen Provider einrichten: Werfen wir nun einen Blick darauf, wie wir einen Provider einrichten können. In dieser App.vue Datei haben wir diese dynamische Komponente, die wir kürzlich eingerichtet haben, und dies wird für das Rendern einer unserer kostenlosen Seiten verantwortlich sein, und jede dieser Seiten erfordert unterschiedliche Daten. Anstatt alle Requisiten zu übergeben, um all diese Situationen abzudecken, können wir stattdessen die richtigen Daten bereitstellen und injizieren direkt in unsere Diagrammkomponenten einfügen. Beginnen wir zunächst mit unserer Übersichtsseite, die unsere oberste ist, gerade hier. Hier drinnen, das macht unsere kostenlosen Komponenten, wir haben die verkauften Artikel, die Verkaufssumme und den Bestseller. Denken Sie daran, dass dies Slots verwendet, und wir verwenden diese Daten, die als Requisiten weitergegeben werden. Stattdessen wir diese Daten direkt auf die Komponenten verschieben und dann greifen wir auf die Daten zu , die wir benötigen, mit liefern und injizieren . Beginnen wir mit diesem verkauften Artikel. Wir greifen den Slot-Inhalt von in-zwischen der Vorlage, sowie gehen für das Symbol, und dann in die Artikel verkauft Komponenten, können wir unseren Slot ersetzen, wo dies ausgegeben wird. In der Übersicht haben wir das zweite Stück Slot-Inhalt, die für den Standard ist, und ersetzen Sie dann unseren zweiten Slot. Wir können jetzt bereinigen diese Artikel verkauft Komponente, und wir haben unsere Vorlagen und dann können wir das gleiche für den Umsatz insgesamt tun , ohne das Symbol, Orte in den Icon-Slot, und dann dasselbe für unseren Gesamtumsatz, Fügen Sie dies in unseren Standard-Slot und der Komponenten ein, und genau das gleiche für unsere dritte Komponente auch, das Icon für den Bestseller [unhörbar] und auch den Inhalt. Dann bereinigen Sie unsere Bestsellerkomponente. Nun, das hinterlässt uns unsere freien Diagrammkomponenten mit dynamischen Daten, die wir jetzt weitergeben müssen. Dies können wir einen Provider in eine der paren-Komponenten hinzufügen und wird immer noch nicht zur App.vue Datei und dann in den Skriptabschnitt gehen . Die Angebotsoption ist ziemlich unkompliziert. Alles, was wir tun müssen, ist ein Objekt zur Verfügung zu stellen. Dies ist ein weiterer Ort, an dem wir alle Daten bereitstellen können, die Sie in einer der Diagrammkomponenten verfügbar sein möchten . Wir wissen bereits, welche Daten wir benötigen. Wir brauchen die Menge der verkauften Artikel, wir brauchen den Gesamtverkaufswert und auch den Bestseller. Lasst uns die aufstellen. Zunächst einmal die Menge der verkauften Artikel. Wir können in jedem Wert innerhalb von hier für jetzt platzieren und sehr bald werden wir diesen Wert mit unserer Bestelldatei erhalten. Als Nächstes brauchen wir den Gesamtumsatz. Dies wird wieder jeder Wert sein, und der dritte für den Bestseller, der eine Zeichenfolge ist, Sie wollen für den Vue Hoodie in Medium gehen, und das sind unsere bereitgestellten Daten. Als Nächstes werden wir uns ansehen, wie wir auf diese Daten in unseren Diagrammkomponenten zugreifen können. 73. Daten einspeisen: Innerhalb unserer app.vue Datei haben wir jetzt dieses Bereitstellungsobjekt, das alle Daten innerhalb einer der untergeordneten Komponenten zur Verfügung stellt. Diese Daten werden nicht automatisch in den untergeordneten Komponenten vererbt. Stattdessen müssen wir in alle Komponenten gehen, wo wir es verwenden möchten, und fügen Sie ein Injektor-Array mit den Eigenschaften, die wir akzeptieren möchten. Beginnen wir mit den verkauften Artikeln, wo wir diese Menge der verkauften Artikel Wert benötigen. Wir können anfangen, ein Skript zu haben, genau wie wenn wir irgendwelche Requisiten akzeptieren. Hier drinnen werden wir ein Array namens inject einrichten. Dann können wir den Wert, den wir brauchen, übergeben, die Menge der verkauften Artikel ist. Wenn wir dies speichern, sehen wir nun, dass der Wert im Browser aktualisiert wurde. Dies funktioniert, weil diese beiden Namen übereinstimmen. Lassen Sie uns den Skript-Abschnitt greifen, und wir werden dies auch in der Umsatzsumme platzieren. Dies erfordert auch den Gesamtverkaufswert, der weitergegeben wird. Speichern Sie diese, und dies wird jetzt angezeigt. Dann endlich der Bestseller. Da gehen wir. Aber wie wir bereits wissen, dies alles nur derzeit statische Daten, aber es sollte dynamisch sein und auf unserer orders.js Datei basieren. Um dies wieder in unserer app.vue zu tun, werden wir nun diese ersten beiden Werte durch die Einrichtung einer berechneten Eigenschaft dynamisch setzen. Lassen Sie uns zunächst für die Menge der verkauften Artikel gehen. Sie sind nur unter unseren sortierten Elementen, getrennt durch Komma, wir werden dies einrichten. Jetzt haben wir ein paar Optionen. Wir könnten direkt in unsere orders.js Datei gehen. Genau wie wir es zuvor getan haben, können wir alle Bestellungen durchlaufen und dann alle Bestellartikel, oder alternativ direkt darüber haben wir bereits unsere sortierten Artikel, die eine Reihe von allen Artikeln sind, die wir verkauft haben. Stattdessen können wir dies verwenden, aber zuerst erstellen wir eine neue Variable namens Quantity, und setzen dies auf einen Anfangswert von Null. Dann, um dies zu erhalten, können wir unsere berechnete Eigenschaft greifen, die Elemente sortiert wurde, Schleife darüber. Erstellen Sie dann eine Funktion für jedes Element. Wir durchlaufen all diese verkauften Artikel und wir haben dieses Objekt, genau wie wir hier sehen. Denken Sie daran, dass jedes dieser Objekte über ein Mengenfeld verfügt. Was wir jetzt tun müssen, ist unsere Menge mit dem Mengenfeld aus diesem Artikel zu aktualisieren. Also greifen Sie unsere Variable, und dann können wir mit dem += Operator, die item.quantity hinzufügen. Dieser Operator erneuert die Artikelmenge automatisch auf den vorhandenen Wert, anstatt ihn zu ersetzen. Dann geben Sie unsere Menge aus diesem berechneten Wert zurück. Jetzt können wir diesen Namen offen zur Verfügung stellen und den hartcodierten Wert von 54 durch den Wert dieser Punkte Menge der verkauften Artikel ersetzen . Als Nächstes wird der Gesamtumsatzwert. Ich werde nur [unhörbar] ein Komma hinzufügen und unsere zweite berechnete Eigenschaft einrichten. Genau wie beide eine neue Variable erstellen, diesmal total genannt, und setzen Sie dies auf einen Anfangswert von Null. Auch für diesen haben wir ein paar Optionen. Wir konnten unsere sortierten Gegenstände wieder durchleben. Wir könnten etwas tun, wie die Menge mit dem Preis des Artikels multiplizieren, oder wir könnten direkt zu unserem Bestell-Array gehen. Dann durchlaufen Sie unsere Bestellungen, schleifen Sie die Artikel durch und addieren Sie dann alle Preise. Das ist, was ich tun werde, und das ist eine Schleife durch alle unsere Befehle. Wir machen diese.orders.map. Wir werden jede einzelne Bestellung greifen und dann durch die Items Eigenschaft schleifen. Wählen Sie jedes Element aus. Dann greifen wir für jeden Artikel in einer unserer Einzelbestellungen das Preisfeld und aktualisieren unsere Gesamtsumme und geben dann diesen Gesamtwert zurück. Jetzt, zurück zu unserem Provider, verschieben Sie das. Wir können diesen Wert auf this.totalsalesvalue setzen. Geben Sie dies ein Speichern und aus für den Browser. Wir sehen jetzt keine Daten im Inneren von hier. Gehen wir in den Inspektor und sehen, was in der Konsole vor sich geht. Wir haben einen Fehler, der besagt, dass wir die Eigenschaft der Menge der verkauften Artikel nicht lesen können. Nun, der Grund, warum wir diesen Fehler sehen, ist, weil, wenn wir auf irgendwelche Dateneigenschaften oder dynamische Daten auf diesem Bereitstellungsobjekt verweisen , wir müssen dies stattdessen als Funktion zurückgeben. Diese Funktion ist genau wie die Dateneigenschaft oben eingerichtet. Dies wird alle unsere Werte zurückgeben, die dynamische Daten enthalten. Dies war vorher völlig in Ordnung, weil alles, was wir ausgegeben haben, statische Daten wie die Zeichenfolge und auch unsere Zahlen waren . Wenn wir dies in eine Funktion verwandeln, genau wie die Daten, werden wir unsere drei Werte erfassen und diese dann von allen Funktionen aus an den Browser zurückgeben . Wir sehen jetzt die verkauften Artikel, aber wir fehlen die Gesamtumsätze. Werfen wir einen Blick. Wir haben diese.totalsalesvalue der Menge der verkauften Artikel. Ich denke, wir müssen das vielleicht nur in den berechneten Abschnitt platzieren, also schneiden wir das ab. Wenn wir uns die schließende Klammer für das berechnete ansehen, müssen wir dies nur innerhalb des rechten Abschnitts platzieren, getrennt durch ein Komma, und dort gehen wir. Schließlich haben wir diesen meistverkauften Artikel, der derzeit als String weitergegeben wird. Jetzt werden wir dies beheben, indem wir erneut auf die sortierten Artikel zugreifen, was eine Reihe unserer meistverkauften Artikel ist. Denken Sie daran, dass dies die höchste verkaufte Menge ist. Alles, was wir dafür tun müssen, ist auf das allererste Element innerhalb unseres Arrays zuzugreifen. Ich schneide die Schnur aus. Wir können auf diese.sorteditems zugreifen. Dann greifen Sie auf diese erste, die die höchste Verkaufsmenge ist. Dies wird unser vollständiges Objekt für diesen Artikel zurückgeben. Wir können dies nun in den Bestseller-Komponenten eingrenzen und direkt auf die Namenseigenschaft zugreifen. Jetzt sind unsere frei injizierten Werte jetzt in den richtigen Komponenten. 74. Mini-Challenge: Bestellungen und Bestsellerseiten mit Provide/Inject aktualisieren: Wir haben jetzt unsere Übersichtsseite konvertiert, um bereitstellen und injizieren zu verwenden. Was ich möchte, dass Sie jetzt als Herausforderung tun, ist, voranzugehen und dasselbe für die Bestellungen und die Bestseller-Seiten zu tun. Jetzt in der App.vue haben wir immer noch unsere Bestseller-Sektion kommentiert und scrollen wir auch diesen Bestellbereich hier. Wir haben die Übersicht bereits gemacht, damit wir das ignorieren können. Was ich möchte, dass Sie tun, ist, über alle Slot-Inhalte, die wir für jede Seite haben, in die einzelnen Komponenten zu bewegen die wir für jede Seite haben, , genau wie wir es mit der Übersicht getan haben, wo wir alle Inhalte in die Einzelkomponenten. Füllen Sie dann alle Abschnitte, die dynamische Daten wie diesen Pfad haben, einrichten, indem Sie innerhalb dieser App.vue bereitstellen und dann die Daten in die erforderlichen Komponenten von Altersgruppen injizieren. Sie geben uns einen Ausweg und als nächstes gehe ich durch, wie ich es gemacht habe. 75. Bestellungen und Bestsellerseiten mit Provide/Inject aktualisieren: Ich werde das mit der Bestellungsseite starten. Wenn wir zum kommentierten Abschnitt in der App.vue scrollen, beginnen wir mit diesem Bestellabschnitt. Ich werde das auskommentieren, also ist es ein bisschen klarer, was wir tun. Im Inneren von hier, der erste Abschnitt oder der erste Slot, den wir haben, ist dieser Gesamtabschnitt. Diese enthält die Umsatzsummenkomponente. Was wir tun müssen, ist, dies auszuschneiden, und dann gehen Sie auf die Bestellungsseite, und platzieren Sie dies anstelle unserer Gesamt-Slot. Die Orders.vue, dies ist der Slot mit dem Namen Total. Fügen Sie unsere Komponenten ein. Jetzt nutzen wir eine Komponente. Was wir tun müssen, ist, dies auch in diese Datei zu importieren. Lassen Sie uns einen Skriptabschnitt erstellen. Ich werde das einfach verpusten. Erstellen Sie unsere Skripte Abschnitt und knapp über dem Exportstandard, werden wir diese einzelne Komponente importieren, die Umsatz insgesamt war. Der Dateipfad ist.. /components und dann in die Gesamtsumme des Umsatzes. Richten Sie unser Komponententhema ein. Übergabe dieser Verkaufssumme. Als nächstes, über die App.vue, wir haben immer noch diesen Standard-Abschnitt. Wenn ich dies hervorhebt, könnten wir jetzt alle div greifen, die innerhalb mit der Klasse der Ordnung Wrapper verschachtelt ist. Leg das raus, ich werde diese Bestellungen Komponenten aufräumen und dann in unseren Schlitz einfügen. Von hier aus betrachten wir diesen Abschnitt, der Zugriff auf alle Bestellungen benötigt , so dass wir diese jetzt weitergeben können, indem es bereitstellt und injiziert. Zuerst richtet unser Provider, der sich in der App.vue befindet, die Bestellungen ein, die diesen beiden Bestellungen entspricht, die auf unserem Dateneigentum leben. Über die Orders.vue, wir können das jetzt in unser Skript injizieren. Dies ist ein Array mit dem einzelnen Wert von Orders. Dadurch werden unsere Bestellungen jetzt wieder in diesen Abschnitt eingefügt. Wir werden das immer noch sehen, weil wir in App.vue über haben, wir immer noch in diesen Bestellungen Komponenten setzen. Ich werde dies kommentieren und auf den Link Bestellungen klicken. Alles funktioniert einwandfrei. Sie uns neben unserer Bestseller-Seite LassenSie uns neben unserer Bestseller-Seitedas nochmals auskommentieren, damit es klarer ist. Das hier ist ein bisschen einfacher. Wir haben nur diesen Tisch. Kodieren Sie das aus. Über die bestsellers.vue Seite, und wir können den Slot-Inhalt mit unserer Tabelle ersetzen, dies muss auch Zugriff auf unsere Computer-Eigenschaft, die Artikel sortiert ist. Lassen Sie uns das in unserem Provider weitergeben. Sortierte Elemente, die gleich sein wird, bekommen sortierte Elemente, die eine Computer-Eigenschaft über unsere Komponente, die Bestseller ist ein Skript einrichten. Alles, was wir dafür tun müssen, ist unser Injektorarray einzurichten, das die gesalzenen Gegenstände akzeptieren wird. Es gibt unsere Tabelle und wir können unsere app.vue bereinigen, indem wir eine der alten Komponenten entfernen diesen dynamischen Abschnitt verlassen. Wir brauchen die Bestseller nicht, wir brauchen die Bestellungen nicht und wir brauchen auch nicht den Übersichtsbereich. Es war ein Test, wir haben den Überblick über die Bestellungen und auch die Bestseller. 76. Aktualisieren des Providers durch eine untergeordnete Komponente: Zusammen mit der Verwendung bereitstellen und injizieren, um Daten weiterzugeben, benötigen wir möglicherweise auch eine Möglichkeit, vom Status in einer übergeordneten Komponente innerhalb eines untergeordneten Elements zu wechseln. Wir wissen, wie dies durch die Ausgabe eines benutzerdefinierten Ereignissen zu tun. Wenn Sie jedoch bereitstellen und injizieren, besteht der Weg, dies zu erreichen, darin, eine Methode in der gleichen Datei wie der Provider zu haben, und dann geben wir an die untergeordneten Komponenten weiter, einen Verweis auf diese Methode, die Sie dann auslösen können. Wir erstellen im Wesentlichen eine Methode in einer übergeordneten Komponente und rufen sie dann von einem Kind auf, das eine Aktion sieht. Wir werden das Wechseln unserer Seiten von HR-Komponenten innerhalb der app.view herausfinden . Lassen Sie uns diesen Sidebar Abschnitt bereinigen und entfernen Sie alle Slot-Inhalte. Dies wird dann unseren Link entfernen und wir können diese jetzt wieder in unsere sidebar.vue Datei anstelle unserer Slots platzieren , da wir jetzt keine Slot-Daten erhalten, können wir dies durch einen Link ersetzen. Dieser Link wird einfach die Seite aus unserer Schleife ausgeben, und wir müssen jetzt eine Methode in der app.view einrichten , die ausgelöst wird, wenn wir auf einen dieser Links klicken. Bis auf unsere Skripte wird den Methodenabschnitt einrichten, und diese Methode wird ChangePage genannt werden. Dies muss auch die Seite aufnehmen, zu der Sie wechseln möchten, und dann alles, was wir tun werden, ist die Datumseigenschaft von SelectedPage zu ändern , um diesem Wert gleich zu sein. Wir können nun einen Verweis auf diese Methode innerhalb unseres Anbieters weitergeben. Ich werde diese konsistent halten und auch diese ChangePage aufrufen, die unserer gleichnamigen Methode entspricht. Wir möchten diese Änderungsseite innerhalb der Sidebar nach unten umschalten, und genau wie wir alle Daten oder Status weitergeben würden, können wir dies auch in ein injiziertes Array hinzufügen. Jetzt hat diese Seite Zugriff auf alle ChangePage-Methode. Wir werden jetzt unseren Link innerhalb der Vorlage verwenden, um für einen Klick zu hören und diese Methode zu aktivieren, so dass dies jetzt für einen Klick, das ist jetzt ein Methodenname von ChangePage. Denken Sie daran, dass dies auch die Seite übernehmen muss, zu der Sie navigieren möchten, und wir haben Zugriff darauf mit dieser Seitenvariablen. Lassen Sie uns dies zum Browser ausprobieren, haben die Übersicht, die Bestellungen und auch die Bestseller, die jetzt von dieser untergeordneten Komponente ausgelöst wurden. Sie beenden, können wir den Cursor ändern, um einen Zeiger zu sein und wir bewegen den Mauszeiger über einen dieser Links. Ein li Styling ist bereits eingerichtet und alles, was ich tun muss, ist, am Cursor hinzuzufügen, um ein Zeiger zu sein. Jetzt funktioniert alles großartig, aber es gibt etwas zu beachten, was standardmäßig zur Verfügung stellt und injizieren ist nicht reaktiv. Das bedeutet, wenn sich einer der angegebenen Werte ändert, werden die untergeordneten Komponenten nicht aktualisiert. Es gibt mehrere Möglichkeiten, wie wir dies sehen können, wenn wir auf Reaktivität tun, und unsere App hat eine Komponentenstruktur, die nicht zu tief ist. Wir könnten einfach Requisiten benutzen und ausstoßen. Wir könnten auch liefert und injizieren, die Anfangswerte für untergeordnete Komponenten nach dem Upload setzen, oder alternativ, wenn wir wirklich verwenden wollten, liefert und injizieren, aber Reaktivität war wichtig. Es gibt eine Möglichkeit, dies zu tun, wenn wir dies mit der View Free Composition API kombinieren, und das ist etwas, das wir bald entdecken werden. 77. Abschnittseinführung – Einführung in das Routing: Beim Erstellen unserer Anwendungen haben wir oft den Anwendungsfall, um zwischen mehreren Seiten zu wechseln. Für diese Vue hat uns auch durch die Bereitstellung eines Router-Pakets abgedeckt. Wenn Ihr Router erstellt und aktiv vom Kernteam Vue.js gepflegt wird , können wir sicher sein, dass er mit Ihrer Version von Vue und auch mit allen Updates kompatibel sein wird. Außerdem, wenn Sie zwischen unseren Seiten wechseln, hat das relative Paket auch viele andere großartige Funktionen, die wir in diesem kommenden Abschnitt entdecken werden. 78. Kursübersicht und Startprojekt: Willkommen zurück zu diesem brandneuen Abschnitt. Für die kommenden Abschnitte werden wir auch ein neues Projekt namens Creative Cards haben. Dies wird eine Kartenbearbeitungsanwendung sein und wir können vom Startbildschirm hier sehen wir den Header-Abschnitt haben, wir haben einige Links zu beliebten Kategorien. Dann haben wir alle unsere verfügbaren Kategorien unten aufgelistet. Dies wird dynamisch aus den Daten generiert, die wir in unserer Anwendung haben. Wir können auf eine dieser Kategorien klicken und alle verfügbaren Karten sehen, die dieser aktuellen Kategorie entsprechen. Wenn wir alle auswählen, sehen wir einen Link für alle verfügbaren Karten, die wir nun zur Bearbeitung auswählen können. Wenn wir auf eines dieser klicken, werden wir dann zur Bearbeitungsansicht weitergeleitet. Wir können alle Seiten auswählen. Wir haben die Vorderseite, die Innenseite links, innen rechts, und auch die Rückseite. Von jeder dieser Ansichten haben wir die Kreuzung von auf der rechten Seite. Wir können neue Bilder auswählen, die Sie für alle Hintergründe verwenden möchten. Wir können die Position dieses Bildes austauschen. Wir können auch das Bild entfernen, wenn wir kein Bild für diese bestimmte Seite haben wollen. Wir können diesen Text auch bearbeiten und alle Änderungen, die wir vornehmen werden in der Vorschau auf der linken Seite widergespiegelt. Darüber hinaus haben wir auch einige Zugriff auf alle Optionen. Wir können den Schrifttyp ändern, können wir den Schriftstil ändern. Wir können die Farbe ändern und sie auch fett, kursiv machen. Wir können die Größe des Abschnitts erhöhen. Wir können auch die horizontale und vertikale Ausrichtung einstellen. Dies ist genau das Gleiche für jede unserer Seiten. Diese sind alle vollständig editierbar. Wir sind nicht mit den Standardeinstellungen stecken, die auf dem ersten Klick auf diese Karte zur Verfügung gestellt werden. Dies wird auch mit einer Datenbank verknüpft werden, so dass wir glücklich sein wollen. Wir können dann auf die Schaltfläche „Bestellung aufgeben“ klicken und es wird diese Bestellung an eine Datenbank senden. Zusammen mit einer Datenbank werden wir auch einige neue Funktionen in den kommenden Abschnitten untersuchen, wie serverlose Funktionen, wir werfen einen Blick auf den vue Router, die vue Komposition API und vieles mehr. Wie beim Rest des Projekts können Sie, wenn Sie den Creative Card Starter aus dem GitHub Repository herunterladen, wenn Sie den Ordner bereits zu Beginn des Kurses haben, dort hineingehen und den Creative Card Starter öffnen. Ich habe bereits innerhalb des Terminals dazu navigiert und dies innerhalb von Visual Studio-Code geöffnet. Um zu beginnen, haben wir einen ziemlich einfachen View CLI Setter. Aber wir werden nur einige Ergänzungen für dieses Projekt innerhalb des Indexpunkts HTML bleiben. Ich habe einen Link zu Google Fonts hinzugefügt. Die Quelle enthält direkt innerhalb des Assets-Ordners, einige Symbole und auch einige Bilder, die wir als Ausgangspunkt verwenden werden. Wir werden einen Router-Ordner haben und wir werden uns das als nächstes ansehen. Aber wahrscheinlich der wichtigste Teil ist dieser Datenpunkt js. Dies ist eine Reihe von verschiedenen Karten, die wir als Ausgangspunkt für dieses Projekt verwenden werden. Dies sind die Abschnitte, die alle vollständig editierbar sind. Wenn wir diese Abschnitte innerhalb von hier ändern, ist dies ein Array, das Objekte für jede unserer Karten enthält. Ich habe die ID, den Namen und auch die Kategorien, zu denen diese Karte gehört und diese alle verwendet werden , um die Kategorien zu generieren, die Sie auf der Homepage gerade hier sehen. Danach, ein Array von Seiten, haben wir die Vorderseite, die Innenseite links, die Innenseite rechts, und auch die Rückseite, eine Standard-Hintergrundbild Position. Dann springen wir in die Kartenabschnitte, das ist die Tech-Sektionen mit allen Daten. Wir haben die Höhe, die Farbe und auch die Schriftfamilie, zusammen mit allen anderen Optionen, die alle aus unserem Menü editierbar sind. Das einzige, was wir jetzt tun müssen, ist, zum Terminal zu gehen und NPM install mit dem NPM I-Befehl auszuführen. Dadurch werden alle Knoten-Pakete installiert, die wir für dieses Projekt benötigen. Und sobald dies erledigt ist, gehen wir nun zum nächsten Video über, wo wir den Vue Router installieren. 79. Einrichten des Vue-Routers: Wenn Sie noch nie einen Router verwendet haben, ist es ein Paket, das wir verwenden können, um grundsätzlich zwischen unseren Seiten oder Ansichten zu wechseln. Da wir es mit einseitigen Anwendungen zu tun haben, haben wir nicht die traditionelle Art, Seiten zu ändern, indem wir sie von diesem Server anfordern. Stattdessen verlassen wir uns auf einen Router, der eine URL zu einer unserer Komponenten abbildet. Dies ist eine viel flexiblere und erweiterte Art, unsere Anwendungen zu navigieren, die einzige Art und Weise, wie wir uns im vorherigen Projekt angesehen als wir eine dynamische Komponente für diesen Anwendungsfall einrichten. nicht nur darum, Seiten zu wechseln, es gibt eine Menge mehr Funktionen, wir werden auch einfach über gehen. Auch das vue-router-Paket wird offiziell vom Core Vue.js Team unterstützt und gepflegt. So ist es tief integriert, unterstützt und auch auf dem neuesten Stand gehalten. Es gibt einen CDN-Link, aber da wir die View CLI verwenden, ist die Installation wirklich einfach. Um unsere Pakete auf der gleichen Version zu halten, das Starter-Projekt, das wir hier haben, bereits diesen Router installiert. Wir können dies in der package.json in die Abhängigkeiten sehen. Wir haben den Vue-Router, der wirklich einfach hinzuzufügen ist, und wenn Sie dies ein anderes Projekt hinzufügen möchten, das Sie selbst erstellen, können Sie zum Terminal gehen. Denken Sie daran, dass dies bereits installiert ist Führen Sie daher diesen Befehl nicht aus. Aber wenn Sie dies in einem anderen Projekt verwenden, könnten Sie mit dem vue-Router installieren, mit dem Befehl eines vue add Routers. Dadurch wird der vue-Router als CLI-Plug-In hinzugefügt und Ihnen auch die Möglichkeit gegeben, einen Verlaufsmodus einzurichten , den wir später betrachten. Für dieses spezielle Projekt haben wir noch nicht den Verlaufsmodus eingerichtet, wenn neue Router einschließen. Sobald der Befehl vue add router ausgeführt wurde, , wenn Sie in das Quellverzeichnis gehen wird ein neuer Ordner hinzugefügt, wenn Sie in das Quellverzeichnis gehen. Der neue Ordner ist dieser Router gerade hier, der eine Datei Index.js enthält. Wenn wir einen Blick auf die Spitze werfen, das erste, was wir tun werden, ist, die Pakete zu importieren, die wir vom vue-Router benötigen, wir werden sehr bald über die Geschichte Modi sprechen, aber das ist das Paket, das wir brauchen, um einen neuen vue-Router zu erstellen. Darunter importieren wir alle Komponenten, zwischen denen Sie von unserem Router wechseln möchten. Hier haben wir den Import aus unseren Home-Komponenten, die mit der Vue CLI hinzugefügt wurde. Es wurde ein Views Verzeichnis mit dem about erstellt, und auch die Homepage, um mit dem Router zu beginnen. Als nächstes haben wir eine Reihe von Routen, die wir für unsere Anwendung verwenden möchten. Jedes dieser Objekte enthält einen Pfad. Wir haben den Home-Link und auch die über den Link direkt unten. Jeder dieser Links wird einer bestimmten Komponente zugeordnet. Dieser verbindet es mit unseren Home-Komponenten. Wenn wir einen Blick auf die über Komponente werfen, ist dies ein wenig anders als die gerade oben. Dieser verwendet Code-Splitting, und wir werden später einen Blick darauf werfen, wie dies zu tun ist. Wir erstellen dann ein Router-Objekt, das jede Konfiguration enthält, die wir brauchen, wie die Geschichte, die wir gerade erwähnt haben. Wir gehen auch in unserem Streckenfeld vorbei. Schließlich exportieren wir unsere Router-Datei, so dass dies in unserer Anwendung von in die main.js verwendet werden kann. Wir importieren dann diesen exportierten Router nur hier, und fügen ihn dann unserer Anwendung hinzu, bevor dies auf die fertig gemountet wird. Es ist eine Aktion, die an das Terminal geht und startet unser Entwicklungsserver würde NPM laufen dienen. Öffne das auf. Wir haben jetzt zwei Links oben auf der Seite, über die Startseite, die Links zu/, dann auch die über diese Seite. 80. Router-Link und Router-Ansicht: Wir haben jetzt zwei Links oben auf der Seite. Wir haben die Startseite, die Links zu Schrägstrich vorwärts. Dann auch die „Über uns“ -Seite. Dies ist in großer Notwendigkeit zwei Routen, die wir in der Router-Datei gerade hier gesehen haben, und dann Zuordnung zu unseren Komponenten. Die Vue CLI wird automatisch in diesen beiden Routenfotos hinzugefügt. Aber im Allgemeinen müssen wir diese in unsere Zellen hinzufügen. Auch diese Links, die Sie hier sehen, wenn wir zu unserer App.vue gehen, hat die CLI bereits diese beiden Links in Fotos über den Router-Link hinzugefügt. Router Link ist eine Komponente, die die beiden Requisiten als Attribut akzeptiert. Es ist hier drin, wo wir auf der Route passieren, zu der wir navigieren wollen. Wir können diese Router-Links in beliebigen Komponenten oder jeder Seite platzieren, die wir wollen. Verwendung dieses Router-Link wird aus verschiedenen Gründen auch gegenüber der Verwendung der regulären HTML a Elemente bevorzugt . Wenn wir uns die Ausgaben von Browser-Entwickler-Tools ansehen, klicken Sie mit der rechten Maustaste auf „Inspect“, öffnen Sie den Körperbereich und schauen Sie sich die App in der Navigation an. Wir sehen anstelle unseres Router-Link, wir haben dies ein Element, unsere Startseite, und auch den About Link. Es gibt jedoch einen Unterschied zwischen dem a Element, das automatisch hinzugefügt wurde, unter dem wir uns selbst hinzufügen. Wenn wir den Verlaufsmodus eingestellt haben , den wir uns bald ansehen werden, wird dieser Link, der hinzugefügt wurde, alle Klicks abfangen und verhindern, dass der Browser die Seite automatisch aktualisiert. Versuchen Sie, einen Router-Link, wo möglich, anstatt ein HTML-Link-Element zu verwenden. Wenn Sie den Router in Vue Version 2 verwendet haben, haben Sie möglicherweise auch die Tag-Eingabeaufforderung genau so verwendet. Dies erlaubte uns, das Element zu ändern, das unseren Link umschlossen, jedes andere HTML-Element wie ein Listenelement. Beachten Sie jedoch, dass dies in der neuesten Version des Routers nicht verfügbar ist. Daher müssen Sie dies entfernen, wenn Sie es in vorhandenen Projekten haben. Wir sind nicht nur darauf beschränkt, eine statische Zeichenfolge wie diese zu übergeben, etwa zwei Requisiten, wir können auch dynamische Daten übergeben. Zum Beispiel können wir einen Benutzer wie diesen haben. Lassen Sie uns einen Skriptabschnitt mit unserem Exportstandard erstellen, mit unserem Datenabschnitt, und dann werden wir einen Benutzer zurückgeben. Bei diesem Benutzer kann es sich um ein Objekt mit dem Namen und auch um eine Benutzer-ID handeln. Wir können dies dann dynamisch mit dem Doppelpunkt machen und dann eine Vorlagenzeichenfolge innerhalb des [unhörbaren] übergeben . Möglicherweise möchten wir zu einer Route gehen, die Schrägstrich Benutzer ist, und dann die ID des Benutzers. Geben Sie dies ein Speichern, Aktualisieren, und jetzt, wenn wir auf „Über“ klicken, sendet dies uns an Benutzer/12345, und dies gibt uns eine ID der Flexibilität, die wir bei der Auswahl neuer Routen haben. Wir können auch noch weiter ausdehnen, indem wir ein Objekt übergeben. Anstatt unseren Weg einfach so, können wir in unserem Objekt vorbeigehen. Es ist einfacher, wir können in einem Pfad passieren, zu dem wir navigieren wollen. Auch hier können wir einen dynamischen Pfad übergeben oder wir können einfach eine reguläre Zeichenfolge hinzufügen. Dies muss auch dynamisch sein, daher fügen wir die Bindung hinzu. Dasselbe für unseren zweiten Link, können wir in den Pfad hinzufügen. Jetzt, da wir ein Objekt haben, können wir auch zusätzliche Eigenschaften hinzufügen. Für jetzt, geben Sie dies ein Speichern und wir können den Browser aktualisieren, Link zu unserer Startseite und auch die Über uns Seite auch, oder alternativ, anstatt einen Pfad genau so zu referenzieren, können wir auch aus dem Router gehen und in den Index oder js, und verwenden Sie dann den Namen, den wir hier bereits angegeben haben. Wir haben die Home und auch die About Us Namen, jeder von ihnen kann jetzt über in unserem Router Link verwendet werden. Innerhalb unseres Objekts können wir unseren Pfad durch die Namenseigenschaft ersetzen. Auf der ersten war zu Hause, und der zweite war über. Lassen Sie uns das testen, aktualisieren. Es navigiert immer noch zu unseren beiden Seiten. Einfach unter unseren Links, können wir den Seiteninhalt direkt unten sehen. Der Grund, warum wir dies sehen können, liegt an dieser Router-Ansicht, die unter unseren Links platziert wurde. Dies fungiert als [unhörbar] für die Komponenten, die wir derzeit betrachten. Wir können dies überall in unserer Vorlage platzieren. 81. Parameter und Abfragen: Das Routerpaket hat mehr zu bieten als nur zwischen Komponenten zu wechseln. Es kann auch verwendet werden, um Daten in Form von Parametern und auch eine Abfragezeichenfolge zu übergeben. Lassen Sie uns zunächst einen Blick auf Parameter oder Parameter werfen, die Variablen für eine bestimmte Route in der Routerverbindung sind, die wir gerade hier haben. Wir können unsere Parameter innerhalb dieser beiden Objekte hinzufügen. Also, kurz nach unserem Namen durch ein Komma getrennt, fügen Sie unsere Parameter hinzu. Innerhalb dieses Objekts können wir so viele Parameter hinzufügen, wie wir wollen. Aber jetzt werde ich nur eine Benutzer-ID hinzufügen, die der Name ist. Der Wert wird gleich user.id sein, die wir aus unseren Daten erhalten können. Hier haben wir es mit dieser Homepage zu tun. Gehen wir rüber zum Vue und dann in die home.vue Komponenten. Hier haben wir mehrere Möglichkeiten, um auf unsere Router-Daten zuzugreifen. Innerhalb der doppelten geschweiften Klammern können wir dies mit dem Dollar-Symbol-Router ausgeben. Rüber zum Home-Link. Dies gibt uns jetzt eine Menge Informationen über den Router. Wir können das tatsächlich ein bisschen einfacher sehen, wenn wir in die Entwickler-Tools gehen. Also gehen Sie in Inspect, öffnen Sie diese Home-Komponenten, und dies zeigt jetzt alle unsere Routing-Informationen ein wenig strukturierter. Wir haben Zugriff auf Dinge wie die aktuelle Route. Wir können alle Anfragen oder Parameter sehen, wie die Benutzer-ID, die wir gerade hinzugefügt haben. Wenn wir nach unten scrollen, haben wir viele weitere Informationen für diesen Router zur Verfügung, wie zum Beispiel alle Optionen. Wir können auch alle Routen sehen, die wir in unserer Router-Datei gesetzt haben. Wir haben die Home-Komponente, die der Pfad des Vorwärtsslash ist. Dann haben wir das etwa eins knapp unter zwei. So können wir auf alle Router-Informationen zugreifen. Wir könnten dies auch verwenden, um auf die [unhörbaren] Parameter zuzugreifen, oder stattdessen könnten wir die Dollar-Symbol-Route verwenden, die viele dieser Informationen herausfiltert und uns einfach Zugang zu den aktuellen Routeninformationen gibt. Wir können bereits sehen, dass dies viel einfacher ist. Wir können auf diesem Objekt sehen, dass wir Zugang zu unseren params haben. Hier drinnen können wir auf Punktparams zugreifen. Speichern Sie das. Jetzt haben Sie Zugriff auf unsere Benutzer-ID. Wenn wir nur direkt auf diesen Wert zugreifen wollten oder wenn Sie mehrere Parameter hatten, können wir auch über ihren Namen auf sie zugreifen. Nun würde diese Benutzer-ID uns nur Zugriff auf den Wert geben. Der Router kann auch Abfragezeichenfolgen verarbeiten. Wenn Sie in der Vergangenheit keine Abfragezeichenfolge verwendet haben, können Sie einige zusätzliche Informationen innerhalb einer URL bereitstellen. Möglicherweise haben Sie eine URL gesehen, die in etwa so aussieht. Wir haben ein Fragezeichen, das verwendet wird, um die Abfrage von der URL zu trennen. Dann haben wir unsere Namen und unsere Werte genau so. Jetzt ist der Benutzer, der gleich einem beliebigen Wert ist. Dies ist ein Abschnitt. Wir können auch das kaufmännische Und-Zeichen verwenden, um mehrere Abfrageparameter zu besuchen. diese Abfragezeichenfolgen kann lokal zugegriffen werden oder wir können sie auch an den Server senden. Ein typischer Anwendungsfall für eine Abfragezeichenfolge ist, wenn sie mit einem HTML-Formular verwendet wird. Wir können dies sehen, wenn wir eine einfache Formulare oder Vorlage hinzufügen. Wir werden es einfach bei einer Namenseingabe halten. Dann ist das name-Attribut wichtig. Wir werden diesen Benutzer anrufen. Dieses name-Attribut ist derjenige, der in der Abfragezeichenfolge angezeigt wird. Wir werden das in einer Sekunde sehen. Wir fügen auch einen Standort hinzu. Auch hier eine Eingabe mit dem Typ des Textes. Dieser kann den Namen des Standorts haben. Eine Schaltfläche, um dies mit der Art des Sendevorgangs zu senden. Jetzt über den Browser, wenn wir in irgendeinem Namen hinzufügen hier, einen Ort, können wir senden. Dies wird nun der URL als Abfragezeichenfolge hinzugefügt. Wir sehen, der Benutzer ist gleich Chris und auch der Standort diesen Benutzer und auch dieser Ort ist von allen Formen aus diesem Namensattribut abgedeckt. Alle Informationen werden mit unserem Formular an den Server gesendet. Lassen Sie uns dies entfernen und alle diese Abfragezeichenfolgen wurden automatisch hinzugefügt oder können als Formular eingereicht werden. Aber wir können sie auch manuell hinzufügen. Wenn wir zu unserer app.vue gehen und dann in unseren Router Link, ist ein Setup genau wie unsere Parameter, können wir ein Komma hinzufügen. Innerhalb unseres Objekts richten Sie unsere Abfrage ein, wo wir so viele Abfragezeichenfolgen hinzufügen können, wie wir möchten. Zum Beispiel könnten wir ein Token mit diesem über Link hinzufügen, speichern Sie dies. Klicken Sie auf den Link „Über“, und dieser wird dann am Ende unserer URL hinzugefügt. Wenn wir auch auf diese Informationen zugreifen wollten, könnten wir auch direkt von unserer Vorlage aus darauf zugreifen. Zurück zu unseren Home-Komponenten und immer noch auf diesem Route-Objekt, anstatt auf unsere Parameter zugreifen, müssen Sie nur auf unsere Abfrage zugreifen, aktualisieren. Wir sehen hier nichts drinnen, da wir dies dem About Link hinzugefügt haben. Wir können dies zu diesem Zweck auf die etwa ausschneiden, und das ist unsere Anfrage. Wir können auch mehrere Abfragen hinzufügen und dann über ihren Namen, wie dieses Token, darauf zugreifen . So können wir auf Parameter und unsere Abfragezeichenfolgen zugreifen. Im kommenden Video werden wir einen Blick darauf werfen, wie wir dynamische Routen anpassen können. 82. Dynamische Routen anpassen: URLs sind nicht immer so einfach wie das, was wir hier mit unserem Schrägstrich und dem Schrägstrich über Route haben. Sie müssen auch dynamischer sein und Daten enthalten , die Ihre Daten ändern, die für jeden Benutzer unterschiedlich sind. Zum Beispiel können Sie einen Pfad haben, der so aussieht, Sie haben möglicherweise Schrägstrich Konten. Dieser Pfad wäre einfach für das Router-Handle, wir müssen dies nur einer Account-Komponente zuordnen. Aber was wäre, wenn wir auch die Benutzer-ID, diesen Link an einen bestimmten Benutzer einfach so übergeben wollten ? Es wäre viel zu viel Arbeit, eine neue Route für jede einzelne Verwendung zu erstellen , die wir in unserer Datenbank hatten, aber dafür stellt der Router eine dynamische Segmente zur Verfügung, die eine Möglichkeit ist, einen Teil unserer URL zu haben , die diese beiden ändern kann zeigt auf die gleichen Komponenten. Innerhalb unserer Router-Indexdatei ist das erste, was wir tun werden, eine neue Komponente zu importieren, wir haben dies noch nicht erstellt, sondern werden dies in einem Moment tun. Wir werden unser Konto importieren, dies wäre der gleiche Speicherort wie oben, es wird im Ordner views sein, und dies wird das account.vue sein. Danach erstellen wir ein Pfadobjekt, wie wir hier sehen Öffnen Sie also die geschweiften Klammern und den Pfad dafür, wir werden in nur einer Sekunde zu Ihnen zurückkommen. Wir werden einen Namen des Kontos haben und auch auf unsere Komponenten verweisen, die wir gerade diese Service-Datei importiert haben, und wir können jetzt diese Account-Komponenten innerhalb unseres Views-Ordners erstellen. Es wird für den Moment ziemlich einfach sein, wir werden nur in einer Ebene 1 Überschrift meines Kontos platzieren. Ich gehe zu dem Router können wir jetzt unseren Pfad für diese Komponente erstellen, also wollen wir, dass dies Schrägstrich Konten zuordnen, und dann wollen wir alle dynamischen Abschnitte wie unsere Benutzer-ID behandeln. Also, was wir hier tun werden, ist im Grunde eine Variable übergeben , die den Doppelpunkt verwendet, den wir diesem einen Namen unserer Wahl geben können, dies wird uns erlauben, diese Informationen bei Bedarf zu erfassen. In unserem Fall nennen wir dies die Benutzer-ID, und dann über die app.vue müssen wir einen Router Link zu unseren neuen Komponenten erstellen , so dass es am Ende platziert, öffnen und schließen Tags und dann innerhalb des öffnenden Tags. Wenn ich die beiden Requisiten gemacht habe, sehe ich kein Objekt, wo der Pfad, dies wird dynamisch sein, so dass wir dies innerhalb der hinteren Ticks platzieren können und wir wollen nach vorne Schrägstrich Konto gehen und dann können wir unsere Benutzerobjekte nutzen und Link zu der ID machen. Also über im Browser, und wir müssen auch einen Namen innerhalb von hier hinzufügen, und wir können auch eine von diesen getrennt in zwei zwischen jedem dieser Namen dieses Pipe-Symbol platzieren . Aktualisieren und klicken Sie jetzt auf unsere Konten und unsere Mein Konto Abschnitt wird jetzt angezeigt, wenn wir zu diesem Konto Abschnitt, der die dynamische Benutzer-ID enthält Link. Wenn wir auf die Daten innerhalb dieses dynamischen Abschnitts zugreifen müssen, wie diese Benutzer-ID, können wir auf diese seltsamen routes.params zugreifen, genau wie wir es zuvor gesehen haben. Bis zum account.vue, öffnen Sie die doppelten geschweiften Klammern, die wir auf die aktuelle Route Informationen zugreifen können, die params, die uns jetzt Zugriff auf diese Benutzer-ID-Variable gibt , die wir in unserer Router-Datei saßen. Auch wenn wir mit dem Namen einer app.view zu dieser Route verlinken wollten, können wir dies genau so tun, wie wir beide mit dieser Home-Route getan haben, also anstatt einen Pfad wie diesen zu haben, der einen dynamischen Abschnitt enthält, können wir auf den Routennamen verlinken das Konto war, dann können wir die Parameter übergeben , genau wie wir oben sehen, die ein Objekt war. Wir müssen die Benutzer-ID übergeben, die gleich der user.id ist. Dadurch funktioniert die Startseite, die Info und die Kontoseite immer noch, wir könnten auch mehrere Parameter übergeben und haben auch mehrere Dynamiken -Abschnitte auch. Also zum Beispiel, wenn dieser Account Abschnitt und dann gehen, um alle Blog-Beiträge für diesen Benutzer aufzulisten, wir könnten dann auch jede der einzelnen Blog-Beiträge in acht dynamische Segmente speichern und das funktioniert genau das gleiche. Wenn wir auf die app.vue gehen, können wir einen zweiten Parameter übergeben. Dieser war der Beitrag und wir können in jedem eindeutigen Namen in hier übergeben, aktualisieren, lasst uns das ausprobieren. Wir sehen, dass unsere Post-ID auch verfügbar ist. 83. Verschachtelte Routen: Innerhalb unserer App.vue Datei behandeln wir alle unsere Routenänderungen mit diesen Links und zeigen dann die ausgewählte Seite mit dieser Router-Ansicht an. Das ist alles gut. Nun, was, wenn wir nicht wollten, dass alle unsere Vues an diesem Ort platziert werden? Zum Beispiel, was wäre, wenn wir unser Konto.Vue gerade hier hatten. Dies hatte auch einige verwandte Seiten, wie die vorherigen Bestellungen und auch einen Abschnitt, um das Profil zu aktualisieren. Möglicherweise möchten wir, dass diese beiden neuen Abschnitte nur innerhalb dieser Kontovue angezeigt werden. Aber wenn der Fall verwendet wird, haben wir, was verschachtelte Routen genannt wird. Um dies in Aktion zu sehen, müssen wir einige neue Seiten innerhalb unseres Vue Ordners erstellen. Erstellen Sie eine neue Datei. Das erste ist Update-Profil und das zweite ist Benutzerbestellungen. Ein Grundtitel wird vorerst in Ordnung sein. Wir richten die Vorlage mit einer Überschrift der Ebene 1 ein, die für die vorherigen Bestellungen gilt. Wir können diese speichern und in das Benutzerprofil kopieren. Selbstverständlich benötigen wir auch Links, um auf unsere neuen Seiten zu verlinken. Also zurück zur App.vue Komponente, richten Sie unsere neuen zwei Router-Links, um Profil zu aktualisieren. Dann ist der zweite für unsere vorherigen Bestellungen. Wie wir gerade erwähnt haben, beziehen sich diese beiden Links auf unsere Kontoseite. Daher kann es sinnvoll sein, diese unter dem Kontopfad genau so zu haben. Wir könnten Schrägstrickkonten und Schrägstrich Updates haben. Wir könnten auch in unserem Profil nisten. Lassen Sie uns diese mit der Eingabeaufforderung einschließen, parse in unserem Objekt, das den Pfad enthält. Dies wird dynamisch sein, also brauchen wir den Backtick. Dies wird zum Schrägstrich Konto gehen, dann in die spezifische user.id und dann Schrägstrich Update weiterleiten. Schnappen Sie sich das. Zur gleichen, aber dieser wird zu Bestellungen gehen, bis wir mit diesem Kopf über die relative Datei fertig sind, wo wir unsere zwei neuen Komponenten importieren werden. Das nächste war das Update-Profil, und das letzte war die Benutzerbestellungen. Dann können wir unseren Routerpfad direkt unten einrichten. Eine Option besteht darin, zwei neue Routen zu erstellen. Eine, die auf unsere Forward Schrägstrich Update verweist und eine, die auf unsere Schrägstriche zeigt. Dies ist nicht ideal [unhörbar], da wir immer noch die gleichen Kontokomponenten anzeigen möchten , aber wir möchten, dass diese beiden neuen Seiten innerhalb verschachtelt werden. Um damit umzugehen, können wir ein untergeordnetes Array hinzufügen. Dadurch wird angegeben, welche Komponenten innerhalb dieser obersten Kontoseite verschachtelt werden sollen . Zuerst brauchen wir diesen Beitrag Abschnitt nicht, damit wir diesen entfernen können. Dann, durch ein Komma getrennt, können wir in unserem Kinder-Array hinzufügen. Hier drinnen werden wir ein neues Objekt analysieren, das eine neue Route ist, aber der Unterschied ist, dass die neue Route, die Sie hier im Inneren analysieren wird, was am Ende dieser [unhörbaren] Route geht. Wenn wir zum Beispiel ein Schrägstrich aktualisieren wollten, würden wir einfach den Pfad als Update analysieren. Dann, sobald der Benutzer besucht Schrägstrich Konto, Schrägstrich die Benutzer-ID, Schrägstrich aktualisieren. Wir deklarieren dann, welche Komponenten wir rendern wollen. In unserem Fall ist es die Seite, die wir gerade erstellt haben, namens Update-Profil. Als nächstes wird unser zweites Objekt für Schrägstriche sein. Dadurch wird die Komponente angezeigt, die wir gerade importiert haben, die Benutzerbestellungen waren. Lassen Sie uns das ausprobieren, aktualisieren Sie den Browser. Jetzt sehen wir unsere Links oben, klicken Sie auf Update-Profil. Dies führt uns nur zu den Account-Komponenten. Dennoch konnten wir mit dem Abschnitt „Schrägstrich aktualisieren“ die vorherigen Bestellungen ausprobieren. Auch hier haben wir die richtige URL und es zeigt mir immer noch Kontokomponenten an. Wie Sie sehen können, sehen wir immer noch diese Hauptkontokomponente. Aber was ist mit den beiden verschachtelten Komponenten im Inneren? Nun, dafür müssen wir einem Vue js genau sagen, wo wir wollen, dass diese beiden Komponenten innerhalb unserer Eltern angezeigt werden. Über auf das Konto.Vue. Nun, dazu können wir auch eine Router-Ansichtskomponente übergeben. Wenn wir nun zwischen unseren beiden untergeordneten Links wechseln, sehen wir auch den Inhalt dieser Komponenten. 84. Aktive Klassen: Es wird uns auch helfen, besser zu verstehen, auf welcher Route wir uns gerade befinden. Vue Routen fügen auch einige Klassen zum aktiven Link hinzu. Kurz bevor wir dies in Aktion sehen, lassen Sie uns auf die app.vue gehen und schnell unsere ungenutzten Parameter von diesem Konto-Link entfernen. Wir brauchen diesen Beitrag nicht, da wir dies im letzten Video entfernt haben, und jetzt, wenn wir zum Browser gehen und in die Entwickler-Tools gehen , klicken Sie mit der rechten Maustaste auf Inspect. Wir müssen das im Nav-Bereich öffnen. Dies enthält alle unsere Links über die ganz oben, und wenn wir auf den Home-Link klicken, werden Sie sehen, dass diese Klasse von Router-Link-aktiv und auch Router-Link-exakt-aktiv erscheint . Lassen Sie uns versuchen, die über und diese Klasse wird jetzt auf den über Link verschoben. Das Konto, das bekommt es auch. Aber wenn wir auf das „Profil aktualisieren“ klicken, sehen wir immer noch, dass unsere beiden Klassen zu unserem Update Profile Link hinzugefügt werden, aber der Account Link hat immer noch diese Router-Link-aktive Klasse. Das gleiche, wenn wir zu früheren Bestellungen gehen, unsere beiden Klassen sind jetzt auf unseren vorherigen Bestellungen, aber der Router Link aktiv ist immer noch auf unserem Konto Link, obwohl wir nicht auf diesen Link geklickt haben. Dies liegt daran, dass dieser Router-Link-aktiv immer auch bei einer Teilübereinstimmung gilt. Derzeit befinden wir uns auf /account, die Benutzer-ID und dann /orders. Da der Konto-Link aber auch mit /account beginnt, wird dies auch als Übereinstimmung betrachtet. Router-Link-Exact-Active ist jedoch spezifischer und es muss dem genauen Pfad entsprechen, auf dem wir sind, damit diese Klasse angewendet werden kann. Wenn wir dies schließen und zum app.vue gehen, wenn wir auch den ViewRouter einrichten, hat es auch einige Klassen innerhalb von hier hinzugefügt. Wir haben einige Klassen für unsere Navigation, und auch, diese Klasse für Router-Link-genau-aktive Einstellung der Farbe unseres Links. Deshalb sehen wir, wenn wir oben auf einen dieser Links klicken, diese grüne Farbe, obwohl wir dies nicht selbst innerhalb der Stylesheets gesetzt haben, da dies die genaue Klasse ist, werden Sie Legen Sie nur die grüne Farbe fest, wenn eine genaue Übereinstimmung vorliegt. Wenn wir dies jedoch ändern würden, die Router-Link-aktiv, da unser aktueller Pfad mit /account beginnt, wird dies auch mit diesem Account Link übereinstimmen. Auch das gleiche, wenn wir auf vorherige Bestellungen klicken, sehen wir unsere beiden Links sind aktiv. Wir werden das tun. Der Stil gilt jetzt nur für die genaue Route, auf der wir gerade sind. Das ist also nur etwas, das man sich bewusst sein muss und es gibt uns eine gute Kontrolle über das Styling unserer Links. 85. Fallback-Seiten: Es ist auch wichtig zu behandeln, was passiert, wenn der Benutzer auf dem falschen Teil unserer Anwendung oder auf einer Seite landet , die nicht existiert. Wir können eine allgemeine fangen alle Komponenten wie eine folgen vier Seite einrichten , um anzuzeigen, wenn keine über Routen übereinstimmen. Im Moment, wenn wir zum Browser gehen und unbekannte URL eingeben, sehen wir keine Komponente, die im Browser angezeigt wird. Um dies zu erfassen, gehen wir zu unseren Ansichten und erstellen eine neue Seite namens NotFound.vue. Nur eine einfache Vorlage wird mit einer Überschrift der Ebene 1 in Ordnung sein, und diese Überschrift wird nur sagen, Seite nicht gefunden. Wenn wir wollten, könnten wir auch in Links zu verschiedenen Teilen für die App platzieren oder sogar auf die Homepage umleiten, wenn wir es wollten. Dies ist in Ordnung für dieses Beispiel. Sagen Sie dies und jetzt, um darauf zuzugreifen , müssen wir zu unserem Router gehen, und ganz oben werden wir dies als nicht gefunden importieren. Sie dann in unser Router-Array ErstellenSie dann in unser Router-Arrayein neues Objekt, das alle Routen behandeln wird , die gerade oben nicht erkannt werden. Es wird auch einen Weg nehmen müssen, den wir in nur einer Sekunde betrachten werden. Der Name, nicht gefunden, und auch die Komponenten, die Sie gerade importiert haben, die auch nicht gefunden wird. Wenn Sie View to in der Vergangenheit verwendet haben und einen Router verwendet haben, um unerkannte Pfade abzufangen, müssten wir nur einen Stern hier hinzufügen, und dies würde dann unsere NotFound-Komponenten für jeden unerkannten Pfad rendern. In Ansicht 3 müssen wir jedoch einen benutzerdefinierten Parameter übergeben. Ein benutzerdefinierter Parameter ist genau wie die, die wir oben für die Benutzer-ID verwendet haben, aber der Unterschied diesmal ist, dass wir auch einen regulären Ausdruck übergeben müssen , um jeder unbekannten Route zu entsprechen. Lassen Sie uns unseren benutzerdefinierten Parameter hinzufügen , den ich den Pfadnamen nennen werde. Ein Fehler im regulären Ausdruck, d. h. der Punkt und der Stern, und dies entspricht allen anderen Routen, die oben nicht aufgeführt sind. Ich werde dies sagen, wir sehen, dass unsere unbekannte URL jetzt unsere Seite nicht gefundene Komponenten rendert. Wir können auch auf diese Parameter zugreifen, die wir gerade hier innerhalb der Komponente haben. Tun Sie dies, wir greifen auf sie wie alle anderen Router-Parameter zu. Wir öffnen die doppelten geschweiften Klammern, greifen auf die aktuelle Route und wählen dann die Parameter aus. Dies gibt uns nun Zugriff auf diese Pfadnamen-Variable und auch auf den Wert. Wir könnten auch auf mehrere Pfade genau so zugreifen, wenn wir einen Schrägstrich und dann ein zweites Segment hinzugefügt haben . Dies wird jedoch nur eine einfache Zeichenfolge rendern. Wenn wir die Abschnitte aufteilen und einzeln darauf zugreifen wollten, können wir dies wiederholen und ein Array von Parametern erstellen. Um dies zu tun, müssen wir nur zu unserem Router gehen und dann am Ende einen optionalen Stern hinzufügen, und meistens sagen wir, dass dies in ein Array mit mehreren Werten konvertiert wird. Dies gibt uns nun die Möglichkeit, diese Parameter einzeln zu verwenden, wenn nötig, oder sogar durch diesen Pfad zu navigieren. Wir brauchen auch nicht zu viel die vollständige URL einfach so. Dies kann auch ein Abschnitt unserer URL sein. Zum Beispiel, wenn dies Schrägstrich Admin war, würde dies mit dem Admin-Abschnitt übereinstimmen, und dann könnten wir den catch-all-Abschnitt für alles, was folgt verwenden. Dies würde uns dann erlauben, genauer zu sein, und wir könnten benutzerdefinierte Komponenten für verschiedene Seiten erstellen, was falsch sein kann. Für diesen Anwendungsfall könnten wir dann unsere nicht gefundene Seite anpassen, um persönlicher für diese Admin-Route zu sein, wir können vielleicht in einigen Texten hinzufügen oder einfach keine Admin-Seite gefunden, und dann könnten wir auch den Router übergeben, lassen Sie die -Benutzer genau wissen, auf welchem Pfad sie sich befinden. Da dies in der Admin-Route ist, sehen wir diese nicht gefundene Seite nicht. Was wir tun müssen, ist zu gehen Schrägstrich Admin und dann in etwas zu platzieren , nachdem dieser Pfad oder Seite nicht gefunden wird dann gerendert wird, und dann auch unsere Kundennachricht direkt unten. 86. Projekt-Komponenten und Routen einrichten: Willkommen zurück. Wir hatten jetzt ein wenig Zeit, um mit dem Vue Router herumzuspielen und einige seiner Funktionen zu sehen. Jetzt können wir das Gelernte nehmen und es auf unser neues Projekt anwenden. Um zu beginnen, werden wir diese vierseitige Folge bereinigen, indem wir die Nachricht entfernen und dann zu unserer Routerdatei gehen und diese wiederherstellen, um alle nicht gefundenen Seiten abzudecken. Dann gehen wir in den Views Ordner und erstellen die vier neuen Seiten, die wir für unser Projekt benötigen. Wir können die über entfernen, wir brauchen dies nicht, das Konto, entfernen Sie die Homepage. Wir werden sogar NotFound Komponenten benötigen, wir können das UpdateProfile und auch die UserOrders entfernen. Moment werden wir unsere vier neuen Seiten erstellen, und die erste Datei, auf die wir zugreifen werden, ist die Admin.vue. Die nächste Seite wird für die AppHome sein. Die dritte ist für die Kategorie. Dies ist eine Seite, um alle unsere Karten nach der Kategorie anzuzeigen. Dann schließlich die create.Vue, die die vue, die wir verwenden, um die Karte zu bearbeiten. Nur damit wir diese für jetzt sehen können, fügen wir eine Vorlage und eine Überschrift der Ebene 1 hinzu, und der Titel für diese Seite wurde erstellt. Wir können das kopieren, fügen Sie es in die anderen drei Seiten ein. Diese war Kategorie, speichern Sie diese, und die AppHome, und auch der Admin zu. Wir werden auch den Router verwenden, um zwischen allen vier dieser Vues zu wechseln. Also gehen Sie auf die Router-Index-Seite, ich werde alle vier dieser Seiten durch unsere neuen Seiten ersetzen. Der erste ist für den Admin, der zweite ist der AppHome, der dritte ist für Create und dann auch die Kategorie. Die Einstiegspunkte des Home-Routers werden diese AppHome sein. Wir können dies ändern, wir brauchen nicht die über Seite, so können wir dies ändern, um die Kategorie, den Namen der Kategorie zu sein , und dann ersetzen Sie diesen dynamischen Import durch eine reguläre Komponente. Wir brauchen auch nicht den Account Abschnitt, so dass wir dies ersetzen können /create, den Namen von create, die Komponente. Wir können auch das Kinder-Array entfernen. Wir müssen auch ein weiteres Objekt erstellen, und dieses ist für unsere Admin-Route. Über zu unserer Haupt-app.vue Datei, hier drin, werden wir alle Links entfernen undes nur an Ort und Stelle die Router-Ansicht lassen, es nur an Ort und Stelle die Router-Ansicht lassen, so dass wir dieses div, das der Wrapper ist, greifen können , entfernen Sie dies. Diese App wird nicht über ein traditionelles Stil-Menü, um zwischen diesen Seiten zu wechseln. Stattdessen navigieren wir, wenn der Benutzer auf eine Kategorie oder eine bestimmte Karte klickt. Sobald die Karte ausgewählt wurde, verwenden wir dann den Router, um zwischen diesen Kartenseiten zu wechseln. Moment können wir die Routen testen. Alles, was wir tun müssen, ist am Ende unserer URL zu gehen und die Kategorie zu testen. Außerdem, erstellen, haben wir auch die Admin-Route. Das ist auch in Ordnung. Dann endlich die Homepage. Alle diese Routen sind nun korrekt auf unsere vier Seiten abgebildet. Wir benötigen auch eine Header-Komponente, so dass wir diese innerhalb des Komponentenordners platzieren können. Öffnen Sie das und wir haben immer noch diese HelloWorld-Komponente. Wir können dies als AppHeader.vue umbenennen. Lass uns das aufräumen. Ich werde alles für jetzt entfernen und in der Vorlage platzieren, die den Header-Abschnitt und auch unseren Titel innerhalb einer Level-1-Überschrift von kreativen Karten enthalten wird. Danach wird ein Navigationsbereich , der drei Links zu beliebten Kategorien enthalten wird. Erstellen Sie also eine ungeordnete Liste mit drei Listenelementen. Das erste Listenelement enthält den Router-Link. Übergeben Sie in die Requisite. Wir müssen diese Dynamik nicht machen, da dies nur eine reguläre Zeichenfolge von/categoryist. Dann navigieren wir zum Geburtstagsbereich. Pass in den Text des Geburtstags. Wir können diesen Listeneintrag auch kopieren und diesen noch zwei Mal verwenden. Der nächste wird auf die Jubiläumsroute gehen, den Text, und fügen Sie dann die dritte am unteren Rand ein. Das wird Weihnachten sein. Sie können diese Kategorien auch ändern, wenn Sie möchten, viel einfacher, wenn wir Datum verschiedenen Abschnitt. Welche Route auch immer wir besitzen, wir werden immer diesen Haupt-AppHeader anzeigen, so dass wir dies in der app.vue importieren können. Erstellen Sie im Skriptbereich unseren Import. Wir können das @-Symbol verwenden, um die Quelle in die Komponenten und dann den AppHeader zuzugreifen. Registrieren Sie dies direkt unten, entfernen Sie die Daten auch. Wir brauchen dies auch nicht aus den vorherigen Videos, so dass wir das entfernen können. Dann bis zur Vorlage können wir dies direkt über der Router-Ansicht registrieren, so dass dieser AppHeader immer oben angezeigt wird. Dann wird der Inhalt aus unserer Router-Ansicht direkt unten platziert. Gut. So sehen wir jetzt den Header, wir können diese Links testen. Wir haben den Geburtstag, den Jahrestag, Weihnachten, aber dieser Header braucht ein wenig Styling. Sie können alle Stile in die Header-Komponente einfügen, wenn Sie möchten, aber ich werde in die allgemeinen Listenstile in unsere app.vue einfügen. Außerdem hat der Abschnitt nicht das Bereichsattribut, daher gilt dies für alle Listenelemente in unserer App. Entfernen von Navigationsstilen, wurden diese automatisch vom Router hinzugefügt, greifen Sie auf die ungeordnete Liste zu. Dann werden wir hier drinnen einfach alle Browser-Standardwerte zurücksetzen, indem den Rand auf Null und auch für das Padding gleich setzen. Danach werde ich Artikel und auch unsere Links auflisten. Wir setzen die Textdekoration auf keine. Dadurch werden alle Unterstreichungen von unseren Links entfernt. Der Listenstil ist auch keine, und um auch die Standardverknüpfungsfarbe zu entfernen, legen wir die Farbe fest, die vom übergeordneten Element übernommen werden soll. Ok. Dies sind nur allgemeine Resets und Standardwerte für unsere Listenelemente, und für die spezifischeren Header-Stile gehen wir zurück zu unserem AppHeader und erstellen dann unseren Style-Abschnitt. Dies kann auch in den Anwendungsbereich einbezogen werden. Zuallererst wurde dieser gesamte Inhalt in diesen Header eingewickelt. Ich werde die Schriftfamilie festlegen, indem ich eine Google-Schriftart verwende, die sich innerhalb unserer Indexseite befindet. Von den Startdateien innerhalb unserer Indexseite, ist dies nur hier verlinkt. Dies gibt uns Zugang zu zwei Schriftarten, die wir in unserem Projekt verwenden können. Sie können auch zu Google Fonts gehen, so dass jeder andere Font-Anbieter, und verwenden Sie einen anderen Stil, wenn Sie es vorziehen. Zurück zu unserem Header-Abschnitt, ein kursiver Rückgriff, und dann auch der Buchstabenabstand von einem Pixel. Dies wird nur ein wenig mehr Platz zwischen jedem unserer Buchstaben hinzufügen. Die Schriftgröße von 18 Pixel, ein Rand am unteren Rand eines Pixels, eine durchgezogene Linie und die Farbe von hellgrau, und Pixel alle Polsterung auch auf der Unterseite, die den Inhalt von dieser Zeile trennen wird . Dann können wir auf die Flex-Box zugreifen, um diesen Titel nach links und dann unsere Links nach rechts zu verschieben . Zeigen Sie Flex, Abstand zwischen würde den Inhalt ausrichten und vertikale Ausrichtung mit ausrichten Elemente, indem Sie diese in der Mitte platzieren. Sehr bald wird diese Stufe 1 Überschrift auch auf die Home-Route verlinken, so dass wir einen Cursor zu unserer h1 hinzufügen können. Der Cursor des Zeigers, und entfernen Sie auch alle Standard-Ränder oder die Überschrift. Über unsere Links auf der rechten Seite, greifen Sie die ungeordnete Liste, und dann können wir die Ausrichtungen mit dem Display flex einstellen. Da die Standard-Flexrichtung Zeile ist, wenn Sie das Flex-Feld verwenden, werden diese nun auf der Seite platziert. Wir brauchen nur etwas Platz zwischen unseren Listeneinträgen. Wir können dies mit etwas Polsterung auf der linken Seite von 0,5 Rems tun, und jetzt ist unser Header komplett. 87. Programmatische Navigation: Diese Router-Links, die wir bisher in unserem Projekt verwendet haben ermöglichen es uns, auf Knopfdruck an verschiedene Standorte zu wechseln. Zuvor haben wir uns auch kurz den Zugriff auf die Router-Instanz mit Dollar-Symbol-Router angesehen . Dies gab uns Zugriff auf Dinge wie die Parameter in unserem Code. Dieser Dollar-Symbol-Router stellt auch viele der Dinge zur Verfügung, um die Möglichkeit vorzuschlagen, mit Methoden wie Push zu navigieren. Das bedeutet, dass wir auch die Navigation in unsere Klick-Listener oder Methoden einbauen können. In diesem AppHeader.vue haben wir diesen Website-Titel in der Ebene auf Überschrift und wirklich, was wir wollen, ist, zurück zur Homepage zu verlinken und wir könnten dies entweder in den Router-Link einschließen oder programmgesteuert navigieren durch Zugriff auf den Dollar-Symbol-Router, wenn wir darauf klicken. Werfen wir einen Blick darauf, wie wir dies mit der Router Push-Methode tun können. Im Inneren des offenen Innenraums hören wir auf einen Klick, wie wir es normalerweise tun würden, und dann werden wir darauf reagieren, indem wir auf den Router zugreifen, der diese Push-Methode hat. Hier können wir einen Pfad hinzufügen, zu dem wir navigieren möchten, also fügen Sie den Schrägstrich hinzu, klicken Sie auf unseren Seitentitel und dieser navigiert nun zurück zu unserer Homepage. Dies ist auch nützlich für Dinge wie das Verschieben des Benutzers in den Kontobereich , nachdem sie sich angemeldet haben, da dies auch innerhalb einer Methode verwendet werden kann. Der einzige Unterschied ist, wenn wir dies in unserem Skript-Abschnitt unten verwenden, denken Sie daran, wir müssten dieses Schlüsselwort vorne hinzufügen. Werfen wir einen Blick auf etwas anderes, das die Ersetzungsmethode ist. Aktualisieren Sie jetzt zum Geburtstag und dann ist unser Titel zu sein, genau das gleiche zu arbeiten, aber es gibt einen entscheidenden Unterschied. Wenn Sie im Browser navigieren, wird jede Seite, die wir besuchen, zur vorherigen Historie der Einträge hinzugefügt. Auf diese Weise weiß der Browser, wohin er navigieren soll , wenn wir auf diese Zurück- und Vorwärts-Tasten klicken. Wenn wir die Push-Methode verwenden, die wir gerade nachgeschaut haben, werden diese Einträge auch zu unserer Historie hinzugefügt. Wie es jedoch klingt, wenn wir die Ersetzungsmethode verwenden, so wie wir es jetzt sind, wird dies dann den aktuellen Eintrag ersetzen, anstatt einen neuen hinzuzufügen. Wir können dies überprüfen, wenn wir aktualisieren, wir gehen zum Geburtstag, dann klicken Sie auf die Home-Route und jetzt, wenn wir auf den Zurück-Button klicken, wir sind jetzt nehmen Sie ihn zurück zum vorherigen Link , der Geburtstag ist, weil dies ersetzt. Wenn wir zurück zur Push-Methode gehen und genau das gleiche tun, aktualisieren, gehen Sie zum Geburtstags-Link, zurück zu unserem Haus und jetzt, wenn Sie auf zurück klicken, dann bringt uns zurück zu unserem ursprünglichen Geburtstags-Link, da der Schrägstrich ist dem Browser-Stack hinzugefügt, anstatt den vorherigen zu ersetzen. Neben diesem Router hat auch eine go-Methode, die es uns ermöglicht, durch die Einträge des Browsers zu navigieren, so anstatt in einen bestimmten Pfad zu navigieren, wie können wir zurück oder vorwärts durch so viele Einträge, wie Sie wollen. Wenn wir zurück zu den Seiten gehen wollten, könnten wir negative 2 verwenden und das ausprobieren. Gehen Sie nach Hause, klicken Sie auf Geburtstag, Jahrestag und Weihnachten, dann klicken Sie auf den Website-Titel und wir werden zurück zu den Beiträgen, die zurück zu unserem Geburtstags-Link war. Wenn wir dies ändern, um eine positive 2 zu sein, klicken Sie auf diese, dies wird uns dann zurück zu den Beiträgen, die zurück zu unserem Weihnachtslink ist. Dies ist nützlich, wenn wir mehrere Seiten zurück- und vorwärts gehen wollten, aber wenn wir nur für eine Seite rückwärts oder vorwärts gehen wollten, könnten wir diese auch stattdessen durch vorwärts oder auch zurück ersetzen. Dies funktioniert genauso wie go, funktioniert aber nur für eine einzelne Seite. Neben diesen gibt es auch einige andere Methoden, die Sie Bedarf innerhalb der API-Dokumente finden können, aber dies sind einige der häufigsten. Unser Projekt, wir werden dies als Push und verknüpfen Sie dies mit der Zeichenfolge oder Schrägstrich, die wir auf die Homepage verlinken. Als nächstes werden wir einen Blick auf die verschiedenen Arten von Verlaufsmodi werfen, die der Router zur Verfügung stellt. 88. Unterschiedliche Router-Modi: In diesem Projekt verwenden wir ein Starter-Projekt, das von GitHub heruntergeladen wird. Es ist bereits der Vue Router installiert. Aber wenn wir den Setup-Prozess für den Router durchlaufen, werden wir gefragt, ob wir den Verlaufsmodus verwenden möchten. Der Verlaufsmodus ist nicht im Starter dieses Projekts enthalten, daher befinden wir uns derzeit im sogenannten Hash-Verlaufsmodus. diesem Grund haben wir diesen Hash innerhalb der URL. Da wir eine einseitige Anwendung verwenden, wird dieser Hash nur intern verwendet. Der Teil nach dem Hash ist die Route, zu der Sie navigieren möchten. Hier navigieren wir /Kategorie und dann unsere ausgewählte Kategorie. Dieser Hash innerhalb der URL zu haben, kann sich jedoch negativ auf SEO auswirken. Wenn dies ein Problem ist, können wir den Router ändern, um den HTML5-Modus zu verwenden. Um dies zu tun, werden wir diese Änderung in der Indexdatei des Routers vornehmen und dann nach unten scrollen. Anstelle des Web-Hash-Verlaufs können wir dies durch CreateWebHistory ersetzen. Wir müssen dies auch aus dem Router-Paket importieren. Bis zum Anfang können wir die Hash-Version durch den Webverlauf ersetzen. Dies und auf unser Projekt, können wir alles nach unserem localhost durch die Navigation entfernen. Dies funktioniert alles genau gleich, aber diesmal ohne den Hash in der Navigation. Das funktioniert hier gut. Aber denken Sie daran, dass unsere Anwendung eine einzelne Seite nach oben ist, und das gesamte Routing wird auf dem Front-End behandelt. Dies, wenn wir unsere Anwendung bereitstellen, müssen wir den Server so einrichten, dass immer unsere Hauptseite index.html zurückgegeben wird. Wenn diese Einrichtung eingerichtet wird, kann unser Router dort umgehen, wo wir am Front-End sein müssen , wenn der Benutzer die falsche Seite oder eine dynamische Route besucht. Wir werden einen Blick darauf werfen, wie Sie dies später einrichten können, wenn wir unsere Anwendung bereitstellen. Da wir nur die Hauptseite index.html zurückbekommen, müssen wir auch alle 404-Fehler behandeln. Wir tun dies derzeit innerhalb unseres Routers, das ist Catch-all Route. Wir werden testen, ob dies funktioniert, indem wir zu unerkannten Links gehen. Wir sehen immer noch die „Seite nicht gefunden“. Wenn wir oben auf einen unserer Links klicken, erhalten wir die Komponente „Seite nicht gefunden“, da wir den zweiten Abschnitt nicht direkt nach unserer Kategorie eingerichtet haben . Derzeit haben wir nur /category, also ist dies eine unbekannte Route. Aber wenn wir den letzten Abschnitt entfernen, haben wir jetzt eine Übereinstimmung der Kategoriekomponente. 89. Abschnittseinführung – Composition API: Willkommen, Sie haben es zum Kompositions-API Abschnitt geschafft. Diese Kompositions-API ist eine Ansicht versionsfreie Funktion und etwas, das wahrscheinlich der am meisten erwartete Teil dieser neuen Bibliothek ist. Wir werfen einen Blick auf die Komposition von Anfang an mit Sätzen von Funktionen, wir integrieren sie auch in unsere Creative Cards Anwendung. Wir werden uns alle neuen Funktionen ansehen, die bieten, wie wir unseren Code in zusammensetzbare Dateien aufteilen können, wie wir ihn importieren und wiederverwenden können. Außerdem werden wir uns ansehen, wie wir einige der Dinge, die wir bereits kennen, integrieren können, wie zum Beispiel: verschiedene Methoden, wie wir Funktionen erstellen können, wie wir berechnete Eigenschaften erstellen können, Beobachter und auch einige der neuen Funktionen wie Watch-Effekte, und wie man Reaktivität zu hinzufügen. Ich freue mich auf diesen Abschnitt und werde Sie im nächsten Video sehen. 90. Was ist eine Kompositions-API?: Als die Kompositions-API zum ersten Mal angekündigt wurde, erhielt sie zunächst ein wenig negatives Feedback in der Vue Community. Dies war vor allem auf ein mangelndes Verständnis dafür zurückzuführen, was die Kompositions-API erreichen sollte. Wir dachten, dass das Kernteam von vue.js beabsichtigte, die vorhandene Options-API zu ersetzen , die Dinge wie die Daten, die Methoden in den berechneten Abschnitten enthält und sie durch eine ganz neue Sache zu ersetzen, die zu lernen ist. Dies ist jedoch nicht der Fall, die Art und Weise, wie wir vue.js Code mit der Options-API schreiben, ist immer noch vollständig gültig, und alles, was wir bisher abgedeckt haben, ist für das Lernen von vue.js unerlässlich. Mit Vue 3 wird die Kompositions-API jedoch auch als zusätzliche Möglichkeit zum Schreiben von Vue Code bereitgestellt. Eine niedrigere Komposition wird anstelle der vorhandenen Options-API verwendet. Das Vue Team empfiehlt, nur die Kompositions-API zu verwenden , wenn Ihr bestehendes Projekt groß, schwer zu warten und als Entwickler schwer zu navigieren ist . In der Tat können beide zusammen in den gleichen Komponenten verwendet werden, wenn nötig, wodurch das Refactoring viel glatter wird. Die Motivation hinter der Komposition war es, unseren Code viel einfacher zu organisieren, zu pflegen und wiederzuverwenden. Wiederverwendbare Komponenten führen uns so weit, aber das eigentliche JavaScript innerhalb dieser Komponenten kann besser organisiert werden. Es wird eine typische Vue Komponente haben, die einen Benutzer, Produkte und einen Warenkorb hat . Der benutzerbezogene Code befindet sich im Datenabschnitt, eingehängt, es gibt eine Methode und auch eine Uhr. Wir haben auch Produkte in Daten, wir holen sie mit einer Methode, die aufgerufen wird, wenn die Anwendung eingehängt wird, und der verbleibende Code ist für unseren Warenkorb. Der Benutzer kann Produkte aktualisieren oder in den Warenkorb legen, er kann dann mit dem Inhalt dieses Warenkorbs auschecken, und wir haben auch einen berechneten Abschnitt, um den Warenkorb nur anzuzeigen , wenn der Benutzer einen Artikel hinzugefügt hat. Dies ist traditioneller vue.js Code und nichts falsch damit. Warum einen neuen Weg einführen? Wie bereits erwähnt, ist dies in Ordnung, bis unsere Anwendung viel größer wird. Dies ist ein ziemlich einfaches Beispiel, wo wir einen Überblick über all unseren Code auf hoher Ebene sehen können , es wurde auch vereinfacht, diese Seite zu füllen. Wir haben keinen Code in unseren Methoden, und in einer echten Anwendung könnte dieses einfache Beispiel leicht 3-4 mal länger sein. Ein weiterer Nachteil ist unser verwandter Code ist alle getrennt. Alle diese verwandten Teile sind nicht zusammengeklebt und es wird nur ein Problem, wenn unsere Dateien größer werden. Dies ist eines der Dinge, die Komposition auflösen soll. Wir können jetzt Code mehr wie traditionelles JavaScript schreiben und unseren Code auch viel einfacher gruppieren. In regulärem JavaScript können wir den Benutzerabschnitt so schreiben, indem wir eine Konstante [unhörbar] das Use-Objekt und eine Funktion verwenden, um den Benutzer aus einer Datenbank zu bekommen. Für die Produkte könnten wir auch das Produkt-Array und auch eine Funktion haben , um die Daten zu erhalten, die wir benötigen. Auch für den Korb verwandten gehen Sie zu, vielleicht ein Code, der sich in der Zeile überlappt, aber wir können bereits sehen, dass diese gruppiert werden, um unseren Code viel organisierter zu machen. Aber wo setzen wir all diesen Code? Wie immer geht es in unserem Exportstandardabschnitt. Beides, wir wickeln es in eine Setup-Funktion innerhalb von hier, wir geben dann auch alles zurück, was wir dann in unserer Vorlage verwenden möchten , wie unsere Konstanten und unsere Funktionen. Wir lassen Vue hier nicht nur mit dieser neuen Look-Syntax zurück. Wir haben immer noch Zugriff auf vertraute Dinge wie Life-Cycle-Hooks, mit dem On-Präfix. Hier sehen wir OnMounted, um den Benutzer zu erhalten, und auch die Produkte, wenn die Komponente montiert wird. Wir importieren dies auch aus der Vue Bibliothek als benannter Import, d.h. wir importieren nur die Teile, die wir benötigen. Auch vertraute Dinge wie Uhren und berechnet ist auch verfügbar. In diesem Beispiel hier importieren wir berechnete und wickeln unseren Show-Korbcode mit ihm ein, um ihn mit allen Änderungen auf dem neuesten Stand zu halten. Die zweite Sache, die Zusammensetzung zielt darauf ab, zu verbessern, ist Wiederverwendbarkeit. Dieser Refactor, den wir sehen, hat die Komponenten nicht kleiner oder wiederverwendbar gemacht, sondern einfach gruppiert die zugehörigen Abschnitte. Möglicherweise möchten wir die Nutzungsobjekte und auch die Produkte in einem anderen Teil unserer App wiederverwenden. Aktuelle Lösungen umfassen die Möglichkeit, diese Daten auf einer Top-Level-Komponente zu erhalten und sie dann als Requisite weiterzugeben. Obwohl dies unordentlich werden kann, wenn Komponenten tief verschachtelt sind, kann es auch Codierungskomponenten platzieren, in denen es nie vorgesehen war. Wir könnten auch eine staatliche Management-Bibliotheken wie Vuex verwenden , die eine gute Option ist und einen zentralen Speicher bietet. Obwohl dies etwas anderes zu lernen ist und auch eine zusätzliche Möglichkeit, unserem Projekt hinzuzufügen, wäre es großartig, wenn Vue nativ eine Lösung zur Verfügung stellt , um unseren Code leichter zugänglich und wiederverwendbar zu machen? Dank der Komposition ist dies nun möglich, indem wir unseren wiederverwendbaren Code in separate Dateien verschieben. Der Ordnername ist stumm, aber Sie können es allgemein als Composables sehen, wo jeder Abschnitt unseres Codes dann in eine JavaScript-Datei platziert wird, üblicherweise mit dem Präfix verwenden, das wir dann in jede -Komponenten, die es verwenden müssen. Dies macht unsere Komponenten viel leichter und wiederverwendbarer. Dieser ganze Code mag zunächst seltsam und verwirrend aussehen, besonders wenn Sie neu bei Vue sind. Zuerst hat es mir auch angetan, aber wir werden viel Zeit damit verbringen, Kompositionscode in den kommenden Abschnitten zu schreiben , so dass Sie viel Übung bekommen und das wird bald vertrauter werden. 91. Kompositions-Setup: In den vorherigen Folien haben wir uns angesehen, wie unser Kompositionscode innerhalb einer Setup-Funktion geht. Lassen Sie uns dies jetzt in unserer AppHome.vue einrichten, und hier brauchen wir ein Skript mit unserem Exportstandard. Dann übergeben wir es in unserer Setup-Funktion, die genau so aussieht. Setup wird ausgeführt, bevor die Komponente erstellt wird. Es ist hier drin, wo wir unseren Kompositionscode in einer JavaScript-ähnlichen Syntax schreiben. Wie wir gerade im vorherigen Video gesehen haben, wird diese Homepage der Einstiegspunkt für unseren Nutzer sein. Wir werden es verwenden, um eine Liste aller verfügbaren Kategorien für unsere Karten, den Geburtstag und den Jahrestag des Kindes anzuzeigen . In der mitgelieferten Datei data.js, lassen Sie uns dies öffnen, nur hier, jede unserer Karten hat einen Kategoriebereich, der ein Array enthält. Es sind diese Daten, die wir für jede Karte durchlaufen werden, um diese Seite zu konstruieren. Also müssen wir alle unsere Karten durchlaufen und dann erstellen wir eine zweite Schleife, um alle Kategorien durchzulaufen und diese dann zu speichern. Lassen Sie uns zunächst diese Daten importieren, die wir in dieser Komponente benötigen. Direkt unter dem Skript werden wir das Karten-Array importieren. Der Dateipfad dafür war.. /data. Wir würden dann normalerweise die Karten als Dateneigenschaft festlegen. Aber mit der Komposition können wir eine reguläre JavaScript-Konstanten oder Variable erstellen. Also lassen Sie uns eine Konstante namens AllCards einrichten. Wir können zunächst ein leeres Array einrichten. Außerdem benötigen wir eine zweite Variable, die wir verwenden werden, um alle Kategorien zu speichern, die wir finden. Wir werden alle unsere Karten durchlaufen. Das wird also auch gedrängt werden. Wir werden eine Let erstellen und wir werden diese UniqueCategories nennen. Wir könnten dies so einrichten, dass es sich um einen Anfangswert eines leeren Arrays handelt, oder noch besser, wir können dies durch einen neuen Satz ersetzen. Ein Satz ist eine Sammlung von Werten, und genau wie ein Array können wir sie auch durchlaufen. Aber der Unterschied ist, dass es nur eindeutige Werte akzeptiert. Dies ist Ideale in einigen unserer Karten haben die gleiche Kategorie, so dass wir nicht wollen, dass diese Daten dupliziert werden. Außerdem ist ein Set-Objekt reguläres JavaScript und nichts im Zusammenhang mit vue JS. Als nächstes können wir eine Funktion namens GetUniqueCategories erstellen. Weitere Funktionen in der Komposition, sie können auch in jedem anderen gültigen JavaScript-Typ geschrieben werden , wie Pfeilfunktionen, wenn Sie es vorziehen. Wenn diese Funktion klingt, wird dies für die Zuordnung aller unserer Kategorien zu dieser Variablen verantwortlich sein . Also, um zu beginnen, greifen wir alle Karten. In der Tat müssen wir dies nur Karten zuweisen anstatt unserem Array, und dann können wir diese mit ForEach als Funktion durchlaufen und jedes Element wird dies in der Variablen namens card speichern. Also denken Sie daran, jede Karte innerhalb unserer Datendatei hatte diese Kategorien Eigenschaft. So erstellen wir eine zweite Schleife, in der wir unsere Karte und dann die Kategorien auswählen, und dann eine zweite Schleife mit ForEach, die in der Kategorie nimmt. Dann möchten wir diese Kategorie zu UniqueCategories schieben. Nun, wenn UniqueCategories ein Array war, könnten wir die JavaScript-Push-Methode verwenden. Aber da wir dies als Set eingerichtet haben, müssen wir die Add-Methode verwenden, die in der Kategorie übergeben wird. Dann können wir außerhalb unserer Funktion diese Konsole protokollieren, um dies zu testen. Dies lässt uns jetzt mit unserer Funktion, aber jetzt müssen wir dies tatsächlich den Code nennen, der ausgeführt werden soll. Um dies zu tun, können wir dies hinzufügen, um OnMounted Lifecycle Hook zu warten , wo wir es den Funktionsnamen übergeben. Wenn Sie den Lifecycle Hook verwenden, so haben Sie den gleichen Namen wie wir zuvor verwendet haben, wie mountet, aber für die Komposition, fügen wir das Präfix on hinzu. Wenn Sie eine dieser Funktionen wie diese beiden verwenden, müssen wir sie jetzt einzeln aus der Vue Library importieren. So können wir importieren, den benannten Import der onMounted Lifecycle Hook aus der Vue Bibliothek. Lassen Sie uns dies versuchen und öffnen Sie die Browser-Entwicklertools in der Konsole. Hier sehen wir unser Set mit 11 Werten. Lassen Sie uns das öffnen, und wir werden 11 eindeutige Werte sehen. Das ist also alles gut. Wir haben jetzt, was wir brauchen, aber es wäre auch nützlich, eine Kategorie für alle Karten zu haben, und wir können dies auch hinzufügen. Also oben in unserer Funktion wird unsere Schleife auch auf unsere UniqueCategories zugreifen, die Add-Methode aufrufen, dann fügen wir die gesamte Kategorie hinzu, aktualisieren, wir haben jetzt 12 Werte, die auch alle -Kategorie auch. Schließlich können wir zurückkehren, wenn wir alle Werte einrichten , die wir jetzt zur Verfügung stellen wollen, um in unserer Vorlage zu verwenden. Dies wird ein Objekt sein, und das einzige, was wir brauchen, um zu unserer Vorlage zurückzukehren, ist UniqueCategories. Fügen Sie dies hinzu, wechseln Sie zu unserer Vorlage, wir können unsere Überschrift der Ebene 1 entfernen und stattdessen in eine ungeordnete Liste platzieren , in der wir alle diese Kategorien durchlaufen werden. Also die Klasse des Grid-Wrapper, werden wir dies bald für unser CSS hinzufügen, das Listenelement, das die Klasse des Kategorieelements haben wird. Wir können auch v-for übergeben, um alle unsere Artikel durchzulaufen. Also werden wir die Kategorie in Kategorien wie in einem Schlüssel durchlaufen. Da wir Set verwenden, ist jede unserer Kategorien einzigartig. So können wir dies auch als Schlüssel verwenden. Zwischen dem Listenelement können wir dies in einen Link erstellen, indem wir den Router-Link übergeben. Dies nimmt in der Eingabeaufforderung und Übergabe des gesamten Objekts, wo der Name des Links Kategorie sein wird, die wir in unserer Router-Indexdatei eingerichtet haben, wir werden schauen, das ist nur hier. In der Tat müssen wir ein Großbuchstaben C für diesen Namen verwenden. Übergeben Sie auch unser Parameterobjekt an, wo die Kategorie gleich oder Kategorie aus unserer v-for-Schleife sein wird. So wird dies jetzt Link zu Schrägstrich Kategorie weiterleiten und dann Schrägstrich den Namen unserer einzigartigen Kategorie auch. Dieser Link benötigt auch Text zwischen der Router-Link-Komponente. Also übergeben Sie unsere Kategorie zwischen den doppelten geschweiften Klammern. In der Tat möchte dies nur einzigartige Kategorien sein. Es ist sehr der Name, den wir aus der Komposition zurückkehrten. Da wir jetzt Parameter an diese Route übergeben, müssen wir auch über die Router-Indexdatei gehen und auch ein dynamisches Segment namens Kategorie hinzufügen. Wenn wir jetzt den Browser aktualisieren, sehen wir nichts auf dem Bildschirm. Nun, das scheint seltsam, weil wir wissen, dass wir die Kategorien haben, weil wir sie auf der Konsole gerade hier angemeldet haben und wir 12 eindeutige Werte gesehen haben. Nun, der Grund, warum dies geschieht, ist der OnMounted Haken. Zu Beginn dieses Videos haben wir erwähnt, dass das Setup ausgeführt wird , bevor die Komponente erstellt wird. Aber OnMounted wird danach aufgerufen. Dies bedeutet, dass wir zunächst UniqueCategories nur hier als leere Menge übergeben. Anfangs ist dies der Wert, der an unsere Vorlage zurückgegeben wird. Also schleifen wir uns durch einen leeren Wert. Dies bedeutet im Grunde, dass wir unsere GetUniqueCategories Funktion vor dieser eingehängten Phase aufrufen müssen. Eine Option besteht darin, den OnMounted Hook zu entfernen und diesen wie eine normale JavaScript-Funktion aufzurufen. Da wir nicht mehr OnMounted verwenden, können wir dies auch kommentieren und auch den Browser, aktualisieren Sie dies, wir sehen jetzt unsere UniqueCategories. Wenn wir auf eines dieser klicken, sehen wir unsere Kategoriekomponente, und dann nehmen wir es auf die richtige URL. Oder alternativ, wenn wir diese Funktion nicht jederzeit aufrufen mussten, können wir auch den Funktions-Wrapper verschieben und einfach den Code innerhalb des Setups laufen lassen. Speichern Sie das, und auf unserer Homepage funktioniert das auch genau gleich. Die Möglichkeit, Code wie diesen hinzuzufügen, um beim Setup auszuführen, bedeutet mit der Komposition, wir brauchen nicht mehr die vor erstellen und auch die erstellten Lifecycle-Hooks. Beide wurden nun zugunsten dieses Ansatzes entfernt. 92. Primitive vs. Referenzdatentypen: Um Ihnen zu helfen, die Reaktivität besser zu verstehen , werden wir zuerst den Unterschied zwischen primitiven und Referenztypen in JavaScript betrachten . Wenn Sie mit dem Unterschied bereits vertraut sind, können Sie mit dem nächsten Video fortfahren. Wenn nicht, wird Ihnen dieses Video helfen, sich auf die kommenden Videos vorzubereiten. Sie müssen dies nicht eingeben oder mit dieser Codierung folgen, aber es gibt etwas, das ich Ihnen zeigen möchte, um Ihnen zu helfen besser zu verstehen, was wir aussehen werden, und um dies zu sehen, gehen wir zu app.vue und dann runter zu unsere Skripte. Was ich dabei bin, dir zu zeigen, ist, ein einfaches Objekt als Requisite zu übergeben. Innerhalb dieser app.vue werden wir einen Datenabschnitt erstellen. Dies wird ziemlich ähnlich aussehen, was wir in den frühen Videos hatten. Wir werden nur ein neues Objekt mit einem Benutzer zurückgeben. Dieser Benutzer erstellt eine Namenseigenschaft und auch eine Benutzer-ID. Bis zur Vorlage ist die einzige Komponente, an die wir Requisiten weiterleiten müssen, dieser App-Header, also lassen Sie uns unsere Requisiten darauf weitergeben. Der Benutzer ist gleich dem Benutzer. Dies, und dann können wir zu diesem App-Header-Komponenten gehen und wir werden in der Regel so etwas tun. Wir werden einen Skriptabschnitt erstellen. Richten Sie die Requisiten ein. Wenn als Objekt oder Array. Wir werden das einfach halten und dies einfach als Array übergeben. Wir werden dann vielleicht diese Requisiten innerhalb des Datenabschnitts akzeptieren, wo wir eine Datumseigenschaft wie das Use-Objekt setzen könnten , um gleich unserer Requisite zu sein, die this.user ist. Nun, dies empfängt unsere Benutzer-Requisite und speichert diese lokal in den Komponenten, so dass wir dann ändern könnten, vielleicht mit einem Formular mit V-Modell. Lassen Sie uns dies überall in unseren Vorlagen tun. Richten Sie eine textbasierte Eingabe ein. Wir könnten V-Modell einrichten, das unserem Benutzerobjekt verknüpft ist. Gehen wir nach dem Namen. Tun Sie dies und wir sehen unsere Eingabe und unseren Namen wie erwartet, aber wenn wir zu unserer app.vue zurückkehren, wo wir diese ursprünglichen Daten haben, lassen Sie uns diese schnell ausgeben. Sie benötigen doppelte geschweifte Klammern, die im Benutzer platziert werden. Jetzt haben wir unsere Daten an zwei Standorten. Wir haben die ursprünglichen Daten aus unserer app.vue. Dann hier oben haben wir die Requisiten, die in diesem App-Header kopiert wurden. Lasst uns das mal ausprobieren. Wir können unsere Eingaben ändern. Fügen wir hier drin etwas hinzu. Wir sehen, sobald wir diesen App-Header aktualisieren, dass auch die Daten in der übergeordneten app.vue auch aktualisiert werden. Nun, das mag ein wenig seltsam erscheinen, weil wir das als Requisiten weitergegeben haben, wir haben dann eine Kopie gemacht, und wir sollten jetzt nur die Daten in unserem App-Header ändern. Normalerweise würden wir erwarten, dass dieses Verhalten nur dann geschieht, wenn wir ein benutzerdefiniertes Ereignis ausgeben, um die Daten innerhalb der Eltern zu ändern. Aber das macht es automatisch. Werfen wir einen Blick auf ein anderes Beispiel zurück in der app.vue. Die Verwendung des Objekts wird einen einfachen Benutzernamen übergeben , der nur eine einfache Zeichenfolge ist, und öffnen Sie nun den App-Header, wir können dies auch als Requisiten übergeben. Benutzername gleich Benutzername zu sein, und geben Sie dies auch innerhalb unserer App aus. Rüber zum Header. Übergeben Sie das in unser Array. Wir machen das gleiche wie unser Objekt, geben dies in unsere Daten weiter. Der BenutzernameProp wird gleich this.username sein. Lassen Sie uns auch die Eingabe duplizieren, die Art des Textes, und dieses Mal werden wir V-Modell auf den UserNameProp. Nun, wenn wir versuchen, diesen Benutzernamen zu ändern, wenn nicht irgendetwas, dieses Mal, gibt es keine Änderungen in den übergeordneten Komponenten. Doch wenn wir dies auf unser ursprüngliches Objekt tun, sehen wir, dass die übergeordneten Komponenten aktualisiert werden. Dies mag zunächst seltsam erscheinen, aber es ist keine neue JS-Funktion. Es ist etwas im Zusammenhang mit JavaScript und Datentypen, die in zwei Gruppen platziert werden können und diese Gruppen werden als primitive und Objekttypen bezeichnet. Objekttypen in JavaScript werden als Funktionen, Arrays und ein Objekt selbst betrachtet. Primitive sind Daten, die kein Objekt sind, und Typen von String, Boolean, number, undefined, symbol und bigInt. Der Teil, an dem wir interessiert sind, ist innerhalb dieser App-Header, Sie werden alle zwei Requisiten von Benutzer haben, und Benutzername und dann nehmen wir genug Kopien von beiden dieser Werte. Der Unterschied ist, dass diese beiden Werte in unsere beiden Gruppen fallen. Diese erste ist eine Objektreferenz und die zweite ist ein Primitiv. Diese aktuelle ist eine Art von String und hier liegt der Unterschied. Wenn wir einen primitiven Wert kopieren, genau wie wir, würden wir diesen Benutzernamen kopieren, jede Kopie hat ihren eigenen eindeutigen Wert. Sie können sich dies als zwei separate Werte vorstellen, weshalb, wenn wir unsere Eingabe und unseren Benutzernamen aktualisieren, das Original unberührt bleibt. Objekttypen werden sich jedoch, wie wir es mit unserem Benutzer haben, anders verhalten. Selbst wenn wir eine Kopie eines Objekts über die Objekte nehmen , die auf den gleichen Wert im Speicher zeigen, obwohl sie sich an verschiedenen Komponenten und Positionen befinden. Dies wird auch als Referenztypen bekannt, da sich alle Variablen auf die gleiche Sache beziehen und es ist dieser Grund, warum wir den ursprünglichen Namen aktualisiert sehen. Dies hinterlässt uns eine Frage, warum Dinge wie emit verwenden, um Updates in den übergeordneten Komponenten bereitzustellen? Warum nicht einfach Objekttypen übergeben? Schließlich würde dies eine Menge Code sparen. Dies ist eine vernünftige Frage und es gibt nichts, was Sie davon abhält, dies zu tun, wenn Sie möchten, besonders bei einem kleineren, einfacher zu verwaltenden Projekt. Es wird jedoch allgemein empfohlen, dies möglichst zu vermeiden, da es möglicherweise verwirrend wird, wenn mehrere Quellen dasselbe Objekt mutieren. Eine Option besteht darin, einen tiefen Klon des Originals zu erstellen und dennoch die Techniken wie emittieren zu verwenden , um nur die Daten innerhalb der übergeordneten Komponente zu ändern. Wir könnten unsere Daten auch glätten oder reorganisieren, um sie als Objekte zu verwenden, oder wir könnten unsere Requisiten neu strukturieren, um nur Objekteigenschaften anstelle des vollständigen Objekts zu übergeben. Eine andere Möglichkeit besteht darin, das Objekt nur als Anfangswert an das untergeordnete Objekt weiterzugeben und dann eine andere Datumseigenschaft für das übergeordnete Objekt zu ändern. Unabhängig davon, welche Option wir wählen, der Schlüssel besteht darin, Updates vorhersehbarer zu machen und sicherzustellen, dass wir wissen welche Komponenten oder welche Methoden unsere Daten zu einem bestimmten Zeitpunkt geändert haben, anstatt zu erraten, welcher Verweis auf die Daten die Aktualisierungen verursacht hat. Wenn das alles völlig neu ist, mag es ein wenig verwirrend erscheinen, aber das Wichtigste, an das man sich erinnern sollte, ist ein Primitiv, genau wie eine einfache Zeichenfolge oder Zahl, eher wie eine unabhängige Kopie. Aber ein Objekttyp wie dieser zeigt immer noch auf das ursprüngliche Objekt. Nun, wir brauchen nichts davon in unserem Projekt, das ist nur für unsere Demonstration, also können wir all diese entfernen, Eingaben in app.vue einschließen Wir brauchen diese Requisiten nicht und wir können auch unsere Dateneigenschaften entfernen. Dieses Verständnis von Objektreferenzen und Primitiven wird in kommenden Videos nützlicher werden, denen wir unsere Kompositionsdaten reaktiv machen werden. 93. Kurze Einführung in Proxies: Die freie Reaktivität wird mithilfe einer ES6-Funktion namens Proxies erstellt. Vue 2 verwendet eine ES5-Funktion namens Object.DefineProperty, die die Getter und Setter erstellt, um unsere Daten zu aktualisieren. Diese gutaussehenden Vorbehalte, einer von ihnen war eine neue Dateneigenschaft wurde hinzugefügt, nachdem die Anwendung geladen wurde, sie wurde nicht automatisch reaktiv. Wir könnten vorhandene Dateneigenschaften ändern, aber keine neuen dynamisch hinzufügen. Dies wird mit Proxys gelöst. Ein Proxy ist wie ein Wrapper für ein Objekt. Dieser Wrapper ermöglicht es uns, ihn abzufangen und Änderungen vorzunehmen, bevor wir ein Update durchführen. Proxies können ein komplexes Thema sein, aber ich werde Ihnen einen schnellen Überblick geben, damit Sie ein grundlegendes Verständnis haben. In dieser App.vue Komponenten, lassen Sie uns ein einfaches Beispiel zu unserem Skript hinzufügen. Um ein Objekt abzufangen und einige Änderungen vorzunehmen, benötigen wir zunächst ein Objekt, mit dem wir arbeiten können. Außerhalb unseres Exportvorgangs möchte ich eine Konstante namens Status erstellen und dies als Objekt festlegen, das eine Benutzereigenschaft und auch einen Beruf übergibt. Dann können wir einen Proxy mit dem neuen Proxy, Kapital P, einrichten , der die Ziele und das Handler-Objekt aufnehmen wird. Diese Konstante kann Proxy genannt werden. Dieses Ziel, das wir hier sehen, ist das ursprüngliche Objekt, das wir projizieren wollen. Wir können dies nennen, um Zustand zu sein, genau wie unser Objekt gerade oben, dies ist das Ziel, das wir abfangen wollen, dann ein Handler, der ein Objekt ist, das einzurichten oder wir wollen mit diesem ursprünglichen Zielobjekt tun. Lassen Sie uns auch dies einrichten, cons-Handler, und so wäre dies ein Objekt. Nachdem dies ein Konsolenprotokoll erstellt hat, werde ich wieder den Inhalt während des Proxys ausgeben. Denken Sie daran, das ist unser Proxy-Punkt auf das ursprüngliche Objekt, das Sie gerade hier übergeben. Das ist unser Staat. Dies gibt uns nun Zugriff auf alle diese Eigenschaften wie den Benutzer und auch den Beruf. Versuchen wir zuerst den Benutzer, gehen Sie mit dem Browser, wir können in die Konsole gehen, öffnen Sie dies. Jetzt sehen wir den Benutzernamen von Chris, die Besatzung. Da gehen wir hin. Wie Sie hier erwarten können, sehen wir den ursprünglichen Benutzer auf dem ursprünglichen Beruf. Da dieser Handler noch nicht eingerichtet ist, um Änderungen zu erstellen, hat sein Handler eine Reihe von Funktionen, die wir verwenden können. Diese werden manchmal Requisiten genannt. Eine dieser Funktionen ist get. Dies wird verwendet, um einen unserer Eigenschaftswerte zu erhalten. Übergeben Sie die Ziele und die Requisite, und dann können wir einige Konsolenprotokolle tun, um genau zu sehen, welche Daten wir für jede von ihnen haben. Geh zum Ziel. Dann ist dieser für die Requisite. Speichern Sie diese Datei, und aktualisieren Sie die Konsole. Zunächst einmal sehen wir die Ziele, und wenn wir das öffnen, sehen wir den Benutzer und auch den Beruf. Da dieses Ziel das ursprüngliche Objekt ist, werden wir danach die Requisite sehen, die die Besetzung ist, und diese Requisite ist die individuelle Eigenschaft, die wir auswählen, in unserem Fall wählen wir den Beruf aus. Dies wird auf alle Besetzung innerhalb der Konsole verweisen. Das Ziel ist das Gesamt-Zustandsobjekt. Dann ist die Requisite die individuelle Eigenschaft von diesem Objekt. Jetzt haben wir Zugriff auf all diese Informationen. Wir können diese Werte jetzt abfangen und ihnen alles antun, was wir wollen. Zum Beispiel könnten wir die ursprüngliche Requisite zurückgeben, die ToUpperCase ist. Speichern und Aktualisieren. Wir sehen die Besetzung, die jetzt Großbuchstaben ist. So funktioniert ein Proxy. Es nimmt das Ziel oder das ursprüngliche Objekt, und dann wird es dieses Objekt abfangen und einen der Werte greifen. Wir können mit diesen Werten alles tun, was wir wollen. Neben gets gibt es auch eine Handler-Funktionen, eine solche Menge, die verwendet wird, um die neuen Eigenschaftswerte zu setzen. Alles, was wir hier sehen, ist nur ein normales JavaScript. Wie funktioniert das alles mit einer Vue.js? Nun, alles, was wir zu einem Datenabschnitt hinzufügen, wird automatisch in Proxies konvertiert. Alles, was wir in einem Datenabschnitt im Inneren hier hinzufügen, wird automatisch konvertiert, um ein Proxy des ursprünglichen Objekts zu sein. Genau wie dieser Get-Handler gerade hier wird Vue auch seine eigene Handler-Funktion hinzufügen, dh Proxy, Getter und Setter hat, um Vue.js zu ermöglichen, die Daten jedes Mal zu verfolgen und zu aktualisieren, wenn es eine Änderung gibt. Auf diese Weise funktioniert es für alle Dateneigenschaften. Aber was ist mit den regulären Variablen, die wir mit Komposition erstellen? Nun, für diesen Anwendungsfall bietet Vue auch einige Rapper, um Reaktivität hinzuzufügen. Wir werden uns diese in den kommenden Videos ansehen. 94. Reaktive und isReactive verwenden: Um die Dinge für dieses Video über in der app.vue Datei zu starten, können wir alle Proxy-Demo aus dem letzten Video entfernen. Entfernen Sie alles bis zu diesem Datumsobjekt. Jetzt werden wir einen Blick darauf werfen, wie wir Reaktivität zu den Daten in unserer Kompositions-API hinzufügen können . Wir haben Dateneigenschaften, die wir bisher für das Optionsobjekt verwendet haben. Standardmäßig ist alles reaktiv. heißt, wenn wir Änderungen an diesen Daten vornehmen, werden alle anderen Teile unserer Anwendung, die auf diese Daten beruhen, ebenfalls in V3 aktualisiert. Wie im letzten Video erwähnt. Dies liegt daran, dass VGS diese Eigenschaften bei Verwendung von Komposition in Proxys konvertiert. Nun sind diese Variablen, die wir deklarieren, nicht automatisch reaktiv, genau wie wenn wir Variablen mit normalem JavaScript erstellen. Dies sind diejenigen, die Sie innerhalb der Setup-Funktion innerhalb Ihres App-Homes hinzugefügt haben. Genau wie die einzigartigen Kategorien und alle Karten. Sie frei ist viel modularer als V Version 2. Wir müssen zuerst das Reaktivitätspaket importieren, das wir aus der View-Bibliothek benötigen. Dies bedeutet, dass wir nur das Teil importieren, das wir tatsächlich in unserer Anwendung verwenden. Mal sehen, wie das in der Komposition funktioniert. Innerhalb dieser App zu Hause und auch innerhalb der Setup-Funktion. Wir können ein JavaScript-Objekt erstellen, um einige Dateneigenschaften zu halten. Rufen wir diese Daten und setzen Sie dies auf ein Objekt. Dieser Name der Daten ist völlig anders und steht nicht im Zusammenhang mit einer regulären Datumseigenschaft. Im Inneren hier können wir einige Eigenschaften hinzufügen, und wir werden für Namen und auch eine Besetzung gehen . Jetzt haben wir in der Minute nichts, um dieses Datenobjekt zu aktualisieren. Um ein Update zu simulieren und dies zu überprüfen, werden wir eine setTimeout-Funktion direkt unten erstellen. Wir möchten, dass diese Funktion alle drei Sekunden ausgeführt wird, so dass Sie in 3.000 Millisekunden passieren können. Dann wollen wir tun, um das Datenobjekt zuzugreifen, und dann änderte es die Daten innerhalb, wie der Beruf, oder Zugriff auf die Daten, die Besetzung. Wir können das auf Ruhestand setzen. Sie überprüfen, ob das funktioniert. Wir können unsere Datenobjekte aus unserer Zusammensetzung zurückgeben. Das bedeutet jetzt, wenn wir zur Vorlage scrollen, können wir dies jetzt innerhalb unseres Codes verwenden. Da dies ein Beispiel ist, können wir das überall platzieren. Das ist Zugriff auf unsere Daten, Punkte Besetzung, Aktualisieren Sie den Browser. Wir sehen den Text eines Web-Entwicklers. Wenn wir drei Sekunden warten, sehen wir keine Updates für diesen Code. Auch wenn wir das ändern sollten, um nach drei Sekunden in den Ruhestand zu gehen. Obwohl wir dies nach drei Sekunden ändern, es nur mit normalem JavaScript, die Benutzeroberfläche wird nicht aktualisiert. Dafür müssen wir VGS mitteilen, dass diese Daten reaktiv sein sollen. Diese erste Technik, die wir einen Blick darauf werfen werden, um dies zu tun, ist durch den Import, das reaktive Paket. Erstens, wie ich bereits erwähnt habe, ist die Ansicht modular, daher müssen wir dies aus der View-Bibliothek importieren. Dies wird als reaktiv bezeichnet. Wir können dieses reaktive Paket dann als Wrapper für alle unsere Daten verwenden. Wir schneiden dieses Objekt reaktiv aus. Dann können wir in unserem Objekt einfügen, Browser aktualisieren. Jetzt nach drei Sekunden wird unsere Benutzeroberfläche nun mit diesen neuen Daten aktualisiert , indem dieser reaktive Wrapper verwendet wird. Alle Daten, in denen sich ändern oder aktualisiert werden, werden dann alle anderen Teile der Anwendung benachrichtigt, die darauf beruhen. In unserem Fall, die Besatzung. Dies geschieht, weil View eine reaktive Kopie dieses ursprünglichen Objekts nimmt und es dann in einen Proxy umschließt. Reactive wird auch hinter den Kulissen verwendet, um Objekte zu konvertieren , wenn wir die Dateneigenschaften mit der Optionen-API verwenden. Wenn Sie eine Überprüfung durchführen möchten, um festzustellen, ob ein Objekt reaktiv war. Wir haben auch Zugang zu Ist reaktiv auf. Dies kann auch aus der View-Bibliothek importiert werden. Ist reaktiv kann nun verwendet werden, um zu überprüfen, ob es sich bei einem Objekt um ein normales JavaScript-Objekt oder ob es sich um einen reaktiven Proxy handelt. Sie sehen, dass dieser ein Konsolenprotokoll erstellt, der Zugriff ist reaktiv. Dann können wir unsere Daten übergeben und die Entwicklertools in die Konsole öffnen. Wir können sehen, dass das wahr ist. Obwohl innerhalb unseres Setups, haben wir auch Zugriff auf unsere Karten, die ein reguläres Objekt verwenden. Stattdessen, wenn wir in alle Karten platzieren, aktualisieren, sehen wir jetzt das Ergebnis von false, da alle Karten ein normales JavaScript-Objekt und nicht ein reaktiver Proxy sind. Auf diese Weise können wir reaktiv einsetzen. View bietet auch eine Nie Reaktivitätsfunktion namens Raf, die wir jetzt einen Blick darauf werfen werden. 95. Reaktivität mit Ref hinzufügen: Reaktive Objekte, genau wie dieses, sind ideal, wenn wir mehrere Eigenschaften haben, genau wie wir es hier tun, besonders wenn sie auch verwandt sind und wir sie gruppieren wollen. Aber was ist mit einfacheren Werten wie Strings oder Zahlen? Wenn wir nur einen einzelnen Wert wie einen Primitiv hatten, sagen wir, ein Benutzer , der einer Zeichenfolge entspricht, könnten wir auch unsere Benutzereigenschaft auf ein Objekt platzieren, genau so, und dann reactive oder für einzelne Werte wie diese, kann es bequemer sein, eine Referenz zu verwenden. Nun, um eine Ref in Aktion zu sehen, müssen wir dies auch aus der View-Bibliothek importieren, und dann wie reaktiv oben, verwenden wir auch ref als Wrapper, also wenn wir dies ausschneiden und in unsere Ref einwickeln können. Um dies in unserer Vorlage zu verwenden, müssen wir dies auch von Setup zurückgeben, und lassen Sie uns dies zu unserer Vorlage hinzufügen und unseren Benutzer so einstellen, dass er diesem Benutzer gleich ist , den wir gerade zurückgekehrt haben. Ok. So sehen wir jetzt unseren Benutzer im Browser, aber wir müssen auch auf Reaktivität testen. Wir können das innerhalb unserer Zeitüberschreitung tun. Anstatt unsere Daten zu aktualisieren, können wir nun den Benutzernamen aktualisieren. Also dies und aktualisieren Sie den Browser. Wir sehen einen Fehler, dass wir versuchen, den Benutzer zu aktualisieren, aber dies ist eine Konstante. Das ist also fair genug. Wir können dies ändern lassen und sehen, was passiert, und nach drei Sekunden, wir sehen keine Updates für diesen Benutzernamen. Nun, das mag seltsam erscheinen, aber es gibt einen Grund, warum das passiert. Hinter den Kulissen wird unser Benutzerwert , den wir hier haben, auch in ein reaktives Objekt umgewandelt, und um auf den Wert unseres Objekts zuzugreifen, gibt es uns eine Eigenschaft namens Wert, und wir müssen dies jedes Mal referenzieren, wenn wir möchten auf unseren Benutzer zugreifen. Um auf den Namen innerhalb von hier zugreifen zu können, müssen wir auf user.value zugreifen. Speichern und aktualisieren Sie den Browser. Drei Sekunden später wird unser Benutzer jetzt aktualisiert. Diese Werteigenschaft muss immer verwendet werden, wenn Sie innerhalb des JavaScript-Abschnitts arbeiten. Aber oben in der Vorlage, nur hier, wie wir sehen können, brauchen wir es nicht innerhalb der Vorlage zu verwenden. Beim Zugriff auf einen Ref-Wert innerhalb der Vorlage wird der Wert automatisch für uns ausgepackt. Nun, mit ref und reactive, lässt uns dies jetzt zwei Optionen, wenn es darum geht, Werte reaktiv zu machen, und in jedem Fall enden wir mit einem reaktiven Objekt. Die genaue Verwendung für beide ist ziemlich flexibel, sowohl in der allgemeinen Regel. Ich verwende reactive, wenn ich mehrere Eigenschaften oder Werte in einem Objekt wie Syntax gruppieren möchte , und verwende dann ref genau so, und wir werden einen einzelnen eigenständigen Wert wie eine Zeichenfolge, eine Zahl oder sogar eine einzelne -Objekt auch. Aber wieder, der Anwendungsfall von beiden ist ziemlich flexibel und es liegt an uns als Entwickler, den wir lieber in unserem Projekt verwenden. 96. Destructuring und toRefs: Wir haben reaktive Objekte, genau wie wir hier haben. Manchmal möchten Sie möglicherweise einen einzelnen Wert aus diesem Objekt herausziehen. Zum Beispiel, wenn ich eine E-Mail hatte, na ja, dieser Anwendungsfall und vor allem, wenn wir auf mehrere Werte zugreifen müssen, können wir oft JavaScript-Destrukturierung verwenden. Genau so könnten wir eine Konstante namens E-Mail einrichten und diese aus unserem Datenobjekt extrahieren. Dadurch wird nun die E-Mail-Eigenschaft extrahiert und diese in der E-Mail-Variablen gespeichert. Wir könnten auch auf mehrere Werte zugreifen, wenn wir auch den Namen genau so wollten, konnten wir auf die E-Mail und auch diese Namensvariablen zugreifen. Dies ist ziemlich üblich und das ist nur normales JavaScript. Aber mal sehen, was passiert, wenn wir versuchen, dies in unsere Vorlage zu rendern. Zuerst müssen wir dies von unserem Objekt und bis zu unserer Vorlage zurückgeben . Lassen Sie uns dies zunächst ändern, um unser vollständiges Datenobjekt zu sein, und danach unsere E-Mail. Auch hier können wir nach unten zu unserem festgelegten Timeout scrollen und ein Update simulieren, indem wir unsere Daten ändern. Was wir hier tun werden, ist auf unser Datenobjekt zuzugreifen und die E-Mail-Eigenschaft zu aktualisieren. Es kann nur eine beliebige Zeichenfolge sein. Über zum Browser und aktualisieren. Drei Sekunden später wurde unser ursprüngliches Datenobjekt, das wir hier haben, nun aktualisiert. Allerdings ist unsere Kopie, die innerhalb dieser E-Mail-Eigenschaft gespeichert ist, immer noch der ursprüngliche Wert. Dies geschieht, weil, wenn wir Werte aus einem Objekt wie diesem zerlegen, es seine gesamte Reaktivität verliert. bedeutet, dass alle Aktualisierungen, die wir am ursprünglichen Objekt vornehmen , nicht an diese Variable weitergegeben werden. Wenn wir die Strukturierung noch nutzen wollten, halten wir uns an der Reaktivität fest. Wir können dieses Datenobjekt mit etwas namens toRefs umschließen. Öffnen Sie den Import, lassen Sie uns diesen importieren und verwenden Sie ihn dann als Wrapper für unsere Daten. Lassen Sie uns das ausprobieren, speichern Sie es und aktualisieren Sie den Browser. Nach drei Sekunden wird unsere E-Mail über das Datenobjekt aktualisiert, und auch die Kopie. Was wir hier mit ToRefs tun, ist effektiv alle diese Eigenschaften auf unserem Objekt zu konvertieren, um ref zu verwenden. Dies bedeutet, dass wir die Reaktivität behalten können. Wenn sich eine dieser Daten ändert, wird auch unsere Kopie aktualisiert. 97. Readonly: Manchmal müssen wir vielleicht warten, um genau zu kontrollieren, welche Komponenten unsere Daten aktualisieren können. Wenn wir ein reaktives Objekt haben, das über mehrere Komponenten gemeinsam genutzt wurde, möchten wir, dass sie alle die Daten lesen oder nur einigen von ihnen erlauben, sie zu aktualisieren. Dafür haben wir Readonly zur Verfügung, die ein Objekt nimmt. Dies kann ein normales JavaScript-Objekt oder ein reaktives JavaScript-Objekt sein, das entweder ref oder reactive verwendet und dann einen schreibgeschützten Proxy an das Original zurückgibt. Auch hier müssen wir dies aus der Vue Library importieren. In der AppHome, in unserer Importanweisung, übergeben Sie readonly. Dann, was wir tun werden, ist eine schreibgeschützte Kopie unserer Daten zu nehmen, speichern Sie diese in einer Konstante namens ReadOnlyData. Dann, genau wie wir es mit reactive und mit IsReactive getan haben, verwenden wir dies dann als Wrapper, übergeben readonly, und dann wollen wir unsere Daten von oben umschließen. Wir haben jetzt diese neuen Daten, die wir von unserem Setup zurückgeben können und dann können wir diese Schleife ganz oben ausgeben. Lassen Sie uns das aufräumen. geben wir schreibgeschützt ein, und dann geben wir unser schreibgeschütztes Objekt in der E-Mail-Eigenschaft aus. Auch der Benutzer, damit wir das ursprüngliche Objekt testen können, funktioniert noch. Wir können die data.email ausgeben. Bis zu unserem setTimeout, wo wir ein Update simulieren. Im Inneren von hier aktualisieren wir immer noch das ursprüngliche reaktive Objekt und sicherlich neue E-Mail-Adresse. Also lassen Sie uns zum Browser gehen und aktualisieren und sehen, was passiert. Nach drei Sekunden wurden sowohl die schreibgeschützte Version als auch das Original aktualisiert. Das bedeutet also, dass die Kopie immer noch reaktiv ist. Mal sehen, was passiert, wenn wir versuchen, die Kopie im Timeout anstatt in den Daten zu aktualisieren. Wir werden dies ändern, um ReadOnlyData zu sein. Speichern Sie diese und aktualisieren Sie sie. Drei Sekunden später passiert nichts. Dieses Update schlägt nun fehl, da die Kopie schreibgeschützt ist, und dies ermöglicht es uns, alle Daten zu schützen, die wir in unseren Komponenten nicht ändern möchten, oder Daten, die Sie möglicherweise genauer kontrollieren möchten. 98. Computiert: Berechnete Eigenschaften sind auch in der Zusammensetzung verfügbar und wir können diese nun nutzen, um unsere Karten nach der ausgewählten Kategorie herauszufiltern. Oben in den APPHOME.vue Komponenten, oben in der Vorlage, haben wir einen Link, der zu unserer Kategorie Links und dann Schrägstrich unsere Parameter. In der Tat kann dies gekürzt werden und sehen sowohl den gleichen Namen als auch über auf der Indexseite unseres Routers. Wir haben bereits einen Pfad eingerichtet, um dies zu behandeln, und dann zeigen wir unsere Kategorie-Komponente an. Es ist jetzt innerhalb dieser Kategorie, wo wir jetzt umgehen können, Filtern Sie diese Karten durch die angeklickte Kategorie. Direkt unter der Vorlage erstellen wir einen Skriptabschnitt, und dann erstellen wir einen Setup-Abschnitt, der unseren gesamten Kompositionscode behandeln wird . Wir müssen auf alle verfügbaren Karten zugreifen, um filtern zu können. Wir können dies auch reaktiv machen, indem wir ref importieren. Zuerst importieren wir alle unsere Karten und importieren diese aus Punktpunktschrägstrich und in unsere Daten. Da dies reaktiv ist, importieren wir auch die Ref aus der Vue Library in das Setup. Wir können jetzt unsere Karten in vue JS importieren, diese in einer Konstante namens AllCards speichern, wie in der Ref als Wrapper, und wir wickeln unsere Karten ein . Genau als vorübergehende Maßnahme werden wir eine Konstante namens Kategorie einrichten. Dies wird in der Kategorie gespeichert, die die Klicks auf wie Reisen, Halloween oder Geburtstag verwenden . Aber wir werden dies bald von den URL-Parametern bekommen. Jetzt stellen wir das alles auf. Dann können wir eine berechnete Eigenschaft einrichten, die diese Kategorie überwacht und wenn sie sich ändert, wird es dann die gefilterten Karten zurückgeben. Wir richten dies als eine Variable oder eine Konstante ein und sobald ich meine in CardsByCategory aufrufe, und dann können wir dies als berechneter Wert zuweisen. Im Inneren übergeben wir eine Funktion, die jedes Mal ausgeführt wird, wenn sich die Daten ändern. Da wir jetzt computed verwenden, muss dies auch aus der Vue Library importiert werden. Nun, hier drinnen können wir einen von zwei Werten zurückgeben. Zunächst einmal, wenn die Kategorie gleich allen ist, alles, was wir tun wollen, ist, alle verfügbaren Karten zurückzugeben. Wir möchten keine Filterung durchführen. Wir werden zuerst überprüfen, ob die Kategorie gleich allen ist. Wenn dies der Fall ist, werden wir dann die Daten zurückgeben, die AllCards sind. Da dies eine reaktive Referenz ist, müssen wir auch den Wert zurückgeben. Wenn dies nicht allen entspricht, bedeutet dies, dass wir auf eine Kategorie geklickt haben und einige Filterung haben, die wir tun müssen. Stattdessen werden wir allCards.Value zurückgeben, rufen Sie die JavaScript-Filtermethode auf. Dies wird dann durch alle unsere Karten laufen und dann werden wir eine Funktion für jede ausführen. Dies wird nur die gefilterte Version aller Karten zurückgeben. Jetzt müssen wir die einzelne Karte übergeben und einen Test für jede durchführen. Der Test, den wir hinzufügen werden, besteht darin, die Karte zu durchlaufen, die Kategorien auszuwählen, und dann möchten wir überprüfen, ob die Kategorie einen bestimmten Wert enthält. Die Kategorie, gegen die wir prüfen wollen, ist diese Kategorie nur hier. Nur um zusammenzufassen, wir durchlaufen alle unsere Karten und dann werden wir eine gefilterte Version zurückgeben. Die Art und Weise, wie wir filtern, besteht darin, dass jede einzelne Karte durch die Kategorien durchläuft und überprüft wird, ob sie die ausgewählte Kategorie von oben enthält. Kurz vor unserer Schließung, setzen Sie eine Klammer. Wir werden das dann zurückgeben. Wir können dies in unserer Vorlage verwenden, bis zum Anfang. Innerhalb des Category Headers wählen wir den Router oder die aktuelle Route aus. Dann, wenn wir auf eines dieser klicken, können wir dann in Schrägstrich Kategorie nehmen und dann können wir die einzelnen Parameter zugreifen. Wählen Sie die Parameter und der, an dem wir interessiert sind, ist die Kategorie. Vergewissern Sie sich, dass dies korrekt geschrieben ist. Siehe Jahrestag, Ehemann, Ehefrau. Dann unten können wir überprüfen, unsere Computer-Eigenschaft funktioniert, indem Sie die CardsByCategory ausgeben. Zunächst werden wir auf einen dieser Links klicken, wir werden eine Liste aller unserer Karten sehen. Jetzt sehen wir die gefilterte Version nicht nur hier , weil wir die Kategorie auf alle gesetzt haben. Wir ändern dies zu einem anderen Wert, wie zum Beispiel Geburtstag. Wir sollten nun nur Karten sehen, die nach der Geburtstagskategorie gefiltert wurden. Wir können noch einen ausprobieren. Es ist von Frau, aktualisieren, und wir können die Kategorie für Karte Nummer 1 sehen. Beinhaltet die Kategorie der Ehefrau. Nun, wir wissen, dass das funktioniert. Lassen Sie uns jetzt zur Vorlage gehen. Ich werde dies in eine ungeordnete Liste setzen, eine Klasse für das CSS, das Gitter sein wird und dies Wrapper genannt wird. Dann ein Listenelement, das die for-Schleife enthält, die Karte in CardsByCategory sein wird, ein Schlüssel. Jede unserer Karten hat Zugang zu einem eindeutigen Ausweis. Dies ist ein idealer Schlüssel zu verwenden. Zwischen diesem Listenelement können wir dem Benutzer auch erlauben, auf diese Karte zu klicken und sie dann zum Bearbeitungsbildschirm weiterzuleiten. Dies erfordert einen Router-Link. Jetzt halten wir es einfach und wir geben den card.name aus. Es braucht auch die to Eigenschaft. Wir verlinken das einfach mit der Homepage. Speichern Sie über den Browser, klicken Sie auf eine dieser, und dann nehmen wir es zurück auf die Homepage. Nun, das funktioniert alles und ein bisschen später kommen wir zurück zu diesem und wir werden diese Karten mit dem Bearbeitungsbildschirm verknüpfen. 99. Eigenständige Kompositionsfunktionen: Innerhalb dieser category.view-Datei löst dieser Kompositionscode, den wir bisher geschrieben haben, nur eines der Bedenken, das heißt, wir können jetzt zusammengehörigen Code gruppieren. Zum Beispiel haben wir diese Kategorievariable, und wir haben diese organisiert und neben unserem berechneten Abschnitt platziert , der auf dieser Variablen beruht. Mit Options-API zum Beispiel wäre diese Kategorie eine Dateneigenschaft. Dann können wir diesen berechneten Abschnitt viel weiter unten in unserer Komponente haben. Ein weiterer Vorteil, den die Zusammensetzung lösen will, ist die Wiederverwendbarkeit und Organisation. Obwohl wir noch nicht viel Code für dieses Projekt geschrieben haben, haben wir bereits einige Duplikate gesehen. Zum Beispiel hier in der Kategorie importieren wir Karten und weisen sie dann dieser Konstante zu. Oben in der App-Startseite importieren wir die Karten und dann ein bisschen weiter unten, wir machen genau das gleiche gerade hier. Um dabei zu helfen, können wir unseren Kompositionscode in eigenständige Funktionen extrahieren. Diese können auch in eigene separate Dateien abgelegt werden. Um zu sehen, würde dies in die Seitenleiste gehen, in die Quelle, gut wir werden einen neuen Ordner namens Composables erstellen. Dieser Ordnername liegt ganz bei uns, aber es ist üblich, diesen Namen Composables zu speichern. Dann im Inneren werden wir eine neue JavaScript-Datei erstellen. Wir wollen, dass der Dateiname beschreibend ist, und wieder, der Name liegt völlig an uns. Aber die gängige Namenskonvention scheint bisher das Benutzungspräfix zu haben, also werden wir Namen für unsere Projekte wie UseCards und auch UseCategories haben. Dieser wird für UseCards sein, und dies ist eine normale JavaScript-Dateien, so dass wir the.js Erweiterung verwenden. Innerhalb dieser Datei werden wir Standard-Funktion exportieren. Ich möchte den gleichen Namen wie unsere Datei angeben, die UseCards ist. Dies bedeutet jetzt, dass wir den gesamten Kompositionscode aus jedem unserer Setup-Abschnitte extrahieren und in diese Funktion einfügen können. Wir können es dann importieren und haben Zugriff auf alle Daten und alle Funktionen, die wir im Inneren platzieren. Für jetzt werden wir AllCards auswählen, lassen Sie uns diese kopieren und dann in unsere Funktion einfügen. Wir müssen auch Zugriff auf unsere Daten haben und auch die Ref aus der Vue Bibliothek importieren. Genau wie hier werden wir diese beiden Importstellen außerhalb der Funktion überführen und wir müssen nicht berechnet werden. Wir werden nicht über einen der Kategorien verwandten Abschnitte bringen , weil diese in ihre eigenen separaten Composable gehen. All diese Datei ist verantwortlich dafür ist, die Anfangskarten aus unserer Datendatei zu holen, und dann, wie wenn wir dies in unseren Komponenten verwenden, werden wir ein Objekt zurückgeben. Dies wird unseren Komponenten Zugriff auf alle Daten geben, jede der Variablen, jede der Methoden, die wir in dieser Funktion haben. Das ist ziemlich einfach, alles, was wir haben, ist AllCards, also können wir das zurückgeben. Im Moment macht diese Datei nichts und sie sitzt nur dort und wir können sie importieren, wenn wir sie brauchen. Aber als nächstes erstellen wir eine neue Datei, die für den Code in Bezug auf unsere Kategorie ist. Daher geben wir diesem einen beschreibenden Namen namens UseCategory mit der Erweiterung js. Richten Sie unseren Exportstandard mit dem gleichen Namen wie die Datei ein. Dies muss auch etwas zurückgeben. Um von vorne in der App zu Hause zu beginnen, wird diese Komponente eine Liste aller unserer Kategorien, die gerade hier. Dann bekommen wir in der Kategorie die einzelnen Karten für diese ausgewählte Kategorie. Es wäre sinnvoll, all diesen kategoriebezogenen Code aus beiden Dateien zu extrahieren und ihn dann in unser neues Composable zu platzieren. Ich gehe über die UseCategory und um zu beginnen, werden wir Zugriff auf alle unsere Karten brauchen, die sich innerhalb dieser UseCards befinden. Denken Sie daran, dass wir das exportiert haben und es von unserem Objekt zurückgeben. Jetzt können wir dies in unser Composable importieren, das war UseCards. Der Dateipfad lautet. /UseCards, und das ist eines der guten Dinge über Composables. Wir können Daten zwischen jeder unserer Dateien wiederverwenden. Hier haben wir effektiv die volle Funktion aus UseCards importiert. Jetzt wollen wir die Variable AllCards herausziehen. Jetzt werden wir das in einer Konstante speichern, das ist AllCards, und dann werden wir das aus unserer UseCard-Funktion extrahieren. Wir können jetzt beginnen, über alle unsere Kategorie bezogenen Code zu bringen , es sei denn, wir gehen in die App zu Hause. Wir haben bereits unsere AllCards Abschnitte, also schnappen Sie sich die UniqueCategories und auch die Schleife direkt darunter. Wir können das ausschneiden und dann direkt unter allCards platzieren. Dann müssen wir auch eine UniqueCategories zurückgeben. Mit diesem jetzt in eine eigene Datei extrahiert, können wir zurück auf die App Home oder andere Komponenten gehen , die diese Informationen benötigen, und importieren Sie diese zu verwenden. Goodness App Home hat ziemlich viel Beispielcode, so dass wir all dies aus der Setup-Funktion entfernen können. Wir brauchen keine AllCards. Ich werde unsere Rücksendeanweisungen vorerst entfernen. Wir brauchen die Daten nicht, also entfernen wir alle diese Importe. Der Import, den wir jetzt brauchen, ist unser UseCategory. Dies importiert unsere UseCategory Funktion, und der Dateipfad war die Quelle, die das at Symbol ist. Wir gehen in den Composable Ordner und dann in UseCategory, und stellen Sie sicher, dass dies korrekt geschrieben ist, UseCategory. Diese UseCategory Funktion exportiert unsere UniqueCategories, und jetzt können wir in unseren Setup-Bereich gehen und innerhalb einer Konstante installieren. Das ist Extrahieren UniqueCategories aus dieser UseCategory Funktion. Stellen Sie dies in unserer Vorlage zur Verfügung, wir müssen dies auch zurückgeben und unsere Vorlage öffnen. Denken Sie daran, wir nutzen diese UniqueCategories innerhalb dieser v-for-Schleife. Lassen Sie uns dies ausprobieren, aktualisieren, jetzt sehen wir derzeit nichts im Browser, also werfen wir einen Blick in die Entwickler-Tools in die Konsole. Wir sehen, dass allCards.forEach keine Funktion ist. Jetzt geschieht dies in unserer Datei useCategory.js. Hier versuchen wir, über AllCards zu schleifen, und dies wird in Pfeil geworfen, denn als wir den Abschnitt zum ersten Mal geschrieben haben, war AllCards Konstante nicht die Verwendung von Refs. Aber hier innerhalb von AllCards. Wenn wir zu dem Abschnitt gehen, in dem dies erstellt wird, öffnen wir dies in einer Referenz, das bedeutet jetzt, dass wir auf allCards.Value zugreifen müssen, und dies sollte jetzt das Problem beheben. Wir sehen immer noch einen Pfeil kann nicht lesen Eigenschaft, E-Mail und dies ist wahrscheinlich von der Vorlage. Aber wir können dies auch entfernen, einfach versuchen Sie es mehr, und es gibt alle unsere Kategorien jetzt wieder auf dem Bildschirm. Aber diesmal von einer Kompositionsfunktion. 100. Mini-Challenge: Karten nach Kategorie verschieben: Obwohl all dieser neue Code wie eine Menge erscheinen mag, braucht es, aber wie bei den meisten Dingen, aber wie bei den meisten Dingen,nur ein wenig Übung. Das war auch für mich zunächst verwirrend, als ich anfing, all diesen neuen Kompositionscode zu lernen. Aber am Ende dieses Projekts werden wir jetzt viel mehr Übung bekommen, wo wir auch den Code aus dieser Kategorie.vue übergehen werden. Was ich möchte, dass Sie sich diesen Setup-Abschnitt ansehen, wir werden den gesamten kategoribezogenen Code entfernen und diesen zu unserem UseCategory Composable verschieben. Der zugehörige Code, den wir brauchen, ist diese Konstante. Wir benötigen auch die Karten nach Kategorie. Sie müssen auch den berechneten Abschnitt importieren und diesen ganzen Code verschieben, genau wie wir es im letzten Video mit AppHome getan haben. Dann müssen Sie diese Komponente bereinigen, um unbenutzten Code zu entfernen, und auch unsere Kompositionsdatei importieren, genau wie wir es im letzten Video getan haben. Also gib das mal, und wenn du stecken bleibst, werde ich das im nächsten Video durchlaufen. 101. Karten nach Kategorie verschieben: Lassen Sie uns nun durch die Bewegung über den Kategorie verwandten Code aus dieser Kategorie DotVue laufen. Wenn Sie sicher sind, dass Ihre korrekt funktioniert und Sie es im letzten Video erfolgreich abgeschlossen haben, können Sie dieses Video überspringen. Um zu beginnen, brauchen wir diese Kategorie Konstanten und auch unseren berechneten Abschnitt. Schneiden Sie das aus, gehen Sie zur UseCategory, fügen Sie es ein. Dann müssen wir auch die CardsByCategory zurückgeben, also werde ich dies in über Dateien verwenden. Dies nutzt auch berechnete, so dass wir auch diese, nur Vue Bibliothek importieren müssen. Speichern Sie diese Datei und zurück in die Kategorie, wir müssen jetzt den gesamten ungenutzten Code bereinigen. Wir brauchen die AllCards nicht, wir brauchen die Daten nicht, wir können auch unseren Vue Library Import entfernen und diese durch unsere UseCategory ersetzen. Das @-Symbol für den Quellordner Composables, UseCategory nach unten durch das Setup. All dies innerhalb einer Konstante, und denken Sie daran, über in der UseCategory können wir jetzt in unserer CardsByCategory zurückkehren, so dass wir dies innerhalb der geschweiften Klammern importieren können. Wir importieren vermisst von unserer Funktion, die UseCategory war. Wir geben diese CardsByCategory immer noch zurück und verwenden dies in einer Vorlage. Speichern wir diese Datei und probieren Sie sie aus. Wenn wir durch eine dieser Kategorien klicken, sehen wir, dass sich die Kategorieüberschrift ändert. Derzeit haben wir immer noch nur die gleichen Karten für jede Karte, weil wir diese als Kategorie in unserem Composable gesetzt haben. Aber das ist etwas, das wir im nächsten Video ansprechen werden, wo wir einen Blick darauf werfen, wie wir auf einen Router innerhalb dieser Dateien zugreifen können. 102. Auf den Router zugreifen: Im Moment, wenn wir auf einen dieser Links klicken, werden wir auf die Kategorieseite weitergeleitet, aber wir sehen immer noch die gleichen Karten für jeden. So wird diese Kinderkategorie immer noch Jubiläum eins zeigen. Gehen Sie auf Reisen, wir werden die gleichen Karten sehen. Dies liegt daran, dass über in unserer Verwendung category.Js, wo Sie die Kategorie festlegen, wenn es fester Wert ist, diese feste Kategorie bedeutet dass die Werte immer gleich sind, unabhängig von der Kategorie, auf die wir klicken. In diesem Video werden wir dies ersetzen und es dynamischer machen , indem wir darauf zugreifen, die URL-Parameter. So haben wir derzeit diesen Reise-Parameter. Wir klicken auf eines dieser. Diese werden immer innerhalb der URL angezeigt. Also, was wir jetzt tun werden, ist, diesen Parameter zu greifen und dann unserem berechneten Abschnitt zur Verfügung zu stellen. Wo wir dies tun werden, ist der Zugriff auf den Router über in der Kategorie.vue. Jedes Mal, wenn wir durch Kategorie verursacht aufrufen, werden wir einen Parameter an diese Funktion übergeben, und dann können wir dies innerhalb von hier anstelle dieses hartcodierten Wertes verwenden . Lassen Sie uns also daran arbeiten, unseren Router an diese Funktion zu übergeben. Mit der Options-API könnten wir so etwas tun. Wir könnten auf this.router.params zugreifen, und dies wird perfekt mit der Options-API definiert funktionieren. Wenn Sie die Komposition verwenden, steht dieses Schlüsselwort jedoch nicht zur Verfügung. Wir müssen also auf eine andere Art und Weise auf den Router zugreifen. Dazu erlaubt das view relative Paket uns, Funktionen aus dem Router-Paket zu importieren. Wir können UserOuter vollständig Router-Objekt oder UserOute für die aktuelle Router-Informationen zugreifen . Zuerst müssen wir dies aus dem View-Router-Paket importieren. Also die erste war UserOute, und die zweite war UserOuter, und das ist aus dem VueRouter-Paket. Um auf beide in einem Setup zugreifen zu können, installieren wir diese dann innerhalb von Konsonanten. Also der erste ist der Router, der gleich UserOuter ist. Dies ist eine Funktion, also muss sie aufgerufen werden. Die zweite ist die einzelne Route und das meiste ist gleich UserOute. Diese beiden Konstanten funktionieren jetzt genau wie früher, wenn auf $Router für das vollständige Router-Paket zugegriffen wird und die $Route, die die aktuelle Route ist, auf der wir sind, daher haben wir immer noch Zugriff auf all diese Dinge wie router.push, , wo wir durch eine neue Seite navigieren können. Nun, hier brauchen wir nur Zugriff auf die aktuelle Route, da wir wollen, wählen Sie die Parameter. So können wir den Router und auch den Import entfernen, und wir können überprüfen, dass wir alle Informationen haben, die wir mit console.log benötigen. Pass in die route.params. Aktualisieren Sie die Entwicklertools, und öffnen Sie sie in der Konsole. Haben Sie den Geburtstag, den wir gerade hier sehen, und auch die Hochzeit. So können wir dies jetzt mit der console.log verwenden, und wir können dies jetzt an unsere Funktion übergeben, wenn wir es aufrufen. Also die route.params, und wir wollen auf die Kategorie Parameter zugreifen. Nun, lasst uns rüber gehen, um Kategorie zu verwenden, wo wir das jetzt in unsere Funktion übergeben können. Da wir diese Kategorie benannt haben, können wir auch unsere Kategoriekonstante von unten entfernen, und jetzt anstelle dieses berechneten Abschnitts verwenden wir die Kategorie, die an diese Funktion übergeben wird. Lassen Sie uns das testen. Rüber zum Browser. Lasst uns zur Frau gehen. Wir werden die sehen, die wir kurz zuvor hatten. Feiern. Alle. Reisen. Also diese funktionieren alle derzeit, aber wenn wir auf unsere kostenlosen Links über die Spitze klicken, klicken Sie durch all diese und unsere Karten bleiben genau gleich. Momentan funktionieren diese drei Navigationslinks nicht, aber das ist etwas, das wir sehr bald beheben werden. 103. Watch und WatchEffect: Wir haben im letzten Video entdeckt, dass, wenn wir auf einen dieser Kategorielinks klicken, das alles gut funktioniert und unsere Karten nach der ausgewählten Kategorie filtert. Wenn wir jedoch auf einen dieser Navigationslinks klicken, wird der erste zunächst korrekt von der Homepage geladen, aber wenn wir versuchen, zwischen diesen Kategorielinks zu wechseln, sehen wir keine weiteren Updates. Dies geschieht aufgrund des View-Routers, und der Grund ist, dass, wenn wir auf der Homepage sind, genau so, und wir klicken durch eine dieser Kategorien, wir wechseln von der Home-Komponente zur Kategorie Komponente. Diese Änderung der Route oder Änderung der Komponente bewirkt, dass unsere Komponente erneut rendert daher erneut unsere Kategoriefunktion aufgerufen wird. Aber wenn wir bereits auf der Kategorie-Komponente genau so sind und wir zwischen diesen freien Navigationslinks wechseln, bleiben wir auf dieser Kategorie-Komponente, aber wechseln Sie jetzt die Parameter. Wenn wir so etwas tun, werden die Ansichtsrouten die Komponenten nicht erneut rendern , da wir uns noch auf dieser Kategoriekomponente befinden, und aus Performance-Gründen diese Komponenten nicht nur für eine Änderung von -Parameter. Da der View-Router diese Komponenten für eine Parameteränderung nicht erneut rendert, müssen wir nun manuell darauf achten. Wir haben uns bereits einen Beobachter in diesem Kurs angesehen, und sie können auch mit Komposition zusammen mit einer neuen Version namens watchEffect von in der Verwendungskategorie Composable verwendet werden. Innerhalb dieser Funktion erhalten wir einen neuen Kategorienamen von den Router-Parametern, und dann innerhalb unseres berechneten Abschnitts senden wir die Karten basierend auf dieser Kategorie zurück, und wir übergeben diese Kategorie an unsere Datei gerade hier. Da diese category.vue Komponente nicht erneut gerendert wird, wenn wir auf diese Navigationslinks klicken, was wir tun werden, ist, diesen Abschnitt nur hier zu entfernen und einen Router direkt innerhalb unserer Composable zu verwenden, diese ermöglicht es uns, dann einen Watcher auf diesem Router oder genauer auf die Parameter zu setzen, die wir benötigen, und dann die Updates auszulösen, sobald sich diese Parameter geändert haben. Um dies zu tun, funktioniert es genau wie wir uns das Innere der Komponenten angesehen haben, wir müssen zuerst UserOute aus dem vue.router importieren, und dann innerhalb der Funktion speichern wir dies innerhalb einer Konstante namens route. Da wir nun direkt auf diesen Router zugreifen, können wir diesen auch aus unserer category.vue entfernen. Ich werde das entfernen, wir werden es an unsere Funktion übergeben, wir können auch den Router-Import und auch die Konstante entfernen. Da wir nicht mehr darauf posten, können wir dies auch von innen von hier entfernen. Aber denken Sie daran, dass dieser berechnete Abschnitt immer noch eine Kategorie erwartet, so können wir jetzt eine lokal erstellen, um diejenige zu ersetzen, die wir gerade entfernt haben , also const Kategorie. Dies wird auch gleich route.parameter.category sein, aber dieses Mal werden wir dies reaktiv machen, indem wir dies innerhalb von ref übergeben , und ziehen Sie dies direkt oben. Da diese Kategorie jetzt eine Referenz ist, müssen wir auch auf den Punktwert und auch im Include-Sektion zugreifen. Etwas, das wir hier beachten müssen, ist diese Kategorie, sie wird nur mit dem Anfangswert signiert werden, wenn dies geladen wird. Wir müssen dann manuell auf Änderungen an diesen Parametern achten und dann diesen Wert aktualisieren. Um dies zu beweisen, können wir dies jetzt in der Konsole direkt unten protokollieren, also protokollieren Sie die category.value, öffnen Sie die Entwicklertools, aktualisieren Sie die Seite, damit wir das Jubiläum sehen. Wie bereits erwähnt, wenn wir auf die Startseite gehen und dann auf eine Kategorie klicken, sehen wir die richtige hier. Was ist, wenn wir zwischen diesen drei Links an der Spitze wechseln, sehen wir, dass die Kategorie nicht aktualisiert wird. Was wir jetzt tun müssen, ist auf die Änderung dieser Parameter zu achten , die Kategorie zu erhalten, und da dies reaktiv ist, wird dies dann unseren berechneten Abschnitt erneut ausführen und dann unsere Komponenten aktualisieren. Dafür werden wir Uhr aus der Vue-Library importieren und diese dann innerhalb von hier übergeben. Wenn wir den Beobachter verwenden, erstellen wir alle Daten, die wir beobachten möchten, wie z. B. eine Ref oder eine reaktive Eigenschaft. Hier, wenn wir in der Kategorie übergeben, bei dieser Gelegenheit wäre dies nicht sinnvoll, wir wissen, dass dies nicht funktionieren wird, denn wie wir gerade in der Konsole überprüft haben, wird diese Kategorie nicht aktualisiert werden, wenn es eine Änderung der Parameter gibt. Stattdessen können wir dies durch eine Getter-Funktion ersetzen, die den Wert unseres Routers direkt zurückgibt, auf die route.params.category zugreifen und sie dann durch ein Komma trennen, besuchen wir eine Rückruffunktion, die gehen, um zu laufen, wenn es eine Änderung. Es ist innerhalb dieser Rückruffunktion, wo wir den Kategoriewert mit den neuen Routerparametern aktualisieren möchten , so dass category.value gleich route.params.category sein wird. Lassen Sie uns dies zum Browser ausprobieren, und dank unseres Beobachters werden diese Navigationslinks jetzt funktionieren. Dieser Watcher, den wir gerade verwendet haben, ist der gleiche wie, wenn wir uns früher mit der Options-API angesehen haben, aber es gibt auch einen anderen Typ , der WatchEffect genannt wird. Damit müssen wir dies auch importieren. WatchEffect ist ein wenig einfacher als Uhr, und es sieht so aus. Innerhalb der Klammern können wir dann jede Funktion übergeben, die wir ausführen möchten, so dass wir als Demonstration ein Konsolenprotokoll machen, den Wert unserer Kategorie suchen. Diese Funktion innerhalb von hier wird jedes Mal ausgeführt, wenn sich die Daten innerhalb ändern. In unserem Fall, jedes Mal, wenn der Wert der Kategorie ändert, sollten wir ein neues Konsolenprotokoll sehen, auf der Konsole, mit der rechten Maustaste und inspizieren, aktualisieren Sie die Seite, und jetzt haben wir nur Geburtstags-Route, so dass wir sehen, diese laufen von Jahrestag Weihnachten, und dieser WatchEffect wird jetzt für jede Parameteränderung erneut ausgeführt. watchEffect ist ein wenig wie eine berechnete Eigenschaft, wir übergeben eine Funktion, die aufgerufen wird, sobald sich jede reaktive Eigenschaft innerhalb ändert, aber der Unterschied ist, dass es auch Nebenwirkungen ausführen kann. Anstatt also berechnet, der nur einen Wert zurückgeben kann, kann watchEffect auf der anderen Seite unsere Daten oder den Zustand direkt aktualisieren. Es gibt auch einige Unterschiede zwischen watch und watchEffect. Beachten Sie, wie wir die Kategorie sofort sehen, wenn wir den Browser neu laden . Wenn wir wieder in die Konsole gehen und aktualisieren, sehen wir ein Konsolenprotokoll wurde sofort ausgeführt , obwohl wir nicht auf einen dieser Links geklickt haben. Dies liegt daran, dass WatchEffect sowohl sofort als auch dann ausgeführt wird , wenn sich die Daten darin ändern. Uhr gilt jedoch als faul und wird nur bei einer Datenänderung ausgeführt. Ein weiterer Unterschied ist, dass watch uns auch erlaubt, auf die vorherigen und die nächsten Werte zuzugreifen, und wir übergeben diese in diese Callback-Funktion. Wenn wir auf sie zugreifen wollten, könnten wir sie mit Variablennamen übergeben , dann haben wir Zugriff auf diese innerhalb unserer Funktion. Wir benötigen derzeit keinen Zugriff auf WatchEffect für unsere Projekte, also werde ich dies entfernen, und wir müssen auch den Import entfernen, nur um sowohl die Uhr als auch die WatchEffect zusammenzufassen, wir werden erneut ausgeführt, wenn die beobachteten Daten ändern. Wie wir gerade gesehen haben, wird WatchEffect auch sofort ausgeführt , auch wenn es keine Datenänderung gibt, und wir haben dies vorher mit dem Konsolenprotokoll gesehen. Wenn wir auf die vorherigen und nächsten Werte zugreifen müssen, können wir dies tun, indem wir sie an die Watchers Callback-Funktion übergeben und sie genau wie mit der Options-API verwenden. 104. Verwenden der Neben-Api-Optionen: Wir wissen bereits jetzt, dass die Komposition nicht dazu gedacht ist , die Options-API vollständig zu ersetzen. Aber was, wenn Sie beides gleichzeitig verwenden wollten? Innerhalb unserer App Home Dot View Komponenten haben wir diese Setup-Funktion. Wir können immer noch in Abschnitten neben unserer Setup-Funktion von der Options-API analysieren. So, als ob wir auf Daten zugreifen wollten, genau wie in früheren Projekten. Es kann vorteilhaft sein, sowohl beim Übergang oder Refactoring von den Optionen zur Komposition zu verwenden , wenn Ihre Anwendung größer wird, als auch beim schrittweisen Verschieben einer Anwendung von Ansicht 2 nach Ansicht 3. Etwas, auf das wir achten müssen, ist jedoch , dass Daten nicht in beide Richtungen übertragbar sind. [ unhörbar] können wir sowohl den Daten als auch dem Setup einen Namen hinzufügen. Zunächst einmal eine Name-Eigenschaft für die Daten und dann eine Konstante innerhalb des Setups erstellen. Wir müssen dies auch zurückgeben, damit wir dies innerhalb der Vorlage [unhörbar] verwenden können. Lassen Sie uns nun den Wert unserer Daten richtig ausgeben. Das kann überall hingehen. Parsen des Namens, der gleich unserer Dateneigenschaft Name ist. Sehen Sie das, wir müssen zum Home-Link gehen, das ist unser Name nur unten wie erwartet. Aber was ist mit dem Zugriff auf unseren Kompositionscode innerhalb unserer Dateneigenschaften? Wenn wir hier drinnen auf seinen vollständigen Namen zugreifen wollten, wir vielleicht versucht, so etwas zu tun. Wir könnten auf diesen Punkt vollständigen Namen zugreifen, probieren Sie das aus. Das ist unser vollständiger Name, der von der Setup-Funktion stammt. Wie wir sehen, hat der Datenabschnitt Zugriff auf unseren Kompositionscode. Dies gilt auch für andere Abschnitte in der Options-API, nicht nur für die Daten. Wir könnten auf unseren Setup-Code innerhalb von Methoden und Computern zugreifen, und das würde auch funktionieren. Aber was ist mit andersherum? Lassen Sie uns das noch einmal ausprobieren. Wir können unseren Namen wieder einsetzen, und dann können wir versuchen, auf diese Dateneigenschaft innerhalb des Setups zuzugreifen; dieser Punktname. Wir müssen auch den Namen ändern, um vollständigen Namen zu sein, und wir sehen einen leeren Bildschirm. Erkennt Fehler innerhalb der Entwickler-Tools. Wir können den Eigenschaftsnamen von undefined nicht lesen. Okay, also versuchen wir es ohne dieses Schlüsselwort, aktualisieren. Wir haben immer noch keinen Zugang zu diesem Namen. Das Problem, das wir hier haben, wenn wir Dinge so umgehen, ist die Setup-Funktion vor der Options-API gelöst wird. Daher kann die Setup-Funktion nicht auf unsere Dateneigenschaften zugreifen. Dieses Schlüsselwort ist auch in einem Setup nicht verfügbar. Wenn es so wäre, würde es sich anders verhalten, als wir erwarten würden , dass es sich innerhalb der Options-API verhält, so dass es entfernt wurde, um Verwirrung zu vermeiden. Nur um klar zu sein, können wir dieses Schlüsselwort nicht innerhalb der Setup-Funktion verwenden. Aber wie wir gerade gesehen haben, funktioniert es umgekehrt, und wir können auf unsere Setup-Eigenschaften innerhalb unserer Daten oder unserer Optionen-API zugreifen. Wir können diesen Code aufräumen. Wir brauchen keinen Zugriff auf den vollständigen Namen und verschieben diesen aus der return-Anweisung, dem Datenabschnitt und auch der Ausgabe innerhalb der Vorlage. Dies ist eine Einführung in die Kompositions-API. Im nächsten Abschnitt werden wir unser Projekt weitermachen, und wir werden auch viel mehr Übung mit der Komposition bekommen , während wir diese Videos durchlaufen. 105. Abschnittseinführung – unser Projekt vorantreiben: Ich gebe meine Kurse gerne sehr praxisnah und praktisch. In diesem kommenden Abschnitt werden wir das gesamte Kompositionswissen, das wir gelernt haben , in unsere kreativen Kartenprojekte einbringen. Wir werden weitermachen, indem wir die ausgewählte Karte greifen, auf die der Benutzer klickt. Wir werden die Seiten abrufen. Wir wechseln zwischen den verschiedenen Seiten für die Karten. Wir fügen unsere Texteingaben für unsere Abschnitte hinzu, unsere Textausgaben, damit der Benutzer sie in der Vorschau anzeigen kann. Wir ermöglichen es, die Abschnitte zu aktualisieren, neu zu ordnen, zu bearbeiten und vieles mehr. Dies wird eine gute Chance sein, unser Kompositionswissen neben dem Aufbau unseres Projekts zu stärken . Wir sehen uns da drinnen. 106. Ausgewähltes Karten- und Kategoriestyling verknüpfen: Für diesen kommenden Abschnitt werden wir unser Projekt weiter vorantreiben und das was wir bisher über Vue und Komposition gelernt haben, verstärken. Beginnend mit ein wenig Styling für die Kategorien, derzeit haben wir zwei Dateien, die ein Raster-Stil-Layout benötigen, und dies ist die Kategorie.vue. Wir haben diese Klasse von Grid Wrapper, und dies wird alle unsere Karten in einem Gitter-Stil-Layout auflisten. Dasselbe in der AppHome, verwenden Sie die gleiche Klasse gerade hier. Die app.vue hat unten ein Stylesheet, das nicht über das Scope-Attribut verfügt. Also werde ich hier das Styling für dieses Gitter hinzufügen. Daher bedeutet dies, dass es für alle Komponenten gelten wird, die diese Klasse verwenden. Also lassen Sie uns dies hinzufügen, und dies wird innerhalb einer Medienabfrage gehen. Das Raster-Stil-Layout gilt nur, wenn wir über 600 Pixel erhalten. Die erste Medienabfrage, auf die wir dies anwenden werden, ist die Mindestbreite von 600 Pixeln. Schnappen Sie sich die Gitterpackung. Zuerst wird die Anzeige im Raster, dann die Spalten der Rastervorlage angezeigt. Für diese spezielle Medienabfrage werden wir zwei Karten nebeneinander platzieren. Ich werde das so einstellen, dass es wiederholt wird. Man muss zweimal wiederholt werden. Wenn wir dann eine Brucheinheit übergeben, nehmen beide Spalten die gleiche verfügbare Breite ein. Platzieren Sie Platz zwischen diesen Karten wird auch in einem Rasterabstand von 10 Pixeln platziert. Über den Browser sehen wir nun das anfängliche Layout unseres Grid-Systems. Auch, wenn Sie auf eine dieser Karten klicken, sehen wir das gleiche gilt für diese Komponente auch. Als nächstes werden wir mehr Platz zur Verfügung haben. Ich werde eine zweite Medienabfrage hinzufügen. Lassen Sie uns diesen Abschnitt kopieren, fügen Sie ihn unten ein. Dafür werden wir diese 1.000 Pixel machen. Wir haben bereits den Anzeigetyp deklariert und auch die Gitterlücke. Alles, was wir hier drinnen tun müssen, ist die Änderung, um drei Spalten breit zu sein. Dann, wenn wir das auf über 1.000 Pixel dehnen, wechselt es dann zu drei Spalten. Als nächstes, zurück auf die Homepage, werden wir einige spezifischere CSS für diese bestimmte Komponente in die AppHome setzen. Setzen Sie den Stilbereich unten. Dies ist nur reguläres CSS. Jedes dieser Artikel in unserem Raster hat die Klasse des Kategorieartikels. Wir werden nur einen Hintergrundverläufe um jeden festlegen und auch einige Polsterung hinzufügen, um jede dieser Kategorien auszutauschen. Lasst uns dieses, das Kategorieelement greifen. Der Hintergrund wird in einem linearen Farbverlauf haben, der es uns ermöglicht, zwischen zwei Farben zu wechseln. Die beiden Farben, Ich werde in RGB-Werte auf der ersten von 253 übergeben, das Grün, 207 und auch 207 für das Blau zu. Getrennt durch ein Komma, wird der zweite RGB-Wert rot sein von 140, 140 auch für Grün und 236 für das Blau. Dies gibt uns den Farbverlauf von rosa bis lila, und auch, die Farbe ist von oben nach unten verschwunden. Ich werde dies nur versetzen, indem ich in einen Winkel als ersten Parameter von 30 Grad stelle. Dadurch wird die Farbe einfach in acht verschiedene Winkel verschoben. Als nächstes einige Polsterung, um dies einige Abstände vom Text von sechs Rems oben und unten zu geben. Wir brauchen nichts links und rechts, da wir dieses Rasterlayout verwenden. Dieser Kategorieartikel wendet Stile auf jedes unserer Listenelemente an. Nun, um ganz oben in dieser ungeordneten Liste etwas Platz hinzuzufügen, werde ich jetzt die ungeordnete Liste an Ort und Stelle in einem Rem Rand ganz oben auswählen. Dies wird uns unseren Platz in unserem Top-Header geben. Der Text für jeden von diesen ist in diesem Router-Link eingebunden. Denken Sie daran, dass der Router-Link ein HTML-Element erzeugt. Wir können dies auch im CSS verwenden. Alles, was wir hier tun werden, ist, die Schriftgröße auf 20 Pixel zu setzen. Es ist ein bisschen größer. Wir können immer noch auf diese klicken und auch in die einzelne Kategorie gehen. Wenn wir zu dieser Seite gehen, wird dies durch die category.vue Komponente gesteuert. Derzeit, wenn wir auf eine dieser einzelnen Karten klicken, haben wir nur den Router-Link, der auf den Schrägstrich zeigt. Aber was wir wollen, wenn wir auf eine dieser Karten klicken, anstatt dies, um es auf die tatsächlichen Karten genommen werden, so dass wir bearbeiten können. Der Bearbeitungsbildschirm für jede unserer Karten ist diese Create-Komponente, die wir früh hinzugefügt haben. Nun gehen wir zu unserer Kategorie und wir können diesen Router-Link ändern, um dynamisch zu sein, in der Seitenleiste zu schließen und dann die Backticks darin zu platzieren. Wir müssen zum /create gehen, hat jetzt eine Variable, die die card.id sein wird. Denken Sie daran, wir haben diese Karte Variable von dieser Schleife direkt oben bekommen. Das erste, was wir sehen wollen, ist die Titelseite dieser Karte. Später werden wir auch einige Links zu dieser Seite hinzufügen, die es uns ermöglichen, zwischen der Vorderseite, derInnenseite links, der Innenseite rechts und auch der Rückseite zu wechseln Innenseite links, der Innenseite rechts . Jetzt, mit diesem Link an Ort und Stelle, müssen wir auf die Router-Index-Seite gehen, und auch Änderungen erstellen Komponente zu. Anstatt zu /create zu gehen, wollen wir auch unsere Variablen greifen, die die Karten-ID und auch die aktuelle Seite ist. Der erste Parameter ist für unsere ID und der zweite ist für die Seite. Das ist mein Ergebnis. Jahrestag, dies ist die Karte mit der ID eines, aber dann auf die Titelseite genommen. Versuchen wir es mit Halloween. Das ist die Kartennummer 5. Das funktioniert auch gut. Wir werden uns auf diese erstellen vue im nächsten Video konzentrieren. Aber jetzt gehen wir zurück zu diesem Kategoriebereich, in dem wir dieses Raster beenden werden , indem wir ein Vorschaubild anstelle des Kartennamens hinzufügen. Oben in der Asset-Ordner, in die Bilder, wir haben diese Karte Vorschau Abschnitt. Dies hat ein Bild mit einer Vorschau auf die Titelseite jeder unserer Karten. Außerdem hat jeder den Titel mit der entsprechenden ID für die jeweilige Karte. Alles, was wir tun müssen, ist auf die Karten-ID zuzugreifen und sie dann mit diesem Dateipfad zu verknüpfen. den Kategoriebereich, anstatt diesen Kartennamen auszugeben, werden wir das Bildelement übergeben, v-bind an die Quelle übergeben, und dann innerhalb der Backticks können wir unsere dynamische URL. Das kaufmännische Und-Zeichen wird mit der Quelle verknüpft, in den Ordner „Assets“, die Bilder, die Kartenvorschau. Jede dieser Kartenvorschau hat einen Namen, der mit dieser card.id verknüpft ist. Auch den Dateityp übergeben. Zurück zum Browser, wir sehen keine Bilder in angezeigt. Wir haben hier einen Rechtschreibfehler. Versuchen Sie es erneut, und es werden immer noch keine Bilder für diese Anzeige angezeigt. Nun, das passiert, wenn wir in einem dynamischen Bild verwenden, genau wie wir hier sind. Wir könnten in eine statische Bildzeichenfolge ohne Variablen platzieren, und das würde völlig gut funktionieren. Mit statisch meinen wir, wenn wir diesen Doppelpunkt und die Bindung nicht haben und wir keine Variablen darin haben, können wir einfach mit den Backticks auf die 1.jpg verlinken. Dieser funktioniert völlig einwandfrei. Dieser dynamische Dateipfad schlägt fehl, da wir hinter den Kulissen in dem sogenannten Webpack verwenden. Webpack wird verwendet, um alle unsere Dateien und alle unsere Assets aus dem Quellverzeichnis in einem großen JavaScript-Paket zu bündeln. Dies ist jedes Bundle, das dem Browser beim Besuch unserer Website zur Verfügung gestellt wird. Aber das Problem ist, wenn dieser Dateipfad dynamisch ist, Webpack weiß nicht, dass die Ergebnisse dieser Variablen kompiliert werden. In dieser Kompilierungsphase weiß es, dass es hier eine Variable gibt, die sich ändern kann, aber es kennt den genauen Wert noch nicht. Es gibt ein paar Möglichkeiten, wie wir das beheben können. Wir könnten die Bilder in den öffentlichen Ordner verschieben, und das wird völlig einwandfrei funktionieren. Oder stattdessen könnten wir Webpack erlauben und ihm sagen, dass wir diese dynamische Zeichenfolge durch Rauheit in erfordern übergeben müssen. Was wir dafür tun müssen, ist, diese vollständige Zeichenfolge nach Bedarf in den Backticks zu löschen. Dann fügen wir in die Klammern unsere Zeichenfolge ein. Wir sehen sofort über im Browser, es würde jetzt unsere Bilder auf dem Bildschirm haben. Natürlich sind sie sehr groß. Was wir also tun werden, ist auf die app.vue zu gehen und auch auf alle Bilder zu zielen , die in unserer Anwendung sind und die maximale Breite 100 Prozent einstellen. Speichern Sie das. Es hinterlässt nun ein schönes Rasterlayout für unsere Karten. 107. Die Erstellungs-Ansicht: Wenn Sie auf eine dieser ausgewählten Karten klicken, wird uns nun mit dieser Komponente „Erstellen“ verknüpft. Diese Seite ist, woran wir jetzt arbeiten wollen. Wir werden es in zwei Abschnitte aufteilen. Im linken Abschnitt wird eine Kartenvorschau angezeigt, der die Anfangskarten und auch alle Änderungen angezeigt werden, die wir ebenfalls vornehmen werden. Dann wird der rechte Abschnitt verwendet, um diese Karte zu bearbeiten, einschließlich der Bilder und auch die Textabschnitte auch. Für diese Abschnitte, für die Vorschau und den Bearbeitungsbereich, werden wir zwei neue Komponenten in den Komponentenordner erstellen , um diese organisiert zu halten, ein Ordner namens card. Dadurch werden alle unsere kartenbezogenen Komponenten gruppiert. Eine neue Datei. Einer ist der Carddit.Vue. Auch die zweite, auch im selben Ordner, ist für die Kartenvorschau. Nun, beide werden nur eine einfache Vorlage mit einer Überschrift der Ebene 1 haben. Dies ist die Kartenvorschau. Schnappen Sie sich das und sparen Sie. Dann können wir das innerhalb des CardEdit platzieren. Wie wir gerade erwähnt haben, werden diese beiden Komponenten innerhalb dieses create.vue angezeigt werden . Um mit dem Erstellen eines Skriptabschnitts zu beginnen, der zum Importieren dieser beiden Komponenten verwendet wird, die erste, die CardPreview in die Quelle, die Komponenten, den neuen Kartenordner und die CardPreview. Duplizieren Sie das. Dieser ist für den CardEdit. Innerhalb des Exports registrieren wir dann unsere Komponenten. Das ist alles, was wir für unser Drehbuch brauchen. Ich würde zu unserer Vorlage gehen. Ich werde ein div mit der Klasse von card_wrapper erstellen. Dies ist das Haupt-Wrapper div für beide Abschnitte. Wir haben die Vorschau auf der linken Seite und den Bearbeitungsbereich auf der rechten Seite. Das bedeutet nur, dass wir den Abschnitt mit unserem Styling anvisieren könnten. Zuerst der linke Abschnitt und dann der rechte Abschnitt. Die linke Seite ist für die CardPreview. Platzieren Sie nun den Abschnitt „CardEdit“ auf der rechten Seite. Mal sehen, ob alles in Ordnung ist. Aktualisieren. Wir haben die CardPreview und die CardEdit Komponenten. Natürlich sind diese noch nicht links und rechts angelegt, weil wir zum Style-Abschnitt gehen und diesem card_wrapper etwas CSS hinzufügen müssen . Es wird auch im Bereich sein. Um den Anzeigetyp von Flex zu beginnen, und die Standard-Flexrichtung ist Zeile, wodurch diese beiden Komponenten auf der Seite platziert werden. Außerdem wird dieser Hauptwrapper eine Hintergrundfarbe haben. Wir erhalten die einfache und gehen für eine hellgraue Farbe von EEE, ein Box-Schatten von einem Pixel, ein Pixel, zwei Pixel. Die Farbe der DDD und der Schatten, der eingefügt werden soll. Dies bedeutet, dass der Schatten innerhalb unseres Abschnitts statt auf der Außenseite platziert wird. Als nächstes werfen wir einen Blick auf die fertige Version und gehen in eine dieser Karten. Wir sehen, dass sowohl dieser Abschnitt auf der linken als auch der Abschnitt auf der rechten Seite beide gleich sind. Um dies zu erreichen, werden wir unseren card_wrapper greifen, und jeder von ihnen wurde in einen Abschnitt eingewickelt. Mach sie beide gleich. Wir können einen Flex-Wert von eins und auch ein wenig Polsterung auf der Innenseite von 10 Pixeln übergeben. Aktualisieren. Nun gilt dieser Flex-Wert von eins für beide Abschnitte und gibt ihnen gleichen Abstand. Jetzt haben wir dieses Layout alle Setup. Im nächsten Video werden wir die ausgewählte Karte tatsächlich auf dieser Seite anzeigen. 108. Die ausgewählte Karte abrufen: eine dieser Karten aus unserem Raster auswählen, nehmen wir dann diese tolle Ansicht auf, und wir haben auch Zugriff auf die ID der ausgewählten Karte. Das bedeutet, dass wir diese verwenden können, um die Karte zu erhalten, die wir anzeigen müssen, und dies kann auch innerhalb einer zusammensetzbaren Datei 2 gehen, in die Seitenleiste, und dann in die Composables, erstellen Sie eine neue Datei im Inneren genannt, verwenden Aktuelle Karte. Denken Sie daran, dass diese die js-Erweiterung haben. Richten Sie einen Export ein, mit der Standardfunktion „Aktuelle Karte verwenden“ genannt. Die Aufgabe dieser Funktion ist es, die ausgewählte Karte zu bekommen, um diese abzurufen, müssen wir auch auf alle unsere Karten zugreifen, so dass wir die ausgewählte filtern können, wir können möglicherweise Karten zusammensetzbar verwenden, in diesen Abschnitt. Nur Dateipfad, der Punkt Schrägstrich sein wird, und der Dateiname der Verwendung Karten. Denken Sie daran, die Verwendung Karten hat diese alle Karten Variablen zurückgekehrt, jetzt müssen wir zurück in unsere Composable, und dann extrahieren Sie diese aus unserer Funktion. Wir haben jetzt alle unsere Karten und was wir jetzt tun müssen, ist eine zweite Konstante zu erstellen, die die ausgewählte Karte speichern wird. Diese ausgewählte Karte wird auch ein Objekt sein, wir können ein leeres Objekt als Anfangswert übergeben. Da wir eine Referenz verwenden, müssen wir auch diese aus der View-Bibliothek importieren, und dann werden wir diese alle Karten-Abschnitt filtern, die mit der ausgewählten Karte. Zuerst greifen Sie die ausgewählten Karten, und wir können den Wert, auf alle Karten gleich sein. Diese alle Karte ist auch in einem Floß 2 ausgebrochen, wir müssen auch den Punktwert verwenden, um auf das Ergebnis zuzugreifen, und verwenden Sie die JavaScript-Filtermethode, die eine Funktion übernehmen wird, die diese filtern wird, wenn die Karte Punkt-ID ist gleich etwas. Jetzt setzen wir dies nur auf einen statischen Wert von eins, zurück über, um eine großartige Punktansicht-Komponenten zu haben. Wir können nun überprüfen, dass dies funktioniert, indem Sie dieses Composable importieren, und dann zeigen Sie dies innerhalb der Vorlage. Importieren Sie dies zuerst. Es sagt, verwenden Sie Aktuelle Karte, aus dem Dateipfad in die Quell-Composables, und verwenden Sie dann Aktuelle Karte, in unsere Exporte, für die Setup-Funktion. In der Tat haben wir vergessen, eine Sache zu tun, und dass eine Sache vorbei ist und aktuelle Karten verwenden, müssen wir auch einen Wert zurückgeben, um in unseren Komponenten zu verwenden, und der Rückgabewert wird ausgewählt Karte, ich hoffe, Sie entdeckt zurück zum Create-Abschnitt in das Setup. Wird dies nun in eine Konstante extrahieren. Um dies in den Vorlagen anzuzeigen, muss dies auch von dieser Funktion zurückgegeben werden und es dann an einer beliebigen Stelle in der obigen Vorlage platzieren, nur um zu überprüfen, dass dies funktioniert. Lasst uns das überprüfen. Wir sehen einen Fehler in unserem Composable, alles ist definiert, aber nie verwendet. Wir können das auch automatisch vervollständigen. Aktualisieren Sie und es gibt unsere ausgewählte Karte. Gut, das sind alle Details von unserer Karte mit der ID 1, die wir gerade hier festgelegt haben. Aber beachten Sie, wie unser Kartenobjekt auch in diesen Array-Klammern umgeben ist. Dies liegt daran, dass unsere Daten für alle Karten eine Reihe von Objekten sind. Um mit diesem einzigen Objekt zu arbeiten, müssen wir es aus diesem Array mit Districting ziehen. Wir haben vorher gesagt, dass diese ausgewählte Karte ein Objekt sein muss, und wir verteilen diese Outs unseres Arrays, indem wir diese in die eckigen Klammern umgeben. Aktualisieren und diese Klammern sind jetzt verschwunden. Als nächstes, anstatt den hartcodierten Wert von eins zu verwenden, gehen wir jetzt, um den Router zu importieren und die ID von den Parametern zu erhalten. Importieren Sie dies zuerst. Wir benutzen den gleichen Weg. Dies ist aus der Sicht des relativen Pakets, und dann ist der Speicher in einer Konstante, so dass wir darauf innerhalb unserer Funktion zugreifen können. Diese Routen können nun verwendet werden, um auf die Parameter zuzugreifen, anstatt diese hartcodierten Wert, Routenparameter, und der Parametername, den Sie dies auf der Router-Indexseite angegeben haben, war die ID des Browsers, und es will nur zu verwenden Route sein. Die Karte ist jetzt verschwunden. Versuchen wir es noch mal. Wir hatten kurz zuvor eine Karte auf dem Bildschirm, aber jetzt, da wir diese durch unseren Router ersetzen, sehen wir nichts auf dem Bildschirm. Nun, das ist einer von ihnen, Web-Entwicklung gotcha Momente. Was wir hier brauchen, ist eine Karten-ID, die wir mit der router.params.id bekommen . In der Tat, wenn wir etwas von unseren URL-Parametern lesen, wird dies als String zurückgegeben. Wir können dies sehen, wenn wir ein Konsolenprotokoll machen. Nur irgendwo in dieser Datei, greifen Sie auf die Route params.id zu, und wir können JavaScript verwenden, um den Datentyp mit dem Typ von in die Konsole zu verfolgen, aktualisieren Sie den Browser und wir sehen, dass der Datentyp string ist, und das ist, warum alle -Filter funktioniert nicht, da dies mit der strikten Gleichheit verglichen wird, die wir einchecken, wenn der Datentyp der Zeichenfolge gleich diesem ist, was eine Zahl ist. Wir könnten einfach die doppelten Gleichen so verwenden. Dies würde den Datentypunterschied ignorieren und einfach den Wert verwenden. Oder alternativ könnten wir das greifen, dies in die Zahlenfunktion einbinden, und dies würde die Zeichenfolge in eine Zahl konvertieren, und das würde auch funktionieren. Lassen Sie uns ein paar weitere Karten überprüfen. Das wird der dritte sein. Wir sehen die ID 3. Der fünfte, ID 5. Dies passt auch bis zu. 109. Die aktuelle Seite auswählen: Im vorherigen Video haben wir gesagt, dass diese Seite erstellen zeigt die vollständigen Informationen von der ausgewählten Karte. Aber in der Tat müssen wir für diese Ansicht nur ein bestimmtes Stück Daten zeigen. Denken Sie daran, dass unsere Karte in vier Seiten aufgeteilt ist. Wir haben die Vorderseite, die Innenseite links, die Innenseite rechts, und auch die Rückansicht. Wenn wir diese Seite bearbeiten, möchten wir nur einen dieser Abschnitte gleichzeitig sehen. Erst wenn wir auf diese Karten klicken, wir dann in die Ansicht aufgenommen, die die Vorderseite der Karte ist. Die Daten für diese vier Seiten werden innerhalb des Arrays dieser Seite nur hier gespeichert, und das Abrufen der genauen Seite, die wir aus diesem Array benötigen , ist das, worauf wir in diesem Video konzentrieren werden. Wir fügen dann auch einige Links hinzu, damit Sie zwischen diesen Seiten wechseln können. Um die Dinge in der UseCurrent-Kartendatei zu beginnen, lesen Sie die Konstante, in der die ausgewählte Seite gespeichert werden soll. Jetzt brauchen wir dieses Konsolenprotokoll nicht. Diese Konstante wird auf der ausgewählten Seite gespeichert. Dies wird auch dynamisch sein und ein Datumstyp von Objekten, die gehorchen Funktion aufgerufen wird ausgewählte Seite erhalten. Diese Funktion wird unsere ausgewählte Seite einstellen. Dies ist eine Referenz, also greifen wir den Wert, und dies wird gleich unserer ausgewählten Karte, dem Wert sein. Wie wir im Browser gesehen haben, müssen wir auch auf das Seiten-Array im Inneren zugreifen. Wir müssen dann die Indexnummer für die ausgewählte Seite erhalten. Wir haben vier verschiedene Werte für die Vorderseite, die Innenseite links, rechts und hinten, also könnte dies entweder Null, eins, zwei oder drei sein. Um die Indexnummer für die bestimmte Seite zu erhalten, die wir brauchen, werde ich sie einer separaten Funktion übergeben, um die Dinge sauber zu halten. Die Funktion wird aufgerufen get page index. Um den Seitenindex zu erhalten, die wir benötigen, müssen wir die ausgewählte Karte, den Wert, die Seiten zu greifen , und verwenden Sie dann eine JavaScript-Array-Methode namens find index. Find Index wird eine Funktion für jede unserer Seiten in diesen Karten ausführen. Jede unserer Seiten wird innerhalb dieser Seite Konstante gespeichert. Wir wollen überprüfen, ob die page.name gleich route ist. params.id. Nur um zusammenzufassen, greifen wir auf alle Seiten in der ausgewählten Karte zu. Wir verwenden dann ein beliebiges JavaScript, finden Index-Methode, und dies wird zu überprüfen, ob die Seite.name. Was Sie sehen können, wenn wir in unsere Daten gehen, hat jede unserer Seiten ihre Namenseigenschaft wie front, und wir vergleichen diesen Namen mit dem Wert innerhalb aller Parameter. In der Tat, anstatt ID, ist dies die Seite, wie die Vorderseite, die wir gerade hier haben. Dies wird dann die Indexnummer zurückgeben, also muss ich dies von unserer Funktion zurückgeben. Wir können auf diesen Rückgabewert zugreifen, mein Aufruf funktioniert jetzt innerhalb von hier. Gut. Jetzt haben wir diese Funktion namens get selected page, und jetzt brauchen wir eine Möglichkeit, dies tatsächlich aufzurufen. Nun, wir können dies tun, indem wir unmountet unter der Annahme unserer Funktion namens get selected page verwenden. Es geht nach oben und bind wurde beim Speichern automatisch importiert, aber wenn Sie dies nicht getan haben, wenn Sie zu diesem Import unmountet hinzufügen würden. Jetzt müssen wir auch unsere ausgewählte Seite zurückgeben, damit wir dies in der Vorlage verwenden können. Und fügen Sie auch ein Semikolon hinzu, wenn dies einige Probleme verursacht, und über zum Erstellen. -Ansicht. Jetzt, anstatt die vollständige ausgewählte Karte zu rendern, können wir diese durch die ausgewählte Seite ersetzen, uns zurückgeben, und dann werde ich dies in eine Vorlage einfügen. Aktualisieren. Gut, da ist die Front. Versuchen wir es mit dem Rücken. Gut, das Innere rechts. Ausgezeichnet. Jetzt funktioniert das und wir können jetzt einige Links im nächsten Video einrichten, um zwischen diesen vier Seiten zu wechseln. 110. Kartenseiten wechseln: Wir wissen nun aus dem letzten Video, dass wir die richtige Seite, die wir brauchen, von der URL abrufen können . Jetzt werden wir einige Buttons einrichten, um zwischen diesen vier Seiten zu wechseln. Dies, eine neue Komponente, einen neuen Komponentenordner, und dann in den Kartenordner. Dieser wird als Switch-Seite bezeichnet werden. Richten Sie die Vorlagen ein, die Sie gerade auf [unhörbar] Link gehen, so dass wir das Navigationselement, die ungeordnete Liste übergeben können , und dann werden unsere Listenelemente Wrapper für den Router-Link sein. Jeder dieser Router-Links wird zu den vier Seiten unserer Karte verlinken. Übergeben Sie in die Requisite. Dies wird nach vorne verlinken, und wir werden uns das in nur einer Sekunde ansehen. Aber jetzt ist eine Klasse von Seitenauswahl relativ gleich der Hälfte des Textes auf der Vorderseite, neben einem Symbol zu. Dieses Symbol wurde in diesem Kurs zur Verfügung gestellt und Sie können über den Ordner „Assets“ darauf zugreifen. Zuerst wird der Text innerhalb der Spanne von Durchläufen, und dann zeigen Sie das Symbol mit dem Bild. Dieser muss nicht dynamisch sein, wir müssen nur in die Assets gehen, in die Icons. Das gleiche Symbol wird auf der Vorder- und Rückseite der Karte verwendet, so dass dieses front-back.svg genannt wird. Platzieren Sie in etwas Alt-Text und wir können diese jetzt für alle drei verbleibenden Links duplizieren. Kopieren Sie das vollständige Listenelement und fügen Sie es ein. Dieser nächste Listeneintrag ist für die Innenseite links. Der Name des Symbols befindet sich im Inneren links. Der Alt-Text, kopieren Sie diesen, und ändern Sie dann alle diese Vorkommen nach innen rechts. Wir haben den Router-Link, wir haben den Text, die Bildquelle, den Alt-Text. Wir können diesen Tippfehler auch beheben. Schließlich fügen Sie die letzte ein und dies ist für die Rückseite der Karte. Wir wissen, was jetzt zu tun ist, der Router-Link, der Text. Denken Sie daran, dass dieses Symbol das gleiche Symbol wie die Vorderseite hat, also war dieser Name vorne hinten. Dann wickeln Sie diesen letzten Link mit dem Alt-Text ein. Speichern Sie diese Datei und diese Komponente wird innerhalb der create.view platziert werden . Importieren Sie dies zuerst. Sobald Sie den CardEdit duplizieren, ist dieser für SwitchPage. Es gibt den Pfad und importieren Sie diesen auch in unser Komponenten-Objekt. Platzieren Sie das ganz oben. Rüber zum Browser vorne, innen links. Dies ändert auch die URL, die Innenseite rechts, die Rückseite. Beachten Sie, dass jeder dieser Links nur den Endabschnitt unserer URL ersetzt. Dies liegt daran, dass wir, wenn wir den Router-Link hinzugefügt haben, vor einer dieser Routen keinen Schrägstrich verwendet haben. Wenn wir einen Schrägstrich verwendet haben, einfach so, klicken Sie auf die Rückseite. Dies wird dann unsere vollständige URL ersetzen. Aber wenn Sie dies auslassen, wird nur den Abschnitt ersetzen, auf dem wir uns gerade befinden. Eine andere Sache, die Sie hier beachten müssen, ist, wenn wir auf einen dieser Links klicken, wird die ausgewählte Seite nicht aktualisiert. Der Grund, warum dies nicht aktualisiert wird, ist der gleiche Grund wie früher, als wir versuchten, diese drei Kategorie-Links zu aktualisieren. Dies liegt daran, dass wir immer noch auf den gleichen Create-Komponenten sind Wenn wir also gerade die Parameter so gewechselt haben, wie wir hier sind, wird keine Aktualisierung stattfinden. Wir können dies auch mit der gleichen Lösung beheben, nämlich einen Watcher hinzuzufügen, oder ganz oben auf UseCurrentCard zu verwenden. Importieren Sie Uhr und wir können für eine Änderung der Parameter zu beobachten. Erster Durchlauf in einer Getter-Funktion, die aufÄnderungen an allen Router-Parametern und insbesondere auf unserer Seite achten Änderungen an allen Router-Parametern wird. Als nächstes wird eine Callback-Funktion, die jedes Mal ausgeführt wird, wenn eine Änderung vorliegt, und ihre Funktion ist bereits oben eingerichtet. Dies, und fügen Sie ein Semikolon direkt nach unserem Beobachter. Halten Sie dies getrennt von dem folgenden Ausdruck und dann über zum Browser. Aktualisieren. Wir sehen die Front, weil wir nur Front-URL sind. Innen, links, innen rechts, und auch die Rückseite funktioniert auch. 111. Die Kartenansicht-Komponente: Aber über diese create.vue Komponenten und innen hier zeigen wir die SelectedPage an. Anstatt dies wie dieses als Objekt zu zeigen, werden wir jetzt diese verschieben und die Seite als Requisiten an unsere beiden Komponenten weitergeben, nämlich die Kartenvorschau und auch die Kartenbearbeitung. Zuerst entfernen Sie diese, übergeben Sie diese zuerst an die Kartenvorschau, den Eigennamen von SelectedPage , der gleich SelectedPage ist. Dasselbe direkt unten für die aktuelle Bearbeitung. Diese Requisite gibt der Kartenvorschau alle Informationen, die sie benötigt, um die Karte anzuzeigen, und darüber auf der rechten Seite Der Kartenbearbeitungsbereich wird diese Requisite als Anfangswert für alle unsere Eingabefelder verwenden . Wenn wir wollten, anstatt dies hier aufzustellen und diese als Requisiten weiterzugeben, Wir könnten diese auch direkt in unsere beiden Komponenten importieren. Aber dafür bleibe ich bei den Requisiten. In die Kartenvorschau. Dies benötigt einen Skriptabschnitt, um diese Requisiten zu akzeptieren, diese in unser Objekt zu übergeben. Der Typ, diese Objekte, und auch dies ist erforderlich. Bis zur Vorlage brauchen wir diese Überschrift der Stufe 1 nicht. Stattdessen ersetzen Sie dies durch ein div und dieses div wird der Wrapper für unsere Karte sein. Wir müssen das Hintergrundbild hinzufügen, genau wie wir sehen, wenn wir zur endgültigen Version gehen, in diese Karten. Dies wird der Wrapper für unsere Vorschau sein, und dies wird das style-Attribut haben, um das Hintergrundbild zu setzen. Zuerst eine Klasse von Kartenvorschau Wrapper und dann binden einen dynamischen Stil , der in einem Objekt nehmen wird, und es ist innerhalb des Stilobjekts, wo wir in der Hintergrund-URL innerhalb der Bactics übergeben werden. Genau wie wir es mit regulärem CSS konnten, können wir die Hintergrund-URL einstellen. Aber weil dies dynamisch sein wird, müssen wir dies auch innerhalb der Bactik setzen, in unsere Variable, die die selectedPage unserer Requisiten ist. Wählen Sie die Hintergrundeigenschaft aus. Als nächstes wird die Hintergrundgröße, die eine reguläre Zeichenfolge von 100 Prozent sein wird. Als nächstes wiederholen Sie den Hintergrund. Denken Sie auch daran, da wir dies innerhalb von JavaScript tun, müssen wir jede dieser CamelCase erstellen. Wenn das reguläre CSS wäre, würden wir es einfach so mit dem Bindestrich machen. Aber da wir JavaScript verwenden, müssen wir jede dieser CamelCase erstellen. Der Wert dafür wird keine Wiederholung sein. Dann schließlich die Hintergrundelstellung. Dies wird auch dynamisch sein, da wir diesen Satz in unseren Daten haben. Geh runter zur Datendatei. Wir haben den Hintergrund wie zuvor geschnappt, aber jetzt werden wir diese Hintergrundposition greifen. Dies wird auch aus allen Requisiten extrahiert. Jetzt, innerhalb dieses div, müssen wir durch jeden unserer Abschnitte schleifen. In dieser SelectedPage werden wir gehen und sehen dies innerhalb unserer Daten. Diese Titelseite hat dieses Array von Abschnitten. Die meisten Informationen in jedem dieser Abschnitte sind für Styling und CSS. Aber derjenige, den wir verwenden werden, um den eigentlichen Text aus einem Abschnitt anzuzeigen , ist diese Benutzereingabe. Ich werde innerhalb von hier ein div mit einem v-for platzieren, dem Abschnitt in SelectedPage.Sections übergeben. Jeder dieser Abschnitte hat eine eindeutige ID. Der Schlüssel wird also section.id sein. Um zu überprüfen, dass dies funktioniert, werde ich den vollständigen Abschnitt hinzufügen, aktualisieren. Wir können nur ein Hintergrundbild und unsere Text-Overlays sehen. Aber wir müssen diesem Hintergrundbild auch eine Breite und eine Höhe geben. Zurück zu den Komponenten können wir auf die Kartenvorschau Wrapper zugreifen. Legen Sie dann unten einen Stilabschnitt fest. Dies kann auch in den Anwendungsbereich einbezogen werden. Zuerst wird die Breite für dieses Bild auf 450 Pixel und dann auf eine Höhe von 600 festgelegt . Gut. Wir können jetzt die volle Größe des Bildes sehen. Das letzte, was zu tun ist, ist, die Überlaufeigenschaft für diesen Abschnitt zu setzen und dies wird uns später helfen, wenn der Benutzer die Höhe eines dieser Abschnitte erhöht , um höher als die Karte zu sein. Großartig. Nun, das funktioniert alles. Wir sehen auch, dass die Vorderseite der Karte die einzige mit einem Bild ist und dass einige dieser Abschnitte überhaupt keinen Text haben. Alle diese Textabschnitte möchten wir nicht das vollständige Objekt wie folgt anzeigen. Stattdessen wollen wir nur die Benutzereingabe ausgeben, die Sie so tun können, section.UserInput. Ok, großartig. Dieser Text, den wir überlagern, wird bald in eine separate Komponente platziert werden und wir werden auch auf sie alle diese zusätzlichen Daten wie das Styling und auch das Layout anwenden auf sie alle diese zusätzlichen Daten wie das Styling . 112. Textausgabe-Komponente: Was wir im Moment haben, ist diese Kartenvorschau, die ein Hintergrundbild anzeigt. Dann direkt unten für jeden unserer Abschnitte auf dieser Seite, wird es dann die Benutzereingabe ausgeben. Wir haben alle so etwas gesehen. Wenn wir auf die Titelseite gehen, sehen wir das Hintergrundbild. Dann wird der Text für Seiten mit mehreren Abschnitten von Texten wie der Innenseite rechts überlagert. Wir sehen diese Anzeigen gerade hier. Dieser Text soll jedoch nicht wie Nur-Text angezeigt werden, genau wie dieser. Wenn wir auf die data.js gehen, haben wir ein Array von Abschnitten mit einem Objekt, und dieser spezielle hat diese Benutzereingabe nur hier. Dann haben wir verschiedene Dinge für Styling und Layout. Um diese zu zeigen, werden wir eine neue Komponente erstellen, um jeden dieser Textstücke über den Komponentenabschnitt und in die Karte auszugeben. Dies ist der Text output.vue, die Vorlage, und nur einige einfache Text für jetzt. Dies wird innerhalb unserer Kartenvorschau anstelle dieses Textes nur hier angezeigt werden, in die Skript-Aktion, importieren Sie diese Datei, die die Textausgabe ist. Dies ist im selben Ordner, also müssen wir nur noch tun. /, und dann in unsere Textausgabe, registrieren Sie unsere Komponenten und sichern Sie die Vorlage, wir brauchen diesen Abschnitt nicht, wir verwenden keine Eingaben mehr. Ersetzen Sie dies durch unsere neue Komponente. Natürlich benötigt diese Textausgabe einige Daten zur Anzeige, daher senden wir den vollständigen Inhalt des Abschnitts als Requisite herunter. Das ist alles, was wir für diese Komponente tun müssen. Über zur Textausgabe. Die Skripte, Platz in unseren Requisiten, und der Abschnitt Requisite wird den Typ des Objekts haben. Denken Sie daran, dies ist die Abkürzung für den Typ. Anstatt das Objekt zu haben, platziere ich den Typ genau so. Genau wie in der Kartenvorschau sollten wir, wenn wir nun den Inhalt des Abschnitts ausgeben, auch Zugriff auf die Benutzereingaben haben. Lass uns sehen. Gut. Wir haben alle drei separaten Benutzereingaben und auch, das gleiche für die Fronten der Karte zu. Dies lässt uns in der gleichen Position wie der Anfang des Videos. Wir haben nur den Klartext nach Hause, aber dieses Mal von einer separaten Komponente. Wir können nun diese CSS-Werte, die wir in der Datendatei sehen, verwenden , um ein CSS-Objekt zu erstellen und es auf diesen Text anzuwenden. Legen Sie zuerst in unsere Setup-Funktion und eine Konstante, um unser CSS-Objekt zu speichern. Behalten Sie alle Änderungen im Auge. Wir werden einen berechneten Wert innerhalb dieser Setup-Funktion verwenden. Wir werden eine Funktion übergeben und diese Funktion wird jedes Mal ausgeführt, wenn sich die Daten innerhalb ändert. Genau wie bei der Verwendung der Options-API muss dies auch einige Daten zurückgeben, aber ich werde nur in einem leeren Objekt platzieren und wir werden in nur einer Sekunde darauf zurückkommen. Bevor wir vergessen, Platznummer gibt Aktion für das Setup zurück, wo wir unser CSS-Objekt zurückgeben werden, da wir jetzt berechnete verwenden, müssen wir dies aus der View-Bibliothek in unser zurückgegebenes CSS-Objekt importieren . Dies wird ein Objekt mit all diesen CSS-Eigenschaften sein, die wir aus diesem Abschnitt ziehen können. Aber zuerst haben wir ein paar statische CSS-Werte, die sich nicht ändern werden, sondern nur eine Grenze, die jeden dieser Textstücke umgeben, so dass der Benutzer die Höhe des Abschnitts als String kennt, die ein Pixel Breite, ein gepunktetes -Zeile, eine graue Farbe, und trennen Sie dann jede von ihnen durch ein Komma. Der Anzeigetyp wird gleich flex sein. Dieser Flex-Typ ermöglicht es uns, die Flexbox-Eigenschaften zu verwenden, die in diesen Daten übersehen sind, und insbesondere die Werte für Ausrichtungen wie JustifyContent und Align-Elemente. Da wir nun das CSS-Objekt zurückgeben, können wir testen, dass dies in unserer Textdatei funktioniert. Eine CSS-Stil Eigenschaft und setzen Sie dies gleich unserem Objekt. Wenn wir nun den Browser aktualisieren, sehen wir die gepunktete Linie, so dass unser CSS-Objekt jetzt wirksam wird. Der Rest des Stylings, das auf diesen Text angewendet wird, wird dynamisch sein und basiert auf den Werten, die von unseren Requisiten weitergegeben wurden. Zum Beispiel, die CSS-Farbeigenschaft, könnten wir normalerweise mit dem Options-Objekt mit etwas wie this.section darauf zugreifen. Dann könnten wir auf die einzelnen Eigenschaften zugreifen, aber denken Sie daran, mit der settle on composition keinen Zugriff mehr haben, wir mit der settle on composition keinen Zugriff mehr haben,um dieses Schlüsselwort zu lesen. Der Weg, dies in der Zusammensetzung zu tun, besteht darin, die Requisiten an das Setup zu übergeben. Dies wird uns dann direkten Zugang zu unseren Requisiten geben, wo wir auf den Abschnitt zugreifen können, und dann einen unserer Werte auf diesem Abschnitt Objekt, das ist die Farbe. Als nächstes wird die Höhe des Abschnitts, props.section.height. Da wir mit CSS arbeiten, müssen wir auch den Pixelwert hinzufügen. Nach der Höhe haben wir JustifyContent, der gleich Prompts.Section.JustifyContent ist. Elemente ausrichten. Speichern Sie dann diesen Abschnitt und testen Sie dies im Browser. Gut. Wir sehen, dass wir verschiedene Höhen für diese Textstücke haben. Wir haben eine andere Farbe. Rüber nach vorne. Gut, wir haben auch hier eine Höhe, und dies ist auch in der Mitte ausgerichtet, so dass unsere Flexbox-Eigenschaften wirksam werden. Lassen Sie uns auch in der Schriftfamilie und der Schriftgröße platzieren. Die Schriftgröße. Platzieren Sie in das Komma, und wir sehen jetzt einen größeren Text, und auch die Schriftfamilie wurde angewendet. Sie sich keine Sorgen darüber, dass der Abstand zwischen diesen Abschnitten oder der untere Teil vorerst nicht auf der Seite ist. Wir werden dies mit CSS in ein wenig beheben. Obwohl wir jetzt mit unserem Style-Objekt fertig sind und dieser berechnete Abschnitt wird die Kartenvorschau aktualisiert halten. Wenn wir die Karte später aus dem Bearbeitungsbereich aktualisieren, werden alle diese Werte in unserer Composable Funktion aktualisiert. Dann werden die reaktiven Werte zurück in der Kette an diese Vorschaukomponente übergeben. 113. Kartenbearbeitungs-Komponente: Wir werden einen Blick auf diese create.vue Komponente werfen. Früh bestanden wir in der CardPreview und auch im CardEdit. Wir haben auch in der SelectedPage an beide Komponenten übergeben. In einem vorherigen Video haben wir diese SelectedPage verwendet, durchlaufen jeden der Abschnitte und dann werde ich den Text in jedem Abschnitt einfügen. Wir werden eine ähnliche Sache für den CardEdit tun, auch die gleichen Requisiten hat. Für diese Zeit wird es auf der rechten Seite sein. Der Text wird in einem Textbereich platziert, den der Benutzer bearbeiten kann. Wir können auch den Mauszeiger über diesen Abschnitt bewegen. Wir sehen uns ein Dropdown-Menü an, um auch einen der Stile zu bearbeiten. Aber in diesem Abschnitt richten wir die CardEdit.vue Komponenten frühzeitig ein. Lassen Sie uns an dieser Komponente arbeiten, indem Sie zuerst unsere Skript-Aktion hinzufügen. Ich muss die Requisiten als Objekt aufnehmen, die SelectedPage übergeben, die der Objekttyp ist. Aber jetzt wird diese Vorlage ziemlich unkompliziert sein. Wir sind nur Platz in einem div enthalten, das ein v für Attribute enthalten wird. Wir können durch jeden der Abschnitte in unserer SelectedPage leben. Der Schlüssel, wir alle haben einen eindeutigen Schlüssel für jeden dieser Abschnitte, die wir in den Daten sehen können. Wir können auf die Section.ID zugreifen. Aber ich werde in der Section.UserInput übergeben, nur um zu überprüfen, dass das alles funktioniert. Wie wir gerade ein wenig später erwähnt haben, wurde dieser innerhalb eines Textbereichs platziert, so dass der Benutzer diesen Text bearbeiten kann, speichern und der einzelne Text für diese Karte wird nun alle im Bearbeitungsbereich angezeigt. Lassen Sie uns das Innere rechts versuchen. Das funktioniert auch. Ein ziemlich unkompliziertes Video, aber wir haben jetzt den Text auf dem Bildschirm zur Verfügung. Im nächsten Video werden wir diese Benutzereingaben durch eine separate Komponente ersetzen. 114. Texteingabekomponente und Hover-Menü: Derzeit geben wir im Abschnitt „Bearbeiten“ einfach die Tags aus jedem dieser Abschnitte aus, aber genau wie bei der Vorschauseite werden wir jeden dieser Textteile oder jeden dieser -Abschnitte mit einer eigenständigen Komponenten. Diese Komponente wird einen Textbereich enthalten, diese Benutzereingabe enthält, damit sie den Text bearbeiten können , der dann in der Vorschau angezeigt wird. Wir werden auch in einem Dropdown-Menü platzieren, so dass der Benutzer diesen Text auch bearbeiten kann. Sie können verschiedene Stile hinzufügen und auch das Layout und die Positionierung ändern. Zurück zur Sidebar, wir haben die Textausgabe für die linke Seite. Also werden wir eine Texteingabe für den Bearbeitungsbildschirm, eine Vorlage, dann ein div mit der Klasse des Texteingabe-Wrapper erstellen. Platzieren Sie hier in einen beliebigen Text und dann können wir diesen in unsere Code-Edit-Komponente importieren. Bis auf das Skript, die Texteingabe. Dies im selben Ordner, also wird dies ein Punktschrägstrich Texteingabe sein. Zuletzt in den Komponenten-Objekten, ersetzen Sie unsere Benutzereingabe durch diese neue Komponente. Es benötigt auch die vollständigen Abschnittsdaten, so dass dies eine Requisite sein kann. Dies gibt uns jetzt einige Informationen zu arbeiten, Platzierung dieser Skripte Abschnitt, die Requisiten des Abschnitts, die die Art des Objekts ist, und dann ersetzen Sie unseren Text mit dem Textbereich, verschieben Sie diese. Legen Sie dann die Standardspalten auf 50 und dann vier Zeilen fest. Sehen Sie sich nun diese Benutzereingabe innerhalb seines Textbereichs an. Wir müssen jetzt im V-Modell platzieren, aber denken Sie daran, dass wir Requisiten nicht direkt mutieren können. Stattdessen müssen wir eine Kopie dieses Abschnitts erstellen. Dann können wir das für unser V-Modell verwenden. Dies können wir in der Einrichtung übergeben, nehmen die Requisiten, und dann eine Konstante, die eine Kopie der aktuellen Abschnitt genannt wird. Wickeln Sie dies in eine Referenz ein. Wir werden in der Requisiten dot.section passieren. Importieren Sie diese Referenz aus der View-Bibliothek, und geben Sie dann unseren aktuellen Abschnitt zurück aus der Einrichtung. Dieser aktuelle Abschnitt ist jetzt eine Kopie aller Requisiten, die wir jetzt innerhalb von v-model verwenden können. Die Eigenschaft in diesem Abschnitt ist die Benutzereingabe. Wir laden den Browser und wir haben jetzt unsere freien Textbereiche, jeder mit den Texteingaben. Wenn Sie sich fragen, was dieser grüne Kreis auf der rechten Seite ist, ist dies eine Grammmarly Erweiterung, die verfügbar ist, um bei Tippfehlern zu helfen. Etwas zu beachten, wenn wir in einen dieser Textbereiche eingeben, ist, die aktuelle Vorschau auch automatisch aktualisiert wird. Jetzt habe ich keine benutzerdefinierten Ereignisse zugelassen. Wir haben keine Funktionen erstellt, um dies zu aktualisieren, aber dies kommt auf die Objektreferenz zurück, die wir zuvor besprochen haben. Wir könnten dabei bleiben und zulassen, dass dies automatisch aktualisiert wird, aber persönlich bevorzuge ich es, die Referenz zu brechen und ein manuelles Update durchzuführen, nur damit wir ein wenig mehr Kontrolle über die Updates haben, und es macht es ein bisschen mehr vorhersehbar. Um diese Referenz zu brechen, was wir tun werden, ist, auf das Setup zu gehen und anstatt direkt eine Kopie wie diese zu nehmen. Wir werden das ausschneiden, ein neues Objekt erstellen und diese dann wieder verteilen. Wir können das testen, aktualisieren. Jetzt werden wir diese Textbereiche aktualisieren. Der vorherige Abschnitt ist nicht betroffen. Zusammen mit dem Abrufen dieses Textes aus dem Textbereichmöchten wir auch ein Dropdown-Menü bereitstellen, möchten wir auch ein Dropdown-Menü bereitstellen wenn der Benutzer den Mauszeiger über jeden dieser Abschnitte bewegt. Dieses Dropdown-Menü enthält alle Optionen, um Dinge wie die Schriftarten, die Farben und auch die Positionierung zu ändern . Erstellen Sie ein div innerhalb der Vorlage, direkt unter dem Textbereich. Wenn Sie sagen, Klasse von Menü, wir brauchen eine Möglichkeit, dieses Menü auftauchen zu steuern. Wir werden die V-Show-Attribute hinzufügen und dies gleich Show Options. Für jetzt, nur einige Texte wie Menü ist völlig in Ordnung. Dann bis zur Setup-Funktion können wir nun Show Options so einrichten, dass es sich um einen Anfangswert von false handelt. Dies wird auch reaktiv sein, also übergeben Sie den ref und den Anfangswert von false. Dann müssen wir dies von unserer Funktion als diese zurückgeben. Wir sehen unsere Menü-Texte noch nicht. Wir brauchen eine Möglichkeit, dies so zu setzen, dass es wahr ist, wenn die Maus über diesen Abschnitt schwebt. Dafür haben wir Zugriff auf die Maus über Ereignis. Wenn die Maus über diesen div Abschnitt geht, werden wir setzen, zeigen Optionen gleich wahr sein. Dann machen wir auch die Verwendung der Maus aus Ereignis, die gehen, um die Show Optionen gleich falsch zu sein , wenn der Benutzer bewegt die Maus weg von diesem Abschnitt. Daher wird dies dann ein Schließen des Menüs wie folgt und wir können dies ausprobieren. Über einen dieser Abschnitte ist unser Menü, das dann verschwinden wird, wenn wir uns vom Menü weg bewegen. Versuchen wir es mal. Dies funktioniert jetzt für jeden unserer Abschnitte, und es sind Menükomponenten, die wir als nächstes bauen werden. 115. Menüoptionen hinzufügen: Gehen wir nun zum Menü für jede dieser Texteingaben. Wir haben bereits einen Hover eingerichtet , der dann unser Menü anzeigt, und jetzt werden wir einige Optionen zu diesem Menü hinzufügen. Dies war ein div, das wir im letzten Video erstellt haben. Umgeben innerhalb dieses div, werden wir in drei neue Abschnitte platzieren. Der erste wird ein div mit der Klasse von Menü oben, die zweite, Menü Mitte und die dritte, Menü unten. Es wird einige verschiedene Optionen geben, die wir zu diesem Menü hinzufügen werden. In diesem Video werden wir uns auf dieses Menü konzentrieren. Menü oben wird die oberste Reihe unserer Optionen sein und enthält die Schriftfamilie. Der Benutzer kann auch die Schriftgröße, die Schriftfarbe und auch die fett und kursiv Optionen ändern. Zuerst gehen wir in unsere Auswahloption, die alle unsere Schriftfamilien gruppieren wird. Alles, was wir als Attribut tun müssen, ist V-Modell zu übergeben, das zu unserem aktuellen Abschnitt verlinken wird. Dann die Schriftfamilie. Die erste Option. Dann müssen wir innerhalb der Werte in die Schriftfamilie genau so schreiben, wie Sie in CSS wären , weil dies auf unser Kartenobjekt geschoben wird. Genau wie in unseren Daten, wenn wir nach der Schriftfamilie suchen, werden dies die endgültigen Werte sein, die wir hier sehen. Die erste, ich werde für die Times New Roman gehen. Sie können diese zu jeder Schriftfamilie ändern, die Sie möchten. Auch der Anzeigetext, duplizieren Sie diesen. Der zweite von Georgia. Nummer drei wird Arial sein. Lass uns ein bisschen verrückt gehen und Comic Sans hinzufügen. Platzieren Sie dies wiederum genau so, wie Sie es mit CSS tun würden. Die Verdana Schriftfamilie für Nummer fünf. Dann die letzte, die ich in Courier New platzieren werde. Ok. Lassen Sie uns das ausprobieren, aktualisieren Sie den Browser. Es gibt unsere Auswahl mit all unseren Schriftfamilien. Als nächstes platzieren wir kurz nach dieser Auswahl in eine neue Auswahlgruppe. Dieser wird für unsere Schriftgröße sein. Auch hier muss das V-Modell so dass wir alle Daten haben, um unser Kartenobjekt zu pushen. Wir wählen den aktuellen Abschnitt, dann diesmal die Schriftgröße. Die erste Option von 1.6 rems. Dann der Text von normal. Als nächstes wird der Text von groß mit einem Wert von zwei rems. Der nächste wird für 2,5 Rems gehen. Der Text ist größer. Dann größte, die drei Rems sein wird. Okay, lassen Sie uns das versuchen. Gut. Die dritte Eingabe wird eine Eingabe mit der Art der Farbe sein. V-Modell dieses auf den aktuellen Abschnitt und wählen Sie die Farbe. Ok. Also das und dann gehen wir. Das lässt uns jetzt kursiv und mutige Wahlen übrig. Zuerst fügen wir ein Label hinzu. Dieser wird eine Checkbox sein, die innen für unsere mutige Auswahl verschachtelt ist. Parsen der Eingabe, der Typ des Kontrollkästchens, V-Modell. Für diese nächsten beiden haben wir die Optionen ist fett und kursiv, die nur auf Werten aufbauen. Was wir für diese tun werden, ist eine Eingabe neben einem Bild hinzuzufügen. Der Grund dafür ist, dass das Bild eines der Symbole sein wird , die Sie im Ordner „Assets“ haben. Aber wir wollen diese Eingaben auch aus Gründen der Barrierefreiheit nebeneinander behalten. Dies bedeutet, dass es von Screenreader gelesen werden kann und auch die Tastatur-Interaktionen zu halten. Aber in der CSS in nur ein wenig, werden wir diese Eingabe verstecken. Wir sehen nur dieses Symbol direkt unten. Für die Quelle, die zu den Assets hinzugefügt wurde, und so Symbole. Wir haben ein bereitgestelltes Symbol, das bold.svg und das alt-Text fett Symbol genannt wird. Als nächstes haben wir auch ein Kontrollkästchen für die kursiv ist. Um die Dinge zu beschleunigen, können wir diesen Abschnitt kopieren, dann ist die Änderung fett, um kursiv zu sein. Die italic.svg und auch der Alt-Text. Speichern Sie das. Mal sehen, wo uns das verlässt. Ok. Es sieht also in der Minute ziemlich schrecklich aus, aber wir werden das mit CSS beheben. Neben unseren Symbolen gibt es unsere Kontrollkästchen. Aber wie ich bereits erwähnt habe, werden wir dieses Kontrollkästchen später ausblenden. Etwas zu beachten ist, besonders wenn Chrome verwendet wird, ist es möglicherweise nicht das gleiche in verschiedenen Browsern. Ich glaube, es ist nicht mit Firefox, aber wenn wir den Chrome-Browser verwenden, wenn wir auf diesen Farbwähler klicken und dann versuchen, die Farben auszuwählen, wird das gesamte Menü verschwinden. Jetzt Chrome hält einen riesigen Marktanteil für den Browser-Markt, also ist dies offensichtlich etwas, das wir beheben wollen. Was passiert hier, wenn wir von dieser Farbeingabe zum tatsächlichen Farbwähler wechseln? Der Selektor ist ein separater Abschnitt. Wechsel zu diesem neuen Abschnitt bedeutet, dass wir diesen Haupt-Wrapper verlassen, dies löst dann das Maus-Out-Ereignis aus, und dann versteckt haben Optionen. Um dies zu vermeiden, müssen Sie darauf achten, dass die Maus den oberen Bereich des Menüs verlässt. Setzen Sie dann noch einmal alle Mausoptionen auf true. Fügen Sie eine Maus hinzu, lassen Sie Ereignisse hier drin. Wir werden die Optionen anzeigen V gleich true setzen. Speichern und testen Sie dies. Klicken Sie auf die Eingabe. Jetzt werden wir uns von diesem oberen Abschnitt entfernen. Die Show Options ist immer noch auf true gesetzt, was bedeutet, dass wir immer noch unsere Farbeingaben sehen können. Wir haben das jetzt behoben. Das letzte, was wir tun müssen, ist zu überprüfen, ob unser aktueller Abschnitt mit einem dieser Eingaben aktualisiert wird. Ich lege dies in die doppelten geschweiften Klammern in der Vorlage. Alles, was wir tun müssen, ist, unseren Text zu ändern. Wir sehen, dass die Benutzereingaben geändert werden. Klicken Sie auf diese fett, und dies wird dies nur hier kursiv umschalten. Die Schriftfamilie ändert sich in Arial. Schließlich die Schriftgröße. Das alles scheint zu funktionieren, und im kommenden Video werden wir den Rest unserer Menüoptionen hinzufügen. 116. Fortsetzung Menüoptionen: Weiter mit diesem Dropdown-Menü Abschnitt, wir haben immer noch den mittleren Abschnitt und auch den unteren Abschnitt in unsere Texteingabe. Wenn wir dann zu diesem Menü im mittleren Abschnitt gehen, wird dies einen Aufwärtspfeil und einen Abwärtspfeil enthalten. Aber jetzt werden sie nur eine Reihe von Symbolen sein, aber später würden diese eine Funktion auslösen. Um die Höhe des Abschnitts zu ändern, wickeln Sie diese in eine Schaltfläche, und das Symbol befindet sich auch im Ordner „Assets“, in die Symbole ein. Dies ist der Pfeil up.svg, der Alt-Text auch. Dann ist die zweite Taste für den Pfeil nach unten. Sparen. Da gehen wir. Dann endlich haben wir diese Menü-Taste. Diese Menü-Taste wird hauptsächlich Ausrichtung sein, so dass wir den Text nach oben und unten und von links nach rechts auch verschieben können . Dies werden zwei Sätze von Optionsfeldern sein, einer für die vertikale Ausrichtung und einer der horizontalen Ausrichtung. Also werde ich ein Label übergeben, das unsere Eingabe mit dem Typ des Radios, dem Modell, umschließt , das zum aktuellen Abschnitt modelliert wird. Begründen Sie dann den Inhalt. Ausrichten des Inhalts steuert die Positionierung auf der Seite von links nach rechts. Dann geben wir einen Wert ein. Der Wert ist der Text, den wir an unser Kartenobjekt übergeben haben und dies muss einer der CSS-Werte des Begründungsinhalts sein. Also wird dieser Flex-Start sein. Dann der Name der horizontalen. Dieser Name der horizontalen wird verwendet, um alle drei unserer horizontalen Schaltflächen miteinander zu verknüpfen . Dann haben wir einige vertikale Bindungen für die vertikale Ausrichtung. Genau wie wir oben mit dem Kontrollkästchen getan haben, werden wir auch diesen Funkeingang verstecken und diesen durch ein Symbol ersetzen. Das Symbol wird in den Bildelementen angezeigt und der Pfad befindet sich in den Assets. In die Icons. Die linke icon.svg und der Alt-Text auch. Also dieser steuert die linke Ausrichtung und wir werden das kopieren und es in zwei weiteren Malen einfügen, und die mittlere ist für das Zentrum. Also sind wir immer noch rechtfertigen alle Inhalte, aber der Wert dieser Zeit ist im Mittelpunkt. Diese drei Schaltflächen sind verwandt, so dass wir den gleichen Namen wie horizontal behalten. Dies bedeutet, dass der Benutzer nur eine dieser Tasten gleichzeitig drücken kann. Das Bild ist die Mitte, der ALT-Text. Dann wird der dritte die richtige Ausrichtung oder in der Flex-Box-Sprache festlegen, dies wird das Flex-Ende sein. Das Bild hat den Namen rechts, und auch den Alt-Text. Nun, mal sehen, ob das im Browser funktioniert. Wir können nur eines auswählen, da sie alle den gleichen Namen haben und diese auch unser Objekt an der Spitze aktualisieren. Die nächste Gruppe wird also für die vertikale Ausrichtung sein. Wenn wir eine von diesen kopieren, fügen Sie diese direkt unten, wir haben ein paar weitere Änderungen zu machen. Anstatt es JustifyContent zu setzen, müssen wir dies ändern, um Elemente auszurichten. Der erste Wert ist für den Flex-Start, der Name der vertikalen. Dieses Symbol ist für die Oberseite. Dann duplizierte es das noch ein zwei Mal. Der nächste ist für das Zentrum. Das Symbol hat den Namen „Mitte“. Die letzte ist für den unteren Bereich, was der Flex-Box-Wert von flex-end ist. Das Bild ist bottom.svg. Schließlich der ALT-Text. Rüber auf die Speisekarte. Es sieht jetzt ziemlich schlecht aus, aber lassen Sie uns das ausprobieren. Für jeden von ihnen sehen wir den Flex-Start, den Sensor und auch das Flex-End. Jetzt haben wir dieses Menü an Ort und Stelle und wir wissen, dass es jetzt mit unserem aktuellen Abschnitt verknüpft ist. Als nächstes gehen wir auf die Verbesserung des Stylings. 117. Menü-Styling: Dieses Menü benötigt jetzt etwas Styling und auch ein Layout, das wir in der textinput.view überarbeiten möchten, beginnend mit dieser obersten Zeile, die die Klasse des Menüs oben hat. Also werde ich ganz nach unten springen, den Stilabschnitt erstellen und auch das Bereichsattribut hinzufügen. Denken Sie daran, dass jedes unserer Symbole im Bildelement umgeben ist, also was wir dafür tun werden, ist die maximale Breite auf 30 Pixel festzulegen. Das komplette Menü war in dieser Menüklasse umgeben und dies war ein Wrapper für alle unsere Eingaben. Lassen Sie uns zunächst die Position als absolut festlegen, und indem Sie dies auf absolut setzen, wird dies über dem Rest des Inhalts schweben, anstatt dies nach unten zu drücken. Was wir damit meinen, wenn Sie zu einem Projekt gehen, wenn Sie mehrere Eingaben haben, wie wir es gerade hier tun, werden die Symbole über einem der Inhalte direkt darunter erscheinen, anstatt dies auf der Seite nach unten zu drücken. Der Hintergrund. Sie können jede Farbe wählen, die zu Ihnen passt, aber ich werde in einem 30-Grad-Linear-Gradient und die Werte von RGB 253, 207, 207, fügen Sie ein Komma, und die zweite Farbe von rot, 140, grün 140 und blau, 236. Dies braucht auch eine Polsterung im Inneren und wir werden auch die unteren linken und die unteren rechten Ecken runden . Polsterung von 10 Pixeln und dem Körperradius, wir wollen dies nur auf zwei Außenseiten anwenden, so dass die obere Null ist, und dann drei Pixel für unseren unteren. Ok. Als nächstes haben wir jede unserer Rollen in die Klasse von Menü oben, Menü, Mitte und viele unten eingewickelt, und wir können die CSS-Flexbox verwenden , um die Ausrichtung über die Seite zu setzen. Alle diese Eingaben haben unterschiedliche Höhen, so dass wir nicht über die gleiche Mittellinie innerhalb unseres Stils sein müssen. Schnappen Sie sich unsere Menü-oben und auch, die Menü-unten, die Anzeige Typ alle Flex, und dann richten Sie Elemente in unserer Mitte. Als nächstes diese mittlere Reihe, wo wir die Aufwärts- und Abwärtspfeile haben, muss dies auf der linken Seite des Menüs vorbei sein und wir können dies tun , indem Sie den Anzeigetyp auf Flex einstellen. Schnappen Sie sich den mittleren Abschnitt, setzen Sie dies auf flex, und indem Sie dies auf flex setzen, haben wir die Standardwerte der Flusszeile und erscheinen auch am Anfang der Zeile. Nun möchten wir auch den Rahmen und den Hintergrund für diese beiden Schaltflächen entfernen und den Cursor als Zeiger ändern. Wir könnten dies auch innerhalb dieser gleichen Komponenten tun, aber ich werde dies innerhalb der app.vue platzieren, und daher wird dies auch für andere Schaltflächen gelten. Also lasst uns unseren Knopf schnappen. Entfernen Sie den Hintergrund, entfernen Sie den Rahmen mit keiner, den Cursor des Zeigers. Die Schriftgröße von 14 Pixeln, und entfernen Sie dann alle Standardabstände mit dem Wert Null. Aktualisieren. Ok. Das möchte also auch vielleicht auch einige Abstände, also zurück zu unserer Texteingabe. Schnappen Sie sich das Menü in die Mitte, und wir wählen das Bild aus. Die Höhe von 10 Pixeln und dann etwas Polsterung. Wir möchten nicht, dass diese Polsterung dies von der linken Kante entfernt, also werden wir die Polsterung oben, rechts und auch unten anwenden . Da gehen wir hin. Dies gibt uns jetzt ein bisschen mehr Abstand. Nur um zu klären, wenn wir diesen Schaltflächenstil in der App hinzugefügt haben, ist es nicht wichtig, dass wir globale Stile hier platzieren. Es kann nur ein praktischer Ort sein, um nicht-bereichsbezogene Stile zu setzen , wenn wir keine große Menge haben. Wenn wir viele verschiedene Stile haben, ist dies vielleicht eine bessere Idee, dies vielleicht in eine andere Datei auszulagern. Das nächste, was wir tun werden, ist wieder vorbei in unserer Texteingabe und wir werden die Kontrollkästchen und auch die Optionsfelder zu verstecken, sogar passen Sie diese Symbole. Denken Sie daran, von früher, wir sagten, wir lassen diese aus Gründen der Barrierefreiheit und so kann der Benutzer auch die Tastatur-Steuerung nutzen. Der Grund, warum diese immer noch zugänglich sind und wir diese noch mit der Tastatur steuern können , ist, weil wir sie nicht vollständig entfernen. Stattdessen verstecken wir sie einfach mit CSS. Der erste Schritt besteht also darin, unseren Eingang mit der Art des Radios und dann auch unsere Checkbox auszuwählen . Das ist also nicht mehr sichtbar. Wir setzen die Deckkraft gleich Null, die Breite von Null auch und auch die Höhe. Mal sehen, ob das funktioniert. - Gut. Diese werden jetzt entfernt und das nächste, was wir tun werden, ist, das Bild auszuwählen und den Cursor zu einem Zeiger zu machen, und um dies zu tun, werden wir beide greifen, fügen Sie diese unten hinzu. Nutzen Sie den benachbarten Selektor, der das Plus-Symbol ist, und dies wählt alle Bildelemente aus, die diesem Radio folgen. Dasselbe für das Kontrollkästchen. Der Cursor, der ein Zeiger sein soll. Dies ändert sich nicht, wenn wir den Mauszeiger über unsere Kontrollkästchen und unsere Optionsfelder bewegen. [ unhörbar] alle ursprünglichen Formulareingaben wie diese, wir müssen auch den geprüften Zustand behandeln und wenn wir auf einen dieser klicken, sehen wir nicht, dass die Schaltflächen hervorgehoben sind. Wenn der Benutzer also mit einer Tastatur navigiert, hätte er keine Ahnung, welche gerade aktiv ist. Um dies zu beheben, müssen wir auch den überprüften Zustand berücksichtigen. Also schnappen Sie sich unsere beiden Eingänge und das Bild. Dann erstellen wir einen neuen Abschnitt direkt unten, aber dieses Mal werden wir den Prüfstatus anvisieren. Nun, was wir im Inneren von hier tun werden, ist, einen Umriss zu setzen, wenn eines dieser Bilder angeklickt wurde, so dass der Benutzer weiß, dass dies ausgewählt wird, von zwei Pixeln, einer einfarbigen Farbe und dann einer Farbe für diesen Umriss. Ich werde für den roten Wert von 119, 123 und auch 125 gehen. Das kommt sehr nahe, aber es ist noch nicht ganz da. Dies wird eine Gliederung auf der Schaltfläche des Bildes platzieren , wenn ein Benutzer auf einen von ihnen klickt, aber wir möchten auch, dass diese Gliederung angezeigt wird, wenn der Benutzer die Tabulator-Taste auf der Tastatur verwendet , um durch diese Schaltflächen zu wechseln. Also nochmal, werden wir beide kopieren, ein Komma hinzufügen, diese wieder einfügen, aber diesmal den Fokusstatus. Speichern Sie diese Datei und über im Browser, lassen Sie uns das überprüfen. den Mauszeiger über das Menü und sofort sehen wir unsere Umrisse für die erste Gruppe und auch für die zweite Gruppe. Wir können verschiedene Werte auswählen und diese werden ebenfalls hervorgehoben. Auch wenn wir die Tastatur-Tab-Taste verwenden, um durch unsere Website zu fahren, sobald wir zum Menü gelangen, haben wir die Optionen, die fett, kursiv, unsere Open-Down-Buttons, und wenn wir dann noch einmal „Tab“ drücken, können wir die linke und rechte Tastatur-Tasten für unsere erste Gruppe verwenden. Drücken Sie erneut „Tab“, und die zweite Gruppe wird aktiv. - Gut. Nur um dies zu beenden, werden wir auch einige Stile zu unserem Textbereich hinzufügen, und auch diese Auswahlschaltflächen. Zuerst der Textbereich. Verschieben Sie den Standardrahmen mit keiner. Ein kleiner gebohrter Radius von drei Pixeln. Die Breite von 100 Prozent. Das Schriftgewicht von leichteren. Fünf Pixel Polsterung. Auch für die Dimensionierung werden wir die Box-Größenbestimmung so einstellen, dass sie gleich border-box ist. Dann schließlich sind diese ausgewählten Eingaben ein wenig zusammengefügt und alles, was ich tun werde, ist, etwas Marge auf der rechten Seite hinzuzufügen. Fünf Pixel sollten in Ordnung sein, und da gehen wir. Dies ist das Styling, das jetzt für unser Menü fertig ist, und als nächstes werden wir die Karten-Updates einrichten. 118. Die Karte aktualisieren: Wir können von all diesen Objekten über Rechte hier sehen, dass alle diese aktualisierten Abschnitte innerhalb der Texteingabekomponenten gespeichert sind. Wir können diese Daten nun verwenden, um die Karte mit all diesen neuen aktualisierten Informationen zu aktualisieren. Ein guter Ort, dies zu tun wäre vorbei, innerhalb der Verwendung aktuelle Karte. Wir werden unsere ausgewählte Karte haben, die unser Hauptkartenobjekt ist. Was wir tun werden, ist eine Funktion zu erstellen, um diese Karte auszuwählen, und dann erhalten wir die bestimmte Seite, an der wir arbeiten, und aktualisieren dann den Abschnitt, aus dem diese Daten gesendet werden. Diese Funktion wird UpdateCard genannt. Da diese Karte ein Floß ist, greifen wir die ausgewählte Karte, greifen auf den Wert zu, gehen in die Seiten-Array, und das Element, von dem Sie finden möchten oder die Seite, die Sie finden möchten , ist von dieser Funktion direkt oben verfügbar. Denken Sie daran, dass dies die ausgewählte Indexnummer von den Router-Parametern erhalten wird. Wir können diese Funktion hier drinnen aufrufen. Danach möchten wir einen bestimmten Abschnitt aktualisieren. Für diese Seite wird es sich um einen dieser drei Abschnitte handeln. Aber woher wissen wir, welchen wir packen wollen? Nun, momentan tun wir es nicht. Wir haben keine Möglichkeit, auf diese Informationen zuzugreifen, also müssen wir dies analysieren, wenn wir die Funktion aufrufen. Dies bedeutet, dass diese Funktion einige Daten erhält. Ich nenne dies den SectionIndex. [ unhörbar] Zusammen mit diesem müssen wir auch die neuen Daten zu dieser Funktion analysieren, die verwendet wird, um die Karte zu aktualisieren. Wir werden diesen bestimmten Abschnitt so einstellen, dass er diesen Daten entspricht. Das ist alles, was wir für diese Funktion tun müssen. Jetzt können wir dies zurückgeben, und dann können wir es mit unserem SectionIndex und auch den aktualisierten Daten aufrufen . Platzieren Sie die updatedCard in unser Rückgabeobjekt, und die Komponenten, die wir benötigen, um dies zu nennen, befinden sich innerhalb der Texteingabe. Wie immer müssen wir unser Composable importieren, das heißt UseCurrentCard und den Dateipfad, das at Symbol verwenden, um in die Quelle, den Composable Ordner und dann in UseCurrentCard zu gehen . Extrahieren Sie diese in eine Konstante, und wir müssen die UpdateCard Funktion aus der Funktion extrahieren , die UseCurrentCard genannt wird. Wir haben jetzt unsere Funktion in den aktuellen Komponenten. Aber wenn wir darüber nachdenken, wann wollen wir diese Updatefunktion jetzt aufrufen? Wie wollen wir das eigentlich ausführen? Wir könnten auf die Karte gehen und wenn diese Komponente geladen wird, könnten wir diese Funktion nach einer gewissen Zeitverzögerung ausführen. Wir könnten die Funktion ausführen, wenn das Menü geschlossen ist und so viele andere Optionen. Aber ein vernünftiger könnte sein, auf diesen aktuellen Abschnitt zu achten. Denken Sie daran, dass alle unsere Eingaben von oben an diesen aktuellen Abschnitt gebunden sind , indem Sie V-Modell verwenden. Jedes Mal, wenn sich eine unserer Eingaben ändert, ändern sich auch die aktuellen Abschnittsdaten. Daher kann eine sinnvolle Option sein, auf Änderungen an diesem aktuellen Abschnitt zu achten und dann diese Update-Funktion aufgerufen. Dies muss entweder Watch- oder Watch-Effekt importieren. Ich möchte die Uhr benutzen, da der Watch-Effekt sofort ausgeführt wird, und das brauchen wir nicht wirklich. In unseren Import, nach dem Ref, importieren Sie unseren Watcher, und dann rufen wir dies innerhalb des Setups. Dann analysieren wir in zwei Argumenten in diesen Beobachter. Die erste ist die eigentliche Datenmenge, die wir beobachten möchten, und in unserem Fall ist es der aktuelle Abschnitt, getrennt durch ein Komma. Wir möchten dann unsere UpdateCard Funktion aufrufen, wenn sich diese Daten ändern. Parsen Sie diese Funktion, und wir werden dies auch nennen. Denken Sie daran, wenn wir diese UpdateCard Funktion über in unserem Composable einrichten, es muss auch zwei Teile von Daten erhalten, den Abschnittsindex und auch den neuen Abschnitt zu aktualisieren. Derzeit haben wir diesen Abschnittindex noch nicht, daher werden wir darauf zurückkommen. Aber wir haben die aktualisierten Daten in unserem aktuellen Abschnitt gespeichert. Wir müssen auch auf den Wert zugreifen, da dieser innerhalb einer Ref gespeichert ist. Dies lässt uns nur die Aufgabe, den aktuellen Abschnittindex herauszufinden. Diese aktuelle Datei der Texteingabe hat nicht die Indexnummer, da alles, was wir tun, an diesem Abschnitt als Requisiten zu analysieren. Um die tatsächliche Indexnummer für diesen bestimmten Abschnitt zu erhalten, müssen wir eine Ebene nach oben gehen. Diese Texteingabe wird von unserer Karte aufgerufen, Bearbeitungskomponente. Also in diese Datei als unsere Texteingabe-Komponente. Da wir alle diese Abschnitte durchlaufen, können wir auch auf die Indexnummer 2 zugreifen. Wir schauten uns an, wie man das schon früh macht. Wir schreiben dies in die Klammern, und wir können auch auf die Indexnummer 2 zugreifen. Das bedeutet, jetzt haben wir diesen Index, wir können diesen auch als Requisiten an unsere Texteingabe-Komponente weitergeben. Abschnittsindex ist gleich unserem Index. Gut, jetzt zurück zur Texteingabe und wir haben jetzt eine zweite Requisite zu diesem hinzufügen, die der Abschnittindex ist , der eine Art von Zahl ist. Jetzt können wir das analysieren, wenn wir unsere Funktion aufrufen. In unserem Setup haben wir Zugriff auf alle Requisiten und dann unseren Abschnittindex. Stellen Sie auch sicher, dass wir den aktuellen Abschnitt von Wert 2 und über zum Browser beobachten , mal sehen, wo wir jetzt mit unserem Projekt sind. Uns fehlt der Text auf der rechten Seite. Jetzt gehen wir in die Konsole und sehen, was hier vor sich geht. Wir können nicht die Eigenschaft Null von undefined und keine Verwendung aktuelle Karte setzen. Dies ist unsere Update-Kartenfunktion, wir scheinen nur hier einen Fehler zu haben. Mal sehen, was los ist. Wir greifen in der ausgewählten Karte auf den Wert in die Seiten zu, den Seitenindex. Wir wissen, dass dies funktioniert, weil wir dies direkt oben verwendet haben, wenn wir die ausgewählte Seite erhalten. Das funktioniert alles gut. Dann in die Abschnitte. Ich denke, das sollte nur Abschnitt mit einem S in die Daten sein. Ja, wir brauchen nur ein S am Ende unserer Sektion. Hoffentlich sehen wir unseren Text noch einmal. Gut. Versuchen wir nun, diesen Text zu bearbeiten, und wir sehen ein Update. Dann sehen Sie einen Schriftstil, die Ausrichtungen. Gut, das funktioniert, denn wenn wir die Karte aktualisieren, ist der Kartenwert auch reaktiv. Alle Änderungen werden dann an die Komponenten weitergegeben, die sie benötigen. Deshalb sehen wir die Updates in der Kartenvorschau. Aber es gibt zwei Optionen, die gerade noch nicht funktionieren werden. Dies ist fett und kursiv. Dies liegt daran, dass beide Kontrollkästchen sind, die entweder ein wahr oder ein falscher Wert sein werden. Um damit umzugehen, gehen wir zu unserer Textausgabe und erstellen zwei neue Stile. Diese Klassen können ein- oder ausgeschaltet werden. Der erste wird für fett sein, was die CSS von wave-Eigenschaft für fett und dann die zweite für kursiv festlegen wird. Wir legen den Schriftstil so fest, dass er bis zum Anfang kursiv ist. Alle haben innerhalb unserer Vorlage ist unser P-Element für unseren Text. Es ist hier drin, wo wir die dynamischen Klassen als Objekt hinzufügen. Innerhalb dieses Objekts haben wir jetzt zwei Klassen, die Sie hinzufügen möchten. Das sind unsere beiden Klassen, die unten aufgestellt wurden. Wir haben fett und wir haben Kursiv. Jetzt brauchen wir eine Möglichkeit, diese Klassen ein- oder auszuschalten, je nachdem, ob diese Kontrollkästchen aktiviert sind. Der Weg, dies zu tun, werden wir einen Blick auf unser Objekt nehmen ist, wir haben dies kursiv Eigenschaft und ist auch fett. Beide sind auf unserem Abschnittsobjekt verfügbar. Der erste ist Abschnitt Punkt ist fett, und dann Abschnittpunkt kursiv. Dies bedeutet, wenn dies wahr ist, wird unsere fett Klasse gelten und auch für Kursiv. Bevor wir das einschließen, sagen wir dies und probieren Sie es im Browser aus. Lassen Sie uns den Text ändern, fett werden, und das funktioniert auch. Werde kursiv und dadurch wird die Klasse ein- und ausgeschaltet. Wir können auch sehen, wenn wir zu verschiedenen Texteingaben gehen, dass alle diese Abschnitte auch völlig unabhängig sind. 119. Neue Abschnitte hinzufügen: Obwohl wir dem Benutzer einige Musterkarten bearbeiten geliefert haben, was all diese hier verwendet wird. Wir wollen sie auch flexibler machen, indem sie ihnen erlauben, auch Abschnitte hinzuzufügen und zu entfernen, beginnend mit dem Abschnitt „In neuen Text hinzufügen“ , der gerade hier ist. Wir werden es dem Benutzer erlauben, auf eine Schaltfläche zu klicken und neue Abschnitte direkt unten hinzuzufügen. Aber das brauchen wir zuerst einen Button, auf den der Benutzer klicken kann. Ich werde das in der Karten-Bearbeitung platzieren. Direkt über dieser V for-Schleife, in einem neuen div mit der Klasse des add section wrapper platziert wird. Basierend auf einer Schaltfläche und Auswirkungen des neuen Textabschnitts hinzufügen. Wir wollen nicht, dass der Benutzer verrückt wird und viele verschiedene Textabschnitte hinzufügt , die nicht auf diese Seite passen. Was wir also tun werden, ist, den Benutzer zu beschränken, nur in vier Abschnitten hinzuzufügen. Innerhalb der Funktion kümmern wir uns auch darum, dies auf vier Abschnitte zu beschränken. Aber am Front-End innerhalb unserer Vorlage, werden wir diese Schaltfläche nur zeigen, wenn die Anzahl der Abschnitte kleiner als 4 ist. Wir haben bereits Zugriff auf unsere ausgewählten Seite Requisiten, die diese Informationen haben, greifen Sie die ganze Seite in die Abschnitte und wir können überprüfen, ob die Länge weniger als 4 ist. Wenn dies der Fall ist, werden wir lernen, dass es diese Schaltfläche angezeigt wird. Wir haben diese Cluster hier, ich werde das packen und zum „Style Section“ gehen, der auch umfassend sein kann. Bevor wir dies tun, lassen Sie uns den Browser aktualisieren und sehen, wo diese Schaltfläche platziert wird. Das lässt uns jetzt mit einem Problem. Wir sehen den Fehler von kann Eigenschaft Länge von undefined nicht lesen. Wenn wir einen Schritt zurück gehen und darüber nachdenken, haben einige unserer Seiten überhaupt keine Abschnitte, wie zum Beispiel einige der Rückseite der Karten und einige der linken Innenseiten haben keine Textabschnitte zum Anzeigen. Hier versuchen wir, auf die Längeneigenschaft von etwas zuzugreifen, das nicht existiert. Um damit umzugehen, können wir ein Fragezeichen direkt nach Abschnitten hinzufügen und dies ist, was optionale Verkettung genannt wird. Das ist alles JavaScript und nichts mit VueJS zu tun. Diese optionale Verkettung ist im Grunde eine Art zu sagen , dass diese Abschnitte manchmal da sein können und manchmal nicht. Wir sind uns dessen völlig bewusst, also werfen Sie keinen Fehler. Wenn wir diese speichern und jetzt den Browser aktualisieren, sehen wir keine Probleme sehen, auch wenn wir keine Abschnitte wie diese Rückseite der Seite haben. Mit dieser Adresse können wir nun zu unserem Stilbereich zurückkehren und wir werden diesen „Neuen Textbereich hinzufügen“ auf der rechten Seite platzieren . Dies nutzt die Flexbox und drückt dann mit „Content Flex End ausrichten“ nach rechts. Sehen Sie sofort, dies wird nach rechts von unserem Abschnitt geschoben. Dies benötigt auch einen gewissen Spielraum auf der Unterseite. Der Raum ist aus dem Inhalt blasen. Der Content-Schlag ist derzeit das Thema und wir haben dafür keine Verwendung mehr. Wir können zu den Texteingaben gehen und diese auch aus unserer Vorlage entfernen. Dieser Button und auch die freien Links über den Vortrag würden auch von einem Hover-Zustand profitieren. Wenn der Benutzer den Mauszeiger darüber bewegt, können Sie die Farbe ändern , damit der Benutzer weiß, dass dies anklickbar ist. Da wir dies auf verschiedene Abschnitte anwenden möchten, werde ich dies in die [unhörbare] Ansicht stellen. Da dieser Stilbereich nicht umfaßt ist, blasen Sie einfach die Taste. Hover Status und auch das gleiche für alle Listenelemente. Nur eine Eigenschaft dafür definiert die Farbeigenschaft. Dieser RGB-Wert von 108108241. Ihr Hover-Status funktioniert jetzt, da wir jetzt mit der Funktionalität fortfahren können , um einen neuen Abschnitt hinzuzufügen. Danach werden wir zu dem gehen, was wir aktuelle Karte verwenden und eine Funktion erstellen, die unsere ausgewählte Karte aktualisieren wird. Erstellen Sie unten eine neue Funktion namens „Abschnitt hinzufügen“. Denken Sie daran, bevor wir gesagt haben, dass wir die Anzahl der Abschnitte auf vorher beschränken werden. Aber wir können uns auch ganz oben auf unserer Funktion darum kümmern. Wir können überprüfen, ob die ausgewählte Seite, der Wert, die Abschnitte, die Länge größer oder gleich 4 ist. Wenn dies wahr ist, wird dann aus dieser Funktion zurückkehren, ohne die Codezeilen auszuführen, die wir im Begriff sind zu schreiben. Was wir jetzt tun werden, ist im Grunde ein neues Objekt zu erstellen und dann schiebt es auf unsere ausgewählte Karte, um die gleiche Struktur wie alle anderen Karten zu behalten, Kopf über den Datenpunkt js und Kopie eines dieser Abschnittobjekte. Aber zu allen Funktionen speichert auf einer Konstante namens Neuer Abschnitt. Dies entspricht Objekten. Um den Benutzer zu auffordern, werden wir die Benutzereingabe so einstellen, dass „Geben Sie Ihren Text hier ein“. Wir können eine Standardhöhe, eine Standardfarbe, Schriftfamilie und alle anderen Optionen, die wir als Standardwert behalten können, an Ort und Stelle halten. Sie können diese auch ändern, wenn Sie es vorziehen. Dann müssen wir jetzt unsere vollen Karten auswählen, auf die ausgewählte Seite gehen und dann jeden neuen Abschnitt hinzufügen. Dies ist sehr ähnlich zu dem, was wir tun, wenn wir die Karte gerade hier aktualisiert haben. Blasen Sie einfach unseren neuen Abschnitt, schneiden Sie die ausgewählte Karte, den Wert in die Seiten und wir können die Indexnummer mit unserer get page index Funktion zugreifen. Rufen Sie diese Funktion in die Abschnitte auf. Dann werden wir ein neues Element in dieses Array schieben. Was wir drängen wollen, ist dieser neue Abschnitt. Geben Sie diese Funktion an der Unterseite und dann zurück zu unserem Code bearbeiten, wo wir diese Datei importieren und auch auf unsere Funktion zugreifen wird verwendet, um Karte zu laufen. Dies ist aus unserem zusammensetzbaren Ordner. Dann interviewt aktuelle Karte. Als nächstes benötigen wir eine Setup-Funktion, um auf diese Funktion innerhalb einer Konstante zuzugreifen. Die Funktion war im Abschnitt. Dies ist von Verwendung aktuelle Karte und schließlich hinzufügen Abschnitt kann von unserem Setup zurückgegeben werden. [ unhörbar] Alle Klicks können diese Funktion aufrufen, die unsere Schaltfläche ist, ich klicke, die wir unsere Funktion zum Hinzufügen von Abschnitten nennen. Probieren wir das aus, erfrischen Sie sich. Diese spezielle Seite hat bereits drei Abschnitte. Wir versuchen, noch einen hinzuzufügen. Das sind alle vier Abschnitte und unsere Schaltfläche verschwindet jetzt. Versuchen wir es mit der Front. Haben Sie einen Abschnitt, 234 und das alles funktioniert jetzt. Die kommenden Videos werden wir ein ähnliches Muster über in der Verwendung aktuelle Karten folgen. Wir werden eine Reihe von Funktionen erstellen, um unsere ausgewählte Karte zu aktualisieren und dann diese Funktion aus unseren speziellen Komponenten aufrufen. Der nächste wird sein, einen unserer Abschnitte zu entfernen. 120. Abschnitte entfernen: Im letzten Video richten wir diese Schaltfläche ein, um einer unserer Seiten einen neuen Textbereich hinzuzufügen, und in diesem kommenden Video werden wir eine Schaltfläche einrichten, um einen der Abschnitte zu entfernen. Das Entfernen eines Abschnitts ist ein wenig einfacher als das Hinzufügen da wenn wir einen Blick auf unsere Daten werfen, innerhalb einer unserer Seiten, diese Abschnitte innerhalb eines Arrays platziert werden. Diese spezielle hat nur einen einzigen Abschnitt des Textes, aber wir könnten bis zu vier Abschnitte innerhalb von hier haben. Um sie zu entfernen, müssen wir nur die Indexnummer des Abschnitts kennen , den wir entfernen möchten. Dies werden wir eine Funktion in UseCurrentCard erstellen. Gehen wir also nach unten und erstellen Sie unsere Funktion namens RemoveSection. Wie wir gerade erwähnt haben, muss die RemoveSection auch den SectionIndex übernehmen , wenn wir diese Funktion aufrufen. Genau wie oben, wenn wir einen neuen Abschnitt hinzugefügt haben, müssen wir auch die ausgewählte Karte greifen, die aktuelle Seite gehen und dann in das Abschnittsfeld gehen. Also werden wir das hier überlegen. Aber dieses Mal, anstatt ein neues Element in das Array zu schieben, möchten wir die JavaScript-Spleißmethode verwenden. Mit Spleiß müssen wir zwei Werte übergeben. Die erste wird die Position innerhalb des Arrays des Elements sein , das wir entfernen möchten, und dies wird aus dem SectionIndex, getrennt durch ein Komma, die Anzahl der Elemente, die wir entfernen möchten. Wir wollen nur den einzelnen Abschnitt entfernen. Ok. Dann geben Sie diese Funktion zurück. Diese Funktion wird von der Texteingabe-Komponente aufgerufen werden. Unser Composable wurde bereits importiert, also müssen wir nur unsere Funktion importieren oder extrahieren, die RemoveSection ist. Außerdem ist die Rückgabe so, dass wir dies innerhalb unserer Vorlage verwenden können. RemoveSection, wie wir gerade gesehen haben, erfordert den SectionIndex, wenn wir diese Funktion aufrufen. Diese Komponente ist bereits in Requisiten verfügbar. So können wir jetzt ganz oben auf unserer Vorlage gehen und direkt über dem Textbereich einen neuen Abschnitt erstellen, der unsere Schaltfläche umschließen wird, um den Abschnitt zu entfernen. Platzieren Sie zum Styling in der Klasse, text-input-header. Dann werden wir hier drinnen in einen Knopf setzen. Neben dieser Schaltfläche „Entfernen“ werden wir später auch einige der anderen Schaltflächen hinzufügen. Aber jetzt brauchen wir nur die einzelne Taste mit einem x, die auf einen Klick hören wird. Dann lösen Sie unsere Funktion aus. Übergeben Sie den AbschnittIndex, der unsere Requisite ist. Gehen Sie zum Browser und testen Sie dies aus. Klicken Sie auf das X. Dies ist jetzt entfernt. Gehen wir zu einer anderen Karte und entfernen Sie die mittlere. Da alles reaktiv ist, wird das Entfernen dieser auch die Vorschau aktualisiert. Auch als Randnotiz, bevor wir dieses Video einpacken, sehen wir, dass wir gerade von der View-Bibliothek angeschrien werden, weil wir eine Watch-Funktion verwenden und das ist nur wegen der Art, wie wir diese strukturiert haben Wächter. Wenn wir nach unten gehen, erwartet dieser Watcher eine Callback-Funktion als zweiten Wert. Um diese zu entfernen, müssen wir diese Funktion direkt entfernen. Erstellen Sie unten eine neue UpdateCard-Funktion. Gib das hier rein. Dann können wir dieses Update einfach als Rückruf aufrufen. Gehen Sie in den Browser. Öffnen Sie die Entwicklertools in die Konsole, und dies wird jetzt unsere Fehlermeldung loswerden. 121. Die Reihenfolge der Abschnitte neu anordnen: Wenn wir mehrere Textabschnitte haben, genau wie wir hier sehen, auf der rechten Seite, kann es nützlich sein, auch in eine Auf- und Abwärts-Taste zu platzieren , um die Reihenfolge der Abschnitte neu anzuordnen. Um dies zu tun, werden wir zu den Texteingaben gehen und dann ganz oben brauchen. Im letzten Video haben wir diesen Abschnitt erstellt. Das war für unseren Header. Sie dann direkt über dieser Schaltfläche ErstellenSie dann direkt über dieser Schaltflächeeinen neuen div-Abschnitt , der ein Wrapper für beide dieser Auf- und Abwärtstasten sein wird. Der erste, wir werden jetzt für einen Klick auflisten, der eine Funktion auslöst, die wir noch nicht erstellt haben, aber dies wird UpdateSectionOrder genannt. Diese Funktion wird in zwei Dinge nehmen. Der erste wird der SectionIndex sein, der von Requisiten stammt, und die Funktion, die wir benötigen, damit er weiß, welchen Abschnitt wir verschieben möchten. Der zweite Wert ist die Richtung, die wir diesen Abschnitt verschieben möchten. Also, wenn wir darüber nachdenken, ist dies ein Array. Dies wird also Indexposition 0 sein, dies wird eins sein, und das wird zwei sein. Um also einen dieser Abschnitte nach oben zu bewegen, müssen wir einen negativen übergeben, um uns in das Array zu schieben. Innerhalb unserer Schaltfläche werden wir in einem Symbol innerhalb des Bildelements platzieren. Die Quelle ist das at Symbol in die Assets, die Symbole, und wir haben ein Symbol namens arrow-up.svg, der Alt-Text von Pfeil nach oben, dann duplizieren Sie diese Schaltfläche für die nächste und platzieren Sie diese kurz danach. Dies wird die gleiche Funktion aufrufen, aber dieses Mal werden wir eine positive haben, den Pfeil nach unten und das gleiche für den Alt-Text. Ok. Es gibt unsere zwei Knöpfe, aber das braucht auch etwas Styling. In diesem Abschnitt werden alle Schaltflächen als klassische Texteingabe-Header umbrochen. Ich werde das packen und es innen verschachteln. Wir haben unser div und auch diesen Button. Wir können die Flexbox und auch den Abstand zwischen Eigenschaft verwenden , um dies auf der Seite auszurichten. Nach unten in den Stilbereich, habe ich unsere Klasse gemacht. Zunächst wird der Anzeigetyp von Flex. Dies gibt uns die Standard-Flexrichtung der Zeile, so dass diese auf der Seite platziert wird. Nur nach Inhalt fügen wir den Abstand dazwischen und dann etwas Polsterung auf der Unterseite hinzu. Reduzieren Sie als Nächstes die Größe der Bilder, indem Sie denselben Wrapper und dann die Bildelemente ausrichten . Breite von 15 Pixel und dies reduziert die Größe unserer Symbole. Einige Polsterung rechts von fünf Pixeln. Spielen Sie einfach etwas Platz zwischen jedem dieser Symbole. Ok. Jetzt müssen wir diese Funktion in UseCurrentCard einrichten. Unten unten, Funktion, rufen Sie diese UpdateSectionOrder auf. Dies war auch hinter dem SectionIndex als erster Wert, und der zweite war die Richtung, die entweder eine positive oder eine negative war. Es ist positiv oder negativ eine Zahl, die wir verwenden, um die Abschnitte Indexposition zu aktualisieren. Der erste Schritt besteht darin, ein Array zu erstellen , das alle Abschnitte für diese Seite enthält. Genau wie oben können wir mit diesem Teil des Codes auf unsere Abschnitte zugreifen, kopieren Sie dies. Kurz darunter, bevor wir diesen Schalter tatsächlich durchführen, müssen wir auch überprüfen, ob dieser Schalter tatsächlich möglich ist. Damit meinen wir, wenn wir das ganz oben auf hier aktualisieren und wir auf oben klicken, hat dies nirgends zu gehen. Das gleiche für die untere auch, wenn wir auf unten klicken, wir haben keinen Abschnitt darunter, um es zu ersetzen. Also, um sich davor zu schützen, werden wir in einer if-Anweisung platzieren, fügen Sie in unsere Abschnitte ein. Dann im Inneren, wenn wir unseren SectionIndex plus die Richtung übergeben, dann werden wir überprüfen, ob dies gleich undefined ist. Ok. Nur um zu klären, was wir hier tun, greifen wir alle unsere Abschnitte auf dieser Seite. Wir wollen davor schützen, dass dies entweder der erste oder der letzte Abschnitt ist, in dem das, was wir tun, ist, den aktuellen SectionIndex zu erfassen. Also, wenn dies der erste war, wird es Null positioniert. Wenn der Benutzer auf die Schaltfläche nach oben geklickt hat, ist dies Null und dann ein negativer. Wenn dies der Fall wäre, würde dies undefiniert gleich sein, also wäre dies dann wahr. Wenn SectionIndex jedoch unser allerletzter Textbereich war, wird es in diesem Fall Indexposition 2 sein. Wenn die Richtung eine positive wäre, wäre dies dann die Indexnummer 3, die nicht verfügbar ist, daher würden wir undefiniert zurückgeben. Wenn auch nur eines davon der Fall ist, möchten wir es von dieser Funktion zurückgeben, ohne unsere Abschnitte zu aktualisieren. Wenn nicht, wird die Funktion weiterhin ausgeführt, und wenn wir diese Stufe erreichen, können wir jetzt alle Positionen wechseln. Dies ist wirklich nur eine Frage der Umstellung der Indexpositionen von zwei Array-Elementen. Diese beiden Array-Elemente sind der Steuerabschnitt, auf den wir geklickt haben, und auch der Steuerabschnitt, der sich an der Stelle befindet, an der wir ihn verschieben möchten. So sieht es aus. Wir müssen ein Array erstellen, das einem anderen Array entspricht. Wir werden unseren Währungskurs so einstellen, dass er einem anderen entspricht. Diese erste, die das aktuelle Array ist, wird zwei Dinge aufnehmen. Zuerst das Array-Element, das wir verschieben möchten, das wir mit Array zugreifen können, dann übergeben Sie unseren SectionIndex, und dann durch ein Komma getrennt, wählen Sie das Array-Element, das wir ersetzen möchten. Also werden wir unser Array greifen, aber dieses Mal werden wir den SectionIndex plus die Richtung übergeben. Dann machen wir das Gegenteil im zweiten Array, also wechseln wir um die Positionen. Die erste Erkenntnis ist unser Array, übergeben Sie den SectionIndex plus die Richtung und ersetzt dann durch Array SectionIndex, und geben Sie dies von unserer Funktion zurück und importieren Sie es dann in unsere Texteingabe. Wir greifen bereits auf unsere UseCurrentCard-Funktion zu, übergeben aber nur unsere UpdateSectionOrder. Dieser Name entspricht der Funktion, die ganz oben platziert werden. Wenn wir also auf einen dieser Schaltflächen klicken, sollten sie nun unsere Indexnummern aktualisieren. Lassen Sie uns dies in einem unserer Abschnitte ausprobieren. Jetzt können wir unten auf den oberen Abschnitt klicken, es bewegt sich jetzt in die Mitte. Klicken Sie erneut auf den oberen Abschnitt nach unten, und diesen werde ich die Indexnummern austauschen. Schauen Sie auf den unteren Abschnitt und das funktioniert, und testen Sie auch gegen unsere Wachen für den unteren Abschnitt. Wenn wir auf unten klicken, passiert nichts. Wenn wir auf Schleife im oberen Bereich klicken, funktioniert das auch gut. Dadurch wird auch der Bearbeitungsabschnitt und der Vorschauabschnitt aktualisiert , da alles reaktiv ist, aber wir haben ein kleines Problem. Wenn wir zu einer unserer Seiten gehen, die keine neuen Abschnitte hat, fügen wir hier vier neue Abschnitte hinzu. Dies kann Nummer 1, Nummer 2, Nummer 3 und Nummer 4 sein. Lassen Sie uns versuchen, dies zu aktualisieren. Wenn wir auf die Schaltfläche nach oben und unten klicken, sehen wir nichts, was auf dieser Bearbeitungsseite aktualisiert wird. Nun, das geht auf etwas zurück, über das wir früher gelernt haben, das Schlüssel zu unserer v-for-Schleife hinzufügt. Wenn eine Liste von Elementen wie dieser aktualisiert wird, benötigt v einen eindeutigen Schlüssel, um effizient aktualisieren zu können. Wir haben noch keine ID in unseren neuen Abschnitten platziert. Wir können sehen, dass dies auf die Karte bearbeiten und in unsere v-for-Schleife gehen wird. Jeder dieser Schlüssel ist auf eine Abschnitt-ID angewiesen. Um eine ID dafür zu generieren, gehen Sie zu unserer UseCurrentCard und wir können in einem ID-Feld innerhalb unseres neuen Abschnitts platzieren. Wie gehen wir über die Generierung einer eindeutigen ID? Wenn wir eine Datenbank verwenden, wäre dies relativ einfach. Die Datenbank würde eine für uns generieren. Wir könnten dann den gespeicherten Artikel zurückbekommen und diesen auch in unserem neuen Abschnitt speichern. Für unseren Fall müssen wir eine innerhalb der App generieren. Dazu werden wir ein neues Paket importieren, also öffnen Sie das Terminal. Host auf diesem Server mit Befehl oder Control C, und dann werden wir ein neues Paket mit npm installieren, Ich habe installiert, und der Paketname ist UUID. Dieses Paket wird eine eindeutige ID für jedes Element generieren. Es ist wirklich einfach zu bedienen. Wenn wir an den Anfang dieser Datei gehen, dann werden wir dieses Modul importieren. Wir werden Version 4 als uuidv4 aus unserem Paket importieren, das UUID ist. Jetzt haben wir unsere Version 4 importiert und wir werden in der Lage sein, mit dieser Variablen nur hier darauf zuzugreifen. Nun, wenn wir in den anderen Abschnitt gehen und dies gleich unserem Namen setzen, der uuidv4 ist, und dann diese Funktion aufrufen, so dass wir eine neue ID generieren. Probieren wir das aus. Jetzt müssen wir den Server mit npm run serve neu starten, den Aufschlag öffnen und vier neue Abschnitte hinzufügen; Nummer 1, Nummer 2, Nummer 3, Nummer 4. Lassen Sie uns nach oben klicken, das wird nach oben gehen. Versuchen wir es nochmal. Dies funktioniert jetzt alles korrekt. 122. Die Abschnittshöhe ändern: Als wir das Menü erstellt haben, wenn wir den Mauszeiger über diesen Textbereich bewegen, haben wir auch ein paar Schaltflächen hinzugefügt, um die Höhe des Abschnitts zu erhöhen oder zu verringern. Wir können dies jetzt verwenden und die Funktion erstellen, um diese Änderung vorzunehmen. Dadurch wird jeder einzelne dieser Textbereiche noch kleiner oder größer. Dies [unhörbar] zu unserem Menü, das innerhalb der Texteingabe ist, und dann werde ich eine Suche nach der Menümitte zu tun. Dies ist der Abschnitt, den wir brauchen, nur hier, wir haben unsere Auf- und Abwärtstasten. Die Schaltfläche, die für einen Klick [unhörbar] muss, die eine Funktion auslösen wird, wenn Sie noch nicht als Änderungshöhe erstellt haben. Diese Funktion wird die Anzahl der Pixel nehmen, die wir wollen, um die Höhe zu erhöhen oder zu verringern. Ich werde es bei 100 platzieren, obwohl diese Schaltfläche die Höhe dieses Abschnitts erhöht. Darüber hinaus ist der Platz in unserem zweiten Knopf, aber dieses Mal werden wir die Höhe um 100 bis zum Setup verringern. Lassen Sie uns diese Funktion erstellen. Das ist ganz unten. Dies war die Änderungshöhe, die den Wert akzeptiert und dies wird entweder ein positiver oder ein negativer 100 Pixel sein. Das erste, was wir tun wollen, ist, die aktuelle Höhe des Abschnitts zu speichern oder wir können diese aus unserem aktuellen Abschnitt extrahieren. Dies ist [unhörbar], daher müssen wir auch auf den Wert und dann auf die height Eigenschaft zugreifen. Kurz bevor wir diesen Abschnitt der High City Sektion aktualisieren, gehen wir in einer Wache vorbei. Wir wollen davor schützen, dass der Abschnitt entweder zu klein oder zu groß ist. Danach prüfen wir, ob der Abschnitt entweder auf eine Höhe von Null reduziert oder über 600 Pixel erhöht wird, was die Höhe dieser Karte ist. Um dies zu tun, setzen Sie in die if-Anweisungen, wir werden überprüfen, ob die aktuelle Höhe, die wir gerade oben haben, derzeit gleich 100 Pixel ist und der Wert gleich negativ 100 ist. Dies überprüft also, ob die aktuelle Höhe des Textbereichs 100 Pixel beträgt und ob der Benutzer auf den Verkleinerungs-Button geklickt hat. Dies führt dazu, dass eine aktuelle Höhe Null ist. Wir wollen das natürlich nicht, also müssen wir gegen dieses und auch das Gegenteil überprüfen, wenn wir auf der maximalen Höhe sind. Also, wenn die aktuelle Höhe gleich 600 Pixel ist, und auch wenn der Wert, der an diese Funktion übergeben wird, gleich 100 ist, wenn es der Fall ist, werden wir ändern Dysfunktion, ohne Code auszuführen. Dies hat einen Fehler ausgelöst und ich denke, wir müssen nur den ganzen Abschnitt in die Klammern einwickeln. Aber wenn wir zu dieser Stufe unten kommen, bedeutet dies, dass wir jetzt die Höhe aktualisieren können. Um dies zu aktualisieren, werden wir diesen aktuellen Abschnitt aktualisieren, wir müssen auf den Wert zugreifen, und dann die height Eigenschaft, und wir werden dies gleich unserer aktuellen Höhe plus den Wert setzen , der [unhörbar] 100 Pixel höher oder 100 Pixel niedriger. Das ist eigentlich alles, was wir für diese Funktion tun müssen, denn wenn wir den aktuellen Abschnitt gerade hier aktualisieren, haben wir bereits einen Beobachter darauf platziert , der dann unser Composable aktualisiert. Das bedeutet, dass wir das nur von allen Funktionen zurückgeben müssen, dann können wir das testen. Für die erste, erhöhen Sie die Größe, lassen Sie es uns größer, und wir können die Größe auch verringern. Wenn wir weiter klicken, können wir dies nicht weniger als 100 Pixel reduzieren und auch wenn wir dies erhöhen, wird es auf eine maximale Größe zu. 123. Zusätzliches Styling: Dieses Video wird sich darauf konzentrieren, einige der CSS-Berührungen zu beenden , die wir zu unserem Projekt hinzufügen müssen, beginnend mit der Schriftart über in der app.vue. Derzeit haben wir diese Schriftart, die gerade hier ist, und Sie können diese, wenn Sie es bevorzugen, oder eine andere Schriftfamilie verwenden . Mit dem Startprojekt, wenn wir in die index.html gehen, innerhalb des Header-Abschnitts, haben wir diesen Link zu zwei verschiedenen Schriftfamilien. Dieses Merriweather ist derjenige, den ich innerhalb der app.vue platzieren werde und wir haben dies bereits früh innerhalb des Headers übergeblasen. Wir können dies sehen, wenn wir in den App-Header gehen. Dies ist die Schriftart, die wir für diesen Abschnitt festgelegt haben. Aber gehen wir zurück zur app.view. Setzen wir uns in die Merriweather Schriftart, mit einem Serif-Fallback, nur für den Fall, dass es irgendwelche Probleme beim Laden dieser Schriftart gibt. Außerdem fügen wir diese Schriftart der Eingabe und auch dem Textbereich hinzu. Kopieren Sie das einfach. Der Grund, warum wir dies tun, ist, dass die Eingaben standardmäßig die Schriftarten nicht automatisch erben. Also müssen wir sie auch so einstellen. Lasst uns das retten. Diese neue Schriftart ist nun wirksam. Innerhalb dieser Ansicht erstellen, die Sie gerade hier sehen können, haben wir auch einige Probleme zu lösen. Wir haben diese riesigen Seitentasten, die oben ausgerichtet werden müssen, und auch die Größe zu verkleinern. Wir haben auch einige Abstände zwischen jedem dieser Textabschnitte und dies führt auch dazu, dass die Abschnitte von der Seite verschoben werden, über die Textausgabe-Komponente. Wir beschäftigen uns zunächst mit diesen Textabschnitten, indem wir alle Standardränder entfernen und auch die Box-Größe nutzen. Der Startabschnitt ist alle in das p -Element eingewickelt. Der Standardrand wird auf Null zurückgesetzt. Speichern Sie das und überprüfen Sie, ob es funktioniert. Jeder dieser p Abschnitte ist ebenfalls von der Grenze umgeben. Denken Sie daran, wenn wir einen Rahmen zu einem HTML-Element hinzufügen, wird es auch zur Gesamtgröße hinzufügen. Um dies zu verhindern, können wir die Box-Größenbestimmung auf Border-Box setzen. Das nächste, was zu tun ist, nehmen Sie aus diesen vier Tasten, um die Seiten zu wechseln. Dies hat eine eigene Komponente, die die switchPage.vue ist. Wir werden eine ziemlich Standard-ungeordnete Liste haben. Wir können die CSS-Flexbox innerhalb des Style-Abschnitts verwenden. Es gibt unsere Links auf der Seite platziert, weil die Standard-Flexrichtung Zeile ist und ich denke, wir müssen diese Links nur außerhalb des Kartenabschnitts verschieben. Wir können sehen, diese haben diese graue Hintergrundfarbe. Aber wir gehen nur zum Abschnitt Erstellen, der in den Vues ist. Ich denke, wir werden einfach diese Switch-Seite Komponenten heben, um außerhalb des Wrapper zu sein. Dieser wird knapp über allen Kartenabschnitten platziert. Wenn ich zum Stil innerhalb der Switch-Seitenkomponente gehe, weiter mit der ungeordneten Liste zu arbeiten, indem ich oben und unten etwas Rand von 1,6 Gramm und dann links und rechts hinzufüge. Das nächste, was wir tun müssen, ist, die Größe jedes dieser Symbole zu reduzieren und den Text auch an der Mitte dieses Symbols auszurichten. Jeder dieser Links hatte die Klasse der Seite auswählen, und wir können diese Klasse verwenden, um diese Symbolgröße zu reduzieren. Zunächst verwenden die Achsen das Flexbox und legen dann die vertikale Ausrichtung mit Linienelementen in die Mitte fest. Es gibt unsere vertikale Ausrichtung, und als nächstes ein bisschen Rand auf der rechten Seite von 10 Pixeln. Dies wird uns einige Abstände auf der rechten Seite von jedem dieser Links geben. Als Nächstes das Bild. Die maximale Breite dieses Symbols dieses Bildes wird 30 Pixel betragen. Es sollte die Größe unserer Symbole nach unten reduzieren. Wenn wir links einen Rand hinzufügen, fügen wir ein wenig Abstand zwischen dem Bild und auch dem Text hinzu. Gut. Dieses Projekt sieht jetzt ein wenig besser aus, und Sie sind auch frei, voran zu gehen und alle Stile zu ändern, die Sie nur einige Basisstile möchten , um das allgemeine Aussehen und Gefühl zu verbessern. Kurz bevor wir diesen Abschnitt abschließen, wir uns als nächstes mit der Kompositions-API beschäftigen und injizieren. 124. Provide und Inject mit Komposition: Bereitstellen und injizieren ist etwas, das wir bereits angesehen haben, das eine Datenquelle in einer Top-Level-Komponente zu haben und sie dann direkt in alle untergeordneten Komponenten zu injizieren , ohne Requisiten an jede Komponentenebene weiterzugeben zu müssen. Wir können dies auch mit dem Kompositionswerkzeug verwenden. Die Setup-Funktion kann entweder bereitstellen oder injizieren akzeptieren. Eines der Probleme früher war, dass die bereitgestellten Daten nicht reaktiv waren. Bei einer Änderung der Daten innerhalb dieses Anbieters wurde jede der untergeordneten Komponenten, die sich darauf stützten, nicht aktualisiert. Aber jetzt wissen wir über View free, die Kompositions-API und auch Reaktivität, wir können jetzt nutzen, um dieses Problem zu beheben. Über zu den Update-Ansichtskomponenten und ich werde Ihnen zeigen, wie wir dies mit der Komposition verwenden können. Denken Sie daran, dass ein Anbieter in jeder Komponente platziert werden kann, nicht nur in dieser Haupt-Update-Ansicht. Zuerst benötigen wir eine Setup-Funktion mit einigen Daten. Platzieren Sie dies innerhalb unseres Skript-Abschnitts, und erstellen Sie dann für unsere Demonstrationszwecke ein Benutzerobjekt mit der Namenseigenschaft und auch der Beruf. Da dies unsere Top-Level-Komponente ist, werden wir in den Provider innerhalb von hier platzieren. Um dies zu tun, müssen wir dies aus der View-Bibliothek importieren. Dies wird aus der View-Bibliothek zur Verfügung gestellt. Dann bis zur Setup-Funktion können wir in unserem Provider platzieren , der in zwei Dinge nehmen wird. Der erste ist der Name dieser Daten, und dies ist wie ein Variablenname. nächste ist der Benutzer. Dann durch Komma getrennt, werden wir die tatsächlichen Daten übergeben, die Sie senden möchten. In unserem Fall bezieht sich dies auf unsere Nutzerobjekte. Innerhalb einer dieser untergeordneten Komponenten, wenn wir in den Benutzer injizieren, dies die Daten, die er erhalten wird. Um diese Datei zu speichern, gehe ich zur Textausgabe über. Wir haben bereits eine Setup-Funktion und wir haben auch einen Import gerade hier, so können wir auch importieren injizieren in hier, und dann können wir dieses Benutzerobjekt bis zum Setup injizieren, eine Konstante erstellen. Um dies zu speichern, Benutzerdaten, Zugriff inject. Dann, wenn es die Daten übergibt, die Sie injizieren möchten, und in unserem Fall geben wir diesen Namen dem Benutzer. Übergeben Sie dies als String. Wir können auch einen optionalen zweiten Wert zwei hinzufügen , der ein Standardwert ist. Wie wenn wir diese Slots früh verwenden, wenn wir ein Standard- oder ein Fallback-Stück Daten hinzugefügt haben , werde ich nur eine alternative Zeichenfolge ohne Daten verfügbar. Return ist Benutzerdaten konstant unten unten unten. Wir können überprüfen, dass dies funktioniert, indem wir dies innerhalb unserer Vorlage, über den Browser und neu laden, und es ist unser Objekt an der Spitze jeder unserer Textausgabe-Komponenten. Jetzt war die Reaktivität ein Problem früh, als wir uns die Bereitstellung und Injektion mit der Options-API angesehen haben , mal sehen, wie dies mit der Zusammensetzung verglichen wird. Zurück zu unserer App Dot vue können wir die Daten simulieren, die mit festgelegtem Timeout als NA-Funktion, die wir nach drei Sekunden aufrufen. Was ich innerhalb von hier tun möchte, ist, Objekte zu verwenden, auf die Name-Eigenschaft zuzugreifen und dies auf einen anderen Wert zu setzen. Wir können das mit einer Auffrischung ausprobieren. Geben Sie das drei Sekunden. werden keine Aktualisierungen innerhalb dieser untergeordneten Komponente angezeigt. Auch mit Komposition liefert und injiziert ist standardmäßig nicht reaktiv. Aber wie wir bereits wissen, gibt uns die Komposition Zugang zu reaktiven Wrapper, so dass wir entweder rau oder reaktiv verwenden können. Bei dieser Gelegenheit werde ich für reaktive gehen, innerhalb der App dot vue und ziehen Sie diese. Dies wird jetzt ein Wrapper für unsere Verwendungsobjekte sein. Schneiden Sie den Inhalt des Objekts aus, platzieren Sie ihn reaktiv, fügen Sie ihn in die Klammern ein. Speichern Sie diese immer wieder im Browser, aktualisieren Sie sie. Geben Sie ihm drei Sekunden, und unser Name ist jetzt aktualisiert. Wenn wir mehrere Daten an untergeordnete Komponenten weitergeben müssten, könnten wir auch mehrere Anbieter einrichten, genau wie dieser hier, oder alternativ könnten wir alle unsere Daten in einem großen reaktiven Objekt weitergeben, und dann übergeben Sie dies an den Provider. So funktioniert liefern und injizieren mit der Komposition. Wir brauchen dies für unsere Projekte nicht, also werde ich die Setup-Funktion, die Importe entfernen, wir haben auch das Inject innerhalb der Textausgabe, verschieben Sie die Benutzerdaten, den Import, die Benutzerdaten und dann schließlich unser zurückgegebenes Objekt. Die Anwendungsfälle für Bereitstellung und Inject sind jetzt möglicherweise nicht so häufig, da wir auch die Möglichkeit haben, zusammensetzbare Dateien zu verwenden und sie dann direkt in untergeordnete Komponenten zu importieren. Aber es ist keine Option und eine neuartige Art, unsere Daten weiterzugeben, besonders wenn wir vielleicht eine kleinere App haben, planen wir nicht, unseren Code in kleinere zusammensetzbare Dateien aufzuteilen. Wir haben in diesem Abschnitt ziemlich viel Projektcode durchgedrängt, und unser Projekt ist fast voll funktionsfähig. Im kommenden Abschnitt werden wir entdecken, dass einige weitere coole Funktionen von vue.js Und auch der View-Router bietet. 125. Abschnittseinführung – Navigations-Guards und Lazy Loading: Manchmal möchten wir in unserem Projekt nicht, dass der Benutzer jeden Standort besucht, den wir haben, oder wir möchten manchmal auch einige Prüfungen durchführen, um zu sehen, ob der Benutzer tatsächlich auf einer bestimmten Route erlaubt ist. In diesem kommenden Abschnitt werden wir einen Blick auf die Navigationsschutzeinrichtungen werfen, die mit dem Vue Router zur Verfügung gestellt werden. Wir werden uns auch eine nie wirklich nützliche Technik ansehen, die Lazy Loading genannt wird, die es uns ermöglicht, unsere Anwendung in kleinere Teile aufzuteilen , um die Ladezeit der Seite zu verbessern. 126. Navigations-Guards: Als Teil des View-Router-Pakets, das wir installiert haben, können wir Navigationsschutzvorrichtungen verwenden, wenn wir zwischen unserer Route wechseln. Man kann sich einen Nav Wächter als jemand vorstellen, der an der Tür eines Clubs steht und um einen Ausweis bittet, bevor man reinkommen kann. In Bezug auf Code, diese Identifikation, kann es alles sein, wie wenn der Benutzer eingeloggt ist, wenn er die richtigen Berechtigungen oder sogar Dinge wie nur erlauben einem Benutzer Zugriff auf einen Downloadbereich, wenn er dieses bestimmte Element gekauft hat. Wir können grundsätzlich jeden Code ausführen, den wir entweder vor oder nach einer Änderung der Route mögen. Es gibt verschiedene Wachen zur Verfügung, aber werfen wir einen Blick auf einige der gemeinsamen, beginnend mit, wenn wir eine Wache gegen alle unsere Route anwenden wollen, mit diesem können wir eine globale Wache verwenden, die BeforeEach genannt wird. Wir tun dies zu unserer Routendatei, und das ist innerhalb des Routers und dann der index.js. Unter dem Array unserer Route können wir mit diesen Router-Konstanten auf unseren Router zugreifen. Wir müssen direkt darunter gehen, wir können dann auf diesen Router zugreifen und dann den Wächter anrufen, der beforeEach ist. BeforeEach ist ein globaler Navigationsschutz, so dass er auf alle Routen in unserem Projekt angewendet wird. Wann ist eine Änderung, werden wir eine Callback-Funktion zur Verfügung stellen, und es ist in dieser Funktion, wo wir diese Routenänderung abfangen können und dann läuft es Code. Als ein sehr einfaches Beispiel können wir false innerhalb dieser Funktion zurückgeben und dies wird jede Änderung der Route stoppen auftreten. Wir können unsere App nicht einmal laden. Wir können nicht auf die Home-Schaltfläche klicken und auch diese Kategorie-Links funktionieren auch nicht. Aber es ist von seiner grundlegendsten. Auf diese Weise blockieren wir eine Änderung der Route und da dies nicht sehr spezifisch ist, wird es für alle Routenänderungen gelten. BeforeEach gibt uns auch Zugriff auf die Routendetails, woher Sie gehen und auch die Route, die wir verlassen. Wir werden diese in unsere Funktionen mit zu und von übergeben. Wie es sich anhört, ist der zu-Wert Route, wohin Sie gehen, und der von ist derjenige, den wir verlassen. Mal sehen, wie diese aussehen. Übergeben der An, und dann auch die von Variablen. Rüber zur Konsole. Das sind unsere beiden Objekte. Die erste ist die Route, wohin Sie gehen und dies ist nur die Heimroute. Das macht Sinn. Die zweite ist die von Objekten, und da wir Routen nicht ändern, ist dies immer noch Standardschrägstrich im Vergleich, wenn wir die return-Anweisung entfernen und zwischen seinen über Routen wechseln. Wir gehen von der Homepage zu unserer Kategorie, und wir können diese Kategorie sehen, wenn wir auf Abschnitt klicken, und wir Bündnis von der Heimatroute. Diese Objekte geben uns Zugriff auf Dinge wie den vollständigen Pfad der Route, die Abfragen, den Namen unserer Routen, die Parameter, und diese sind alle vollständig zugänglich von unserer Funktion, und diese Informationen bedeuten, dass wir spezifischer sein können mit welche Routen wir bewachen wollen. Anstatt zum Beispiel alle unsere Routen im Inneren von hier zu beobachten, könnten wir beobachten, ob ein Benutzer eine Admin-Route eingibt. Wir können eine if-Anweisung innerhalb von hier hinzufügen und wir können unsere auf Wert zugreifen und dann unseren Namen auswählen. Dieser Name, wie die Kategorie gerade hier, ist ein Name, den wir der Route innerhalb unseres Arrays direkt oben geben. Wir können auf den Admin zugreifen. Wenn to.name gleich admin ist, und stellen Sie sicher, dass dies viel der Name von oben ist. Wenn dies der Fall ist, werden wir eine Warnung an den Benutzer mit dem Text „Dieser Bereich ist nur für angemeldete Benutzer“ zurückgeben . Schauen wir uns das im Browser an. Wir verwenden keine von Variablen, also können wir dies auch entfernen. Die gesamte Route schien völlig gut zu funktionieren, und gehen wir zu /Admin, und es gibt unsere Warnung. Sobald wir auf „Okay“ klicken, sind wir immer noch auf diese Admin-Route gebracht. Derzeit sind wir nicht wirklich blockiert im Benutzer, wir zeigen nur eine Warnung an. In Wirklichkeit möchten wir vielleicht überprüfen, ob der Benutzer angemeldet ist oder Administratorrechte hat, anstatt nur eine Warnung. Wenn kein Zugriff erlaubt wäre, könnten wir entweder false zurückgeben oder sogar eine Router-Umleitungsmethode wie die Push-Methode zurückgeben , und die Art, dies zu tun, besteht darin, auch auf die relative Variable zuzugreifen, und dann haben wir immer noch Zugriff, um Dinge wie die Push-Methode zu tun, die wir uns zuvor angesehen haben. Das heißt, wenn der Benutzer versucht, auf diese Admin-Route zuzugreifen, könnten wir sie dann auf die Homepage umleiten. Wir sind im Moment auf der Homepage. Aber wenn wir zum Admin gehen, Dies wird uns dann zurück auf die Homepage schieben. Zusammen mit diesem vor jeder Wache, die vor der Routenänderung ausgeführt wird. Wir haben auch AfterEach zu, und dies ist ein Haken, der läuft, sobald die Navigation beendet ist. Da die Navigation bereits stattgefunden hat, kann sie auch keine Änderungen wie Umleitung oder Blockierung der Route vornehmen. Oder stattdessen können wir es vielleicht für Dinge verwenden, wie zum Beispiel die Besuche eines Benutzers auf einer bestimmten Seite zu verfolgen oder sogar einige Seitendetails nach dem Laden zu ändern. Es kann auch bei Bedarf an den Daten von zu und von aufnehmen und beide dieser Wachen gelten als global, da sie für jede Navigationsänderung ausgeführt werden. Wenn wir nicht wollten, dass sie global sind, können wir sie auch direkt in einer einzigen Route platzieren. Ich werde das nur kommentieren und das für eine Referenz belassen. Aber wir können dies auch in einer unserer Komponentenrouten platzieren. heißt, wenn wir zum Beispiel nur diese Admin-Route schützen wollten, könnten wir stattdessen direkt einen Wächter auf dieses Objekt platzieren. Der Wächter dafür wird aufgerufen, bevor geben und dann richten wir eine Methode ein, die jedes Mal ausgeführt wird , wenn wir versuchen, diese Admin-Route eingeben. Genau wie vorher können wir Dinge tun, wie zum Beispiel eine false zurückgeben , um jeden Zugriff auf diese Route zu blockieren. Die Homepage funktioniert, die Kategorie arbeitet, die Kiste arbeitet. Aber wenn wir versuchen, in den Admin zu gehen, können wir sehen, dass die Komponente nicht geladen ist, da wir nicht den Admin-Titel haben. Dies könnte auch die zu- und auch die von-Variablen umfassen, wenn wir Zugriff auf diese Informationen benötigen. Aber realistisch, würden wir wieder etwas tun wie überprüfen, ob der Benutzer eingeloggt ist, bevor wir diese Route tatsächlich laden. Wir haben derzeit keinen Zugriff auf einen Benutzer für dieses Projekt, aber wir können einen für dieses Beispiel simulieren. Direkt über den Routen, die Konstanten sind, die als angemeldet bezeichnet werden, was anfänglich falsch ist. Wir können das dann in unserer Wache benutzen. Anstatt falsch direkt zurückzugeben, werden wir zuerst überprüfen, ob der Benutzer nicht angemeldet ist, bevor diese Route blockiert wird. Denken Sie daran, dass dies derzeit falsch ist. Wenn wir also versuchen, zu aktualisieren, sehen wir keinen Zugriff auf diese Komponenten. Wenn wir dies auf true ändern, haben wir jetzt Zugriff auf unseren Admin. Diese Art von Wache wird auch nur bei einem vollständigen Routenwechsel ausgelöst. heißt, die Änderung der Route muss eine neue Komponente auslösen. Es wird nicht ausgeführt, wenn wir nur eine Änderung der Abfrage oder die Änderung der Parameter in der URL haben. Genau wie früher, als wir diese manuell ändern mussten, fast zwischen diesen Kategorien wechseln mussten. Nun, für dieses Beispiel bleiben wir immer noch auf den Kategoriekomponenten, aber wir ändern nur die Parameter. Für diesen speziellen Fall wird der Wächter nicht ausgeführt, da wir auf den gleichen Komponenten sind. Eine weitere nützliche Sache, die wir mit diesen Wachen tun können, ist, den Code in eigenständige Funktionen zu verschieben Wenn ich also eine Funktion hatte, die überprüft, ob der Benutzer angemeldet ist. Wir könnten dann unseren Code von unserer Wache extrahieren. Es wird die if-Anweisungen aussetzen, dies in unsere Funktion platzieren, und sein Funktionsname kann jetzt als Array schnell vorwärts geschützt sein. Daher möchten wir diese Methode nicht ausführen, sondern einem Array einen alten Funktionsnamen übergeben. Speichern Sie diese und unsere Routen werden funktionieren. Lassen Sie uns versuchen, den Admin zu besuchen. Wir können darauf zugreifen, da unsere Verwendung wahr ist, Änderungen an der falschen, und dieses Mal blockiert es unseren Zugriff. Bei Bedarf können diese Funktionen auch diese beiden und dies aus Daten aufnehmen, wenn wir auf die Routeninformationen zugreifen müssen. Ein wirklich guter Anwendungsfall für diese Funktionen ist, wenn wir mehrere Wachen auf verschiedenen Routen haben, und wir wollen überprüfen, ob der Benutzer bei mehr als einem angemeldet ist. Das bedeutet, anstatt diesen Code innerhalb der Funktion für jede dieser Routen zu duplizieren , könnten wir diese Funktion stattdessen so oft wie nötig wiederverwenden. Die letzte Art von Wächter, die ich Ihnen zeigen möchte, ist in Komponenten Wachen. So wie sie klingen, gehen sie in die einzelnen Komponentendateien ein, wie zum Beispiel unsere Admin-Komponente. Also, bevor wir dies tun, lasst uns dies auskommentieren, auch alle Wächter von dieser Komponente, und dann auch unsere angemeldete Variable. Für diese in Component Guards bleiben wir auch bei der Admin-Komponente. Gehen Sie also zu dieser Seite innerhalb der Ansichten. Schreiben Sie unseren Skript-Abschnitt. Die erste Wache, die wir uns ansehen werden, heißt BeforerouTeleave. Wie es klingt, wird dies diese Funktion ausführen , bevor wir versucht haben, eine bestimmte Route zu verlassen. Dies kann nützlich sein, wenn der Benutzer aufgefordert wird, sich abzumelden, bevor er diese bestimmte Seite verlassen. außerdem sicher, dass alle Änderungen gespeichert wurden, bevor sie verloren gehen. An der Eingabeaufforderung wird der Benutzer, den wir auf das Fenster zugreifen, bestätigen sie, und dies wird eine Bestätigungsnachricht an den Benutzer einrichten. Diese Nachricht wird eine Zeichenfolge sein und ich werde sagen: „Willst du wirklich gehen?“ Sie haben nicht gespeicherte Änderungen. Es muss nur ein Kleinbuchstaben w sein, und dann speichert dies innerhalb einer Konstante namens confirm. Dieses Bestätigungsfeld gibt dem Benutzer die Möglichkeit entweder auf OK zu klicken oder abzubrechen, wodurch diese Konstante entweder wahr oder falsch bleibt. Wenn dies falsch ist, werden wir die Navigation abbrechen, indem wir false zurückgeben. Das scheint zu funktionieren, aktualisieren Sie die Admin-Seite. Wenn wir nun versuchen, auf eine andere Route zu klicken, sehen wir die Bestätigung. Klicken Sie auf „Abbrechen“ und dies wird auf false gesetzt, so dass wir false zurückgeben, und dies führt dazu, dass Sie auf dieser Admin-Seite bleiben. Wenn wir jedoch versuchen, eine Änderung vorzunehmen und auf „Okay“ klicken, bestätigen wir dann, dass dies in Ordnung ist, und dann werden wir mit unserem Routenwechsel fortfahren. Dies hat auch Zugriff auf und von, wenn wir auf die Informationen der Route zugreifen müssen. Wir haben auch Zugang zu zwei weiteren Wächtern, die wir benutzen können; eine, die für den Einstieg in die Route ist, und eine ging für die Aktualisierung. Der erste ist BeforeRouteEnter, und sehen Sie dies werden wir in einem Konsolenprotokoll platzieren. Dieser ist eingeben und ein Komma. Das zweite ist BeforeRouterUpdate, in einem Konsolenprotokoll mit Updates gespeichert wird. Wir können jetzt sehen, wann jede dieser Routen ausgeführt wird. Speichern Sie diese und öffnen Sie die Entwicklertools. Zu unserem Admin. Wir sehen nur diese Eingabemeldung, und selbst wenn Sie weiterhin aktualisieren, wird die Update-Nachricht nicht ausgeführt. Also, was genau wird diese Update-Nachricht auslösen? Nun, dieser läuft, wenn die Route aktualisiert wird, aber die gleiche Komponente wiederverwendet wird. zum Beispiel auf einen Wenn wirzum Beispiel auf einendieser Links oben klicken, wird dies bestätigt. Wenn wir zwischen allen drei dieser Links wechseln, bleiben wir auf der gleichen Kategorie Komponenten, aber nur aktualisieren die Abfrage. Für diesen Anwendungsfall wird dieses BeforeRouteUpdate ausgeführt. Bestätigen Sie dies von [unhörbar] beiden Knöpfschützern und gehen Sie dann zu unserer Kategorieseite. Dies ist innerhalb der Ansichten und fügen Sie dies in unseren Export. Aktualisieren. Wir sehen betritt, da wir die katalytische Komponente eingegeben haben. Wechseln Sie zwischen diesen drei Seiten, und Sie sehen, dass das Update jetzt aufgerufen wird. Komponentenschutz können auch innerhalb der Setup-Funktion ausgeführt werden , aber mit einer kleinen Einstellung. zuerst innerhalb der Kategorie Entfernen Siezuerst innerhalb der Kategoriediese beiden Wachen und kehren Sie dann zu unseren Admin-Komponenten zurück. Durch die Verwendung von Komposition müssen wir sie zuerst aus dem View-Router-Paket importieren. Mit Komposition haben wir Zugriff auf BeforeRouteleave und auch BeforeRouteUpdate. Der einzige Unterschied besteht darin, dass wir das on-Präfix verwenden. Also wird dieser auf BeforeRouteleave sein. Dies ist vom View-Router, üblicherweise Abschnitt L, so dass es nicht ausgeführt wird, in der Setup-Funktion platziert. Zugriff auf BeforeRouteleave, das dann eine Funktion ausführen wird. Ich werde nur das gleiche Beispiel von oben verwenden. Fügen Sie dies ein und entfernen Sie dies aus. Speichern Sie diese Datei und gehen Sie zu unserem Admin. Versuchen Sie zu gehen, zu stornieren und wir bleiben auf der gleichen Seite. Klicken Sie auf „OK“, und dann ist die Navigation abgeschlossen. Diese Wachen sind wirklich nützlich für so viele Gründe wie Schutz unberechtigter Zugriff, Umleitung, und auch schreiben durch nur in einer einfachen Nachricht an den Benutzer angezeigt. 127. Lazy Loading-Routen: Ein weiteres Feature, das Vue Router bietet, ist Lazy Loading. Dies geht zurück auf das JavaScript-Paket, das wir bereits besprochen haben. Unsere App ist in kleinere Komponenten und Dateien unterteilt, was es uns als Entwickler viel einfacher macht, unseren Code zu schreiben und zu pflegen. Tools wie webpack werden alle unsere Komponenten und Dateien in einer großen JavaScript-Datei zusammenfassen, die dann vom Browser gelesen werden kann. Wie Sie sich bei großen Projekten vorstellen können, können diese Pakete wirklich groß werden und die Ladezeit der Seite beim ersten Besuch verlangsamen. Im Moment, wenn wir zu unseren Routern index.js Datei gehen, importieren wir in alle Komponenten, die wir jemals brauchen. Also, wenn Benutzer, die unsere Website besuchen, können nie auf einen dieser Links oder Seiten klicken, aber immer noch den Preis zahlen mit dem Herunterladen sie im ursprünglichen Paket. Lazy Loading ist der Prozess der Aufteilung der Komponenten dieses Routers in separate Bundles oder Blöcke, und nur heruntergeladen, wenn erforderlich, was dazu führt, dass die anfängliche Paketgröße reduziert wird. Natürlich wird es eine kleine Download-Zeit geben, um die neuen Komponenten einzuziehen , wenn eine Route besucht wird. Aber wenn Sie Komponenten effizient verwenden, sollte der Effekt minimal sein. Im Moment werden alle diese Komponenten mit der Standard-Importsyntax importiert. Mit dem Add Lazy Loading können wir eine dynamische Import-Syntax verwenden, die vom Vue Router unterstützt wird, und wir tun dies, indem wir jeden Import durch eine Funktion ersetzen. Kurz bevor wir dies tun, öffnen wir die Entwickler-Tools im Browser, und wir können sehen, wie die Dinge aussehen, bevor wir diese Änderung vornehmen. Wechseln Sie in die Registerkarte Netzwerk. Das erste, was wir tun werden, ist, klicken Sie auf „Cache deaktivieren“, so dass wir keine gespeicherten Dateien sehen. In diesem Beispiel kümmern wir uns nur um C und unsere JavaScript-Dateien. So können wir auf die Schaltfläche „JavaScript“ klicken, um nur die JavaScript-Dateien anzuzeigen. Mine ist bereits auf JavaScript gesetzt, aber Sie können diesen alle Link ausgewählt haben. Mit diesem ausgewählt, aktualisieren Sie die Seite und wir sehen jetzt haben wir zwei separate JavaScript-Dateien heruntergeladen. Die erste von app.js ist unser Haupt-JavaScript-Paket und das Vendors-Paket enthält Code von über Drittanbieter-Modulen, wie die MPM-Pakete, die wir in unserem Projekt platzieren. Der Schlüssel, an den wir uns erinnern müssen, ist, dass wir nur ein Hauptprojektpaket haben, das die app.js ist. Zurück zu unserer Router-Datei, können wir jetzt diese statische Import durch dynamische ersetzen. Zuerst kommentieren Sie das aus, und dann werden wir eine Funktion für jeden dieser erstellen , um unsere Standard-Importe zu ersetzen. Der erste ist der Administrator, und dann setzen Sie dies auf eine Funktion, und die Art und Weise, wie dies funktioniert, ist, dass alle diese ursprünglichen Importe sofort importiert werden. Allerdings wird ein dynamischer Import innerhalb einer Funktion platziert, und diese Funktion wird nur aufgerufen, wenn erforderlich. Anstatt unseren Import direkt aufzurufen, speichern wir diesen innerhalb einer Konstante, greifen den Dateipfad und fügen ihn dann als String ein. Wir könnten dies auch ersetzen, das @-Symbol, und es sollte genau das gleiche funktionieren. Ich habe dies noch fünf Mal dupliziert und die zweite ist für die AppHome, fügen Sie den Pfad ein. Der dritte ist für Create. Als nächstes haben wir die Kategorie, und dann ist die letzte NotFound. Speichern Sie diese fast sehen, welche Wirkung dies hat. Wenn wir den Browser aktualisieren, sehen wir immer noch unsere ursprünglichen zwei Dateien, die unser Paket und das Paket des Anbieters sind, aber jetzt JavaScript-Dateien erneuert haben. Nun kann es schwer sein, genau zu wissen, was jede dieser Dateien ist, da sie nur eine Zahl sind. Wenn wir auf diese klicken und in die Vorschau gehen, sehen wir nur eine Menge JavaScript-Code. Wir können diese Nummer auch durch einen Chunk-Namen ersetzen. Zurück zu unserem Router. Die Art und Weise, wie wir dies tun, ist, einen Kommentar hinzuzufügen. Wir tun dies nur innerhalb der Importanweisungen, und dies ist genau wie ein regulärer CSS-Kommentare strukturiert. Der Kommentar, den wir hier platzieren müssen, ist der WebPackChunkName, und dann geben wir diesem Chunk einen Namen unserer Wahl. Lassen Sie uns dies konsistent halten und gehen Sie für den Admin, und es behebt. Dann werde ich das kopieren und den Rest unseres Imports ersetzen. Die zweite ist für die AppHome, Create, die Kategorie und schließlich die NotFound. Nun, dieser WebPackChunkName ist vorhanden. Wenn wir zum Browser gehen, sehen wir, dass unsere Namen jetzt anstelle dieser nummerierten Dateien platziert werden. Diese untere, die die AppHome ist, sollte keine Überraschung sein , da wir derzeit auf der AppHome Seite sind. Aber darüber sehen wir einige verschiedene Dateien. Wir sehen die Kategorie und auch die Create.js. Nun, das mag seltsam erscheinen, weil wir diese Seite noch nicht besucht haben. Sie können erwarten, dass zum Beispiel die Kategorie nicht geladen wird, bis wir auf einen dieser Links klicken. Nun, das passiert, weil standardmäßig bei Verwendung der Vue CLI eine Technik namens Prefetching verwendet wird, die wie View antizipiert, welche Dateien wir als nächstes benötigen. Da wir diese AppHome-Komponenten bereits besitzen, erkennt Vue dann, dass diese Seite wir auf unsere Kategorie verlinken und dann die Komponenten erstellen. Wirksam geht davon aus, dass wir diese Komponenten irgendwann bald brauchen werden. Das Herunterladen dieser beiden Dateien beginnt erst , wenn unsere erste Seite geladen wurde, so dass wir keine Auswirkungen auf die Ladezeit der Seite haben. Wenn wir genau hinschauen, sehen wir auch nicht die Admin-Seite oder die NotFound-Komponenten und das liegt daran, dass wir keine direkten Links zu diesen beiden Komponenten von diesem AppHome haben . Wenn wir dies sehen wollten, müssen wir zum Admin gehen, der dann die admin.js herunterladen wird. Wenn wir zu einer unbekannten Route gehen, sehen wir auch, dass die NotFound-Komponente jetzt heruntergeladen wird. Sowohl dieser Admin in diesem NotFound verweist auf keine der Komponenten, so dass wir keine Prefetching für diese Seite sehen. Dieses Lazy Loading ist ein wirklich effizienter Weg, um Lasten in unseren Komponenten und die anfängliche Ladezeit der Seite zu verbessern. Ein weiteres nützliches Feature ist unsere Komponenten, die nur heruntergeladen werden will. Zum Beispiel werden diese NotFound-Komponenten nur vom Server heruntergeladen, wenn es zum ersten Mal benötigt wird, und dann werden alle zukünftigen Besuche dieser Seite dann eine zwischengespeicherte Version für Effizienz bereitstellen , so dass wir nicht eine Datei mehrere -Zeiten. So können wir Lazy Loading in unserem Vue Router verwenden. Als nächstes möchten wir einen Blick darauf werfen, wie wir zusammengehörige Teile zusammenfassen können. 128. Routen in Chunks gruppieren: Im vorherigen Video haben wir jedem dieser dynamischen Import einen Namen gegeben , indem wir einen Kommentar eingaben. Jeder dieser Importe wird als Chunk bezeichnet, und zusammen mit diesem Kommentar, um unsere importierten Dateien zu benennen, können wir ihn auch verwenden, um Blöcke zu gruppieren. Ein Beispiel könnte sein, wenn wir eine navbar hatten, wir könnten alle Seiten in navbar Links zu gruppieren und sie alle zusammen herunterladen. Der Weg, dies zu tun, besteht darin, jeder Komponente, die wir gruppieren möchten, den gleichen Chunk-Namen zu geben. Derzeit, obwohl wir die Chunks vorholen, die Kategorie auf den Create-Komponenten immer noch separat herunter. Wenn wir sie gruppieren wollten, müssen Sie nur den gleichen Gruppennamen angeben. Zum Beispiel eine Kartengruppe. Dasselbe für die Kategorie. Gehen Sie dann zurück zur Netzwerk-Tab und aktualisieren Sie sie. Wir sehen genau wie zuvor, wir haben die Apphome, die faul geladen ist, aber darüber hinaus sehen wir nicht mehr unsere separaten Importe oder schaffen und auch unsere Kategorie. Stattdessen haben wir diese Kartengruppe, die den Inhalt unserer beiden Chunks enthält. Die Verwendung dient zum Gruppieren von Blöcken wie diesen, hängt von der Struktur Ihres Projekts ab, aber dies kann wirklich nützlich sein, um Komponenten zusammenzufassen , die Sie gleichzeitig benötigen. Diese Technik gibt uns wirklich viel Flexibilität, um zu kontrollieren, welche Komponenten zu einem bestimmten Zeitpunkt heruntergeladen werden. 129. Abschnittseinführung – Bilder hochladen: Hey, willkommen zu diesem Bildbereich. In diesen kommenden Videos werden wir uns ansehen, wie wir es dem Benutzer ermöglichen können, ein neues Bild auf eine unserer vier Kartenseiten hochzuladen . Dieses Bild wird ein Hintergrund sein, genau wie die, die wir auf den Musterkarten gesehen haben. Diese Bilder werden hochgeladen, wir lesen den Dateiinhalt, wir speichern sie in Cloudinary, wir aktualisieren unsere Kartenvorschau, und neben all dem werden wir auch sehen, wie wir vorhandene Bilder entfernen können und positionieren Sie sie auch neu. Wir sehen uns da drinnen. 130. Komponente zum Hochladen von Bildern: Dieser kommende Abschnitt wird sich auf die Kartenbilder konzentrieren. Auf jeder Seite platzieren wir ein Bild Komponenten über auf der Bearbeitungsseite und dies wird direkt über unsere Texteingabe-Komponenten sitzen. Wir werden das oben haben, und das bedeutet, dass wir ein neues Bild auf jede dieser Seiten hochladen können . Wenn wir bereits ein Bild haben, wie wir es auf der Titelseite haben, können wir auch dieses Bild ersetzen. Dieses Bild der niedrigen Komponente wird das Bild des Cloudinary senden. Wir werden auch ein kleines Vorschaubild anzeigen, sobald wir diese ausgewählt haben, und auch dies wird in der Karte Vue 2 aktualisiert werden. Um los zu gehen, brauchen wir eine Komponente davon in den Kartenordner und dann nennen wir dies das Bild hochladen. Richten Sie die Vorlagen ein. Diese ganze Komponente wird im div mit der Klasse des Image-Upload-Wrapper umgeben sein . In diesem div, eine ebene Stirn mit dem Text des Bildes, und dann verwenden wir alle empfohlenen Bildgröße. Wir bleiben 450 Pixel x 600 Pixel, so dass dies gut auf die Karte passt. Als Nächstes müssen eine Eingabe und der Typ für diese Eingabe abgelegt werden, damit der Benutzer eine beliebige Bilddatei von seinem eigenen Computer und Bildelementen auswählen kann . Aber jetzt wird das leer sein, wir brauchen keine Quelle. Die Quelle wird sehr bald aus der Datei gesetzt, die der Benutzer hochlädt. Dies wird ein kleines Vorschaubild sein, also wird es uns die Klasse des Vorschaubildes geben, ein div mit der Klasse der Bildmuster, dies ist ein Wrapper für eine Reihe von Schaltflächen, auf die wir eingehen werden wie man die Bilder oben, der Mitte und am unteren Rand der Karte, und auch eine Schaltfläche, um diese beiden zu entfernen. Die oberen, die mittleren und die unteren Schaltflächen werden in einem div direkt in der ersten Schaltfläche gruppiert und jede dieser Schaltflächen wird ein Symbol haben. So können wir in die Assets gehen, in den Icons Ordner. Dies ist die top.svg, der ganze Text des Bildes Top-Selektor, und dann werden wir dies noch zwei Mal tun. Das Symbol dafür, wieder in den Assets, in die Symbole. Dies ist die middle.svg. Der letzte Knopf ist für den unteren Bereich. Das Symbol dafür ist die bottom.svg, der letzte Alt-Text ist das Bild unten. Alle drei dieser Schaltflächen sind innerhalb dieses div gruppiert. Wenn wir direkt unter diesem gehen, werden wir eine vierte und letzte Schaltfläche hinzufügen, die sein wird, um das ausgewählte Bild zu entfernen. Die Klasse von remove_btn. Ich möchte dies einrichten, um später in diesem Abschnitt eine Funktion auszulösen. Aber jetzt ist dies alles der Vorlagen-Aktion, die wir auf dem Bildschirm anzeigen müssen , und wir möchten, dass diese Bild-Upload-Komponente oben in diesem Bearbeitungsabschnitt angezeigt wird. Gehen Sie also zum CardEdit.Vue, importieren Sie unsere Komponente mit dem Namen des Bild-Uploads. Der Dateipfad befindet sich in den Komponenten, dieser wurde im Karten-Ordner gespeichert, und wählen Sie unseren Bild-Upload, platzieren Sie diesen innerhalb des Komponenten-Objekts und rendern Sie ihn dann oben in unserer Vorlage. Zum Browser gibt es unser Bild, Upload-Komponenten, und sie sollten für jede einzelne Seite angezeigt werden. Das braucht natürlich auch etwas Styling. Wir müssen all diesen Inhalt ausrichten und auch die Größe dieser Schaltflächen reduzieren. Wir möchten auch, dass dies mit den Texteingaben direkt darunter verschmilzt wird, sodass wir diesen beiden Abschnitten einige gemeinsame Stile hinzufügen. Der Image-Upload, den wir gerade erstellt haben, hat diese Klasse von Bild-Upload-Wrapper, und die Texteingaben, die direkt darunter sind, haben diese Klasse von Texteingabe-Wrapper. Wir können jetzt einige freigegebene Stile über in der app.vue auf beide dieser Abschnitte anwenden. Also bis zum Ende des Style-Abschnitts ist der erste der Image-Upload-Wrapper und dann auch den Texteingabe-Wrapper auswählen. Dafür werden wir einige Polsterung innerhalb des Elements platzieren, einige Abstände auf der Unterseite jedes Elements o0f diese Elemente mit einem Rand, einem Kastenschatten, und wir werden auch die Ecken runden. Erstens, 10 Pixel auseinander in alle vier Seiten. Also Rand, die nur auf den Boden von 10 Pixel gelten wird, ein Feld Schatten von einem Pixel, ein Pixel, zwei, zwei. Die Farbe, die DDD ist, die eine graue Farbe sein wird, und ich möchte, dass dieser Kastenschatten auf der Innenseite ist, also werden wir dies als eingeblendet festlegen. Dies gibt uns diesen Effekt des einen Pixel-Schattens auf der rechten Seite und auch der unteren Seite und dies verschmilzt auch zu zwei Pixeln oben auf der linken Seite. Wir rennen diese Ecken mit dem Grenzradius ab. Nur ein kleiner wird in Ordnung sein, alle drei Pixel. Dies gibt uns nun den Effekt, dass dies alle separate Abschnitte sind. Jetzt gehen wir zurück zu unserer Bild-Upload-Komponente und wenden einige Stile an, die jetzt nur für dieses Bild der niedrigen Komponente gelten. Also der Stil, der auch umfaßt wird. Zuerst schieben Sie den gesamten Inhalt nach links, indem Sie den Wrapper auswählen, der Image-Upload-Wrapper war. Zusätzliche Zeile aus links, und dann als nächstes werden wir etwas Platz zwischen allen drei dieser Schaltflächen hinzufügen und auch die Symbolgröße reduzieren, gehen wir auf die Vorlage. Alle diese vier Schaltflächen sind in dieser Bildtastenklasse umgeben. Wenn wir also diesen Cluster B, einen Anzeigetyp von Flex,setzen einen Anzeigetyp von Flex, erscheint diese Gruppe von Schaltflächen neben unserer Schaltfläche Entfernen. Die Klasse der Bildschaltflächen, die Anzeigetyp von flex, und dann Leerzeichen mit Rechtfertigung Inhalt und platzieren Sie den Abstand zwischen, als unsere Schaltfläche jetzt neben allen drei dieser Symbole. Als nächstes reduzieren wir die Größe aller drei dieser Bilder. Diese waren im gleichen Wrapper, der die Bildschaltflächen ist, aber wir werden dies nur auf die Bilder anwenden. Die Breite von 30 Pixeln. Dies ist nun ein wenig kleiner auf die Überschrift der Ebene vier, die der Bildtext ist. Das Schriftgewicht von 300, und wir werden nur die Größe davon reduzieren, damit wir das besser sehen können. Dies wird uns nur den leichteren Text geben. Auch einige Ränder von 10 Pixeln oben und unten, und Null auf der linken und rechten. wir nach unten gehen, brauchen wir auch etwas Platz zwischen dieser Dateieingabe und unseren freien Bildern. Wählen Sie also unsere Eingabe und dann können wir in dem Typ platzieren, der gleich der Datei ist, und das Styling wird nur für alle Dateieingaben gelten. Fügen Sie einen Rand von Null oben, Null auf der rechten Seite, 10 Pixel unten und dann Null auf der linken Seite, dann etwas Abstand zwischen diesen Schaltflächen, greifen Sie alle unsere Schaltflächenelemente, und dann etwas Rand rechts von fünf Pixeln. Gut. Das nächste, was wir tun werden, ist, die Farbe dieses Entfernen-Button zu ändern und auch die schwebende Farbe am unteren Rand aller Stile. Dies sind die Klasse von remove_btn. Die einzige Eigenschaft, die wir im Inneren hinzufügen müssen, ist die Farbe, fügen Sie einen RGB-Wert von 208, 90 und 90 für das Blau, was uns die rote Farbe gibt, die wir hier sehen. Dann schließlich der Hover-Zustand. Also werde ich das duplizieren, aber dieses Mal, zielen Sie auf den Hover-Zustand und ändern Sie die RGB-Farbe auf 123, 44 und 44, was nur eine etwas dunklere rote Farbe ist, die wir sehen können, wenn wir den Mauszeiger über diese Schaltfläche bewegen. Das ist es jetzt für die Visuals unserer Bild-Upload-Komponente. Als nächstes müssen wir irgendwo diese Bilder speichern, die der Benutzer hochlädt. Dafür werden wir einen Blick auf einen Service namens Cloudinary werfen. 131. Cloudinary einrichten: Wir brauchen jetzt einen sicheren Ort, um unsere Bilder hochzuladen und zu speichern. Ein beliebter Service, den ich für viele meiner eigenen Website verwende, ist Cloudinary , den Sie hier unter cloudinary.com finden können. Cloudinary ist ein Hosting-Dienst für Videos und Bilder, und es hat auch viele großartige Funktionen, wie die Fähigkeit, unsere Bilder zu transformieren und auch die richtige Größe Bilder, und auch Formate für das Benutzergerät. Ich habe bereits ein Konto über Cloudinary sagt, aber wenn Sie dies noch nie verwendet haben, gehen Sie vor und erstellen Sie ein kostenloses Konto. Es ist kostenlos, sich anzumelden und gibt uns auch eine riesige kostenlose Zulage von etwa 20.000 kostenlosen Bild-Uploads. Sobald Sie angemeldet sind, werden Sie zum Dashboard-Bereich weitergeleitet , der in etwa so aussieht. Nun, bevor wir Bilder in Cloudinary hochladen, müssen wir zuerst eine Voreinstellung einrichten. Eine Voreinstellung ist eine Reihe von Standardeinstellungen mit Bildern, die wir hochladen, um die Größe und das Format zu transformieren. Wir können dies über unsere Einstellungen einstellen. Die Einstellungen können über diese Schaltfläche nur hier aufgerufen werden, und gehen Sie dann in den Upload-Bereich. Geh runter. Hier werden wir die Voreinstellung einrichten und hochladen. Ganz oben haben wir diesen Upload-Voreinstellungsnamen , der wichtig sein wird. Ich werde das mit Command oder Control C kopieren und dann zu unserem Bild gehen und Komponenten hochladen. Lassen Sie uns einfach einen Skriptabschnitt für jetzt erstellen und dann ganz oben als Kommentar platzieren. Die erste Option, die wir haben, ist der Signaturmodus. Haben Sie die Möglichkeit, signierte und auch unsignierte Uploads. Die Option Signiert beinhaltet die Verwendung eines Webservers, entwerfen Sie die Bilder mit unserem Cloudinary Geheimnis, das wir kurz zuvor im Dashboard gesehen haben. Oder wir haben die unsignierte Version, die wir verwenden werden, was bedeutet, dass wir direkt aus dem Browser hochladen können, ohne das Geheimnis zu benötigen. Wenn wir wollten, können wir auch einen dedizierten Ordner erstellen , in dem wir in diesen Bildern platzieren werden. Lasst uns die Karten holen. Der Rest davon, wir werden uns Standard lassen und dann zum Abschnitt Medienanalyse gehen. Dieser Abschnitt ist, wenn wir unsere Bilder mit irgendwelchen Tags hochladen möchten. Wenn wir irgendeine Art von KI wie Gesichtserkennung hinzufügen möchten, wenn wir Text aus den Bildern extrahieren möchten, und viele weitere erweiterte Funktionen, die wir derzeit nicht benötigen. Darunter haben wir die Bildmanipulationen. Dies gibt uns die Möglichkeit, alle Standard-Bildgrößen und auch Formate einzurichten und sogar einige Rotation oder Eckenradius hinzuzufügen, wenn wir dieses Bild hochladen. Lassen Sie uns alle diese als Standard und speichern Sie dann diese Voreinstellungen. Vergewissern Sie sich, dass Sie diesen Namen der Voreinstellung zur Kenntnis genommen haben und diesen Ihrem Projekt hinzugefügt haben. Als nächstes werden wir unsere ersten Schritte unternehmen, um dieses Bild hochzuladen , indem wir den Inhalt des Datei-Uploaders lesen. 132. Dateiobjekte lesen und Voransicht: Als nächstes machte eine Funktion, um dieses Bild hochzuladen. Wir könnten diese bidirektionale zusammensetzbare Datei hinzufügen, wenn wir wollten. Aber da wir dies nur in dieser Bild-Upload-Komponente benötigen, wollen wir das hier platzieren. Also haben wir ein Skript, das wir im letzten Abschnitt hinzugefügt haben, und in eine Setup-Funktion, so dass wir einige Kompositionscode hinzufügen können. Die Funktion, die wir brauchen, wird Upload File genannt, und dies muss auch in den Ereignisdetails zu nehmen. Diese Ereignisdetails werden weitergegeben, wenn wir ein Bild von diesem Bild-Uploader hochladen. Wir müssen das nicht manuell passieren. Dies wird automatisch von unserer Eingabe empfangen, und wir können innerhalb unserer Funktion darauf zugreifen. Also lassen Sie uns das auch zurückgeben, und wir können diese Funktion jetzt in unserer Dateieingabe aufrufen. Um dies zu tun, werden wir jetzt für eine Änderung auflisten und dann unsere Funktion ausführen. Diese Änderung wird ausgeführt, sobald das Bild hochgeladen wurde. Zurück zu unserer Funktion können wir sehen, welche Informationen in diesem Ereignis enthalten sind, indem wir ein Konsolenprotokoll machen. Speichern Sie diese Datei und über im Browser in der Konsole. Jetzt von hier aus, um diesen Lauf zu sehen, müssen wir ein Bild hochladen. Sie können neue Bilder verwenden, wenn Sie es vorziehen. Gut, eine Liste aller Bilder zu haben, die in diesem Kurs verwendet werden. Also werde ich eine von diesen auswählen, die eine Funktion und auch unser Konsolenprotokoll eingeben, wenn wir dies öffnen, ins Ziel gehen und dann in die Dateien. Von hier aus laden wir nur in einem Bild auf einmal hoch. Unser Bild wird also immer diese erste Datei in diesem Array an der Indexposition Null sein. Wir sehen Dinge wie den Dateinamen, die Dateigröße und auch, dass dies ein PNG-Bild ist. Wir haben also die Informationen, die wir brauchen, aber als nächstes brauchen wir eine Möglichkeit, diese Dateidaten tatsächlich zu lesen und dafür hat JavaScript ein so genanntes Dateileserobjekt. Also unten unser Konsolenprotokoll. Lassen Sie uns konstant gehorchen, um dies im kalten Leser zu speichern. Dies ist gleich einem neuen JavaScript-Dateileserobjekt. Datei-Leseobjekt ist in der Lage, den Inhalt der Datei vom Computer des Benutzers zu lesen. Dieses Bild kann verwendet werden, um ein kleines Vorschaubild festzulegen, das zuvor in der Vorlage eingerichtet wurde. Dies ist das leere Bildelement, das derzeit keine Quelle hat. Um die Quelle festzulegen, werden wir einige reaktive Daten einrichten. Dies wird das reaktive Paket aus der Ansicht importieren und dann innerhalb der Setup-Funktion einen konstanten Aufrufstatus einrichten, der alle Daten enthält, die wir für dieses Bild benötigen. Wir wickeln dies auch in den reaktiven Wrapper ein und platzieren es in einem Objekt. Die erste Eigenschaft, die wir hier hinzufügen werden, ist für die Bildvorschau. Derzeit wird dies nur eine leere Zeichenfolge sein, aber wir werden dies von unserem Dateileser aktualisieren. Sobald wir dies tun, wird dies auf die Bildquelle innerhalb der Vorlage gesetzt. Also müssen wir auch unseren Staat zurückgeben. Übergeben Sie das in unser Objekt, und jetzt werden wir es innerhalb der Bildelemente zusammenfassen. Platzieren Sie in der Quelle, und dies wird gleich unserem Zustandsobjekt und dann der Bildvorschau-Eigenschaft sein. Derzeit wird dies natürlich nicht funktionieren, da dies auf eine leere Zeichenfolge gesetzt ist. Daher müssen wir dies mit dem Inhalt unseres Dateilesers aktualisieren. Die Datei gelesen hat verschiedene Eigenschaften und Methoden, auf die wir jetzt zugreifen können, um damit zu helfen. Bevor wir jedoch die Bildvorschau aktualisieren, müssen wir zuerst sicherstellen, dass die Datei vollständig gelesen wurde. Wenn wir also ein wirklich großes Bild haben, das hochgeladen wurde, kann diese Lesephase einige Zeit in Anspruch nehmen, und so überprüfen Sie dies. Zuerst greifen wir auf unseren Leser und verwenden dann die onload-Eigenschaft. Das bedeutet, sobald der Dateileser unser Bildobjekt gelesen hat, wird dies dann eine Funktion auslösen und es ist innerhalb dieser Funktion, wo wir unsere Zustands-Punkt-Bild-Vorschau aktualisieren möchten , um gleich den Leser-Punkt-Ergebnissen zu sein. Dies wird ausgeführt, sobald der Lesevorgang beendet ist, aber wir haben noch nicht begonnen, den Dateiinhalt zu lesen. Alles, was wir getan haben, ist ein neues leeres Dateileserobjekt zu erstellen. Um tatsächlich die Datei zu lesen, haben wir eine Methode zur Verfügung, die als Daten-URL gelesen genannt wird. Wählen Sie also unseren Leser, Ziel, lesen Sie als Daten-URL, und die Dateidaten, die wir lesen möchten, ist das, was wir gerade in der Konsole gesehen haben. Das war also innerhalb des Ereignisses, innerhalb des Ziels. Die Dateien, die ein Array war, und wir laden immer nur in einer einzigen Datei. Das wird also immer Position Null sein. Ok. Sobald das Lesen der Datei abgeschlossen ist, wird dies dann unsere onload-Funktion ausführen, die dann unsere Bildvorschau aktualisiert. Schauen wir uns das an. Aktualisieren Sie den Browser, und wählen Sie eines dieser Bilder aus. Mach das auf. Wir können sehen, dass unsere Bildvorschau jetzt funktioniert, und Sie können auch die Größe dieses Bildes einschränken. Vor allem, wenn wir ein hohes Bild wie dieses haben. Es wäre auch eine gute Idee, alle möglichen Lesevorgänge zu behandeln und eine neue Nachricht an den Benutzer zu senden. Dies können wir eine Nachricht in unseren Zustand und anfänglichen leeren Wert platzieren , und kurz vor der onload-Eigenschaft können wir auch alle Fehler mit on error behandeln. Also reader.onerror. Diese Eigenschaft wird auch eine Funktion auslösen, es ist genau wie oben, wo wir unsere state.message aktualisieren, um gleich einer neuen Zeichenfolge zu sein. Diese Nachricht liegt an uns, aber wenn Sie etwas beschreibendes platzieren, z. B. ein Problem beim Hochladen Ihrer Nachricht aufgetreten ist. Versuchen Sie es erneut. Okay, wir müssen nichts zurückgeben, da wir bereits unser Vollstatusobjekt zurückgegeben haben. Alles, was wir tun müssen, ist in ein Textelement zu platzieren, das ich als state.message und auch eine Bedingung setzen werde , um diese Nachricht nur anzuzeigen, wenn die Nachricht existiert. Gut, dies wird den Benutzer jetzt wissen lassen, ob beim Hochladen des Bildes ein Fehler aufgetreten ist. Jetzt wissen wir, dass dieser Bildleser korrekt funktioniert. Als Nächstes werden wir es verwenden, um unsere Bilder in Cloudinary zu speichern. 133. Die Bilddatei hochladen: Das erste Video gab uns Zugriff auf das hochgeladene Bild des Benutzers. Wir haben dann die Bildvorschau gestartet, damit der Benutzer sehen kann. Jetzt werden wir das in Cloudinary speichern. Sobald Cloudinary diese Bilder erhält, weisen wir ihm auch eine eindeutige URL zu. Wir werden diese URL auch in Kürze in unserem Kartenobjekt speichern. Wir werden dies innerhalb unserer Upload-Dateifunktion tun, direkt darunter, wo wir die eigentliche Datei lesen. Da wir Daten an einen anderen Ort senden, können wir dies mit try and catch umgehen, was Fehler behandelt. Dann fangen Sie, der in irgendwelchen Fehlern nimmt. Wenn ein Fehler vorliegt, werfen wir einen neuen Fehler, der diese Fehlermeldung übergibt. Bis zum Abschnitt try, das erste, was wir hier tun werden, ist, ein neues FormData-Objekt zu erstellen. Ein FormData-Objekt ist eine Möglichkeit, Sätze von Schlüsselwertpaaren in einem richtigen Format zu konstruieren , das benötigt wird, um es an einen Server zu senden. Diese Schlüsselwertpaare enthalten unsere Cloudinary-Voreinstellungen und auch die Bilddatei, die wir senden möchten. Wir werden dies auch mit unserem Zustand synchron halten, also genau darüber, wo wir unser Zustandsobjekt haben. Auch die FormData, die anfangs null sein wird. Wir können dann unsere FormData mit dem Inhalt dieses Objekts aktualisieren. Das wird also state.formData sein. Setzen Sie dies gleich unserem Objekt, das momentan leer ist. Aber um einige Inhalte zu diesem FormData oder einigen Schlüsselwertpaaren hinzuzufügen, können wir die append-Methode verwenden, die so aussehen wird. Wir erhalten Zugriff auf unsere State.FormData. Dann können wir append aufrufen, um unsere Schlüsselwertpaare zu übergeben. Eines der Dinge, die wir mit diesem Bild hochladen müssen, ist die upload_preset. Dies ist der Schlüssel des Namens, und dann durch Komma getrennt ist der Wert die Voreinstellung, die wir von Cloudinary erhalten. Wickeln Sie dies ein, und platzieren Sie dies als Zeichenfolge. Duplizieren Sie dies und das zweite Schlüsselwertpaar wird für unsere Bilddatei sein. Die Datei steht unter event.target zur Verfügung. Seine FormData wird nun verwendet, um den Cloudinary zu senden. Aber wir brauchen zuerst einen Weg, um diese Anfrage zu senden. Dafür werde ich ein Paket namens axios verwenden. Axios ist ein Paket, um Web-Anfragen zu stellen, und wir können dies mit npm installieren. Öffnen Sie das Terminal, schließen Sie es mit Kontrolle C, und installieren Sie es dann in unserem Projekt mit npm. Installieren Sie alle i kurze Hand, und dann den Paketnamen, der axios ist. Sobald dies geschehen ist, starten Sie den Server mit npm run serve neu. Zurück zu unserer Komponente, und um dieses axios-Paket zu verwenden, müssen wir es zuerst importieren. Also importiere Axios. Da dies ein Knotenmodul ist, müssen wir den Dateipfad nicht hinzufügen. Wir können einfach den Paketnamen hinzufügen. Zurück zu unserer Funktion, axios, jetzt brauchen wir einige Dinge, um diese Anfrage zu stellen und diese Daten an Cloudinary zu senden. Ich werde all das in einem Objekt speichern. Also const ImageRequestData. Richten Sie dieses Objekt ein, wo wir in drei Dinge übergeben werden. Zuerst die URL, die Methode und auch die Daten. Zunächst haben wir die URL, und dies ist der Ort, an den wir dieses Bild senden möchten, und das ist die Cloudinary API, übergeben Sie dies als Zeichenfolge, die https://api.cloudinary.com/ ist, die API Versionsnummer, die v1_1 ist. Dann müssen wir auf unser eigenes Konto verweisen, zurück zum Cloudinary-Dashboard. Wir können dies von unseren Kontodaten erhalten. Dies ist der Cloud-Name, der ganz oben steht. Kopieren Sie dies und dies auf das Ende unserer URL und dann /upload. Dadurch haben wir die Methode, und dies ist eine Post-Anfrage, da wir Daten veröffentlichen. Dann zuletzt die Daten, die die tatsächlichen Daten sind, die wir senden möchten. Wir haben dies bereits in unserem State.FormData gespeichert. Gut. Das ist alles, was wir jetzt brauchen, um eine axios Anfrage zu stellen. Also rufen wir die axios-Bibliothek und übergeben dann diese Bildanforderungsdaten. Wenn Sie möchten, können Sie ein Objekt direkt an hier übergeben, anstatt ein separates Objekt zu erstellen. Aber persönlich denke ich, dass dies ein sauberer Ansatz ist. Würde diesen Tippfehler einfach abschneiden, bevor wir weiter gehen? Ok, sag das. Jetzt zurück zu unserem Projekt, aktualisieren Sie das. Nun, wenn wir eine neue Datei hochladen, verwenden Sie ein beliebiges Bild öffnet sich. Es gibt unsere Vorschau auf Cloudinary und in die Mediathek. Denken Sie daran, wenn wir die Voreinstellung einrichten, wir richten auch diese Karten Ordner. Also geh in das hinein. Dort sehen wir unser Bild, und jetzt wissen wir, dass das funktioniert. Im nächsten Video werden wir unsere Bild-URL, die diesem Bild von Cloudinary zugewiesen wurde, und dann eine Update-Funktion einrichten, um diese in unserem Kartenobjekt zu speichern. 134. Die Bild-URL auf unserer Karte speichern: Zuvor haben wir eine axios Anfrage gestellt, unsere Bilder in Cloudinary zu speichern. Dieses Bild oder die URL dieses Bildes muss auch in unserem Kartenobjekt gespeichert werden. Aber wie bekommen wir dieses Bild in unser Kartenobjekt? Nun, wir können eine URL-Referenz übergeben, die von Cloudinary zur Verfügung gestellt wird. Wenn wir unsere Karten gerade hier sehen, haben wir diese Kopie URL Abschnitt. Wenn wir dies kopieren, fügen Sie dies in eine neue Registerkarte ein, und dies ist ein direkter Link zu unserem Bild. Dies wird für alle Bilder bereitgestellt, die Sie auf Cloudinary hochladen, aber wir müssen nicht alle URLs wie diese manuell kopieren. Stattdessen, wenn wir diese Post-Anfrage mit axios stellen, erhalten wir eine Antwort zurück, die wir dann innerhalb eines Objekts speichern und auf diese Daten zugreifen können. Daher wissen wir nicht, wie lange es dauern wird, dieses Bild zu speichern und eine Antwort zu erhalten. Wir können auch async/await verwenden. Async/await ermöglicht es uns, auf die Daten zu warten, die vom Server zurückkommen , bevor wir diese in unseren Konstanten speichern Dies wird uns davon abhalten, auf die dort gespeicherten Daten zuzugreifen, bevor sie tatsächlich zurückgegeben werden. Wir warten darauf, dass diese Daten zurückkommen, und so können wir dieses Schlüsselwort verwenden. Wir müssen auch unsere Funktion als asynchron markieren. Wir können unsere Antwort zurück an die Konsole protokollieren und sehen, welche Daten in unser Projekt zurückgegeben werden. Laden Sie eine neue Datei hoch, da wir diese an den Server senden und sie zurückgesendet werden muss, müssen wir möglicherweise einige Sekunden warten, bis dies geschieht. Sobald dies gespeichert ist und wir eine Antwort erhalten, sehen wir unser Konsolenprotokoll gerade hier. Die Daten, die wir brauchen, befinden sich innerhalb dieses Datenabschnitts, und dies wird dann unsere URL enthalten, und es ist diese URL, die wir in unserem Kartenobjekt speichern müssen. Wir haben noch keine Funktion erstellt, um dieses Update durchzuführen, aber wir können dies innerhalb unserer Komponente für jetzt platzieren, entfernen Sie das Konsolenprotokoll, und diese Funktion wird UpdateImage genannt. Übergeben der URL, die innerhalb der Antwort gespeichert ist, die Daten und dann die URL, diese Funktion wird innerhalb unserer UseCurrentCard Composable zusammen mit den anderen Update-Funktionen platziert werden . Wir müssen dies auch für die Spitze importieren. Importieren Sie die UseCurrentCard aus diesem Dateipfad, bei dem es sich um die Composables handelt, und dann in UseCurrentCard. Bevor wir diese Funktion aufrufen können, was wir gerade hier tun, müssen wir diese auch aus unserer Datei in das Setup extrahieren. Speichern Sie es als Konstante, die UpdateImage genannt wird, von unserer UseCurrentCard-Funktion über die UseCurrentCard-Datei, wir müssen jetzt dieses UpdateImage einrichten. Jetzt unten, schreiben Sie diese Funktion und um die Karte zu aktualisieren, muss dies die URL nehmen, die wir übergeben, wenn wir diese Funktion nur hier aufrufen. Nun, um diese Karte zu aktualisieren, verwenden wir eine ähnliche Technik, die wir in der Update-Funktion direkt oben verwendet haben. Wir greifen die ausgewählte Karte und dann die aktuelle Seite. Ich werde das kopieren, in diesem Intervall der Funktion. Wir müssen nicht in die Abschnitte gehen, denn wenn wir einen Blick auf unsere Karte direkt innerhalb unserer Seiten nehmen , ist, wo wir das Hintergrundbild gespeichert haben, was bedeutet, dass wir nur diese Hintergrundeigenschaft aktualisieren müssen, so wie diese. Ich setze dies gleich der URL, die an diese Funktion übergeben wird, gebe dies von unserer Funktion zurück, und jetzt können wir dies im Browser testen. Was wir hier sehen wollen ist, jetzt, wenn wir eine neue Datei auswählen, sehen wir die Vorschau, sie wird in Cloudinary gespeichert, und dies sollte auch unsere aktuelle Vorschau aktualisieren, da dies mit unseren reaktiven Daten auf dem Laufenden gehalten wird, lassen Sie verwenden Sie eine Datei. Unsere Funktion wird ausgelöst und unsere Kartenvorschau wird nun mit dieser neuen Bild-URL aktualisiert. Diese Bilder können auch auf verschiedenen Seiten platziert werden. Wenn wir ein anderes Bild für diese Seite auswählen, ist dies völlig unabhängig von allen anderen Seiten. - Gut. Jetzt, wenn das alles funktioniert. Im nächsten Video konzentrieren wir uns auf diese drei Ausrichtungstasten, um dieses Bild, oben, Mitte oder unten auf dieser Karte auszurichten oben, Mitte . 135. Das Bild umpositionieren: Innerhalb unserer ImageUpload-Komponente früher, wenn wir die Vorlage einrichten, haben wir in drei Schaltflächen platziert, um das Bild, die obere, die mittlere oder dieuntere Seite der ausgewählten Seite neu zu positionieren die obere, die mittlere oder die . Damit diese Schaltflächen funktionieren, müssen wir [unhörbar] auf eine dieser Tasten klicken und dann eine Funktion ausführen. Die Funktion, die wir noch nicht eingerichtet haben, aber diese wird repositionImage genannt, die entweder oben, in der Mitte oder im unteren Bereich aufnehmen wird . Lassen Sie uns das greifen, kopieren Sie und platzieren Sie es in unseren zweiten Knopf, wie in dieser Zeichenfolge der Mitte, die dritte wird der untere genannt. Über die UseCurrentCard Composable, können wir das jetzt unten auf der Unterseite einrichten. Dies war repositionImage, wie in der Position. Dies wird unserer Funktion direkt oben sehr ähnlich sein. Aber dieses Mal anstatt unseren Hintergrund zu aktualisieren, werden wir die BackgroundPosition aktualisieren und diese gleich unserer Position setzen, die an alle Funktionen übergeben wird. Auch, wenn wir gerade oben in dieser UpdateImage Funktion wollten, könnten wir dies auch übergeben und eine Standardposition für dieses Bild einrichten, wie zum Beispiel die Mitte und dann unsere Funktion zurückgeben. Also das zurück zum Bild-Upload, wir importieren bereits unser Composable. Wir brauchen auch die Funktion, die repositionImage war, und geben diese Funktion dann von unserem Setup zurück. Dies entspricht dem Funktionsnamen, den wir jedes Mal aufrufen, wenn wir auf diese drei Schaltflächen klicken . Probieren wir das aus. Derzeit, für korrekt dimensionierte Bilder, die wir gerade hier haben, funktionieren die Tasten nicht für diesen speziellen Fall, da wir ein Bild in voller Größe haben. Aber wenn wir gehen, um „Datei“ wählen und ein kleines Bild einfügen, das nicht die volle Höhe der Karte bedeckt, können wir jetzt alle diese Buttons ausprobieren. Wir sehen sofort, dass die Position in der Mitte, an der Spitze ist und die mittlere nicht funktioniert. Das muss nur im Zentrum sein. Lasst uns das versuchen. Wir müssen die Datei erneut hochladen. Wir versuchen das noch einmal. [ unhörbar] die Spitze, die Mitte und auch die Unterseite, und das behebt unser Problem. Der Grund, warum dies funktioniert, weil wir in den CardPreview-Komponenten dies als Stileigenschaft einrichten. Öffnen Sie dies und in der Vorlage früh, wenn wir den Hintergrund setzen, haben wir auch die BackgroundPosition Eigenschaft hinzugefügt und da alles reaktiv ist, wird diese auch mit der neuen Position jedes Mal aktualisiert, wenn sich die Daten ändern. 136. Bilder entfernen: Das letzte, was mit unseren Bildern zu tun ist, sie von dieser Karte zu entfernen. Das sollte nicht zu viel Ärger sein. Alles, was wir tun müssen, ist, es nach Funktion zu setzen, die den Hintergrund auswählen und dies auf eine leere Zeichenfolge setzen wird. Wie beim Rest des Updates, gehen Sie zu der UseCurrentCard, wo wir eine Funktion einrichten können. RemoveImage. Dies wird dem UpdateImage sehr ähnlich sein, so dass wir diese Codezeile kopieren können, fügen Sie diese in. Aber dieses Mal, anstatt die URL zu setzen, wird dies eine leere Zeichenfolge sein. Das ist alles, was wir tun müssen. Gibt diese Funktion zurück. Dann können wir dies in der ImageUpload-Komponente platzieren, speichern Sie diese als Konstante. Mit dieser Funktion könnten wir diesen Teil auch aus unserem Setup zurückgeben und diesen direkt über unseren Entfernen-Button aufrufen. Stattdessen werden wir eine neue Funktion namens entfernen einrichten und das liegt daran, dass wir diese Funktion nicht nur aufrufen wollen, sondern auch die Bildvorschau löschen müssen. Richten Sie das ein. Die Funktion „remove“ genannt. Zuerst greifen wir auf unseren Zustand und die ImagePreview zu und setzen dies zurück, um eine leere Zeichenfolge zu sein. Dadurch wird das kleinere Vorschaubild, das wir innerhalb des Bearbeitungsbildschirms sehen, entfernt. Dann können wir unsere importierte Funktion aufrufen. Schicken Sie das von unserem Setup zurück. Wir haben bereits ein remove_btn Setup innerhalb der Vorlage. Wir können [unhörbar] @click, die diese Funktion aufrufen wird. Ich werde dies im Browser ausprobieren. Klicken Sie auf „Entfernen“. Unser Bild ist verschwunden. Wir werden versuchen, ein Bild hochzuladen. Klicken Sie auf „Entfernen“. Dadurch wird das Bild immer noch gelöscht, so dass unsere Bildfunktionalität nun vollständig ist. 137. Bereitstellung in Netlify: Der erste Schritt zur Bereitstellung unserer Anwendung im Web besteht darin, unser Projekt für unsere Produktion zu erstellen. Wir können dieses Bundle für die Produktion erstellen, indem Sie den Build-Befehl verwenden, den Sie sehen können, wenn wir zu package.json gehen, in der Seitenleiste. Öffnen Sie dies, und bis jetzt, um unser Projekt auszuführen, haben wir NPM run bedient ausgeführt , der mit unserem Entwicklungsserver beginnt, und es wird uns auch Dinge wie Fehlermeldungen während der Entwicklung geben, aber wir wollen nicht Dinge wie diese während der Produktion sehen. Stattdessen wollen wir eine produktionsfähige Version unserer Anwendung erstellen, die ein JavaScript-Paket ist. Wir können dies mit dem Befehl direkt unten tun, der gebaut ist, und wir, wieder, führen dies aus dem Terminal. Was wir tun müssen, ist zu drücken „Control“ und „C“, um das Terminal zu schließen, und dieses Mal, MPM laufen Build, und dies beginnt mit dem Bau unseres Projekts und alle Dateien werden innerhalb eines Disk-Ordners platziert werden. Wir werden das in nur einer Sekunde sehen, wenn das fertig ist. Wir können das jetzt über die obere Seite unserer Sidebar sagen. Dieser Disc-Ordner enthält eine produktionsfertige Version unserer App, alle unsere CSS, unsere Bilder und auch unsere JavaScript-Pakete enthält. Für JavaScript öffnen wir dies, enthält unser Bundle, über das wir zuvor gesprochen haben, oder mehrere Bundles, wenn wir Lazy Loading verwenden, genau wie wir hier sind. So sehen wir Dinge wie unsere Admin-Pakete, unsere App-Bundles, unser App-Home, unsere Kartengruppen, die wir für die Chunk-Gruppen einrichten. Wir sehen die nicht gefundene Seite, und dies sind alle Lead-JavaScript-Bundle-Dateien, die einzeln oder zusammen aus dem Browser heruntergeladen werden können . Diese Dateien sind auch verkleinert und für die Produktion optimiert, und wir entfernen auch Dinge wie Fehlermeldungen und alle Warnungen, die wir während der Entwicklung sehen. Wir können nun diesen Datenträgerordner nehmen und diesen verwenden, um einen Hostingdienst bereitzustellen. Der Hosting-Service, den ich Ihnen zeigen werde, wird bei netlify.com vorbei sein. Es gibt viele große Hosting-Provider da draußen, aber das ist wirklich beliebt und ein einfacher, mit zu beginnen, und es gibt auch eine großzügige kostenlose Version zu. Um dieses Hosting nutzen zu können, werde ich das Terminal öffnen und die Netlify CLI nutzen. Wenn Sie die Netlify CLI in der Vergangenheit nicht verwendet haben, müssen wir diese global installieren. Wir tun dies mit MPM, installieren. Dies ist die Netlify_CLI, und dann müssen wir das Flag -g verwenden, um dies global zu installieren. Ich habe dies bereits installiert, also werde ich nicht die Eingabetaste drücken, und wenn Sie irgendwelche Berechtigungen, Fehler sehen , bei denen eine Einstellung dies deaktiviert ist, müssen Sie möglicherweise auch diese Berechtigungen beheben oder die pseudoprefix, um dies als Administrator zu installieren. Sobald wir Zugriff darauf haben, können wir dann verschiedene Netlify-Befehle verwenden, und der, den wir verwenden möchten, ist der Deploy-Befehl. Stellen Sie sicher, dass Sie sich im Projektordner befinden, drücken Sie „Enter“. Wenn Sie Netlify zum ersten Mal verwenden, müssen Sie sich möglicherweise auch anmelden oder ein neues Konto erstellen, wenn Sie noch kein Konto haben. Nachdem Sie sich angemeldet und Ihre E-Mail bestätigt haben, werden Sie in den Kontobereich im Browser weitergeleitet, wo Sie auch ein neues Projekt erstellen können. Tun Sie dies nicht im Browser, da wir dies genau hier im Terminal tun werden . Möglicherweise werden Sie auch aufgefordert, in Netlify CLI bei Ihrer ersten Verwendung zu autorisieren. Ich bin bereits eingeloggt, da ich das in der Vergangenheit oft benutzt habe. Also zurück zu diesem Terminal, müssen wir ein paar einfache Fragen beantworten, um loszulegen. Zunächst einmal haben wir noch keine neue Website, also werden wir eine innerhalb von Netlify erstellen. Ich habe meine Teamnamen bereits in Netlify eingerichtet, also drücke ich „Enter“. Wir können auch in einem Website-Namen hinzufügen, wenn wir wollen. Dies ist optional. Wir können auch einfach „Enter“ drücken und Netlify wird eine für uns generieren. Als nächstes das öffentliche Verzeichnis, und das ist der Ort innerhalb unseres Projekts, wo unsere neu gebaute Website gespeichert werden soll. Wir sehen nur, dass unsere innerhalb des Disk-Ordners gespeichert ist. Also werde ich drücken „Enter,“ und dies wird eine Bereitstellung eines Entwurfs Website ermöglichen. Hier, wenn wir das nur etwas breiter dehnen, haben wir eine Website, einen Entwurf URL, öffnen Sie diesen Entwurf URL innerhalb des Browsers, und dann sehen wir eine Live-URL, die unsere Website anzeigt. Wir können klicken und überprüfen, dass alles funktioniert. Das sieht bis jetzt alles gut aus. Wir sehen unsere Karte. Wir können auch bearbeiten und wir sehen alle verschiedenen Seiten und Kategorien zu. Aber am Ende unserer Haupt-URL, lassen Sie uns versuchen, in den Admin zu gehen. Nun, wir sehen Seite nicht gefunden, und auch, wenn wir zu einer unbekannten URL gehen, sehen wir die gleiche Nachricht. Der Fehler liegt darin, dass wir eine einseitige Anwendung erstellt haben, was bedeutet, wenn wir diese Anwendung besuchen, erhalten wir ein einzelnes JavaScript-Paket, dem wir bereits wissen. Wir navigieren dann durch unsere Anwendungsseiten auf dem Frontend mit dem Router. Wenn wir /admin eingeben oder tatsächlich etwas selbst manuell vorwärts schrägen, stellen wir dann eine Anfrage an den Server und erwarten, dass diese Seite verfügbar ist. Allerdings haben wir, wie wir wissen, eine einseitige Anwendung, wir haben nicht mehrere Seiten, die vom Server angefordert werden können. Stattdessen, wenn wir Dinge wie den Router-Link verwenden, wird dies den Abschnitt nur hier abfangen und dann den genauen Teil des JavaScripts finden , den wir im Browser anzeigen müssen. Die Lösung hierfür bei der Verwendung von Single-Page-Anwendungen besteht darin, zusätzliche Seitenanfragen zu ignorieren und immer wieder unsere Hauptseite zurückzugeben. Dann kann sich unser Router auf dem Frontend um alle Seiten kümmern , die angezeigt werden müssen. Tun Sie dies und servieren Sie diese Homepage nur auf Anfrage. Das ist ziemlich einfach zu tun. Gehen Sie in den neu erstellten Ordner dist, und erstellen Sie innerhalb des Stammes unseres Festplattenordners eine neue Datei, die _forwards genannt wird. Die Syntax, um nur unsere Homepage zurückzugeben, sieht so aus. Es ist /* /index.html und dann 200. Dies teilt dem Webserver unabhängig davon mit, welche Seite wir anfordern möchten, nur zurück nach Hause main index.html, und auch den Service-Statuscode von 200, was bedeutet, dass alles in Ordnung ist. Immer diese richtige Nachricht zurückgeben bedeutet, dass wir alle Fehler am Frontend behandeln müssen und wir tun dies mit unserer nicht gefundenen Komponente. Geben Sie dieser Datei ein Speichern und wir können Ihre Anwendung erneut bereitstellen, wodurch wir das Terminal löschen und netlify deploy für ein zweites Mal ausführen. Das veröffentlichte Verzeichnis ist immer noch dist. Dann rufen Sie den Entwurf an, und wir sehen, dass alle Seiten noch funktionieren. Wenn wir versuchen, zum Schrägstrich zu gehen, dann alle zusätzlichen Seitenanfragen. Netlify reagiert dann mit unserer Hauptindexseite zurück. Dann erkennt der vue Router, dass wir die Admin-Komponente zu laden haben, und deshalb sehen wir den Admin auf dem Bildschirm. Lassen Sie uns versuchen, die 404-Seite mit einer unbekannten Route und wir sehen Seite nicht gefunden. Okay, gut. Sobald wir froh sind, dass alles funktioniert, können wir jetzt diesen Entwurf URL loswerden und eine Live-Produktionsversion generieren. Die Art und Weise, wie wir dies tun, ist, wieder, Netlify deploy auszuführen, aber diesmal —prod, um das zu signalisieren. Wir sind zufrieden mit allem, was wir sehen, und wir wollen das endlich in die Produktion bringen . Da gehen wir. Unsere Bereitstellung ist jetzt live, und wir sehen unsere Website-URL anstelle des Entwurfs. Öffne das auf. Da ist unsere fertige Version. Lassen Sie uns einfach noch einmal unsere unbekannten Routen testen. Da gehen wir. Wenn wir auch in unser Netlify-Konto gehen, loggen Sie sich ein, wenn Sie müssen, sehen wir jetzt unsere Websites gerade hier. Klicken Sie auf diese, und dies ist die gleiche URL, die wir gerade im Browser gesehen haben. Dies ist ein Live-Link und es wird für jedermann verfügbar sein, um im Web zu sehen. Wir können auch auf unsere Domain-Einstellungen zugreifen. Wenn Sie einen benutzerdefinierten Namen in den Optionen wünschen, können wir den Namen bearbeiten, und Sie können diesen auch so ändern, dass er etwas beschreibender ist, solange der Name in der Vergangenheit nicht von jemand anderem verwendet wurde. Dies wird auch die.netlify.app Erweiterung haben, wenn wir diesen kostenlosen Plan verwenden. Oder Sie können auch eine vollständig benutzerdefinierte Domain verwenden, wenn Sie bereits eine besitzen. Oder Sie können auch einen von Netlify kaufen. Schließlich macht Netlify es auch wirklich einfach, eine sichere Website standardmäßig zu haben, können wir sehen, wenn wir darauf klicken, haben wir das Vorhängeschloss-Symbol gerade hier. bedeutet, dass unsere Website standardmäßig mit einem SSL-Zertifikat geladen ist, was bedeutet, dass unsere Website sicher ist. Wir können dies auch unten unten in unseren Einstellungen sehen, unter dem HTTPS. Wenn Sie auch eine benutzerdefinierte Domain hochgeladen haben, können Sie diese auch kostenlos aktivieren. Dies ist unsere Website jetzt im Web bereitgestellt, die Sie jetzt mit Freunden und Familie teilen können. 138. Vielen Dank!: Willkommen, du hast es bis zum Ende geschafft. Herzlichen Glückwunsch dazu, so weit zu kommen. Ich hoffe wirklich, Sie haben den Kurs genossen und haben viel davon herausgeholt, und auch genossen, die Projekte zu bauen. Das ist es vorerst. Lerne weiter, baue weiter Dinge, und ich werde dich im nächsten sehen.