Vue JS 3: Kompositions-API (mit Pinia & Vite)

1. Willkommen!: Wenn Sie bereits mit U2 und der Options-API vertraut sind, erfahren Sie in diesem Kurs alles, was Sie wissen müssen, um zu V3 und der unglaublichen neuen Kompositions-API umzusteigen und mit ihm zu beginnen . Mein Name ist Danny, ich bin in Indien App-Entwickler und erstelle ein Budget, die bestbewertete persönliche Finanzierung für iOS, Android, Mac oder Windows. Und ich habe die letzten 12 Monate damit verbracht, 42 zu erstellen, das auf U3 und der Kompositions-API in diesem Kurs basiert der Kompositions-API in diesem Kurs Zunächst lernen Sie die wichtigsten Unterschiede in der Options-API und der Kompositions-API kennen indem Sie eine einfache Optionen-API-App und sie in die Kompositions-API konvertieren. Dann beherrschen Sie alle Grundlagen, einschließlich reaktiver Daten mit Rafts und reaktiven Objekten, Methoden, berechneten Eigenschaften und Uhren, Lebenszyklus-Hooks, Direktiven, View-Router, untergeordneten Komponenten, einschließlich der neuen Wege. Schließlich emittiert Crops dynamische Komponenten mit modalen Werten, die zusammengesetzt werden können, wie man sie von Grund auf neu erstellt und wie man sie aus der View-Use-Bibliothek importiert , und Sie lernen Statusverwaltung mit Penny auf den unglaublichen Nachfolger, um x zu sehen, nachdem er diese grundlegenden gelernt hat. Sie erstellen also eine reale App namens Notizbälle von Grund auf neu, die über volle Crowd-Funktionen verfügt. Es verwendet Penny- oder Falsch-State-Management und zeigt reale Nachrichten über alle Grundlagen, die Sie zuvor gelernt haben. Nach diesem Kurs können Sie Ihre eigenen neuen drei Apps erstellen, Ihre eigenen neuen drei Apps erstellen vollständig auf der Kompositions-API basieren, vollständig von Grund auf neu. Dieser Kurs erfordert ein grundlegendes Verständnis, wenn Sie die Optionen API, HTML, CSS und JavaScript tunen , schauen Sie sich bitte die Vorschauvideos an und ich freue mich darauf, Sie im Kurs zu sehen. 2. Einführung [Modul 1]: Hi da. Mein Name ist Danny Cano. Willkommen zu diesem Kurs, Vue.js drei Composition API mit Penny auf VT. Wenn Sie bereits mit V2 und der Options-API vertraut sind. Und dieser Kurs bringt Ihnen alles bei, was Sie wissen müssen, um zu B3 und der Kompositions-API umzusteigen und damit zu beginnen. Hier ist ungefähr, was wir in diesem Kurs machen werden. Im ersten Modul stelle ich euch den Kurs vor. Erklären Sie, was die Kompositions-API ist. Zeigen Sie Ihnen mein Editor-Setup, bei dem es sich um VS-Code handelt, einschließlich der Installation aller Erweiterungen, die ich verwenden werde. Ich werde Vue Dev-Tools installieren , die uns bei unserer Entwicklung helfen. In Modul zwei stellen wir Ihnen die V3-Dokumentationsseite vor. Wir werden NodeJS installieren, damit wir mit der Erstellung von V3-Apps beginnen können . Und wir werden ein View-Projekt mit dem neuesten Build-Tool mit VTE erstellen . Dann bereiten wir dieses Projekt vor, damit wir anfangen können, die Grundlagen zu erlernen. Im dritten Modul werden wir uns die wichtigsten Unterschiede zwischen der Options-API und der Kompositions-API ansehen . Wir werden eine sehr einfache Optionen-API-App erstellen uns daran zu erinnern, wie die Optionen-API funktioniert hat. Dann werden wir diese einfache Optionen-API-App konvertieren , um stattdessen die Kompositions-API zu verwenden. Dies wird uns eine sehr schnelle und einfache Möglichkeit geben, die wichtigsten Unterschiede zwischen den beiden Ansätzen zu erkennen . Dann werden wir die Unterschiede zwischen den beiden verschiedenen Mustern nachschlagen, die wir mit der Kompositions-API verwenden können, bei der es sich um beiden verschiedenen Mustern nachschlagen, die wir mit der Kompositions-API verwenden können , bei der das ältere Setup-Funktionsmuster und das neuere und überlegene Skript-Setup handelt muster. Im vierten Modul werden wir alles über Daten erfahren. Wir werden mehr über reaktive Daten einschließlich Refs und reaktive Objekte lernen. Wir werden etwas über Zwei-Wege-Bindung lernen und uns nicht reaktive Daten ansehen. Im fünften Modul dreht sich alles um Methoden. Wir werden mehr über Methoden, berechnete Eigenschaften und Uhren lernen. In Modul sechs erfahren wir alles darüber, wie wir Lifecycle-Hooks in der Kompositions-API unterschiedlich verwenden , einschließlich geschmolzener Hooks, aktivierte Hooks, aktualisierte Hawks und wie wir mehrere Hooks von verwenden können der gleiche Typ innerhalb einer einzelnen Komponente. In Modul sieben werden wir alles über Richtlinien in der Kompositions-API lernen . Wir werden lernen, wie man lokale benutzerdefinierte Richtlinien erstellt, die für eine einzelne Komponente lokal sind. Dann schauen wir uns an, wie wir globale Kundenrichtlinien erstellen können , die von einer der Komponenten in unserer App verwendet werden können. Im Modul acht erfahren wir alles darüber, wie wir Vue Router in der Kompositions-API unterschiedlich verwenden , einschließlich der Art und Weise, wie wir die Dollarrouten verwenden können, um Informationen von unserem Router in unserem und die brandneuen US-Routen und verwenden Router Composable. In Modul neun lernen wir mehr über Listen mit v4, der erstaunlichen neuen Teleport-Komponente. Wir werden lernen, wie man Template-Refs verwendet , damit wir auf Elemente zugreifen können die sich in unserer Komponente befinden, und dann etwas mit diesem Element tun können, wenn unsere Komponente geladen wurde, z. B. das Fokussieren einer Eingabe, wir werden auch lernen, wie man das nächste Häkchen mit der Kompositions-API verwendet . Modul zehn erfahren wir alles über untergeordnete Komponenten, einschließlich der Möglichkeit, Inhalte mithilfe von Slots an eine untergeordnete Komponente weiterzugeben . Es kann Daten mithilfe von Requisiten an untergeordnete Komponenten übergeben. Wie wir ein Kundenereignis von einer untergeordneten Komponente mithilfe von Emits an eine übergeordnete Komponente emittieren können , wie wir eine untergeordnete Komponente dazu bringen können , eine Dateneigenschaft für ihre übergeordnete Komponente mithilfe des Modalwerts zu ändern ihre übergeordnete Komponente mithilfe und den Modellwert aktualisieren, werden wir uns dynamische Komponenten ansehen , die es uns ermöglichen, die Komponente auszuschalten , die in einem bestimmten Teil unserer App verwendet wird . Und wir werden uns ansehen, wie wir Daten von einer übergeordneten Komponente an alle ihre nachfolgenden Komponenten bereitstellen können Daten von einer übergeordneten Komponente an alle ihre nachfolgenden Komponenten bereitgestellte Injektionen verwenden. Modul 11 erfahren Sie alles über Composable, welches eine der aufregendsten neuen Funktionen mit B3 ist Wir werden zuerst die Frage beantworten, was ist ein Composable? Dann erstellen wir ein benutzerdefiniertes Composable, das es uns ermöglicht, reaktive Daten, nicht verwandte Methoden über unsere Komponenten hinweg zu teilen. Dann installieren und richten wir auch ein Composable aus der View-Bibliothek ein. In Modul 12 werden wir alles über das staatliche Management mit Pena erfahren , das derzeit der Goldstandard für die Staatsverwaltung in v3-Kompositions-Apps ist Staatsverwaltung in v3-Kompositions-Apps Wir werden zuerst die Antwort auf die Frage, was ist das Staatsmanagement? Wir werden drei verschiedene Ansätze für das Staatsmanagement in einer Ansicht betrachten , drei nach oben, wobei beide Composable ein paar Pfennige verwendet werden. Und wir werden uns die Unterschiede zwischen diesen ansehen. Dann werden wir alles über den Staat mit Penn erfahren. Im Bundesstaat speichern wir alle unsere Dateneigenschaften, einen Videoladen. Jetzt werden wir alles über Aktionen mit Penny erfahren. Und Aktionen sind Methoden , die sich in unserem Geschäft befinden, mit denen wir die Daten in unserem Bundesstaat ändern können. Dann lernen wir etwas über Getter kennen, die es uns ermöglichen, einige Daten aus unserem Bundesstaat zu erhalten, sie in irgendeiner Weise zu ändern und diese Daten dann allen unseren Komponenten zur Verfügung zu stellen . Zu diesem Zeitpunkt werden wir alle Grundlagen von Fe3 und der Kompositions-API behandelt haben . Ich werde all dieses Wissen in die Praxis umsetzen , indem ich eine reale App namens Nope balls erstelle, eine Notizen-App, die wir mit der Bohmer CSS-Bibliothek reaktionsschnell und vorzeigbar aussehen lassen werden . Ich stelle dir die Notiz Pauls App vor. Dann erstellen wir ein brandneues Projekt mit dem neuesten View-Build-Tool. Auch hier installieren wir Vue Router mit V8 manuell vollständig von Grund auf neu und richten alles von Grund auf neu ein. Dann werden wir in Modul 14 mit der CSS-Bibliothek am Design unserer App arbeiten . Wir werden Bohmer installieren, ein wunderschönes Navbar-Design erstellen, das ansprechend ist, das direkte Links zu A2-Seiten auf dem Desktop anzeigt und dann ein Burger-Menü auf dem Handy anzeigt. Und dann arbeiten wir an der Gestaltung unserer Notizseite. Im Modul 15. Ich füge unserer App einige Datenmethoden und untergeordnete Komponenten hinzu. Wir werden die Daten und Methoden zum Hinzufügen einer neuen Notiz einrichten . Wir erstellen eine untergeordnete Komponente für unsere Notizen. Wir werden Daten mithilfe von Requisiten an diese untergeordnete Komponente übergeben . Wir werden eine berechnete Eigenschaft einrichten und die Möglichkeit hinzufügen, einen Knoten zu löschen. Modul 16. Wir werden einen Penny installieren alles komplett von Grund auf neu aufstellen. Und wir werden auch eine wiederverwendbare Komponente erstellen, die wir auf mehreren Seiten in unserer App verwenden werden. Nachdem wir also Pennies installiert haben, werden wir die Bundesstaaten für unsere App einrichten , in denen wir alle unsere Notizendaten speichern werden. Dann richten wir einige Aktionen zum Hinzufügen, Löschen und Aktualisieren einer Notiz ein. Dann erstellen wir einen Getter in unserer Pennys Tür, um in unserer Pennys Tür den Inhalt einer Notiz basierend auf der ID einer Notiz zu erhalten. Dann erstellen wir eine zweite Seite, eine Statistikseite, Statistiken angezeigt werden, die auf unseren Notizdaten basieren. Ich werde ein paar neue Getter einrichten, um dies zu tun. Wir werden auch eine wiederverwendbare Komponente erstellen, die wir auf mehreren Seiten in unserer App verwenden werden. Wir werden diese wiederverwendbare Komponente mithilfe von Requisiten anpassbar machen . In Modul 17 werden wir unseren App-Notizbällen einige Richtlinien, Uhren und Composable hinzufügen . Wir werden eine Richtlinie hinzufügen, die es uns ermöglicht, einen Textbereich automatisch zu fokussieren. Ich werde diese Richtlinie global gestalten und auf mehreren Seiten verwenden. Wir werden einen Beobachter einrichten. Wir werden ein benutzerdefiniertes Composable erstellen , mit dem wir reaktive Daten und verwandte Methoden seitenübergreifend austauschen können . Dann werden wir das Composable verbessern, indem wir es erlauben , mehrere Parameter zu akzeptieren. Und wir werden auch ein Composable aus der View-Use-Bibliothek hinzufügen , den Klick außerhalb von Composable. Schließlich bin ich in Modul 18 ein Löschmodal für unsere App, das angezeigt wird, wenn wir versuchen, eine Notiz zu löschen. Und wir werden uns auffordern zu bestätigen, dass wir das Modal einrichten es vorzeigbar aussehen lassen. Wir werden diesem Modal erlauben, Daten auf seiner übergeordneten Seitenkomponente mithilfe des Modalwerts und des Update-Modellwerts zu ändern seiner übergeordneten Seitenkomponente mithilfe Modalwerts und des Update-Modellwerts . Wir werden den Klick außerhalb von Composable aus der Ansicht wiederverwenden außerhalb von Composable aus der Ansicht verwenden, damit wir außerhalb dieses Modals klicken können, um es zu schließen, werden wir einige Pyramidensteuerungs-Pyramiden einrichten , damit wir Escape drücken können , um das Modal dabei zu schließen , um das Modal dabei wir werden auch einige Lebenszyklus-Haken nutzen . 3. Was ist eine Kompositions-API?: Die Kompositions-API ist das größte neue Feature , das mit V3 geliefert wurde. Aber was ist die Kompositions-API? Nun, es gibt uns eine neue Möglichkeit, View-Komponenten zu erstellen, eine Alternative zur Options-API. Jetzt können wir die Options-API immer noch in v3 ups verwenden, aber ich würde erwägen, die Kompositions-API ausschließlich zu verwenden , insbesondere bei komplizierteren Apps und Anzeigen von Komponenten. Die Kompositions-API löst zwei Hauptprobleme, die wir manchmal bei Optionen-API-Apps sehen, insbesondere kompliziertere Ups. Nummer eins ermöglicht es uns, relevanten Code in den Skriptabschnitten unserer View-Komponenten einfacher zu gruppieren . Und Nummer zwei ermöglicht es uns, unseren Code einfacher in unseren reaktiven Daten und unseren Methoden und Uhren usw. mit Composable wiederzuverwenden. Um dies zuerst zu demonstrieren, werfen wir einen Blick auf diesen Options-API-Code. In der Options-API haben wir unseren Standardexport, und innerhalb dessen haben wir alle unsere verschiedenen Optionen durch Optionen getrennt. Ich meine Dinge wie Datenmethoden, Lifecycle-Hooks. In diesem Beispiel haben wir hier zwei völlig unabhängige Datenmengen. Wir haben eine Username-Eigenschaft außerhalb der Eigenschaft, um festzustellen, ob ein Modal angezeigt wird oder nicht. Dann haben wir in unserer Methodenoption eine Methode zum Aktualisieren des Benutzernamens und eine Methode zum Anzeigen des Modals durch Ändern dieser Dateneigenschaft. Wir haben auch einen Lebenszyklushaken, den montierten Haken, der beide Methoden auslösen wird. gesamte relevante Code ist jedoch getrennt. Wir lassen den Benutzernamen erscheinen. Die Methode für den Benutzernamen hier unten. Der Auslöser dieser Methode in diesem geschmolzenen Hawk hier unten. Dies bedeutet, dass wir in komplizierteren Komponenten viel auf und ab zu Datenmethoden, berechneten Eigenschaften und Lebenszyklus-Hooks scrollen ab zu Datenmethoden, müssen, um an Code zu arbeiten, der verwandt ist. Die Kompositions-API löst dieses Problem, indem es erlaubt, alle diese Optionen zu entfernen , und erlaubt, unseren gesamten Code logisch zu gruppieren. Werfen wir einen Blick auf eine Kompositions-API-Version dieses Codes. In diesem Beispiel machen wir genau das Gleiche. Wir richten reaktive Datenvariablen für unseren Benutzernamen ein, und unsere modal angezeigten Datumseigenschaften mit dem Einrichten von Methoden zur Manipulation dieser Dateneigenschaften haben diese Methoden immer noch in der Haken hier und hier montiert. Außer dieser Zeit ist unser gesamter relevanter Code zusammengefasst. gesamte Code, der sich auf den Benutzernamen bezieht , ist hier gruppiert. Auf dem gesamten Code, der sich auf das Modal bezieht , wird hier zusammengefasst , wobei die Kompositions-API nicht nur Dateneigenschaften, Methoden und Lebenszyklus-Hooks besteht . Wir können uns zusammenfassen, wir können alles zusammenfassen, ob es sich um Berechnungen, Immobilien , Uhren, Richtlinien usw. handelt, was unser Leben viel einfacher macht, besonders wenn wir daran arbeiten viel kompliziertere und längere Komponenten anzeigen. Das zweite Problem, nicht die Kompositions-API, ist, dass es uns viel einfacher macht, Code über unsere Komponenten mithilfe von Composable in der Options-API wiederzuverwenden über unsere Komponenten mithilfe Composable in der Options-API Wir könnten Code über Komponenten hinweg teilen unter Verwendung von Mixins. Werfen wir einen Blick auf unser Optionen-API-Codebeispiel. Nehmen wir noch einmal an, wir möchten Benutzernamen-Dateneigenschaft und unsere Update-Username-Methode für mehrere Komponenten in der Options-API wiederverwenden unsere Update-Username-Methode für mehrere Komponenten in der Options-API Wir könnten diesen Code in ein Mixin extrahieren, z. B. wo wir buchstäblich die Eigenschaft Benutzername data die Oktettbenutzername-Methode kopiert und in ein Mixin eingefügt haben. Wir können dieses Mixin dann in eine Komponente oder eine Reihe verschiedener Komponenten wie diese importieren, den mischenden Benutzernamen aus usw. importieren. Aber in diesem Beispiel importieren wir hier auch verschiedene Mixin , was nichts zu tun hat. Dieses Mischen Modal mischt sich ein. Und Sie können sehen, dass im MTSU-Gespräch, wo Feuermethode aus dem mischenden Benutzernamen diese Username-Methode aktualisiert. Das Problem ist, dass es nicht offensichtlich ist, woher diese Methode kommt. Kommt es von der Benutzernamenmischung oder kommt es von den Modalseen, wenn Sie mit dem Projekt , an dem Sie gerade arbeiten, nicht vertraut sind, können Sie möglicherweise nicht sagen, wo Diese Methode kommt aus, ohne diese Mischdateien tatsächlich zu öffnen und ich schaue mir den Code an. Auch dies kann zu einem großen Problem in komplizierteren View-Apps werden komplizierteren View-Apps bei denen wir viele verschiedene Komponenten haben, wobei viele verschiedene Mix-Ins verwendet werden. Werfen wir noch einmal einen Blick auf unser Kompositions-API-Beispiel. Sagen wir, wir wollen das Gleiche tun. Wir möchten die Benutzernamen-Datenvariable extrahieren und diese Update-Username-Methode extrahieren bei der wir diese ausschneiden und in eine Composable einfügen können, die ungefähr so aussehen würde. In einem Composable exportieren wir einfach Funktion. Und Sie können darin sagen, dass wir auch unsere Benutzernamendatenvariable und unsere Update-Username-Methode haben. Und wir können dieses Composable dann in jede beliebige View-Komponente importieren . Auf diese Weise importieren wir einfach die Root-Level-Funktion , die wir exportiert haben. Dann können wir mit der Strukturierung nur das Zeug extrahieren, das wir brauchen, aus diesem Composable. In diesem Fall extrahieren wir die Datenvariable für Benutzernamen und die Update-Username-Methode. Wenn wir jetzt etwas aus unserem Composable verwenden, z. B. in diesem gemounteten Hook, lösen wir die Update-Username-Methode aus. Wir können genau sehen, woher diese Methode kommt. Dies wird wiederum mit der Kompositions-API zu einem enormen Vorteil, insbesondere bei viel komplizierteren Apps und View-Komponenten. Hoffentlich erklärt dies die massiven Vorteile , die mit der Kompositions-API gegenüber der Options-API verbunden sind . 4. Editor und Softwareeinstellung: Sie können jeden gewünschten Editor für diesen Kurs verwenden, aber ich werde VS Code verwenden weil er kostenlos ist und eine Reihe verschiedener Erweiterungen , die unser Leben erleichtern werden. Wenn Sie möchten, dass das gleiche Setup vorgenommen wird , folgen Sie weiter. Sie möchten zu Code dot Visual Studio.com gehen. Lade es einfach herunter. Wenn Sie unter Windows sind, müssen Sie möglicherweise ein Installationsprogramm ausführen , aber auf einem Mac erhalten Sie eine Zip-Datei mit einer App, die Sie einfach in den Anwendungsordner ziehen können . Ich hole einfach den Ordner „Anwendungen“ und ziehe den dort hinein. Wir sollten es jetzt starten können. Klicken Sie auf „Öffnen“. Wir können jetzt die Standardinstallation von VS-Code sehen. Ich ziehe nur ein View-Projekt hinein nur um einige der Erweiterungen zu demonstrieren , die wir verwenden werden. Obwohl du das nicht tun musst. Aber wenn Sie ein View-Projekt haben, wie haben sie es einfach hineingezogen? Ich ziehe diese Ansichtstests nach oben, was im Grunde nur die Standardansicht-App ist, die mit dem neuesten Build-Tool erstellt wurde. Damit werden wir später benutzen, ich klicke auf Wahrheiten und dann ja. Dann werde ich das nur ein bisschen vergrößern. Vergrößern Sie, indem Sie Command Plus zulassen drücken. Die Verknüpfung kann unter Windows unterschiedlich sein. Lassen Sie uns ein paar Erweiterungen installieren. Wir möchten das hier mit diesen kleinen Quadraten anklicken . Dies ist der Erweiterungsspeicher. Bei den ersten beiden Erweiterungen befinden sich ein Icon-Thema und ein Gesamtthema um den Bewerber etwas hübscher zu machen, aber diese sind nur völlig optional. Du willst also nach Material suchen, nenne ich Theme. Wir wollen das hier haben. Klicken Sie auf Installieren. Und dann möchten wir Material Icon Theme aus diesem Dropdown-Menü auswählen . Und wenn wir jetzt zum Explorer zurückkehren, werden Sie sehen, dass wir in unserem Explorer diese schönen Icons für all unsere verschiedenen Arten von Dateien haben diese schönen Icons für , wie zum Beispiel diese schönen kleinen View-Symbolfall-Komponenten. Gehen wir zurück zum Extension Store und ich suche nach Make-Apps Theme. Und das ist das Gleiche, was ich verwende, aber das ist völlig optional. Darauf klicke ich. Klicken Sie auf Installieren. Wählen Sie im Dropdown-Menü den Make-ups-Namen aus. Dies ist ein entspanntes, augenschonendes Thema mit netter, sanfter Syntaxhervorhebung. Wie Sie hier sehen können. Wenn Ihnen dieses Thema nicht gefällt, gibt es eine Website, auf der Sie alle verschiedenen Themen durchsuchen können . Du willst zu gehen. Vs Code themes.com. Bis zu den verschiedenen hellen und dunklen Themen findest du hier. Wähle einfach eine aus, die dir gefällt. Ich schließe das einfach und gehe zurück zum Extension Store. Wir werden eine Erweiterung installieren, als doppelte Aktion bezeichnet wird. Also suche ich einfach danach. Es ist dieser hier. Klicken Sie auf Installieren. Was dies tun wird, ist, wenn wir zu unserem Explorer zurückkehren rechten Maustaste auf eine Datei klicken. Wir haben jetzt diese Option, eine Datei oder ein Verzeichnis zu duplizieren, was sehr praktisch ist, wenn Sie an View-Apps arbeiten, weil Sie möchte oft einfach eine Komponente duplizieren und dann ändern. Und ich gehe standardmäßig wieder zum Extension Store zurück, wie du zuvor gesehen hast. Ansicht-Komponenten sehen nicht sehr hübsch aus. Und sie sagten: Wir werden das mit der nächsten Erweiterung beheben. Und wir möchten nach view volar extension, APAC suchen. Wir müssen ziemlich viel nach unten scrollen , um den richtigen zu finden. Es ist das hier von Bruder January. Das werde ich installieren. Dies hat eine Reihe verschiedener Erweiterungen pro TEA, ein Codeformate, das ist ein Codeformat, das ich tatsächlich deaktivieren werde, weil ich kein wirklich großer Fan von Codeformaten bin , ist ein abwechselndes Tag, das wird Benennen Sie Angriffe automatisch um. Wenn wir das Eröffnungsziel umbenennen, benennen Sie das schließende Tag für uns um. Wir haben einige JavaScript-Code-Snippets, Auto-Close-Tag das HTML-Tags automatisch schließt, und dann eine Reihe anderer. Die wichtigsten, die wir hier bei diesen beiden unten wollen, werden uns schöne Syntaxhervorhebungen, Sprachunterstützung, View-Snippets und ähnliches geben . Ich möchte das installieren, und das ist jetzt installiert, aber ich werde tatsächlich einige dieser Erweiterungen deaktivieren , die hinzugefügt wurden. Ich werde das Suchfeld löschen und wir könnten hier durch unsere installierten Erweiterungen scrollen . Ich werde hübscher deaktivieren, was übrigens, wie ich glaube, die nächste Erweiterung beeinträchtigen kann , die wir installieren werden, aber Sie können es Arm lassen, wenn Sie es vorziehen und sehen, ob es für Sie funktioniert. Ich deaktiviere CSS Lint weil wir in diesem Kurs kein TypeScript machen werden . Viel darüber. Also klicke ich auf diese Schaltfläche „ Erforderlich neu laden “, um die App neu zu laden. Sie werden sehen, dass wir jetzt diese schöne Syntaxhervorhebung für unsere View-Komponenten haben. Die letzte Erweiterung, die ich installieren werde, heißt geteilte HTML-Attribute. Wenn wir an View-Apps arbeiten, haben wir oft Elemente von View-Komponenten mit unzähligen verschiedenen Attributen, Direktiven und Klickhandlern, all das. Diese können ziemlich lang werden und wir möchten oft jedes Attribut in einer neuen Zeile wie dieser verwenden, was wirklich zeitaufwändig ist, um es manuell zu tun. Nun, diese Erweiterung wird das für uns tun. Ich suche nach geteilten HTML-Attributen. Es ist dieses mit dem grünen Symbol. installiere ich. Ich werde die Standardeinstellungen für diese Erweiterung ändern . Ich scrolle diese Beschreibung nach unten zum Einstellungsbereich hier unten. Salze oder die Option bestimmt die Reihenfolge der Attribute. Sie können also sehen, dass wir wichtigere Attribute wie Vf und Vi setzen . Vi-Modell an der Spitze und weniger wichtige Attribute wie die Klassen-ID weiter unten nach unten. Also wähle ich dieses Array aus und kopiere es. Dann gehe ich zum Einstellungen-Zahnrad und dann zu den Erweiterungseinstellungen. Ich werde dieses Kästchen hier ankreuzen, wodurch unsere schließende Klammer auf eine neue Zeile gesetzt wird , die ich bevorzuge. Und dann klicke ich unter Angriffsbefehl auf Bearbeiten in settings.js. Normalerweise viel diese Option Wälder, aber das ist es nicht. Also müssen wir es manuell machen. Eine Menge Komma hier nach dieser letzten Option, einige Zitate heraus. Und wir geben die Punktsortierreihenfolge für geteilte HTML-Attribute ein, nicht dass diese Gesamtstruktur automatisch abgeschlossen wird. Und dann wähle ich dieses Array aus. Fügen Sie diejenige ein, die wir von der Einstellungsseite kopiert haben. Spar dir das auf. Und wenn wir jetzt zu dieser App.vue-Datei zurückkehren, wenn ich dieses Bild-Tag auswähle, das ein selbstschließendes Tag ist, und phi sind die Erweiterung mit Control Alt Shift und a. Übrigens können Sie das ändern Tastenkombination wenn Sie möchten. Sie sagen, es teilt alle unsere Attribute sofort auf neue Zeilen auf. Es wird auch das Gegenteil tun. Wenn ich dies auswähle und Phi die Erweiterung wieder ist, wird es sie wieder in eine einzige Zeile versetzt. Schauen wir uns an, wie die Salzreihenfolge funktioniert. Also eine Menge V-Modellattribut am Ende myVar. Wenn wir die Erweiterung ausführen, wird dieses V-Modell hoffentlich oben platziert , dh ich werde alle meine Änderungen hier rückgängig machen. Spar dir das auf. Ich denke, das sind alle Erweiterungen, die ich verwenden werde. Wir werden das Terminal auch oft im VS-Code verwenden , um das Terminal umzuschalten, drücken Sie einfach die Strg-Taste und Buck krank und es wird so auftauchen. Und Sie können es auch mit derselben Verknüpfung verschwinden lassen , Ihre Eingabeaufforderungen sehen vielleicht etwas anders aus, aber keine Sorge, alles sollte immer noch funktionieren. 5. Vue Devtools: Das nächste, was wir installieren möchten, sind View-Tools, die uns helfen, unsere Vue-Apps zu debuggen, insbesondere wenn wir anfangen, mit Penny zu arbeiten , später möchten Sie zum Crawlen gehen, kleine Punkte begleiten, mehr Tools und Erweiterungen. Ein Winkel zu diesem Menü auf der linken Seite. Und öffnen Sie dann den Chrome Web Store. Suchen Sie nach View, Dev-Tools. Es gibt drei verschiedene Erweiterungen hier. Zu dem Zeitpunkt, an dem ich dies aufnehme, müssen wir die Beta-Version für V3-Ups verwenden. Aber da Sie dies in Zukunft als die Release-Version sehen , könnte diese funktionieren. Also würde ich nur vorschlagen, dass Sie die Release-Version ausprobieren und ich dachte, es funktioniert nicht, dann probiere die Beta-Version aus, aber ich werde die Beta-Version installieren. Klicken Sie auf Zur Chrome-Erweiterung hinzufügen, die jetzt installiert ist. Überprüfe einfach, dass es funktioniert. Lassen Sie uns eine Ansicht im Browser starten. Ich öffne das Projekt, das ich zuvor eröffnet hatte. Springe zum Terminal und führe npm run dev aus, hat nicht funktioniert. Ich denke, das liegt daran, dass ich die Abhängigkeiten nicht installiert habe . Also führe ich zuerst npm install aus. Führen Sie dann den Befehl npm run dev aus und klicken Sie hier auf diesen Link. Es kann jetzt sehen, dass diese grundlegende View-App im Browser läuft. Launch, die Entwickler-Tools. Wir können einfach zu unseren Chrome-Entwicklungstools gehen, indem wir zu View Developer, Developer Tools gehen . Oder Sie können die Tastenkombination verwenden. Wenn wir auf diesen kleinen Pfeil klicken, sollten Sie eine Anzeigeoption haben. Und hier lebt unsere Ansicht DevTools. Und Sie können alle unsere Komponenten hier sehen. Wir können auch Daten im Zusammenhang mit Komponenten sehen. Diese Helloworld-Komponente kostet also die Nachrichteneigenschaft, den Wert von Ihnen. Ich zoome nur ein bisschen auf die Entwicklungstools. Und das wird später besonders nützlich sein, wenn wir mit dem Penn State Management zusammenarbeiten. 6. Vue 3 Docs und Installieren Node.js [Modul 2]: Okay, lasst uns jetzt anfangen, indem neue View-Projekte erstellen. Lassen Sie uns zunächst zur View Doc-Site springen. Ich gehe einfach zu Google V3. Joe auf die V3-Website. Zu der Zeit, als ich dies aufnehme, erholt sich die View Docs oder kurz davor, massiv zu sein. Ich werde die neue Version der Dokumente in diesem Kurs verwenden , weil sie uns zeigt wie man ein View-3-Projekt mit V8 mit dem neuesten Build-Tool erstellt. Um zur nächsten Version der Dokumentation zu springen, gehe ich zur Adressleiste. Habe gerade diese Version 3 in Staging geändert. Wir sehen jetzt die schöne neue Dokumentation. Wenn du das schon siehst, dann bist du es in gewisser Weise. Und dann möchten wir auf „Installieren “ klicken. Scrollen Sie ein bisschen nach unten. Bevor wir neue Vue-Projekte erstellen können, müssen wir sicherstellen, dass wir Node.js installiert haben. Wenn Sie das nicht installiert haben, klicken Sie auf diesen Link. Sie möchten wahrscheinlich den auf der linken Seite hier installieren. Und du willst das einfach herunterladen und installieren. Oder wenn Sie möchten, können Sie Tools für die Knotenversionierung wie nvm verwenden . 7. Ein a erstellen: Gehen wir zurück zur Seite „Docs anzeigen“ und erstellen unsere ersten drei Projekte mit VT mit dem neuesten Build-Tool. Um ein neues Projekt zu erstellen, kann dieser Befehl einfach in unserem Terminal ausgeführt werden. Ich zoome einfach ein bisschen hinein, NPM hinein, schau dir das Neueste an. Ich kopiere diesen VS-Code und springe zum Terminal. Und wieder können wir das mit Befehl umschalten und wieder krank sein. Ich füge diesen Befehl ein. Starte es. Übrigens möchten Sie sicherstellen, dass Sie sich in dem Ordner befinden , in dem Sie Ihre Projekte speichern. Wir müssen dieses Create View neuestes Paket installieren. Also tippe ich einfach y zwei ein, erlaube das. Es wird uns hier nach einigen Optionen für den Projektnamen fragen , auch der Ordnername sein wird. Ich werde Vue Composition API-Dash-Grundlagen verwenden da wir dies verwenden werden, um alle Grundlagen von v3 und der Kompositions-API zu erlernen . Ich werde den Knoten zu TypeScript auswählen JSX-Unterstützung weiß. Ich werde Ja wählen, um Vue Router später im Kurs zu unserer App hinzuzufügen , wenn wir unsere Kurs-App erstellen, Bälle notieren, werden wir Notizen auswählen, diese Option. Und ich zeige Ihnen tatsächlich, wie Sie Vue Router manuell von Grund auf neu installieren . Aber der Einfachheit halber werde ich, während wir die Grundlagen erlernen, Ja wählen und das Build-Tool dazu bringen , dies automatisch zu tun. Wieder zur Meinung werde ich ja wählen, obwohl ich Ihnen später im Kurs zeigen werde, wie Sie einer Ansicht drei Projekte manuell eine Meinung hinzufügen können. Ich werde wissen, um das Wissen nach Zypern erneut zu testen es fusseln zu wissen. Vielleicht möchten Sie in Erwägung ziehen, ES Lint in Ihren eigenen Projekten zu verwenden . Aber der Einfachheit halber werde ich wissen nur für die Zwecke dieses Kurses wählen , damit Sie nicht viele lästige Linting-Fehler bekommen . Aber wenn du wirklich ja wählen willst, dann kannst du es tun, aber ich werde Nein wählen. Das ist fertig. Sie können sehen, dass es unser Projekt super schnell gerüstet unser Projekt super schnell und es sagt uns, wie wir loslegen können. Wir müssen in den Ordner, den es erstellt hat, NPM install ausführen, um die Abhängigkeiten zu installieren, und npm run dev ausführen, um die App im Browser zu starten. Also springe ich einfach rüber zum Finder. Ich kann sehen, dass der Ordner hier erstellt wurde. Also ziehe ich das in den VS-Code. Öffnen Sie das Terminal erneut, führen Sie NPM install aus, um die Abhängigkeiten zu installieren. Lassen Sie uns fertig sein und wir können die App mit npm run dev starten. Wir können diese URL hier sehen. Wir befehligen und klicken darauf. Wir können jetzt sehen, dass der grundlegende V3 und V2 beginnt, im Browser zu laufen. 8. Projekteinstellung: Lassen Sie uns dieses Projekt so weit wie möglich vereinfachen , um es uns zu erleichtern , die Grundlagen von v3 und der Kompositions-API zu üben. Zuallererst wollte ich nur den Titel ändern , der oben erscheint, was derzeit VTE hoch sagt. Also gehe ich zu index.html und ändere den Text in diesem Titel-Tag, um Grundlagen der Kompositions-API anzuzeigen. Spar dir das auf. Und wir sehen dieses Update sofort und schließen das. Und jetzt vereinfachen wir unsere Seiten oder unsere Ansichten. Derzeit haben wir nur zwei Seiten oder Ansichten, die Home-Ansicht und die Ansicht. Vereinfachen wir zuerst die gesamte Ansicht, ich gehe zu Quelle und Ansichten, Home-View, Punktansicht. Ich werde diese Nachricht einfach stoppen, indem ich „ Nicht mehr anzeigen“ wähle. Ich schließe das einfach. Und manchmal verstecke ich die Sidebar hier. Wenn Sie es ausblenden möchten, können Sie zu Ansicht und Darstellung wechseln und diese Seitenleiste anzeigen umschalten oder die Tastenkombination verwenden. verstecke ich vorerst einfach. Ich entferne dieses Skript-Tag. Ich werde alles in den Template-Tags entfernen und einfach ein Div mit einer Klasse von Zuhause beginnen. Innerhalb dieser Zuweisung ist eine H1-Überschrift. Leg einfach den Text nach Hause und speichere den. Jetzt können wir sehen , dass es aktualisiert wurde. Dass ich diesen Code kopieren werde. Wechseln Sie zur „Über Vue-Punktansicht“ im selben Ordner. Füge einfach alles hier drin ein. Ich ändere die Klasse auf etwa. Ändern Sie auch den Text in der Überschrift auf etwa. Spar dir das auf. Und wir haben jetzt zwei wirklich einfache Ansichten. Jetzt lasst uns das ganze Zeug oben loswerden . Und das war's. Unsere Root-View-Komponente, die app.vue in der Quelle app.vue ist. Also öffne ich das hoch in der Seitenleiste. Wie sehr du das Terminal auch verstecken wirst. Wir müssen das Terminal die meiste Zeit nicht sehen. Alles was ich in unserem Layout wirklich will, ist diese Navigation hier, damit wir auf unsere Seiten gelangen können. Und das ist dieses Nav-Element hier mit diesen beiden Router-Link-Komponenten. Also kopiere ich dieses Nav-Element in diese beiden Router-Links. Und dann wähle ich den ganzen Header aus. Füge die einfach drüber ein. Repariere die Einrückung. Wir müssen sicherstellen, dass wir diese Router-View-Komponente verlassen , da sie es uns ermöglichen, unsere tatsächliche Ansichten, unsere Home-Ansicht und unsere Ansicht anzuzeigen. Das hebe ich dir auf. Das sieht nett und einfach aus. Ich entferne den Skriptbereich und speichere ihn. Ich werde einige dieser Stile entfernen, aber nicht alle von ihnen, weil einige von ihnen ziemlich gleich aussehen. Wenn wir das hinausziehen, können wir sehen, dass über eine bestimmte Auflösung hinaus alles bewegt wird. Also werde ich einfach die Stile entfernen , die das tun. Wenn wir diesen Stilabschnitt nach unten scrollen, können wir diese Medienabfrage hier sehen, wobei die Min-Breite auf 100 bis vier Pixel eingestellt ist. Ich werde einfach zusammenbrechen, indem ich auf diesen kleinen Pfeil daneben klicke. Wählen Sie die gesamte Medienabfrage aus. Lösche das einfach und speichere es. Und jetzt, wenn wir die Breite des Browsers vergrößern , sollte einfach gleich bleiben, was wir keine der Komponenten im Komponentenordner benötigen . Jetzt gehe ich zu den Quellkomponenten. Ich wähle alles in diesem Komponentenordner aus indem ich auf das erste Element klicke, die Umschalttaste gedrückt halte und auf das untere klicke und dann mit der rechten Maustaste auf Löschen klicke. Werde die los. Wir sehen diesen Pfeil, aber wenn wir die Seite einfach neu laden , verschwindet der Fehler. Und wir haben jetzt eine super einfache App, mit der wir beginnen können, die Grundlagen von v3 und der Kompositions-API zu erlernen . Lasst uns also anfangen, die Grundlagen zu lernen. 9. Optionen API vs. Komposition API [Modul 3]: Lassen Sie uns mit der Options-API eine wirklich einfache Zählung erstellen und konvertieren sie dann in die Kompositions-API. Dies wird uns helfen, die Unterschiede zwischen den beiden Ansätzen schnell zu erkennen . Und wir machen das in unserer Ansicht nach Hause. Ich gehe zu Quellansichten in Home-View, Punktansicht. Ich werde diese Überschrift einfach los. Ich werde nur ein Div mit einem Knopf und einem Zähler haben. Viel, ein Button-Element mit einer Klasse von BTN mit dem Text Minus. Dann dupliziere ich das. Ändern Sie den Text auf Plus. Und dann fügen wir in der Mitte eine Spanne mit einer Klasse von Zählungen hinzu. Im Moment lege ich einfach 0 rein und speichere das auf. Lassen Sie uns nur einige Stile überlegen, um dies in den Mittelpunkt stellen und es etwas hübscher aussehen zu lassen. Fügen wir einen Style-Block hinzu. Wird dieses Home-Div abzielen, das gerade an alles gesendet wurde. Halten Sie also den Text nicht in der Mitte ausrichten. Spar dir das auf. Ein bisschen Polsterung. Unser Berater wird also nicht direkt gegen das Navi angehalten. Stellen Sie die Polsterung auf 20 Pixel ein und speichern Sie das. Vergrößern wir einfach die Größe dieser Tasten und des Zählers und machen Sie zwischen allem etwas Platz. Also werde ich die Button-Klasse in der Ratsklasse ins Visier nehmen . Stellen Sie die Schriftgröße auf 14 Pixel ein. Spar dir das auf. Und ich setze den Rand auf zehn Pixel, speichere das. Das sieht ziemlich anständig aus. 10. Optionen API – Daten und Methoden: Lassen Sie uns einige Daten und Methoden einrichten, um dies mithilfe der Options-API zum Laufen zu bringen. Wir müssen unseren Skriptbereich hinzufügen. Und im Inneren müssen wir unseren Exportstandard hinzufügen. Lassen Sie uns zuerst unsere Daten einrichten. Für diesen Zähler müssen wir eine Datenmethode hinzufügen , die ein Objekt zurückgibt. Wir können alle unsere Dateneigenschaften hier einsetzen. Eine Menge Eigenschaft namens Counselor, setze das auf 0, speichere das. Das sollten wir in unserer Vorlage verwenden können. Jetzt werden Sie diese 0 los, unsere doppelten geschweiften Klammern. Und wir setzen einfach den Zähler hier rein und speichern das. Wenn ich das jetzt ändere, sollten wir es in der Vorlage aktualisieren, was wir tun. Ich setze das auf 0 zurück. Lassen Sie uns nun einige Methoden einrichten, um diesen Zähler zu erhöhen und zu senken. Ich füge dieser Schaltfläche einen Klick-Handler hinzu. Dieser Plus-Button. Click Equals wird eine Methode namens Vergrößerungszähler auslösen. Lassen Sie uns diese Methode erstellen. Nach unserer Datenmethode viel Komma, und dann müssen wir unser Methodenobjekt hinzufügen. Und wir werden diese Methode schaffen, um die Anzahl der Werte zu erhöhen , was wir tun wollen, ist, diese Gegeneigenschaft um eins zu erhöhen. Um auf unsere Dateneigenschaften zuzugreifen, können wir diese Punkte einfach tun und dann beraten. Und wir können einfach Plus Plus machen, um es um eins zu erhöhen. Ich speichere das auf und lass uns sehen, ob das noch funktioniert. Wir können den Zähler erhöhen. Jetzt brauchen wir nur eine Methode , um den Berater zu verringern. Also eine Menge Komma hier und ich dupliziere diese Methode, benenne sie um, um den Zähler zu verringern, änderte einfach den Code in diesen Punktzähler minus minus, um diese Ratseigenschaft zu verringern. Und dann kopiere ich diesen Klick-Handler von der Plus-Button und füge ihn der Minusschaltfläche hinzu und ändere einfach den Methodennamen, um die Zählung zu verringern und zu speichern. Und wir können jetzt unseren Zähler erhöhen und senken. 11. Konvertiere sie in die Komposition API: Lassen Sie uns diese einfache App auf die Verwendung der Kompositions-API umstellen . Und eine wichtige Sache ist , dass alles in der Vorlage gleich bleibt. Wir müssen nichts in der Vorlage ändern. Im Allgemeinen funktioniert mit der Kompositions-API alles in der Vorlage genau gleich. Wir verwenden Dateneigenschaften, berechnete Eigenschaftsmethoden auf genau die gleiche Weise. Der einzige Ort, an dem wir die Dinge anders machen , ist der Skriptbereich. Ich werde diesen Options-API-Skriptabschnitt kommentieren. Vorerst. Eine Menge Eröffnungskommentar oben und dann ein abschließender Kommentar am Ende. Fügen wir einen neuen Skriptabschnitt hinzu, in dem wir die Kompositions-API-Skripte verwenden. Jetzt können wir die Composition API mit zwei verschiedenen Mustern verwenden . Es gibt das Setup-Funktionsmuster, das das ursprüngliche Muster war, das zuerst auf der Kompositions-API kam. Und dann haben wir das zweite Muster, das ist das Skript-Setup-Muster, das später veröffentlicht wurde, ist viel besser. Aber jetzt verwenden wir einfach das ursprüngliche Setup-Funktionsmuster. Obwohl wir das überlegene Skript-Setup-Pattern verwenden möchten . Um das Setup-Funktionsmuster verwenden zu können, müssen wir unseren Exportstandard hinzufügen. Aber wir fügen keine Optionen wie Datenmethoden usw. hinzu. Stattdessen fügen wir eine Setup-Funktion wie diese hinzu und platzieren unseren gesamten Code hier. Grundsätzlich werden alle unsere Dateneigenschaften, Methoden, berechneten Eigenschaften, Uhren usw. alle unsere Dateneigenschaften in diese Setup-Funktion eingehen. 12. Komposition API – Daten (refs) und Methoden: Lassen Sie uns eine reaktive Datenvariable für unseren Zähler einrichten. Jetzt gibt es in der Kompositions-API zwei Haupttypen von reaktiven Daten. Wir haben Refs und reaktive Objekte. Ich werde mich später im Kurs näher darauf eingehen . Nun, im Grunde erlaubt uns ein reaktives Objekt, ein Datenobjekt mit einer Reihe verwandter Dateneigenschaften innerhalb des Objekts zu erstellen Datenobjekt mit einer Reihe verwandter Dateneigenschaften innerhalb des . Während RF im Allgemeinen für einfache einzelne Datenelemente wie eine Zeichenfolge und ein Array oder eine Zahl verwendet einfache einzelne Datenelemente wird. Es ist also sinnvoll, dafür ein Rough zu verwenden, um eine href einzurichten, können wir einfach eine Konstante erstellen und ihr einen Namen geben. Welchen Namen wir auch verwenden, wird der Name sein , der in der Vorlage verfügbar ist. Also werden wir diesen Zähler aufrufen, da dies der Name ist, den wir hier in unserer Vorlage verwendet haben. Und wir möchten dies auf die ref-Methode wie diese setzen. Und dann können wir unseren Anfangswert innerhalb dieser Methode weitergeben . Lassen Sie uns das zunächst auf 0 setzen, da wir diese Ref-Methode verwenden, müssen wir diese Methode aus der Ansicht importieren. Oberhalb unseres Exports müssen wir also aus Sicht importieren. Jetzt ist dieser Ratsvertreter in unserer Vorlage noch nicht verfügbar. Wir müssen es auch zurückgeben wenn wir die Setup-Funktion verwenden, sie direkt an den unteren Rand unserer Setup-Funktion potet, wir müssen eine Return-Anweisung hinzufügen. Diese Return-Anweisung sollte immer am unteren Rand der Setup-Funktion bleiben . Und dann müssen wir nur diese Ratsreferenz wie diesen zurückgeben und das retten. Und hoffentlich sollte dieser Zähler oben gehofft werden jetzt können wir 0 auf der Seite sehen. Und wenn wir den Wert dieser href ändern und speichern, können wir sehen, dass er in der Vorlage aktualisiert wurde . Ich setze das einfach auf 0 zurück und speichere das. Wir müssen jetzt unsere verminderten Zähler hinzufügen und die Zählermethoden erhöhen. Und wir tun dies einfach, indem wir irgendwo in dieser Setup-Funktion einige benannte Funktionen erstellen . Und dann müssen wir sie zurückgeben genauso wie wir diesen Zähler zurückgeben. Lassen Sie uns also eine Methode erstellen, um den Zähler zu erhöhen. Also können wir das entweder so mit dem Schlüsselwort function, function erhöhung, machen. Counselor. Wir können einen konstanten benannten , den wir auf eine Funktion wie diese setzen, Erhöhungszähler machen , den wir auf eine Funktion wie diese setzen, die ich normalerweise verwende. Alles, was wir tun wollen, ist diesen Zähler Ref um eins zu erhöhen. Und du denkst vielleicht, wir könnten einfach plus zählen. Aber tatsächlich funktioniert dies nicht mit der Kompositions-API , denn wenn wir ein Rough erstellen, erstellt sie tatsächlich ein Objekt und der Wert unserer Referenz wird in einer Eigenschaft namens value gespeichert. Um darauf zugreifen zu können, müssen wir tatsächlich einen Ratgeberpunktwert machen, und wir können dann wieder Plus Plus tun, um diese Methode in unserer Vorlage verwenden zu können, müssen wir sie zurückgeben. Also können wir es einfach an dieses Rückgabeobjekt wie diesen Erhöhungszähler denken . Da wir hier bereits OK Click Handler haben , der dieselbe Methode auslöst, sollte es funktionieren. Also speichere ich das, klicke auf den Plus-Button und das funktioniert. Jetzt müssen wir nur noch die verminderte Zählermethode erstellen. Ich dupliziere diese erhöhte Kalziummethode, benenne sie um, um den Zähler zu verringern, und ändere einfach das Plus in minus minus, so dass der Zählerwert um eins verringert wird. Und wieder müssen wir dies sehr zu unserer Rückgabeerklärung hier unten zurückgeben, Delta verringern, außer das. Und hoffentlich sollten beide Knöpfe arbeiten, aber alles funktioniert. 13. Script – Ein einfacherer Weg!: In wenigen Drei-Punkten wurde eine neue Syntax oder ein neues Muster für die Kompositions-API eingeführt, bei der es sich um eine neue Syntax oder ein neues Muster wurde eine neue Syntax oder ein neues Muster für die Kompositions-API eingeführt, das Skript-Setup-Pattern oder die Syntax handelt. Skript-Setup ermöglicht es uns , unsere Komponenten viel einfacher , weniger überladen und einfacher zu verwalten, ermöglicht es uns, den Exportstandard loszuwerden, die Setup-Funktion und vor allem werden Sie die Return-Anweisung loswerden. Mit dem Script-Setup A2 müssen wir uns nicht mehr darum kümmern sicherzustellen, dass alle unsere Dateneigenschaften, Methoden, berechneten Eigenschaften usw. zurückgegeben werden. Bei einer einfachen Komponente wie dieser macht es vielleicht keinen großen Unterschied, aber in einem erschwert es wirklich mit Hunderten von Komponenten, die jeweils unterschiedliche Dateneigenschaften haben , Methoden, Beobachter, berechnete Eigenschaften usw. Es macht unser Leben wirklich einfacher, diese Rückgabeanweisung nicht halten zu müssen jedes Mal auf dem neuesten Stand halten zu müssen, wenn wir eine unserer Dateneigenschaften, Methoden ändern , oder benenne sie um usw. Für mich selbst verbrachte Fujitsu, an dem gerade arbeitet, tatsächlich einen ganzen Tag damit verbracht, tatsächlich einen ganzen Tag damit verbracht rund 100 Komponenten von diesem Setup-Funktionsmuster in das neue Skript umzuwandeln diesem Setup-Funktionsmuster Setup-Pattern. Und das war ein wirklich langweiliger Tag, aber es hat sich gelohnt, denn jetzt ist die App viel einfacher zu bearbeiten. Das Skript-Setup-Muster ist übrigens das Muster, das ich für den Rest des Kurses verwenden werde , weil es viel einfacher und es das Muster ist, das das Vue-Team empfiehlt. Konvertieren wir diesen Code also das neue Skript-Setup-Pattern. Ich werde diesen Script-Abschnitt kommentieren. Wir fügen hier einen neuen Skriptbereich hinzu. Jetzt müssen wir unseren Exportstandard nicht hinzufügen, und wir müssen diese Setup-Funktion nicht hinzufügen. Alles, was wir tun müssen, ist diesem öffnenden Script-Tag wie dieses ein Attribut hinzuzufügen . Wir können jetzt unseren gesamten Code hier platzieren, alle unsere Dateneigenschaften, Methoden usw. und wir müssen nicht einmal einen davon zurückgeben. Lassen Sie uns einfach unsere beiden Methoden auf unseren Council Ref aus dem alten Code kopieren . Fügen Sie es direkt hier ein und fixieren Sie einfach die Einrückung. Wir müssen diese Ref-Methode immer noch aus der Sicht importieren. Also kopiere ich das. Wir platzieren einfach alle unsere Eingaben oben in diesem Skriptbereich. Und jetzt müssen wir unsere Daten oder unsere Methoden nicht zurückgeben. Alle Dateneigenschaften oder -methoden sind berechnete Eigenschaften , die wir auf der obersten Ebene dieses Skript-Tags deklarieren der obersten Ebene dieses Skript-Tags werden in unserer Vorlage automatisch verfügbar sein. Wenn ich das jetzt speichere, sollte es einfach sofort funktionieren. Trotzdem. Es funktioniert immer noch. Wir haben jetzt unseren Skriptbereich von, sagen wir, 21 Zeilen auf nur 11 Zeilen reduziert . Wir haben unseren Code massiv vereinfacht und müssen uns keine Sorgen mehr um diese lästige Rücksendeerklärung machen. 14. Refs [Modul 4]: Es gibt drei Haupttypen von Daten, die wir in einer Kompositions-API-App verwenden können. Mitarbeiter, die wir in dieser App bereits hinzugefügt haben, reaktive Objekte und nicht reaktive Daten. Wir haben bereits Refs abgedeckt. Wir richten im Grunde nur eine Konstante oder einen Variablensatz ein, der der Ref-Methode entspricht , die wir aus der Ansicht importieren müssen , und dann einfach den Anfangswert übergeben . Wir können Änderungen an diesem Wert vornehmen, indem wir auf die Werteigenschaft der Konstante zugreifen , die wir eingerichtet haben Wir können nicht so viele Wiederholungen wie wir wollen. Also lasst uns noch eins hinzufügen. Nehmen wir an, wir wollen einen Titel für unseren Zähler und wir möchten diesen Titel programmgesteuert ändern können, alles mit Zwei-Wege-Bindung. Lasst uns hier einen weiteren Vertreter hinzufügen. Wir könnten Const Counts beim Titel machen, diese gleich einer Ref-Methode setzen, einen Anfangswert von, sagen wir meinen Zähler, übergeben . Oder wir können dies zeigen, indem wir das Schlüsselwort const loswerden und dann nach der ersten Konst ein Komma hinzufügen. Auch hier müssen wir diese Konstante nicht zurückgeben. Es sollte sofort in unserer Vorlage verfügbar sein. Fügen wir also H3-Tag hinzu, beide dieses Div wird diesen Titel ausgeben. Also doppelte geschweifte Klammern, Zählertitel, speichere das. Wir können diesen Titel jetzt in der Vorlage sehen , um etwas klarer zu machen, was dieser Titel ist Ich werde nach diesem Titel nur ein Semikolon hinzufügen. Wenn wir nun den Wert dieses Graphen ändern, sollten wir die Titelaktualisierung sehen, was wir tun. 15. Two-Way: den meisten Fällen funktioniert die bidirektionale Datenbindung in der Kompositions-API genauso wie in der Options-API. dies zu demonstrieren, fügen wir unserer Seite eine Eingabe hinzu, die es uns ermöglicht, diesen Zählertitel zu ändern , den wir in dieser Daten gespeichert haben ref nach diesem div mit unserem Zähler und den Buttons viel von div mit einer Editierklasse. Und dann füge ich die H4-Überschrift mit dem Text hinzu, bearbeite Zähler, Titel, Doppelpunkt und dann viel. Und heb dir das auf. Ich werde nur ein bisschen Marge an der Spitze dieses Div hinzufügen . Ich springe runter bis zu der Zeit, während wir dran sind. Lassen Sie uns einfach all diese alten Kommentare entfernen. Und ich springe zum Skriptbereich. Target, die Editier-Klasse, oberhalb der wir gerade begonnen haben, und viel Marge, von 60 Pixel und speichern Sie das. Binden wir diese Eingabe nun an den Zähler, diesen Zählertitel rref. Um dies zu tun, können wir einfach zu dieser Eingabe springen und eine V-Modellrichtlinie hinzufügen. Setze es einfach auf diesen Const Count, den Titel, den Ratstitel. Sag das. Wir können jetzt sehen, wie wir den Titel in dieser Eingabe zählen. Und wenn wir es ändern, wird die Überschrift hier oben nicht aktualisiert. Vielleicht müssen wir nur aktualisieren, es noch einmal versuchen, wenn wir den Überschriftentitel in dieser Eingabe ändern, sehen wir ihn in unserer Überschrift aktualisiert oder bezahlen. 16. Reaktive Objekte: Wir können sehen, dass Refs praktisch sind, um einfache unabhängige Datenelemente wie eine Zahl oder eine Zeichenfolge oder vielleicht ein Array oder einen booleschen Wert zu speichern wie eine Zahl oder eine Zeichenfolge oder vielleicht ein . Aber was ist, wenn wir eine Reihe verschiedener Daten speichern möchten , die in einem einzigen Objekt zusammenhängen. Ein bisschen wie wir es mit der Datenmethode in Options API Apps getan haben . Nun, das können wir mit einem reaktiven Objekt machen. Nehmen wir an, wir möchten unseren Zähler und unseren Beratungstitel zusammen in einem einzigen Objekt speichern . Da sich diese Daten beziehen , könnten wir dies mit einem reaktiven Objekt tun. Um reaktive Objekte einzurichten, erstellen wir erneut eine const oder wir können eine Variable verwenden. Jetzt geben wir dem einen Namen, damit wir es Ratgeber nennen können. Und das stellen wir auf die reaktive Methode ein. Wir müssen dies aus der Sicht importieren. Also können wir das einfach zu unserem Importobjekt hier hinzufügen , reaktiv. Wir können einfach ein Objekt in diese reaktive Methode übergeben und wir können alle unsere Dateneigenschaften hier platzieren. Lassen Sie uns eine Eigenschaft namens Count für unseren Zähler erstellen, geben Sie dem einen Anfangswert von 0 an. Und dann eine Menge Eigenschaft namens title, der Titel, und ich werde das auf meinen Zähler setzen, speichern Sie das. Verwenden wir die Daten dieser reaktiven Objekte in unserer Vorlage anstelle der Daten aus diesen Refs. Wenn wir hier den Berater verwenden möchten, der sich in diesen reaktiven Objekten befindet, können wir einfach die Punktzahl der Ratgeber durchführen. Wenn wir den Titel verwenden möchten, befindet er sich in den reaktiven Objekten. Wir können dies einfach in diesem Überschriften-Tag in Counselor Data Dot Titel ändern . Lassen Sie uns auch dieses V-Modell aktualisieren. Um diese reaktiven Objekte zu verwenden. Ich setze dieses V-Modell so ein, dass es Daten, Punkte und Titel berät , und ich speichere das und lade es neu. Und mal sehen, ob unser Titel aufgesprungen ist. Okay, ja, das funktioniert immer noch an der bidirektionalen Datenbindung funktioniert immer noch und Konten oder funktioniert, wir können 0 dort sehen. Und wenn ich den Wert der Zählerdaten ändere, können wir sehen, dass er aktualisiert wird. Diese Böden funktionieren jedoch nicht. Und das liegt daran, dass diese Methoden, die erhöhte Ratsmethode und die Abnahmeberatungsmethode, diese href immer noch manipulieren und nicht den Rabatt, der in unserem reaktiven Objekt enthalten ist. Lasst uns diese Methoden aktualisieren. Anstelle von Zählungen oder Punktwert plus plus plus, können wir einfach Beratungsdaten erstellen, Punktzahl plus Plus. Dann können wir bei der verminderten Ratsmethode einfach die Anzahl der Daten, Punktzahl minus minus durchführen . Beachten Sie, dass wir keinen Punktwert verwenden müssen, wenn wir Daten verwenden, die sich in reaktiven Objekten Wir verwenden nur den geraden Eigenschaftsnamen, Counselor Data Dot Count. Jetzt speichern wir das und sehen, ob diese Schaltflächen funktionieren. Ja, das funktioniert jetzt wieder, wir benutzen diese Refs nicht mehr. Vs Code zeigt uns das, indem wir diese ein wenig ausgegräbt haben. Lassen Sie uns diese also einfach auskommentieren. Da wir diese Ref-Methode nicht mehr aus der Sicht verwenden, können wir diese wie folgt aus dieser Importanweisung entfernen und speichern. 17. Nicht reaktionsfähige Daten: Manchmal möchten wir aus unserer Sicht eine Dateneigenschaft haben , die nicht reaktiv sein muss. Dies ist einfach mit der Kompositions-API zu tun. Und ich würde empfehlen , dass alle Dateneigenschaften in Ihrer Komponente, die nicht reaktiv sein müssen, nicht reaktiv sein sollten, da dies die Leistung Ihrer App verbessert. Angenommen, wir möchten den Titel unserer App in einer Datenvariablen speichern , aber wir brauchen ihn nicht, um reaktiv zu sein. Wir müssen nicht in der Lage sein, den Wert dieses Titels programmgesteuert zu ändern und ihn in der Vorlage aktualisiert zu sehen. Alles, was wir tun müssen, ist eine Konstante oder Variable einzurichten. Also erstelle ich eine Konstante namens title. Setze das einfach auf eine Zeichenfolge. Also verwende ich keine reaktive es nur eine Moor-Standardkonstante , die auf eine Zeichenfolge gesetzt ist. Ich setze diese Saite auf meine erstaunliche Kaltura und speichere das auf. Diese Konstante sollte jetzt in unserer Vorlage verfügbar sein. Ich springe auf die Vorlage in diesem Div mit der Klasse von zu Hause. H2 gibt diese Konstante aus, also doppelte geschweifte Klammern. Und dann draussen wird es das retten. Und wir können unseren Titel jetzt auf der Seite sehen. Und wenn wir diese Zeichenfolge in mein Okay ändern, entgegenwirken, was etwas mehr geeignet ist, dann sehen wir dieses Update auf der Seite. 18. Methoden [Modul 5]: Wir haben bereits gelernt, wie wir unserer Komponente Methoden hinzufügen können. Lassen Sie uns einfach schnell übergehen, wie wir Parameter an Methoden übergeben können . Zuerst werde ich diese Kommentare einfach von vorher entfernen . Nehmen wir an, wir möchten in der Lage sein, unseren Zähler um eine bestimmte Zahl und nicht nur um eins zu erhöhen . Nun, wir könnten die Zahl, die wir erhöhen wollen, um einen Parameter auf unseren Gegenstücken zur Steigerung weitergeben . Hier können wir einfach Klammern mit unserem Methodennamen beginnen , der einen Wert übergibt. Lasst uns vorerst einfach eins geben. Und wenn wir zu unserer Methode für erhöhte Zähler springen, können wir diesen Parameter jetzt so erhalten. Als Kurzschrift könnten wir diese Klammern tatsächlich einfach entfernen , wenn wir wollen. Melden Sie sich einfach aus, um sicherzustellen, dass es durch console.log und amount kommt . Spar dir das auf. Ich öffne einfach die Chrome DevTools. Sie können entweder in Chrome Developer Developer Tools anzeigen oder die Tastenkombination auf der Konsole hier unten verwenden. Wenn ich auf das erhöhte Zählbare klicke, ja, wir können sehen, dass diese Nummer eins gesperrt ist. Passen wir die Logik und unsere erhöhte Zählermethode so an, dass sie die Anzahl unserer reaktiven Objekte um den Betrag erhöht die Anzahl unserer reaktiven Objekte , den wir übergeben, anstatt nur um eins. So können wir entweder die Anzahl der Datenpunktzahl gleich die Daten zählen, Punktzahlen plus Betrag oder als Kurzschrift könnten wir die Anzahl von Datenpunkten plus gleichem Betrag erzielen. Das hebe ich dir auf. Stellen Sie sicher, dass es immer noch funktioniert. Aber ich arbeite immer noch. Jetzt könnten wir einen zweiten Boltzmann hinzufügen um den Zähler um zwei zu erhöhen. Ich springe zurück zur Vorlage und dupliziere diese Schaltfläche zum Vergrößern des Zählers, aber wir gehen zu dieser Methode weiter. Ich ändere einfach den Text in diesem Button auf Plus, plus. Spar dir das auf und ich zoome einfach ein bisschen raus. Wenn wir jetzt auf diesen Button klicken, können wir sehen, dass unser Zähler um zwei erhöht wird. Nun, dieser Knopf erhöht ihn immer noch um eins. Ich scrolle einfach nach unten und entferne diese console.log. Machen wir das Gleiche für unseren verminderten Krebs. Ich dupliziere diesen verkleinerten Zählerknopf. In der zweiten Schaltfläche übergeben wir den Wert eins, und dann wird in der ersten Schaltfläche den Wert übergeben, um den Text in der Schaltfläche auf minus minus zu ändern. diesem Fall müssen wir diese verminderte Ratgebermethode aktualisieren. Auch hier können wir die Anzahl der Daten des Rates tun, die gleich der Anzahl der Datenpunktzahl minus Betrag entspricht. Oder wir mussten die Menge Fossa hier nicht weitergeben. Oder als Kurzschrift können wir die Datenpunktzahl des Rates minus gleichem Betrag durchführen. Also lasst uns das speichern und sehen, ob das funktioniert. Ziehen Sie einfach die Konsole ein wenig rüber. Dieser Knopf reduziert den Zähler um eins. Dieser Button reduziert ihn um zwei. Übrigens, wenn Sie Zugriff auf das Ereignisobjekt erhalten möchten , können wir dies tun , indem wir einfach einen zweiten Parameter an unsere Methode übergeben . Also gebe ich es hier an diese weiter. Auf diesem muss Dollar-Ereignis genannt werden. Und wenn wir jetzt zu unserer erhöhten Ratgebermethode springen , müssen wir die Klammern wieder einsetzen. Da es zwei Parameter geben wird, können wir das Ereignisobjekt einfach so übergeben. Sie können einen beliebigen Namen verwenden, aber ich benutze einfach einen. Jetzt sollten wir es abmelden können. Und wenn wir dann auf diese um eine Spannung erhöht klicken, können wir sagen, dass das Ereignisobjekt abgemeldet wird. Und wir können dann Zugriff darauf bekommen , auf welches Element geklickt wurde, wo der Cursor war usw. Bevor wir weitermachen, entfernen wir einfach diese console.log. 19. Berechnete Eigenschaften: Berechnete Eigenschaften sind Eigenschaften, die normalerweise basierend auf reaktiven Daten generiert werden, die zwischengespeichert und nur aktualisiert werden, wenn sich Abhängigkeiten ändern. Zum Beispiel könnten wir eine berechnete Eigenschaft erstellen , die den Wert dieses Zählers annimmt und ihn irgendwie manipuliert. Der Wert unserer berechneten Eigenschaft wird nur regeneriert, wenn sich der Zähler ändert. wir uns also einfach daran, wie wir berechnete Eigenschaften mit der Options-API hinzugefügt haben . Ich springe zum Ende dieses Skriptabschnitts und füge einen weiteren Skriptabschnitt hinzu. Die Standardeinstellung für den Export. Die Optionen-API. Wir mussten eine berechnete Option hinzufügen. Wir mussten alle unsere berechneten Immobilien hier platzieren, wie zum Beispiel mein berechnetes Eigentum. Dann würden wir eine Logik durchführen , die auf einer Dateneigenschaft basiert. Dann würden wir etwas zurückgeben. Dies bedeutete, dass alle unsere berechneten Eigenschaften in diesem einen berechneten Objekt zusammengefasst werden mussten . Mit der Kompositions-API können wir jedoch eine berechnete Eigenschaft buchstäblich überall in unserem Skriptbereich erstellen . Dies ist sehr hilfreich, insbesondere bei größeren Komponenten da wir unseren gesamten relevanten Code zusammenfassen können , was ich bereits im ersten Modul demonstriert habe. Wie ich bereits im ersten Modul gesagt habe, ist dies einer der Hauptvorteile der Kompositions-API. Die Tatsache, dass wir damit unseren gesamten verwandten Code zusammenfassen können , sei es Dateneigenschaften, Methoden , berechnete Eigenschaften , Uhren, Lebenszyklus, Hooks usw. Kommentieren wir einfach dieses Options-API-Beispiel hier. Wir fügen unserem KompositionsAPI-Code eine berechnete Eigenschaft hinzu. Um nun eine berechnete Eigenschaft zu erstellen, müssen wir die berechnete Methode aus der Ansicht importieren. Wir können das einfach mit unserer Eingabe beginnen, komma berechnet. Und jetzt richten wir eine berechnete Eigenschaft ein, die bestimmt, ob der Zähler ungerade oder gerade ist. Und dann platziere das auf der Seite. Zuerst richten wir einfach den Narco nach diesem Div mit all unseren Schaltflächen und dem Zähler, einer Menge Absatz-Tag ein, und ich füge einfach den Text hinzu. Dieser Zähler ist merkwürdig. Hallo, wir werden dieses Wort merkwürdig dynamisch machen unsere Computereigenschaft verwenden. Das hebe ich dir auf. Scrollen wir ein bisschen nach unten. Und wieder können wir unsere Computereigenschaft überall erstellen , wo wir wollen. Ich denke, es ist sinnvoll , es nach einem reaktiven Objekt ohne Daten zu platzieren . Um eine berechnete Eigenschaft zu erstellen, müssen wir nur die berechnete Methode auslösen. Innerhalb dessen müssen wir nur eine Methode wie diese weitergeben. Dann müssen wir etwas zurückgeben. Um diese Computereigenschaft nutzen zu können, müssen wir sie einer Konstanten oder einer Variablen zuweisen. Also weise ich dies einer Konstante zu, die ungerade oder gerade genannt wird. Ups, das habe ich falsch buchstabiert. Ungerade oder ungerade. Wir können den Restoperator verwenden, um herauszufinden, ob eine Zahl ungerade oder gerade ist. Wir können also einfach IF machen und dann auf unsere Zählungen zugreifen. Wir können also einfach die Anzahl der Datenpunktzahl durchführen. Wenn Zähler Datenpunktzahl beträgt, ist der Rest zwei gleich 0. Mit anderen Worten, wenn wir unseren Cout-Wert durch zwei teilen und den Rest erhalten , wenn es eine gerade Zahl ist und wir ihn durch zwei teilen, dann ist der Rest 0. Und wir wissen, dass die Zahl gerade ist. Wenn dies der Fall ist, können wir sogar zurückkehren. Ansonsten. Sonst können wir einfach ungerade zurückkehren. Jetzt können wir das sonst noch einfach loswerden, wenn wir spüren wollen, dass es nie wirklich an diese Linie kommt. Wenn diese erste Zeile zutrifft, werde ich das Wort sonst unter Speichern los , dass diese berechnete Eigenschaft jetzt in unserer Vorlage verwendet werden kann. Ich springe auf den Markt, den wir gerade mit diesem Absatz begonnen haben. Entfernen Sie das Wort ungerade, eine ungerade doppelte geschweifte Klammern, geben Sie einfach unsere berechnete Eigenschaft ungerade oder gerade aus. Spar dir das auf. Wir können sehen, dass der Ratgeber 0 ist und er sagt, dass dieser Zähler gerade ist. Wir erhöhen es um eins. Und es heißt Rabatte oder ist merkwürdig. Wir haben es auf zwei gesetzt und es ist sogar wieder usw. 20. Eine Note auf Filter: Wenn Sie sich fragen, wie Sie Filter mit V3 auf der Kompositions-API können, wurden sie tatsächlich aus V3 entfernt. Wenn Sie nur drei Witzenfilter auf dieser Seite aus dem Migrationshandbuch anzeigen , können wir sehen, dass sie tatsächlich entfernt wurden. In Anbetracht dessen könnten wir unserem Standardexport ein Filterobjekt hinzufügen . Und wir könnten einen Filter erstellen, der den Wert akzeptiert und dann etwas anderes zurückgibt. Und dann könnten wir diesen Filter in unserer Vorlage verwenden, indem wir einfach eine Pipe gefolgt vom Namen des Filters hinzufügen. Wenn wir nach unten zum a3x scrollen, aktualisieren, werden Impulse entfernt, nicht mehr unterstützt. Stattdessen empfehlen wir, sie durch Methodenaufrufe oder berechnete Eigenschaften zu ersetzen . Dies ist jetzt kein großes Problem da wir mit berechneten Eigenschaften oder Methoden die gleiche Funktionalität wie ein Filter erreichen können die gleiche Funktionalität wie ein Filter . Fakt, was wir hier mit diesem merkwürdigen oder gar gemacht haben , ist wie ein Filter. Wir nehmen einen Wert und geben etwas aus, das auf diesem Wert basiert. Aber eines der praktischen Dinge an Filterwänden, wir könnten leicht einen globalen Filter erstellen ihn in unserer App verwenden. Nehmen wir an, wir hatten eine App, die Währung auf vielen verschiedenen Seiten anzeigte. Wir könnten einen Filter erstellen, der eine Zahl in eine formatierte Währungszeichenfolge mit einem Dollar am Anfang und vielleicht einige Kommas umwandelt eine formatierte Währungszeichenfolge mit einem Dollar am , um die Nullen zu trennen. Wenn V3 jedoch das Gleiche erreichen wir, indem wir eine berechnete Eigenschaft oder eine Methode erstellen , um diese berechnete Eigenschaft oder Methode mithilfe von Composable global zu machen . Und dann können wir diese Funktionalität sowieso einfach nutzen , ich in unserer App. Und wir werden später im Kurs mehr darüber erfahren , wenn wir Composable behandeln. 21. Uhr: Uhren ermöglichen es uns, eine reaktive Dateneigenschaft im Wesentlichen zu beobachten , und sie tun etwas, wenn sie sich ändert. wir uns einfach daran, wie wir das mit der Options-API gemacht haben. Also werde ich diesen Schlusskommentar hierher verschieben. Nehmen wir an, wir hatten eine Datenmethode. Innerhalb dessen hatten wir zunächst eine count-Eigenschaft auf 0 gesetzt. Und dann wollen wir diese Zählung beobachten und sagen wir etwas tun, wenn es einen bestimmten Wert erreicht, bei dem wir eine Watch-Option hinzufügen müssten , ein zu exportierendes Objekt. Und dann könnten wir einen Beobachter hinzufügen, um zu sehen, wie diese so zählen. Wir könnten eine Methode namens count erstellen. Wir können zwei Parameter übergeben, die neue Zählung auf die alte Zählung. Dann können wir etwas tun, wenn sich die Zählung ändert, wir könnten etwas tun, wenn Sie zählen, ist 20, dann könnten wir eine Warnmeldung warnen. Auch dies bedeutete mit der Options-API, dass alle unsere Uhren in diesem Watch-Objekt gruppiert werden müssen . Und das bedeutete, dass diese Uhren oft viele, viele Codezeilen von den tatsächlichen Daten entfernt sind, mit denen sie arbeiten. Mit der Kompositions-API können wir unsere Uhren jedoch überall in unserem Skriptbereich einrichten , was bedeutet, dass wir Uhren einfach mit ihren relevanten Daten gruppieren können . Ich lasse diesen abschließenden Kommentar einfach fallen und platziere ihn noch einmal unten im Skriptbereich, lass uns das tun. Die Kompositions-API richtet viel weniger einen Beobachter ein, was unsere Zählung ist, und unsere gibt einen Alarm aus , wenn er 20 erreicht. Um einen Beobachter verwenden zu können, müssen wir die Watch-Methode aus der Ansicht importieren . Und es ist sinnvoll , unseren Beobachter nach den Daten zu platzieren , die wir uns ansehen werden. Also werden wir diesen Treffer platzieren, um den Beobachter zu erschaffen. Wir wollen nur die Uhrmethode abfeuern. Der erste Parameter sollte das reaktive Datenelement sein , das wir beobachten werden, wenn sich unser Rat in einem Ref befand, wie const counts gleich ref so, dann könnten wir einfach die erste Zählung übergeben -Parameter. Da sich unser Zähler in einem reaktiven Objekt befindet, handelt es sich tatsächlich um eine verschachtelte Dateneigenschaft. Und wir können nicht wirklich Ratgeber Datenpunktzählung durchführen. Das wird nicht klappen. Deshalb müssen wir stattdessen einen Getter verwenden, um diese verschachtelte Dateneigenschaft für uns tatsächlich zu nutzen. Und wir könnten das so machen, dass wir einfach Klammern und dann ein Pfeilsymbol machen können , und dann können wir einfach die verschachtelte Dateneigenschaft hinzufügen , die wir erfassen möchten, nämlich Beratungsdaten, Punktzahl. Und dann fügen wir für den zweiten Parameter eine Methode, Klammern und dann geschweifte Pfeilklammern hinzu. Und wieder können wir hier auf den neuen Wert und den alten Wert zugreifen . So zählt neue, alte Grafen. Ich werde einfach diesen Graf REF loswerden, den wir hinzugefügt haben. Und so sollten wir diese jetzt sperren können, ein Abmelden, neue Zählung, speichern Sie das, laden Sie die Seite neu. Und wenn wir unseren Zähler wechseln, können wir sehen, dass unser Beobachter gefeuert wird und wir können die neue Zählung eins in der Konsole sehen. Und jedes Mal, wenn es sich ändert, wird der Beobachter wieder gefeuert. Lassen Sie uns eine Warnung zeigen, wenn unser Zähler 20 erreicht. Wir können es einfach tun, wenn die neue Zählung gleich 20 ist, alarmiert. So geht's. Du hast es bis 20 geschafft. Da wir den alten Grafen nicht verwenden, müssen wir ihn hier nicht wirklich deklarieren, also werde ich das los und speichere das. Und mal sehen, ob das funktioniert. Wenn wir also 20 erreichen, sagen wir hoffentlich einen Alarm. 22. Lifecycle – Befestigter [Modul 6]: Lifecycle-Hooks ermöglichen es uns, Code in verschiedenen Phasen des Lebenszyklus unserer Komponenten auszuführen . Wir können Code ausführen, wenn eine Komponente gemountet wird, wie wenn sie in den Browser geladen wird. Oder wir können Code ausführen, wenn er als vom Browser entladen wurde. Und lassen Sie uns einfach daran erinnern, wie wir Lifecycle-Hooks in der Options-API verwenden . Ich scrolle wieder nach unten zum Skriptbereich. Habe gerade den abschließenden Kommentar erwischt und oben eingefügt. In der Options-API würden wir Hooks wie diesen hinzufügen. Um beispielsweise einen gemounteten Hook hinzuzufügen, würden wir unserem Standardexport einfach eine eingehängte Methode hinzufügen. Dann könnten wir Sachen machen. Wenn die Komponente geladen wird. Wir könnten einen nicht montierten Haken wie diesen hinzufügen. Machen Sie Dinge, wenn die Komponente aus dem Browser entladen wird. Und jetzt kleben wir einfach ein paar Konsolenprotokolle hier ein. Console.log mountet und console.log auf gemountet und speichern Sie das. Und das wird übrigens immer noch funktionieren, wir können die Kompositions-API tatsächlich mit der Options-API kombinieren . Sie werden sehen, wenn ich die Seite neu lade, können wir sehen, dass Mounted in der Konsole gesperrt ist. Und wenn ich die Seite verlasse, können Sie sehen, dass unmounted gesperrt wird, da unsere Home-Ansicht aus dem Browser entfernt wurde. Ich würde jedoch nicht empfehlen, sowohl die Kompositions-API als auch die Options-API gleichzeitig zu verwenden sowohl die Kompositions-API . Nummer eins, es macht unsere Komponenten wirklich chaotisch und inkonsistent. Und Nummer zwei ist schwierig zwischen den verschiedenen Script-Abschnitten zu kommunizieren . In unserem Options-API-Code können wir beispielsweise nicht auf Dateneigenschaften zugreifen, die sich im Kompositions-API-Skripttag befinden . Aber wie auch immer, denn mit der Options-API konnten wir nur einen Hook jedes Typs, einen eingehängten Hook und einen auf Mounted Hook hinzufügen . Dies bedeutete, dass wir es oft brauchen, um viele unabhängige Logik in diesen Falken zu bündeln . Aber in der Kompositions-API können wir nicht so viele Hooks wie wir möchten, so viele montierte Hooks wie wir möchten, und so viele nicht montierte Hooks, wie wir möchten. Und wir können dies überall in unserem Skript-Bereich platzieren. Kommentieren wir einfach diesen Options-API-Skriptabschnitt. Schon wieder. Fügen wir alle Halterungen hinzu, die es zu dieser Komponente hakt. Lot diese in der Reihenfolge der Ausführung. Der erste ist der Before Mount Hook , der kurz vor dem Laden der Komponente in den Browser ausgelöst wird. Um dies in der Kompositions-API zu tun, dachten wir nur an eine Methode, die vor dem Mount aufgerufen wurde. Und dann übergeben wir eine Methode in diese Methode, wir können unseren gesamten Code hier stecken, den wir auslösen möchten, bevor die Komponente gemountet wird. Also melde ich mich einfach vorher aus und dann dupliziere ich das. Und als nächstes haben wir den unmontierten Haken, den wir so hinzufügen können. Dann haben wir den R & B für unmontierten Haken. Also bevor du unmount bist. Übrigens mache ich hier nur eine Mehrfachauswahl, indem ich die Alt-Taste gedrückt halte, die Texte auswähle, die Alt-Taste gedrückt halte und dann die anderen Texte auswähle. Endlich haben wir den unmontierten Haken. Dafür fügen wir eine Methode namens unmounted hinzu. Um diese Hooks verwenden zu können, müssen wir sie aus der Sicht importieren. Also mache ich hier eine Mehrfachauswahl und wähle alle diese Methodennamen aus und kopiere sie. Und springe zu unserem Import, füge ein Komma hinzu und füge diese einfach ein. Und dann verbinde ich das einfach wieder zusammen, indem Befehlsumschalttaste drücke und bezahle, um die Befehlspalette anzuzeigen. Ich denke, die Verknüpfung ist unter Windows anders, indem Sie einfach den Befehl „Zeilen verbinden“ auslösen. Dann fange ich einfach ein paar Kommas zwischen diesen an. Lasst uns das speichern und sehen, ob es funktioniert. Ich lade die Seite neu. Und ja, wir können sehen, bevor der Reittier ausgesperrt wird und dann auf dem Reittier ausgesperrt wird. Und wenn wir auf die About-Seite springen, können wir sehen, wie vorher auf Mount gesperrt wird und nicht montiert wird. Eine Sache, die Sie wissen sollten, ist, dass in der Kompositions-API keine erstellten oder zuvor erstellten Hooks vorhanden sind . Und das liegt daran, dass Code, den wir auf die Wurzelebene von Skript-Tags setzen , an dieser Stelle effektiv ausgelöst wird. Dieser gesamte Code in unserem Skriptbereich wird also effektiv ausgelöst, bevor die Komponente erstellt wird. 23. Aktivierte Hooks: Mal sehen, wie wir es bei deaktivierten Hooks mit der Kompositions-API nicht aktivieren können . Wir machen das auf die gleiche Weise. Ich dupliziere das einfach auf Mounted Hook. Wir fügen einfach den aktivierten Hook hinzu, wir melden uns einfach aktiviert aus. Und dann benutzen wir für den deaktivierten Hook einfach den deaktivierten. Auch hier müssen wir diese unserem Import hinzufügen, sonst sieht es so aus, als würde VS-Code automatisch hinzugefügt. Diese, füge sie einfach hier hinzu. Wenn nicht. Ich spare, dass diese Haken jetzt nur dann abgefeuert werden , wenn unsere Komponenten am Leben erhalten werden. Das bedeutet, dass die Komponente weiterhin im Hintergrund läuft, auch wenn sie nicht auf der Seite angezeigt wird. Um dies zu tun, müssen wir unsere Router-View-Komponente in Keep-Alive-Tags umschließen . Wir wollen zu app.vue springen. Wir möchten diese Router-Ansicht in Keep-Alive-Tags umschließen. Wir können entweder den Dash-Fall so benutzen. Wir können den Fall Pascal benutzen. Ich benutze den Fall Pascal , da wir das überall in unserem AP verwenden. Ich möchte diese Router-Ansicht nur in diese Tags stecken. Spar dir das auf. Eigentlich machen wir das in V3 anders , weil wir diese Warnung hier sehen. Router-Ansicht kann stattdessen nicht mehr direkt innerhalb des Transition oder Keep Alive Slot-Requisiten verwendet werden direkt innerhalb des Transition oder Keep . Und es gibt uns hier ein kleines Beispiel dafür, wie das geht. Wir können das einfach kopieren hier einfügen. Es sollte jetzt alle Komponenten , die in diese Router-Ansicht geladen am Leben erhalten und wir sollten sehen, dass Hooks Arbeit aktiviert und deaktiviert sind . Also speichere ich das und lade die App neu. Wir können dort auf aktiviert sehen. Wenn wir diese Seite verlassen, lassen Sie mich sehen, dass auch die auf deaktivierte Hoffnung gefeuert wird. Jetzt möchte ich die Seiten darin nicht am Leben erhalten, also mache ich einfach alles rückgängig, was wir in app.vue geändert haben, damit wir unsere Router-View-Komponente einfach alleine haben. Und dann hebe ich das auf. 24. Aktualisierte Hooks: Wir haben auch die aktualisierten Hooks, die ausgelöst werden, wenn sich unsere Vorlage ändert. Wenn sich unser Rat beispielsweise ändert, fügen wir diese Hooks zu dieser Home-View-Punkt-Vue-Komponente hinzu. Und das ist jetzt ein bisschen chaotisch. Also entferne ich alle diese Hooks und entferne die Eingänge dieser Hooks. Füge vor dem Update-Hook ein On hinzu. Wir melden uns einfach vor dem Update aus. Dieser Hook wird kurz vor der Aktualisierung der Vorlage ausgelöst . Wenn wir also bei den Zähleränderungen auf diese Schaltfläche klicken, wird dies kurz vor der Aktualisierung der Vorlage ausgelöst. Und dann haben wir den aktualisierten Hook, der zu dem Zeitpunkt ausgelöst wird , an dem die Vorlage aktualisiert wird, und wir melden uns einfach beim Update ab. Eigentlich ist mein BOD nicht alles Update, es ist alles aktualisiert. Also repariere ich das einfach. Schon wieder. Wir müssen diese importieren. Wird dann aktiviert, bevor Aktualisierungen aktiviert werden, aus der Ansicht aktualisiert und gespeichert werden. Wenn wir neu laden, können Sie sagen, dass diese Hooks nicht ausgelöst werden , wenn die Komponente zum ersten Mal geladen wird. Wenn ich auf diese Schaltfläche klicke und der Zähler steigt und sich unsere Vorlage ändert, können wir sehen, dass diese Hooks zuerst vor dem Update-Hook ausgelöst werden , gefolgt vom aktualisierten Hook. 25. Mehrere Hooks!: Bevor wir fortfahren, demonstrieren wir einfach mehrere Hooks desselben Typs hinzuzufügen. Ich werde nur diese aktualisierten Hooks entfernen. Ich entferne die Eingaben. Entfernen Sie die natürlichen Haken. Nehmen wir an, wir möchten einige Dinge im Zusammenhang mit unserem App-Titel machen , wenn die Komponente zum ersten Mal geladen wird. Wir möchten auch einige Dinge im Zusammenhang mit unserem Zähler machen , wenn die Komponente zum ersten Mal geladen wird. Also können wir einfach mit nicht geschmolzenen Falken aufhören . Lassen Sie uns auf gemountet aus Sicht importieren. Und dann können wir nach unserem App-Titel nicht unmounted Hook werden. Ich melde mich einfach aus und mache Sachen im Zusammenhang mit Title. Angenommen, wir möchten einige Dinge im Zusammenhang mit dem Zähler machen , wenn die Komponente gemountet ist, dann möchten wir das vielleicht hier unten hinzufügen. Also können wir einfach einen anderen Vortrag einfügen. Ich ändere einfach den Text in diesem Protokoll Dinge zu tun, die mit dem Zähler zusammenhängen. Spar dir das auf. Auf diese Weise können wir mit der Kompositions-API alle unsere Hooks mit verwandtem Code zusammenhalten, insbesondere wenn wir Kommentare verwenden, um unsere verschiedenen Codeabschnitte zu trennen. Was ich oft in Ansichtskomponenten mache , ist, dass ich einen Blockkommentar wie diesen hinzufüge. Ich füge einfach einen Kommentar für unsere Eingaben hinzu. Dann bewege das nach oben. Einrückung. Und dann viel, ein kleiner Kommentar für unseren App-Titel. Wir legen die App-Titelanrufe und den damit verbundenen unmounteten Hook unter diesen Kommentar. Und dann eine Menge eines Maulwurfblock-Kommentars für den Rat. Ich werde den gesamten Kodex, der sich auf unseren Rat bezieht , unter diese Bemerkung legen. Und das hebe ich dir auf. diese Komponente nicht besonders kompliziert ist, sehen wir bereits den Vorteil, den uns die Kompositions-API in Bezug auf die Aufrechterhaltung unserer verwandten Logik bietet , anstatt sie zu verstreuen über die verschiedenen Optionen hinweg, die wir tun müssen, wenn wir die Options-API verwendet haben. 26. Lokale benutzerdefinierte Richtlinien [Modul 7]: Vue.js wird verfolgt. Direktiven wie V-Modell, V-Show, V-if usw. Aber wir können unsere eigenen benutzerdefinierten Direktiven erstellen, Aber wir können unsere eigenen benutzerdefinierten Direktiven erstellen um Elementen Funktionen hinzuzufügen , damit wir einem Element etwas antun können , sobald es wurde erstellt oder gemountet. klassisches Beispiel ist das Erstellen einer Direktive , bei der Autofokus ein Eingabefeld ist. Lassen Sie uns also eine direkte Speicherung erstellen, die diesen Import auch auf unsere Home-Ansicht konzentriert. Ich gehe zur Home-Ansicht in den Quellansichten und der Home-View-Punktansicht. Und lasst uns daran erinnern, wie wir das machen. Die Optionen API-Art und Weise. Ich werde den Optionen-API-Code auskommentieren . Die Optionen-API. Wir mussten eine Direktivenoption hinzufügen, bei der es sich um ein Objekt handelt. Wir könnten alle unsere Richtlinien hier platzieren. Lassen Sie uns eine Autofokus-Direktive erstellen. Also könnten wir das Autofokus nennen. Und wieder setzen wir dies auf ein Objekt. Im Inneren können wir alle Haken hinzufügen, die wir wollen, wie sie erstellt oder montiert werden sollen. Fügen wir also einen montierten Haken hinzu. Wir können Zugriff auf das Element erhalten , indem wir diesen l-Parameter übergeben. Und dann können wir etwas mit diesem Element machen. In diesem Fall möchten wir es fokussieren, damit wir L-Punktfokus machen können . Das hebe ich dir auf. Wir sollten jetzt in der Lage sein, diese Richtlinie für unsere Beiträge zu verwenden. Und wir müssen uns nur vorbereiten und welchen Namen wir hier mit v dash verwendet haben. Wenn ich zu der Eingabe springe, die hier ist, sollten wir in der Lage sein, einfach v dash hinzuzufügen, auch fokussieren. Dies sollte immer noch funktionieren, obwohl wir hier die Options-API verwenden. Wenn ich die Seite jetzt neu lade, können Sie sehen, dass sie diese Eingabe auch mit der Options-API fokussiert hat. Alle unsere lokalen Richtlinien mussten in diese Direktiven-Objekte platziert werden , was wiederum, wie ich immer wieder mit der Options-API sage, dazu führt, dass verwandter Code über viele Zeilen verstreut wird kodieren. Während wir mit der Kompositions-API eine lokale Direktive überall innerhalb einer Setup-Funktion erstellen können . Lassen Sie uns unseren Optionen-API-Code kommentieren und dies auf die Kompositions-API-Weise machen. Ich kommentiere diesen Script-Abschnitt zu Jupiter einfach diesen Script-Abschnitt zu unserem Abschnitt zur Komposition API-Skripte. Auf der Schaltfläche füge ich einen weiteren dieser Blockkommentare hinzu, die als Direktiven bezeichnet werden. Um eine Richtlinie zu erstellen, müssen wir eine const erstellen. Der Name des verursachten muss Kamelcase sein und es muss mit einem Kleinbuchstaben beginnen v. Wir könnten dieses V auch als Fokus bezeichnen. Welchen Namen wir hier verwenden bestimmt das Attribut, das wir tatsächlich verwenden, obwohl es in einen solchen Dash-Fall umgewandelt wird. V Autofokus, CamelCase wird v Dash-Autofokus, wenn wir es auf der Vorlage verwenden. Wie auch immer, wir wollen dies auf ein Objekt setzen. Im Inneren können wir einen Lebenszyklus-Hook hinzufügen, wie z. B. erstellt. Und wir legen dies als eine Eigenschaft fest, die auf eine Methode wie diese festgelegt ist . Wir können dann etwas mit dem Element machen , dem wir diese Direktive in diesem geschaffenen Falken hinzugefügt haben . Und wir können auch alle anderen Bücher verwenden, z. B. bevor sie vor dem Update gemountet und eingehängt wurden. Vorher auf Mount aktualisiert. Montiert. Aber dafür verwenden wir den montierten Haken noch einmal. Wir können einfach denselben Code verwenden, den wir zuvor gemacht haben, um den einfachen L-Punkt-Fokus zu fokussieren. Wir haben diese Direktive bereits zum einfachen hinzugefügt. Das sollte hoffentlich jetzt funktionieren, ich lade die Seite einfach neu und dennoch konzentriert sie sich immer noch automatisch auf diese Eingabe. Aber jetzt haben wir die Freiheit, diese lokale Richtlinie überall in unseren Skripten zu platzieren diese lokale Richtlinie überall . 27. Globale benutzerdefinierte Richtlinien: Momentan können wir diese V-Autofokus-Direktive nur für diese bestimmte Komponente, die Home-View-Punktansicht, verwenden diese V-Autofokus-Direktive . Wenn wir in der Lage sein wollen, diese Direktive in Sarah für verschiedene Komponenten zu verwenden , können wir unsere Richtlinie übernehmen, sie in eine eigene Datei einfügen und eine globale benutzerdefinierte Richtlinie erstellen. Springen wir also zum Datei-Explorer und wir erstellen einen Ordner, in dem wir unsere benutzerdefinierten Anweisungen platzieren können . Also erstelle ich einen neuen Ordner im Quellordner, der als Direktiven bezeichnet wird. Ich erstelle eine neue Datei. Und lassen Sie uns diese Datei mit dem gleichen Namen wie unsere Direktive bekommen. Also V Autofokus dot js. Und übrigens, wenn Sie hier Probleme mit Ihrem Tab-Abstand haben , weil alle diese Dateien in diesem Projekt einen Lebensraum von zwei Räumen geschaffen haben . Möglicherweise stellen Sie fest, dass beim Erstellen einer neuen Datei auf vier Leerzeichen festgelegt ist , da dies der Standardwert im VS-Code ist. Wenn Sie das beheben möchten, gehen Sie einfach zu Code, Einstellungen und Einstellungen. Ändern Sie einfach diese Einstellung für die Tippgröße auf zwei. Und möglicherweise müssen Sie diese Datei einfach löschen und sie auch neu erstellen, diese V-Autofokusdatei. Aber wie auch immer, lassen Sie uns unsere Direktive in diese Akte verschieben. Ich springe zurück zur Home-View-Punktansicht. Jetzt können wir diesen Code einfach ausschneiden. Ich lösche den Kommentar auch. Wir können zum Autofokus JS springen und ihn einfach einfügen. Und alles, was wir tun müssen, um dies anderen Dateien zur Verfügung zu stellen , ist diese Konstante zu exportieren. Also können wir einfach mit dem Export beginnen und das speichern. Wenn wir nun zur gesamten View-Punkt-Ansicht zurückkehren, können wir diese Direktive jetzt importieren und verwenden. Ich springe einfach zum Impulsbereich. Um diese Richtlinie zu importieren. Wir können einfach Autofokus aus Schrägstrichtlinien importieren slash v Autofokus. Wir haben bereits eine Richtlinie zu diesem Impuls hinzugefügt, daher sollte dies hoffentlich funktionieren. Ich lade die Seite neu, aber es funktioniert immer noch, außer dass dies jetzt eine globale Richtlinie ist , die wir überall verwenden können. zu demonstrieren , fügen wir unserer About-Seite einen Textbereich hinzu. Öffnen wir also die Ansichten „ Über Seitenquelle“ über bu.edu, viele Textbereiche. Nach dieser Überschrift. Dann müssen wir den Skript-Setup-Bereich hinzufügen, viele Kommentare für Importe. Danach kopiere ich einfach den Importcode aus der eigenen Ansichtspunktansicht, füge ihn dort ein, und wir sollten ihn jetzt auch hier verwenden können. Fügen wir es also zu diesem Textbereich v Autofokus hinzu. Speichern Sie das Nachladen. Und doch funktioniert es auch hier. Wir haben jetzt eine praktische globale Richtlinie , die wir überall in unserer App verwenden können. 28. Vue Router – $route – Teil 1 [Modul 8]: Mal sehen, wie wir die Dinge mit Vue Router in der Kompositions-API anders machen. Jetzt erinnern Sie sich vielleicht an die Dollar-Route-Objekte , mit denen wir auf Dinge wie den aktuellen Routenpfad oder Routenparameter in der Options-API zugreifen könnten Dinge wie den aktuellen Routenpfad oder Routenparameter . Nun, wir können diese Dollarwurzelobjekte immer noch in unserer Vorlage verwenden , wenn wir die Kompositions-API verwenden. Um dies zu demonstrieren, erstellen wir eine Post-Detailseite , die einen Parameter von ID akzeptiert. Und dann verwenden wir das Dollar-Roots-Objekt, um diese ID auf dieser Post-Detailseite anzuzeigen. Bevor wir das tun, ändern wir diese About-Seite in eine Beitragsseite , zu der wir später eine Liste von Beiträgen hinzufügen. Wir möchten zu unserer Routerdatei im Quell-Router index.js springen . Und übrigens werde ich Ihnen später im Kurs zeigen, wie Sie den View-Router von Grund auf neu einrichten den View-Router von Grund auf , wenn wir unsere Notizbälle erstellen. Aber in diesem Projekt wurde das alles für uns eingerichtet. Wir machen uns keine Sorgen, ich zeige dir , wie du all das Zeug von Grund auf neu aufstellen kannst. Sie können etwas besser verstehen, was hier vor sich geht , wenn Sie mit Vue Router noch nicht vertraut sind. Aber wie auch immer, lasst uns diese About Page anpassen und sie zu einer Posts-Seite machen. Also werde ich den Pfad ändern, um Posts zu schrägen. Ich ändere den Namen in Posts und werde diese Reihe von Kommentaren los. importieren wir eine Komponente namens „ Stattdessen importieren wir eine Komponente namens „ Posts view“. Das hebe ich dir auf. Dies wird unsere App beschädigen, weil dieser Komponente sucht , die es nicht gibt. Lasst uns also unseren Explorer öffnen, in Ansichten springen und wir werden dies über die Vue-Punktansicht in Beiträge umbenennen . Die Punktansicht funktioniert jetzt wieder. Und jetzt aktualisieren wir unsere Navigationslinks oben. Diese sind in app.vue, source app.vue. Wir möchten diesen zweiten Router-Link ändern um zu den Pfad-Schrägstrich-Posts zu wechseln. Und wir möchten den Text auch in Posts ändern. Sichern Sie sich das, wir sollten jetzt in der Lage sein Seite zu argumentieren Beiträge. Lassen Sie uns diese Beitrags-Seite ein wenig anpassen. Ansicht von Quellansichten und Beiträgen Die Ansicht von Quellansichten und Beiträgen ändert diese Klasse in diesem Root-Div, zwei Posts, und wir ändern den Text in dieser Überschrift, auch zwei Beiträge. Spar dir das ein bisschen auf. Wir werden eine Liste von Links zu einigen Beiträgen hinzufügen. Nun, lasst uns zunächst eine Route für unsere Beitrags-Detailseite einrichten . Also springen wir zurück zu index.js im Router-Ordner. Und ich füge nach dieser Beitragsroute ein Komma hinzu und dupliziere es dann. Und wir legen den Weg fest, um Details zu veröffentlichen. Und wir wollen diese Route, und wir möchten, dass diese Route einen Parameter namens ID akzeptiert. das zu tun, können wir am Ende einfach eine Slash-Colon-ID hinzufügen. Das heißt, wenn wir zu Slash-Posts mit detaillierter Schrägstrich-ID eins gehen, ist der Wert des ID-Parameters , den wir an diese Route übergeben, ID1. Und dann ändern wir den Namen in Post-Detail, und wir ändern die Komponente in die Post-Detailansicht, Draufsicht. Und das speichern wir noch einmal, dies wird unsere App beschädigen, weil diese Komponente nicht existiert. Lassen Sie uns also die View-Komponente dieses Beitrags duplizieren indem Sie mit der rechten Maustaste darauf klicken und den Befehl doppelte Datei oder Verzeichnis verwenden , der von der doppelten Aktionserweiterung stammt , die wir zuvor installiert haben der Kurs. Wir werden dies duplizieren und wir nennen es Post-Detailansicht. Ich werde alles in den Skript-Tags entfernen , die entfernt werden. Textbereich. Ich ändere diese Klasse in Postdoc-Detail. Ändern Sie den Text in der Überschrift zur Post-Seite, speichern Sie ihn, laden Sie die Seite neu und das funktioniert nicht. Und das liegt daran, dass ich diese Komponente falsch umbenenne. Es sollte eine detaillierte Ansicht Punktansicht gepostet werden. Benennen wir das noch einmal um, dachte einfach die Weltanschauung am Ende. Lassen Sie uns einige Links zu dieser Beitrags-Seite hinzufügen, damit wir zu unserer Post-Detailseite gelangen und dann die Dollarrouten verwenden können. Widersprechen Sie, auf unseren Routenparameter zuzugreifen. 29. $route – Teil 2: Lassen Sie uns einige Links zu unserer Post-Detailseite hinzufügen. Auf dieser Beitrags-Seite gehe ich zu Ansichten zur Ansicht von Beiträgen und Punktansicht. Und danach füge ich eine ungeordnete Liste hinzu. Darin füge ich ein LI-Tag hinzu. Und dann füge ich einen Router-Link zum Router-Link hinzu. Wir können den Dash-Fall wie diesen verwenden, oder wir können den Pascal-Fall verwenden. Und ich werde den Fall Pascal benutzen. Innerhalb der Ausgabe gibt der Text eine Antwort, legen Sie den Pfad für diesen Router-Link fest. Wir können einfach ein Zwei-Attribut hinzufügen und dieses auf unseren Pfad setzen. Und wenn wir zurück zu unserem Routerdateiquell-Router index.js springen , war der Pfad, den wir hier angegeben haben, Schrägstrich, detaillierter Schrägstrich und dann die ID. Also setze ich dieses Attribut auf das Attribut, um den Schrägstrich des Beitrags zu schrägen. Und dann dupliziere ich dieses LI zweimal, ändere den beiden Wert im zweiten Link am Ende auf id2 und poste dann zwei, und dann den dritten, ändere ich ihn in drei und poste dann drei. Lasst uns das speichern und wir können einen Link zu diesen Beiträgen sehen. Fangen wir einfach unten ein bisschen Spielraum an. Eine Menge. Ein Stilabschnitt , der im Bereich ist, was bedeutet, dass alle Stile, die wir hier einsetzen, nur für diese bestimmte Komponente gelten. Also füge ich der UL einfach etwas Rand unten hinzu, Rand, untere 30 Pixel. Spar dir das auf. Mal sehen, ob diese Links funktionieren. Und doch befinden wir uns auf unserer Beitrags-Seite oder Post-Detailseite. Wir können die Schrägstrich-ID eins in der Adressleiste sehen. Und wenn wir zurückgehen und auf den zweiten klicken, lassen Sie mich am Ende Slash id2 sagen, können wir jetzt die Dollarrouts-Objekte in unserer Vorlage verwenden um Zugriff auf diesen ID-Parameter zu erhalten, den wir übergeben. Öffnen wir die Post-Detailseite, Posts Detailansicht, Punktansicht. Lässt einen Absatz unter dieser Überschrift heraus. Und ich lasse den Text nur den Inhalt von Beiträgen mit der ID des Emails anzeigen , doppelte geschweifte Klammern, Dollarwurzel, Punktparams und dann den Namen unseres Parameters hinzufügen , der hier ID-Punkt-ID ist. Lasst uns das aufheben. Und wir können sagen, dass der Inhalt von Beiträgen mit einer ID von id2 hier angezeigt wird. Wenn wir zurückgehen und auf den dritten Beitrag klicken, sehen wir ID3. Und lassen Sie uns einfach schnell aus dem Zurück-Button hier gehen, ich füge einen weiteren Absatz einem Router-Link mit den Texten hinzu, nur um hier einen kleinen Pfeil nach links hinzuzufügen, verwenden wir eine HTML-Entität, LT, was für weniger als und dann Semikolon klingt. Und dann legen wir die beiden Werte auf diesem Router-Link fest, um Posts zu schrägen. Speichern Sie diese Zurück-Schaltfläche funktioniert nicht. Sie können sehen, dass der Zugriff auf die Dollarrouts-Objekte in unserer Vorlage in der Kompositions-API genau gleich ist wie in der Options-API. Aber wie können wir in unserem Script-Bereich auf die Informationen unserer Route zugreifen ? Nun, in der Options-API könnten wir einfach diesen Punkt-Dollar-Root-Zugriff machen, alle dieselben Informationen. Wir könnten diese Insider-Methoden verwenden berechnete Eigenschaften sind Lebenszyklus-Hooks oder in der Kompositions-API haben wir keinen Zugriff darauf. Wir haben keinen Zugriff auf die View-Instance alle Optionen, da wir keine Optionen haben. In der Kompositions-API müssen wir View Threes verwenden, stattdessen route Composable verwenden. 30. useRoute: Wir können diese Punkt-Dollarwurzel in der Kompositions-API verwenden. Wenn ich das speichere, sehen wir einen Fehler und unsere Ausbrüche. Also lasst uns das entfernen. Tun Sie dies auf die Kompositions-API. Fügen wir dieser Seite eine Schaltfläche , die eine Methode auslöst , wenn wir darauf klicken. Nach diesem Absatztag zwischen diesen beiden Absätzen fügen wir ein div hinzu. Darin drin. Ich füge eine Schaltfläche mit der Text-Post-ID hinzu. Wenn wir darauf klicken, möchten wir eine LIT anzeigen , die die Beitrag-ID anzeigt. Fügen wir dazu einen Klick-Handler hinzu. Also klicke ich auf „Gepostet anzeigen“. Lassen Sie uns diese Methode oft erstellen. Diese Methode als const, const, zeige Beiträge Ich entspricht einer Methode. Vorerst loggen wir uns einfach aus zeigen Sie die Post-ID an, um sicherzustellen, dass dies funktioniert. Speichern Sie diesen Klick auf den Button und wir können sagen, dass die Post-ID in der Konsole angezeigt wird. Jetzt möchten wir bei dieser Methode eine Warnung anzeigen , die die Post-ID anzeigt. Und wieder können wir diese Punkt-Dollarwurzel nicht machen. Also müssen wir Ansichten importieren new use route Composable. Also müssen wir das zuerst importieren. Importieren Sie also Route von View-Router verwenden. Beachten Sie, dass wir dies von Vue Router und nicht aus der Sicht melden . Um Zugriff auf dieses Composable zu erhalten, müssen wir es einer Variablen oder Konstante zuweisen , die im View Team empfiehlt, die Namensroute zu verwenden. So viele Konzepte, die als Routensiedler bezeichnet werden, gleich den US-Strecken Klammern. Wir können jetzt mit dieser Routenkonstante auf dieses Composable zugreifen . Und übrigens werde ich später im Kurs näher auf Composable eingehen , einschließlich der Erstellung eines benutzerdefinierten Composable und wie man Composable Bibliotheken von Drittanbietern wie View importiert benutze. Aber wie auch immer, wir können diese Routenkonstante jetzt genauso verwenden, wie wir diesen Punkt-Dollar verwenden würden. Lassen Sie uns innerhalb dieser Methode eine Warnung anzeigen. Ich verwende Backticks, um hier eine Vorlagenzeichenfolge auszugeben, und wir geben einfach die ID dieses Beitrags aus, ist Colab. Lassen Sie dann Dollar- und geschweifte Klammern zu, damit wir hier etwas ausgeben können und unseren ID-Route-Parameter anzeigen möchten . Statt dieser Punkt-Dollar-Wurzel-Punkt-ID können wir jetzt einfach die Punkt-ID für die Routenpunktparams-Punkt-ID machen. Lasst uns das speichern und sehen, ob das funktioniert. Klicken Sie auf den Button. Wir sehen den Alarm. Die Idee dieses Beitrags ist ID3, und das funktioniert. Versuchen wir es in einem anderen Beitrag, posten Sie, um auf den Button zu klicken. Die Idee dieses Beitrags ist id2. 31. useRouter: In der Options-API könnten wir mit dem Router programmgesteuert umgehen, könnten wir mit dem Router programmgesteuert umgehen indem wir diesen Dot-Dollar-Router verwenden. Wenn wir zum Beispiel den Benutzer zur Homepage senden wollten , könnten wir diesen Punkt-Dollar-Router-Punkt und dann den Pfad-Schrägstrich machen . Und das würde sie zurück auf die Homepage drängen. Aber auch hier haben wir in der Kompositions-API keinen Zugriff darauf. Also müssen wir den US-Router Composable von Vue Router verwenden . Lasst uns diese Linie loswerden. Importiert Use Router vom View-Router. Und wieder müssen wir dies einer Konstante zuweisen , die wir normalerweise Router nennen. Also dupliziere ich diese Konstante hier, ändere sie in Router und ändere diese, um Routerklammern zu verwenden. Jetzt fügen wir unserer Seite einen weiteren Button nach diesem div mit dem ersten Button hinzu. Lass uns ein weiteres Div hinzufügen. Und dann geht ein weiterer Button mit dem Text nach Hause. In drei Sekunden. Fügen wir dieser Schaltfläche einen Klick-Handler hinzu. Klicken Sie gleich nach Hause in drei Sekunden. Und jetzt lassen Sie uns diese Methode nach dieser Methode erstellen. Also const, geh in drei Sekunden nach Hause entspricht einer Pfeilfunktion setTimeout im VS-Code. Wenn Sie einfach set eingeben, können Sie dieses SetTimeout-Funktionsausschnitt auswählen, das diesen Ausländern erlaubt hat. Ich werde nur das Semikolon los und wir setzen das Timeout auf 3 Tausend Millisekunden drei Sekunden. Nach diesem 3-Sekunden-Timeout möchten wir den Benutzer zur Homepage schicken. Und anstatt diesen Punkt-Dollar-Router Dot Push, Klammern Schrägstrich, zu machen , können wir jetzt einfach Router-Pusch-Schrägstrich machen. Jetzt lasst uns das aufheben. Klicken Sie auf den Button und warten Sie drei Sekunden. Ging zurück auf die Homepage. Wenn wir den Benutzer basierend auf dem Routennamen anstelle dieses expliziten Pfades nach Namen schieben möchten , meine ich den hier auf jeder unserer Routen in index.js im Router-Ordner angegebenen Namenlosen , dann können wir das tun auch. Wir können dies einfach in Router Dot Push und dann ein Objekt und ihren Namen ändern . Und dann der Name der Route, zu der wir gehen möchten, die Kleinbuchstaben zu Hause ist. Speichern Sie das und sehen Sie, ob das funktioniert. Klicken Sie auf den Button. Warte drei Sekunden. Ja, das funktioniert auch. Oder wenn wir den Benutzer auf eine bestimmte Post-Detailseite mit einer bestimmten ID senden möchten , könnten wir das auch tun. Also gehe ich zurück zur Post-Detailseite, ein kleiner Button. Ich dupliziere einfach dieses Div und den Button. Angenommen, wir möchten den Benutzer zum ersten Beitrag schicken. Der Beitrag mit einer ID von ID eins. Ich ändere den Text in dieser Schaltfläche ersten Beitrag zu wechseln, ändere den Methodennamen, um zu den ersten Beiträgen zu wechseln. Lassen Sie uns diese Methode erstellen. Ich dupliziere das einfach. Ändern Sie den Namen, um zum ersten Beitrag zu wechseln, entfernen Sie den Code innerhalb dieser Methode, um den Benutzer auf die Post-Detailseite für die Beiträge mit einer ID von einem zu senden den Benutzer auf die Post-Detailseite , wir können einfach Router Dot Push und dann ein Objekt machen, legen Sie den Namen fest, um Details zu posten. Und dann können wir ein params-Objekt hinzufügen und die ID festlegen , um das zu speichern. Ich befinde mich derzeit auf der Post-Detailseite der Beiträge mit einer ID von drei. Klicken wir also darauf, gehen Sie zum ersten Beitrags-Button und wir befinden uns jetzt auf der Post-Detailseite für die Beiträge mit einer ID von einem. 32. Listen (v-for) [Modul 9]: Listen, die die V4-Direktive verwenden, funktionieren in der Kompositions-API genauso wie zuvor. Aber um das schnell zu demonstrieren, geben wir diese Liste von Beiträgen dynamisch indem wir einen Datenzorn und AV für die Regie verwenden. Lasst uns also zu unserer Beitrags-Seite springen. Source-Views, Posts View, Punktansicht. Und lasst uns eine href einrichten, in der wir eine Reihe von Beiträgen platzieren können . Also füge ich hier einen neuen Kommentar hinzu , der nur besagt, dass wir eine Konstante namens Posts einrichten, die auf eine href gesetzt wird. Wir müssen die Ref-Methode aus der Ansicht importieren. Ich lege das hier ganz oben hin. Aus Ansicht importieren wird ein Array in dieser href platzieren. Und jedes Element im Array wird ein Objekt mit ein paar Eigenschaften sein. Wir fügen also eine ID-Eigenschaft hinzu und legen diese erste fest, um eine Titeleigenschaft hinzuzufügen und diese auf eine zu posten. Und dann eine Menge Komma nach diesem Objekt, dupliziere das zweimal. gerade die IDs auf zwei im Titel geändert , um zwei für das zweite I M zu posten. Und dann setze ich für das dritte Element die ID auf ID3, setze den Titel auf drei und speichere ihn. Dieses Posts Array ist jetzt in unserer Vorlage verfügbar. Lassen Sie uns damit diese Verbündeten mit unseren Router-Links dynamisch ausspucken , indem wir die V-Fall-Direktive verwenden, ich werde alle Alliierten los und die Routen sind verknüpft. Abgesehen von der ersten, außer dem ersten, fügen wir diesem LI eine VFR-Direktive hinzu. Also v4 Beiträge posten. Dies wird unser Posts Array ref durchlaufen. Während es durchläuft, wird jedes Objekt an dem Platzhalter verfügbar sein , der hier angegeben wurde, post. Und wir müssen auch eine Schlüsseleigenschaft hinzufügen, Doppelpunkt k ist gleich. Und wir wollen dies auf etwas setzen , das einzigartig sein wird. Also stellen wir das auf Postdoc ordentlich ein. Spar dir das auf. Und wir können jetzt sehen, dass drei Posts ausgespuckt werden. Lassen Sie uns also den Beitragstitel hier ausgeben , der ein Postdoc-Titel sein wird. Und dann lassen Sie uns den Link und die beiden Requisiten auch aktualisieren. Also verwende ich eine Vorlagenzeichenfolge indem ich einige Back-Ticks hinzufüge, ID1 loswerde und dies dynamisch ausspucke , indem ich geschweifte Dollarklammern hinzufüge. Wir müssen auch einen Doppelpunkt zu Beginn dieser Requisite hinzufügen. Und dann wird innerhalb der geschweiften Klammern die ID ausgegeben, die bei postdoc aufgeräumt ist. Spar dir das auf, lade neu. Wenn wir auf Rom der Nachkriegszeit klicken, die ID einseitig, kostenlos, klicken Sie auf Post, um die ID zweiseitig auszuführen. Sie können sagen, dass es absolut keine Unterschiede gibt , wenn es um Listen gemäß der VFR-Direktive in der KompositionsAPI geht . 33. Vorlage Refs: Sprechen wir über Template-Refs. Jetzt meine ich nicht, dass die Daten Refs, die wir für einige unserer reaktiven Daten verwendet haben. Ich meine, wie wir in der Options-API ein href-Attribut zu einem Element hinzufügen und ihm einen Namen geben könnten . Und dann könnten wir auf dieses Element zugreifen , wenn die Komponente eingebunden ist, und dann etwas damit tun , damit es es oder außerhalb der Klasse fokussiert oder die Elementbreite oder ähnliches herausfinden kann. Ich entferne das einfach. Nehmen wir an, wir möchten auf dieses Überschriftenelement zugreifen, ist H2. Wir möchten die Breite dieses Elements herausfinden. Möglicherweise benötigen wir die Breite dieses Elements für reaktionsschnelle Designzwecke oder ähnliches. Zum Beispiel müssen wir möglicherweise die Größe des Textes ändern, auch dünn, wenn das Element zu breit oder nicht breit genug ist. In der Kompositions-API sind wir immer noch das href-Attribut für das Element , auf das wir abzielen möchten. Und du kannst jeden Namen benutzen, den du magst. Der akzeptierte Standard besteht jedoch darin, CamelCase mit dem Wort ref am Ende zu verwenden . Wir könnten das einrichten, Titel ref, sparen. Wie können wir auf dieses Element zugreifen , wenn diese Komponente geladen wird? Scrollen wir hier nach unten zu unserem App-Titel. Jetzt könnten wir in der Options-API einfach diesen Punkt-Dollar-Refs machen, einen Titel referenzieren. Und wir könnten dann auf das Element zugreifen und dann etwas damit machen, seine Breite herausfinden oder was auch immer. In der Kompositions-API haben wir jedoch keinen Zugriff auf diese Punkt-Dollar-Fs, daher wird dies nicht funktionieren. Was wir stattdessen tun müssen, ist eine Const mit dem gleichen Namen wie unser Ref, Titel ref einzurichten . Also const title href gleich. Und dann müssen wir dies auf ein bisschen verwirrend einstellen , eine Datenhref. Wir setzen dies auf eine Ref-Methode und legen den Anfangswert fest, der wissen soll. Und wieder müssen wir diese Ref-Methode aus der Ansicht importieren. Fügen wir es also unserem Import hier hinzu, grobes Komma, und wir können jetzt über diese href auf dieses Element zugreifen. Der Wert dieser Konstante ausgegangen Komponente ist in diesem Berg gemountet, nahm, was wir tun können, ist draußen, also ref, Punktwert, wir müssen immer noch Punktwert für Vorlagen-Refs verwenden. Dies sollte uns Zugang zu diesem h2-Element geben. Sperren wir das einfach für den Moment aus. Punktprotokoll der Konsole. Spar dir das auf. Und wir könnten sagen, dass die Überschrift in der Konsole ausgesperrt ist. Wenn wir die Breite dieses Elements ermitteln wollten, könnten wir einfach die Punktversatzbreite bis zum Ende beginnen. Ich melde mich einfach eine Vorlagenzeichenfolge mit dem Text aus . Der Titel ist geschweifte Dollarklammern, und dann füge ich diesen Code wieder draußen ein. Also referenz-Punktwert, Punktversatzbreite. Und danach füge ich einfach Pixel breit hinzu und speichere das Nachladen. Und wir können hier sehen, dass der äußere Kreis 318 Pixel breit ist , um unsere AP-Reload-Größe kostenlos zu ändern. Und jetzt heißt es, der Titel ist 453 Pixel breit. 34. nextTick: dem nächsten Häkchen können wir warten, bis das DOM aktualisiert wurde, und dann etwas tun. Wenn wir beispielsweise hier auf den Plus-Button klicken, wird unser Zähler aktualisiert das DOM wird aktualisiert. Unser nächstes Häkchen ermöglicht es uns zu warten, bis das Lock Dom Update abgeschlossen ist , bevor wir etwas anderes tun. Nehmen wir an, wenn wir unseren Zähler erhöhen, wollen wir warten, bis das Dom-Update abgeschlossen ist. Bevor ich etwas anderes mache, gehe ich zu unserer erhöhten Zählermethode zurück, die sich hier in der Options-API befindet. Wir könnten diesen Punkt-Dollar als nächstes ankreuzen und dann einen Rückruf so weitergeben und dann etwas tun, nachdem das DOM aktualisiert wurde. Dies funktioniert jedoch nicht in der Kompositions-API. Wenn ich das speichere und den Zähler ändere wird ein Fehler in der Kompositions-API angezeigt. Wir müssen die nächste Tick-Methode aus der Ansicht importieren. Also scrolle ich zu unserer Importanweisung und fange einfach mit dem nächsten Häkchen bis zum Ende an. Anstelle dieses Punkt-Dollars Alexis können wir einfach das nächste Häkchen machen. Dann gib einen Rückruf hinein. Dann können wir etwas tun , wenn das DOM aktualisiert wurde. Tun Sie also etwas, wenn Zähler im Punkt aktualisiert wird, speichern Sie das. Und wenn wir den Zähler ändern, können wir sehen, dass es gesperrt wird oder da das nächste Häkchen eine asynchrone Funktion ist, können wir auch async warten, um dies zu tun. Um dies zu tun, müssen wir unseren erhöhten Zähler zu einer asynchrone Funktion wie diese machen einer asynchrone Funktion wie diese indem wir hier das asynchrone Schlüsselwort hinzufügen. Anstelle dieser Methode mit dem Callback werde ich das einfach los. Wir können jetzt einfach warten. Nächstes Häkchen. Lüge, wenn wir das speichern, erhöhen Sie den Zähler, wir können sagen, dass das immer noch Arbeit ist. 35. Teleport – Teil 1: V3 bringt uns eine neue Funktion namens Teleport. Jetzt ist dies nicht speziell ein KompositionsAPI-Feature. Wir können es tatsächlich sowohl mit der Kompositions-API als auch mit der Options-API in jeder Ansicht drei auf genau die gleiche Weise verwenden der Options-API in , aber ich wollte es trotzdem abdecken, da es eine so erstaunliche Funktion ist, ermöglicht es uns, ein Element von seinem Standardplatz auf der Dump an einen anderen Ort im Hund zu verschieben seinem Standardplatz , normalerweise außerhalb unserer Ansicht nach oben wie außerhalb dieses div mit einer ID der App, die die Wurzel ist Element unserer Ansicht nach oben oder teleportieren es zu einem anderen div, das ein Kind des Körpers ist. Dies ist sehr praktisch für Dinge wie Modals, die möglicherweise nicht richtig angezeigt werden, wenn wir sie an einem tief verschachtelten Ort in unserem App-DOM-Baum anzeigen . Jetzt ist diese Homepage jetzt ziemlich kompliziert und auch die Beitrags-Seite. Lassen Sie uns also eine neue Seite erstellen wir mit dem Teleport herumspielen können. Also werde ich eine neue Ansicht in Quelle und Ansichten erstellen , die Modalansicht von oben genannt werden, Template-Tag in vielen div mit einer Klasse von Modalen. Und dann beginne ich einfach ein H1-Tag mit den Textmodalen. Bei Save müssen wir dafür eine neue Route einrichten. Also wollen wir zu Source und Router index.js gehen. Lassen Sie uns einfach diese Beitragsroute duplizieren. Dann ändere ich den Pfad zu Slash-Modalen, ändere den Namen in Modals, ändere den Pfad zur Komponente in Modalansicht, Draufsicht. Und lasst uns das speichern und damit wir leicht auf diese Seite gelangen können. Fügen wir einen Link zu unserer Navigation hinzu, die sich in der Quelle app.vue befindet. Und fügen wir nach diesem Home-Link einen neuen Router-Link hinzu. Also dupliziere ich das. Stellen Sie den Pfad für Slash-Modale legen Sie den Text auch auf Modals fest. Spar dir das auf. Und mal sehen, ob wir dorthin kommen können. Und doch sind wir jetzt auf dieser Modal-Seite. Springen wir also zu dieser Modals-View-Punktansicht. Lassen Sie uns einen Button erstellen, der, wenn wir darauf klicken, ein Modal angezeigt wird. Nach dieser Überschrift wird eine Menge Button mit dem Text modal angezeigt. Spar dir das auf. Und lassen Sie uns ein Markup für ein Modal hinzufügen wobei ein Text auf einer Schaltfläche dies vorhersagt. Also viel div mit einer Klasse von Modal darin, eine Menge H1, die mit dem Text übergeht, das ist modal. Und dann eine Menge Absatz mit etwas Lorem Ipsum im VS-Code können wir etwas Lorem Ipsum ausgeben, indem wir einfach Lorem eingeben und Enter in dieser Emmet-Abkürzung drücken. Und ich bin eine Menge Knopf darunter, um das Modal zu verstecken. Und ich lege einfach den Text „Modal ausblenden“ ein und speichere das. Und lassen Sie uns einige Stile hinzufügen, um ihm eine Hintergrundfarbe und etwas Polsterung zu verleihen. Also eine Menge Style-Tag. Zielen Sie auf die Modalklasse. Stellen Sie den Hintergrund auf Beige und stellen Sie die Polsterung auf zehn Pixel ein. Lassen Sie uns nun die Miete zahlen, um festzustellen, ob dieses Modell angezeigt wird oder nicht. Viele unserer Skript-Setup-Tags, viele Kommentare, die nur Modals sagen, viel Konstante namens show modal und setzen diese gleich einem Ref mit einem Anfangswert von false. Wenn das also falsch ist, zeigen wir das Modal nicht an. Und wenn es stimmt , zeigen wir das Modal und wir müssen Ref aus Sicht importieren. Ich füge hier einen weiteren Kommentar hinzu , der nur Eingaben sagt. Dann importieren wir aus Sicht. Und das wird die v-if-Direktive zu diesem div mit der Klasse von Modal ermöglichen . Ich teile die Attribute dafür mit der Erweiterung für geteilte HTML-Attribute auf , die wir zuvor installiert haben. V-wenn modal zeigen, speichern Sie das und wir können sehen, wie das Modal verschwindet. Und wenn wir diesen Wert auf „true“ ändern, lassen Sie es mich wieder sehen. Setzen wir es auf „false“ zurück. Ändern wir den Wert davon ohne Knöpfe. Auf dieser modalen Schaltfläche anzeigen fügen wir einen Klick-Handler hinzu, der show modal auf true setzt. Und das funktioniert. Und dann fügen wir auf dieser hohen modalen Schaltfläche einen weiteren Klick-Handler hinzu , der show modal auf false setzt, speichern Sie das, sehen Sie, ob das funktioniert und das funktioniert. Wir können dieses Modal jetzt ein- und ausblenden. 36. Teleport – Teil 2: Jetzt fügen wir diesem Modell einige Stile hinzu, um es absolut im Vollbildmodus zu positionieren. Also gehe ich zum Style-Bereich, setze die Position auf absolut, setze die linke auf 0, oben auf 0, setze die Breite auf 100% und die Höhe auf 100%. Spar dir das auf. Man kann sagen, dass das nicht funktioniert hat. Ich strecke das nur ein bisschen aus. Der Grund, warum es nicht funktioniert hat, liegt darin , dass dieses modale Element ein Vorfahrenelement hat, dessen Position auf relativ eingestellt ist. Wir öffnen den Dump und wählen unser Root-Element, dieses div mit einer ID der App. Schauen Sie sich die Stile an, die wir sehen können , dass dies eine relative Position hat. Genau dies ist der Grund, warum wir oft die Teleport-Komponente verwenden müssen. Und Sie werden sehen, ob wir dieses Div als direktes Kind des Körpers ziehen , dann ist das Modal im Vollbildmodus, obwohl es nicht ganz richtig aussieht weil ich denke, dass wir einen Z-Index hinzufügen müssen , um sicherzustellen es sitzt oben auf allem. Also springe ich einfach zurück zum Stil und unserem gewünschten Index von einem. Speichern Sie das, laden Sie die Seite neu, zeigen Sie das Modal an und ich ziehe es in den Stamm unserer Seite. Als Kind des Körpers. Er sagt, das sieht jetzt so aus, wie wir es wollen. Wir können jetzt die Teleport-Komponente verwenden, um dieses Div mit der Modalklasse zu teleportieren , um den DOM-Baum weiter zu erhöhen, wie wir es hier in den Entwicklungstools getan haben. Um dies zu tun, alles was wir tun müssen, werde ich einfach neu laden , das das Element umgeben ist , das wir teleportieren möchten, nämlich dieses div. In einer Teleport-Komponente. Ich wähle einfach das Div aus und verschiebe es in den Teleport. Und dann fügen wir ein to-Attribut hinzu, das wir auf einen CSS-Selektor gesetzt haben, um zu bestimmen , wo wir dieses Element zwei unterscheiden möchten. Wenn wir dies nur zu einem direkten Kind des Körpers machen wollen, können wir dies einfach auf den Körper setzen. Das hebe ich dir auf. Und wenn wir neu laden, habe ich das falsch geschrieben, das Teleport sein sollte, sag das noch einmal und lade neu. Und Sie werden sehen, ob wir das Modal jetzt zeigen, es sieht jetzt so aus, wie wir es wollen, weil die Teleport-Komponente es teleportiert hat , um ein direktes Kind des Körpers zu sein. Oder wenn wir das nicht vom Körper unterscheiden wollen und wir es an ein bestimmtes Div schicken wollen, können wir das auch tun. Springen wir einfach zu unserer HTML-Seite im Stammverzeichnis unseres Projekts, index.html. Viel div nach diesem div mit einer ID der App , wo unsere Ansicht dort für die Klasse der Modals-Dash-Container lebt . Spar dir das auf. Und wenn wir jetzt zu Ihrer Modals-View-Punktansicht zurückkehren, können wir zu dieser Teleport-Komponente springen und einfach den Container mit zwei Requisiten, zwei Punkt-Modals ändern und diesen Nachladen speichern. Zeig das Modal. Es verschiebt das Modal auf das Modals-Container-div , das wir gerade angefangen haben. Es sieht jedoch nicht richtig aus, da alle Elemente in dieser App Position erhalten aufgrund dieses Sternchenstils hier eine relative Möglicherweise müssen wir diesen Stil nur überschreiben dieser Modals-Container div. Wir könnten das in unserem Basis-CSS tun. Wenn wir zu Source-Assets und Basis-CSS gehen, können wir einfach nach unten springen. Ziel sind Modale, Container. Container. Stellen Sie die Position auf Initial ein. Spar dir das auf. Jetzt sieht es in Ordnung aus. 37. Child [Modul 10]: Lassen Sie uns eine untergeordnete Komponente in diesem Modul durchgehen. Da sich bei der Verwendung der Kompositions-API viel in Bezug auf untergeordnete Komponenten geändert hat , insbesondere der Umgang mit Requisiten den neuen Modellwert aus und aktualisiert dynamische Komponenten des modalen Wertemusters bereitstellen injizieren. Lassen Sie uns damit beginnen, dieses Modal in eine untergeordnete Komponente umzuwandeln. Ich erstelle eine neue Datei im Quellkomponentenordner. Aus irgendeinem Grund habe ich diesen Ordner nicht , also erstelle ich ihn einfach Komponenten. Da drin. Ich erstelle eine neue Datei namens Modal Dot View. Vieles speichern die Vorlagen-Tags das. Und nun springen wir zu unserer Modals-Ansicht in Quellansichten und Modals-View-Punktansicht. Lassen Sie uns unseren Modalcode einschließlich der Teleport-Komponente ausschneiden einschließlich der Teleport-Komponente und ihn dann in unsere Vorlage in die modale Punktansicht einfügen. Im Moment entferne ich einfach die v-if-Direktive. Dieser Klickhandler auf den High-Modal-Button, da wir diese Daten hier nicht haben. Ich setze auch die Styles von Modals bu.edu. Ich füge das gesamte Style-Tag ein und füge es in den modalen Punkt Vue ein. Spar dir das auf. Importieren wir nun diese Zweikomponente model.py in Modals View Dot View. wir uns einfach daran, wie wir das mit der Options-API gemacht haben. Erlaubt einige weitere Skript-Tags sind der Exportstandard. In der Options-API mussten wir zuerst unser Komponenteneingabemodal aus der modalen Punktansicht der Slash-Komponenten importieren . Und dann mussten wir in unserem Standardexport eine Komponente hinzufügen, Objekte ragen dort heraus. Wir könnten diese Komponente dann in unserer Vorlage verwenden . Dies sollte immer noch funktionieren, denn denken Sie daran, dass wir die Optionen-API mit der Kompositions-API kombinieren können. Obwohl ich das nicht empfehlen würde, wenn wir diese Komponente auf die Seite modal kleben diese Komponente auf die Seite modal und diesen V-if-Bucket setzen. Also zeigt VF modal. Spar dir das auf. Klicken Sie auf den Button. Wir können unser Modal in der Options-API sehen, diese Komponentenobjekte waren immer ein bisschen schmerzhaft im Buch, denn jedes Mal, wenn wir eine neue untergeordnete Komponente hinzufügen oder eine Komponente umbenennen, müssen wir dies immer behalten Komponentenobjekte aktualisiert oder in der Kompositions-API. müssen wir uns keine Sorgen machen. Alles, was wir tun müssen, ist unsere Komponente zu importieren und wir können sie verwenden. Ich kommentiere diesen Code einfach aus. Lassen Sie uns das auf die Kompositions-API-Weise machen. Und alles, was wir tun müssen, ist diese Komponente einfach zu importieren. Ich kopiere einfach diese Importanweisung, füge sie hier ein, und das ist alles, was wir tun müssen. Also speichere ich das Nachladen auf. Wir können jetzt sehen, dass unser modales und hochmodales Eingebautes nicht funktioniert, aber keine Sorge, wir werden das später beheben. 38. Lazy-Loading korrigieren: Bevor wir weitermachen, habe ich festgestellt dass es eine sehr leichte Verzögerung gibt. wir die Modal-Seite zum ersten Mal auf der Posts-Seite laden, sehe ich sie nicht immer, aber manchmal tue ich es. Es ist ein bisschen nervig. Also werde ich das einfach reparieren. Ich gehe zu Source und Router index.js. Und der Grund, warum dies geschieht, liegt darin dass wir diese Komponenten faul laden. Mit anderen Worten, wenn wir vorher eine Komponente wie diese anstelle eines wichtigen Gates laden , füge ich sie einfach so hinzu. Dann wird die Komponente erst an dem Zeitpunkt, an dem wir diese Route besuchen, in den Speicher geladen , was zu einer sehr geringen Verzögerung führt, wenn wir diese Komponenten zum ersten Mal laden. Um dies zu beheben, können wir alle diese Komponenten vorher explizit importieren, genau wie bei der Home-View-Punktansicht. Also werde ich diese Zeile einfach duplizieren und dreimal anzeigen. Und dann mache ich eine Mehrfachauswahl in der Home-Ansicht. Ich ersetze das durch Modals-Ansicht. Und dann mache ich beim nächsten eine Mehrfachauswahl und ersetze sie durch Posts. Zum letzten ersetze ich das durch die Detailansicht von Beiträgen. Dann mache ich einfach eine Mehrfachauswahl diese drei Namen, indem ich die Alt-Taste gedrückt halte. Und dann mache ich hier unten mehrere Auswahlmöglichkeiten jede dieser Methoden, die diese Komponenten faul laden, fügen Sie einfach diese Komponentennamen ein. Das hebe ich dir auf. Wir sollten jetzt keine Verzögerung mehr sehen und alle unsere Seiten sollten schnell und schnell geladen werden. Sogar das erste Mal, als wir sie getroffen haben. 39. Slots Slots Slots: der Kompositions-API funktionieren Slops größtenteils In der Kompositions-API funktionieren Slops größtenteils auf die gleiche Weise. Nur um zu demonstrieren, dass wenn wir zur modalen Punktansicht springen, anstatt diesen Inhalt fest in diese modale W-Komponente zu codieren . Lassen Sie uns dies aus der Ansicht der Punktansicht der übergeordneten Komponentenmodelle mithilfe eines Schlitzes weitergeben . Also springe ich zur modalen Punktansicht. Schneiden Sie diesen Absatz aus und platzieren Sie stattdessen einfach einen Slot hier und speichern Sie ihn. Und dann wird in Modals view dot Vue den Absatz hier einfügen , den ich vorher gekocht habe. Speichern wir die Jukebox , die Modal-Seite sind, klicken Sie auf den Button. Und doch funktionieren diese Inhalte mit unserem Slot und auch benannten Slots unserem Slot und auch benannten Slots auf die gleiche Weise. Ich springe zur Modalansicht. Angenommen, wir möchten den modalen Titel mit einem benannten Slot weitergeben . Ich entferne einfach diesen Text und füge hier einen weiteren Slot hinzu. Wir geben diesem einen Namen des Titels. Spar dir das auf. Wir sollten diesen Titel jetzt mit einem benannten Slot weitergeben können . Um das zu tun, können wir hier einfach ein Vorlagen-Tag hinzufügen , indem wir das Konzept eingeben, das wir mit diesem Slot senden möchten, also mein neuer Titel und dann zu unserem öffnenden Template-Tag müssen wir v Dash Slot, Doppelpunkt und dann das Name des US-Gesetzes, und wir nannten es den Titel. Titel. Mal sehen, ob das funktioniert. Ja, wir können meinen neuen Titel dort sehen. Und wir können dieses V-Dash-Slot-Doppelpunkt-Bit auch abkürzen , indem wir stattdessen ein Hash-Symbol verwenden. Also sage ich das mal, ob das noch funktioniert. Ich arbeite immer noch drin. Sie können sehen, dass dies alles genauso funktioniert wie zuvor mit der Options-API. Das einzige, was anders funktioniert, ist, wie wir programmgesteuert auf unsere Slots-Daten zugreifen. Wenn wir nun auf unsere Slots-Daten in der Vorlage zugreifen möchten, können wir dies immer noch auf die gleiche Weise wie zuvor tun. Nach diesem Slot hier füge ich einfach ein Pre-Tag hinzu. Wir können weiterhin mit dem Schlüsselwort „Dollar Slots“ auf unsere Slots-Daten zugreifen , genau wie wir es in der Options-API konnten. Wenn ich also die Daten zu The Title Slot löschen möchte, kann ich einfach Dollar-Slots Punkttitel und dann Klammern machen. Spar dir das auf. Und wir können sehen, dass alle Daten, die sich auf unseren Slot beziehen, ausgespuckt werden. Wenn wir jedoch programmgesteuert in unserem Skriptbereich auf diese Daten zugreifen möchten , müssen Sie wahrscheinlich selten tun. Obwohl ich das gefunden habe, dass ich das einmal in meinem Budget tun musste , arbeite ich an ihnen. Wir müssen dies in der Kompositions-API ein bisschen anders machen. Also viele unserer Skript-Setup-Tags. also in der Options-API Wenn wir also in der Options-API auf diese Slots-Daten zugreifen wollten, könnten wir einfach diesen Punkt-Dollar-Steckpunkt-Titel machen. In der Kompositions-API müssen wir unser Composable aus Sicht importieren, was die US-Slops Composable ist. Was wir stattdessen tun können, ist zu importieren, Slots aus der Sicht zu verwenden. Und dann können wir dieses Composable einer Konstante zuweisen. Const Slots verwenden also Slots Klammern, und wir können dann mit dieser Slots-Konstante auf unsere Slots-Daten zugreifen . Wenn wir diesen Titel noch einmal bekommen wollten, könnten wir einfach Slot-Punkttitel, Klammern machen. Und loggen wir uns das einfach aus. Console.log. Speichern Sie das, zeigen Sie das Modal an und wir können jetzt sagen, dass unsere Slots-Daten in der Konsole ausgespuckt werden. Auch dies ist nicht etwas, das Sie oft brauchen werden, aber es gibt einige seltene Fälle, in denen Sie dies tun werden. Bevor wir weitermachen, entfernen wir einfach alles im Skriptbereich hier. Und lassen Sie uns dieses Pre-Tag entfernen , das wir ebenfalls hinzugefügt haben. 40. Requisiten: Schauen wir uns an, wie wir mit Requisiten mit der Kompositions-API umgehen . Jetzt ist die Art und Weise, wie wir Requisiten von der Bekleidungskomponente an eine untergeordnete Komponente weitergeben Bekleidungskomponente an eine untergeordnete Komponente , genau die gleiche wie zuvor. Es ist nur die Art und Weise, wie wir Requisiten in der untergeordneten Komponente von der übergeordneten Komponente erhalten der untergeordneten Komponente von , die geändert wurde. Springen wir also zur Modals-Ansicht, Punktansicht. Angenommen, wir möchten diesen Titel mit einer Requisite weitergeben , anstatt einen benannten Slot zu verwenden. Entfernen wir einfach dieses Vorlagen-Tag hier. Ich teile die Attribute auf diesem Modal auf, und stattdessen geben wir dies mit einer Requisite weiter, damit wir eine Requisite namens title hinzufügen und dann unseren Titel übergeben können . Also meine modalen Titel Klammern per Requisite. Spar dir das auf. Springen wir nun zur modalen Punktansicht, und jetzt müssen wir diese Requisite in der Options-API erhalten. Ich starte einfach einen anderen Skriptabschnitt, den Exportstandard. Die Optionen-API. Wir haben eine Requisiten-Option hinzugefügt. Wir können dies entweder auf ein Array oder ein Objekt setzen. Wir könnten unsere Requisiten hier reinlegen. Wir könnten eine Titelstütze hinzufügen, Siedler a2, ein Objekt. Und wir könnten den Typ auf String setzen, da dies eine Zeichenfolge sein wird . Wenn wir möchten, können wir einen Standardwert festlegen, falls die Requisite für die übergeordnete Komponente nicht angegeben wurde. Wir könnten also den Standardwert festlegen , um den angegebenen Titel zu kennen. Sichern Sie, dass dies immer noch funktionieren sollte, wie denken Sie daran, wir können die Optionen API-Breite, die Kompositions-API, kombinieren . Also werde ich diesen Slot hier los. Und stattdessen einfach ausgeben. Sieh geschweifte Klammern und den Titel an. Spar dir das auf. Und mal sehen, ob wir den Titel in unserem Modal sehen können. Dennoch können wir den Titel, den mein Modal-Titel per Requisite sehen. Wir machen dies jedoch etwas anders, indem wir die Kompositions-API verwenden. Lassen Sie uns diesen Script-Abschnitt kommentieren. Wir machen dies auf die Kompositions-API-Weise. Also füge ich zuerst einen dieser Blockkommentare hinzu, der Aufforderungen sagt. Um unsere Requisiten mit der Kompositions-API zu erhalten, müssen wir eine Konstante namens Requisiten erstellen und diese auf eine neue Methode namens define prompts setzen . Eine Sache, die zu beachten ist , ist, dass wir im Gegensatz zu den meisten V-Methoden wie Raf und reaktiv und berechnet usw. diese definierte Requisitenmethode nicht wirklich aus der Sicht importieren müssen . Es ist einfach automatisch verfügbar. Und jetzt können wir unsere Requisiten in diesen Klammern auf die gleiche Weise definieren . Wir können diese als ein Array wie dieses weitergeben. Oder wenn Sie spezifischer werden und den Typ und die Standardeinstellung usw. unserer Requisiten übergeben möchten, können wir ein Objekt übergeben. Stattdessen. Wir können unsere Requisiten auf die gleiche Weise definieren. Ich kopiere einfach diese Titelstütze, die wir vorher definiert haben. Füge das hier ein und speichere das. Und hoffentlich sollte das funktionieren. Jetzt lade ich einfach die Seite neu und zeige das Modal an. Und doch können wir sehen, dass die Requisite durchkommt. Und stellen wir einfach sicher, dass unser Standardwert durchkommt , wenn wir die übergeordnete Komponente nicht angeben. Also springe ich zu Modals View Dot Vue. Habe gerade diese Titel-Requisite entfernt und gespeichert. Und ja, wir können sagen, dass kein Titel angegeben ist, und ich mache das einfach rückgängig und lege ihn wieder ein und speichere ihn. Eine Sache zu beachten ist, dass wir, wenn wir eine Requisite in unserer Vorlage verwenden, entweder den Namen der geraden Eiche der Requisite verwenden können. Wir haben hier Titel, und wir können auch Requisiten Punkttitel verwenden, sparen. Sie können sehen, dass diese beiden funktionieren. Ich setze das einfach wieder auf den Titel zurück. Wenn wir jedoch auf unsere Requisite in unserem Skriptbereich zugreifen möchten , müssen wir diese Requisiten-Konstante verwenden. Wenn ich also versuche, den Log-Titel zu konsolen, wird ein Fehler angezeigt. Wenn wir jedoch den Punkttitel der Protokoll-Requisiten konsolen, können wir sehen, dass die Requisite gesperrt wird. Bevor wir fortfahren, entfernen wir einfach dieses Konsolenprotokoll und speichern es. 41. Emits: Wir können dieses Modal derzeit nicht schließen. Wie können wir diesen Button bekommen, wenn wir darauf klicken, um dieses Modal zu schließen? Nun, dieser Button befindet sich in der modalen Punktansicht. Und wenn wir zur Ansicht der Punktansicht der übergeordneten Komponente springen , haben wir diese modale Referenz zeigen. Dies bestimmt, ob das Modell oben angezeigt wird. Wenn wir also auf diese Schaltfläche in der untergeordneten Komponente klicken, müssen wir diese modale Href, die sich auf der parallelen Komponente befindet, irgendwie wieder auf false setzen die sich auf der parallelen Komponente befindet, , um das Modal auszublenden. Und eine Möglichkeit, dies zu tun, besteht darin ein benutzerdefiniertes Ereignis zu emittieren. Lassen Sie mich auf diese Schaltfläche klicken und dann auf dieses Ereignis in der übergeordneten Komponente in dieser modalen Komponente hören auf dieses Ereignis in der übergeordneten Komponente . Und wenn wir dieses Ereignis erhalten, können wir einfach modale Teile von false anzeigen, diejenigen, die das Modal verstecken. Springen wir also zur modalen Punktansicht und geben ein benutzerdefiniertes Ereignis aus, wenn wir auf diese Schaltfläche klicken. Jetzt werde ich in der Options-API diesen Code einfach abkommentieren. Für eine Sekunde. Wir mussten eine Emit-Option zu einem Array hinzufügen. Und wir mussten unsere benutzerdefinierten Ereignisse hier deklarieren, wie zum Beispiel Modal verstecken. Und wir könnten kein benutzerdefiniertes Ereignis aus unserer Vorlage erstellen, aber wir erklären unsere Grenzen mit der Zersetzungs-API anders. Also kommentiere ich das einfach noch einmal. Was wir tun müssen, starte ich hier einfach einen weiteren Blockkommentar , der besagt, dass emits steht. Was wir in der Kompositions-API tun müssen, um unsere Grenzen zu deklarieren, ist eine Konstante namens emit zu erstellen. Stellen Sie das auf eine Methode namens define ein. Emittiert. Ein bisschen wie die definierte Methode. Auch hier, wahrscheinlich, um die Props-Methode zu finden, müssen wir diese Methode nicht aus der Ansicht importieren. Und dann übergeben wir einfach ein Array in das, in dem wir alle unsere benutzerdefinierten Ereignisse deklarieren können. Lassen Sie uns den Namen Hyde Modal deklarieren und emittieren. Wir können jetzt Ereignisausblenden Modal von überall in unserer Vorlage emittieren . Wir können jetzt einfach zu diesem Button-Element springen und einen Klick-Handler hinzufügen und dann die Dollar-Emit-Methode verwenden und dann einfach diese benutzerdefinierte Methode ausblenden Modal weglassen. Sie können sehen , wie wir Emits in unserer Vorlage verwenden , genau wie zuvor. Es ist einfach die Art und Weise , wie wir sie in unserem Skriptbereich deklarieren , die anders ist. Wenn ich das speichere, können wir jetzt in der Ansicht der übergeordneten Komponente Modals, Punktansicht, auf dieses Ereignis hören . Also lasst uns dazu springen. Wenn wir zu dieser modalen Komponente springen, können wir einfach denken, dass ich Modal verstecken würde, was der Name ist, den wir hier und hier verwendet haben. Und jetzt können wir etwas tun, wenn wir dieses Ereignis erhalten , und wir wollen nur show modal wieder auf false setzen. Wir können einfach Modal gleich falsch zeigen. Also lasst uns das speichern und sehen, ob es funktioniert. Ich lade die Seite neu, klicke auf die Schaltfläche und klicke dann auf die Schaltfläche „Höhe“. Wir können sagen, dass das jetzt funktioniert. So emittieren wir eine Veranstaltung direkt aus unserer Vorlage. Aber was ist, wenn wir ein Ereignis programmgesteuert aus unserem Skript-Bereich emittieren müssen , nun, mit der Options-API, können wir diesen Punkt-Dollar einfach emittieren und dann das Ereignis so emittieren. Das wird jedoch in der Kompositions-API nicht funktionieren. Stattdessen müssen wir diese Emit-Konstante verwenden. Bevor wir das tun, wir stattdessen eine lokale Methode aus, wenn wir auf diese Schaltfläche klicken , anstatt das Ereignis direkt aus der Vorlage zu emittieren lösen wir stattdessen eine lokale Methode aus, wenn wir auf diese Schaltfläche klicken, anstatt das Ereignis direkt aus der Vorlage zu emittieren. Lassen Sie uns eine Methode namens Handle Wilson click auslösen. Dann füge ich hier einen weiteren Blockkommentar hinzu, handle button click richtet diese Methode ein. wir einfach sicher , dass das ausgelöst wird. Wenn wir auf den Button klicken. Das ist Auslöser und Salz, um unsere Veranstaltung von hier aus zuzugeben, alles, was wir tun müssen, ist zu emittieren und dann den Namen unseres benutzerdefinierten Ereignisses. Also verstecke Modal. Lasst uns das speichern und das sollte jetzt funktionieren. Also lade ich neu, zeige das Modal onclick. Auf hohem Modal sehen wir, wie das Modal verschwindet. 42. modelValue: Wenn wir jetzt auf diese Modalverschraubung klicken, lösen wir diese gehandhabte Button-Klick-Methode aus. Und dann geben wir dieses benutzerdefinierte Ereignis hallo modal aus. Dann hören wir auf der übergeordneten Komponente auf dieses Kundenereignis ab und setzen dann show modal wieder auf false. Aber wir können dies tatsächlich vereinfachen indem wir direkt von der modalen Punktansicht der untergeordneten Komponente aus auf diese Show Modal Ref zugreifen direkt von der modalen Punktansicht der untergeordneten Komponente aus und diese direkt wieder auf falsch ändern . Diejenigen, die die Notwendigkeit entfernen, benutzerdefinierte Ereignisse einzurichten und diese Ereignisse dann in der Options-API auszugeben , könnten wir so etwas mit dem Sink-Modifikator tun. In der Kompositions-API können wir dies jedoch mit dem V-Modell, der neuen Modellwertestütze und den Wertereignissen des Aktualisierungsmodells tun. Lasst uns zuerst die Modals springen bu.edu. Anstelle dieser v-if-Direktive wird die AV-Modellrichtlinie hinzufügen, und wir werden das auf diese href show modal setzen , damit wir diese untergeordnete Komponente Zugriff auf diese Show erhalten können modal ref, oops, ich habe eingegeben im V-Modal sollte ich V-Modell sein. Das hebe ich dir auf. Wenn wir nun zu model.fit springen, können wir mithilfe einer speziellen neuen Requisite namens Modellwert auf die Dateneigenschaft zugreifen , die mit V-Model übergeben wird. Und normalerweise habe ich diese Requisite oben auf meinen Drop-Objekten erklärt . Also eine Menge davon hier. Also haben wir gerade das Volumen modelliert. Wir können den Typ festlegen, wenn wir möchten. Das wird ein boolescher Wert sein, weil ich zeige, dass Modal Ref ein boolescher Wert ist. Also setzen wir den Typ 2 Milliarden setzen den Standardwert auf „false“. Lasst uns das aufheben. Verwenden wir nun diese modale Wertestütze , um zu bestimmen, ob das Modal angezeigt wird. Anstelle des V-Ifs, das wir vorher hatten , die übergeordnete Komponente. Wir können einfach zu diesem div mit einer Klasse von Modal aus der v-if-Direktive springen und dies auf den Wert des vf-Modells setzen. Mit anderen Worten, wenn diese modale Referenz der Show falsch ist, wird sie mit dem Modell als falsch weitergegeben und dann als modaler Wert empfangen. Und so wird der modale Wert auf diesem div falsch sein , wobei eine Klasse von Modal nicht angezeigt wird. Wenn Show Modal jedoch Trig ist, wird das mit der V-Flasche weitergegeben und dann von dieser Modellwertrequisite aufgegriffen, wo es immer noch stimmt. Und dann zeigen wir das Modal. Also lasst uns das einfach speichern und sehen, ob es funktioniert. Ich klicke auf den Button, aber wir können das Modal sehen. Wir wissen, dass das richtig durchkommt. 43. update:modelValue: Um dieses Modal auszublenden, löste immer noch diese Handle-Button-Klick-Methode aus. Wenn wir auf den Button klicken, geben wir dieses hohe Modal der Rippen aus, und ich höre auf dieses Ereignis zu und setze dann show modal wieder auf false. Aber wir können die href, die wir hier übergeben, show modal direkt manipulieren die href, die wir hier übergeben, show , indem wir das neue Update-Modellwertereignis verwenden. Auf diese Weise können wir dieses hohe Modalereignis loswerden und es aus dieser Komponente entfernen. Springen wir also zurück zur modalen Punktansicht. Anstatt dieses benutzerdefinierte Ereignis auszugeben, emittieren Sie ein neues Ereignis namens Update-Doppelpunktmodellvolume, bei dem wir den Wert übergeben müssen, wir den modalen Wert zwei ändern möchten. Also wollen wir es in „false“ ändern. Was dies tun wird, ist Wert, den wir mit V-Model übergeben , ihn direkt auf den Wert ändern wird , den wir hier angeben. Wenn ich das speichere, zeige ich jetzt das Modal an, klicke ich auf den High-Modal-Button. Wir können sehen, dass das Modal versteckt ist. Jetzt sehen wir hier eine Warnung in der Konsole, der Wert des Ereignisaktualisierungsmodells, aber sie wird weder in der Emitts-Option noch als Update-Modalwertproblem deklariert . Wir müssen dieses Ereignis nur zu unserem Emits-Array hinzufügen, wie dieses, aktualisiert den modalen Wert des Doppelpunkts. Dies sollte diese Warnung loswerden. Zeigen Sie das Modal an und blenden Sie das Modal aus. Und wir sehen die Warnung nicht mehr. Da wir dieses High-Modal-Ereignis nicht mehr verwenden , können wir es einfach aus diesem Array entfernen. Spar dir das auf. Und wenn ich zurück zur Modalansicht, Punktansicht, springe, müssen wir nicht mehr auf dieses modale Hide-Ereignis achten , da wir jetzt Showvektor mit dem modalen Update-Wert von n manipulieren . Also können wir das jetzt einfach loswerden. Spar dir das auf. Mal sehen, ob das die Arbeit ist. Und doch funktioniert es immer noch. Springen wir zurück zur modalen Punktansicht. Wir können auch emittieren, wenn ich Modellwert auch direkt aus unserer Vorlage aktualisieren würde. Anstatt diese Methode hier abzufeuern, kommentiere ich diese Methode einfach, lasse sie aber als Referenz dort . Wir können diesen Klick-Handler einfach ändern , wenn Sie die Dollar-Emit-Methode verwenden. Gibt einfach den Wert des Aktualisierungs-Doppelpunktmodells aus und legen Sie dann den Wert fest, auf den wir ihn setzen möchten, was falsch ist. Spar dir das auf. Und mal sehen, ob das noch funktioniert, das funktioniert auch immer noch. Sie können also sehen, dass die Verwendung von Modalwert und Update-Modellwert die Kommunikation von untergeordneten Eltern massiv vereinfacht und oft die Einrichtung benutzerdefinierter Ereignisse überflüssig macht und dann auf diese benutzerdefinierten Ereignisse abhört ereignisse. 44. Dynamische Komponenten – Teil 1: Dynamische Komponenten ermöglichen es uns, die Komponente auszuschalten , die in bestimmten Teilen unserer App verwendet wird . Lassen Sie uns dies demonstrieren, indem wir eine dunkle Version unseres Modells erstellen , die wir auf dieser modalbu.edu-Seite basierend auf einem Kontrollkästchen ausschalten können . jetzt in einer realen App Modals haben möchten, Wenn Sie jetzt in einer realen App Modals haben möchten, die sowohl hell als auch dunkel sind, sowohl hell als auch dunkel sind, ist es am besten, nur eine modale Komponente zu haben und die Stile mit Requisiten. Was wir tun werden, ist nicht gerade eine Best Practice, aber es ist eine nette, einfache Möglichkeit, die Konzepte dynamischer Komponenten zu demonstrieren . Lassen Sie uns zunächst unsere modale Komponente in der Modalansicht der Punktansicht zu einer dynamischen Komponente machen. Alles, was wir tun müssen, ist dies in eine Komponente umzuwandeln. Komponente. Ich sorge dafür, dass sowohl die öffnenden als auch die schließenden Tags umbenannt wurden. Und dann fügen wir einfach eine S-Requisite hinzu. Doppelpunkt ist also, und wir setzen das einfach auf die Komponente ein, die wir hier anzeigen möchten. Wir wollen nur unsere Modalkomponente anzeigen. Also können wir einfach den Namen Modal verwenden. Setzen Sie dies auf modal speichern Sie das. Es sollte genau wie zuvor funktionieren. Ich klicke auf Modal anzeigen. Und doch können wir das Modal immer noch sehen. Wir können es immer noch ausblenden, außer jetzt können wir die Komponente , die hier angezeigt wird, tatsächlich ändern , indem wir diese Requisite einfach programmgesteuert ändern. Bevor wir also unsere dunkle Vision unseres Modals erstellen, fügen wir der Seite einfach ein Kontrollkästchen hinzu, mit dem wir damit umschalten können , ob wir helle oder dunkle Modale anzeigen oder nicht. Nach unserer Überschrift füge ich ein div hinzu. Und dann füge ich ein Label hinzu. Und dann werde ich die Texte zeigen Dark Modals, Fragezeichen. Und danach erlaubten Texte eine Eingabe, setzen Sie den Typ auf das Kontrollkästchen. Lasst uns das aufheben, um sicherzustellen, dass es gut aussieht. Und ja, das sieht ziemlich anständig aus. Lassen Sie uns nun so bezahlen ref einstellen, die wir mit diesem Kontrollkästchen kombiniert haben. Scrollen wir also nach unten zu unserem Skriptbereich oben dieser Show modal href. Fügen wir eine neue Referenz namens Chau Doc Modals hinzu, die einem Rap mit einem Anfangswert falsch entspricht . Und wir verwenden dieses Diagramm, um zu bestimmen, ob wir Punktmodale oder Lichtmodale zeigen. Also lasst uns diese Href zu unserem Checkbox finden , das hier ist. Wir können das V-Modell einfach so einstellen , dass es Doc-Modals zeigt. Spar dir das auf. Nur um sicherzustellen, dass das funktioniert, füge ich nach diesem div ein Pre-Tag hinzu und gebe einfach nur Doc-Modals aus. Abgesehen davon können wir sagen, dass es anfangs falsch ist. Und wenn wir das Kontrollkästchen ankreuzen, ist das Kontrollkästchen auf „true“ gesetzt. Und wenn wir das Häkchen deaktivieren, wird es auf false zurückgesetzt , bevor wir unser Punktmodal erstellen Entfernen wir einfach dieses Vor-Tag auf Speichern. 45. Dynamische Komponenten – Teil 2: Lassen Sie uns unser dunkles Modal erstellen. Springen wir also zur modalen Punktansicht. Ich werde diese Kommentare zu diesem auch nur entfernen . Spar dir das auf. Und jetzt duplizieren wir dieses Komponentenmodul, um Komponenten auf modalem W zu beziehen. Duplizieren mit der doppelten Aktionserweiterung benennt diese modale Doc-Punktansicht. Lassen Sie uns die Klasse in diesem Div in Modal Dash Dark ändern. Scrollen Sie nach unten zu den Stilen, änderte die Klasse hier in Modal Dash Dark anstelle eines beigen Hintergrunds. Wir setzen dies auf Hash 333, was eine dunkelgraue Farbe haben wird. Und dann setzen wir die Farbe, die Textfarbe auf Weiß und speichern diese. Nur um zu wiederholen, wenn Sie Modals haben wollten , die hell und dunkel in einer realen Welt sind, dann wäre dies nicht der beste Weg, dies zu tun, weil wir hier einen Großteil unseres Codes duplizieren. Es wäre besser, nur eine einzelne modale Punkt-Vue-Komponente zu haben , die wir dann eine Requisite übergeben können, um eine Requisite namens dark zu sagen. Und wenn wir diese Requisite erhalten, fügen Sie dem Modal eine andere Klasse hinzu, um ihm verschiedene Stile zu geben. Ich verwende dies nur als Beispiel dynamische Komponenten zu demonstrieren, aber nicht als Beispiel für Best Practices. Lassen Sie uns nun die Modalansicht, die Punktansicht springen, und wir können jetzt die Komponente, die in dieser S-Requisite verwendet wird, basierend auf unseren Show-Punkt-Modalen wechseln ref. Zuallererst müssen wir die dunkle Modalkomponente importieren. Ich dupliziere diese Zeile, ändere sie in modales Dokument, ändere den Dateinamen hier in modal dark. Was wir dabei tun können, ist Requisite. Wir können hier eine ternäre if-Anweisung verwenden, um eine andere Komponente auszuspucken , die auf unseren Show-Punkt-Modalen basiert ref. Also können wir tun, wenn Chau Doc Modals wahr sind, dann verwenden wir die modale Dark-Komponente. Andernfalls verwenden wir die Modalkomponente. Also lasst uns das aufheben. Klicken Sie auf die Schaltfläche Modal anzeigen. Wir sehen das leichte modale Hoch Doc. Ich aktiviere das Kontrollkästchen, das zeigte, dass das Set Modals auf true auftauchte. Und wir sollten unser Modal sehen. Wenn wir nun auf den Button klicken, gehen wir los. Jetzt können wir ganz einfach zwischen unseren hellen und dunklen Modalen hin und her wechseln . 46. Bereitstellen / Einwerfen - Teil 1: Wir haben gesehen, wie Daten von einer übergeordneten Komponente mithilfe von Requisiten an ihre direkte untergeordnete Komponente weitergegeben werden. Aber wenn wir Daten an eine wirklich tief verschachtelte untergeordnete Komponente weitergeben wollen , nun, wenn wir Requisiten verwenden, müssten wir die Daten von Elternteil zu Kind an Kind und so weiter weitergeben zu Kind an Kind und so weiter weitergeben bis wir das Erreichen der gewünschten untergeordneten Komponente auf diese Weise kann eine sehr unordentliche Möglichkeit sein, Daten zu übergeben. Und wir können dieses Problem umgehen indem wir bereitstellen inject verwenden. Springen wir zu unserer Wurzelkomponente app.vue. schließe einfach zuerst alles und wir gehen zu source und app.vue. Nehmen wir an, wir haben ein reaktives Objekt auf dieser Komponente mit einigen Daten, die wir bis zu dieser modalen Komponente weitergeben möchten . Lassen Sie uns zunächst einfach ein reaktives Objekt auf app.vue einrichten . Fügen wir unseren Skriptbereich hinzu, unsere Skript-Setup-Tags. Nehmen wir an, wir haben ein reaktives Objekt mit einigen Benutzerdaten. Eine Menge Blockkommentare, die Benutzerdaten sagen, richten eine Konstante ein, die als Benutzerdatensatz bezeichnet wird , die einem reaktiven Objekt entspricht. Jetzt müssen wir reaktiv aus der Ansicht importieren. Viele andere Kommentare , die besagen, dass Importe reaktiv aus der Sicht importieren werden . Und lassen Sie uns diesen reaktiven Objekten der Benutzerdaten einige Daten hinzufügen . Nehmen wir an, es hat eine Name-Eigenschaft. Wir setzen das auf Danny und eine Benutzername-Eigenschaft und setzen das auf Dani caudal. Spar dir das auf. Und lassen Sie uns diese Daten einfach oben rechts auf unserer Seite anzeigen. Ich springe ganz oben in der Vorlage. Fügen Sie ein div mit einer Klasse von Benutzerdaten hinzu, die doppelte geschweifte Klammern zulassen. Punktname der Benutzerdaten. Dann geben wir auch den Benutzernamen aus. Also viel bei Symbol und dann doppelte geschweifte Klammern, dann benutze einen Datenpunkt-Benutzernamen. Spar dir das auf. Lassen Sie uns einfach ein paar Stile überlegen , um das ein bisschen besser aussehen zu lassen. Ich scrolle bis zum Ende des Style-Abschnitts. Ziel-Benutzerdaten div. Wir setzen die Position absolut, den Hintergrund, Beige oben auf 0, um sie oben zu kleben, die rechte auch auf 0. Also haben wir es in der oberen rechten Ecke. Ich setze die Schriftgröße auf 12 Pixel, ein wenig plotten, fünf Pixel. Spar dir das auf. Nehmen wir an, wir möchten diese Daten mithilfe von Requisiten an eine modale Komponente weitergeben . Nun, zuerst müssen wir es als Requisite an unsere Router-View-Komponente übergeben , wie diese, Doppelpunkt-Benutzerdaten entsprechen Benutzerdaten. Sichern Sie sich das, dass wir dies auf unserer Modal-Seite erhalten müssen . Quellansichten, Modale werden nach oben angezeigt. Ich füge hier einfach einen Kommentar hinzu, in dem Requisiten steht. Dass wir eine Konstante namens Requisiten hinzufügen müssen, legen Sie diese gleich fest, um zu definieren. Requisiten geben die Benutzerdaten ein. Requisite. Ich setze den Typ auf Objekt. Und jetzt müssen wir diese Benutzerdatenobjekte wieder an die modale Komponente übergeben , das heißt, Hey, wir können, Benutzerdaten gleich Benutzerdaten machen , speichern Sie das. Und jetzt müssen wir die modale Komponente öffnen , die diese Requisite erhalten hat. Wir müssen die Requisite hier hinzufügen. Verwenden Sie also einen Datensatz, geben Sie zwei Objekte ein. Wir können diese Benutzerdatenobjekte nun endlich auf unserem Modal verwenden . Also eine Menge Div nach diesem Button hier. Dort setze ich einfach den Benutzernamen ist doppelte geschweifte Klammern. Verwenden Sie einen Data-Punkt-Benutzernamen. Speichern Sie das, laden Sie neu, zeigen Sie das Modal an. Wir können den Benutzernamen im Modal sehen. Sie können sehen, dass dies sehr schnell unordentlich wird, besonders in einer realen Welt , wenn Sie möglicherweise Komponenten haben , die viel tiefer verschachtelt sind. Habe diese modale Komponente gemacht. 47. Bereitstellen / Einwerfen - Teil 2: Wir haben also gesehen, dass ich keine Daten von app.vue an die modale Punktansicht weitergeben wollte , wir müssen sie als Requisite an unsere Router-Ansicht übergeben. Dann erhalte diese Requisite in Modals-Ansicht, Punktansicht und gib sie dann als Propaganda an model.py EU weiter und empfange sie dann in modal w, bevor wir sie tatsächlich verwenden können. Dieser Ansatz ist kein großes Problem. Beheben wir dieses Problem mit Hilfe von bereite injiziert. Lassen Sie uns also zuerst alle Änderungen entfernen, die wir hier mit Requisiten in der Ansicht model.py vorgenommen haben . Lassen Sie uns dieses Div entfernen , das wir hinzugefügt haben, und entfernen Sie auch diese Benutzerdatenstütze aus unserem Requisiten-Objekt. Speichern Sie das und springen Sie dann zur Modalansicht der Punktansicht. Entfernen Sie diese Benutzerdatenstütze aus der Komponente, Komponente, und entfernen Sie dann unser Requisiten-Objekt. Spar dir das auf. Dann springen wir zu app.vue und entfernen diese Requisite aus unserer Router-Ansicht, speichern das Reload. Und nun verwenden wir bereitzustellen, um dieses reaktive Objekt der Benutzerdaten für alle unsere app.vue untergeordneten Komponenten verfügbar zu machen, egal wie tief sie verschachtelt sind. Zuerst müssen wir die Bereitstellungs-Methode aus der Sicht importieren. Und jetzt, nachdem wir diese Benutzerdaten reaktive Objekte deklariert haben, können wir diese Bereitstellungsmethode einfach auslösen. Für den ersten Parameter müssen wir nur einen Platzhalternamen für diese Daten angeben , damit wir in unseren untergeordneten Komponenten darauf zugreifen können. Und wir machen das als String. Und ich gebe ihm einfach den gleichen Namen wie unsere Benutzerdaten für reaktive Objekte und folge dann dem zweiten Parameter. Wir geben einfach die Daten weiter, die wir zur Verfügung stellen möchten, was in diesem Fall dieses reaktive UserData-Objekt ist. Ich stelle den zweiten Parameter fest , um Daten zu verwenden. Spar dir das auf. Und jetzt sollten diese Daten jetzt für alle untergeordneten Komponenten von app.use verfügbar sein . Wir müssen jetzt nichts tun, um die Ansichtspunktansicht des Models zu modellieren. Wir können einfach direkt zur Enkelkind-Komponente model.py überspringen und diese Daten mit inject abrufen. Springen wir direkt zur modalen Punktansicht des Enkelkindes. Und jetzt müssen wir die Inject-Methode aus der Sicht importieren. Lauter Kommentar, der oben Impuls sagt, importiert nur injiziert aus der Sicht. Und wir können diese Methode jetzt verwenden. Also springe ich zum Ende des Script-Abschnitts einen neuen Kommentar heraus , der Benutzerdaten sagt. Alles, was wir tun müssen, um diese bereitgestellten Daten zu erhalten, ist Phi der Objektmethode. Und geben Sie den Platzhalternamen als String ein , den wir in unserer Bereitstellungsmethode verwendet haben, bei der es sich um Benutzerdaten handelt. Alles, was es tun muss, ist Benutzerdaten zu injizieren , um sie in dieser Vorlage verfügbar zu machen . Wir müssen sie nur einer Konstanten oder einer Variablen zuweisen. Also weisen wir dies einfach einer Konstante mit demselben Namen zu, Benutzerdaten wie dieser. Und wir können jetzt mit dieser UserData-Konstante auf diese Daten zugreifen . Wenn wir also wieder zur Vorlage springen, viel div nach diesem Button. Und ich gebe einfach den Benutzernamen ist Doppelpunkt, doppelte geschweifte Klammern und verwende dann einen Datenpunkt-Benutzernamen. Speichern Sie das, laden Sie neu, zeigen das Modal an und wir können jetzt unseren Benutzernamen sehen. Aber wir haben unsere Komponenten massiv vereinfacht , indem wir bereitstellen injiziert haben. 48. Was ist ein Composable? [Modul 11]: In diesem Modul werden wir etwas über Composable lernen. Auf Composable sind eine der aufregendsten Funktionen, die mit dem GJ 2013 auf der KompositionsAPI geliefert werden. Aber was ist ein Composable? Nun, Sie können sich Composable als die KompositionsAPIs vorstellen, die Mixins aus der Options-API äquivalent sind. Obwohl sie viele zusätzliche Vorteile bieten, ermöglichen sie es uns, reaktive Daten und Methoden zu extrahieren. Ich halte sie von einer bestimmten Komponente getrennt , damit wir diese reaktiven Daten und Methoden problemlos über mehrere Komponenten hinweg wiederverwenden können diese reaktiven Daten und Methoden problemlos über mehrere Komponenten hinweg , ohne Code duplizieren zu müssen. Wir haben hier ein Beispiel für Code aus einer View-Komponente, die die Kompositions-API verwendet. Und wir haben Code, der sich auf einen Benutzernamen bezieht. Hier haben wir eine Benutzernamendatenreferenz zum Speichern eines Benutzernamens, und dann haben wir eine Funktion zum Aktualisieren dieses Benutzernamens. Nehmen wir an, wir möchten diesen Benutzernamen rref und diese Update-Username-Methode für mehrere Komponenten wiederverwenden . Dass wir diese einfach in ein Composable herausziehen können, wie dieses. Composable ist im Grunde nur eine Funktion und wir können alle unsere reaktiven Daten und Methoden, Uhren, berechneten Eigenschaften usw. in diese Funktion einfügen unsere reaktiven Daten und Methoden, Uhren, berechneten Eigenschaften und dann das Zeug zurückgeben dieses Composable, das wir zur Verfügung stellen möchten. Wir können dieses Composable dann in jede Komponente importieren und dann die Strukturierung verwenden , um die Dinge zu extrahieren , die wir wollen. In diesem Fall verweisen die Benutzernamendaten und die Benutzername-Funktion. Und wir können diese dann in dieser Komponente verwenden. Wenn Sie mehr über die Vorteile von Composable gegenüber Mix-Ins erfahren möchten , können Sie zu diesem Artikel auf View skill.io springen. Was ist eine Vue.js Composable? Viel der Link zur Vorlesung. Kurz gesagt, der Hauptvorteil von Composable gegenüber Mixins besteht jedoch in erster Linie darin, dass sie ganz klar machen , woher alle unsere Daten und Methoden usw. stammen. Wenn wir uns dieses Beispiel aus der Options-API hier ansehen, haben wir eine Komponente, die drei verschiedene Mixins importiert. Und dann verwenden wir eine Dateneigenschaft namens Site von einem dieser Mixins. Aber wenn man sich diesen Code anschaut, ist nicht offensichtlich, woher diese Site-Eigenschaft stammt, ohne diese Mixins öffnen und die Dateien durchschauen zu müssen. Während wir bei Composable immer genau wissen, woher unsere Daten stammen. In diesem KompositionsAPI-Beispiel können Sie sagen, dass wir drei verschiedene Composable importieren. Hier. Ich hole mir eine Namenseigenschaft von einem von ihnen. Wir können klar sagen , dass dies vom US-Produkt Composable stammt. Composable macht es also viel klarer, woher alles kommt. Composable wird auch das Risiko der Benennung von Kollisionen reduziert. Also haben wir hier ein Options-API-Beispiel , das drei verschiedene Mix-Ins einzieht. Wenn alle diese Mix-Ins eine Dateneigenschaft namens name haben, verwenden wir diese in unserer Komponente. Das wird nur die Name-Eigenschaft aus dem letzten Mixin abrufen , den wir importiert haben. Die Nameneigenschaften in den beiden anderen Mixins werden vollständig ignoriert. Composable macht es uns auch leicht unsere reaktiven Daten zu schützen. Mit anderen Worten, machen Sie die Dateneigenschaften in unseren Datenobjekten von außerhalb des Mischens schreibgeschützt, so dass wir die Daten innerhalb des Mixins nur tatsächlich ändern können . Das können wir nicht mit Mix-Ins machen. Was wir zusammensetzbar haben. Wenn wir das Zeug zurückgeben, das wir aus dem Composable freilegen möchten , können wir Werte schreibgeschützt bereitstellen , damit sie nicht von außerhalb des Composable geändert werden können, nur von einer Methode welches sich innerhalb des Composable befindet. Der letzte Vorteil von Composable ist, dass wir sie tatsächlich als globales staatliches Managementsystem nutzen können . So können wir effektiv einen Composable Store mit einer Reihe verschiedener Daten und Methoden erstellen einen Composable Store mit . Wenn wir die Dateneigenschaften in diesem Speicher ändern. Sie werden immer über alle verschiedenen Komponenten in unserer App auf dem neuesten Stand sein . Während wir das nicht mit Mix-Ins machen können. Wenn wir das mit Mix-Ins versuchen, werden die Daten immer für jede Komponente zurückgesetzt , in der wir diese Mischung verwenden. Während wir mit Composable einfach einen State Management Store erstellen können, einen State Management Store erstellen in dem wir, wenn sich die Daten ändern, immer die Änderungen an diesen Daten sehen werden, die sich in allen Komponenten widerspiegeln , die diese verwenden zusammensetzbar. Wenn Sie nicht wissen, was State Management ist, und machen Sie sich keine Sorgen denn wir werden das im nächsten Modul behandeln. Nun, dies sind einige der Hauptvorteile von Composable gegenüber Mixins. 49. Erstelle einen Komponierbar: Lassen Sie uns unser erstes Composable erstellen. Lasst uns zurück zu unserer Homepage springen. Wir öffnen die Homepage. Also Quellansichten und ganze Ansicht, Punktansicht. Angenommen, wir möchten unsere Beratungsdaten und die damit verbundenen Methoden für mehrere Komponenten verwenden . Nun, wir könnten das mit einem Composable machen. Lasst uns jetzt zu unserem Entdecker zurückkehren. Und es wird empfohlen , dass alle unsere Composable in einen Ordner namens use gehen. In unserem Quellordner erstellen wir einen Ordner mit dem Namen US. Und da drin erstellen wir unser erstes Composable. übrigens empfohlen , alle Dateinamen für Composable in CamelCase zu schreiben. Beginne mit dem Wort „benutzen“. Wir nennen das Composable. Verwenden Sie den Zählerpunkt js. In unserem Composable möchten wir nur eine Funktion mit dem gleichen Namen wie unser Dateibenutzungsberater erstellen . Dann möchten wir diese Funktion exportieren , um sie für alle Dateien verfügbar zu machen. Und jetzt können wir einfach alle unsere Konten über Daten und verwandte Methoden ausschneiden und hier einfügen. Ich springe zurück zu unserer Home-View-Punktansicht. Und ich kopiere den gesamten Code, der sich auf den Zähler bezieht, die reaktiven Objekte der Zählerdaten, den Beobachter, die ungerade oder sogar berechnete Eigenschaft, die erhöhten Zähler- und Absenkungskalziummethoden und die ungeschmolzener Falke. Also können wir diesen Witz einfach schneiden, um Council Dot JS in dieser Funktion zu verwenden . Und wir müssen immer noch alle wenigen Methoden importieren, die wir verwenden, wie reaktiv, beobachten und berechnet. Also springe ich zurück zu einem Home-View-Punkt Vue. Kopieren Sie einfach die Importanweisung. Springe zurück, um Counter Dot js zu verwenden. Füge das einfach nach oben ein. Ich strecke das nur ein bisschen aus. Wir verwenden die Ref-Methoden nicht, also können wir das loswerden und diese jetzt speichern , um diese Daten und Methoden allen Komponenten zur Verfügung zu stellen Methoden allen Komponenten zur Verfügung zu in denen wir dieses Composable verwenden, wir müssen sie verfügbar machen Sie sie am Ende dieser Funktion zurückgeben. Genau wie wir es in unseren Komponenten getan haben, als wir das ältere Setup-Funktionsmuster für unsere Komponenten verwendeten . Beginnen wir also hier ein Rückgabeobjekt, und wir geben einfach das Zeug zurück, das wir verwenden möchten. Lassen Sie uns die Zählerdaten, reaktive Objekte, die ungerade oder sogar berechnete Eigenschaft zurückgeben , die beiden Methoden zur Erhöhung und Verringerung des Zählers. So können wir einfach Zählerdaten zurückgeben, dann ungerade oder gerade, dann den Zähler erhöhen und den Zähler verringern und diese speichern. Und wir können dieses Composable jetzt in jede gewünschte Komponente ziehen und Zugriff auf die Daten berechneten Eigenschaften und Methoden erhalten Zugriff auf die Daten berechneten , die wir hier zurückgeben. 50. Benutze unsere Komponierbar: Wir können dieses Composable jetzt in unsere Homepage importieren , die jetzt kaputt ist, weil es versucht, auf Beratungsdaten zuzugreifen. Prüfen Sie eine gerade berechnete Eigenschaft, die in dieser Komponente nicht mehr vorhanden ist. Zuallererst müssen wir dieses Composable importieren. Also können wir einfach importieren. Dann verwendet der Name der Funktion, die wir hier erstellt haben, Kaltura-Import, verwenden den Zähler aus dem Schrägstrich, Benutzer verwenden Zähler, speichern Sie das. Übrigens gibt es einige Dinge, die wir in dieser Importanweisung nicht mehr verwenden. Wir können sehen, dass es ausgegraut ist. Also werde ich reaktiv berechnet los und sehe mir das nächste Häkchen an. Und jetzt müssen wir Zugang bekommen, um Council Composable zu nutzen. Scrollen wir also nach unten zu diesem Zählerkommentar , der vorher noch übrig geblieben ist. Es gibt zwei Möglichkeiten, auf die Daten und Methoden zuzugreifen , die in unserem Composable enthalten sind. Wenn wir unsere Vorlage nicht ändern möchten, die derzeit nach einem Objekt namens Kaltura-Datenmethoden sucht, die als Abnahmezähler und Vergrößerungszähler bezeichnet werden, ist Kaltura-Datenmethoden sucht, die als Abnahmezähler und Vergrößerungszähler bezeichnet werden, diese automatische oder sogar berechnete Eigenschaft. Dann können wir die Strukturierung nutzen, um nur die Dinge zu erfassen , die wir von unserem Composable benötigen , die Zählerdaten ungerade oder sogar unter unseren erhöhten Zähler - und Sendermethoden. Um dies zu erreichen, können wir eine Konstante erstellen , die ein Objekt ist und diese gleich unserem US-Counter Composable setzen . Und dann können wir einfach die Dinge, die wir aus dem Zersetzbaren extrahieren möchten , in dieses Objekt einfügen. Also werden wir keine Ratgeber Daten ungerade oder gerade, erhöhen den Zähler, verringern den Zähler. Weil dies die gleichen Namen sind, die wir hier in unserer Vorlage verwenden. Caltech-Daten verringern Ratgeber Erhöhung Zähler, ungerade oder sogar als dies nicht funktionieren sollte. Also speichere ich das neu und lade die Homepage neu, die jetzt wieder zu funktionieren scheint. Wir können sagen, dass alles noch funktioniert, einschließlich unserer berechneten Immobilie hier. Nun können wir auf all das unmögliche Zeug zugreifen , indem wir einfach die gesamte Composable diese Use COUNTA-Funktion einer Konstanten oder Variablen wie dieser zuweisen die gesamte Composable diese Use COUNTA-Funktion . Zum Beispiel können wir dann auf unsere Zählungen, ein Datenobjekt, Zähler-Datenpunktzählerobjekte zugreifen . Und wir können auf unsere erhöhte Kalziummethode oder Zähler zur Erhöhung des Gegenpunkts zugreifen . Wenn wir es auf diese Weise machen, müssen wir unsere Vorlage aktualisieren, sind vorbereitet und alles mit Ratgeberpunkten, bei denen wir Counter-Data-Punkttitel verwenden, müssen wir dem einen Zählerpunkt voranstellen. All diese Methoden müssen wir mit dem Krebspunkt vorangehen , und dann müssen wir diese Zählerdaten mit den angenommenen Zählungen und unserem berechneten Eigentum mit Ratgeberpunkt auf dem V-Modell vorbereiten angenommenen Zählungen und unserem berechneten Eigentum mit Ratgeberpunkt auf dem V-Modell diese Zählerdaten mit den angenommenen Zählungen und unserem berechneten Eigentum mit Ratgeberpunkt auf dem V-Modell vorbereiten dieser Titel hier auch mit Ratgeberpunkt. Speichern Sie das Nachladen und hoffentlich funktioniert alles noch. Ja, es scheint zu funktionieren. Obwohl es in diesem Fall manchmal sinnvoll sein könnte, das ganze Composable so zu greifen diesem Fall manchmal sinnvoll sein könnte, das ganze Composable so , und in vielen Fällen denke ich, dass der vorherige Ansatz sinnvoller ist, weil er es uns erlaubt zu sehen genau das, was wir von diesem speziellen Composable erfassen. Also werde ich einfach alles rückgängig machen. Habe ich gerade getan. Werden Sie all die Punkte von Punkten los, die wir hinzugefügt haben. Ändern Sie dies zurück in den D-Strukturierungsansatz , bei dem wir klar genau sagen können , was wir vom Composable nehmen. Stellen Sie einfach sicher, dass das immer noch funktioniert. Alles funktioniert immer noch. 51. Nutzen unsere Komponierbar wieder aufwendig: Lassen Sie uns nun unser Composable auf unserer Beitrags-Seite wiederverwenden. Also lasst uns das öffnen. Ansichten und Beiträgen, Ansicht von oben. Nehmen wir an, wir wollen eine viel einfachere Version unseres Zählers auf dieser Seite, nehmen wir an, wir könnten einen Button hinzufügen , der den Zähler enthält. Und wenn wir dann auf den Button klicken, erhöht er den Zähler um eins. Also lasst uns zuerst das Modell hinzufügen. Nach dem Textbereich. Ich füge einen Button hinzu. Darin drin. Ich lege vorerst einfach 0 ein. Viele Klassen der Zähler-Taste speichern das. Lassen Sie uns das einfach in einem Div umgeben, damit es in eine neue Zeile geht. Speichern, das einige grundlegende Styles erlaubt hat. Also dunkle Zählungen oder die Schriftgröße auf 60 Pixel, stellen Sie die Breite auf 100% ein, stellen Sie die Hintergrundfarbe auf Rosa ein. Spar dir das auf. Wir möchten diese 0 durch unseren Zähler ersetzen. Und wenn wir unten klicken, wollen wir den Zähler erhöhen. Also lasst uns zuerst das Composable importieren. Importieren Sie also den Zähler von Slash User Slash use counselor verwenden, speichern Sie hier unten viele neue Kommentare. Counsel Bolton wuchs dem Zeug auf, das wir von der Composable brauchen. Also richten wir eine Const mit einem Objekt ein, das gleich unserer Composable Funktion entspricht. Sie verwenden Zählerklammern. Und alles, was wir vorerst brauchen werden, ist das reaktive Beraterdatenobjekt das unseren Zähler enthält, die Methode zur Erhöhung des Zählers. Spar dir das auf. Lasst uns nun wieder zu unserer Vorlage springen. Befreien Sie sich von dieser 0, ersetzen Sie sie durch doppelte geschweifte Klammern und Ratgeber, Punktzahl, speichern Sie das. Und dann fügen wir dieser Schaltfläche einen Click-Handler hinzu. Klicken Sie also auf Zähler erhöhen. Ich werde es um eine Ersparnis erhöhen. Man kann sagen, dass das jetzt funktioniert. Nehmen wir an, wir entscheiden, dass dieser Button gelb sein soll. Wenn die Zahl ungerade ist. Wir können das ohne selbst berechnete Eigenschaft tun , die in unserem Composable enthalten ist. Also müssen wir hier nur zu unserem D strukturierten Objekt springen und sind auch seltsam oder gerade. Und lasst uns zurück zu unserem Button scrollen. Nehmen wir an, wir möchten dazu eine Klasse hinzufügen. Wenn die Zahl ungerade ist, können wir einfach an eine Klasse von Gelb denken, sagen wir mal. Aber nur wenn ungerade oder gerade gleich ungerade ist. Denn denken Sie daran, dass diese auto- oder sogar berechnete Eigenschaft eine Zeichenfolge von gerade oder ungerade zurückgibt. Das hebe ich dir auf. Und wenn wir uns die Schaltfläche in den Entwicklungstools ansehen, klicken wir darauf, er ändert sich zu eins und wir können sehen, dass die gelbe Klasse hinzugefügt wird. Um erneut darauf zu klicken, wurde die Klasse entfernt. Fügen wir also einfach etwas Stil hinzu, damit dieses Gelb wieder auf das Counter-Dash-Button-Element abzielt , aber wenn es eine Klasse von Gelb hat, legen Sie die Hintergrundfarbe auf Gelb fest und speichern Sie das Nachladen. Wir steigen aus, sagen, dass Bücher, es ist gelb, wenn die Zahl ungerade ist. Nun ist eine Sache zu beachten , dass der Rat wieder auf 0 zurückgesetzt wird , wenn wir die Seiten wechseln. Wenn ich auf die Homepage springe, können wir sagen, dass dies wieder 0 ist. Wenn ich es vergrößere und zurück zur Beitrags-Seite springe, ist diese wieder auf 0. liegt daran, dass jedes Mal, wenn wir die Seite ändern, eine neue Instanz dieser Use-Counter-Methode erstellt wird dieser Use-Counter-Methode erstellt wird. Wenn wir möchten, dass unser Berater ein globaler Zähler ist, der beim Seitenwechsel nicht zurückgesetzt wird, können wir dieses Beraterdatenobjekt einfach außerhalb der Funktion des US-Rats verschieben . Ich wähle das einfach aus und verschiebe es außerhalb der Funktion. Und das wird diese Ratsdatenobjekte zu globalen Objekten machen , die überall verfügbar sind. Also speichern wir das. Und jetzt, wenn ich den Charakter auf erhöhen, sagen wir sechs und wir sind auf die Homepage gegangen, weil wir sagen, dass es immer noch sechs ist. Wenn wir es hier noch einmal erhöhen, sagen wir zehn, scherzen Sie zurück zur Beitragsseite. Wir können sehen, dass der Berater zehn Jahre alt ist und wir verlieren jetzt nie den Überblick über unseren globalen Zähler. 52. Composable von VueUse hinzufügen: Eine großartige Quelle für gebrauchsfertiges Composable ist die View-Use-Bibliothek. Lasst uns rüberspringen, um use.org zu sehen. Alles, was wir tun müssen, ist diese Bibliothek zu installieren und wir haben Zugriff auf über 150 vorgefertigte Composable. Also lasst uns springen, um loszulegen. Und so können wir mit diesem Befehl eine Bibliothek installieren . Also kopiere ich das und öffne unser Terminal. Alkyne ist taub Prozess durch Drücken von Strg und C auf dieser Verknüpfung kann auf Ihrer Plattform unterschiedlich sein. Und dann starten wir diesen Befehl, den wir gerade kopiert haben. Jetzt installiert. Lasst uns also unser Projekt neu starten, indem wir npm run dev ausführen. Wir sollten diese Bibliothek jetzt nutzen können . Ich strecke das nur ein bisschen aus. Ich springe zur Volkszählung. Scrolle nach unten. Ich werde diese Verwendung online Composable verwenden. Dieses Composable ermöglicht es uns, leicht zu erkennen, ob wir derzeit online sind oder nicht. Wenn Sie sich diesen Status hier online ansehen, wenn ich die Verbindung zum Internet trenne, können Sie sehen, dass sich diese Änderung auf offline ändert. Und ich verbinde mich einfach wieder. Ich benutze diesen, weil es schön und einfach zu integrieren ist. Wir könnten dies also in unserem kleinen User-Info-Widget in der Spalte verwenden . Lasst uns alles schließen. Öffnet die Quell-app.vue. Gehen wir zurück zur Dokumentationsseite. Wir müssen nur die Verwendung online importieren wenn Sie Slash Core verwenden. Also kopieren wir diese beiden Zeilen. Fügt sie in app.vue an den Anfang unseres Script-Abschnitts ein. Zieh das ein. Und ich nenne das hier und lege es hier in einen eigenen Bereich. Eine Menge Kommentar, der den Online-Status aussagt. Füge das da rein ein. Und jetzt sollte diese Online-Konstante den True oder Falsch ändern , je nachdem, ob wir online oder offline sind. Verwenden wir das also in unserem kleinen User-Widget. Also nach dem Benutzernamen eine Menge Pipe und ein Leerzeichen, und ich drücke einfach Enter, um das in eine neue Zeile zu stecken. Liebte die doppelten geschweiften Klammern von Word Online. Wir sollten in der Lage sein, diese Online-Konstante auszugeben. Spar dir das auf. Jetzt können wir online als wahr sagen, und wenn ich das WLAN trenne, sehen Sie online falsch. Wir könnten dies verbessern, indem wir diese Online-Konstante verwenden , um verschiedene Texte in verschiedenen Farben auszuspucken verschiedene Texte in verschiedenen Farben je nachdem, ob dies wahr oder falsch ist. Also werde ich all das entfernen, einfach den Status des Text-Netzwerks und dann eine neue Zeile und das viel Spanne setzen. Und dann verwende ich in den doppelten geschweiften Klammern hier eine ternäre if-Anweisung. Wenn online wahr ist , spuckt es online aus. Andernfalls spuckt es offline aus. Spar dir das auf. Und jetzt ist es auf online eingestellt, lassen Sie uns das Internet deaktivieren. Wir sehen einen Wechsel zu Offline. Lasst uns auch die Farbe ändern. An dieser Stelle binde ich mich an das Style-Attribut. Wir setzen die color -Eigenschaft und verwenden erneut eine ternäre if-Anweisung. Wenn also online stimmt, stelle ich den kühleren Grad ein. Sonst setzen wir es auf Rot. Spar dir das auf. Und wir können den Netzwerkstatus online mit grünem Text sagen , das WLAN deaktiviert. Und wir sagen offline mit rotem Text, und ich aktiviere das WLAN einfach wieder. Vergewissern Sie sich, dass Sie sich alle verschiedenen Composable ansehen, die in der Ansicht verfügbar sind, bevor Sie mit der Arbeit an Ihrem nächsten Big View-Projekt beginnen Ihrem nächsten Big View-Projekt da Sie dadurch viel Arbeit ersparen können. 53. Was ist die Staatsverwaltung? [Modul 12]: In diesem Modul werden wir unsere Kunst mit Penny auf die staatliche Verwaltung erweitern . Aber was ist das Staatsmanagement? Nun, lasst uns zuerst einen Blick auf das Problem werfen, das es löst. Also habe ich drei unserer App-Komponenten, Open Hair, App.Vue, die unsere Root-View-Komponente ist. Dann sehen Modals die Punktansicht an, die diese Seite ist, die ein direktes Kind von App.vue ist. Und dann habe ich Ansicht modelliert, das ist dieses Modal, das ein direktes Kind der Modalansicht ist. Wir haben bereits gesehen, dass wir Daten von App.vue, diesem Benutzerdatenobjekt, mithilfe von Requisiten an die modale Punktansicht der Enkelkind-Komponente übergeben konnten diesem Benutzerdatenobjekt, Requisiten an die modale Punktansicht der Enkelkind-Komponente . Um dies zu tun, müssen wir eine Requisite an die Router-View-Komponente übergeben. Dann mussten wir in der Modals-View-Punktansicht diese Requisite erhalten, mussten wir in der Modals-View-Punktansicht diese Requisite erhalten indem wir eine definierte Prompts-Methode einrichten. Dann fügen wir hinzu, um diese Requisite wieder an unsere modale Komponente zu übergeben . In der modalen Punktansicht müssen wir dies erneut erhalten , indem wir es unserem Requisiten-Objekt hinzufügen. Und dann könnten wir diese Daten endlich in der modalen Punktansicht verwenden . Und wir haben gesehen, dass dieser Ansatz ein echter Schmerz im Ball war. Wir haben dies dann durch die Verwendung von offer inject verbessert, was bedeutete, dass wir in app.vue dieses Benutzerdatenobjekt nur zur Verfügung stellen konnten, sobald diejenigen es allen unseren app.vue-Nachkommen Komponenten alle seine Kinder und Enkelkinder. Und dann könnten wir in der modalen Punktansicht dieses Benutzerdatenobjekt einfach einmal injizieren dieses Benutzerdatenobjekt und es dann in unserer Vorlage verwenden. Dies war definitiv eine Verbesserung. Wir könnten hier immer noch Probleme haben. Nummer eins, geben wird Daten nur den Nachkommen der Komponente zur Verfügung stellen , in der wir sie verwenden. So werden die Daten nur Kindern und Enkelkindern dieser Komponente zur Verfügung gestellt. Aber was ist, wenn wir eine Komponente haben kein Nachkomme von App.vue ist, die nicht Teil ihres Komponentenbaums ist. Und wir möchten, dass diese Komponente auf diese Daten zugreifen kann . In diesem Fall wird bereite nicht funktionieren, da sie nur Daten für Nachkommen dieser Komponente zur Verfügung stellt. Das andere Problem ist, was ist, wenn wir diese Daten in app.vue aus der modalen Punktansicht der Enkelkind-Komponente ändern diese Daten in möchten. Nun, im Moment müssten wir ein benutzerdefiniertes Ereignis in der modalen Punktansicht auslösen . Hören Sie auf das Ereignis in der Modalansicht der Punktansicht ab und lösen Sie ein anderes benutzerdefiniertes Ereignis aus. Hören Sie auf app.vue auf dieses Ereignis bevor wir endlich eine Methode auf App.vue auslösen können, die dann die Daten ändert. Und wieder wird das sehr chaotisch. Wenn wir diese Daten aus einer Komponente ändern möchten, die sich außerhalb des App.vue-Komponentenbaums befindet, können wir das überhaupt nicht tun, es sei denn, wir verwenden ein Ereignis die meiste Bibliothek oder ähnliches. Selbst wenn Sie Ereignisse verwenden, können die meisten Bibliotheken für die Zustandsverwaltung ziemlich chaotisch werden, ermöglicht es uns, dieses Problem zu lösen , indem wir alle unsere App-Kerndaten und alle mit diesen Daten verbundenen Methoden in einem einzigen speichern und alle mit diesen Daten verbundenen Methoden zentraler Ort , der außerhalb aller unserer Komponenten liegt, aber auf eine Weise, dass alle unsere Komponenten auf alle Daten und Methoden zugreifen können . Der Ort, an dem wir diese Daten und Methoden speichern , nennen wir ein Geschäft. Denn als wir unsere Projekte erstellt haben, haben wir uns entschieden, unserer App automatisch eine Meinung hinzuzufügen. Das Build-Tool hat bereits eine Penny- oder Store-Datei für uns erstellt . Lasst uns das öffnen. Ich öffne den Explorer. Und wir wollen zu Source Stores gehen und zählen ab.js. In der Meinung, als hätten wir drei Hauptabschnitte. Staatliche Aktionen auf Vermutungen. Im Bundesstaat speichern wir alle unsere Dateneigenschaften. So können Sie hier eine Zählerdateneigenschaft sehen. Lassen Sie sich nicht verwirren , dass wir einen Counter Up erstellt haben. Dieser Code wurde nicht basierend auf irgendetwas generiert , was wir getan haben. Dies ist nur der Standardspeicher, der ausgeliefert wird, wenn wir unsere Projekte mit dem Build x2 verwenden. Wir haben einen Staat, in dem wir alle unsere Dateneigenschaften speichern. Wir werden hier unsere Eigenschaften für Zähler- und Beratungstitel hinzufügen . Dann haben wir Aktionen, bei denen wir Methoden speichern können, die auf die Daten im Bundesstaat zugreifen und diese auch ändern können. Sie können sehen, dass wir hier eine Inkrements-Auktion haben, die diese Ratgeber im Staat erhöht. Und wir werden unseren verstärkten Berater hinzufügen und später die Ratsmethoden verringern . Endlich haben wir hier Vermutungen. Wir platzieren Methoden, die etwas aus dem Staat greifen können, es dann möglicherweise in irgendeiner Weise ändern und dann zurückgeben. Sie könnten sich diese also als ähnliche berechnete Eigenschaften vorstellen . Ein State Management Store wie dieser ist überall in unserer App verfügbar. Alle Komponenten in unserer App, unabhängig davon, welcher Komponentenbaum Teil oder wie tief verschachtelt sie sind, können auf alle staatlichen Aktionen zugreifen und uns, die sich in diesem Store befinden. Dies erleichtert es uns viel einfacher, unsere Apps, die als Daten bezeichnet werden, und alle mit diesen Daten verbundenen Methoden zu verwalten unsere Apps, die als Daten bezeichnet werden . Und das bedeutet auch, dass wir uns keine Sorgen machen müssen Daten von Eltern, einem Kind mit Requisiten oder Bereitstellung an Kind weitergeben zu müssen. Wir müssen uns keine Sorgen machen, dass Ereignisse von Kind zu Elternteil zu Elternteil und so weiter blubbern . Da alle unsere App-Komponenten Zugriff auf alles haben , was sich in diesem Shop befindet. In einem v3 heraus gibt es ein paar verschiedene Möglichkeiten, die staatliche Verwaltung zu integrieren, es sei denn, der Diskursraum als nächstes kommt. 54. Composable State vs. Vuex vs. Pinia: Aus Sicht drei nach oben gibt es drei Möglichkeiten, die staatliche Verwaltung zu integrieren. Nummer eins: Wir können die staatliche Verwaltung mithilfe von Composable integrieren . Nummer zwei: Wir können UX verwenden , ein Statusverwaltungspaket das vom Vue-Team erstellt wurde. Auf Nummer drei können wir Penny verwenden, ein weiteres staatliches Management-Paket das vom Vue-Team erstellt wurde. Werfen wir einen Blick auf die Nummer eins, staatliche Verwaltung mit Composable. Nun, wenn wir zu dem Composable springen, das wir zuvor erstellt haben, verwenden Sie den Zähler im US-Ordner. Was wir hier festgelegt haben, ist die Grundlage für ein globales staatliches Managementsystem. Weil wir unsere Zählungen haben, sind Daten getroffen, die man sich einen Staat vorstellen könnte. Wir haben ein paar Methoden, um die Daten in diesem Zustand zu ändern, die Sie sich als Aktionen vorstellen könnten. Wir haben diese berechnete Eigenschaft, die die Daten aus dem Status abruft und eine darauf basierende Zeichenfolge ausgibt, entweder gerade oder ungerade. Wir könnten uns das als Getter vorstellen. Da sich das Datenobjekt außerhalb dieser Funktion befindet , sind diese Daten global. Und so können wir dies von überall aus ändern und immer die Änderungen sehen, die wir überall sonst vornehmen. Wir haben also gesehen, dass wir den Berater auf der Homepage vergrößern und dann zur Beitragsseite springen können. Wir sehen immer noch, dass der Berater auf den gleichen Wert eingestellt ist wie und ebenso, wenn wir zur Homepage zurückkehren. So können wir Composable wie dieses verwenden , um die gesamte staatliche Verwaltung unserer App zu verwalten , ohne zusätzliche Pakete installieren zu müssen. Wenn Sie mehr über das Statusmanagement mit der Kompositions-API erfahren und mein Kompositions-API-Statusverwaltungsvideo auf YouTube auschecken möchten. Link zu dieser Vorlesung. Wenn Sie jedoch einen standardisierteren und optimierteren Ansatz für Statusmanagement mit das Statusmanagement mit erweiterten Debugging-Funktionen und DevTools-Integration wünschen. Dann sollten Sie ein Paket verwenden, das speziell für die Staatsverwaltung entwickelt wurde, wie UX oder Penny auf. Die UX ist seit langem der Goldstandard für die staatliche Verwaltung von Vue-Apps. Laut Avenue, dem Schöpfer von Ihnen, der aktuelle Goldstandard für die Zustandsverwaltung für V3-KompositionsAPI-Apps Penny. Penny oder hat ein paar Vorteile gegenüber UX. Wenn wir zurück zu diesem Geschäft springen, zählt dieser Penny a Store ab.js. Obwohl wir nur drei Abschnitte haben, staatliche Aktionen und Getter, können unsere Aktionen sowohl auf den Staat zugreifen als auch ihn manipulieren. Während sie in Sicht sind, können Aktionen den Status nicht manipulieren. Sie können auf den Status des Kontos zugreifen und es manipulieren. Wenn dies eine UX-Tür wäre , würde das nicht funktionieren, weil wir in einem Geschäft sowie staatlichen Aktionen und uns auch Mutationen haben, einem Geschäft sowie staatlichen Aktionen und uns auch Mutationen haben, bei denen es sich um Methoden handelt, die die Daten manipulieren können, die sich befinden der Staat. Wenn dies eine Ansicht von nebenan wäre und wir diesen Zähler erhöhen wollten, könnten wir den Zähler aus dieser Aktion nicht erhöhen . Wir müssten eine Mutation auslösen. Zuerst. Wir könnten eine Mutation haben, die Inkremente genannt wird. Diese Mutation würde dann den Zähler erhöhen und wir müssten diese Mutation aus der Auktion mit etwas wie Versandinkrementen auslösen diese Mutation aus der Auktion mit . Das bedeutet, dass Sie in einer Ansicht nebenan oft unzählige verschiedene Methoden haben, die den gleichen Namen haben, wo wir eine Aktion auslösen und dann eine Mutation auslösen und dann ändern der Staat in einem komplizierten Geschäft. Dies führte zu unzähligen zusätzlichen Codezeilen und Komplexität in unserem Geschäft, die wir uns noch keine Sorgen machen müssen. Weil wir mit Penny Are keine Mutationen haben. Wir haben nur Aktionen. Und Aktionen können sowohl auf den Staat zugreifen als auch ihn manipulieren. Wir haben auch erweiterte Debugging-Funktionen in Pena integriert sind, die wir später sehen werden. Es ist auch extrem leicht um ein Kilobyte und wurde speziell für die Kompositions-API optimiert. Mal sehen, wie wir Penny während des gesamten Staatsmanagements für diese App nutzen können . Seit dem Aufbau unserer Projekte haben wir uns entschieden, Pena automatisch hinzuzufügen. Dann wurde bereits eine Meinung zu unserem Projekt hinzugefügt und dieser Shop wurde bereits für uns abgerechnet. Wir können dies als Grundlage für unser Staatsmanagement nutzen. Später im Kurs, wenn wir die Notizbälle erstellen, zeige ich Ihnen, wie Sie einen Penny hinzufügen können, und verunsichert Ihren ersten Laden komplett von Grund auf neu. Dies ist wirklich praktisch zu wissen , falls Sie jemals eine Meinung zu einem bereits existierenden v3-Projekt hinzufügen müssen . Aber wenn du neugierig bist, wie das jetzt geht, aber springe einfach vorwärts zu den Notenbällen. Penny, ein Modul, schau dir die ersten paar Videos an und springe dann wieder hierher. 55. Pinia – Staat – Teil 1: Wir verwenden derzeit diesen Counter Composable , um die gesamte Funktionalität dieses Zählers zu verwalten. Wir haben also alle unsere Daten und Methoden hier Eigentum berechnet. Lassen Sie uns stattdessen Penny F2 verwenden um die staatliche Verwaltung für diesen Zähler einzurichten. Lassen Sie uns zunächst diesen Use Council Composable von dieser Homepage und alle dynamischen Funktionen entfernen . Springen wir zur Home-View-Punktansicht im View-Ordner, um zu unseren Importen zu scrollen, entfernen Sie einfach unseren Use Counter Composable. Und dann scrollen wir nach oben und entfernen Sie alle dynamischen Funktionen. Also dieses h3, wo wir unseren Titel anzeigen, ersetzen wir die doppelten geschweiften Klammern durch hartcodierten Titel. Und lassen Sie uns alle diese Klick-Handler von unseren Schaltflächen entfernen , in denen unser Berater in diesem Bereich angezeigt wird. Ersetzen Sie das weniger durch nur 0 und wo Rabatte angezeigt werden , die ungerade oder gerade sind. Lassen Sie uns die geschweiften Klammern auswählen und wir ziehen gerade vorerst einen ungeraden Schrägstrich. Dann dieser Impuls, eigentlich werde ich einfach die Attribute darauf aufteilen. Lassen Sie uns dieses V-Modell vorerst einfach entfernen. Ich glaube, das ist alles. Wir haben hier einen Fehler. Use Counselor ist nicht definiert. Scrollen wir nach unten zu unserem Skriptbereich. Dieser Fehler liegt daran, dass wir versuchen, Sachen aus unserem US-Counter Composable zu ziehen , die nicht mehr importiert wurden. Lasst uns das alles auch entfernen. Speichern Sie das, aktualisieren Sie es. Und wir haben jetzt alle dynamischen Funktionen von dieser Seite entfernt . Das ist jetzt alles nur Mark Up, oh, es sieht so aus, als würde man dort einige Arten von Angriffen ziehen , anstatt den Worttitel. Also repariere ich das einfach und speichere es. Lassen Sie uns einige staatliche Eigenschaften für unseren Zähler und unseren Beratungstitel hinzufügen . Wir springen zu dem Penny eine Store-Datei, die erstellt wurde, als wir das Projekt generieren , wird bereits Counter genannt. Also können wir den Namen einfach so lassen, wie er ist. Und wieder ist das nur Zufall. Dieser Shop wurde nicht basierend auf einem unserer Codes generiert. Es wurde generiert, als wir das Projekt zum ersten Mal erstellt haben. Im Moment werde ich nur die Auktionen entfernen und uns holen und mich nur auf den Staat konzentrieren wird dieses Staatseigentum ebenfalls entfernen. Lasst uns kein Staatseigentum für unseren Zähler sein. Ich rufe diese Zählung einfach auf und setze das standardmäßig auf 0. Viel Eigentum für unseren Zählertitel. Und wir nennen diesen Titel einfach. Und wir setzen das einfach auf meinen Counter-Titel. Spar dir das auf. Wir können diese Zustandseigenschaften jetzt überall in unserer App verwenden . Mal sehen, ob wir sie auf dieser Homepage verwenden können. 56. Pinia – Staat – Teil 2: Um unseren Counter-Shop nutzen zu können, müssen wir ihn importieren, und wir legen Wert darauf, dass dieser Methodennamen hier verwendet wird, verwenden Sie den Counter Store. Springen wir also zur Home-View-Punktansicht, wo unser gesamtes Kalzium-Markup ist. Scrollen Sie nach unten zum Impuls-Bereich. Und wir importieren, benutzen den Counter Store. Und das habe ich falsch buchstabiert. Du benutzt bewusste Tür ist nicht richtig. Lass uns einfach nachsehen. Ich hab den Namen richtig verstanden. Verwenden Sie den Council Store von App Slash Stores Slash Council. Angenommen, greifen Sie auf den Store zu, wir müssen ihn einer Konstanten oder einer Variablen zuweisen. Ich scrolle hier nach unten. Ich lege unsere Kommentare des Rates ein. Wir können einfach const machen und ihm einen Namen geben. Nennen wir es einfach Zähler, setzen Sie den Wert auf Zähler verwenden, Klammern speichern. Und wir sollten jetzt in der Lage sein, auf alles zugreifen zu können, was sich in unserem Ratsgeschäft befindet, indem diese Gegenkosten verwenden. Das hebe ich dir auf. Und wir sollten jetzt in der Lage sein, unseren Counter Store aus unserer Sicht zu sehen DevTools, wir möchten die Chrome-Entwicklertools öffnen, indem wir zu Developer Developer Tools anzeigen oder die Tastenkombination verwenden. Dann können wir auf diesen kleinen Pfeil klicken und Ansicht wählen. Laden Sie die Seite aus irgendeinem Grund neu, dass DevTools nicht funktioniert. Ich versuche einfach, Chrome zu beenden und es neu zu starten, um zu sehen, ob das behoben wird. Es. Ich bin gerade zum Terminal gesprungen. Kommando. Klicken Sie auf diesen Link, um die App zu öffnen, die DevTools zu öffnen, auf den Pfeil zu klicken und zur Ansicht zu gehen . Es scheint zu funktionieren. Lasst uns das einfach ein bisschen ausstrecken. Strecken Sie das aus. Wenn wir hier zu diesem kleinen Icon gehen und Penny Are, sehen wir unseren Counter Store. Und wenn wir darauf klicken, können wir die staatlichen Eigenschaften darin sehen. Man könnte zählen und wir können Titel sagen. Mal sehen, ob wir diese Count-State-Eigenschaft auf unserer Seite verwenden können . Ich zeige das einfach hier drüben. Bewegen Sie das ein bisschen vorbei. Wir haben unseren Shop dieser Zählerkonstante zugewiesen. Um also auf diese Dateneigenschaft zuzugreifen, die ein R-Zustand ist, sollten wir in der Lage sein, nur Zähler zu zählen. Scrollen wir also nach oben, wo sich unser Zähler befindet. Wählen Sie diese 0, eine doppelte geschweifte Klammern, dann zählen Zählerpunkte, speichern Sie diese, laden Sie sie neu. Wir können dort immer noch 0 sehen und wir können unsere Zustandseigenschaften tatsächlich mit den Penny a Dev-Tools innerhalb der View Dev-Tools ändern. Also können wir entweder auf diesen Stift klicken und eine Zahl eingeben. Und wir sehen dieses Update. Wir können diese kleinen Plus- und Minus-Tasten auch verwenden , um den Zähler zu wechseln. Nicht alle scheinen richtig angeschlossen zu sein. Und wenn wir zu unserem Counter-Shop springen und den Wert ändern, speichern Sie das Reload, wir sehen, dass er jetzt auf zehn eingestellt ist. Lasst uns das wieder auf 0 ändern und speichern das. Aus irgendeinem Grund scheint das heiße Nachladen im Moment nicht zu funktionieren. Jetzt gibt es eine Seite auf dem Penny, eine Seite, auf der Sie erfahren, wie Sie ihn aktivieren können. Und ich habe versucht, dem schon einmal zu folgen und ich konnte es nicht zum Laufen bringen, aber lass uns einfach viel Go haben, da es möglicherweise aktualisiert wurde. Ich werde nur Google Penny beim Sprung zu Penny app.vue js.org. Springe zur Führung, springt runter zum Modulersatz. Es heißt bla, bla, bla. Sie müssen diesen Codeausschnitt neben einer Store-Deklaration hinzufügen . Angenommen, Sie haben drei Geschäfte von GIS, Cart JS und Charge JS, Sie müssen diese nach der Erstellung der Store-Definition anpassen . Stellt sicher, dass Sie die richtige Store-Definition übergeben. Verwenden Sie in diesem Fall aus, kopieren wir einfach dieses Snippet hier und wir fügen es ein, nachdem ich den Counter Store benutzt habe. Schätze, wir müssen diesen Benutzer durch den Use Counter Store ersetzen . Fügen Sie das ein und speichern Sie das Nachladen. Wir haben hier einen Fehler, uncaught ReferenceError akzeptieren HTML-Update ist nicht definiert. Gehen wir zurück zum Beispiel. Wir müssen dies importieren auch HTML-Update aus der Meinung akzeptieren. Also kopiere ich das und probiere es aus. Speichern Sie das Nachladen. Mal sehen, ob das heiße Nachladen jetzt funktioniert, ändere ich den Berater auf zehn, außer das, und es scheint immer noch nicht zu funktionieren. Vielleicht müssen wir diesen Prozess beenden und erneut starten. Ich beende den Prozess mit der Steuerung und sage npm ausführen, dev ausführen, die App neu laden. Lassen Sie uns das auf 100 ändern, und es scheint immer noch nicht zu funktionieren. Hoffentlich wird dies irgendwann behoben sein. Und wenn ich eine Lösung finde, viel Video zum Kurs, aber im Moment werde ich einfach diesen Code entfernen, den wir gerade begonnen haben. Und da es scheint nicht zu funktionieren. Auch wenn Sie wissen, wie Sie es zum Laufen bringen hinterlassen Sie bitte eine Nachricht mit dieser Vorlesung. Also lasst uns das entfernen außer HMM, auch aktualisieren. Zähler zurück auf 0. Im Moment müssen wir einfach weiter neu laden wenn wir Änderungen an unserem Geschäft vornehmen. Jetzt schließen wir den Counter-Titel an. Wir springen zurück zur Home-View-Punktansicht, wählen diesen Text fest codierten Titel aus und löschen, die doppelte geschweifte Klammern sind. Und wieder, um auf unseren Laden zuzugreifen, können wir einfach den Zähler benutzen. Und um dann auf die Titeleigenschaft zuzugreifen, können wir einfach einen Punkttitel erstellen und das speichern. Und wir können meinen Ratgebertitel auf der Seite sehen. Und wenn wir es hier in den Entwicklungstools ändern, sollten wir es auch aktualisieren sehen. Und das funktioniert. Schauen wir uns auch diesen Input an, der hier ist. Wir fügen einfach das V-Modell hinzu und setzen das auf dasselbe, die Zählung, die Punktzahl. Spar dir das auf. Eigentlich nein, dies sollte auf den Titel gesetzt werden. Also wollen wir Ratgeber Punkttitel, speichern Sie das. Wenn wir diesen Titel in der Eingabe aktualisieren, sagen wir auch update in dieser Überschrift. Und wir sehen es auch in den DevTools aktualisiert. 57. Pinia – Aktionen: Lassen Sie uns einige Aktionen in unserem Meinungsspeicher hinzufügen. Im Meinungsspeicher sind Aktionen im Grunde nur Methoden, die auf die Eigenschaften in unserem Bundesstaat zugreifen und sie ändern können. Aktionen entsprechen also den Methodenobjekten in der Options-API oder irgendwelchen Methoden, die Ihre reaktiven Daten in der Kompositions-API ändern , wir müssen nur ein Objekt nach dem Status hinzufügen hieß Aktionen. Ups, das sollten Auktionen sein. Und wir können alle unsere Aktionen hier platzieren. Lasst uns also eine Aktion schaffen, um unseren Zähler zu erhöhen. Also erstelle ich hier eine Methode namens Vergrößerung Counselor, um auf Eigenschaften in unserem Bundesstaat zuzugreifen Wir können einfach das Keyword-Bit verwenden, wie wir es in der Options-API getan haben , um auf unsere Dateneigenschaften zuzugreifen. Also können wir einfach diesen Punktzähler plus machen. Dieser Sauerstoff sollte gut sein. Lassen Sie uns also ein Komma hinzufügen, diese Aktion duplizieren und dieses Komma loswerden. Und wir werden eine Aktion zur Verringerung des Zählers einrichten , der als Absenkungszähler bezeichnet wird, wird nur sagen, dass dieser Punktzähler minus minus. Und ich habe gerade erkannt, dass dies Zählung sein sollte, kein Zähler. Also ändere ich das einfach, um das zu zählen und zu ändern, um es auch zu zählen. Spar dir das auf. Und wir sollten diese Aktionen jetzt nutzen können . Springen wir also zurück zur gesamten View-Punktansicht und springen wir zu diesem ersten Knopf. Nach dem Zähler darf ich auf den Handler klicken. App-Klick ist also gleich. Um auf das Geschäft zuzugreifen, können wir den Zähler verwenden , der der Name der Konstante ist, die wir hier verwendet haben. Und um auf die Aktion zuzugreifen, können wir einfach Punkte und dann den Namen der Aktion machen. Also erhöhen Sie den Zähler, speichern Sie sich das. Mal sehen, ob das funktioniert. Ich denke, wir müssen am Ende vielleicht Klammern hinzufügen. Also lasst uns das versuchen, speichern Sie das, und wir haben hier einige Fehler. Wir müssen vielleicht nur neu laden. Versuchen wir es noch einmal. Mal sehen, ob wir diese Klammern hinzufügen müssen . Eigentlich speichere ich das auf. Erneut laden. Eigentlich müssen wir die Klammern nicht hinzufügen. Springen wir zum Minus-Button , der direkt vor dem Zähler liegt. Und lassen Sie uns einfach diesen Click-Handler kopieren. Fügen Sie es auf diese Schaltfläche ein, ändern Sie dies in Coolselor Dot Reduktion Counter, speichern Sie das. Beide Buttons funktionieren jetzt. Und wir können auch Parameter an unsere Aktionen senden. Wenn ich also einfach zurück zu Counter Dot js springe, wenn wir möchten, dass diese Parameter erhalten , können wir hier einfach einen Namen für diesen Parameter hinzufügen. Nennen wir es also Betrag. Nehmen wir an, wir möchten den Zähler um diesen Betrag erhöhen oder verringern , den wir übergeben. Um es um diesen Parameter zu erhöhen, können wir einfach diese Punktzahl plus gleichem Betrag vornehmen. Und um dann zu verringern, wird es nur diese Punktzahl minus gleich viel tun . Spar dir das auf. Wenn wir einen Parameter übergeben möchten, Sie einfach Klammern am Ende des Methodennamens für diese Schaltfläche angehalten , er wird ihn um eins verringern. Und dafür wird Boltzmann es um einen weniger verringern , auch die anderen Knöpfe anschließen, dieser und dieser wird diese um zwei verringern. Erhöhen Sie um zwei. Ich kopiere diesen Klick-Handler von der Plus-Button füge ihn in diesen ein. Wir ändern einfach den Wert, den wir in zwei weitergeben. Dann machen wir dasselbe für die anderen Absenkungspunkte, kopieren den Klick-Handler, fügen ihn hier ein und ändern die Zahl in zwei. Und sagen wir, dass jetzt hoffentlich alles über Spannungen funktionieren sollte. Ja, wir können es um eins verringern und um eins erhöhen. Diese funktionieren nicht. Möglicherweise müssen Sie nur noch einmal neu laden. Ja, das funktioniert nicht. Wir können um zwei steigen und auch um zwei sinken. Und wir können auch sehen, dass sich die Daten in DevTools ändern. 58. Pinia – Getter: Getter ermöglichen es uns, einen Wert aus unserem Bundesstaat zu erhalten und ihn dann auf irgendeine Weise zu ändern oder etwas basierend auf diesem Wert zu generieren, ihn dann zurückzugeben und für jede Komponente verfügbar zu machen , die diesen Store verwendet Sie können sich vorstellen, uns als das staatliche Management-Äquivalent zu berechneten Eigenschaften zu erhalten. Die Rückgabewerte von Gettern werden also zwischengespeichert und nur aktualisiert wenn sich ihre Abhängigkeiten ändern, wenn sich die Statuseigenschaften, die die Getter verwenden, geändert haben. Lassen Sie uns also einen Getter zum Aufteilen von ungerade oder sogar hier erstellen , derzeit basierend auf dem Wert des Zählers, dieser Count-Eigenschaft, fest codiert ist. Um Schuldner hinzuzufügen, benötigen wir nur ein anderes Objekt namens Getter. Übrigens spielt es keine Rolle, in welcher Reihenfolge wir diese aufgegeben haben. Wenn Sie möchten, können Sie die Getter nach dem Status und dann die Auktionen unten platzieren. Es spielt keine Rolle. Aber wie auch immer, fügen wir ein Aufstehen hinzu, das herausfindet, ob diese Zahl ungerade oder gerade ist, und dann die Texte ungerade oder gerade zurückgibt. Also erstellen wir einen Getter namens odd oder even. Dies sollte eine Eigenschaft sein, die wir auf eine Methode wie diese festgelegt haben, um auf unseren Status zuzugreifen . Wir können den Status einfach als Parameter in dieser Methode übergeben . Um diese Zähleigenschaft zu nutzen, die sich im Bundesstaat befindet, können wir einfach die Zählpunktzahl durchführen. Wir wollen herausfinden, ob das merkwürdig oder gerade ist. Also verwenden wir dazu den restlichen Operator. Es kann einfach tun, wenn State Dot Count Rest zwei gleich 0 ist. Mit anderen Worten, wenn wir die Zählung durch zwei teilen und den Rest erhalten und dieser Rest gleich 0 ist, dann wissen wir, dass die Zahl gerade ist, damit wir den Text sogar zurückgeben können. Andernfalls können wir die Autonomie des Textes zurückgeben. Es ist wichtig zu beachten, dass sie einen Wert zurückgeben müssen, um uns zur Arbeit zu bringen. Also lasst uns das Nachladen speichern. Und das sollten wir auf unserer Seite verwenden können. Springen wir also zu unserem Home-View-Punkt Vue. Werde diesen seltsamen Schrägstrich los. Sogar Texte sind doppelte geschweifte Klammern. Wir können einfach Counter Dot ungerade oder gerade machen. Spar dir das auf. Und wir können sagen, dass der Zähler gerade ist, wir ändern ihn in einen. Wir sehen, dass der Zähler merkwürdig ist. Wenn wir uns auch Dev-Tools ansehen, können wir unsere Getter auch hier sehen, und wir können sehen, wie sich dies ändert. Ein weiterer Vorteil von Pennies gegenüber ein paar x , den ich zuvor nicht erwähnt habe, ist, dass wir keine Statusaktionen von Gettern angeben müssen , wenn wir diese in unserer Vorlage oder in unserem Skript-Bereich verwenden . In einer Ansicht nach oben müssten wir einen Ratgepunktstatus, Punkttitel, machen. Und wenn wir dann eine Aktion auslösen, müssten wir Gegenpunktaktionen durchführen , den Rat verringern usw. In der Meinung nach Europa müssen wir diese nicht angeben, was unseren Code etwas weniger ausführlich macht. 59. Pinia – Nutze unseren Shop überall: Jetzt, da unser Meinungsspeicher eingerichtet ist, können wir die staatlichen Aktionen nutzen und uns überall in unserer App bringen. Verwenden wir diesen Shop auf unserer Posts-Seite für diesen Zähler. Dieser Zähler verwendet derzeit Use Counter Composable, den wir zuvor erstellt haben. Also lasst uns das von dieser Seite entfernen. Und all die dynamischen Funktionen und Hook the Spots sind nicht zu neu. Penny zählt oder lagert. Lasst uns zu dieser Seite springen. Ansichten und Beiträge view dot Vue wird diesen Import des US-Zählers Composable entfernen . Und entferne diese Const auch, wo immer das Zeug, das wir benutzen, aus dem Composable schnappst. Und dann springe ich zur Vorlage hoch. Ersetzen wir diese Zähler-Datenpunktzahl durch die unzähligen in unserem Shop. Also Zähler Dot Count. Und lassen Sie uns diese Methode hier ersetzen, erhöhen Sie den Widerspruch zu der erhöhten Gegenaktion in unserem Geschäft. Wir können dies einfach ändern, um Zähler zu kontern, punkterhöhter Zähler. Da die Methode denselben Namen hat. Diese Klasse, die ausspuckte basierend darauf, ob die Zahl ungerade oder gerade ist, können wir einfach diese seltsame oder sogar durch den Getter ersetzen , der in unserem Geschäft ist. Also Zählerpunkt ungerade oder gerade. Lassen Sie uns also ändern, dass Punkt ungerade oder gerade zählt, speichern Sie das Reload und wir haben hier einen Fehler. Was ist los? Eigenschaftenzähler ist der Zugriff während des Renders , wurde jedoch nicht für die Instanz definiert. Scrollen wir einfach nach unten. Wir haben vergessen, unseren Shop zu importieren. Springen wir zum Home-View-Punkt Vue. Kopieren Sie diese Eingabezeile, in die wir den Stuhl importieren, fügen Sie ihn in die Posts View, Punktansicht ein. Und dann müssen wir dies auch einer Variablen zuweisen. Also kopiere ich das aus Home-View-Punktansicht und füge das hier ein. Ich entferne einfach diesen Kommentar, speichere den und wir sollten loslegen. Also lasst uns nachladen. Button funktioniert jetzt. Wir können in den Entwickler-Tools sagen, dass es die Unzähligen in unserem Meinungsspeicher modifiziert , weil unser Meinungsspeicher global ist. Sie. Als wir auf die Homepage gesprungen sind, sollten wir sehen, dass die Zählung auf acht festgelegt ist. Das ist es. Wenn wir den Zähler hier erhöhen und zurück zur Beitrags-Seite springen, können wir sehen, dass der Wert des Zählers immer aktuell ist , unabhängig davon, wo wir uns in unserer App befinden. 60. Kursprojekt : Noteballs [Modul 13]: Wir werden den Rest dieses Kurses damit verbringen, alles zu belegen, was wir gelernt haben, um diese reale Notizen-App namens Nope Balls zu erstellen, die dies erstellt, aber erlauben Sie uns, all unsere neuen Kenntnis der Grundlagen der Kompositions-API und festigen dieses Wissen mit der Schaffung einer realen Welt von Grund auf neu. In dieser App können wir eine Liste von Notizen anzeigen. Jeder Knoten hat die Notiz zur Anzahl der Zeichen und eine Bearbeitungs - und Löschschaltfläche. Wir können eine neue Notiz hinzufügen. Wir können eine Notiz bearbeiten, speichern und mit diesem Konformationsmodal können wir auch eine Notiz löschen . Und wir haben auch eine Kopfzeile mit Links auf zwei Seiten, Notizen und Statistiken. Und wir haben diese Statistikseite, auf der wir Statistiken zu unseren Notizen anzeigen, einschließlich der Anzahl der Notizen, die wir zur Gesamtzahl der Zeichen aller unserer Notizen haben . Es wird auch vorzeigbar aussehen, wie Sie sehen können , indem Sie die Bowler-CSS-Bibliothek verwenden. Und es wird auch reagieren. Auf dem Desktop haben wir diese Links zu unseren beiden Seiten, aber wenn wir dies verkleinern, können wir alle Elemente sehen, die für Mobilgeräte skaliert sind und unsere Links in der Kopfzeile zu diesem etwas größeren Symbol geändert wurden. Und wenn wir darauf klicken, sehen wir die Links zu unseren beiden Seiten. Diese App wird fast jedes Konzept nutzen , das wir zuvor im Kurs gelernt haben , einschließlich Router auf den US-Routen anzeigen und Router Composable verwenden. Dieses Mal werden wir tatsächlich Vue Router installieren und alles von Grund auf neu einrichten, werden reaktive Daten verwenden, einschließlich Refs und reaktive Objekte werden Methoden verwenden berechnete Eigenschaften, und Uhren werden untergeordnete Komponenten verwenden , einschließlich Requisiten, Emitten und Update-Modellwert, wird Template-Refs auf Composable verwenden, einschließlich benutzerdefinierter Composable auf einem Composable von den wenigen use library verwendet Direktiven und Lebenszyklus-Hooks. Und wir werden die gesamte Staatsverwaltung unserer App mit Pfennigen einrichten . Obwohl wir dieses Mal tatsächlich Penny a installieren werden, richten Sie unseren Penny a Store komplett von Grund auf neu ein. Und natürlich werden wir auch staatliche Aktionen und eine ganze Reihe von Gettern zu unserem Penny a Store hinzufügen staatliche Aktionen und eine ganze Reihe . 61. Projekt erstellen: Lassen Sie uns eine brandneue Ansicht erstellen, drei Projekte für unsere Notizbälle nach oben. Lasst uns auf die V3-Website gehen. Ich suche nach V3 gescherzt mit v3 Punkt Vue js.org. Und früher im Kurs habe ich Ihnen gesagt, dass die Dokumente im Begriff sind, massiv überarbeitet zu werden , und ich musste die URL ändern , um zu den neuen Enten zu gelangen. Aber es sieht aus wie die New Docs und unser Leben, wir können einfach zur Installation springen. Scrolle nach unten. Auch hier müssen wir kein JS installiert haben. Was Sie wahrscheinlich schon an dieser Stelle installiert haben. Lassen Sie uns mit diesem Befehl ein neues Ansichtsprojekt erstellen. Kopiere das, springe zu meinem Terminal und VS-Code und ein Gamete kann dies mit Steuerung und Back-Tick umschalten . Und ich sorge dafür, dass Sie sich in dem Ordner dem Sie Ihre Projekte speichern. Sie möchten dies definitiv nicht im vorherigen Projektordner ausführen , wenn Sie sich dort befinden, füge ich das ein und starte es. Ich gebe y ein, um der Installation zuzustimmen, Ansicht für den Projektnamen und den Projektordner zu erstellen. Ich verwende die View-Dash-Composition API. Nope Bälle. Wir können jeden Ordnernamen verwenden, den Sie mögen. Ich werde den Knoten für alle Optionen auswählen. Wir werden zu diesem Zeitpunkt keine Vue-Routen installieren , da es diese von Grund auf neu installieren wird , stattdessen alles von Grund auf neu. Also nein, und wieder mit Pennies werden wir das alles von Grund auf neu einstellen. Also entscheide ich mich für Nein, nein, nein. Vielleicht möchten Sie erwägen, ja Lynn in Ihren eigenen Projekten zu verwenden , um Ihnen dabei zu helfen, die Codequalität sicherzustellen. Aber der Einfachheit halber werde ich einfach eine Notiz dafür wählen. Und wir haben hier ein paar Startschritte. Also müssen wir nur in den Ordner laden und npm install ausführen , um die Abhängigkeiten zu installieren und dann npm run dev auszuführen. Und ich kann sehen, dass der Ordner hier erstellt wird, Komposition API nope balls. Also ziehe ich das in den VS-Code. Und dann öffne das Terminal und führe npm install aus. Dann führe npm dev aus, um es zu starten. Jetzt können wir den Befehl befehlen und auf diesen Link klicken und wir können sehen, wie die Basis-App im Browser läuft. Bevor wir anfangen, ändern wir einfach den Namen , der dort oben erscheint. Also öffne ich den Explorer und gehe zu index.html. Ich habe gerade den Text in diesen Titel-Tags geändert , um Bälle zu notieren. Spar dir das auf und wir sind jetzt bereit, mit der Herstellung von Nope-Bällen zu beginnen. 62. Router – Installieren und Einrichtung von Routen: Während es im Build-Tool eine Option gibt, verwenden wir einfach , um Vue Router automatisch zu unserem Projekt hinzuzufügen. Es ist gut zu wissen, wie dies manuell geht, nur für den Fall, dass Sie Vue Router zu einer vorhandenen Ansicht hinzufügen müssen. Drei Projekte, die es noch nicht eingerichtet haben. Lassen Sie uns Vue Router zu unserem Projekt hinzufügen und alles einrichten. Lasst uns also zu unserem Terminal springen und den Todesprozess mit Kontrolle beenden und sagen, Vue Router installieren. Wir können einfach npm install Vue Router vier ausführen , um die neueste Version Ihres Routers zu erhalten , die jetzt installiert ist. Wir können unser Projekt erneut starten mit npm run dev, schließen Sie das Terminal. Im gesamten Router muss unsere API Quelle und main.js springen. Wir können nicht zu unserer App weitergeleitet werden, indem die Create Router -Methode von Vue Router importieren und diese hinzufügen entsteht eine Kette mit einigen Optionen. Zuallererst müssen wir nach dieser ersten Zeile Create Router vom Router importieren. Und wir können diese Methode zum Erstellen von Routen oder dieser Methode verwenden , um unseren Router einzurichten. Wir müssen dies einer Konstante zuweisen. Also erstellen wir eine Konstante namens Router und weisen diese dieser zu. Wir wollen es mit all unseren Router-Optionen zu einem Ziel erreichen . Die erste Option, die wir hinzufügen müssen, ist der Verlaufsmodus. Wir können dies festlegen, um entweder einen Webverlauf zu erstellen oder einen Web-Hash-Verlauf zu erstellen. Jetzt erstellen Sie Webverlauf verwendet echte URLs im Browser wenn wir über alle Seiten navigieren. Wenn wir zum Beispiel zu einer About-Seite , wäre der Pfad nur ein Schrägstrich. Während wir mit dem Web-Hash-Verlauf Slash und dann Hash sagen, dann Schrägstrich und dann darüber, wann wir auf unsere About-Seite gehen, und ich werde hier den Web-Hash-Verlauf verwenden, denn wenn wir diesen Modus verwenden, wir brauchen kein schickes Server-Setup, um unsere App zum Laufen zu bringen , wenn wir uns entscheiden, sie auf einem Server bereitzustellen. Lassen Sie uns diese Verlaufseigenschaft festlegen, um einen Web-Hash-Verlauf zu erstellen. Wir müssen das aus Vue Router importieren VS Code wird automatisch für mich hier hinzugefügt . Aber wenn deins nicht ungerecht ist, füge es zu diesem Impuls hinzu. Die nächste Option, die wir hinzufügen müssen, sind unsere Routen. Wir erstellen eine Eigenschaft namens Routen-Setup zu einem Array. Und wir können alle unsere Routen hier einrichten. Bevor wir das tun, fügen wir diese Router-Instanz unserer App hinzu. Erstellen Sie danach unsere App, wir können die US-Methode zu diesem Chain Dot Use Klammern hinzufügen , und wir können diese Router-Konstante einfach übergeben. Ich werde das einfach auf mehrere Zeilen aufteilen und das speichern. Stellen wir sicher, dass wir keine Fehler sehen. Ich lade es neu. Und ich denke, dieser Pfeil könnte nur daran liegen , dass wir noch keine Routen festgelegt haben. Lass uns das als Nächstes machen. 63. Router - Einige Routes hinzufügen: Lassen Sie uns ein paar Routen für unsere App einrichten. Und unsere App wird eine Notizenansicht, unsere Seite und eine Statistikansicht haben . Lassen Sie uns zuerst eine Route für unsere Notizenansicht einrichten. Nun, zuallererst benötigen wir eine Komponente, die wir für diese Notizenansicht verwenden können. Gehen wir zurück zum Datei-Explorer und wir klicken mit der rechten Maustaste auf den Quellordner und erstellen einen neuen Ordner namens views. Dies muss nicht als Views bezeichnet werden. Du könntest es Seiten nennen, wenn du möchtest, aber ich nenne es Views. Und lassen Sie uns eine neue Komponente erstellen, und wir nennen diese Ansichtsnotizen. Zeigen Sie keine Vorlagentags an. Im Moment beginne ich einfach ein Div mit einer Notenklasse. Darin ist eine Menge H eins, der nur Notizen sagt und das speichert. Und wir können diese Komponente jetzt für unsere Notizen-Ansicht verwenden. Springen wir zu main.js und fügen eine Route für unsere Notizenansicht hinzu. Für jede Routen in unserer App müssen wir ein Objekt mit einigen Optionen hinzufügen. Zuallererst brauchen wir die Pfadoption. Dies wird bestimmen, welcher Weg uns zu dieser Route führen wird. Ich werde den Pfad zum Schrägstrich festlegen, folge der Notizenansicht, was nur bedeutet, dass dies die Root-Route unserer App sein wird , wenn wir den ersten Besuch abgeschlossen sind. Dies ist die Route, auf die Sie gehen werden. Wir müssen auch eine Name-Eigenschaft hinzufügen. Ich setze dies auf Hinweise zu dieser Namenseigenschaft, die es uns leichter machen , den Benutzer programmgesteuert an eine bestimmte Route zu senden . Und schließlich müssen wir die Komponenteneigenschaft hinzufügen , die wir gerade für die Komponente festgelegt haben, die wir für diese Route verwenden möchten. Zuallererst müssen wir unsere Komponente importieren. Wir importieren also Ansichtsnotizen aus Schrägstrich-Ansichten, Punktansicht für Schrägstriche. In früheren View-Builds, die Webpack verwendeten, mussten wir die Punktansicht nicht hier platzieren, aber wenn wir VT verwenden, was wir jetzt sind, da wir die Ansicht übernehmen müssen. Und auch das bei Symbol hier. Dies ist nur ein Alias, der sich auf diesen Quellordner bezieht. Und dieser Alias wird in dieser vt-Dot-Config-Dot-JS-Datei definiert . können wir hier sehen. Sie können auch Ihre eigene Aliaseinführung zu verschiedenen Ordnern hinzufügen , wenn Sie möchten. Aber wie auch immer, lasst uns zurück zu main.js springen und wir können jetzt die Komponente für diese Route einstellen. Wir legen dies fest, um Notizen zu sehen. Lasst uns das speichern und neu laden. Wir haben immer noch einen Fehler hier. Und ich habe gerade herausgefunden, was das Problem ist, wenn wir den Verlauf festlegen , um den Web-Hash-Verlauf zu erstellen . Dies muss ein Methodenaufruf sein. Wir müssen nur Klammern am Ende hinzufügen, speichern Sie, dass die App jetzt wieder funktioniert. , die wir gerade im Browser erstellt haben, können wir jedoch nicht sehen Diese Notizenansicht, die wir gerade im Browser erstellt haben, können wir jedoch nicht sehen. Und das liegt daran, dass wir unserer App eine Router-View-Komponente zu unserer Root-Komponente app.vue hinzufügen müssen unserer App eine Router-View-Komponente zu unserer . Und das machen wir in einer Minute. Aber bevor wir das tun, richten wir einfach eine Route für unsere Statistikseite ein. Springen wir also zurück zum Ordner „Ansichten“. Doppelte Ansichtsnotizen, Punktansicht. Wir nennen diese Ansicht Statistik-Punktansicht. Ich wechsle einfach den Unterricht am Tag von zwei Starts. Wir werden auch den Text in der Überschrift zwei Starts ändern. Spar dir das auf. Gehe zurück zu main.js. Und lasst uns nach dieser Route ein Komma hinzufügen und das duplizieren. Übrigens habe ich das getan, indem diese Texte ausgewählt und Alt Shift und Down gedrückt Die Verknüpfung könnte auf Ihrer Plattform unterschiedlich sein. Jetzt lasst uns dieses Komma hier loswerden. Legen Sie fast den Pfad fest, um Statistiken zu schrägen , so dass wir zu den Statistiken kommen, wenn wir zum Schrägstrich gehen . Es hat den Namen auch in Stopps geändert. Und jetzt müssen wir die Komponente so einstellen, dass sie die Punktansicht fragt, aber zuerst müssen wir sie importieren. Also dupliziere ich diese Ansichtsnotizzeile und wir importieren Ansichtsstatistiken aus der Schrägstrich-Ansicht der Schrägstrich-Ansicht, Statistik-Punktansicht und speichern diese. Jetzt müssen wir diese Komponente nur ändern um Statistiken anzuzeigen, sagen wir das, aber wir können immer noch nicht in der Notes-Ansicht auf der Seite sehen , wenn wir zum Pfadschrägstrich gehen und wir die Statistikansicht nicht sehen können , wenn wir zu gehen die Pfad-Schrägstrich-Statistiken. Und das liegt daran, dass wir unserer App eine Router-View-Komponente hinzufügen müssen . Lass uns das als Nächstes machen. 64. RouterView und Navigation hinzufügen: Lass mich zum Pfad-Schrägstrich gehen. Wir sehen keine Notizenkomponente mit dieser Überschrift mit den Textanmerkungen. Und das liegt daran, dass wir unserer App eine Router-View-Komponente hinzufügen müssen , ist die Router-View-Komponente, die bestimmt, wo unsere Routen angezeigt werden. Springen wir also zu unserer Wurzelkomponentenquelle app.vue. Und ich werde diesen Skriptbereich nur entfernen , alles in der Vorlage entfernen und das Style-Tag und alle Stile entfernen. Spar dir das auf. Und wir können jetzt auch alle Komponenten im Quellkomponentenordner löschen. Ich wähle hier alles aus, klicke mit der rechten Maustaste und lösche. Wir sehen einen Pfeil, aber wenn wir neu laden, verschwindet der Fehler. Um unsere Routen anzuzeigen, müssen wir nur eine Router-View-Komponente hinzufügen. Und wir können das in einem Dash-Fall wie dieser Router-Ansicht tun. Wir können es im Fall Pascal machen, was ich tun werde. Also Router-Ansicht, speichere das. Und wir können jetzt unsere Notizenroute auf der Seite sehen. Und wenn wir zu den Pfad-Slash-Statistiken gehen, können wir unsere Statistikansicht sehen. Jetzt macht es nicht viel Spaß, die Adressleiste zum Navigieren zu verwenden. Fügen wir unserer Seite einige Router-Link-Komponenten hinzu , damit wir über diese Router-View-Komponente navigieren können. Ich füge eine Router-Link-Komponente hinzu, ich lege die Textnotizen ein und dupliziere sie dann. In diesem setzen wir die Textstatistiken ein, um zu bestimmen, wohin diese Router-Links gehen werden. Wir können einfach eine Zwei-Requisite hinzufügen und es auf den Pfad setzen, den wir zu weit gehen möchten, die Notenansicht, wir können dies einfach auf Schrägstrich setzen. Und dann können wir für die Statistikansicht dies einfach auf Slash-Statistiken einstellen. Lasst uns das aufheben. Fügen wir einfach Platz nach dem ersten und einer Pipe und dann ein weiteres Leerzeichen hinzu. Sagen Sie, dass wir jetzt in unserer App navigieren können. 65. Router – -: Unser Router ist jetzt alles eingerichtet und arbeitet in. Aber bevor wir weitermachen, lassen Sie uns einfach unseren Code ein wenig aufräumen. Zunächst extrahiere ich einfach unseren gesamten Router-Setup-Code in eigene Datei im Quellordner. Ich erstelle einen neuen Ordner namens Router. Da drin. Ich erstelle eine neue Datei namens index.js. Lasst uns zurück zu main.js springen. Ich verwende eine Mehrfachauswahl indem ich die Alt-Taste gedrückt halte. Obwohl die Verknüpfung auf Ihrer Plattform unterschiedlich sein kann , wähle ich diesen gesamten Router aus, die beiden Eingaben für unsere Notizenansicht und die Statistikansicht zu übernehmen. Diese Zeile, in der wir den Create Router und großartige Web-Hash-Historien-Methoden von Vue Router importieren . Ich werde viel ausschneiden und das einfach ein bisschen aufräumen. Und dann springe zu index.js in unserem Router-Ordner, füge den ganzen Code und wir beginnen einfach eine Zeile nach unseren Eingaben. Und jetzt möchten wir diese Router-Instanz exportieren , um sie für andere Dateien verfügbar zu machen. Am Ende können wir den Standardrouter einfach exportieren und speichern. Und wenn wir jetzt zu main.js zurückkehren, können wir diese Router-Instanz importieren, indem wir Import-Router vom Slash-Router hinzufügen . Und wir müssen den Schrägstrich index.js nicht hinzufügen , wenn wir den Dateinamen index.js verwenden, es wird immer automatisch nach dieser Datei suchen. Also können wir einfach den Router vom Slash-Router importieren. Und jetzt, wenn wir den Router verwenden, verwenden wir die Router-Instanz aus der Datei index.js im Router-Ordner. Lasst uns das speichern und sehen, ob alles noch funktioniert. Es funktioniert alles immer noch. Eine weitere Sache ist, dass ich zu index.js springe und all diese Routen in ihre alte Konstante stecken werde. Also werde ich eine Konstante einrichten, die Routen genannt wird. Stellen Sie das auf ein Array ein. Dann koche ich diese beiden Objekte füge sie hier ein. Und jetzt können wir einfach diese Routen-Eigenschaft festlegen, zwei Routen. Oder da diese Namen beide gleich sind, können wir dies einfach nur auf Routen kürzen. Also lasst uns das speichern, stellen Sie sicher, dass es immer noch funktioniert. Trotzdem. Es funktioniert immer noch gut, jetzt haben wir es an die Datei main.js gebunden. Ich habe den gesamten Code, der mit unserem Router zusammenhängt, in eine eigene Datei verschoben . 66. Bulma und Design - Installiere Bulma [Modul 14]: Um uns dabei zu helfen, unseren Ausblick hübsch zu machen, verwenden wir die Bulmer CSS-Bibliothek. Ich springe zu Walmart.io. Jetzt ist das kein CSS-Kurs, daher werde ich mich bis März nicht auf Bulla und CSS konzentrieren. Wir verwenden es einfach, um unsere Aussichten hübsch zu gestalten , ohne viel Zeit damit verbringen zu müssen , CSS-Exzess zu schreiben. Und auf diese Weise können wir uns ausschließlich auf Vue.js drei und die Kompositions-API konzentrieren . Außerdem schlage ich nicht unbedingt vor, dass Sie Bulmer für Ihre Projekte verwenden sollten. Sie sollten eine fundierte Wahl treffen, die auf Ihren individuellen Projektanforderungen basiert . Ich glaube jedoch, dass Bomber derzeit das drittbeliebteste CSS-Framework nach Bootstrap, Tailwind CSS, ist. Ich habe mich jedoch für dieses Projekt für Bola entschieden, da es das einfachste CSS-Framework ist, mit dem man beginnen kann. Und es enthält alle Komponenten, die wir für dieses Projekt benötigen werden. Wenn ich zu Dokumentation und Komponenten springe, haben wir diese Kartenkomponente, die wir verwenden werden, diese Navbar-Komponente, die wir verwenden werden, die modale Komponente. Jetzt werden wir verwenden, hat eine Reihe von Farmkomponenten, die wir wie diese Eingabe verwenden werden. Und es hat auch eine nette Button-Komponente, die wir auch verwenden werden. Lassen Sie uns eine Kugel für unser Projekt installieren. Ich gehe zur Übersicht und fange dann an, nach unten zu scrollen. Und es gibt ein paar Möglichkeiten, es zu installieren. Wir können es über einen CDN-Link installieren , in dem es extern geladen wird. Wir können es von GitHub herunterladen. Wir können das npm-Paket installieren. So mache ich es. Also müssen wir npm install Puma ausführen. Also lasst uns das kopieren. Öffne unser Terminal, töte den Todesprozess und führe npm install bulla aus. Und das ist installiert. Und wenn wir zu unserem Node-Modul-Ordner springen, können wir sagen, dass Bulmer hier ist. Und wenn wir in den CSS-Ordner springen, können wir Bola-CSS-Dateien sagen. Ich werde die minimierte Version verwenden, Bohmer dot main.css. Was könnten wir auch die minimierte Version von Punkt CSS verwenden. Ich klicke mit der rechten Maustaste auf den Aufzählungspunkt main.css. Klicken Sie auf Pfad kopieren, den ich zu app.vue springen möchte. Ich füge ein Style-Tag hinzu, um diese CSS-Datei zu importieren. Ich füge bei Import hinzu. Dann füge ich diesen Pfad ein. Wir haben hier den vollständigen Pfad in meinem Computer. Wir brauchen hier nur den Pfad aus diesem Bowler-Ordner. Also entferne ich alles vor diesem Aufzählungsordner. Wir müssen am Ende ein Semikolon hinzufügen. Nehmen wir an, wir müssen unsere App neu starten. Lass uns npm laufen, dev ausführen. Gehe zurück zu unserer App. Wir können sehen, dass sich unsere Stile bereits ein wenig geändert haben, aber nur um sicherzustellen, dass Bulmer funktioniert, fügen wir jeder unserer Router-Link-Komponenten hier von button eine Klasse hinzu. Und das sollte diesem einen schönen Button-Style geben. Spar dir das auf. Wir können jetzt ein paar nette kleine Knöpfe sehen, und wir können jetzt Bohmer benutzen , um Kiara schön aussehen zu lassen. 67. Nav Bar – Design: Fügen wir unserer App eine schöne, schöne Navbar hinzu. Erstellen wir zunächst eine Komponente dafür, die in app.vue importiert wird. Und aus irgendeinem Grund ist mein Komponentenordner verschwunden. Aber Sie sollten hier einen Komponentenordner haben. Aber ich werde diese Komponenten erstellen. Darin. Ich erstelle einen Ordner mit dem Namen Layout. Mir gefällt die Art und Weise, wie VS-Code-Gruppen Ordner wie diese sind, standardmäßig nicht. Also werde ich es einfach reparieren. Ich gehe auf Code, Einstellungen und Einstellungen und suche nach kompakten. Wir könnten diese Option zum Kompilieren von Ordnern einfach aufheben. Und wir haben jetzt ein normales Ordnersystem hier. Innerhalb des Layoutordners. Ich erstelle eine Datei namens Navbar Dot View. Im Moment beginnen wir einfach mit Vorlagen-Tags. Füge einfach ein Div mit meiner Navbar hinzu, dem Text. Lasst uns nun zu app.vue springen und diese Komponentenskripte Up-Tags importieren . Ich füge hier einen Blockkommentar , der nur Importe sagt. Dann importieren wir Navbar aus Slash-Komponenten Schrägstrich-Layout-Schrägstrich genug Balkenpunktansicht. Ich verwende diese großen Kommentare, um meinen Code in Abschnitte aufzuteilen. Ich finde es einfach, dass es mir viel einfacher macht meinen Code zu durchsuchen. Nun, das ist völlig optional. Sie müssen diese Kommentare nicht hinzufügen , wenn Sie dies nicht möchten. Jetzt kleben wir diese Navbar-Komponente auf die Seite. Ich werde diese Strecken der Blickbeine vorerst loswerden und einfach unsere Navbar ausgeben. Lasst uns das aufheben. Und wir können meine Navbar auf der Seite sagen. Lasst uns nun zur Kahlheit springen und wir gehen zu Components. Navbar, scrollen Sie nach unten, strecken Sie das ein wenig aus, und wir werden dieses Beispiel hier für eine grundlegende Navigationsleiste kopieren und dann ändern wir es. Also kopiere ich diesen ganzen Code. Bewegen Sie das wieder, und dann springen wir zur Navbar-Punktansicht, fügen alles hier ein, rücken sie ein und speichern. Und wir können jetzt Navbar sehen. Ich zoome einfach ein bisschen raus. Ich möchte eine schöne grüne Farbe anstelle von Weiß haben. Und wir können dies tun, indem wir diesem NEF-Element eine Klasse hinzufügen , wann die Attribute mit der Erweiterung für geteilte HTML-Attribute aufgeteilt werden sollen mit der Erweiterung für geteilte HTML-Attribute aufgeteilt , die wir zuvor installiert haben. Eine Menge Klasse des Erfolgs, außer das. Wir haben jetzt ein nettes grünes Napa. Und wieder werde ich nicht alle diese Klassen aus Kugeln sehr erklären , weil ich mich so weit wie möglich auf die Ansicht und die Kompositions-API konzentrieren möchte . Alle diese verfügbaren Kurse finden Sie jedoch auf der Website. Für dieses Navbar Dropdown zeigen Ihnen beispielsweise zwei Farben, wie Sie all diese verschiedenen Farben hier hinzufügen können. 68. Nav Bar – Navigation und Logo: Passen wir diese Navbar an. Zuallererst möchte ich diesen Link „Mehr“ hier mit diesem Dropdown-Menü loswerden . Scrollen wir genug Bardot-Ansicht und sehen, ob wir das finden können. Wir können diesen Link hier sehen. Und wir können dieses Div mit einer Klasse von Navbar sehen. Lasst uns das Div zusammenbrechen, werden Sie es einfach los. Spar dir das und wir sehen, dass das verschwindet. Lasst uns diese beiden Links nun auf die rechte Seite verschieben . Also scrolle ich hier auf diesen beiden Navbar-Element-Links nach oben. Ich schneide sie ab und ich werde einfach diesen Navbar Dash Stop Dip los . Ich füge diese Links in dieses Navbar-End-Div ein, das sie auf der rechten Seite legt. Lasst uns diesen Sprung darin zusammenbrechen, nicht nach Gegenständen, und das loswerden. Ich füge einfach die Links ein, die wir vorher gekocht haben , und speichere das auf. Lassen Sie uns diese Links zwei Notizen anzeigen und unsere Mitarbeiteransicht. Ich entferne einfach die zweite Laborbar I2. In diesem ersten werde ich dies in eine Router-Link-Komponente ändern . Stellen Sie sicher, dass wir sowohl die öffnenden als auch die schließenden Tags ändern, die ich die Attribute aufteilen werde, und die schließenden Tags ändern, die ich die Attribute aufteilen werde, ändern Sie den Text in Notizen. Ich habe viel zu diesem Router-Link zu stützen, dem Pfad-Schrägstrich zu begnügen , wo unsere Notes Router sind. Und dann wähle ich diesen Router-Link aus und dupliziere ihn. Und wir werden die beiden Requisiten in die Pfadschrägstriche ändern, und wir ändern den Text auch in „ Start“ und speichern ihn. Wir haben jetzt Links zu unserer Notiz- und Stopp-Seite. Wir können diese Überschrift des Datings sehen. Paula hat eine Klasse, die aktiv ist, die wir nicht zu einem dieser Navbar-Elemente bringen können, um es aktiv erscheinen zu lassen. Sie können sehen, dass dieser Link jetzt aktiv aussieht. Diese Routenverknüpfungskomponenten können dem Link tatsächlich eine Klasse hinzufügen , wenn dieser Link der aktive Link ist. Wenn ich diese Klasse gerade erwischt habe, können wir einfach eine Requisite der aktiven Dash-Klasse hinzufügen und auf setzen. Diese Klasse ist Oktave, und ich kopiere sie auch und füge sie in den Statistik-Link ein. Sagen Sie, dass wir jetzt aktive Plätze auf unseren Links haben sollten. Und ja, das funktioniert. Ersetzen wir diese Bombe jetzt einfach ein Logo durch einen Titel für unsere App. Ich scrolle nach oben und in diesem Navbar Brand div haben wir diesen Angriff mit einer Klasse von Navbar Item. Ich werde das Bild entfernen, das sich darin befindet und diese H-Referenz entfernen. Ich möchte dieses Tag nicht in ein div ändern , weil ich nicht möchte, dass dies ein Link ist. Und dann füge ich einfach die Texte hinzu nope balls. Und speichern Sie sich das, um den Stil des Textes hier zu verbessern, werden wir diesem Tag von Größe vier eine Klasse hinzufügen, um ihn etwas größer zu machen. Und dann eine Klasse von Familien-Monospace, um ihm diese Schriftart im Monospace-Stil zu geben. Und wieder finden Sie all diese Klassen auf der Bolus-Seite, die sehr gut dokumentiert ist. 69. Nav Bar – Responsive Design und Menü: Jetzt wird sich der Inhalt dieser Navbar derzeit weiter ausdehnen, da der Browser immer breiter wird, was besonders auf wirklich großen Bildschirmen nicht allzu gut aussieht . Wir haben das Logo gleich hier drüben und dann diese Links hier drüben. Ich möchte, dass all dies nach einem bestimmten Punkt in der Mitte eingeschränkt wird. Und dafür können wir Containerelemente ohne Knochen verwenden. Also werde ich alles in der Navbar mit einem div umgeben , mit einer Containerklasse. Also habe ich einfach alles minimiert, was da drin ist. Eine Menge Div mit einer Containerklasse. Und um sicherzustellen, dass es einschränkt, sobald der Browser breiter als eine bestimmte Anzahl von Pixeln ist, können wir eine Klasse von Bindestrichen, Dash Desktop hinzufügen. Und diese Klassen sind alle auf dem Blickball dokumentiert. Und dann verschiebe ich einfach diese Navbar-Marke, dieses Navbar-Menü in dieses Div und speichere das. Und wir können jetzt größere Bildschirme sehen . Alles ist auf die Mitte der Seite beschränkt. Wenn unsere Ansicht nun unter 100 bis vier Pixel liegt, sehen wir, dass die Navigationslinks verschwinden und wir sehen dies, das alte Bettlersymbol, aber nichts passiert, wenn wir darauf klicken. Um das mobile Menü anzuzeigen und dieses Symbol in seinen aktiven Zustand zu versetzen, müssen wir sowohl dem Burger-Symbol als auch dem Navigationsmenü eine aktive Klasse hinzufügen . Jetzt ist dies alles auf der Navbar-Seite dokumentiert. Aber um dies zu demonstrieren, lassen Sie uns diese Klassen fest in codieren. Jetzt werde ich die Attribute auf diesem Tag mit einer Klasse von Navbar groß teilen . Ich füge eine Klasse von Aktiv hinzu und speichere diese. Und wir können sehen, wie sich das Symbol in ein X ändert. Und wenn wir zu diesem Navbar-Menü-div scrollen, teile ich auch die Attribute in diesem div auf dieselbe Klasse auf. Es rettet das. Und wir können jetzt sehen, dass das mobile Menü erscheint. Richten wir eine Href ein, um diese Klassen umzuschalten. Wenn wir auf das Burger-Menü klicken, entferne ich diese fest codierten Klassen vorerst aus dem Navbar-Menü div auf der Navbar Berger ein Tag, sage das, es sei denn, springe zu unserem Skriptbereich, was nicht der Fall ist existieren noch. Lassen Sie uns es also erstellen Skripte-Setup. Viel Blockkommentar , der „Mobile Navi“ sagt. Richten Sie fast eine Konstante namens Show Mobile Nav ein. Stellen Sie das auf eine href mit einem Anfangswert von false ein. Das ist falsch. Wir werden das mobile Nickerchen nicht zeigen, wenn es stimmt, wir werden es zeigen und wir müssen die Ref-Methode aus der Ansicht importieren. Also füge ich hier einfach einen kurzen Kommentar hinzu. Importe importieren Ref aus der Ansicht. Spar dir das auf. Nun fügen wir diese Klassen, die auf dieser href basieren, bedingt hinzu . Springen wir also zuerst zum Burger-Symbol, das hier mit einer Klasse von Navbar Dash Burger ist. Binden wir uns nun an das Klassenattribut indem wir geschweifte Klammern der Doppelpunktklasse und viele Klassen hinzufügen, As Bindestrich aktiv. Aber nur wenn Show Mobile Nav wahr ist. Und dann kopiere ich das und füge es auch zu diesem Div mit einer Klasse von Navbar-Dash-Menü hinzu. Und das hebe ich dir auf. Wenn wir nun zu unserer Referenz springen und den Wert auf true ändern , können wir jetzt das mobile Navi auf der aktiven Version des Burger-Symbols sehen . Lassen Sie uns das auf „false“ zurücksetzen. Schaltet den Wert dieser href um. Wenn wir auf das Burger-Menü klicken, springt man zum Navbar-Burger-Tag und fügt einen Klick-Handler hinzu. Und wenn wir darauf klicken, stellen wir Show Mobile Nav auf das Gegenteil von Show Mobile Nav ein. Wenn es falsch ist, setzen wir es auf „true“. Und wenn es stimmt, setzen wir es auf false, weil dies ein Tag ist , das versuchen wird, irgendwohin zu gehen , wenn wir darauf klicken. Um dies zu verhindern, füge ich nur einen Modifikator von Punkt verhindern hinzu. Dies verhindert, dass das Standardverhalten des Elements, auf das wir klicken , das Standardverhalten eines Tags darin besteht, zu einer anderen Seite zu wechseln. Lasst uns das speichern und sehen, ob das funktioniert. Klicken Sie auf den Button und wir sehen, dass das Mobilfunkgerät erscheint. Klicken Sie erneut darauf und wir sehen, dass es verschwindet. Jetzt gefällt mir nicht, dass unser mobiles Menü unseren Seiteninhalt nach unten schiebt. Sehen Sie, wie es diese Überschrift jetzt vorantreibt, es wäre mir lieber, dass sie einfach absolut über unserer Seite positioniert wurde . Lassen Sie uns einfach ein bisschen Stil hinzufügen, um dies zu erreichen. Scrollen wir zum Ende des Style-Tags. Viele Medienabfragen hier für mobile Medien, maximale Breite 1023 Pixel, denn dann treten die Mobilfunkstile ein, wenn wir den Browser verkleinern. Jetzt wollen wir auf genug unteres Menü zielen, nämlich dieses Div mit einer Klasse von Navbar-Menü. Also füge ich einfach Strich, Strichmenü, Setup hinzu, um absolut zu positionieren, und setze die linke auf 0 und setze die Breite auf 100%. Speichern Sie diesen Klick auf den Button. Das mobile Menü befindet sich jetzt über unseren Content, anstatt es nach unten zu schieben. 70. Seiten (Design): Bevor wir mit der Arbeit an der Gestaltung unserer Notizseite beginnen, die Hauptseite in unserer App. Zuallererst möchte ich nur den Inhalt aller unserer Seiten einschränken . Ich füge auch ein wenig Polsterung hinzu da wir jetzt sehen können der Inhalt unserer Seiten direkt in der Ecke befindet , ohne aufzufüllen. Und auch eine Konstante ist immer direkt nach links. Unabhängig davon, wie breit der Browser ist , der nicht zu hübsch aussieht. Ich werde nur dieselben Klassen verwenden , die wir verwenden, um den Inhalt in unserem Napa-Container einzuschränken den Inhalt in unserem Napa-Container und ist Macs Desktop-Klassen. Und um das zu tun, springe ich zu unserer App.Vue. Umgeben Sie einfach unsere Router-Ansicht in einem Div mit diesen Klassen. Der Container ist also maximaler Desktop. Bewegen Sie einfach die Router-Ansicht hinein und speichern Sie sie. Wir können sagen, dass unsere Inhalte jetzt eingeschränkt sind. Bona hat einige Polsterklassen, mit denen wir auch ein wenig Polsterung auf unseren Seiten hinzufügen können . Und diese sind alle auf dem Ball dokumentiert müssen viele Klassen von Px Dash T2 zitieren , um etwas horizontale Polsterung hinzuzufügen , und dann eine Gruppe von P, Strich vier, um eine vertikale Polsterung hinzuzufügen. Das sieht jetzt auf kleineren Bildschirmen gut aus, aber auf breiteren Bildschirmen unser Logo nicht mit unseren Inhalten zusammen. Ich denke, es würde besser aussehen, wenn das aufgestellt würde. Fügen wir also auch etwas Polsterung zu unserer Navbar hinzu. Ich mache einfach Navbar Dot View und dann dieses Container-Div, das wir hinzugefügt haben. Und eine Menge klassischer PX. Das sieht ziemlich gut aus. Lassen Sie uns nun allen unseren Seiten eine subtile Hintergrundfarbe geben unseren Seiten eine subtile Hintergrundfarbe , die der Farbe unserer Navbar entspricht. Also gehe ich zum Datei-Explorer und öffne index.html. Ich füge unserem HTML-Element eine Klasse hinzu. Bomber hat Farbklassen, die wir verwenden können, und sie sind alle auf der palmaren Seite dokumentiert. Nun, ich werde die Klasse benutzen, hat Hintergrund, Strich, Erfolg, Dash Light. Spar dir das auf. Wir haben jetzt diese schöne soziale grüne Farbe im Hintergrund aller unserer Seiten. 71. Anmerkungen (Design): Erstellen wir nun das Design für unsere Notizen mit der Boluskartenkomponente. Ich gehe zur Kühnheitsseite und gehe zu Components und schneide unseren Vollbildmodus eine Sekunde. Ich möchte dieses Beispiel hier nicht nach unten scrollen, das diese Schaltflächen unten hat, die wir verwenden können um die Möglichkeit hinzuzufügen eine Notiz zu bearbeiten und zu löschen. Ich kopiere dieses Beispiel hier, indem ich auf Kopieren klicke. Und dann springe ich zurück zu Notizbällen. Wir werden dies zu unserer Notizenansicht hinzufügen. Also gehen wir zu Quellansichten und Anzeigen von Notizen werden nicht angezeigt. Und ich füge das in dieses Div über die Spitze dieses Div ein. Ein bisschen eingerückt und speichern Sie das. Und ich werde diesen Header ganz oben los. Das ist also dieses Header-Element hier. Also werden wir das los, speichern das und ich aktiviere standardmäßig den Zeilenumbruch. Also gehe ich zu Code, Einstellungen und Einstellungen, suche nach Zeilenumbruch und setze diesen standardmäßig auf ein, das ist besser. Jetzt werde ich alles in diesem Div mit der Inhaltsklasse los . Also werd das los. Spuckt etwas Lorem aus, indem du einfach Lorem eintippst und dann Enter drückst. Sie sollten diese Abkürzung von Emmet sehen. Spar dir das auf. Ich werde diesen Speicher-Button einfach los, da wir nur eine Bearbeitung der Löschschaltfläche benötigen. Speichern Sie das und sehen wir uns einfach an, wie das mit mehreren Schnitten aussehen wird . Ein schneller Trick, dies zu tun, besteht darin, einfach eine v4 zum Eltern-Div hinzuzufügen. Also vorher können wir es einfach tun, ich spucke einfach drei davon aus. Und Sie können sehen, dass wir zwischen jeder Notiz ein wenig Platz brauchen . Also eine Menge Klasse zu diesem Div mit einer Klasse von M, Beta-Marge, unterem Dashboard. Spar dir das auf. Die sehen ziemlich gut aus. Stellen wir einfach sicher, dass sie auf einem großen Bildschirm oder auf einem kleinen Bildschirm gut aussehen ? Ja. Ziemlich gut. 72. Note (Design) hinzufügen: Fangen wir an, an den Anfang unserer Notizenansicht zu fallen, mit einem Textbereich auf einer Schaltfläche , mit der wir eine neue Notiz hinzufügen können. Also zurück zum Standort der Kugelmühle und wir werden zu Form und General gehen. Ich scrolle nach unten, um die landwirtschaftliche Probe abzuschließen, zeige den Code an. Alles, was ich hier schnappen werde, ist von diesem Textbereich bis zu diesen Schaltflächen. Scrollen wir also den Code nach unten, der einen Textbereich hat. Und wir wollen dieses Div mit einer Klasse von Feldern , die es umgeben. Also wähle ich von dort bis zu dieser Tiefe hier unten mit den beiden Tasten darin aus. Kopiere das. Fügen Sie dies über unsere Notizen ein. Es ist immer noch in diesem Div mit einer Klasse von Noten. Ich füge das hier ein, habe ein bisschen eingerückt und speichere das. Jetzt entferne ich dieses Label hier mit der SMS, die hier ist. Also werd das los. Und ich werde dieses Kontrollkästchen hier zu diesem Div mit einer Feldklasse loswerden . Also werden wir das los, werden diese beiden Optionsfelder loswerden , das ist dieses div hier. Spar dir das auf. Jetzt umgib ich den Textbereich und die Schaltflächen in einer Kartenkomponente mit einer Hintergrundfarbe. Also bleib ich fest, das wird sich paaren. Also viel div mit einer Klasse von Karten, um ihm eine Hintergrundfarbe zu geben, fügen wir eine Klasse von hat Hintergrunderfolg Doc hinzu. Ich wähle diese beiden Divs mit einer Feldklasse aus, schneide diese aus, füge sie in dieses Div ein, speichere das, wir müssen hier ein bisschen Polsterung hinzufügen. Also fügen wir eine Klasse von P Dash Four hinzu, geben ihm ein bisschen Polsterung und wir brauchen unten ein bisschen Spielraum . Also viele Klassen, MBA, Margin-bottom, Dash f5, speichern das. Jetzt entferne ich diesen Abbrechen-Button. Also entferne ich dieses Div mit einer Steuerklasse, in der die Abbrechen-Button darin enthalten ist. Spar dir das auf. Ich möchte diesen Knopf nicht auf die rechte Seite ziehen . Sie können dies tun, indem Sie bis zum heutigen Tag der Feldklasse eine Klasse von is Dash , Dash hinzufügen. Spar dir das auf. Und ich möchte die Farbe und den Text dieser Schaltfläche ändern. Ich werde es einfach in mehrere Zeilen aufteilen und den darin enthaltenen Text in neue Notizen umwandeln . Sagen Sie, dass wir die Hintergrundfarbe ändern werden , indem wir eine Klasse von Hausstrich, Hintergrund, Strich und Erfolg hinzufügen und das speichern. Lassen Sie uns abschließend den Platzhalter in diesem Textbereich ändern. Und tatsächlich werde ich dies in ein selbstschließendes Tag wie dieses umwandeln . Teilen Sie die Attribute auf und wir setzen den Platzhalter auf eine neue Notiz, speichern Sie, dass dies auf dem Desktop ziemlich gut aussieht. Sieht auch auf dem Handy ziemlich gut aus. 73. Noten Array (Ref) [Modul 15]: Okay, also sieht unsere Notizseite ziemlich schön aus. Lassen Sie uns dies nun zum Laufen bringen, indem wir einige Daten und Methoden hinzufügen. Wir werden diese Notiz auch in eine untergeordnete Komponente umwandeln. Wir fügen eine berechnete Eigenschaft hinzu, um die Anzahl der Zeichen in jeder Notiz anzuzeigen. Und wir werden auch ein benutzerdefiniertes Ereignis mit emit einrichten. Nun, lasst uns zunächst eine href einrichten , in der wir eine Liste von Notizen in der Ansicht speichern können , Notenpunktansicht. Ich scrolle nach unten und füge unsere Skript-Setup-Tags hinzu. Ich werde hier einen Blockkommentar erstellen , der Notizen enthält, eine Konstante namens Noten aufstellt diese gleich einer href setzt. Wir müssen diese Ref-Methode importieren. Also viele andere Blockkommentare hier, die Importe besagen. Und wieder sind diese Kommentare optional. Sie müssen sie nicht hinzufügen, wenn Sie es nicht möchten. Wir müssen Ref aus Sicht importieren. Lassen Sie uns nun unser Notes Array einrichten. Also werden wir ein Array in diese href übergeben. Jedes Element im Array ist das zulässige ID-Feld eines Objekts. Wir legen das einfach fest, um eine Menge Konzeptfeld für den Notizeninhalt hinzuzufügen . Ich stecke einfach ein bisschen Lorem da rein. Aus irgendeinem Grund funktioniert M gerade nicht. Ich kopiere diesen Lorem einfach aus einer hart codierten Notiz. Füge das da rein ein. Eine Menge Komma nach diesem Objekt. Dupliziere die Notizen, entferne dieses Komma setze die ID auf id2. Ich ändere einfach den Text dazu. Dies ist eine kürzere Note. Das sparen wir uns. Lassen Sie uns diese Hinweise nun mit einer V4-Direktive auf unserer Seite anzeigen . Wir haben bereits eine V4-Direktive dieses Div mit der Kartenklasse , die wir für unsere Notizen verwenden. Also ändere ich das einfach als Notiz in Notizen. Wir verwenden also Notizen als Platzhalter, während wir diese Notizen durchlaufen oder schreiben. Um sich hier einzurichten. Wir müssen auch eine Schlüsseleigenschaft hinzufügen. Stellen Sie dies fast fest, um zu bemerken, dass dieses K immer einzigartig ist. Das hebe ich dir auf. Und wir können jetzt zwei Hinweise auf unserer Seite sehen. Und wir müssen nur unsere Inhalte ausgeben, bei denen es sich um Notizen-Punkt-Inhalte handelt. Ich wähle diesen Text hier in dieser Tabelle aus, die Inhaltsklasse oder doppelte geschweifte Klammern. Und dann notieren Sie den Punktinhalt. Spar dir das auf. Erneut laden. Wir können jetzt A2-Notizen auf der Seite sagen, die jetzt aus unserem Notes Array stammen. 74. Note hinzufügen: Lassen Sie uns eine Anzeigennotizmethode einrichten, die ausgelöst wird, nachdem wir etwas in diesen Textbereich eingegeben haben, und klicken Sie auf die Schaltfläche, die diese neue Notiz dann unserem Notizen-Array hinzufügt, dem sie auf der Seite angezeigt wird. Lassen Sie uns zunächst eine href einrichten, die wir an diesen Textbereich binden können, damit wir tatsächlich auf den Inhalt zugreifen können , den der Benutzer eingegeben hat. Über unserem Note-Array richte ich eine neue Spalte namens New Note ein. Stellen Sie das auf eine href mit dem Standardwert einer leeren Zeichenfolge ein. Lasst uns diese Konstante in unserem Textbereich finden. Also scrollen wir nach oben zum Textbereich, der sich hier befindet. Out of V-Modellrichtlinie. Setze das auf neue Notiz. Spar dir das auf. Wenn wir nun etwas in diesen href-Wert eingeben , klicken Sie auf Speichern. Wir können es jetzt im Textbereich sehen. Lassen Sie uns das auf eine leere Zeichenfolge zurücksetzen und speichern diese. Lassen Sie uns nun eine Methode einrichten, die ausgelöst wird. Wenn wir auf diesen Button klicken, springe ich zum Button Neue Notiz hinzufügen, die hier ist. Ich teile die Attribute auf dem Eröffnungstag auf. Fügen Sie einen Klick-Handler hinzu. Click wird eine Methode namens „Notizen hinzufügen“ ausgelöst. Und jetzt müssen wir diese Methode erstellen. Also scrollen wir nach unten, nachdem unser Notes Array eingerichtet hat, diese Methode const Note entspricht einer Pfeilfunktion. Im Moment melde ich mich einfach aus und speichere das auf. Öffne die Konsole. Klicken Sie auf diesen Button. Wir können sagen, dass diese Methode ausgelöst wird, weil wir sehen können, dass dieses Protokoll ausgelöst wird. Jetzt möchten wir nicht, dass der Benutzer auf diese Schaltfläche klicken kann , wenn der Textbereich leer ist, da plötzlich nur ein leerer Knoten hinzugefügt wird. Deaktivieren wir diese Schaltfläche , wenn sich in diesem Textbereich nichts befindet. Springen wir zu diesem Knopf, der hier ist. Wir können einfach an das deaktivierte Attribut binden und dieses deaktivierte Attribut bedingt nach unten hinzufügen. Wir möchten dieses Attribut nur hinzufügen. Diese neue Notiz, href, ist eine leere Zeichenfolge. Um das zu tun, können wir einfach keine neue Notiz machen. Denn wenn diese Zeichenfolge leer ist, wird sie als Wert 0 oder falsy Wert gezählt. Also lasst uns das aufheben. Wir können jetzt sehen, dass dieser Button deaktiviert ist. Wir können es nicht anklicken. Und wenn wir etwas anfassen, können wir es jetzt anklicken. Lasst uns nun an unserer Notes-Methode arbeiten. Zuallererst benötigen wir ein Objekt mit einer ID und einer Inhaltseigenschaft mit den Konzepteigenschaften , die auf den Inhalt im Textbereich festgelegt sind. Und dann schieben Sie das Objekt darauf, dass diese Noten richtig sind. Wir sollten dann die Hinweise auf der Seite sehen. Lassen Sie uns zuerst dieses Objekt einrichten. Ich erstelle eine Variable namens Note. Stellen Sie das auf ein Objekt ein. Und wir brauchen eine ID-Eigenschaft. Die Concept-Eigenschaft. Jetzt können wir die Concept-Eigenschaft einfach aus dieser neuen Notiz href abrufen , die an den Textbereich gebunden ist. Wir können diese Content-Eigenschaft einfach zwei festlegen. Neuer Note-Punktwert. Für die ID brauchen wir etwas Einzigartiges. Wenn Sie möchten, können Sie ein Paket zum Generieren einer eindeutigen ID verwenden . Uuid. Ich werde einfach nur UUID npm googeln. Normalerweise verwende ich diese UUID-Version für Paket. Du kannst das benutzen, wenn du willst. Aber nur der Einfachheit halber verwende ich den Zeitstempel in Millisekunden ab dem aktuellen Datum, um diese ID über diesem Objekt zu generieren Ich werde zuerst den aktuellen Zeitstempel abrufen, also können wir einfach neu machen Datum Klammern. Und dies wird das aktuelle Datum als Datumsobjekt erfassen. Und um das in Millisekunden in einen Zeitstempel zu konvertieren , können wir einfach Punkt hinzufügen, Zeit und Klammern bekommen. Und jetzt weise ich dies einer Variablen zu. Also können wir es einfach tun, Lass uns das aktuelle Datum gleich sein. Jetzt wird dies tatsächlich eine ganze Zahl zurückgeben. Ich werde es in eine Zeichenfolge konvertieren , weil wir hier Strings verwenden. Ich richte eine andere Variable namens ID ein. Stellen Sie das fast auf das aktuelle Datum ein. Punkt zwei String, um diese Zahl in eine Zeichenfolge umzuwandeln. Wenn wir ihn ein bisschen angeschossen haben wollen, können wir das Wort ein Gedankengesetz ein wenig loswerden. Ich bin einfach kein Komma. Nach der ersten Variable. Wir können diese ID-Eigenschaft jetzt einfach auf diese ID-Variable setzen , die wir hier so einrichten , als Kurzschrift, da diese Namen beide gleich sind Wir können dies einfach so auf ID setzen. Loggen wir uns jetzt einfach diese Notiz aus und stellen sicher, dass dies funktioniert. Konsole. Dot-Log-Notizen. Spar dir das auf. Fügen wir hier etwas Text hinzu. Klicken Sie auf den Button. Wir können sehen, dass dieses Objekt ausgesperrt wird. Ja, wir können die Content-Eigenschaft sehen und wir können auch die ID sehen, die generiert wurde. Basierend auf dem Zeitstempel des aktuellen Datums. Jetzt müssen wir nur noch dieses Objekt zur Notiz drücken. Also genau hier sollten wir die neue Notiz auf der Seite sehen. Um Zugriff auf diese Notizen zu erhalten, href, können wir einfach den Punktwert nicht tun. Wir können einfach den Stoppwert notieren. Um dieses Objekt dann in das Array zu schieben, können wir einfach einen Punktstoß machen. Dann notieren Sie sich. Lasst uns das speichern und sehen, ob das funktioniert. Ich tippe eine neue Notiz ein. Klicken Sie auf die Schaltfläche. Dennoch können wir die Notiz sehen, die der Seite hinzugefügt wurde. Eigentlich ist es sinnvoll , dass unsere neueste Notiz ganz oben auf der Liste steht. Anstatt es zu drücken, wird es aufgehoben, was es im Grunde nur am Anfang der Rechte hält , dass ich am Ende des Arrays einfach das Wort Push on ändern werde , Kleinbuchstaben bei der Verschiebung. Spar dir das auf. Und lasst uns das nochmal versuchen. Ja, das funktioniert jetzt. Es fügt es nach oben hinzu. Nachdem wir die Notizen hinzugefügt haben, können wir sehen, dass der Textbereich immer noch denselben Inhalt enthält , den wir gerade hinzugefügt haben. Als Hinweis: Lassen Sie uns diesen Textbereich löschen, nachdem wir den neuen Knoten hinzugefügt haben , indem Sie einfach diese neue Notiz href, die an den Textbereich gebunden ist, wieder an eine leere Zeichenfolge setzen . Also können wir einfach eine neue Notiz machen, Wert ist gleich leerer String. Mal sehen, ob das funktioniert. Klicken Sie auf den Button. Wir können sehen, dass der Textbereich geleert wird. Wir könnten auch eine Vorlage verwenden, um diesen Textbereich neu zu fokussieren nachdem wir auch die neue Notiz hinzugefügt haben. Damit der Benutzer einfach sofort eine weitere Notiz hinzufügen kann , ohne in diesen Textbereich klicken zu müssen. Springen wir hier zu den Textbereichselementen . Eine Menge Ref. Ich setze das auf eine neue Notiz ref. Wir können diese href jetzt verwenden, um diesen Textbereich zu fokussieren , nachdem wir die neue Notiz hinzugefügt haben. Gehen wir also zurück zu unserer Add-Note-Methode. Unten hier können wir einfach einen neuen Notiz, Punktwert machen, um das eigentliche Textbereichselement zu erfassen. Und dann können wir einfach einen Punktfokus machen. Dies sollte hoffentlich den Textbereich fokussieren , nachdem wir die neue Notiz hinzugefügt haben. Lasst uns das speichern und neu laden. Stellen Sie sicher, dass das funktioniert. Hallo. Fügen Sie neue Notizen hinzu. Das hat nicht funktioniert. Neue Notiz ref ist nicht definiert. Scrollen wir einfach nach oben und überprüfen Sie die Href, die wir hinzugefügt haben. Weißt du, Href. Wir müssen tatsächlich Daten einrichten , bevor wir diese Vorlage verwenden können ref. Nach dieser neuen Notenkonst fügen wir eine weitere Spalte hinzu, die in die neue Notiz gesetzt ist, HREF, setzen Sie diese gleich f mit einem Anfangswert von null. Spar dir das auf. Und lasst uns nochmal nachladen. Hallo da. Klicken Sie auf den Button. Das scheint funktioniert zu haben. Jetzt haben wir die neuen Notizen hinzugefügt. Wir haben den Textbereich gelöscht und konzentrieren den Textbereich. 75. Child – Note: Diese View Notes Komponente wird ziemlich lang. Jetzt werden wir jeder einzelnen Notiz weitere Funktionen hinzufügen , z. B. die Anzahl der Zeichen anzeigen, ein Modal anzeigen, wenn die Löschschaltfläche geklickt wird und das Senden des Benutzer auf die Bearbeitungsseite , wenn auf die Schaltfläche Bearbeiten geklickt wird. Bevor diese View Notes Komponente zu unordentlich wird, erstellen wir eine untergeordnete Komponente für eine einzelne Notiz. Ich gehe zum Explorer und gehe zu Quellkomponenten. Lassen Sie uns hier einen neuen Ordner für alle Komponenten erstellen , die sich auf unsere Notizen beziehen. Wir nennen das Notizen. Darin erstelle ich eine neue Datei, die als Punktansicht-Vorlagen-Tags bezeichnet wird . Und ich springe zurück, um die Punktansicht der Noten anzuzeigen. Wählen Sie fast das gesamte Div mit einer Kartenklasse aus , die unsere Notiz anzeigt. Kopiere das einfach. Fügen Sie es in die Vorlagen-Tags ein. Repariere die Einrückung. Ich entferne einfach die V4 und die wichtigsten Attribute. Spar dir das auf. Gehen wir nun zurück zur Punktansicht der Notizen und importieren diese Komponente. In unserem Eingabebereich importieren wir Notizen aus Schrägstrich-Komponenten, Schrägstrichen , Schrägstrichen, Punkt-Vue. Spar dir das auf. Scrollen wir nun mit der Kartenklasse zu diesem div, wo wir die obige Notiz anzeigen , dass wir stattdessen unsere Notizkomponente verwenden werden. Beachten Sie also, wenn wir dies zu einem selbstschließenden Tag machen können, verschieben Sie das schließende Tag in eine neue Zeile. Jetzt können wir einfach die VFR-Direktive und die Eigenschaft kopieren in diese Notizkomponente einfügen. Jetzt können wir dieses Div einfach mit einer Kartenklasse komplett loswerden . Speichern Sie das Nachladen. Wir sehen hier einen Fehler, Eigenschaften von nicht definierten Leseinhalten in unserer App nicht lesen kann, ist kaputt. Und das liegt daran, dass wir in der Notenpunktansicht in unserer Vorlage versuchen, von den Objekten aus auf diese Notizobjekte und diese Konzepteigenschaft zuzugreifen . Nun, dieses Knotenobjekt existiert nicht im Kontext dieser Notenpunktansicht-Komponenten. Wir müssen dies aus der Punktansicht der Ansichtsnotizen weitergeben, um die Punktansicht mit einer Requisite zu notieren. 76. Props (Hinweis): Lassen Sie uns die Note-Objekte, die wir als Platzhalter in unserer V4-Schleife verwenden, hier weitergeben die wir als Platzhalter in unserer V4-Schleife verwenden . Notizen von unten sehen Sie nicht zur Notenpunktansicht. Dieser Notenpunkt Vue hat also Zugriff auf Notenpunktinhalt. Sieh hier keine Notizkomponente. Eine Menge Requisite nannte Noten und setze diese auf Notiz beim Speichern. Wenn wir nun zur Notenpunktansicht springen, müssen wir diese Requisite erhalten. Wir müssen Skripte, Setup-Tags, viele Blockkommentare hinzufügen , in denen Requisiten steht. Weißt du noch, wie wir unsere Requisiten initialisieren? Das stimmt. Wir erstellen eine Konstante namens Requisiten. Wir legen das gleich fest, um Requisiten zu definieren. Wir können unsere Aufforderungen hier übergeben, entweder ein Array oder ein Objekt. Ich benutze ein Objekt dafür. Wir erhalten eine Requisite namens Notiz. Die Tight wird ein Objekt sein. Wir brauchen diese Requisite auf jeden Fall damit unsere Komponente korrekt gerendert werden kann. Wir sollten auch erforderlich hinzufügen , um dies zu einer erforderlichen Requisite zu machen. Spar dir das auf. Und hoffentlich sollte das funktionieren. Jetzt lade ich noch neu alles ist Arbeit. Und wieder können wir hier sehen, dass unser korrekter Noteninhalt aus dem Array der übergeordneten Komponente stammt. wir einfach sicher, dass wir noch eine neue Notiz hinzufügen können. Wir können immer noch eine neue Notiz hinzufügen. 77. Berechnete (Note: Fügen wir eine berechnete Eigenschaft , die die Anzahl der Zeichen anzeigt , die sich in jeder Notiz unter dem Inhalt der Notiz befinden. Lassen Sie uns zuerst das Modell einrichten. Also Endnotenpunktansicht unter der wir den Inhalt ausspucken, füge ich ein div hinzu. Und dann fügen wir ein kleines Tag hinzu. Im Moment lege ich einfach die Texte XXX Zeichen ein. Spar dir das auf. können wir auf der Seite sehen. Um diesen Text nach rechts zu verschieben, füge ich eine Klasse zum div von Dash hinzu. Strichrechte, um dem Text eine hellgraue Farbe zu geben, füge ich eine Textklasse hinzu, strichgraue Dash-Lichter, speichern Sie das. Zumindest die Klassen stammen von bola auf der auf dieser Website dokumentierten. Und nur um oben ein bisschen Marge hinzuzufügen, viele Klassen leer für Margin Top Dash, um das zu speichern, jetzt brauchen wir keine berechnete Eigenschaft, um die Anzahl der Zeichen anzuzeigen. Wir könnten einfach doppelte geschweifte Klammern und dann Noten, Punktinhalt, Punktlänge machen . Spar dir das auf. Wir können sehen, dass das funktioniert. Ich möchte jedoch irgendwo in unserer App eine berechnete Eigenschaft verwenden , nur um uns daran zu erinnern, wie wir diese einrichten Lassen Sie uns die Punktlänge des Notenpunktinhalts entfernen. Stattdessen erstellen wir eine berechnete Eigenschaft namens „Zeichenlänge“, die hier die Anzahl der Zeichen der Notiz anzeigt. Scrollen wir nach unten und richten diese berechnete Eigenschaft ein, die als Charakter wie bezeichnet wird. Weißt du noch, wie das geht? Wenn Sie möchten, können Sie das Video anhalten und sehen, ob Sie das selbst haben können. Hast du es geschafft? Wenn nicht, mach dir keine Sorgen. Um also eine berechnete Eigenschaft hinzuzufügen, müssen wir zunächst die berechnete Methode aus der Ansicht importieren. Also viele Eingaben, Kommentar, ich werde berechnet aus der Ansicht importieren. Und ich springe auf den Grund. Ich kenne den Blockkommentar nicht, der besagt, dass die Zeichenlänge hier eine berechnete Eigenschaft einrichtet. Wir möchten diese Zeichenlänge nennen, wird eine Konstante namens Zeichenlänge erzeugen. Wir setzen das auf die berechnete Methode und übergeben dann eine andere Methode in diese Methode. Jetzt müssen wir hier nur noch etwas zurückgeben. Wir möchten die Länge der Concept -Eigenschaft zurückgeben, die sich in dieser Notizstütze befindet , die wir aus der Punktansicht der View Notes weitergeben. Denken Sie daran, als wir im Skriptbereich waren, um auf eine Requisite zuzugreifen, müssen wir diese Requisiten verwenden. Objekt. Um auf diese Notiz Requisite zuzugreifen. Wir können einfach Aufforderungen machen Punktnote. Um dann auf die Concept-Eigenschaft zuzugreifen, können wir einfach Punktinhalt erstellen. Wir wollen die Länge davon beschneiden. Wir wollen das zurückgeben. So können wir einfach die Rendite zur Aktie hinzufügen. Spar dir das auf, lade neu. Das scheint zu funktionieren. Eine Sache, die Sie jedoch bemerken ist, wenn wir eine Notiz erstellen, aber nur ein Zeichen haben, dann steht immer noch ein Zeichen. Es wäre besser, wenn es ein Zeichen sagen würde. Wir können unsere berechnete Eigenschaft anpassen , um dieses Wort ebenfalls auszuspucken. Basierend auf der Anzahl der Zeichen. Ich gehe zu unserem berechneten Eigentum. Bevor ich das mache, lass mich zu unserer Vorlage springen. Entferne das Wort Zeichen hier und wir sehen jetzt nur noch die Zahl. Scrollen wir zurück zu unserer berechneten Eigenschaft, bevor wir den Wert zurückgeben Ich werde eine Variable namens description einrichten. Und wir setzen dies je nach Länge der Notiz auf Zeichen oder Zeichen ein. Und wir können dazu eine ternäre if-Anweisung verwenden. So können wir die Beschreibung gleich machen, wenn Requisiten Punkt, Punktinhalt Punktlänge größer als eins ist, dann können wir das Wort Zeichen verwenden. Andernfalls verwenden wir das Wort Zeichen. Jetzt können wir einfach diese Beschreibungsvariable abhängen, entweder Zeichen oder Zeichen, die Länge, die wir hier ausgeben. Also gebe ich hier eine Vorlagenzeichenfolge zurück. Platzieren Sie diese props.net.content Punktlänge, Dollar, geschweifte Klammern wie diese, viel Platz und lassen Sie dann unsere Beschreibung zu. Also Dollar geschweifte Klammern und dann Beschreibung. Spar dir das auf. Das funktioniert nicht. Wir können 199 Zeichen sehen. Ein Zeichen, die Note, die nur ein Zeichen hat. Was nun ein bisschen Code dupliziert, fordert ein Punkt, Punktinhalt Punktlänge an. Wir könnten das ein wenig aufräumen, indem wir es in eine Variable setzen. Also oben hier erlaubt, Nennen wir es, Nennen wir es Länge gleich Stoppnoten Punktinhalt, Punktlänge. Und dann ersetze ich die Punktlänge von props.net.content, sowohl hier als auch hier. Ich drücke Command D, um beide auszuwählen. Die Verknüpfung kann auf Ihrer Plattform unterschiedlich sein. Ersetzen Sie das einfach durch diese variable Länge. Speichern Sie das, stellen Sie sicher, dass es noch funktioniert. Wir sehen Charaktere. Wenn es mehr als ein Zeichen gibt, dann ist es nur ein Zeichen. 78. Bitte Hinweis löschen (Emit): Lassen Sie uns zulassen, dass eine Notiz gelöscht wird, wenn auf die Schaltfläche „ Löschen“ geklickt wird. diese Notiz nun in einer untergeordneten Komponente befindet, muss der Notenpunkt Vue ein Ereignis aus der Notenpunktansicht emittieren. Wenn auf die Schaltfläche geklickt wird. Hören Sie dann auf dieses Ereignis in der Ansicht Notes Punktansicht und lösen Sie hier eine andere Methode aus, die dann die Notiz aus dem Noten-Array entfernt. Da unsere Notes Arrays in diesem Komponentenpaar sind oder nicht in dieser untergeordneten Komponente. Lassen Sie uns also zuerst eine Endnotenpunktansicht der lokalen Methode auslösen . Wenn auf diese Löschschaltfläche geklickt wird, suchen wir die Löschschaltfläche in der Vorlage, und das ist hier. Ich teile die Attribute dieses Klickhandlers darauf auf. Ich verwende auch den Modifikator „ Verhindern“, um zu verhindern dass sich dieser Link wie ein Link verhält und versuche, diese an eine andere Seite zu senden. Animal löst eine lokale Methode namens Handle aus, löschen geklickt. Lassen Sie uns diese Methode erstellen. Erlaubt hier eine Menge Blockkommentare. Handle Löschungen, auf die geklickt wurde, richtet diese Methode ein. Also const Handle delete geklickt ist gleich einer Pfeilfunktion. Im Moment melde ich mich einfach aus, lösche, klicke und speichere das. Klicken Sie auf die Schaltfläche Löschen. An. Ja, wir können sehen, dass diese Methode abgefeuert wird. Jetzt können wir ein benutzerdefiniertes Ereignis von dieser Methode emittieren. Aber zuerst müssen wir unser Emits-Array einrichten. Weißt du noch, wie wir das machen? Ein bisschen wie wir unsere Requisiten eingerichtet haben. Sie möchten es selbst ausprobieren und dann können Sie das Video anhalten. Aber wie auch immer, ich füge einen Kommentar hinzu, der besagt, dass emits steht. Um unsere Limits einzurichten, können wir eine Konstante namens emit erstellen sie auf die define-emits-Methode setzen. Wir können alle unsere Bilder hier in einem Array übergeben. Definieren wir also ein Emit dem Namen „Löschen“ geklickt. Spar dir das auf. Wir können dieses Ereignis jetzt von dieser Komponente aus emittieren. Also zurück zu unserem Handle Clips Methode löschen. Wir können jetzt einfach Klammern emittieren und dann löschen geklickt. Spar dir das auf. Stellen Sie sicher, dass wir keine Fehler haben. Jetzt können wir in der Punktansicht Anmerkungen der übergeordneten Komponente auf dieses Löschklickereignis warten. Lasst uns zu dieser Komponente springen. Wechseln Sie hier zu unserer Notizen-Komponente. Ich darf hier benutzerdefinierte Event-Handler. Also delete hat geklickt, was der Name ist wir für unseren Aufgabenbereich verwenden, wenn wir dieses Ereignis erhalten Lassen Sie uns eine Methode in dieser Komponente auslösen, die eine Methode namens delete note auslöst. Lassen Sie uns diese Methode erstellen. Lade unten herunter. Eine Menge Blockkommentar mit der Aufschrift „Notiz löschen“. Wir können diese Methode einrichten, const delete notes ist gleich Pfeilfunktion. Lassen Sie uns abmelden Notiz löschen. Heb dir das vorerst auf. Klicken Sie auf die Schaltfläche Löschen. Wir können sagen, dass diese Methode in der übergeordneten Komponente ausgelöst wird. jedoch an dieser Stelle, Woher wissen wir jedoch an dieser Stelle, welche Notiz aus dem Array entfernt werden soll? Wir brauchen etwas, um die Notiz zu identifizieren, die wir löschen möchten. Wir könnten die ID-Eigenschaft benutzen. Wenn wir zurück zur Notenpunktansicht springen, könnten wir die Noten-ID zusammen mit diesem Bild übergeben. Wir können hier einfach einen zweiten Parameter hinzufügen. Wir können die ID aus dieser Notiz Requisite holen , die wir weitergeben. Dies wird bei Requisiten Punktnote, Punkt-ID sein. Hier drin. Wir können einfach Requisiten Punktnotizen machen, um das zu speichern. Gehen wir nun zurück zu der übergeordneten Komponente, die die Punktansicht zeigt, bis zu dieser Löschnotizmethode. Wir können diesen Parameter hier übergeben. Nennen wir es ID zum Löschen. Loggen wir uns das einfach aus und stellen sicher, dass es durchkommt. Also ID zum Löschen, speichern Sie das. Ich lade neu und klicke auf die Schaltfläche Löschen. Ja, wir können Delete Note Id1 sehen, was die ID der ersten Note ist. Wenn wir in der zweiten Notiz auf die Schaltfläche Löschen klicken, können Sie delete know id2 sagen. Wir wissen, dass diese ID richtig durchkommt. Jetzt gibt es eine Reihe von Möglichkeiten die Notizen aus dem Array zu entfernen. Wir könnten den Index der Notizen basierend auf der ID herausfinden und dann das Element löschen, das sich am Index befindet. Wenn wir eine einzeilige Lösung verwenden möchten, können wir Filter dieses Notes-Array selbst festlegen, aber gefiltert, so dass nur die Notizen zurückgegeben werden, die diese ID nicht haben. Was wir hier tun können, wir überschreiben dieses Notes Array ref. Um auf diese href zuzugreifen, können wir den Punktwert nicht tun. Das ist überschreiben. Wir können einfach Gleiche machen. Und wir werden nicht wieder den Punktwert machen. Aber dieses Mal werden wir es filtern. Also Punktfilter. Zuerst müssen wir unseren Platzhalter hinzufügen, verwendet wird, wenn wir das Array durchlaufen, da er sich jedes Element im Array ansieht. Dafür können wir also einfach Note benutzen. Dann können wir eine Pfeilfunktion hinzufügen, die für jede Note im Array ausgelöst wird , während wir sie durchlaufen. Und dann können wir einfach angeben , was wir zurückgeben möchten. Ich strecke das einfach in einer Minute aus. Lassen Sie uns nur Elemente im Array zurückgeben, bei denen Notenpunkt-ID nicht dieser ID entspricht , die wir an diese Funktion übergeben. Also nicht gleich id2, lösche. Ich denke, das sollte es tun. Also lasst uns das aufheben. Erneut laden. Klicken Sie auf Löschen. Und wir können jetzt unsere Notizen löschen. 79. Pinia – Einrichtung und Staat [Modul 16]: Ich denke, jetzt ist ein guter Zeitpunkt, um unserer App das Statusmanagement mit Penny Up hinzuzufügen . Wenn Sie Ihrer App die Statusverwaltung hinzufügen möchten, desto früher desto besser. Denn das Hinzufügen von Zustandsverwaltung zu einer App, die bereits sehr kompliziert ist, kann viele Kopfschmerzen mit sich bringen. Aber dieses Mal werden wir einen Penny von Grund auf neu installieren , stattdessen alles von Grund auf neu, weil wir uns nicht dafür entschieden ihn automatisch zu unserem Projekt hinzuzufügen. Lass uns einfach Penny googeln. Der Penny eine Website. Fangen Sie an und ich gehe zu den ersten Schritten. Zuallererst müssen wir es mit NPM oder Yarn installieren. Ich benutze npm. Also müssen wir zu unserem Terminal springen. Töte den tauben Prozess mit Control C. Run npm install, penny, das ist installiert. Starten wir also unsere App erneut mit npm run dev, schließen Sie das Terminal. Das nächste, was wir tun müssen, ist eine Pedia, den Root-Store, zu erstellen und an die App zu übergeben. Wir machen das in main.js. Ich öffne den Explorer und gehe zu source und main.js. Also müssen wir zuerst importieren, Penny auf von Pena erstellen. Ich kopiere diese Zeile und füge sie nach diesem Import ein, erstelle aus der Ansichtszeile, füge sie dort ein. Und jetzt müssen wir nur die US-Methode unserer App auslösen und dann diesen Create Penny auslösen, eine Methode darin. Nachdem dies eine Gliederung erstellt hat, füge ich nur Punkt-Use-Klammern hinzu. Und dann erstelle ich einfach eine Klammer. Speichern wir das und stellen Sie sicher, dass wir keine Fehler haben. Lasst uns die App neu laden. Es gibt keine Fehler. Jetzt müssen wir also einen Pfennig einen Stiel erstellen. Ich springe zurück zum Penny a Seite. Ich gehe rückwärts zu dem, was Penny ein Witz zu einem grundlegenden Beispiel ist . Und es gibt uns hier ein grundlegendes Beispiel. Sie können Ihre Penny a Store-Dateien überall dort platzieren , wo Sie möchten. Aber sie scheinen zu empfehlen, sie in diesen Store-Ordner zu legen . Lassen Sie uns einen neuen Ordner erstellen. Der Quellordner namens Stores erstellt hier unsere STL-Datei. Sie können dies nennen, wie Sie möchten, aber ich nenne es Store-Notizen, denn dies ist ein Geschäft für unsere Notizen und alle damit verbundenen Methoden zu diesen Notizen. Jetzt kopiere ich einfach den Code dieses grundlegenden Beispiels. Füge das hier ein. All dies tut im Grunde genommen diese Define-Store-Methode , um unseren Shop einzurichten. Und wir haben alle unsere staatlichen Aktionen und Getter hier reingebracht. Und dann weisen wir diesen Store einfach dieser Konstante zu und exportieren ihn, um ihn für alle Komponenten in unserer App verfügbar zu machen . Lassen Sie uns also diesen konstanten Namen nennen, einen aussagekräftigeren Namen. Wir könnten das also US-Store-Notizen nennen. Und lassen Sie uns diesem Namen auch hier einen aussagekräftigeren Namen nennen, den wir diesen Store Notes nennen könnten. Lassen Sie uns vorerst das Objekt dieser Aktion für diese beiden Kommentare entfernen . Und wir werden uns zunächst nur auf den Staat konzentrieren. Lasst uns das auf mehrere Zeilen setzen. Und jetzt können wir Notizen kopieren oder in den Status im Laden schreiben . Ich schließe main.js und wir springen zur Ansicht von Notizen. Punktansicht, wo wir derzeit auf Notizen haben, befinden sich genau hier. Ich kopiere vorerst nur die beiden Objekte in diesem Array, kopiere diese, springe. Node.js zu speichern, wird jedoch eine Eigenschaft namens notes festgelegt. Stellen Sie das auf ein Array ein. Wir fügen diese Notizen einfach in dieses Notizen-Array ein. Spar dir das auf. Wir sollten jetzt in der Lage sein, diesen Shop in eine unserer Komponenten zu importieren , wo sie Zugriff auf dieses Notes Array erhalten, das sich in unserem Status in diesem Store befindet. Denken Sie daran, dass der Status nur zum Speichern von Daten dient. 80. Nutzen Unseren Shop: Lassen Sie uns diese Penniless importieren, obwohl wir in View Notes Punktansicht, Notizseite erstellt haben . Und verwende das Note-Array, das sich in unserem Shop befindet, um unsere Notizen auf der Seite anzuzeigen. Anstatt das Notes Array zu verwenden, das wir fest in die Punktansicht der Ansichtsnotizen codiert haben. Zuallererst müssen wir unseren Shop in die Punktansicht der Ansichtshinweise importieren . Wir möchten diese Konstante hier importieren, Store-Notizen verwenden. Springen wir also zur Ansicht der Punktansicht der Noten. Schauen Sie sich unsere Eingaben an und wir fügen einfach geschweifte Klammern importieren hinzu. Verwenden Sie Stola-Notizen aus in Schrägstrichen, Slash Store weiß, speichern Sie das. Erneut laden. Um Zugriff auf das Geschäft in unserer Komponente zu erhalten, müssen wir ihn konstant oder variabel zuweisen. Eine Menge. Ein weiterer Blockkommentar hier, der „Store“ sagt Und wir erstellen eine Konstante namens Store-Notizen. Weisen Sie dies zu, um Store-Notizen, Klammern zu verwenden. Spar dir das auf. Nachdem wir das getan haben, sollten wir in der Lage sein, unseren Shop in unseren View Dev-Tools zu sehen . Klicken wir also auf diesen kleinen Doppelpfeil und sehen uns dann an. Es heißt, in der Konsole der letzte Donut-Store installiert ist. Und wir können sehen, wie ihr kostenloser Klick darauf gestohlen hat. Wir können sagen, dass unsere Notes alle Daten aus jeder Notiz angeordnet sind. Lassen Sie uns diese Notizen nun aus dem Note-Array ausgeben , das sich in unserem Shop befindet. Anstelle von dem Array , das hier fest in die Punktansicht der View-Notes codiert ist, können wir einfach zu unserer Notes-Komponente springen. Anstelle von v für Notiz in Notizen. Wir können V4-Notizen im Namen unseres Geschäfts machen, der Notizen speichern ist. Wir können Notizen in diesem Geschäft speichern, auf wir zugreifen möchten, dass die Notizen richtig sind. Also können wir einfach Punktnoten machen. Spar dir das auf, lade neu. Wir können immer noch auf Notizen auf der Seite sehen, außer dass sie jetzt aus unserem Shop kommen. Anstelle dieses Arrays, das sich in unserer View Note Stop-View-Komponente befindet, sollten wir diese Notiz jetzt einfach loswerden können. Also richtig, heb dir das auf. Wir können unsere Notizen immer noch auf der Seite sehen. Wenn wir zu den DevTools gehen, ändern wir den Inhalt in einer unserer Notizen. Wir könnten sagen, dass unsere Notizen auch in Echtzeit auf der Vorlage aktualisiert werden. lade ich einfach neu. Wenn wir zum Speichern von Notizen springen, dot js, ändern Sie den Inhalt einer dieser Notizen. Ich entferne einfach einige der Texte und speichere sie. Ich habe bereits erwähnt , dass heißes Nachladen im Moment nicht zu funktionieren scheint. Wir haben diesen heißen Nachladen nicht gesehen, als ich den Inhalt dieser Notiz im Geschäft ändere. Und ich habe dir auch gezeigt , dass es einen Führer gibt, den Penny, eine Seite. Wir scrollen hier nach unten, Modulersatz, und wir haben versucht diese Arbeit anhand dieses Beispiels zu erledigen. Es würde nicht funktionieren. Ich habe es immer noch nicht geschafft, einen Weg zu finden, diese Arbeit zu bekommen , wenn ich dies aufnehme, aber probieren Sie es aus. Vielleicht funktioniert es jetzt in Zukunft, wo du bist. Und wenn Sie eine Lösung finden, teilen Sie diese bitte mit dieser Vorlesung. Wenn ich eine Lösung und viel Vortrag zu diesem Kurs finde , in dem ich das erklärt. 81. Action – Note hinzufügen: Fügen wir Penny, einem Geschäft, eine Aktion hinzu, die es uns ermöglicht, dieser Notiz, die sich in unserem Bundesstaat befindet, eine neue Notiz hinzuzufügen, und unsere Meinungen speichern diese und fügen die neuen Notizen zur Seite hinzu, da diese Notizen jetzt kommen aus diesen Notizen direkt in unserem Bundesstaat. Wenn wir jetzt versuchen, neue Notizen hinzuzufügen , sehen wir, dass keine Fehlernotizen definiert sind. Und das liegt daran, dass wir versucht haben, ein neues Notizenobjekt zu dieser Noten-Array-Referenz hinzuzufügen, das hier nicht mehr existiert, wenn Notizenobjekt zu dieser Noten-Array-Referenz hinzuzufügen, das hier wir nicht mehr existiert, hier nicht mehr vorhanden sind. Aber jetzt möchten wir diesem Notes-Array, das sich in unserem Meinungsspeicher befindet , ein neues Note-Objekt hinzufügen diesem Notes-Array, das sich in unserem Meinungsspeicher befindet , ein neues Note-Objekt . Springen wir zurück zum Penny pro Seite und springen zu einem Penny ein grundlegendes Beispiel. Es zeigt uns hier, wie wir unserem Shop Aktionen hinzufügen. Wir müssen nur ein Objekt mit dem Namen Aktionen nach unserem Bundesstaat hinzufügen , und wir können alle unsere Aktionen hier platzieren. Ich erinnere mich, dass Aktionen nur Methoden sind, die es uns ermöglichen , auf die Daten in unserem Bundesstaat zuzugreifen und sie dann zu ändern. Lasst uns zurück zum Speichern von Node.js springen. Und im Moment reduziere ich einfach die Statusmethode und das Objekt, indem ich einfach auf diesen kleinen Pfeil klicke. Danach fügen wir ein Objekt hinzu, das als Auktionen bezeichnet wird. Und wir können jetzt alle unsere Möglichkeiten hier platzieren. Lassen Sie uns eine neue Option namens „ungerade Note“ erstellen. Im Moment logge ich einfach unsere Notizen ab und sage , dass wir diese Aktion jetzt von überall in unserer App aus auslösen können . Lassen Sie es uns aus der Punktansicht der View-Notes auslösen. Wir könnten diesen Sauerstoff einfach direkt auf neuen Notizen auslösen , die hier in diesem Klick-Handler enthalten sind. Und wir ziehen ein Geschäft als Stolarnotizen ein. Um auf unseren Shop zugreifen zu können, können wir einfach mit dem Speichern von Notizen beginnen. Und um auf die Aktion zuzugreifen, haben wir gerade Notizen gestartet. Wir können einfach mit punktmerkwürdiger Note beginnen. Wir müssen dieser Methode keine Klammern hinzufügen, wenn wir sie in unserer Vorlage auslösen. Also lasst uns das speichern und sehen, ob das funktioniert. Ich tippe eine Notiz ein und klicke auf neue Notizen. Ja, wir können sehen, dass ich feststellen würde, dass ich ausgesperrt bin. Dies feuert unsere Aktion erfolgreich aus. Wenn wir jedoch zu unserer vorherigen Anzeigennotizmethode springen, die sich in der Punktansicht der Ansichtsnotizen befindet. Wir haben diese beiden Zeilen unten, diese, die die neue Notiz löscht, diejenigen, die den Textbereich löschen. Diese Zeile, die den Textbereich mithilfe dieser Vorlage REF fokussiert , die wir so festgelegt haben, dass wir den Textbereich hier hinzugefügt haben. Jetzt werden wir keinen Zugriff auf dieses V-Modell haben , erklären Sie es, all diese Vorlage verweisen darauf, den Textbereich aus unserem Geschäft zu fokussieren. Es ist sinnvoll, diese lokale Methode weiterhin auszulösen, Notizen hinzuzufügen, wenn wir auf die Schaltfläche Neue Notiz hinzufügen klicken und dann unsere Aktion von hier aus auslösen können, damit wir diese beiden Zeilen weiterhin auf die unten, die den Textbereich löschen und den Textbereich fokussieren. Lassen Sie uns also diesen Klick-Handler im Posteingang der neuen Notebooks ändern und was diese lokale Notes-Methode ausgelöst hat wird all diesen Code auskommentieren, der das neue Knotenobjekt eingerichtet hat. Und dann verschiebt man es auf Notes Array ref, das wir vorher hier hatten. Dann wird die Aktion in unserem Shop ausgelöst. Stattdessen können wir einfach Notizen speichern. Beachten Sie, wenn wir eine Aktion aus unserem Skriptbereich auslösen , müssen wir Klammern hinzufügen. Also lasst uns das speichern und sehen, ob diese Aktion in unserem Shop immer noch ausgelöst wird. Ich lade neu, tippe eine Notiz ein und klicke auf den Button. Und doch können wir sagen, ich wüsste, dass ich angezeigt werde, nun, diese Aktion muss wissen, was wir unseren Notizen direkt im Bundesstaat hinzufügen sollten . Wir müssen den Inhalt dieser Notiz, die in den Textbereich eingegeben wurde, tatsächlich an diese Aktion übergeben den Inhalt dieser Notiz, die in den Textbereich eingegeben wurde . So können wir basierend auf seinem Inhalt neue Notizobjekte einrichten und es dann zu unserem Note-Array hinzufügen , das sich im Bundesstaat befindet. Wir könnten dies mit Parametern tun. 82. Action (mit Parametern) – Note hinzufügen: Wir müssen den neuen Notizeninhalt aus der Punktansicht der Ansichtsnotizen an unsere neue Aktion „Notizen hinzufügen“ übergeben , die sich in unserem Shop befindet, bevor wir neue Notizobjekte einrichten und es diesem Notizen-Array hinzufügen können , das sich in unserem Status befindet. Wir können Parameter an Aktionen so viele Parameter übergeben , wie wir möchten, genau wie wir mit jeder Funktion in JavaScript können. Springen wir also zurück zur Ansicht Notizen-Stopp-Ansicht. Und unser neuer Notizeninhalt befindet sich in dieser neuen Notiz href, die an diesen Textbereich gebunden ist. Wenn wir unsere Aktion hier auslösen, können wir einfach Notizen speichern, um Notizen hinzuzufügen und dann einen neuen Notenpunktwert zu übergeben und diesen zu speichern. Wenn wir nun zurück zu unseren Store-Notes dot js auf dieser Notiz Sauerstoff springen , können wir diesen Parameter hier erhalten. Wir können ihm jeden Namen geben, den wir wollen, also können wir es als neuer Inhalt bezeichnen. Stellen Sie sicher, dass das durchkommt. Loggen wir es uns einfach hier aus. Wenn Sie also Inhalt notieren, speichern Sie diesen und laden Sie ihn neu. Klicken Sie auf den Button auf. Ja, das funktioniert. Wir können sehen, dass unsere Aktion die Notiz ausloggt , die wir gerade getippt haben. Jetzt müssen wir nur noch ein neues Notizobjekt wie dieses mit einer ID für eine Concept-Eigenschaft einrichten ein neues Notizobjekt wie dieses mit und es dann diesen Notizen hinzufügen, die sich bereits in unserem Status befinden. Springen wir also zurück, um Notizen zu sehen, die nicht angezeigt werden. Und nennen wir diesen Code, den wir kommentiert haben. Spar dir das auf. Und das fügen wir hier in unsere Aktion ein. Entferne die Kommentare, repariere die Einrückung und wir müssen dies ein wenig ändern. Diese Linie ist also immer noch in Ordnung. Das wird immer noch das aktuelle Datum in dieser Zeile bekommen , ist in Ordnung. Es wird diesen Zeitstempel einfach in eine Zeichenfolge konvertieren und ihn dieser ID-Variablen zuweisen. Lassen Sie mich Ihre Notizen aufstellen. Objekte haben bereits unsere ID eingerichtet. Das ist in Ordnung. Aber wenn wir die Concept-Eigenschaft festlegen, möchten wir dies nicht mehr aus dem neuen Notenpunktwert abrufen. Wir möchten es von diesem Parameter abrufen, dass wir neue Notizeninhalte weitergeben. Lassen Sie uns das kopieren, fügen Sie das hier ein. Und wenn wir dann diese neuen Notes-Objekte in unser Notes-Array aufheben , möchten wir es jetzt in Notes Array verschieben , das sich in unserem Zustand befindet. Wir können auf die Dateneigenschaften in unserem Zustand innerhalb und auf Sauerstoff zugreifen , indem wir das Schlüsselwort dieses Schlüsselworts verwenden. Ein bisschen wie wir es in der Options-API getan haben , um auf unser Notes-Array zuzugreifen, das nur als Notizen bezeichnet wird. Wir können diese Punktnoten einfach machen. Und dann möchten wir diese Notes-Objekte in dieses Array aufheben . Also können wir diese Punktnoten einfach in Shift, Klammern, Notiz machen, und wir können diese Zeile jetzt einfach loswerden. Und lasst uns das speichern und sehen, ob das funktioniert. Geben Sie eine neue Notiz ein. Klicken Sie auf den Button auf. Ja, es funktioniert. Wir sehen, dass es der Seite in unseren Entwicklungstools hinzugefügt wird. Wir können sagen, dass es zu unseren Notizen hinzugefügt wurde oder auch hier in unserem Bundesstaat schreiben. 83. Action – Hinweis löschen: Lassen Sie uns in unserem Meinungsspeicher eine Aktion zum Löschen eines Knotens einrichten . Und unser Lösch-Button befindet sich in unserer Notizkomponente. In Komponentennotizen oder Notenpunktansicht. Nehmen wir an, was gerade mit dieser Löschfunktion passiert . Auf dieser Löschschaltfläche haben wir diesen Klick-Handler , diese lokale Methode auslöst, mit Löschclips. Diese Methode ist da. Und dann geben wir ein benutzerdefiniertes Ereignis namens Clips löschen aus. Ich gebe die ID der Notizen ein, die wir löschen möchten. Dann bezeichnet die übergeordnete Komponente die Punktansicht, die bis zur Notenkomponente nach oben scrollen. Wir hören auf dieses Ereignis, wenn wir es erhalten, das diese Löschnotizmethode vergrößert. Mit dem Entfernen der Notiz aus dem Array basierend auf dieser Idee , die wir diese lokalen Notizen weitergeben oder acht gibt es hier nicht mehr. Das wird momentan sowieso nicht funktionieren. Aber wie auch immer, sobald wir anfangen Statusmanagement in unserer App zu verwenden, sei es durch Composable, UX oder Penny oder wie wir es verwenden. Wir müssen uns keine Sorgen machen, benutzerdefinierte Ereignisse von untergeordneten Komponenten an Komponentenpaare auszusenden benutzerdefinierte Ereignisse von untergeordneten Komponenten an Komponentenpaare und dann auf diese Ereignisse abzuhören und dann auf diese Ereignisse abzuhören, bevor wir eine Methode auslösen. Denken Sie daran, dass alle Komponenten unserer App, egal wie tief verschachtelt, Zugriff auf alles haben, egal wie tief verschachtelt, Zugriff auf alles haben, was sich in unserem Geschäft befindet, einschließlich allem in unserem Bundesstaat und all unserer Handlungen. Lassen Sie uns eine neue Aktion zum Löschen von Notizen in unserem Shop einrichten und diese direkt in der Node-Punktansicht auslösen , ohne benutzerdefinierte Ereignisse ausgeben oder auf diese Ereignisse abhören zu müssen. Okay, also lasst uns springen , um Node.js zu speichern. Und ich werde diese Notizauktion einfach auf einem Komma reduzieren und eine neue Aktion namens „Notizen löschen“ hinzufügen. Um die Notiz aus Notizen zu löschen oder in unserem Bundesstaat zu schreiben, benötigen wir die ID. Wir richten dies also ein, um diese ID mit einer Variablen namens ID zu erhalten , die gelöscht werden soll. Wir melden uns einfach aus, um sie zu löschen. Id, um das zu löschen und zu speichern. Notieren Sie jetzt Punktansicht. Anstatt diese lokale Methode auszulösen , die wirklich geklickt wurde, wenn auf die Schaltfläche „Löschen“ geklickt wird, importieren wir unsere Pennys Tür hier. Lösen Sie diese neue Aktion aus, löschen Sie Notiz direkt. Stattdessen springe ich zum Ansicht-Notenpunkt Vue. Kopieren Sie diese Zeile, in der wir unseren Shop importieren. Fügen Sie die oben in der Notenpunktansicht ein, die wir benötigen, um Zugriff auf unseren Shop zu erhalten, wie wir es in der Notizpunktansicht getan haben, indem Sie unseren Shop einer Konstanten zuweisen. Also kopiere ich diesen Kommentar auch aus der Punktansicht der Ansichtsnotizen in den Code . Und wir fügen das nach unseren Aufforderungen zu den Mythen ein, wir haben jetzt Zugriff auf unseren Shop in dieser Notizen-Punkt-Vue-Komponente, wir können jetzt zu dieser Schaltfläche Löschen springen diese Aktion Notiz löschen direkt auslösen. Wir werden diesen Handle löschen Sie angeklickte Methodenaufruf loswerden, und stattdessen speichern wir nur Notizen, Dot Delete, Note. Wir müssen die Notizen-ID übergeben. Denken Sie daran, dass wir das Note-Objekt hier mit einer Requisite weitergeben . Unsere Noten-ID ist also unter Requisiten Punkt, Punkt-ID verfügbar. Ich notiere nur die Punkt-ID, wenn wir in der Vorlage sind, damit wir die Notiz einfach weitergeben können. Und hoffentlich sollte unsere Aktionslöschnotiz die ID erhalten und ausloggen. Also mal sehen, ob das funktioniert. Klicken Sie auf die Schaltfläche „Löschen“. Lass mich sehen, dass ID1 ausgesperrt ist. Klicken Sie auf das andere. Was ist Feind? Sehen Sie, dass ID2 ausgesperrt wird. Lasst uns nun zurück zur Notenpunktansicht springen und etwas aufräumen. Weil wir diese Methode zum Löschen von Clips nicht mehr benötigen . Wir benutzen es nicht mehr. Wir müssen auch nicht mehr löschen geklickt als Emit definieren löschen geklickt als Emit da wir dies nicht mehr emittieren, wir können einfach unseren Emits-Code für den Kommentar vollständig entfernen . Spar dir das auf. Und wenn wir gesprungen sind, um die Punktansicht der Noten anzuzeigen, scrollen Sie bis zur Notenkomponente. Wir müssen nicht mehr auf dieses verzögerte geklickte Ereignis warten. Wir geben es nicht mehr aus der Notenpunktansicht aus. So können wir sie auch entfernen. Spar dir das auf. Und wenn wir hier nach unten scrollen, feuern wir diese Löschnotizmethode jetzt nicht mehr aus. Also kopiere ich einfach den Code aus dieser Methode und lösche diese Methode dann auch für den Kommentar. Spar dir das auf. Nun springen wir zum Speichern von Node.js und wir fügen diesen Code in diese Löschnotizmethode ein. Wir müssen das nur ein bisschen anpassen . Filtern Sie nicht mehr nein, stoppen Sie den Wert und weisen Sie dieses gefilterte Array dann wieder dem Notes Stoppwert zu. Wir wollen das jetzt mit diesen Notizen machen, die bereits in unserem Bundesstaat sind. Auch hier können wir diesen Snopes-Punktwert einfach ersetzen. Ich wähle beide aus, indem ich Alt gedrückt halte. Stattdessen können wir diese Punktnoten einfach machen. Dies wird die gesamten Notizen greifen, die richtig sind sie basierend auf den Kriterien hier zu filtern. Und es wird alle Notizen zurückgeben , bei denen die ID der Notiz nicht der ID entspricht, die wir hier übergeben. Diese Variablennamen sind immer noch identisch, daher denke ich nicht, dass wir weitere Änderungen vornehmen müssen . Lasst uns das speichern und wir werden sehen, ob das funktioniert. Ich lade neu, klicke auf den Lösch-Button und wir sehen, dass die Notiz gelöscht wird, und wir sehen auch, dass das Objekt in unseren Entwicklungstools entfernt wird. Wenn ich dieses lösche, sehen wir jetzt ein leeres Array und unsere Entwicklungstools. 84. Edit und Route bearbeiten: Wir können jetzt unsere Notizen erstellen, lesen und löschen. Wir können unsere Notizen derzeit nicht aktualisieren. Lassen Sie uns unser Rohöl-Setup abschließen. Erstellen, lesen Sie Update, löschen Sie, indem Sie eine neue Notizseite erstellen , auf der wir eine Notiz bearbeiten und speichern können . Dafür werden wir unserem Penny a Store und auch unserem ersten Getter eine neue Aktion hinzufügen . Aber jetzt richten wir einfach eine neue Route auf der Seite ein, um eine Notiz zu bearbeiten. Ich springe zu unserem Entdecker. Im Ordner „Ansichten“. Ich erstelle eine neue Datei mit dem Namen „Notiz anzeigen“, nicht anzeigen. Wir fügen unsere Vorlagen-Tags hinzu. Zunächst einmal. Ich füge nur ein Div mit einer Bearbeitungsklasse hinzu, eine Strichnotizen in dieser Menge H1-Tag, auf dem nur Notizen bearbeiten steht. Spar dir das auf. Und jetzt müssen wir unsere Routen einrichten. Springen wir also zum Source-Router, index.js. Viele neue Route hier nach der Route der paar Noten, ich werde alle Menge auswählen, um Alt Shift zu drücken, und Abwärtsverknüpfung könnte anders sein um das zu duplizieren. Und wir legen den Pfad zum Bearbeiten Notiz fest, um dieser Route zu folgen , um zu wissen, welche Notizen wir tatsächlich bearbeiten werden, in die Seite laden, dann müssen wir eine Route übergeben Parameter zu diesem Teil. das zu tun, können wir einfach einen Schrägstrich und dann einen Doppelpunkt punkten, und dann den Namen eines Parameters, oder wir könnten ihn einfach ID nennen. Mit anderen Worten, wir könnten die Schrägstrich-ID eins bearbeiten besuchen , und dann können wir die ID, ID eins in dieser Ansicht abrufen und sie dann verwenden, um die entsprechende Notiz in unseren Notizen zu erhalten oder in unseren Bundesstaat zu schreiben in unserem Shop und zeigen Sie dann die Konzepte dieser Notizen in einem Textbereich auf dieser Seite , damit wir sie dann bearbeiten und speichern können. Und lassen Sie uns den Namen dieser Route ändern, um Notizen zu bearbeiten, wir müssen eine neue Komponente importieren. Also dupliziere ich diese Import-Notenzeile und ersetze Ansichtsnotizen durch Ansichtsbearbeitungsnotiz. Und dann kopiere ich diesen Namen, zeige die Bearbeiten-Notiz an und füge sie hier ein. Das hebe ich dir auf. Wir sollten jetzt in der Lage sein, einen Pfad zu besuchen, wie ich die Schrägstrich-ID eins notiert habe und zwei neue Bearbeitungsnotizseite erhalten. Jetzt müssen wir auf diese Seite gelangen können, ohne die Adressleiste eingeben zu müssen. Lasst uns diese Bearbeitungsschaltflächen anschließen. Ich werde hier einfach alles schließen , außer, nein, nicht sehen. Und lasst uns unseren Edit-Button finden. Und das wird dies in neue Zeilen aufteilen und dann die Attribute auf dem Eröffnungstag aufteilen. Wir können dies tatsächlich einfach in eine Router-View-Komponente anstelle eines Tags ändern . Benennen wir das Tag also in Router-Link um. Stellen Sie sicher, dass das schließende Tag ebenfalls umbenannt wird. Und wir können jetzt einfach eine Requisite anfangen , um ihm zu sagen, wohin wir gehen sollen. Ich verwende eine Vorlagenzeichenfolge, um dies mit etwa sechs zu tun , damit wir die ID ausgeben können. Wir möchten zu dem Pfad-Schrägstrich wechseln , den wir in unserer Routerdatei einrichten, und dann schrägst. Und dann verwenden wir geschweifte Dollarklammern, um die ID auszugeben. Und wieder geben wir die Notes-Objekte an diese Knotenpunktansicht-Komponenten weiter. Mit dieser Notizen-Requisite können wir Zugriff auf die ID Out-Aufforderungen Punktnote, DID oder in der Vorlage nur Punkt-ID notieren. Hier drin. Wir können einfach Notizen schreiben, Punkte-ID, und speichern wir das. Prüfen Sie, ob diese Bearbeiten-Schaltflächen funktionieren. Klicken Sie auf die erste Schaltfläche „Bearbeiten“ und schrieb dennoch die Schrägstrich-ID für Notizen bearbeiten. Springe zurück und klicke auf den zweiten Bearbeitungs-Button. Jetzt können wir auf dem Pfad zur Notenschrägstrich id2 bearbeiten auf diesen Routenparameter zugreifen, den wir in unserer Routerdatei hier in unserer Vorlage genannt haben in unserer Routerdatei hier in unserer Vorlage genannt , indem wir die Dollar-Route-Objekte verwenden können, die wir auch die Optionen verwenden könnten API. Spucken wir also einfach diese Routenparameter-ID auf der Seite aus diese Routenparameter-ID und sehen, ob das funktioniert. Wir möchten also unsere neue Komponente „Notizen bearbeiten“ öffnen. Source-Views, Zeigen Sie Notizen bearbeiten an. Und lassen Sie uns diese Überschrift ändern, um Notizen mit einer ID normaler doppelter geschweifter Klammern zu bearbeiten . Greifen Sie auf die Informationen unserer Route zu. Wir können Dollarroute hinzufügen und um auf unsere Routenparameter zuzugreifen, können wir Punktparams durchführen und dann auf ID-Parameter zugreifen, die wir hier einrichten, können wir einfach eine Punkt-ID erstellen. Hoffentlich spuckt dies ID der Notiz auf der Seite aus. Jetzt lasst uns das aufheben. Erneut laden. Und wenn wir jedoch auf dem Pfad edit nope slash id2 sind, sehen wir id2 auf der Seite. Wenn wir auf den ersten Bearbeiten-Button klicken, lassen Sie mich zum Pfad zum Schrägstrich der Notizen bearbeiten ID eins gehen. Wir sehen jetzt ID1 auf der Seite. 85. Wiederverwendbare Komponente – AddEditNote: Okay, was wir in dieser neuen Notizenansicht benötigen , die wir erstellt haben , um eine Notiz zu bearbeiten und zu speichern. Nun, im Grunde brauchen wir einen Textbereich, in den wir die Notiz laden und dem Benutzer erlauben können , sie zu bearbeiten. Und wir benötigen eine Schaltfläche zum Speichern, damit der Benutzer sie speichern kann. Was wir also im Grunde brauchen wir, wenn wir genau das zurückgehen was wir oben in unserer Notizenansicht haben, brauchen wir nur einen Textbereich und eine Schaltfläche. Jetzt könnten wir einfach zu unserer Notizenansicht springen. in Quellansichten Notizen an. Wir könnten einfach dieses Kartenelement und alle darin enthaltenen Felder kopieren . Fügen Sie dies in die Ansicht ein, bearbeiten Sie die Notenpunktansicht und verwenden Sie es dann erneut. Nun, dann würden wir Code duplizieren. Wir möchten immer vermeiden, Code so weit wie möglich zu duplizieren. Daher ist es sinnvoller, eine wiederverwendbare Komponente aus dieser Karte, dem Textbereich und dem Buttered zu erstellen eine wiederverwendbare Komponente aus dieser Karte, dem Textbereich und dem Buttered , den wir überall in unserer App verwenden können. Springen wir zu unserem Explorer in unserem Notizordner. Lassen Sie uns eine neue Datei mit dem Namen Notizpunktansicht bearbeiten erstellen. Weil wir eine Notiz mit dieser Komponente sowohl hinzufügen als auch bearbeiten können . Fügen wir unsere Vorlagen-Tags hinzu. Nun springen wir zur Ansicht Noten Punkt Vue kopiert dieses Modell, dieses Div mit einer Klasse von Karten. All das darin enthaltende Zeug kopiert das, fügen Sie es in unsere Vorlage hier in unserer neuen Komponente ein. Lasst uns alle dynamischen Sachen entfernen , die hier kaputt gehen werden. Entfernen wir also dieses V-Modell aus dem Textbereich und entfernen diesen Klick-Handler auf der deaktivierten Requisite aus den getreffenen Aufzählungszeichen. Spar dir das auf. Jetzt möchten wir in der Lage sein, die hier angezeigten Schaltflächen zu steuern . Denn auf unserer Notizseite wollen wir das rauskommen, neue Notizbücher in, aber auf der Bearbeitungsseite möchten wir wahrscheinlich eine Schaltfläche mit der Aufschrift Notiz speichern oder ähnliches speichern. Möglicherweise möchten wir auch mehr als einen Button hinzufügen können . Lassen Sie uns also hier einen Slot erstellen , in dem wir die gewünschte Bearbeitungsschaltfläche einfügen können. Ich hole einfach Ableton. Stattdessen fügen wir einen Slot hinzu, dies zu einem benannten Slot macht. Also viel Name, Attribut und setze das auf Schaltflächen. Spar dir das auf. Jetzt verwenden wir diese neue Komponente in unserer Notizenansicht und lassen Sie alles dort arbeiten, bevor wir sie dann auf unserer neuen Bearbeitungsseite verwenden. Springen wir zur Ansicht der Punktansicht der Noten. Ich importiere diese Komponente , die wir gerade erstellt haben. Das nach unseren Notizen. Ich dupliziere diese Zeile. Und wenn Sie zum Importieren gehen, fügen Notiz aus Schrägstrich-Komponenten hinzu, bearbeiten Sie die Schrägstriche hinzufügen, bearbeiten Sie Notizen, Punkt Vue. Spar dir das auf. Scrollen wir jetzt nach oben. Ich werde all dieses Kartenelement kommentieren. Dann sind die Ausgänge eine neue Komponente. Bearbeiten, notieren Sie, speichern Sie das. Wir sehen den Textbereich, aber wir sehen den Button nicht. Wir müssen den Knopf in unseren Slot geben. In dieser Komponente Notiz hinzufügen können wir ein Vorlagen-Tag hinzufügen. Wir können entweder v-Dash-Slots, Doppelpunktasten hinzufügen , was der Name des Slots ist , den wir hier in der Notenpunktansicht hinzufügen einrichten. Wir können dies zeigen, indem wir einfach Hash-Buttons machen , und wir können jetzt Objekte darin platzieren. Lasst uns das also aus dem Modell holen , das wir kommentiert haben. Der Button ist also da. kopiere ich. Füge es hier ein. Spar dir das auf. Jetzt sieht alles richtig aus. Aber es funktioniert nicht, weil dieser Textbereich , der jetzt von unserer neuen wiederverwendbaren Komponente stammt, nicht mehr diese neue Notiz in unserem Script-Bereich ist. Lasst uns das als Nächstes reparieren. 86. Hook-up mit modelValue: Dieser Textbereich auf der Schaltfläche funktioniert nicht mehr. Und das liegt daran, dass dieser Textbereich, der sich in unserer neuen untergeordneten Komponente beim Edit-Notizpunkt Vue befindet, nicht mehr an diese neue Notiz angeschlossen ist, die wir in dieser View Notizen-Komponente einrichten. Nun, was wir tun können, ist, diese neue Notiz zu übergeben, um die untergeordnete Komponente der Notiz mit dem V-Modell zu bearbeiten. Dann können wir alles mit dem Modalwert verbinden und den modalen Wert aktualisieren. Lassen Sie uns also zuerst das V-Modell, diese Notiz hinzufügen, auf eine neue Notiz setzen , die ursprünglich an den Textbereich gebunden war. Wir können eine V-Modellrichtlinie hinzufügen und diese auf neue Notizen setzen und diese speichern. Und wir können jetzt den Wert dieses V-Modells in unserer Edit-Note-Komponente mit der speziellen modalen Wertestütze erhalten unserer Edit-Note-Komponente , und dann kombinieren wir die Requisite zu diesem Textbereich. Weißt du noch, wie wir das machen? Fühlen Sie sich frei, das Video anzuhalten und es auszuprobieren. Was wir tun müssen, ist unsere Skript-Setup-Tags hinzuzufügen. Wir müssen den Wert dieses V-Modells unter Verwendung der Modellwertestütze erhalten . Also müssen wir unsere Requisiten einrichten. Wir tun dies, indem wir eine Konstante namens Requisiten , die der Methode define props entspricht. Und wir können unsere Aufforderungen hier weitergeben. Wir möchten den Modellwert erhalten Requisitentyp wird String sein. Das wird erforderlich sein. Also setzen wir „erforderlich“ auf „true“. Spar dir das auf. Und wir können diese modale Wertestütze jetzt an den Textbereich binden . Wir könnten das tun, indem wir das V-Modell einfach auf das Modellvolumen einstellen . Das hebe ich dir auf. Um dies zu überprüfen, funktioniert. Lassen Sie uns notieren , dass ich den Standardwert dieser neuen Notiz ändern werde , die hier ist. Also stecke ich da ein paar SMS rein, heb dir das auf. Wir können sagen, dass Text in unserer neuen wiederverwendbaren Komponente in den Textbereich gelangt. Wenn wir diese neuen Notizen jedoch irgendwo auf unserer Seite grob ausgeben . Nehmen wir an, wir hatten ein Vor-Tag nach diesem Add edit nope-Komponente. Und wir geben einfach eine neue Notiz aus. Spar dir das auf, lade neu. Und dann ändern wir den Textbereich. Wir können sagen, dass der Wert dieser neuen Notiz ref nicht aktualisiert wird. Was wir also für die neue untergeordnete Komponente tun müssen ist, die übergeordnete Komponente explizit darüber zu informieren , wenn Sie die Stopp-Ansicht notieren, wenn der Wert im Textbereich geändert hat , damit er aktualisiere den Wert. Diese neue Notiz href. Wir können das mit dem Update-Modellwert tun. Lassen Sie uns also springen, um Notenpunktansicht hinzuzufügen. Weißt du noch, wie wir das machen? Zögern Sie nicht, innezuhalten und es selbst zu machen. Aber was wir in diesem Setup tun müssen, erstellen unsere Handschuhe eine Konstante namens emit setzen sie auf die define-emits-Methode. Und wir können unsere nachahmbaren Ereignisse in dieses definierte Emits-Array weitergeben . Und wir möchten den Wert des Doppelpunktmodells für Ereignisaktualisierungen hinzufügen. Dies ist ein besonderes Ereignis , das es uns ermöglicht einen Wert , der von der übergeordneten Komponente stammt, direkt durch das V-Modell zu ändern , der von der übergeordneten Komponente stammt, direkt durch das , ohne Ereignisse von der untergeordneten Komponente emittieren und Hören Sie auf diese Ereignisse und nehmen Sie dann die Änderung vor. So können wir den modalen Wert aktualisieren, diese neue Notiz, href, ändern , die sich auf einer übergeordneten Komponente befindet. Also lasst uns wieder dahin springen. Nee Punktansicht. Und was wir hier tun können, ist, auf das Eingabeereignis in diesem Textbereich zu achten, das jedes Mal ausgelöst wird, wenn wir eine Änderung an diesem Textbereich vornehmen . Also können wir einfach Eingaben addieren. Was wir tun wollen, ist emittieren. Mit Dollar emittieren. Wir möchten das Valude-Ereignis „ Doppelpunktmodell aktualisieren“ emittieren. Und wir müssen den Wert übergeben , den wir festlegen möchten, um den Wert, der mit dem V-Modell der übergeordneten Komponente übergeben wird, als zweiten Parameter festzulegen . Und so können wir das einfach so einstellen , dass das Volumen modelliert wird. Spar dir das auf. Mal sehen, ob das funktioniert. Laden Sie diese Seite neu und ändern Sie den Wert des Textbereichs. Ja, wir können diesen Vorgespräch auf der View Notes Punkt sehen , die Vue-Komponente aktualisiert wird. Wir wissen also, dass diese neue Notiz für die übergeordnete Komponente erfolgreich von der untergeordneten Komponente bei der Notenpunktansicht bearbeitet wird erfolgreich von der untergeordneten Komponente bei der Notenpunktansicht bearbeitet indem Sie auf das Eingabeereignis im Text abhören -Bereich und dann den Aktualisierungsmodellwert der Übergabe des neuesten Wertes , der dann direkt den Wert der neuen Noten des V-Modells aktualisiert , die wir hier übergeben. Bevor wir fortfahren, entfernen wir diesen Vorgespräch, den wir zu all diesem Code hinzugefügt haben , den wir kommentiert haben. Werde das los. Wir müssen auch den Standardwert der neuen Note auf eine leere Zeichenfolge zurücksetzen. Spar dir das auf, lade neu. wir sicher, dass alles funktioniert. Also lege ich eine neue Notiz ein, klicke auf den Button und die neue Notiz wurde hinzugefügt. Wir sehen jedoch, dass ein Fehler in unserer Konsole Eigenschaften des Nulllesefokus nicht lesen kann. Und das liegt daran, dass wir in dieser Zeile, nachdem wir neue Notizen hinzugefügt haben, indem wir die Notizenkonstante an unsere App-Notizenaktion in unserem Shop gesendet haben, versuchen wir, ein Element zu fokussieren, das eine Vorlage hat href von neue Notiz ref. Diese Href existiert für diese Komponente nicht mehr. Diese Vorlage Req befindet sich jetzt in der untergeordneten Komponente in der Notenpunktansicht bearbeiten hier. Deshalb konzentriert sich dieser Textbereich nicht, nachdem wir eine neue Notiz hinzugefügt haben, und deshalb wird dieser Fehler angezeigt. Lasst uns das als Nächstes reparieren. 87. Den Fokus korrigieren den Fokus: Wenn wir eine neue Notiz eingeben, klicken Sie auf die Schaltfläche Neue Notiz hinzufügen. Wir können sehen, dass die Notizen zu unserer Liste hinzugefügt werden, und fügen sie zu unserem Meinungsspeicher hinzu, um die Notizen im Bundesstaat zu finden. Der Textbereich wird jedoch nicht neu fokussiert, und wir sehen, dass dieser Fehler in der Konsole keine Eigenschaften ohne Lesefokus lesen kann , es sei denn, in der Ansicht Notizen Punktansicht , nachdem wir die Notizen zu den Notizen hinzugefügt haben sind direkt im Laden. Wir verwenden diese Vorlage ref, neue Notiz ref, um das Textbereichselement zu greifen und es dann zu fokussieren. Nun, diese Vorlage ref, neue Notiz href existiert nicht mehr in dieser View Notes Komponente. Also lassen Sie uns diese Konstante hier entfernen, die wir für die Vorlage ref eingerichtet haben. Entfernen Sie auch diese Zeile , in der wir den Textbereich fokussiert haben, und finden Sie einen anderen Weg, dies zu tun. Eine Sache, die wir stattdessen tun könnten, ist, eine Vorlage zu der Komponente Notiz hinzufügen hinzuzufügen , die wir hier anzeigen. Verwenden Sie diese Vorlage ref, um Zugriff auf die untergeordnete Komponente ungerade Bearbeitungsnotizen zu erhalten , und lösen Sie dann eine Methode aus, die innerhalb der Komponente Add Edit No.2 eingerichtet ist. Fügen wir dieser Komponente einen Verweis hinzu. Und wir nennen es Add, Edit, Notiz , Ref, speichern das und wir springen nach unten. Wir müssen Daten begleichen diese auch mit dem gleichen Namen aufzeichnen. Wir erstellen also eine Konstante namens Notiz bearbeiten HREF, die auf eine Datenreferenz mit einem Anfangswert von null festgelegt wird. Nun, in unserer Notizmethode hier, nachdem wir die neue Notiz, die den Textbereich löschen , gelöscht haben, können wir dann auf die untergeordnete Komponente beim Bearbeiten der Notiz zugreifen , indem wir diese Vorlage verwenden href, wir können bearbeiten notieren Sie den Referenzpunktwert für den Zugriff auf diese Komponente. Und wir können dann eine Methode auslösen , die sich in dieser Komponente befindet. Nehmen wir an, wir möchten eine Methode namens Fokus-Textbereich auslösen . Wir können das so machen. Jetzt haben wir diese Fokus-Textbereichsmethode noch nicht eingerichtet. Speichern wir das also und springen, um die Punktansicht für die Bearbeitungsnotiz hinzuzufügen . Richten Sie diese Methode ein. Beginnen wir hier einen neuen Abschnitt mit einem Kommentar, der besagt, dass Fokus-Textbereich diese Methode erstellt. Also const, Fokus-Textbereich entspricht einer Pfeilfunktion. Im Moment melde ich mich einfach im Fokus-Textbereich aus. Spar dir das auf. Mal sehen, ob diese Methode im Textbereich des Fokus der untergeordneten Komponente erfolgreich durch die Punktansicht der übergeordneten Komponente ausgelöst wird . Lasst uns nachladen. Diese Methode sollte ausgelöst werden, nachdem wir eine neue Notiz hinzugefügt haben. Geben wir also ein paar Texte ein. Klicken Sie auf den Button. Das hat nicht funktioniert und wir sehen diesen Fehler. Add, Bearbeiten-Referenzpunktwert, punktfokussierter Textbereich ist keine Funktion. Es ist nicht in der Lage, diese Funktion zu finden , die wir gerade in der untergeordneten Komponente eingerichtet haben. Und das liegt daran, dass wir, wenn wir das Skript-Setup-Pattern verwenden , tatsächlich alle Methoden verfügbar machen müssen, die einer übergeordneten Komponente der Komponenten zur Verfügung gestellt werden sollen. Wir tun dies, indem die Methode define expose verwenden, und wir geben ein Objekt hinein. Wir möchten hier nur alle Methoden hinzufügen, die wir dieser übergeordneten Komponente zur Verfügung stellen wollten . Wir möchten die Fokus-Textbereichsmethode verfügbar machen, Wir möchten die Fokus-Textbereichsmethode verfügbar machen damit wir hier einfach den Fokus-Textbereich hinzufügen können. Also lasst uns das speichern und sehen, ob das funktioniert. Tippen Sie eine Notiz ein und drücken Sie den Knopf. Aber das funktioniert jetzt, wir können sehen Fokus-Textbereich gesperrt wird. also unsere übergeordnete Komponente bemerken, Wenn Sie also unsere übergeordnete Komponente bemerken, dass die Punktansicht diese Fokus-Textbereichsmethode für ihre untergeordnete Komponente erfolgreich auslöst diese Fokus-Textbereichsmethode , um die Notenpunktansicht zu bearbeiten. Jetzt müssen wir nur noch tun, um diesen Textbereich zu fokussieren, eine weitere Vorlage zu diesem Textbereich hinzuzufügen und diese dann zu verwenden, um ihn hier zu fokussieren Lassen Sie uns zum Textbereichselement nach oben scrollen. In diesem Textbereich hat noch ein Dach darauf, bevor diese neue Notiz gut verweist, dieser Textbereich ist nicht mehr nur für neue Notizen gedacht. Es wird auch nützlich sein, Notizen zu bearbeiten. Benennen wir dies in Textbereich um href, was etwas allgemeiner ist, und wir verwenden diese href, um den Textbereich zu fokussieren. Springen wir zu unserer Fokus-Textbereichs-Methode. Wir müssen auch eine Datenreferenz für diese Vorlage Rough mit dem gleichen Namen einrichten . Also wollen wir den Const Textbereich HREF machen, auf ein Rough mit einem Anfangswert von null festgelegt wird. Lassen Sie uns einfach prüfen, ob wir die Ref-Methode aus der Ansicht importieren , und das sind wir nicht. Fügen wir einfach oben einen Eingabebereich hinzu. Ich importiere aus der Sicht, springe zurück zu unserer Methode. Um nun Zugriff auf das Textbereichselement zu erhalten, können wir einfach den Referenzpunktwert des Textbereichs erstellen. Und um es zu fokussieren, können wir einfach die Fokusmethode abfeuern. Konzentrieren Sie sich also, sagen Sie das und hoffentlich sollte das jetzt funktionieren, tippen Sie ein und Sie merken, drücken Sie den Knopf an. Ja, es hat funktioniert. Wir haben die neue Notiz hinzugefügt. Wir können es auf der Seite sehen und wir haben auch den Textbereich gelöscht, auch unkonzentriert. 88. Benutzerdefinierte Farbe, Platzhalter und Label: Lassen Sie uns unsere neue wiederverwendbare Komponente in der Ansicht „Notiz bearbeiten“ zu unserer neuen Notizseite bearbeiten hinzufügen. Ich gehe zu Notizen, in denen wir gerade die Komponente Notiz hinzufügen verwenden. Und ich kopiere einfach diese Nähe , die in die neue Ansicht gesprungen ist, zeige „ nope-Punkt-Ansicht bearbeiten“. Und das fügen wir in dieses Div ein. Und lassen Sie uns vorerst einfach den gesamten dynamischen Inhalt entfernen. Also entferne ich das V-Modell, entferne den Click-Handler oder das deaktivierte Attribut und speichere das. Jetzt müssen wir diese Komponente importieren , bevor wir sie verwenden können. Fügen wir unsere Skript-Setup-Tags hinzu. Fügen Sie unseren Abschnitt „Eingaben“ hinzu, und wir geben Bearbeiten ein, Notiz aus Schrägstrich-Komponenten, Schrägstriche hinzufügen, bearbeiten, notieren , Vue punkten, speichern Sie das. Wir können diese Komponente jetzt auf der Seite sehen. Ich sehe hier eine Warnung in der Konsole. Mir fehlt der erforderliche Prop-Modellwert. Und das liegt daran, dass diese Komponente zum Bearbeiten der Notenpunktansicht die modale Wertestütze oder die V-Modell-Requisite erwartet, und dies ist auf eine erforderliche Requisite festgelegt. Lassen Sie uns eine grobe Q-Edit-Notenpunktansicht einrichten , die wir in unserem Script-Abschnitt an diese Edit-Notiz-Komponente binden können , viele neue Kommentare, die Hinweis besagt. Wir richten eine Referenz mit dem Namen Notizeninhalt ein. Stellen Sie das auf eine href mit einem Anfangswert einer leeren Zeichenfolge ein, da wir die Ref-Methode verwenden, müssen wir dies importieren. Importieren wir also ref aus der Ansicht. Und jetzt können wir dieses Floß an unsere Komponente Notiz hinzufügen binden . Wir können jetzt V-Modell hinzufügen. Denken Sie daran, dass wir nur das V-Modell hinzufügen müssen , da wir diese Anzeigenbearbeitungsnotizkomponente bereits so eingerichtet haben diese Anzeigenbearbeitungsnotizkomponente bereits so eingerichtet V-Modell, das wir in diese Komponente übergeben, automatisch mit der modalen Wertestütze abzurufen in diese Komponente übergeben, automatisch mit der modalen Wertestütze und aktualisieren Sie automatisch das V-Modell, das sich auf dem Komponentenpaar befindet, indem Sie die Wertereignisse des Update-Modells verwenden. Alles, was wir jetzt tun müssen, um hoffentlich Seife zu binden, ist einfach dieses Notenkonzept an diese Komponente zu binden. Also setzen wir dieses V-Modell so ein, dass es Inhalte notiert und speichert. Und lasst uns einfach sicherstellen, dass sich das anschließt. Ich lege hier ein paar SMS rein. Wir können das Update im Textbereich sehen. Lassen Sie uns das auf eine leere Zeichenfolge zurücksetzen und speichern diese. Ändern wir den Text auf dieser Schaltfläche hier wird diesen Text ändern , um Notiz zu sagen, speichern Sie das. Jetzt möchte ich, dass diese Karte , die unseren Textbereich in einer Schaltfläche umgibt , eine andere Farbe hat wenn wir uns auf der Bearbeitungsseite befinden. Es sieht also ein bisschen anders aus der Kartentextbereich und der Schaltfläche auf der Notizseite. Wenn wir unsere wiederverwendbare Komponente öffnen Notenpunktansicht zu bearbeiten, können wir sehen, dass diese Klasse auf der Karte einen Hintergrunderfolg hat. Wir können dieses Wort Erfolg ändern , um verschiedene Farben zu erzeugen. Zum Beispiel können wir dies ändern, um Hintergrundlink dunkel zu haben, um ihm diese blaue Farbe zu geben Lassen Sie uns eine Requisite für diese Notenpunktansicht-Komponenten hinzufügen einrichten , damit wir dieses Wort hier dynamisch ändern können . diejenigen, die die Farbe ändern. Ich setze das vorerst wieder zum Erfolg zurück und speichere das auf. Jetzt springen wir zu unseren Requisiten und wir richten eine neue Requisite namens BG color ein. Wir setzen den Typ auf String. Ich bekomme auch einen Standardwert. Wenn wir diese Requisite nicht für eine übergeordnete Komponente bereitstellen , können wir immer noch eine Hintergrundfarbe auf dieser Karte haben , um den Standardwert auf Erfolg zu setzen. Das hebe ich dir auf. Und jetzt springen wir zu diesem Div mit der Kartenklasse. Ich teile die Attribute darauf auf und ich werde den Erfolg dieses Hauses im Hintergrund schneiden , dunkles Glas. Ich binde mich an das Klassenattribut. Ich verwende hier eine Vorlagenzeichenfolge, die Backticks verwendet , damit wir das Konzept dieser Requisite ausgeben oder in die Klasse einfügen können das Konzept dieser Requisite ausgeben oder in die Klasse einfügen , die wir kopiert haben, hat Hintergrunderfolg, dunkel. Lassen Sie uns einfach das Wort Erfolg und unsere geschweiften Dollarklammern loswerden und stattdessen unsere Requisite ausgeben BG-Farbe. Wir können entweder Requisiten Dot BG Farbe machen, oder wir können einfach VG-Farbe machen. Ich speichere das Nachladen auf. Und wir können sehen, dass wir die Standardhintergrundfarbe sehen, wenn wir diese BG-Farbstütze für diese Add Edit no Component nicht bereitstellen Standardhintergrundfarbe sehen, wenn wir diese BG-Farbstütze für diese Add Edit no , wenn wir sie für ein Paar Komponenten verwenden , wenn wir diesen Standardwert in der Requisite verwenden, die wir hier festgelegt haben. Wir sollten jedoch in der Lage sein, dieses Wort erfolgreich zu überschreiben, indem wir diese Requisite die Komponente Notiz hinzufügen wenn wir sie in einer übergeordneten Komponente verwenden. Springen wir also zur Ansicht Notenpunktansicht bearbeiten. Ich bin eine Menge diese Requisite zu unserem Add Edit. Keine Komponente hier wird die BG-Farbe festlegen, und wir setzen diese auf Link, speichern Sie das. Und wir sehen jetzt diese blaue 11. Und wenn wir es untersuchen, können wir sehen, dass die Karte, wie ist diese Klasse Hintergrund-Link-Dokument hat. Aber wenn wir zur Notizseite gehen und diese Karte überprüfen, können wir sehen, dass die Klasse Hintergrunderfolg hat, dunkle Hintergrundfarbe funktioniert. Lassen Sie uns jetzt auch Notizen speichern, aber sie haben auch die gleiche Farbe. Das gespeicherte Notizbuch und er ist hier. Lasst uns also auch diese Klasse ändern, hat einen Hintergrundlink statt Erfolg. Spar dir das auf. Und wir haben jetzt einen blauen Knopf, während wir dabei sind. Deaktivieren wir diese Schaltfläche , wenn dieses Feld leer ist. Wieder ohne das deaktivierte Attribut bedingt nur dann, wenn kein Inhalt leer ist. Wir setzen dies also so ein, dass der Inhalt nicht notiert wird. Spar dir das auf. Diese Schaltfläche ist standardmäßig deaktiviert, aber wenn wir etwas eingeben und es wieder aktiviert wird, müssen wir diesen Platzhaltertext auch im Textbereich anpassbar machen diesen Platzhaltertext auch im Textbereich , da der Text Eine neue Notiz hinzufügen macht auf dieser Seite keinen Sinn. Weil dieser Textbereich dazu dient, eine Notiz zu bearbeiten oder keine neue Notiz hinzuzufügen. Fügen wir eine weitere Requisite hinzu, fügen Sie Notizpunktansicht für diesen Platzhaltertext hinzu , der derzeit nur fest im Textbereich codiert ist, eine neue Requisite namens Platzhalter einzurichten. Sie sich auf eine Art von String aus. Wir geben diesem einen Standardwert von sagen wir, geben Sie etwas ein, Punkt, Punkt, Punkt, speichern Sie das. Jetzt verwenden wir diese Requisite in unserem Textbereich. Wir können einfach an das Platzhalterattribut binden und diese Requisite dann ausgeben, entweder mit Requisiten Punktplatzhalter oder nur Platzhalter. Ich speichere das Nachladen auf. Wir können jetzt den Standardwert von Ding-Typen im Platzhalter sehen , aber wir sollten dies jetzt überschreiben können, indem wir diese Platzhalterstütze an unsere Art-Edit-Notenkomponente übergeben diese Platzhalterstütze an unsere Art-Edit-Notenkomponente unsere Art-Edit-Notenkomponente wenn wir verwenden es auf einer unserer Seiten, Lasst uns zur Ansicht springen, nein bearbeiten, Punktansicht. Und wir fügen diese Platzhalterstütze, Platzhalter hinzu. Wir könnten dies festlegen, um es zu bearbeiten, zu notieren , zu speichern, und das sagen wir im Textbereich. Wenn wir nun zurück zu unserer Notizseite springen , sagt immer noch ein paar Dinge ein. Lassen Sie uns das auch überschreiben. Also öffnen wir View notes dot Vue wird diese Platzhalterstütze auch hier zu unserer Notenkomponente Kunst bearbeiten haben diese Platzhalterstütze auch hier . Also Platzhalter, fast zumindest um eine neue Notiz hinzuzufügen, speichern Sie diese und wir sehen dieses Update. Ich möchte auch eine Beschriftung oben in unserem Textbereich anzeigen können , um die Funktion dieses Textbereichs etwas klarer zu gestalten . Lassen Sie uns zuerst das Markup dafür einrichten. Also springe ich, um edit app.vue hinzuzufügen. Und oben in unserem Kartenelement über diesem Feld füge ich ein Label mit einer Etikettenklasse hinzu. Im Moment entferne ich das für Attribut. Ich setze den Text vorerst einfach auf beschriftete Texte. Spar dir das auf. Lass uns das weiß machen. Also eine Menge Klasse von Texten weiß, um es weiß zu machen. Und wieder stammen diese Klassen nur von Bohmer und ich möchte, dass dieses Label optional ist. Also lasst uns eine weitere Requisite dafür begleichen . Wir richten eine Requisite namens Labelbeginn nicht auf eine Art von String ein. Und heb dir das auf. Und ich möchte dieses Labelelement nur auf der Seite anzeigen , wenn diese Requisite bereitgestellt wurde. Also werde ich die Attribute dazu aufteilen, oder wir können einfach eine v-if-Direktive hinzufügen, und wir möchten dies nur anzeigen, wenn die Label-Requisite bereitgestellt wurde, können Sie entweder v tun, wenn Sie Punkt auffordern beschriftet oder einfach nur vf Label. Also speichere ich das und wir sehen, dass die Bezeichnung verschwindet, da wir diese beschriftete Requisite nicht wirklich für diese Komponente hinzufügen „Bearbeiten“ bereitstellen , wenn wir sie hier auf unserer Bearbeitungsseite verwenden, was passiert, wenn wir dies hinzufügen Hier beschriftete Requisite, Label? Wir könnten dies festlegen, um Notizen zu bearbeiten, speichern und neu zu laden. Wir können das Label jetzt wieder sehen, da wir diese Requisite bereitstellen, obwohl es nicht den Wert anzeigt , den wir hier übergeben Gehen wir zurück zur Punktansicht „Notiz bearbeiten“, und wir können gib einfach den Inhalt dieser Requisite hier aus. Wir können beschriftete Texte einfach durch doppelte geschweifte Klammern ersetzen und mit der Beschriftung speichern versehen. Und wir sehen jetzt Notizen bearbeiten. Und wenn wir zurück zur Notizenansicht springen und dieses Label nicht sehen, da wir diese beschriftete Requisite nicht auf der Seite „Notizen anzeigen“ hier bereitstellen . Der Grund, warum ich denke, dass wir hier eine Beschriftung benötigen ist, dass der Benutzer, wenn er auf Notizen bearbeiten klickt , hier kein leerer Textbereich angezeigt wird. Sie werden diesen Textbereich sehen, der mit der Notiz gefüllt ist. Und so werden sie diesen Platzhalter nicht sehen. Dies gibt dem Benutzer also nur ein bisschen mehr Klarstellung bevor wir fortfahren und hinzufügen, und Sie gelangen zu unserem Meinungsspeicher, um den Inhalt der Notiz zu erhalten , die der Benutzer ist versuche zu bearbeiten. Fügen Sie eine Aktion zum Aktualisieren der Notiz hinzu. Fügen wir hier einfach einen Abbrechen-Button hinzu , der uns zurück zur Notizseite führt. Da gibt es derzeit keine Möglichkeit für den Benutzer, sich vom Klick auf die Tafel zurückzuziehen. Was Sie also in unserem Schaltflächen-Slot anzeigen möchten , fügen wir einfach einen weiteren Button hinzu. Also dupliziere ich diese gespeicherte Notiz. Entferne die Deaktivierten, Requisite hat den Text in „Counsel“ geändert. Spar dir das raus. Ich werde diese Klasse ändern, mit dem der Hintergrund verknüpft ist, dass der Strich ihm gerne diese hellgraue Farbe gibt. Jetzt gibt es mehrere Möglichkeiten , wie wir den Benutzer zurück zur Notizseite schicken können , wenn er darauf klickt. Eine Sache, die wir tun könnten, ist, diese Schaltfläche in eine Router-Link-Komponente zu konvertieren in eine Router-Link-Komponente und die beiden Requisiten auf slash, speichere das und sieh nach, ob das funktioniert. Das funktioniert. Die andere Sache, die wir tun könnten, ist, dies als Schaltfläche zu belassen und diesem Klick einen Klick-Handler hinzuzufügen. Und wir könnten die Dollar-Router-Methode verwenden, da wir die Dollar-Router-Methode in unseren Vorlagen immer noch verwenden können die Dollar-Router-Methode in , indem wir die Kompositions-API verwenden. Also können wir entweder Dollar-Router-Punkt machen, drücken, Schrägstrich vorwärts, speichern, das funktioniert. Ja, das funktioniert. Oder wenn unsere App komplizierter war und viele verschiedene Möglichkeiten bietet, auf diese Bearbeitungsseite von verschiedenen Seiten zu gelangen diese Bearbeitungsseite von verschiedenen Seiten zu , an die wir den Benutzer möglicherweise einfach direkt zurücksenden möchten den Benutzer möglicherweise einfach direkt zurücksenden wo auch immer sie herkommen. das zu tun, könnten wir einfach Dollar-Router-Punkt-Klammern machen , diese Nachladung speichern. Das funktioniert auch. 89. Getter – Erhalten Note (useRoute): Wenn der Benutzer auf diese Bearbeitungsschaltfläche klickt , wird dies zu dieser neuen Notizseite weitergeleitet. Und sie werden erwarten, dass der Text der Notiz, auf den sie gerade auf diesen Text geklickt haben, in diesen Textbereich geladen wird. Und wir können dies tun, indem einen Getter in unserem Meinungen Store verwenden. Was wir tun müssen, holen Sie sich die ID der aktuellen Notiz aus unseren Routenparametern, die wir in unserer Adressleiste hier sehen können, ID eins, und senden Sie dann die ID an einen Getter in unserem Geschäft , der dann wird rufen Sie die richtige Notiz aus meinen Notizen ab, die sich direkt in unserem Shop befinden, basierend auf der ID. es zu dieser Ansicht Edit-Notizkomponente zurück, wo wir sie dann diesem Notizen-Inhalt zuweisen können href , der an den Textbereich gebunden ist, denjenigen, die den Textbereich mit den Texten aus der richtigen Notiz füllen . Lassen Sie uns zunächst einfach einen wirklich einfachen Getter einrichten , der nur den Inhalt der ersten Note in unserem Array erhält . Springen wir zu unserem Store-Dateispeicher Node.js. Im Stores-Ordner. Wir scrollen nach unten, um ein paar Vermutungen hinzuzufügen. Wir müssen nur ein Getters-Objekt hinzufügen. Nach dem Objekt dieser Aktion. Wir können alle unsere Getter hier drin platzieren. Es kommt raus. Wir haben gerade eine Immobilie mit dem Namen des Ghettos w1 gegründet, oder wir könnten es als Notizeninhalt bezeichnen. Und dann weisen wir diese Eigenschaft einer solchen Methode zu, damit dies erreicht wird, ich kann Zugang zum US-Bundesstaat bekommen, wir müssen den Staat so in dieses Ghetto übergeben. Getter müssen immer etwas wie berechnete Eigenschaften zurückgeben . Lassen Sie uns vorerst einfach den Inhalt aus der ersten Note im Notes Array in unserem Bundesstaat zurückgeben . So können wir dies aus Statuspunktnoten und dann eckigen Klammern 0 abrufen , um den ersten Notenpunkt-Inhalt zu erfassen Lassen Sie uns den Inhalt dieses ersten Knotens abrufen. In unseren Eingeweiden. Alles, was wir tun müssen, ist Statuspunktnoten, eckige Klammern 0 zurückzugeben , um den ersten zu erhalten, Punktinhalt und speichern. Wir sollten diesen Getter jetzt überall in unserer App verwenden können . Verwenden wir es also in Ansicht, Notenpunktansicht bearbeiten. Wir müssen unseren Shop importieren. Wir müssen also US-Store-Notizen aus Schrägstrich-Store-Notizen importieren . Dass wir diese beiden Konstanten zuweisen müssen , damit wir darauf zugreifen können. Eine Menge neuer Kommentar , der „Store“ sagt. Ich werde eine Konstante namens Store-Notizen einrichten. Stellen Sie das gleich ein, um Klammern für Store-Notes zu verwenden. Und lasst uns das ein bisschen nach oben bringen. Ich schneide das ab und füge es nach unseren Importen ein. Jetzt können wir den Getter in unserem Shop verwenden , um dieses Konzept von der ersten Notiz an zu erfassen und es dieser Notizeninhaltsreferenz zuzuweisen, die zeigte, dass der Textbereich aktualisiert wird. Um auf unser Ghetto zuzugreifen. Wir können einfach Notizenpunkt speichern und dann lautet der Name unseres Getters Notizeninhalte. Wir möchten dies nur dieser Notiz Content ref zuweisen, also können wir einfach notieren, dass der Inhaltspunktwert gleich ist. Also lasst uns das jetzt speichern, neu laden und das scheint nicht zu funktionieren. Werfen wir einen Blick in unsere Konsole sehen keine Fehler. Werfen wir einen Blick auf unsere Store-Akte. Stellen Sie einfach sicher, dass die App läuft. Es läuft es Hilfe wenn wir tatsächlich auf der Bearbeitungsseite waren. Klicken wir also auf eine Schaltfläche „Bearbeiten“. Wir können sehen, dass die Texte von der ersten Notiz in diesen Textbereich geladen werden. Wir möchten jedoch nicht nur den Text aus dem ersten Noten-Array abrufen . Wir müssen in der Lage sein, den Inhalt aus den Notizen basierend auf der ID der Notiz zu beziehen, auf die sie gerade geklickt haben. Wenn wir auf dem zweiten Knoten auf Bearbeiten klicken, gehen wir davon aus, dass der Inhalt dieser Notizen hier geladen wird. Wir können die ID , die an diese Seite übergeben wird, mithilfe unserer Routenparameter, die wir zuvor gesehen haben, abrufen diese Seite übergeben wird, mithilfe unserer Routenparameter, die wir zuvor gesehen haben , dass wir diese mithilfe des Dollar-Routenobjekts in unserer Vorlage aufteilen können . Fügen Sie danach Bearbeitungsnotizen hinzu, ich füge einfach ein Vor-Tag, doppelte geschweifte Klammern und dann Dollar-Routen-Punkt-Params hinzu. Und dann der Name unserer Parameter-ID. Wir müssen diese ID an unseren Getter weitergeben, damit ich den Inhalt für die richtige Notiz erhalten kann. Dies müssen wir jedoch in unserem Skriptbereich tun. Und wir können auf unsere Routeninformationen im Skriptbereich mit den Dollarrouten-Objekten zugreifen . Wenn wir die Kompositions-API verwenden, müssen wir Vue-Routen als neue US-Routen verwenden. Also lasst uns diesen Vorgespräch einfach entfernen. Nach diesem Import importieren wir US-Route vom View-Dash-Router. Und dann eine Menge Kommentar hier, der nur Router sagt. Wir müssen diesen Benutzer out Composable einer konstanten oder variablen zuweisen . Also richten wir eine Konstante ein, die Routen genannt wird. Stellen Sie das gleich ein, um Routenklammern zu verwenden. Und wir können jetzt auf dieselben Routeninformationen zugreifen, die wir gerade aufgeteilt haben, bevor wir diese Routenkonstante verwenden. Mal sehen, ob wir diesen Routenparameter abmelden können, diesen ID-Parameter f. Richten wir dieses Notenkonzept ein href. Wir loggen uns einfach console.log aus, leiten Dot Params Dot ID aus, speichern Sie das. Und doch können wir sehen, dass id2 ausgesperrt wird. Und wenn wir zur Notizseite zurückkehren, klicke ich in der ersten Notiz auf Bearbeiten und wir sehen, dass ID1 gesperrt ist. Wie können wir den Wert dieser ID an Getter übergeben? 90. Getter (mit Parametern) – Erhalten sie Note: Wie können wir diese ID an unseren Getter weitergeben? Sie könnten vielleicht denken, dass wir einfach Klammern starten könnten, um ein hier zu bekommen und es so weiterzugeben, Punkt-Parameter Punkt-ID weiterleiten, speichern Sie das, springen Sie dann zu unserer Store-Datei, runter zu r, steht auf und vielleicht darüber hinaus in als zweiter Parameter. Wir können sehen, dass das nicht funktioniert. Wir sehen einen Fehler in der Konsole. Stola Notizen erhalten keinen Inhalt ist keine Funktion. daran, dass dieser Getter keine Funktion ist, sondern nur eine Objekteigenschaft , die einer Funktion zugewiesen wird. Was wir durch das Ausstellen umgehen können, erhält eine Rückkehr, eine Funktion mit dem Parameter , den wir durchlaufen. Lassen Sie uns diesen ID-Parameter loswerden und diese Rückgabezeile loswerden. Was wir tun können, ist einfach eine Pfeilfunktion wie diese zurückzugeben . Geben Sie den Parameter hier ein. Also mal sehen, ob wir das jetzt aussperren können. Konsolenpunkt protokolliert die Menge der String-ID von Geta colon und teilt dann diesen ID-Parameter auf. Also speichere ich das Nachladen auf. Wir können sehen, dass das funktionierende ID von Getter ID1 ist. Wir sehen hier eine Warnung, aber machen Sie sich darüber keine Sorgen. Das liegt nur daran, dass Getter im Moment eine Funktion zurückgibt oder nicht eine Zeichenfolge. Wir weisen diesen Notizeninhalt href zu , der übergeben wird, um eine Bearbeitungsnotiz im V-Modell hinzuzufügen, die Modellwertstütze diese Komponente eine Zeichenfolge erwartet. Also werden wir sehen, wie das verschwindet wenn wir hier zur Arbeit kommen. Lasst uns zurück zum Speichern von Node.js springen. Und jetzt können wir diese ID verwenden, um die richtige Notiz dieser Inhaltseigenschaft aus dem notes-Array in unserem Bundesstaat abzurufen. Wir können also den Filter verwenden, um dies zu tun. Innerhalb dieser Methode hier werden wir die Noten zurückgeben, also geben Sie Punktnoten an. Aber dann werden wir es mit der Filtermethode filtern. Strecken wir das ein bisschen aus. Dies wird jedes Element in unserem Array durchlaufen. Wir benötigen einen Platzhalter für jedes Element, während es durchläuft. Dafür benutzen wir eine Notiz. Dann fügen wir einen weiteren Pfeil hinzu. Leute sollten unsere Kriterien für die Notizen angeben , die wir ergreifen möchten. Und wir möchten die Notizen zuschneiden, bei denen die ID-Eigenschaft der ID-Eigenschaft entspricht , die wir hier von unserer Notizseite bearbeiten aus übergeben . Wir möchten Notizen zurückgeben, bei denen die ID gleich ID ist. Da alle unsere IDs eindeutig sein werden, wird ein Array zurückgegeben, das nur das Objekt enthält, nach dem wir suchen. Da dies ein Array sein wird, müssen wir das erste und einzige Element aus dem Array abrufen , indem wir eckige Klammern 0 hinzufügen. Und dann wollen wir die Concept-Eigenschaft löschen , damit wir einfach Punktinhalt erstellen können. Lasst uns das speichern und sehen, ob das funktioniert. Lade die Seite neu. Ich habe keine Schrägstrich-ID eins bemerkt. Und wir sehen das Konzept aus den Notizen mit einer ID eins. Und wenn wir zur Notizseite zurückkehren, klicken Sie in der zweiten Notiz auf Bearbeiten, dann sehen wir den Inhalt der zweiten Notiz, wobei id2 in den Textbereich geladen wird. 91. Action – Hinweis aktualisieren: Wenn der Benutzer diese Notiz ändert und auf Speichern klickt, möchten wir die Concept-Eigenschaft der richtigen Notiz in unserem Status mit dem neuen Inhalt aktualisieren der richtigen Notiz in unserem Status , den er eingegeben hat. Lassen Sie uns zunächst eine lokale Methode auslösen. Wenn wir auf die Schaltfläche Speichern klicken, gehe ich zum Edit-Notizpunkt Vue entferne dieses Konsolenprotokoll hier. Springen wir zu unseren gespeicherten Notizbüchern in Tierzellen. Ein bisschen Rand zwischen diesen Schaltflächen hinzuzufügen, ist tatsächlich auf der Konsolenschaltfläche zulässig. Drei, sagen wir vielleicht zwei. Und es sieht ein bisschen besser aus. Fügen wir nun einen Klick-Handler zu diesen gespeicherten Notizbüchern in hinzu. Klicken Sie also gleich aus, wird eine Methode namens Handle Save ausgelöst, auf die geklickt wird. Und lasst uns diese Methode erstellen. Viele neue Kommentare hier, der besagt , dass Speichern geklickt hat, richtet unser Methodenhandle speichern geklickt auf Sub I gleich einer Pfeilfunktion. Loggen Sie sich einfach aus. Handle speichern, vorerst geklickt, speichere das, klicke auf die Schaltfläche. Wir können sehen, dass das ausgesperrt wird. Wir werden zu diesem Zeitpunkt eine Aktion in unserem Shop auslösen , um zu aktualisieren die Notizen und Notizen im Zustand sind. Welche Informationen wird diese Aktion benötigen, um dies zu tun? Nun, es wird die ID der Notiz benötigen, damit wir herausfinden können , welche Notizen im Array tatsächlich aktualisiert werden sollen. Und es wird auch die neue Inhaltszeichenfolge benötigen . Es gibt also mehrere Möglichkeiten, diese Informationen an eine Aktion in unserem Geschäft weiterzugeben . Also könnten wir ein Objekt einrichten. Wir könnten es Payload nennen oder so ähnlich. Wir könnten dieser ID ein paar Eigenschaften hinzufügen, die wir wieder von unseren Streckenversprechen erhalten können. So leitet dot params punkt-ID und dann eine Konzepteigenschaft, die wir einfach von dieser Notizeninhalt href abrufen können , die an den Textbereich gebunden ist. Beachten Sie also den Punktwert des Inhalts Und dann könnten wir diese gesamte Nutzlast einfach als einzelnen Parameter an eine Aktion voller UX übergeben . Nur so konnten wir dies tun, da Aktionen in UX nur einen Parameter akzeptieren können. Wahlen in Kenia können jedoch mehrere Parameter akzeptieren. Die andere Möglichkeit, dies zu tun, besteht darin, die ID für den Inhalt als zwei separate Parameter zu senden . In diesem Fall denke ich, dass wir es so machen sollten , weil es unser Handeln etwas klarer machen wird , weil wir genau sagen können , was hier passiert ist. Lassen Sie uns also diese Option einrichten um eine neue Aktion namens Buchdatum zu erstellen. Beachten Sie, dass dies einen ID-Parameter erhält, den Inhaltsparameter r. Lassen Sie uns diese einfach sperren. Ich melde die ID ab. Dann loggen wir auch den Konzeptparameter aus. Spar dir das auf. Lasst uns nun hier den Sauerstoff auslösen und unsere Aktion wird bei Stolen von Notizen, Punkten, Update, Notiz sein, denn dies ist der Name, den wir hier unsere Aktion gegeben haben. Und dies wird einen ID-Parameter für den Konzeptparameter erwarten . Die ID, die wir von unseren Routenparametern ablegen werden, stoppen Routen Rams Punkt-ID. Und dann das Konzept, das wir gerade aus diesem Notizeninhalt beziehen werden href , der an den Textbereich gebunden ist. So können wir das aus dem Punktwert des Noteninhalts erhalten. Jetzt speichern wir das und sehen, ob diese beiden Parameter zu dieser Aktion kommen. Erneut laden, Inhalt ändern und auf Speichern klicken. Und doch können wir sehen, dass diejenigen durch unsere Aktion ausgesperrt werden. Sie können sehen, dass die ID den aktualisierten Inhalt gesperrt wird, der ebenfalls gesperrt wird. Jetzt müssen wir nur noch die richtigen Notizen in unserem Bundesstaat aktualisieren . Und eine Möglichkeit, dies zu tun, besteht darin, zuerst den Index oder die Position der Noten in unserem Array mithilfe der find-Indexmethode herauszufinden. Und dann können wir einfach die Notizen rechts an dieser Position aktualisieren und die Content-Eigenschaft aktualisieren. Zunächst einmal greifen wir einfach den Index der Notizen , die wir aktualisieren möchten. Also richte ich eine Variable mit dem Namen Index ein. Und dann werden wir die Bind-Indexmethode auslösen auf der unsere Notizen stimmt. Und wir können an diesen Punktnoten zu unserem Noten-Array gelangen. Also können wir diese Punktnoten machen, Punktsuche, Index. Und wieder verwenden wir Notizen als Platzhalter, während sie unser Array durchlaufen. Stellen Sie das auf eine Pfeilfunktion ein. Und wir möchten den Index der Notiz zurückgeben, bei dem die ID der Notiz dieser Idee entspricht , die wir an diese Aktion übergeben, gleich Id. Und tatsächlich denke ich, dass wir ihm das einfach erschießen können , indem diese geschweiften Klammern und das Wort Rückkehr entfernen. Mal sehen, ob das funktioniert. Außerdem mache ich das Gleiche mit diesem Filter hier unten, kann dies zeigen, indem ich die Klammern entferne auf diese schließenden Klammern zurückkehre, da wir hier nur eine Zeile abfeuern. Loggen wir uns einfach diesen Index aus und sehen , ob das funktioniert. Index. Speichern Sie das, laden Sie die Seite neu und ändern Sie sie und klicken Sie auf Speichern. Wir können sehen, dass der Index hier auf eins gesetzt ist, was richtig ist, weil das unsere zweite Note ist. Wenn wir zur ersten Note zurückkehren, nehmen Sie eine Änderung vor und klicken Sie auf Speichern. Lassen Sie mich sehen, dass Index 0 ausgeloggt ist. Okay, jetzt, da wir den Index der Notizen haben , die wir aktualisieren möchten, und unser Notes-Array, können wir die Notiz jetzt aktualisieren. Scrollen wir also nach unten zu unserer Update-Aktion. Ich werde diese console.logs loswerden, Zugriffsnotizen, Array. Wir können diese Punktnoten einfach machen. Und um dann auf die Noten an der Position des Index zuzugreifen, können wir einfach eckige Klammern Index ausführen. Dann möchten wir auf die Concept-Eigenschaft zugreifen und sie auf diesen Inhalt festlegen wir an diese Aktion weiterleiten. Stellen Sie das also auf Inhalt ein und entfernen Sie dieses Konsolenprotokoll. Mal sehen, ob das funktioniert. Also lade ich neu, ändere ein neues Konzept. Klicken Sie auf Speichern. Wenn wir nun auf Abbrechen klicken, können wir sehen, dass die erste Notiz mit dem neuen Inhalt aktualisiert wurde . Stellen wir sicher, dass es auch in der zweiten Notiz funktioniert, klicken Sie auf Neuen Inhalt bearbeiten, klicken Sie auf Speichern und klicken Sie auf Abbrechen. Dieser Knoten wurde ebenfalls aktualisiert. Wenn der Benutzer jedoch auf dieser Schaltfläche auf Speichern klickt, möchten wir ihn nicht auf dieser Seite belassen. Wir möchten sie wirklich zurück auf die Notizseite umleiten. Lass uns das als Nächstes machen. Aber bevor wir weitermachen, habe ich gerade gemerkt, dass es hier eine weitere Rückgabeerklärung gibt, die wir abkürzen können. Ich werde diese geschweifte Klammer bei der Rückkehr in unserer Löschnotizaktion entfernen . Und ich entferne die schließende geschweifte Klammer nicht auch. Werfen wir einen Blick auf die seltsame Notiz. Das ist okay wie es ist. Lasst uns das aufheben. 92. useRouter – Weitergeleitet auf die Seite der Notenseite: Lassen Sie uns den Benutzer zurück zur Notizenansicht leiten. Nachdem diese Notiz gespeichert wurde. Springen wir zur Ansicht Notenpunktansicht bearbeiten. Wir müssen dies in unserem Skriptbereich tun. Nach dieser Zeile. In der Options-API könnten wir diesen Dot-Dollar-Router einfach machen. Sie dann nicht und schieben Sie sie nicht zum Pfad-Schrägstrich. Während der Kompositions-API wird das nicht funktionieren. Also lasst uns das loswerden. Und wir müssen den US-Router Composable von Vue Router importieren . Lasst uns hier nach oben springen , wo wir die Use-Route importieren. Wir können einfach den Router verwenden wir diesem eine Konstante zuweisen müssen , bevor wir ihn verwenden können. Also können wir das tun, nachdem wir eingerichtet haben, verwende ich die Routenkonstante. Wir können einfach einen Const machen, benutzen. Const-Routen verwenden gleich Router. Wir können jetzt auf die gesamte übliche Route zugreifen. Also Methoden wie Porsche und ersetzen mit dieser Konstante zurück. Also jetzt runter, um die gespeicherte geklickte Methode zu behandeln. Nachdem wir die Notiz aktualisiert haben, können wir einfach Router Dot Push machen sie zurück zur Notizseite schieben, die sich am Pfad-Schrägstrich befindet. Lasst uns das speichern und sehen, ob das funktioniert. Laden Sie die Seite neu, geändert, der Inhalt kann gespeichert werden, aber wir sind wieder in der Liste der Notizen. Wir können sagen, dass ein Knoten aktualisiert wurde. 93. Mehr Getter und Stats Seite: Um weiter zu demonstrieren, dass unser Meinungsspeicher, kann Store Node.js überall in unserer App verwendet werden. Lassen Sie uns eine neue Seite erstellen, eine Statistikseite, wir dafür bereits eine Seite auf einer Route eingerichtet haben. Lassen Sie uns auf dieser Seite eine Tabelle anzeigen, der einige Informationen zu unseren Notizen angezeigt werden. Wir werden die Gesamtzahl der Knoten, die wir haben, und auch die Gesamtzahl der Zeichen aller unserer Notizen zusammen anzeigen der Knoten, die wir haben, und auch die Gesamtzahl der . Aber bevor wir diese Statistikseite einrichten, habe ich festgestellt, dass dieses mobile Menü nicht verschwindet, wenn wir klicken, um zu einer neuen Seite zu gelangen. Lassen Sie uns einfach schnell zuerst reparieren Genug Bar ist es ein Quellkomponenten-Layout und Navbar? Scrollen wir nach unten zum Skriptbereich. Diese Show mobil genug ref bestimmt, ob das mobile Menü angezeigt wird oder nicht . Wenn ich dies auf „true“ ändere, können wir sagen, dass das mobile Menü standardmäßig angezeigt wird. Ich setze das auf „false“ zurück. Und was wir tun könnten, ist sicherzustellen, dass wir dies wieder auf „false“ setzen , wenn auf einen unserer Links im mobilen Menü geklickt wird. Lasst uns also hier zu A2-Router-Links, Notizen und Statistiken springen . Und wir können beiden einfach einen Klick-Handler hinzufügen. Ich mache hier eine Mehrfachauswahl. Setze meinen Cursor hier neben das Wort Routen-Link. Halten Sie die Alt-Taste gedrückt und setzen Sie dann einen weiteren Cursor neben dieses Router-Link-Öffnungs-Tag, drücken Sie die Eingabetaste. Ich darf auf Handler klicken und wir setzen dieses Showmobile Navi einfach wieder auf false. So können wir einfach anzeigen, dass mobile jetzt gleich falsch ist, speichern Sie das Nachladen und hoffentlich wird dieses mobile Menü verschwinden, wenn wir die Seiten wechseln, und das tut es. Verwenden wir also Ballmers Tabellenkomponente , um einige Daten zu unseren Notizen anzuzeigen. Wir werden nur das Markup dafür einrichten, ich schließe dieses Dateimodul, um Punkte, Seitenaufrufe, Ansicht, Statistiken, Punktansicht zu fragen . Um eine Tabelle mit einigen schönen Stilen hinzuzufügen, müssen wir nur eine normale Tabelle mit einer Tabellenklasse hinzufügen. Lassen Sie uns eine Tabelle mit einer Tabellenklasse innerhalb dieses T-Kopf-Elements auf unserem Körperelement erstellen. Und dann in unserem T-Kopf-Element ohne Reihe. Also TR, Tabellenzeile. Darin bin ich drin. Wir fügen ein paar Th-Zellen hinzu, Tabellenüberschriftenzellen. Im ersten werde ich einfach die Überschrift gestoppt und dupliziere das. Und dann ziehe ich in der zweiten Tabellenüberschrift einfach Wert, speichere das. Und wir können jetzt unsere Tabellenkopfzeile sehen. Dann fügen wir in unserem Körper eine Tabellenzeile hinzu, in der ein paar TDS-Tabellendatenzellen hinzugefügt werden. In der ersten möchten wir den Namen unserer Statistiken angeben. Also gebe ich eine Anzahl von Notizen ein. Und dann werden wir in der zweiten Zelle die tatsächliche Anzahl der Notizen anzeigen, aber im Moment legen wir einfach XXX ein und ich dupliziere diese Tabellenzeile und folge dann dem Namen. Ich setze die Anzahl der Zeichen, Klammern aller Noten. Sagen Sie, um diese Tabelle in voller Breite zu machen, können wir einfach eine Klasse zur Tabelle hinzufügen, die volle Strichbreite gestrichen ist. Das ist nur eine weitere ehemalige Klasse, sagen wir, aber eigentlich denke ich, dass volle Breite ein Wort ist. Also lasst uns den Strich loswerden, heb dir das auf. Und wir haben jetzt eine ziemlich anständig aussehende Tabelle , in der wir diese Statistiken anzeigen können. Lassen Sie uns zuerst einen Getter einrichten um die Anzahl der Noten anzuzeigen. Lassen Sie uns also zu unseren Store-Dateiquellen springen gestohlen Noten dot js, springen Sie mit einem Komma zu unseren Gettern und fügen Sie ein neues Aufstehen hinzu. Also könnten wir diese Gesamtzahl der Noten aufrufen , die einer Pfeilfunktion entspricht, im Status übergeben. Wir möchten die Gesamtzahl der Notizen in unseren Notizen direkt in unserem Bundesstaat zurückgeben . Um auf Notes Array zuzugreifen, können wir Status-Punktnoten erstellen. Wir können also einfach Status-Punktnoten zurückgeben. Und um die Anzahl der Elemente im Array oder die Länge des Arrays zu ermitteln, können wir einfach die Punktlänge vornehmen. Spar dir das auf. Springen wir zurück zur Punktansicht „Statistik anzeigen“. Jetzt müssen wir unseren Shop importieren. Lassen Sie uns also unsere Skript-Setup-Tags auf einen Kommentar setzen , in dem Eingaben steht. Und wir werden US-Store-Notizen aus Slash Store-Notizen importieren aus Slash Store-Notizen , die wir einer Konstanten zuweisen müssen. Großartig, ein weiterer Kommentar hier unter start const, speichern Notizen gleich mit Store-Notizen. Wir sollten jetzt in der Lage sein, unseren Getter zu benutzen. Ersetzen wir also diesen ersten XXX nach der Anzahl von Noten durch doppelte geschweifte Klammern und speichern Sie Notizen. Wie haben wir es genannt? Anzahl der Noten insgesamt. Also immer noch Noten punkten Gesamtzahl der Noten. Speichern Sie das, und wir sehen dieses Update jetzt auf zwei. Und wir haben zwei Notizen. Wenn wir noch eine Notiz hinzufügen, vielleicht noch ein paar. Gehe zurück zur Statistikseite. Das heißt jetzt Denn Sie können sehen, dass wir alles , was sich in unserem Shop befindet, überall in unserer App und alle Daten in unserem Shop und alle Ergebnisse unserer Getter problemlos verwenden können alles , was sich in unserem Shop befindet, überall in unserer App und alle Daten in unserem Shop und alle Ergebnisse unserer Getter problemlos verwenden befindet, überall in unserer App und alle Daten in unserem Shop und alle Ergebnisse unserer werden immer in Echtzeit auf dem neuesten Stand gehalten, unabhängig davon , wohin wir in unserer App gehen. Jetzt richtet sich ein weiterer Getter ein, um die Anzahl der Zeichen aller Noten zu erfassen. Ich bin mir nicht sicher, ob die Anzahl der Zeichen das einfach ändert. Springen wir noch einmal zu unserem Shop, fügen einen neuen Getter hinzu, und wir nennen dies eine Gesamtzahl der Zeichen bei einer Pfeilfunktion. Gehen Sie im Bundesstaat vorbei. Jetzt müssen wir jede Note, die sich in unserem Notes Array befindet, durchlaufen jede Note, die sich in unserem Notes Array befindet , um die Gesamtzahl der Zeichen aller Noten herauszufinden . Wir könnten einfach eine Variable einrichten, um dies zu zählen. Ich erstelle eine Variable namens count set, die standardmäßig 0 entspricht. Und dann durchlaufen wir einfach unsere Notizen, richtig, die Länge des Inhalts von jedem einzelnen, und fügen dann diese Länge zu dieser Zählvariablen hinzu und geben dann einfach diese Zählvariable am Ende zurück. Also könnten wir für jeden einen gebrauchen, um dies zu tun. Um unser Noten-Array zu greifen, können wir einfach Statuspunktnoten erstellen, die wir für jede Methode verwenden können , um jede Note in diesem Array zu durchlaufen , während sie durchläuft und sie sich jede einzelne ansieht wir brauchen einen Platzhalter. Also verwenden wir dafür einfach eine Notiz und fügen dann eine Pfeilfunktion hinzu. Dies wird auf den ersten Knoten schauen und ihn diesem Notizplatzhalter zuweisen. So können wir einfach den Inhalt, den Nope-Punkt-Inhalt, das Punkt-Konzept löschen . Und um die Länge dieser Zeichenfolge zu erhalten, können wir einfach die Punktlänge machen. Wir können dann einfach das Ergebnis davon zu dieser Zählvariablen hinzufügen . Wir können einfach plus gleich zählen. Und wenn es fertig ist, springt es beim ersten Element zum zweiten Element und nimmt dann die Länge von der nächsten Konzepteigenschaft ab und fügt diese Zählvariable einfach weiter hinzu , bis sie ist komplett durch das Array gegangen. Am Ende können wir diese Zählvariable einfach zurückgeben. Lassen Sie uns also einfach die Zählungen zurückgeben, speichern Sie das, laden Sie die Seite neu. Oder wir müssen diesen Getter tatsächlich verwenden , den wir als Gesamtzahl der Zeichen bezeichnet haben. Ich kopiere einfach diesen Namen. Wechseln Sie zur Ansicht, Start-Start-Ansicht, wählen Sie diese XXX-Doppelgeschweifte Klammern aus. Und um unser Ghetto zu verwenden, können wir einfach Lasten, Punkte, Gesamtzahl der Zeichen speichern, das speichern. Jetzt sehen wir dieses Update. Wenn wir zur Notizseite springen, bearbeiten Sie eine unserer Notizen. Springe zurück. Wir könnten sagen, dass dieser Wert jetzt erhöht ist. Wenn wir alle unsere Notizen löschen, springen Sie zur Statistikseite. Wir sehen jetzt, dass wir 0 Knoten mit insgesamt 0 Zeichen haben. 94. Richtlinie – Autofocus [Modul 17]: Fügen wir dazu eine benutzerdefinierte Direktive hinzu. Eine Sache, die wir tun könnten, ist eine benutzerdefinierte Direktive zu erstellen, die diesen Textbereich beim Laden der Seite automatisch fokussiert, dass der Benutzer sofort mit der Eingabe beginnen kann und Sie Notizen machen, ohne darauf klicken zu müssen. Lassen Sie uns zunächst eine lokale benutzerdefinierte Direktive in dieser Komponente „Notiz hinzufügen“ festlegen. Ich sage nicht, dass Quellkomponenten, Notizen und Bearbeitungsnotizen zum Skriptbereich springen. Ich springe runter nach unten. Lassen Sie uns hier einen neuen Blockkommentar hinzufügen, in dem Richtlinien aufgeführt sind. Erinnern Sie sich, wie wir eine Local Coastal Directive hinzufügen? Fühlen Sie sich frei, das Video anzuhalten und zu sehen, ob Sie sich daran erinnern können, wie es geht. Aber was wir tun, ist, dass wir eine Konstante erstellen und sicherstellen müssen, dass der Name dieser Konstante mit einem Kleinbuchstaben v beginnt und sich in CamelCase befindet. Also könnten wir diese Ader-Autofokus nennen. Wir setzen dies auf ein Objekt und wir könnten alle Hooks hinzufügen, die wir möchten, z. B. erstellt, wir werden mounted verwenden und wir setzen dies auf eine Methode wie diese, und wir können den L-Parameter hier übergeben . Dieser l-Parameter gibt uns Zugriff auf das Element, sobald es als in dem Element eingebunden ist , dem wir diese V-Autofokus-Direktive hinzufügen. Wir können es dann einfach mit L-Punktfokus fokussieren. Jetzt können wir diese Direktive einfach jedem fokussierbaren Element hinzufügen , das sich in dieser Komponente befindet. Fügen wir es also zu unserem Textbereich hinzu, der sich hier befindet. Denken Sie daran, dass wir den Namen, den wir hier von CamelCase verwendet haben, in den Dashcase ändern müssen . Wir können das nicht so v-Dash Autofokus. Spar dir das auf. Und wenn wir diese Seite neu laden, können wir sehen, dass der Textbereich automatisch fokussiert wird , ohne dass wir darauf klicken müssen. Da es sich bei dieser Art-Edit-Notes um eine freigegebene Komponente handelt , die auch auf der Bearbeitungsseite verwendet wird. Es sollte auch hier funktionieren, was es tut. Wir können den Textbereich auch hier automatisch fokussiert sehen. 95. Globale Richtlinie – Autofokus: Nehmen wir an, wir haben einen Input auf uns Statistikseite. Springen wir zur Statistik-Seite, Quelle, Ansichten, Ansicht, Statistik-Punktansicht. Und ich werde unsere Tabelle zusammenklappen und danach fügen wir eine Eingabe hinzu. Und ich setze den Typ auf Texte und wir geben diesem einen Platzhalter. Liebst du? Nope Bälle. Speichern Sie das und springen Sie zu unserer Statistikseite, um dies etwas hübscher aussehen zu lassen. Eine Menge Klasse von Eingaben, die von Bohmer stammen. Das ist besser. Nehmen wir an, wir möchten diesen Impuls auch automatisch fokussieren , wenn diese Seite geladen wurde. Nun, das wird derzeit nicht funktionieren. Wenn wir diese Autofokus-Direktive hier hinzufügen, speichern Sie diese und laden Sie sie neu. Wenn wir uns unsere Konsole ansehen, können wir einen Fehler sehen. Eigenschaften von undefiniertem Reading Deep können nicht gelesen werden. daran, dass dieser V-Autofokus nicht im Kontext dieser Komponentenansichts-Statistik-Punktansicht existiert, nur in der Art-Edit-Notenpunkt-Vue-Komponente, wo wir ihn hier eingerichtet haben. Springen wir zurück, um die Punktansicht der Statistiken anzuzeigen. Entfernen Sie diese V-Autofokus-Direktive, speichern Sie diese und springen Sie zurück zu unserer Notizseite und fügen Sie „Nope-Punkt-Ansicht bearbeiten“ hinzu. Und lassen Sie uns diese Richtlinie zu einer globalen Richtlinie machen , die wir überall verwenden können. Erstellen wir zunächst einen neuen Ordner in unserem Quellordner, in dem alle unsere Richtlinien leben können. Also klicke ich mit der rechten Maustaste auf den Quellordner, klicke auf Neuer Ordner und erstelle einen Ordner namens Direktiven. Darin erstellen wir eine neue Datei namens Autofokus dot js. Wir könnten ihm genauso gut den gleichen Namen geben wie unseren ständigen Namen. Lassen Sie uns nun springen, um die Ansicht „Nope-Punkt bearbeiten“ hinzuzufügen, wählen Sie diese Konstante aus und schneiden sie aus. Und lassen Sie uns diesen Kommentar auch entfernen und speichern ihn. Lassen Sie uns nun zu einer neuen V-Autofokus-Datei springen und die Direktive einfügen . Alles, was wir tun müssen, ist diese zu exportieren, damit sie aus unseren Komponenten importiert werden kann. Damit können wir damit einfach Exporte beginnen, speichern Sie das. Und wenn wir jetzt springen, um edit self.view hinzuzufügen, können wir diese Direktive einfach importieren. Lasst uns also zu unseren Eingaben aufsteigen und wir können einfach geschweifte Klammern importieren V Autofokus aus Schrägstrichtlinien schrägen den Autofokus. Spar dir das auf. Jetzt müssen wir die Direktive nur noch dem Textbereich hinzufügen, was wir bereits getan haben. Das sollte also hoffentlich jetzt funktionieren und wir können sehen, wann wir die Seite neu laden, ist der Autofokus immer noch der Textbereich, außer dass er diese globale Richtlinie verwendet, die wir erstellt haben. Lassen Sie uns also dieselbe globale Richtlinie auf unserer Statistikseite verwenden. Lassen Sie uns springen, um die Punktansicht der Statistiken anzuzeigen. Wir müssen die Richtlinie importieren. Also gehe ich einfach zurück zu Notenpunkt hinzufügen Vue bearbeiten. Kopieren Sie die Importanweisung, springen Sie zur Ansicht der Statistik-Punktansicht, fügen Sie diese hier ein, speichern Sie sie, und wir können diese jetzt auch hier verwenden. Fügen wir es also zu dieser gerade erstellten Eingabe hinzu. Also konzentrieren Sie sich auch V-Dash, speichern Sie das, laden Sie neu und wir können sehen, dass diese Eingabe auf der Startseite jetzt auch Autofokus ist. 96. Die Anzahl der Figuren (Uhr) sehen: Fügen wir dazu einen Beobachter hinzu. Angenommen, in unserer Notizseitenansicht, Notizenpunktansicht, möchten wir die Anzahl der Zeichen beobachten , die in diesen Textbereich eingegeben werden. Oder mit anderen Worten, die Anzahl der Zeichen in dieser neuen Notizreferenz, die sich in der Punktansicht der Ansichtsnotizen befindet. Und wenn das 100 Zeichen erreicht, wollen wir eine Ellipse zeigen. Lassen Sie uns eine Uhr hinzufügen, um dies in der Punktansicht der Notizen zu tun. Erinnerst du dich also, wie wir einen Beobachter hinzufügen? Das stimmt. Wir müssen zuerst die Uhrmethode aus der Sicht importieren, und dann verwenden wir diese Uhrmethode. Unten hier füge ich einen neuen Kommentar hinzu , der sagt watch. Charaktere verwenden diese Uhr-Methode. Der erste Parameter sind die Daten, die wir sehen möchten, und wir wollen diese neue Notiz sehen, href, wir können einfach neue Notizen als ersten Parameter übergeben. Der zweite Parameter ist eine Methode Callback-Methode, die jederzeit ausgelöst wird , wenn sich diese hier angegebene Dateneigenschaft ändert Wenn wir möchten, können wir den neuen Wert für den alten Wert hier übergeben . Sperren wir die einfach aus. Also ein Logout einen neuen Wert und dann komma neuen Wert. Dann dupliziere ich das und wir loggen uns den alten Wert ab. Spar dir das auf, lade neu. Wenn wir die Texte ändern, können wir sehen, dass der alte Wert und der neue Wert immer gesperrt sind. Jetzt werden wir den alten Wert hier nicht wirklich brauchen. Ich werde das los und werde diese Protokolle los. Wenn die Zeichenlänge dieser neuen Notenreferenz 100 erreicht, zeigen wir eine Ellipse. Wir können dazu einfach eine if-Anweisung hinzufügen. Wir können also tun, wenn Sie Wert auf Punktlänge legen, um zu erhalten die Länge des neuen Wertes 100 entspricht, dann können wir jemanden warnen, der nur 100 Zeichen erlaubt ist. Gott, verdammt noch mal. Wenn ich nachlade. Und nur um das Testen zu erleichtern, gehe ich zum zugrunde liegenden Textbereich, der sich in Anmerkungen zu Quellkomponenten in der Notenpunktansicht der ungeraden Bearbeitung befindet . Ich füge diesem Satz nur ein Attribut der maximalen Länge hinzu, das auf 100 gesetzt wird. Testen wir das mal. Wir können einfach anfangen, in diesen Textbereich einzutippen. Wenn wir 100 Zeichen erreichen, sehen wir die Warnungen. Wir können sagen, dass unser Beobachter arbeitet. 97. Composable – useWatchCharacters: Nehmen wir an, wir möchten auf unserer Statistikseite über diese Eingabe dieselbe Funktion für die Uhrzeichenfunktion haben. Nun, wir könnten diesen Überwachungscode einfach kopieren, ihn in die Statistik-Seitenansicht und die Statistik-Punktansicht und dann einfach die Dateneigenschaft anpassen , die wir hier sehen. Nun, dann würden wir Code duplizieren. Es wäre schlecht, diesen Beobachter in eine eigene Composable File zu stecken , die wir überall verwenden können. Also lasst uns das machen. Springen wir zu unserem Entdecker. Und wir möchten unser Composable in einen Ordner namens use im Quellordner ablegen . wir mit der rechten Maustaste auf Quelle und wählen Sie Neuer Ordner. Erstellen Sie einen Ordner mit dem Namen „Verwenden Sie das darin eine neue Datei namens US-Watch-Zeichen ab.js erstellt. Um ein Composable einzurichten, müssen wir nur eine Funktion mit dem gleichen Namen wie unsere Datei exportieren . Verwende Uhrenzeichen. So wie das. Springen wir zurück, um Noten Punkt Vue zu sehen. Habe gerade diesen Beobachter erwischt. Springe zu unserem Composable und füge das hier ein. Ich bin eigentlich Backhaul Snopes Dot View. Wir können jetzt die Watch-Methode entfernen, die wir importieren. Speichern Sie das, springen Sie zurück, um Uhrenfiguren zu verwenden. Und wir müssen diese Uhrmethode hier importieren. Fügen wir einfach Eingaben hinzu, schauen Sie aus der Ansicht nach. Um dieses Composable generisch zu machen, müssen wir die Dateneigenschaft, die wir ansehen möchten, als Parameter übergeben können . Akzeptieren wir das einfach hier. Also könnten wir diesen Wert einfach zum Anschauen nennen oder so ähnlich. Was auch immer wir hier weitergeben, ist das, was wir hier sehen wollen. Lassen Sie uns neue Notizen in ist das, was wir hier sehen wollen Wert ändern, um dies zu beobachten und zu speichern. Und jetzt sollten wir dieses Unmögliche verwenden können, um die Anzahl der Zeichen einer Dateneigenschaft in unserer App zu beobachten die Anzahl der Zeichen einer . Und dann zeige diese Warnung, wenn sie 100 Zeichen trifft. Lassen Sie uns also zur Punktansicht der Noten springen, und wir müssen diese Composable importieren. Eingaben verwenden also Watch-Zeichen. Verwenden Sie aus dem Schrägstrich von Slash-Benutzern Watch-Zeichen. Sag das, lass uns zu unserer Notizseite springen. Springe runter nach unten. Wir sollten dieses Composable nicht verwenden um diese neue Notiz href anzusehen, die an den Textbereich gebunden ist. Wir können einfach Uhrenfiguren verwenden und dann das Rack übergeben , das wir sehen möchten. Neue Notiz, notieren Sie, speichern Sie das. Mal sehen, ob das noch funktioniert. Arbeitet immer noch. Und jetzt sollten wir auch in der Lage sein, die gleiche Funktionalität auf unserer Statistikseite zu nutzen. Lasst uns also zu unserer Statistikseite springen. Ansichten, Ansicht, Stopp, Stop-Ansicht. Auch hier müssen wir dieses Composable importieren. Ich kopiere einfach die Eingabezeile aus der Ansicht. Hinweis: Stopp-Ansicht. Füge das hier ein. Und wir sollten es jetzt auch auf der Statistikseite verwenden können . Wir haben jedoch kein Dateneigenschafts-Setup für diese Eingabe hier. Also lasst uns das einfach einrichten. Eine Menge Kommentar hier, besagt , dass Love Note Bälle fast eine href aufstellen. Also const, Love Note Balls entspricht einer href mit einem Anfangswert einer leeren Zeichenfolge, und wir müssen ref aus der Ansicht importieren. Fügen wir das der oberen Eingabereferenz aus der Ansicht hinzu. Binden wir dieses Floß nun an den Input. Hier ist der Input. V-Modell. Stellen Sie es zu tief von Notenbällen ein. Spar dir das auf. Ändern wir einfach diesen Standardwert , um zu sehen, ob er angeschlossen ist. Trotzdem. Das war alles was es brauchte. Wir sollten jetzt in der Lage sein, die Zeichen in dieser Eingabe zu beobachten. Auch hier können wir einfach Uhrenfiguren verwenden, die das Wrack passieren , das wir sehen wollen, nämlich Liebe, Nein, Bälle, Liebe, Notizbälle. Heilige das. Hoffentlich sollten wir hier die gleiche Funktionalität sehen. Ja, es funktioniert. 98. Composable – Mehrere Parameter: Lassen Sie uns unsere Use Watch Characters etwas flexibler gestalten. Im Moment wird der Alarm immer ausgelöst , wenn die Länge der Zeichen 100 erreicht. Aber nehmen wir an, wir möchten in der Lage sein, die Anzahl der Zeichen anzupassen , bei denen sich dieser Phi befindet. Nehmen wir an, auf der Notizseite möchten wir das 100 Zeichen herausfinden. Aber auf der Statistikseite in dieser Eingabe möchten wir dies nach 50 Zeichen finden. Nun, wir könnten dies tun, indem wir einen weiteren Parameter hinzufügen um hier die Root-Funktion der Watch-Zeichen zu verwenden. Fügen wir hier einen zweiten Parameter hinzu, der als Max Jars bezeichnet wird. Wir können dasselbe passieren, wenn wir dieses Composable in unseren Komponenten in unserer if-Anweisung hier verwenden . Anstatt wenn newValue mag gleich 100 ist, wird tun, wenn der neue Wert Punktlänge den maximalen Zeichen entspricht, werde ich ersetzen Sie ein Zeichen mit einer maximalen Breite von 100 Breiten, und wir geben diese Zahl auch in unserer Warnung aus. Ich ändere dies in eine Vorlagenzeichenfolge. Ich ersetze die geschweiften Klammern für 100 Dollar mir erlaubt ist, diese maximalen Zeichen zu setzen. Lassen Sie uns so viele Jars-Parameter einen Standardwert festlegen , falls er nicht angegeben wurde. Wir könnten das tun, indem wir einfach maximale Zeichen auf 100 setzen. Spar dir das auf. Da wir derzeit nicht Parameter dieses maximalen Kindes auf der Notizseite angeben, sollte dies einfach so funktionieren wie zuvor. Durch das Auslösen sind die Warnungen 100 Zeichen. Testen wir das einfach. Arbeitet aber immer noch nicht mit 100 Zeichen. Nehmen wir an, auf unserer Notizseite möchten wir nur die Standardfunktionalität mit 100 Zeichen verwenden . Aber auf unserer Statistikseite möchten wir, dass die maximalen Zeichen 50 Zeichen haben. Lassen Sie uns die Statistikseite auf Ruck nicht sehen , um die Punktansicht der Statistiken anzuzeigen. Scrollen wir nach unten zu dem Ort, an dem wir unser Composable auslösen den zweiten Parameter von 50 übergeben. Jetzt lasst uns das speichern. Erneut laden. Dies sollte jetzt etwas früher mit 50 Zeichen ausgelöst werden , es heißt, nur 50 Zeichen erlaubt. Meine Güte verdammt noch mal. Und so ist unser Composable jetzt viel flexibler und nützlicher. Und natürlich könnten wir es mit zusätzlichen Parametern, etc. flexibler machen . Jetzt für ein einfaches Composable wie dieses, das nur einen Beobachter enthält, ist es sinnvoll, einfach den Composable und feuere einfach die root Composable Funktion wie wir es hier tun. Aber für kompliziertere, komponierbare, die eine Reihe verschiedener Dinge wie Daten, Methoden, berechnete Eigenschaften usw. enthalten , ist es sinnvoller, nur die Dinge zu extrahieren, die wir brauchen, aus dem Composable unter Verwendung der Strukturierung. Und um daran zu erinnern, wie wir das mit komplexeren Composable machen, gehen Sie zurück zu Modul 11. Das Composable-Modul. 99. Klicke außerhalb Composable (VueUse, Template Refs): Wir haben ein benutzerdefiniertes Composable erstellt, aber fügen wir auch ein Composable aus der View-Bibliothek hinzu. Und wenn wir uns unser mobiles Menü hier ansehen, können wir dies derzeit nur schließen, indem wir auf das x. Wir können es nicht schließen, indem wir außerhalb davon klicken, wie wir es normalerweise erwarten würden. Lassen Sie uns also eines der Composable aus der View-Use-Bibliothek verwenden , um diese Gesamtstruktur zu lösen. Lasst uns rüberspringen, um use.org zu sehen. Fangen Sie an. Wir müssen das zuerst installieren. Reden wir mit unserem Terminal. Töte. Der Death-Prozess führt diesen Befehl aus, um Vue use zu installieren. Ich bin noch nicht fertig, also lasst uns unsere App mit npm run dev neu starten. Auf der Ansichtsseite gehen wir zu Menüfunktionen, Sinnen. Wir werden diesen onclick außerhalb von Composable verwenden. Also lasst uns das anklicken. Wir können hier ein Beispiel sehen. Wir können ein Modal eröffnen. Wir können es mit der X-Taste schließen, aber wir können es auch schließen, indem wir an eine beliebige Stelle außerhalb des Modals klicken. Verstecken wir das Terminal hier. Schließen Sie alle unsere Komponenten. Öffnen Sie das Layout der Navbar-Quellkomponenten, Napa. Schauen wir uns den Beispielcode hier an. Wir müssen den onclick außerhalb Composable aus der Ansicht importieren . Lassen Sie uns diese Zeile also hier in unseren Berichtsbereich kopieren. Wir können in diesem Beispiel hier sehen, dass wir eine Vorlage für REF einrichten müssen , die das Element ruiniert, bevor wir dies verwenden können. Lassen Sie uns also genug Menüelement herausfinden, das hier ist, dieses Div mit einer Klasse von Navbar-Dash-Menüs. Fügen wir dazu einen Verweis hinzu. Wir könnten dieses Navbar-Menü ref oder so ähnlich nennen . Springen wir runter zum Skriptbereich. Eine Menge Kommentar hier, der besagt, dass zum Schließen nach draußen klicken. Wir müssen unsere Vorlage einrichten href. Wir können in diesem Beispiel hier sehen. Wir erstellen eine Konstante mit dem gleichen Namen wie unser Ref , wo ist sie hin? Genug, Bombenmenü ref. Also const navbar, menu ref dt entspricht ref mit einem Standardwert von null. Jetzt können wir dieses Composable benutzen. Also lassen Sie uns diese Zeile hier kopieren. Fügen Sie das hier ein, ändern Sie das Ziel hier in diese href. Also kopiere ich das, füge es dort ein, speichere das auf. Und lasst uns das mobile Menü zeigen. Löschen Sie die Konsole und klicken Sie irgendwo nach draußen. Und wir konnten sehen, wie die Ereignisobjekte hier ausgesperrt wurden. Das scheint also zu funktionieren. Aber wir möchten das Ereignisobjekt nicht einfach abmelden. Also wähle ich all das aus und füge geschweifte Klammern hinzu und füge eine neue Zeile in der Mitte hinzu. Diese Referenz „Mobile Navi anzeigen“ bestimmt, ob das mobile Menü angezeigt wird oder nicht. Also können wir das einfach auf „false“ zurücksetzen. Sobald wir draußen geklickt haben. Bei dieser onclick extern-Methode können wir einfach den Wert „Mobile Navv anzeigen“ gleich falsch machen. Ich entferne einfach das Ereignisobjekt von hier, weil wir das nicht brauchen werden. Spar dir das auf und lass uns sehen, ob es funktioniert. Zeigen Sie das Menü an. Klicken Sie draußen. Wir sehen, dass es verschwindet. Es schließt jetzt jedoch nicht das mobile Menü, wenn wir auf das X klicken. Mal sehen, ob wir das beheben können. Springen wir auf den Knopf, der hier ist. Ich glaube, ich verstehe, was hier passiert. mobile Menü zeigt derzeit an , was wir auf den Burger-Button geklickt haben. Weil dies außerhalb des mobilen Menüs liegt. Es löst das Onclick-Outside-Ereignis aus, wenn Sie beim Ausblenden des mobilen Menüs „Mobile Navv anzeigen“ wieder auf false setzen mobilen Menüs „Mobile Navv anzeigen“ wieder auf false . Wie nennen wir. Wir haben diesen Click-Handler auch auf dem Burger-Button. Dies feuert dann diesen Code aus, der die Show Mobile Navi auf das Gegenteil von sich selbst einstellen wird . Dieser Punkt wird es wieder auf „true“ setzen. Wenn wir zurück zur Onclick Outside Dokumentation springen und ein wenig nach unten scrollen, können wir tatsächlich ein Optionsobjekt als dritten Parameter nach dem Ziel, dem Handler, hinzufügen als dritten Parameter , wo wir dies haben können ignorieren-Option, um dem Composable mitzuteilen, welche Elemente die Onclick-Outside Funktionalität ignorieren sollen . Wir könnten es einfach dazu bringen, alle Klicks auf diesen Navbar-Burger zu ignorieren . Jetzt müssen wir zuerst eine Vorlage für diesen Bob-Agar einrichten . Lassen Sie uns diesem Siedler T2 Nav-Bar einen Verweis hinzufügen, Burger ref. Spar das auf. Dafür müssen wir hier Daten einrichten, ich dupliziere diesen. Ändern Sie dies, um Navbar Burger ref. Dann können wir in dieser onclick extern-Funktion nach unserer Handler-Funktion nach unserer Handler-Funktion Komma und dann ein Objekt hinzufügen , das wir nicht ignorieren können. Stellen Sie das auf ein Array ein, übergeben Sie die Vorlage ref lösen Sie alle Elemente, die dieses Composable ignorieren soll. Also lasst uns diesen Navbar-Bettler F übergehen, das dort einfügen, speichern Sie das. Mal sehen, ob das behoben ist. Klicken Sie auf den Button. Wir könnten es immer noch schließen, indem wir auf das X klicken. Mal sehen, ob wir noch nach draußen klicken können, um es zu schließen. Und ja, das können wir. 100. Modal Design (Reaktive Objekte): Okay, also ist unsere App im Grunde vollständig. Darin haben wir fast alles behandelt, was wir in den früheren Modulen behandelt haben. Es gibt nur noch eine Sache, die ich hinzufügen möchte, nämlich ein Modal, das angezeigt wird, wenn wir auf die Schaltfläche Löschen klicken, um den Benutzer zur Bestätigung aufzufordern bevor die Notiz gelöscht wird. Die Gründe, warum ich dies hinzufügen möchte, sind die Nummer eins Es ermöglicht uns, reaktive Objekte zu unserer App hinzuzufügen, die wir noch nicht verwendet haben. Nummer zwei: Es wird uns erlauben, einige Lebenszyklus-Hooks zu verwenden , die wir noch nicht benutzt haben. Nummer drei wird es uns helfen, unser Wissen über Daten über Ereignisse über übergeordnete und untergeordnete Komponenten mithilfe von Requisiten, Emitten, Modellwert und Update-Modalwert zu festigen über Ereignisse über übergeordnete und untergeordnete Komponenten mithilfe von Requisiten, Emitten, . Und ich denke, es ist eine gute Idee, dieses Eltern-Kind-Zeug noch einmal zu besprechen , da diese Konzepte ziemlich verwirrend sein können, aber sie sind wirklich K für Erstellung solider KompositionsAPI-Apps. Erstellen wir zunächst eine neue Komponente für unser Modal. Ich springe zu Quellkomponenten, Notizen. Und ich möchte in diesem Ordner keine neue Datei mit dem Namen modale Delete Note Punktansicht erstellen . Im Moment stecke einfach Vorlagen-Tags da drin heraus. Dave. Ich lege einfach die SMS ein. Das ist ein Modal. Speichern Sie das jetzt in unserer Notizen-Komponenten-Punktansicht. Lasst uns darauf springen. Hinweise zu Komponenten. Nein, Punktansicht. Fügen wir reaktive Objekte hinzu, bei denen die Eigenschaft zur Bestimmung, ob dieses Modal angezeigt wird oder nicht. Ich werde die Ref-Rezension importieren, also füge ich das hier hinzu. Dann scrolle ich nach unten. Ich füge einen Blockkommentar hinzu, der Modals sagt. Ich werde ein neues reaktives Objekt namens Modals einrichten. Modals ist gleich reaktiv, reaktiv, die wir aus der Ansicht importieren müssen, nicht href. Ersetzen wir das durch reaktiv. Das Objekt übergeben. Und ich füge eine Eigenschaft mit dem Namen Notensatzpunkt löschen hinzu, der dem Wert „false“ entspricht. Diese Eigenschaft bestimmt , ob das Modal angezeigt wird oder nicht. Wenn es falsch ist, zeigen wir es nicht. Und wenn es stimmt , zeigen wir es. Der Grund, warum ich hier ein reaktives Objekt verwendet habe , ist, dass wir in vielen Apps wie dieser möglicherweise eine Reihe verschiedener Modelle haben. Wenn wir beispielsweise eine Notiz bearbeiten, sind wir zu einer neuen Seite gesprungen, aber wir könnten uns entscheiden, diese Funktionalität durch ein Modal zum Bearbeiten der Notizen zu ersetzen . Dieses reaktive Objekt gibt uns einen Ort, an dem wir alle unsere Modelle gemeinsam verwalten können. Möglicherweise haben Sie hier eine andere Eigenschaft, bearbeiten Sie Notizen und verwenden Sie diese dann, um Notizen modal zu verwalten. Aber im Moment werden wir nur diese Löschnotizen modal hinzufügen , also werde ich das los. Spar dir das auf. Importieren wir unsere neue modale Komponente und zeigen sie nur an, wenn diese Eigenschaft „delete notes“ wahr ist. Also springen wir zu unseren Inputs. Wir importieren modale Löschnotizen aus Slush-Komponenten Schrägstriche, modales Löschen von Schrägstrichen, Notenpunktansicht. Das hebe ich dir auf. Und jetzt platzieren wir das nach unserem Fußzeilenelement modal. Notiz löschen. Spar dir das auf. Und das können wir jetzt auf unseren beiden Notizen sehen. Aber lassen Sie uns dies nur anzeigen, wenn Modals Dot Delete Note wahr ist. Also eine Menge v-wenn auf diesen Modal v Strich gerichtet, wenn Modale, Punkte, löschen, notieren, speichern Sie das. Und wir sehen, wie das Modal verschwindet. Wenn wir den Modals dot delete node in true ändern, sehen wir, dass er wieder angezeigt wird. Setzen wir das auf „false“ zurück und speichern das. Jetzt verwenden wir Kugeln, um ein gut aussehendes Modal zu erstellen. Lasst uns also zurück zur Seite der Kugelmühle auf den.io docs zu Komponenten und Modal springen . Scrollen wir hier ein bisschen nach unten. Wir werden dieses Modalkartenbeispiel verwenden, das ziemlich gut aussieht. Ich kopiere den gesamten Code dafür. Springe zu Modal, Löschen, Note Dot Vue. Füge das alles einfach hier ein. Werden Sie das Div los , das wir zuvor hinzugefügt haben. In dichtem alles ein bisschen und speichern Sie das Nachladen, damit wir dieses Modal tatsächlich sehen können, wenn wir auf Löschen klicken. Springen wir zu unserem Lösch-Button in der Nope-Punktansicht , die hier ist. Anstatt unsere Löschnotizen auszulösen, Aktion in unserem Shop zeigt die Aktion in unserem Shop stattdessen nur dieses Modal an. Um dies zu tun, können wir einfach Modals machen, Dot, Delete, Noten gleich true. Spar dir das auf. Klicken Sie auf Löschen. Wir sehen das Modal immer noch nicht. Mal sehen, ob es hier zu unserem Modell hinzugefügt wird. Also überprüfe ich diese Notiz. Wir können sagen, dass das Modal der Seite hinzugefügt wurde, aber wir sehen es nicht. Ich denke, das liegt daran, dass wir dem Modal eine Klasse von Aktiv hinzufügen müssen . Jetzt können wir es sehen. Gehen wir also zurück zu unserer modalen Komponente und fügen Sie diese Klasse zum Root hinzu ist aktiv. Spar dir das auf. Klicken wir nun auf die Schaltfläche Löschen. Wir können jetzt das Modal sehen. Jetzt ändern wir das ein bisschen. Lassen Sie uns diesen Titel hier ändern, modalen Titel, um Notizen zu löschen, Fragezeichen, speichern Sie ihn. Und fügen wir der Körperbehaarung etwas Inhalt hinzu. In dieser Modalkarten-Körperklasse werden wir einfach hinzufügen, du. Klar. Sie möchten diese Notiz löschen, speichern Sie diese. Und wir können diese Botschaft jetzt sehen. Jetzt möchte ich diese Tasten nach rechts ausrichten. Wenn wir zu diesem Fußzeilenelement mit einer Klasse von modalen Flashcard fahren , strich vier. Wir können dies tun, indem wir eine der Flexbox-Klassen von Ballmer hinzufügen , nämlich nur um Phi Dash, Dash, Dash und Sag, eigentlich denke ich, dass es Content Flex rechtfertigt und lass uns das versuchen. Spar dir das auf. Auch hier finden Sie alle diese Kurse, die auf der früheren Website dokumentiert sind. Okay, jetzt tausche ich diese Knöpfe um. Setzen Sie den Abbrechen-Button zuerst in diese Fußzeile. Ich möchte den Text in dieser Schaltfläche „Änderungen speichern“ nicht ändern , um ihn zu löschen. Ich denke, es macht Sinn , diesen Knopf rot zu machen , damit wir uns einfach ändern können. Das ist Erfolg. zweite Klasse ist Gefahr. Um es lesen zu lassen. Dieses Modal sieht jetzt ziemlich gut aus. Jetzt müssen wir nur noch dazu bringen, dass es sich richtig verhält. Damit die Nummer eins ist, können wir es ausblenden, wenn wir auf dieses X oder die Schaltfläche Abbrechen klicken. Wenn wir außerhalb des Modals klicken. Um dies zu tun, verwenden wir unseren Klick außerhalb von Composable aus der Ansicht wieder. Wir müssen dies auch erhalten, um die Notiz tatsächlich zu löschen, wenn wir auf die Schaltfläche Löschen klicken. Wir fügen diesem auch etwas Tastatursteuerelement , damit der Benutzer Escape drücken kann, um das Modal zu schließen. Um das zu tun, werden wir einige Lebenszyklus-Hooks nutzen . 101. Verbergen den Modal für DEN Löschen (modelValue & (modelValue: Wenn der Benutzer auf diese Council Button klickt oder diese Exploits darin enthält, möchten wir dieses Modal ausblenden. Jetzt befinden sich diese Schaltflächen in unserer untergeordneten Komponente. Modale Notiz-Punktansicht löschen. Wenn der Benutzer jedoch auf diese Schaltflächen klickt, möchten wir die Modaleigenschaft Dot, Delete Note ändern , die sich auf der übergeordneten Komponente befindet. Eine Möglichkeit, dies zu tun, besteht darin, ein Kundenereignis auszusenden , wenn wir auf diese Schaltflächen klicken. Notieren Sie sich dann in der übergeordneten Komponente die Punktansicht und hören Sie auf dieses Ereignis ab. Und wenn es eingegangen ist. Legen Sie Modale fest Dot, Delete , Note, Box oder false. Wie wir jedoch bereits im Kurs erfahren haben, müssen wir dies nicht wirklich tun. Eine untergeordnete Komponente kann nicht direkt eine Dateneigenschaft ändern, die sich auf ihrer übergeordneten Komponente befindet. Indem Sie diese reaktive Dateneigenschaft mithilfe des V-Modells an die untergeordnete Komponente übergeben , dann den Wert des V-Modells unter Verwendung der speziellen Modellwertrequisite erhalten unter Verwendung der speziellen Modellwertrequisite und dann die Quelle von dieser modale Wert die übergeordnete Komponente unter Verwendung des Update-Modellwerts. Nun, lassen Sie uns zunächst Modale Dot Delete Note mit V-Modell an die untergeordnete Komponente weitergeben . Lasst uns aufsteigen, um hier keine Komponente zu löschen. Ich darf av, model direktive und set.seed genauso wie die Modals Dot Löschen Notizen, fügen Sie das ein, speichern Sie das. Und wir können dieses V-Modell jetzt mit der speziellen modalen Wertestütze, den untergeordneten Komponenten, erhalten . Springen wir also zur modalen Lösch-Nope-Punkt-Ansicht. Der Skriptabschnitt des Attributs richtet unsere Requisiten ein. Also eine Menge Kommentar hier, der Requisiten sagt. Ich bin ein Let eine Konstante namens Requisiten und setze diese gleich der Methode definiere Requisiten in einem Objekt und wir definieren hier unsere Requisiten. Um diese Dateneigenschaft zu erhalten , die wir mit dem V-Modell weitergeben, müssen wir die Modellwert-Requisite verwenden, die gleich einem Objekt entspricht. Der Typ wird Milliarden sein , weil Modale, Dr. Lee No, nur eine Milliarde wahr oder falsch sind und fast den Standardwert auf „false“ setzen. Um sicherzustellen, dass dies korrekt weitergegeben und korrekt empfangen wird. Lassen Sie uns diese modale Wert-Requisite einfach in unserer Vorlage ausgeben. Nach den Texten, die wir dem Körper hinzugefügt haben, füge ich ein Vor-Tag hinzu und gebe einfach doppelte geschweifte Klammern und modalen Wert aus. Speichern Sie das, laden Sie die App neu und klicken Sie auf Löschen. Und ja, wir können sehen, dass das durchkommt , weil wir hier wahr sehen können. Jetzt entfernen wir einfach dieses Vor-Tag. Spar dir das auf. Erstellen wir nun eine Methode , die ausgelöst werden kann, wenn wir auf die Schaltfläche X oder die Schaltfläche Abbrechen klicken. Springen wir also zum Skriptabschnitt im modalen Löschen Note dot Vue. Fügen Sie einen Abschnitt hinzu, der als „close modal“ bezeichnet wird. Ich erstelle eine Konstante namens Close Modal Settler , die einer Pfeilfunktion entspricht. Im Moment loggen wir uns einfach in der Nähe von Modal aus. Spar dir das auf. Lassen Sie uns diese Methode nun auf unseren Buttons auslösen. Also die Schaltfläche „Abbrechen“, wird dies einfach in mehrere Zeilen aufteilen. Teilen Sie die Attribute auf. Melodischer Klick-Handler, klicken Sie auf gleich modal schließen. Dann kopiere ich diesen Klick-Handler und finde, dass dieses kleine Export ihn exportiert. Wo ist das Ding? Hier ist, ich teile das auf mehrere Zeilen auf. Teilen Sie die Attribute auf, fügen Sie einfach diesen Klick auf Speichern ein. Es sei denn, vergewissern Sie sich, dass diese Methode zur Nahmodale ausgelöst wird. Klicken Sie auf die Schaltfläche Abbrechen, wir sehen das Protokoll. Klicken Sie auf den X-Button, wir sehen das Protokoll. Jetzt müssen wir nur noch das hoffnungs-DAG-Modellwertereignis in dieser Methode emittieren . Zuallererst müssen wir unsere Mythen definieren. Lassen Sie unsere Handschuh-Sektion saugen, erstellen Sie eine Konstante namens Emit. Stellen Sie das gleich der definierten emits-Methode, die in einem Array übergeben wird. Wir fügen einfach das Volume des Doppelpunktmodells für Aktualisierungen hinzu. Sagen Sie, dass wir dieses besondere Ereignis jetzt in unserer Modalmethode für Kleidung ausstrahlen können. Wir können einfach emittieren und dann den modalen Wert des Tages hoffen. Dies wird also die Quelldateneigenschaft in der Parallelkomponente ändern , die wir mit V-Modell weitergeben und mit modalem Wert erhalten. Es wird diese Delete Note-Eigenschaft in der Komponentennotizpunktansicht aktualisieren , wir müssen ihr mitteilen, auf welche Werte sie festgelegt werden soll. Und wir wollen das Modal ausblenden, also möchten wir es wieder auf „false“ setzen . Lasst uns zu diesem Emit runterspringen. Wir können einfach falsch als zweiter Parameter beginnen. Sagen wir mal nachgedacht. Mal sehen, ob es funktioniert. Zeigen Sie das Löschmodal an, klicken Sie auf das X und das funktioniert. Klicken Sie auf den Rat. Und das funktioniert auch. 102. Modal löschen – Klicke auf die Außen um den Abschluss zu schließen: Es wäre besser, wenn sich dieses Modal selbst schließen wenn wir irgendwo außerhalb des Autos klicken würden. Das ist die Funktionalität, die wir von einem solchen Modal erwarten würden . Denken Sie daran, dass wir diesen Klick außerhalb von Composable früher aus Ansicht verwenden, um dieses Mobile Nav-Menü verschwinden zu lassen, wenn wir außerhalb davon klicken. könnten wir nochmal gebrauchen. Nun, bevor wir das tun, gefällt mir die Tatsache nicht, dass es keine Polsterung um dieses Modal gibt. Wenn wir ein Ticket für kleinere Bildschirme haben, sieht es besser aus, wenn wir dieses Div ein wenig mit der Klasse des Modals plotten und einfach eine Klasse von H2 hinzufügen , um dem ein bisschen Polsterung zu geben. Das sieht ein bisschen besser aus. Ich glaube. Verwenden wir diesen Klick außerhalb Composable hier, damit wir dieses Modal schließen können. Lassen Sie mich außerhalb der Karte klicken. Ich springe zum Explorer. Ich klicke einfach mit der rechten Maustaste auf den Quellordner und wähle In Ordner suchen und suche nach dem Klick außerhalb. Es gibt ein unwidersprüchliches. Also lasst uns dazu springen. Ich kopiere diese Eingabe. Wechseln Sie dann zur Punktansicht des modalen Löschknotens. Auch hier ist es los. Importieren, fügen Sie diesen Sprung ein. Aber um Bardot-Ansicht nicht zu sehen. Jetzt kopieren wir diesen ganzen Code. Wir könnten den Kommentar genauso gut kopieren. Gehe zurück, um Modal zu löschen. Ich füge das unten ein. Denken Sie daran, dass wir eine Vorlage benötigen, um diesem Composable mitzuteilen , auf welches Element wir außerhalb von zwei klicken werden, und dann etwas zu tun. Ersetzen wir dieses Navbar-Menü ref hier und hier durch das, was wir außerhalb dieses modalen gestrichelten Karten-Div klicken werden . Wir könnten diese Modalkarten ref nennen. Fügen wir dies der Modalkarte hinzu. Die Attribute. Diese href, modaler Kabeljau ref, speichern Sie das. Ich glaube nicht, dass wir diese Ignorieroption brauchen werden. Ich werde nur diesen dritten Parameter entfernen, diese Objekte auf diesem Komma auch so. Und wir können diese Datenreferenz loswerden , die wir zu dieser Ignorierungsoption hinzugefügt haben. Wenn wir jetzt nach draußen klicken, möchten wir nur das Modal ausblenden, indem wir diese Methode close modal auslösen . Wir können den gesamten Handler hier einfach auswählen, von der schließenden geschweiften Klammer bis zu diesen Klammern. Ich habe einfach den Namen unserer Methode eng modal angegeben. Lasst uns das aufheben und sehen, ob das funktioniert. Erneut laden, zeige das Modal an. Wir haben hier einen Fehler. Href ist nicht definiert. Ich schätze, wir müssen die Ref-Methode aus der Ansicht importieren. Importe aus der Sicht, speichern Sie das. Erneut laden. Zeigen Sie den Modalklick außerhalb an. Ja, es funktioniert. Stellen wir einfach sicher, dass es nicht falsch ausgelöst wird, wie es zuvor auf der Navbar war. Sie werden nur gefeuert, wenn wir direkt außerhalb der Karte klicken . Und der Rat und die Experten arbeiten immer noch. 103. Modal löschen – Tastatursteuerung (Lifecycle Hooks): Normalerweise erwarten wir, dass wir ein Modal wie dieses schließen können , indem wir die Escape-Taste auf unserer Tastatur drücken. Lassen Sie uns eine Tastatur einrichten, die nicht im gemounteten Hook dieser modalen Delete Note Dot Vue-Komponente verknüpft die nicht im gemounteten Hook war. Ich gehe zu modalem Löschen Note sprechen Sie mit und nach unten. Ich erstelle einen Kommentar namens Tastatursteuerung. Ich darf eine unmontierte Hakenpasse und einen Handler so dazu bringen. Und wir loggen uns vorerst einfach aus, sagen wir, dass wir hier einen Fehler haben, der nicht definiert ist. liegt daran, dass wir diesen Lebenszyklus-Hook aus der Sicht importieren müssen , Lamellen, die auf geschmolzen treffen, diese Neuladung speichern, das Modal anzeigen und wir sagen können, dass unmounted abgemeldet wird. Wenn wir es ausblenden und erneut anzeigen, können wir sagen, dass unmounted wieder ausgeloggt ist. nun in einem Multi-Tool Lassen Sie uns nun in einem Multi-Tool einen Ereignis-Listener für das Key-Event einrichten, das ausgelöst wird, nachdem wir eine Taste gedrückt und dann losgelassen haben. Lass uns dieses Protokoll loswerden. Und wir können einfach Punkte dokumentieren, Ereignis, Listener, Klammern hinzufügen Listener, Klammern und dann dem ersten Parameter folgen. Dies ist das Abutment, auf das wir hören werden, und wir werden uns das Ereignis anhören . Und der zweite Parameter ist unser Handler. Fügen wir also hier eine Pfeilfunktion hinzu. Lassen Sie uns auch das Ereignisobjekt übergeben. Ich ersetze diese Klammern durch ein a, und dann sperren wir das für den Moment aus. Console.log. Speichern Sie das und laden Sie es neu, zeigen Sie Modal an und drücken Sie die Escape-Taste. Und wir können sehen, dass das Tastaturereignis gesperrt ist. Innerhalb dieses Ereignisobjekts. Wir können sehen, dass diese Schlüsseleigenschaft auf Escape gesetzt ist, wenn wir die Escape-Taste drücken . Diese Schlüsseleigenschaft ist im Allgemeinen die Eigenschaft, die wir in unserem JavaScript einchecken möchten , um festzustellen , welche Taste gedrückt wurde. Prüfen wir, ob die Escape-Taste gedrückt wurde. Und wenn ja, dann können wir einfach eine nahe modale Methode abfeuern so das Modal verstecken. Also lasst uns diese console.log entfernen. Und wir können es einfach tun, wenn ein Punkt k gleich ist, um ihnen zu entkommen, könntest du einfach das enge Modal abfeuern. Eine Methode. Spar dir das auf. Laden Sie neu, zeigen Sie das Modal an, drücken Sie die Escape-Taste. Und das funktioniert. Wir sehen, wie das Modal verschwindet. Wir haben hier jedoch ein Problem. Wenn wir etwas in diesem Ereignis-Listener sehen, können wir uns einfach abmelden und schließen. Spar dir das auf. Wenn ich jetzt neu lade, klicke auf Löschen, um das Modal anzuzeigen, und klicke auf Escape. Wir sehen, dass es einmal ausgesperrt wird. Aber wenn ich einen weiteren modalen Hit Escape zeige, wurde es dieses Mal zweimal gesperrt. Und wenn wir wieder ein Modal zeigen, treffen Sie Escape. Dieses Mal wurde es dreimal ausgesperrt. Dies liegt daran, dass dieser Ereignis-Listener auch nach dem Schließen des Modals immer noch existiert. Dieser Ereignis-Listener wird nicht entfernt, wenn wir das Modal schließen. Wenn wir zum ersten Mal ein Modal zeigen, wird dieser Ereignis-Listener eingerichtet. Lass mich das Modal schließen. Das ist immer noch eingerichtet. Dann öffnen wir ein anderes Modal. Wir richten dann einen zweiten Event-Listener ein. In diesem Teil lassen wir jetzt zwei dieser Event-Listener feuern. Hab es geschafft. Wir werden immer wieder einen neuen Event-Listener hinzufügen jedes Tau, das wir zeigen, ein neues Modal. Was wir also tun müssen, ist diesen Ereignis-Listener zu entfernen , wenn das Modal geschlossen ist. Und wir könnten das in dem unmontierten Haken tun , der Phi auf Modal gegangen sein wird wird aus dem Dom entfernt. Um einen Ereignis-Listener entfernbar zu machen, müssen wir zunächst seine Callback-Funktion in eine eigene benannte Funktion einfügen. Beide Multi-Talk. Ich erstelle eine Konstante namens Handle. Tastatur Stellen Sie das auf eine Pfeilfunktion ein. Übergeben Sie den Parameter, das Ereignisobjekt. Jetzt schneide ich diese beiden Zeilen und füge sie in diese neue Funktion ein. Jetzt können wir einfach den gesamten Handler von der schließenden geschweiften Klammer bis zum a auswählen . Übergeben Sie einfach den Namen dieser Funktion, Handle, Tastatur. Lasst uns das aufheben. Ich sorge dafür, dass das noch funktioniert. Drücken Sie die Escape-Taste. Das funktioniert immer noch. Jetzt müssen wir diesen Ereignis-Listener nur noch im unmounted Talk entfernen . nach dem nicht montierten Gespräch mit Loudon am nicht montierten Haken Führen Sie nach dem nicht montierten Gespräch mit Loudon am nicht montierten Haken einen Pfeilfunktionshandler ein. Um diesen Ereignis-Listener zu entfernen, können wir einfach die Methode remove Event Listener verwenden. Ich kopiere einfach die ganze Zeile, füge die Zeile hier ein und ändere den Ereignis-Listener um den Ereignis-Listener zu entfernen. Spar dir das auf. Und wir müssen unseren Importen die unbekannte Hoffnung hinzufügen . Lassen Sie uns das hier auf Mounted hinzufügen. Spar dir das auf. Mal sehen, ob das funktioniert. Klicken Sie auf die Schaltfläche Löschen und zeigen Sie den modalen Treffer Escape an. Wir sehen, dass unser Logbuch nur einmal abgefeuert wird. Klicken Sie erneut auf Löschen und zeigen Sie den modalen Treffer Escape an. Wir sehen jetzt nah, dass es nur noch einmal ausgeloggt ist. Das funktioniert also nicht. Der Ereignis-Listener wird entfernt, wenn das Modal geschlossen wird. Und wenn wir weiter auf Escape hier klicken, sehen wir nichts ausgesperrt. Wir können jetzt einfach das Konsolenprotokoll aus der Handle-Tastaturfunktion entfernen . Spar dir das auf. Jetzt müssen wir nur noch diesen Fußball löschen. Wenn der Benutzer im Modal auf ON klickt, löschen. 104. Modal löschen – Die Note löschen.: Das letzte, was wir tun müssen, ist, die Notizen zu löschen , die der Benutzer löschen möchte, wenn er auf diese rote Löschschaltfläche klickt. Jetzt haben wir bereits eine Aktion „ Notiz löschen“ in unserem Shop. Regale, Geschäfte und speichern Node.js zu den Optionen. Wir haben bereits diese Aktionen „Notiz löschen“ eingerichtet, mit denen wir die Notizen löschen können. Bei all dem, was Sauerstoff erwartet ist die ID des Knotens , den wir löschen möchten. So können wir diesen Sauerstoff einfach direkt in unserer modalen Delete Note Dot Vue-Komponente auslösen . Lasst uns darauf springen. Auf den Lösch-Button , der hier ist. Wir wollen diese Aktion nur in unserem Geschäft auslösen. Notiz löschen, die eine ID erwartet, aber wir haben keinen Zugriff auf die Notizen-ID in dieser Komponente. Wenn wir jedoch zur Notenpunktansicht der übergeordneten Komponente springen , haben wir Zugriff auf alle Noteninformationen hier in dieser Notizstütze. Wir könnten dies verwenden, um die ID der Notiz mithilfe einer Requisite an die modale Löschknoten-Punktansicht der untergeordneten Komponente zu übergeben die modale Löschknoten-Punktansicht der untergeordneten Komponente . Springen wir zu einer modalen Lösch-Nope-Komponente auf, die hier ist. Wir könnten entweder die gesamten Notizobjekte weitergeben. Wir können diese Notiz so nennen, dass sie Noten entspricht. Dies würde die gesamten Objekte sowohl mit der ID als auch mit dem Inhalt weitergeben . Wir brauchen jedoch nur die ID tatsächlich. Also können wir genauso gut den Ausweis nur weitergeben. Um dies zu tun, könnten wir Notizen weitergeben und vielleicht einfach den Namen der Requisite in Note-ID, CamelCase, ändern. Spar dir das auf. Jetzt müssen wir die ID-Requisite dieser Notiz erhalten, die modale Löschpunkt-Vue-Komponente. Also lasst uns dazu springen. Springe zu unseren Requisiten. Mir ist erlaubt, dass dieser Requisitentyp eine Zeichenfolge sein wird. Ich werde dies auch erforderlich machen. Ich setze „erforderlich“ auf „true“. Speichern wir das und stellen sicher, dass diese Knoten-ID-Eigenschaften durchkommen. Nach unserem Inhalt hier. Das Modal, lassen Sie uns einfach Pre-Talk mit doppelten geschweiften Klammern und Note-ID ausgeben , speichern Sie das, laden Sie das Modal neu und zeigen Sie es an. Und ja, wir können sehen, dass ID1 für die erste Note ausgespuckt wird, eine ID, um für die zweite Note ausgespuckt zu werden. Lasst uns dieses Vor-Tag loswerden. Wir müssen jetzt nur unseren Shop und unsere Meinungen in diese modale Komponente importieren , anpassen, diese Lösch-Note-Auktion auslösen und die ID übergeben. Zuerst müssen wir es importieren. Wir können einfach importieren. Verwenden Sie Notizen aus dem Slash Stores Slash Store speichern. Eigentlich nein, lassen Sie uns Schrägstrich-Store-Notizen hinzufügen. Spar dir das auf. Wir müssen diesen Shop einer Konstante zuweisen. Also nach unseren Requisiten und Limits innerhalb eines Store-Befehls, und einfach const speichern Notizen gleich speichern Notizen, Klammern verwenden. Spar dir das auf. Und wir sollten jetzt Zugang zu einem Geschäft haben. Diese Aktion „Notiz löschen“ innerhalb des Stores. Springen wir zum Lösch-Button, der hier ist. Ich teile dies auf mehrere Zeilen auf, teile die Attribute auf mehrere Zeilen auf und füge einen Klickhandler hinzu. Wir wollen nur die Delete Note-Auktion auslösen, die sich in unserem Shop befindet. Also können wir einfach Stola Notizen machen, Dot Delete, Notiz, übergeben Sie die ID. Und wieder geben wir die ID, die ID-Requisite dieser Notiz, weiter. Wir können einfach Stola Notizen machen Dot Lösche Notizen, Notizen, ID. Lasst uns das speichern und sehen, ob es funktioniert. Erneut laden, klicken Sie auf Löschen. Klicken Sie erneut auf Löschen. Wir können sehen, dass die Notiz gelöscht wurde. Wir können auch sehen, dass das Modal auch automatisch ausgeblendet wird. Lassen Sie mich auf Löschen klicken. Und das liegt daran, dass das Modal eine untergeordnete Komponente der Notenpunktansicht ist . Notizpunktansicht ist die Komponente, die wir verwenden, um eine Notiz anzuzeigen. Wenn wir eine Notiz löschen, wird diese Notenpunkt-Vue-Komponente zusammen mit allen untergeordneten Komponenten, einschließlich der modalen Delete-, Note-Dot-Vue-Komponente, aus dem Dump entfernt zusammen mit allen untergeordneten Komponenten, einschließlich der modalen Delete-, Note-Dot-Vue-Komponente, aus dem Dump . 105. Kurs Roundup: Herzlichen Glückwunsch, du hast es bis zum Ende geschafft. Ich hoffe, Sie fühlen sich jetzt bereit, Ihre eigenen Ups mit V3 und der unglaublichen Kompositions-API aufzubauen . Ich hoffe auch, dass dieser Kurs Ihnen geholfen hat, die massiven Vorteile zu verstehen , die mit der Kompositions-API gegenüber der Options-API verbunden sind . Stellen Sie sicher, dass Sie das Wissen aus diesem Kurs behalten , indem Sie Apps mit der Kompositions-API erstellen. Sobald du zählst, könntest du versuchen die Nope-Bälle von Grund auf neu aufzubauen. Oder du könntest versuchen einen Klon von einem deiner Lieblings-Ups zu erstellen. Wenn du mehr von mir erfahren willst und zu Dannys Punktlink-Schrägstrich YouTube springen willst, wo du meine YouTube-Kanal-Makeups mit Danny findest, wo ich unzählige kostenlose Inhalte auf Vue.js teile, quasar Framework, Verschönern und VS-Code auf viel mehr. Schauen Sie sich auch meine anderen Freemium-Kurse an, die in Dot-Link-Slash-Kursen durchgeführt werden . Alle Links zu meinen Premium-Kursen auf dieser Seite gelten automatisch für meinen Sonderrabatt. Also habe ich bei jedem Kurs einen Kurs über Verschönerung, der das beliebteste Komponenten-Framework für Vue.js ist. Leider, zu der Zeit, als ich aufnehme unterstützt dieses Verschönerte nicht ein paar drei, aber hoffentlich wird es das bald tun. Dann habe ich drei Kurse über Quasar-Framework , ein absolut unglaubliches Framework, mit dem Sie eine Vue.js mit einer einzigen Codebasis erstellen auf vielen verschiedenen Plattformen bereitstellen können. Sie können es in einer echten App bereitstellen, die in den App Stores für iOS, Android, Mac und Windows bereitgestellt werden kann bereitstellen, die in den App Stores für iOS, Android, Mac und Windows bereitgestellt . Sie können es in einer einseitigen Anwendung und einer progressiven Web-App-Serverseite bereitstellen , die sogar auf eine Browsererweiterung für Chrome oder Firefox gerendert wird. Die neueste Version von Quasar, diese unterstützen V3 und die Kompositions-API. Zu dem Zeitpunkt, an dem ich dies aufnehme, gelten diese Kurse jedoch für U2 und die Options-API. Mit allen Fähigkeiten , die Sie in diesem Kurs gelernt haben, sollten Sie jedoch in der Lage sein, diese Kurse mit v3 zu verfolgen . Ich bin die Kompositions-API. Schließlich habe ich einen kurzen Kurs, in dem ich Ihnen die Grundlagen von HTML, CSS und JavaScript beibringe . Ich füge dieser Vorlesung Links zu meinem YouTube-Kanal auf der Seite Kurse an. Danke fürs Zuschauen, und ich hoffe, es gefällt Ihnen Sachen mit der Kompositions-API zu bauen.