Vue JS - 5 Web-Apps erstellen [2/5] | David Katz | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Vue JS - 5 Web-Apps erstellen [2/5]

teacher avatar David Katz, Software Engineer - Coding Instructor

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

8 Einheiten (37 Min.)
    • 1. Die Vorschau von Starbase

      0:53
    • 2. Starbase einrichten

      2:40
    • 3. . Vue Dateien

      6:17
    • 4. Grundlegendes Styling mit Css

      2:59
    • 5. Einführung der API

      6:37
    • 6. Creating erstellen

      5:33
    • 7. Finalizing es sich

      7:18
    • 8. Strukturieren der Zeichen

      4:29
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

260

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Werde ein in-demand Software-Engineer, indem du dieses Tutorial auf Vue Js nutzst. Als eines der am schnellsten wachsenden Frameworks für die Webentwicklung ist das Lernen von Vue ein Muss. Einfach ausgedrückt, dass Vue Türen und Jobs für dich öffnen wird.

 

Dieser projektbasierte Kurs wird dich sofort programmieren. Durch die Erstellung von fünf sorgfältig durchdachten Beispielanwendungen werden deine Fähigkeiten in der modernen Webentwicklung verschärfen.

 

Erlernen Sie zunächst die wesentlichen Elemente von Vue durch die wichtigsten Konzepte und Syntax Dann kannst du deine erste single-page mit Vue erstellen. Zweitens erstellen Sie eine Anwendung, die HTTP in Vue verarbeitet und eine öffentliche API verwendet. Erweitern Sie diese Anwendung als nächstes und lernen VueRouter für mehrseitige Anwendungen. Viertens kannst du eine Anwendung erstellen, die mit Vuex zur Verwaltung von Daten arbeitet. Schließlich kannst du sie abschließen, indem du eine App mit voller Authentifizierung und einer Echtzeitdatenbank erstellen kannst.

 

Du lernst nicht nur Vue, sondern wesentliche Bibliotheken wie VueRouter und Vuex. Vuex kann einen Ruf für Komplexität haben, aber du wirst in diesem Kurs ein geheimes Rezept finden, das Vuex auf drei einfache Schritte bringt!

 

Schließlich mache dir keine Sorgen, wenn du neu in der Webentwicklung bist. Einige JavaScript werden helfen, aber dieser Kurs erklärt jedes neue Konzept gründlich.

 

Worauf wartest du also noch? Nimm den Einstieg in VueJs. Lass uns mit der Codierung beginnen!

Triff deine:n Kursleiter:in

Teacher Profile Image

David Katz

Software Engineer - Coding Instructor

Kursleiter:in

David is a software engineer at Zendesk, with a Bachelor of Computer Science from the University of San Francisco.

David has gained valuable experience from the tech industry. By incorporating these best practices, he hopes to create the highest quality learning experiences possible.

Feel free to connect with David! He is always curious about the cool project you're working on. And he loves to discuss ideas on how to build impactful technology.

Vollständiges Profil ansehen

Skills dieses Kurses

Technologie Webentwicklung Vuex

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Die Vorschau von Starbase: Willkommen bei der Sternenbasis, der schnellste Weg, um Ihre Gruppe von Star Wars-Charakteren zu generieren. Es funktioniert genau so. Beim ersten Laden werden drei Zeichen hochgeladen. Wir haben Luke Skywalker, Chewbacca und Han Solo, paar Fan-Favoriten. jedoch Wenn Siejedocheinen Charakter mit einem zufälligen Charakter für die Basis ausschalten möchten, klicken Sie einfach auf die Karte dieses Charakters. Sie gehen weiter auf diese Karte, bis Sie eine haben, die Sie lieben. Eine zweite View-Anwendung wird zusammen erstellen Sie lernen, in solidify grundlegendere Ansichtskonzepte . Darüber hinaus lernt man, wie man mit einem A P I arbeitet, um dynamische Daten aus dem Nassen zu erfassen. Außerdem wird ein neues Werkzeug zum Erstellen von Ansichtsanwendungen eingeführt, das View Klay genannt wird. Dies richtet automatisch View-Projekte ein und gibt uns eine Reihe von nützlichen Funktionen für die View-Entwicklung . Mit dem gesagt, lasst uns loslegen 2. Starbase einrichten: Alles klar, lassen Sie uns anfangen, diese sternbasierte View-Anwendung zu kochen. Zunächst müssen wir sicherstellen, dass wir das View Klay Tool auf Ihrem System installiert haben. Nun ist die Ansicht Kelly ein Kommandozeilentool, mit dem wir ganze Ansichtsprojekte mit einfachen Befehlen einrichten können . Also gehen Sie zu Ihrem Terminal und führen Sie diesen Befehl aus, um die Ansicht sauber zu installieren, verwenden Sie NPM, die Knoten Paket-Manager, NPM, Installieren, Anzeigen, Dash Klay und Dash D ist NPM, Installieren, Anzeigen, , was bedeutet, dass wir global auf unserem System installiert werden. Auf diese Weise können wir von jedem Ordner auf unserem Terminal aus zugreifen, um ein View-Projekt zu initialisieren . Richtig, also wird dieses Skript ein wenig dauern. Sollte nicht zu lange dauern, aber es wird die Ansicht Clive für uns erstellen, so dass Sie voran gehen und positionieren Video. Ich wäre durch einige Bearbeitungszauber gesprungen. Auf diese Weise müsst ihr euch diese ganze Installation ansehen. Und wenn Sie fertig sind, sollten Sie eine Ausgabe in Ihrem Terminal erhalten, die diesem sehr ähnlich aussieht. Gehen Sie nun in Ihr Verzeichnis zum Erstellen von Ansichtsprojekten. Wenn Sie den Ordner einer Anwendung erstellen, um alle Ihre Ansichtsbeispiele zu speichern, navigieren Anwendungen zu diesem Verzeichnis. Jetzt werden wir einen einfachen Befehl ausführen, um ein View-Projekt basierend auf dem Web Pack, einfache Vorlage von Ansicht zu Ausführungsansicht und es zu behandeln und dann ging Pack einfach, was bedeutet, dass wir Ansichten verwenden. Web-Pack, einfache Vorlage. Und wir werden unsere Projekt-Sternenbasis nennen, was das allerletzte ist, was in unserem Commit jetzt ist. Ein Paket selbst ist ein Tool, das es uns ermöglicht, einen Server zu starten, um unseren View Coat zu hosten und Änderungen des Anwendungsupdates in Echtzeit zu sehen. Jetzt finden Sie also eine Reihe von Fragen, und Sie können einfach die Eingabetaste für jeden Schritt drücken, um jeden Schritt zu überspringen. Nun, wenn alle Richtungen navigieren wir zum Sternenbase-Verzeichnis, das erstellt wird. Führen Sie die NPM-Installation aus. Aber um den Node Modules Ordner für uns zu erstellen , der voll von wichtigen Job-Skriptdateien ist, die uns helfen, unsere Anwendung auszuführen. Wenn Sie NPM-Installation sind, wird der Befehl weiterhin ausgeführt. Gehen Sie weiter und pausieren Sie das Video und setzen Sie es fort, sobald Ihre Ausgabe so aussieht. In Ordnung, jetzt, wo du zurück bist, wird endlich den letzten Befehl ausführen, um den Tempel zu sehen. Es würde Anwendung in Aktion, um NPM laufen Tod laufen zu lassen. Dies wird ein Fenster für uns starten. Und los geht's. Wir haben unsere sternbasierte Anwendung und Boom! Sehr nett. Sie sehen die Standardanwendung aus der Web Pack-einfache Vorlage, die gerade da ist. Nützliche Dokumentation und eine Reihe von Links und genial. Wir haben eine grundlegende Ansicht und MIT Anwendung gehen, dass wir aus unserer Sicht sauber erstellt. Nun, da wir unsere App eingerichtet haben, lassen Sie uns fortfahren, das eigentliche Projekt einzurichten und den Code für die Sternenbasis aufzuschreiben. 3. . Vue Dateien: Fangen wir an, Sternenbasis zu programmieren. Öffnen Sie den Code für diese Anwendung in Ihrem Code-Editor und lassen Sie auch ein Fenster laufen, in dem Sie NPM ausgeführt haben . Führen Sie Devin Ihr Terminal. Auf diese Weise können Sie alle Änderungen sehen, die wir an dieser Anwendung tun. nun Wenn Sienunin den Quellordner wechseln, werden Sie sofort einen neuen Dateityp mit der Punktansicht der Erweiterung bemerken. Ansichtsdateien haben drei Hauptabschnitte. Das Vorlagenskript und der Stilabschnitt. Im Abschnitt Template können wir angeben, wie wir möchten, dass unser HTML nach der spezifischen Ansichtskomponente suchen . Der Skriptabschnitt Verluste erstellen tatsächlich View-Instanzen und Komponenten, um die Vorlagen interaktiv zu machen . Saw Abschnitt funktioniert genau wie CSS, wo wir Klassennamen definieren können, um Abschnitte der Vorlage einige andere zu geben. Sieht in Ordnung aus, um mit der Entwicklung dieser Anwendung zu beginnen, wir werden etwas Verrücktes tun. Lassen Sie uns den gesamten Quellhalter löschen. Das ist richtig. Löschen Sie den gesamten Quellordner. Holen Sie sich also eine Quelle und löschen Sie. Jetzt ist der richtige Weg, um die Sicht wirklich zu verstehen, die Dinge von Grund auf zu . Will sicherstellen wollen, dass wir wissen, wie jede Zeile funktioniert. Also, sobald Sie diesen Quellordner löschen. Das erste, was wir nehmen werden, ist, unseren eigenen leeren Quellordner zu erstellen. Also gehen Sie zu Ihrer sterbasierten Anwendung, erstellen Sie einen neuen Ordner und nennen Sie es Quelle oder S R C. Lassen Sie uns jetzt eine Hauptpunkt-Js-Datei erstellen. Holen Sie sich also eine neue Quelldatei, Hauptpunkt Js und der ganz oben wird das View-Modul importieren. Also lassen Sie uns Ansicht aus der Ansicht importieren. Dann definieren wir eine neue Ansicht. Instanziere die Ziele das App-Element in unserem Index dot html, um neue Ansicht zu sagen. einmal nimmt es ein Optionsobjekt. Ein Element, das wir wollen, ist die i d. Aber der Name der App so wirklich schnell lassen Sie uns einen Blick auf diesen Index Punkt html fünf werfen. Tat sehen Sie das DIV mit der Idee der App in ihrem Index HTML, den wir mit unserer View-Instanz anvisieren müssen , sehen Sie auch ein sehr interessantes Skript mit der Quelle des Schrägstrichs Dest Slash Build A. J. S. Dieses Skript wird tatsächlich automatisch von unserem Web Pack Deb-Server generiert. Wenn wir NPM ausführen Tod, wird das Skript geändert Punkt Js Darstellung aller Punkt-View-Dateien und Javascript-Dateien , die wir für die Anwendung schreiben. Wenn Sie sich die Web-gepackte Punkt-Konfigurationsdot-J-Datei ansehen, werden Sie feststellen, dass der Ausgabepfad für den Ordner Schrägstrich dist ist ist. Und der Dateiname ist Build Dot Js. nun ein tieferes Verständnis dafür wünschen, Wenn Sienun ein tieferes Verständnis dafür wünschen,wie Web Pat funktioniert, dann würde ich meinem Kurs definitiv das vollständige Job-Skript und das TSX-Tutorial empfehlen, einschließlich Is Seven und React am Ende dieses Kurses. Sie finden auch einen Vortrag, einschließlich eines Rabatts darauf, also gehen Sie weiter und überprüfen Sie es dort. In diesem Kurs gehen wir über Web Pack und richten diesen Live-Entwicklungsserver von Grund auf neu ein. Es ist also wirklich hilfreich, um zu verstehen, wie die Web Pack-Duck-Config-Dot-Js-Dateien funktionieren und es auch kundenspezifisch zu machen. Alles klar, weitermachen. Lassen Sie uns jetzt unsere eigene Abdullah-Ansichtskomponente direkt neben dem Hauptpunkt Js erstellen. Weit so gut eine Quelle. Neue Datei Punktansicht Sehr cool Von diesem leeren Schiefer, lassen Sie uns einige Vorlage Steuer hinzufügen. Diese Vorlage wird sein, was am Ende für die apt up Ansichtskomponente abgebildet wird, wenn auf dem Bildschirm eine Vorlage gepaart mit einem Template-Tag in dieser Vorlage jetzt additiv mit der Idee, dass dies das Element sein wird, das unsere zukünftige Ansicht -Instanz Attach ist auch. Also mach ein div, dessen ich gleich oben bin. Lassen Sie uns nun dem Skriptstück unserer Punktansicht weit einige Ansichtsfunktionen hinzufügen. Also noch einmal brauchen wir ein Paar von Skript-Tags, und dieses Paar von Skript-Tags wird auch einige JavaScript ausführen, um Interaktivität zu unserer Vorlage zu berühren , sagte Elements, der Anfang wird ein neues Standardobjekt exportieren, was zu unserer Ansicht wird. Instanz. Es ist gute Exportvorgaben und im gesamten NT-Objekt. Jetzt wird der Name ihres Exportobjekts auf sein, und dann werden wir auch eine Datenfunktion einschließen. können wir jetzt Im Gegensatz zu einer View-Instanz kein Datenobjekt wie View-Komponenten verwenden. Wir müssen eine Datenfunktion verwenden, die selbst ein inneres Objekt zurückgibt, das mich repräsentiert, die Daten, die wir für diese Komponente wollen. Moment haben wir nur einen Titel für App namens Generate Your Team, um eine Datenfunktion zu machen. Vergessen Sie nicht das Rückgabe-Schlüsselwort, um das tatsächliche innere Objekt zurückzugeben. Der Titel wird Ihr Team generieren. In Ordnung. Nun, alles, was mit dieser APP-Komponente zu tun hat, ist, das Titelstück der Daten zu nutzen und es in unserer Vorlage erscheinen zu lassen. Fügen Sie also vor drei Elementen des Div hinzu und innerhalb verwenden wir den guten alten Schnurrbart in Beziehung, um die Titelzeichenfolge in unsere App einzufügen. Ich hatte also eine Drei. Lasst uns Schnurrbart und Trübsal benutzen und den Titel eintragen. Schließlich nutzen wir die Rendermethode für View-Instanzen und verwenden gerendert, um diese Entführungsansichtskomponente tatsächlich auf den Bildschirm zu werfen. Gehen Sie zu Hauptpunkt Js, weil das ist, was wir die Rendermethode verwenden und einen Parameter hat, der sich um das eigentliche Rendering und die Erstellung des Elements kümmert und schwächt. Betitelt es alles. Es ist im Renderfeld. Dann haben wir eine innere Pfeilfunktion mit einem Parameter und wir werden es einfach H nennen. Es kann wirklich alles sein, was wir wollen, aber H ist ein Standardmuster. Lassen Sie mich sagen, h wir wollen die App jetzt rendern, bevor wir die App machen, die wahrscheinlich denken , Natürlich müssen wir die App so gut in Port-App aus AP Draufsicht importieren. Lassen Sie uns das speichern und wie wir es neu laden, erhalten wir generieren Ihr Team auf dem Bildschirm erscheint. Sehr cool, außer dass es nicht so sauber aussieht wie zuvor, also kümmern wir uns um ein grundlegendes Styling als nächstes mit CSS. 4. Grundlegendes Styling mit Css: Lasst uns jetzt dafür sorgen, dass die Sternenbasis schön aussieht. Wir würden nicht auf dem Beauty Festzug verlieren wollen. Immerhin. Eines der schnellsten Dinge, die wir tun können, ist eine bereits gut gemachte CSS-Bibliothek für die Anwendung. Nein, ich beziehe mich auf Boot Shop, dessen Stylings dies schnell in eine professionell aussehende App verwandeln werden. So können Sie entweder Bootshot nachschlagen, anfangen, sie einheitliches CSS zu finden, wieder online zu fallen, oder auf ein vorheriges Projekt zurückblicken, das es bereits hat. Zum Beispiel, Note-Master-Index dot html. Gehen Sie voran und kopieren Sie, dass lange eine Max CD und Bootstrap-Link, und wir werden es in Stern-Basis-Index html setzen. Großartig. Es ist also nachladen, und das sieht schon besser aus. Jetzt ist es noch nicht richtig. Lassen Sie uns jetzt unser eigenes Stylesheet erstellen und unnötige Klassen und benutzerdefinierte Stylings die unseren Bedürfnissen entsprechen, um einen nächsten Satz zu erstellen. CSS-Datei, rechts nächster Indexpunkt HTML war in Ordnung. Starbase new file index dot CSS First up wird die Körperkomponente anvisieren und ihm einen dunklen Hintergrund geben . Also nicht gerade schwarz, sondern eine ziemlich dunkle Farbe. Also ein niedriger 263238 und dann werden wir unsere Anzeigenkomponente anvisieren. Also Pfund auf so auf die eine mit der Idee davon bezeichnet. Ich muss sagen, die Schriftfamilie ist Avenir, deren Verstärkung Helvetica ist. Wer ist wieder da? Ist Ariel, dessen Verstärkung San Serif ist. Wenn ich sage, sichern, wird die Anwendung zuerst versuchen, den Avenir-Spaß zu laden, aber wenn das nicht geladen wird, dann lädt es Helvetica. Nun, wenn Sie das auch nicht finden können, als es Luft lädt, dann lädt es schließlich Sand Saref. Dann haben wir eine Web-Kit Schriftart Glättung Eigenschaft Anti eine liest, die unsere tatsächliche Funt runden wird. Dann haben wir eine mas OS X Schriftartglättung, die uns weiterhin einige Nächte umgibt für unsere Funt geben wird. Sie sind online, Alles in die Mitte. Wir stellen sicher, dass die Farbe über dem Text weiß ist, so dass sie vor unserem dunklen Hintergrund erscheint. Und dann wollen wir sicherstellen, dass die AB-Komponente nicht wirklich die Oberseite berührt, also geben wir ihr einen oberen Rand von 60 Pixeln. Nun, wie Sie dies sagen, wird es noch nicht auf dem Bildschirm neu geladen, weil wir HTML indizieren und den tatsächlichen Stylesheet-Link hinzufügen müssen, der sich auf unsere lokale Indexpunkt-CSS-Datei bezieht , um einen echten Stylesheet-Link zu erstellen, und dann werden wir auf lokalen Index Punkt CSS verweisen. Lassen Sie uns speichern und neu laden. Und während unsere Anwendung bereits gut aussieht, so dass keiner von euch sich um Styling kümmert, lassen Sie uns weitergehen, um Starbase einige tatsächliche Funktionalität zu geben . 5. Einführung der API: Willkommen im Star Wars, AP I. Dieses FBI ermöglicht uns Zugriff auf verschiedene Endpunkte, um Informationen über verschiedene Charaktere, Planeten, Planeten, Raumschiffe und andere nette Dinge aus dem Star Wars-Universum zu erhalten. Neben all den kostenlosen Informationen, die wir über diese tolle Welt bekommen, eines der besten Dinge über diese a p. i. das Schlüsselwort frei. Es kostet absolut nichts zu benutzen. ist keine Registrierung für einen Schlüsselcode erforderlich, und es ist genau für Lernzwecke erstellt. Perfekt für uns. In diesem Sinne, lasst uns zum Code kommen und lernen, wie man mit diesem a p I A direkt innerhalb unserer sterbasierten Anwendung interagiert und nur als Referenz, es ist bei S W a p i dot co verfügbar. Gehen Sie also zur Entduct-View-Komponente und fügen Sie neben der Datenfunktion ein Methodenfeld hinzu, das für jetzt ein leeres Objekt sein wird. Okay, lassen Sie uns jetzt unsere erste Methode namens fetch-Zeichen erstellen, die das A p I verwenden wird, um einige Daten zu erfassen. Keine Ahnung, wie ich das Wort fetch benutze. Nun, das ist genau das, was die meisten modernen Browser an dieser Stelle nutzen wird. Unterstützen Sie die Verwendung des fetch a p I in JavaScript, um Web-Anfragen zu behandeln. Jetzt halt hoch. Warten Sie eine Minute. Was unsere Webanfragen? Du stellst vielleicht tolle Fragen. Um es einfach auszudrücken. Webanforderungen sind Möglichkeiten, mit denen Code mit Online-Endpunkten interagieren kann. Meistens gibt es die Get-Wet-Anfrage, die einfach Informationen wie HTML- oder JavaScript-Datendateien von einem Server erhält. Auch ziemlich häufig wird die Post Web Request verwendet, die Informationen an einen Server sendet, so dass sie sie in einer Datenbank oder einem Lösegeldcode damit speichern können . Für unsere Zwecke werden die Vorteile der get Anfragen, um Informationen über den Charakter, die wir von den Star Wars wollen zu greifen . A P I. Lassen Sie uns einen holen ein p I verwenden, indem Sie die fetch-Funktion aufrufen. Angenommen, wir haben Schlüsselwort holen nicht die Fetch-Funktion als zwei Parameter. Der erste ist der eigentliche Endpunkt, den wir treffen wollen. Die zweite ist oft Objekt, wo wir angeben, welche Art von Web-Anfrage, die wir zu verwenden beabsichtigen . Lasst uns vorerst die Star Wars ein p I treffen. Also ist es los. Http Schrägstrich s w a p i dot co Schrägstrich ap Ich Schrägstrich Leute und dann für den zweiten Parameter wird ein Optionsobjekt mit der angegebenen Get-Anforderungsmethode haben. Wird sagen, Methode ist großartig. Jetzt könnte dies allein beginnen, einige Daten aus dem A p I zu ziehen. Allerdings brauchen wir immer noch eine Möglichkeit, die Rückgabedaten zu behandeln. Dies wirkt sich auf Funktion tatsächlich zurück, was als JavaScript-Versprechen bezeichnet wird, was nur eine Möglichkeit ist, ein Stück Daten in JavaScript darzustellen, das für einen ausstehenden zukünftigen Wert sitzt . In unserem Fall ist dieses Versprechen perfekt, da wir nicht sicher wissen können, wann dies a p ich die Daten zurückgeben wird. Es kann einige Zeit dauern, aber wir wollen tatsächlich einen Code ausführen, wenn wir die Daten erhalten, um ein Versprechen zu behandeln, verwenden wir eine dot ven-Anweisung und argumentieren inter arabische Funktion genau so. Also zu einem Zeitpunkt zum Abruf und wir werden die Antwort speichern und dann gehen Sie voran und konsul Punkt protokollieren, dass Antwort Jetzt, Soweit das Testen geht, lassen Sie uns eine schnelle Schaltfläche zu unserer Vorlage hinzufügen, die uns erlaubt, die fetch-Zeichen-Methode und sehen, was passiert. Also nach dem Titel, lassen Sie uns eine Schaltfläche hinzufügen wirklich schnell wird sicherstellen, dass es gut aussieht, so Klasse gleich Taste und Taste primäre. Lassen Sie uns einfach sagen, Test holen Zeichen und innerhalb werden wir unsere Ansicht auf Click-Handler haben, um zu rufen , holen Zeichen. Nun, da wir diese Funktionalität haben, lassen Sie uns zu unserer Anwendung gehen. Gehen Sie weiter und inspizieren Sie das Element. Auf diese Weise behalten wir den Überblick, was in der Konsole vor sich geht und lassen Sie uns auf Fetch-Zeichen klicken . Also dort haben wir eine Antwort mit dem Typ. Natürlich bist du das. L Header ein Körperelement, das wirklich cool ist. Jetzt werden Sie feststellen, dass wir tatsächlich eine Antwort bekommen, was großartig ist, außer dass sein Inhalt nicht genau das ist, was wir im Sinn hatten. Es ist ziemlich kompliziert. Wir wollen auf Optionen Objekt wie so aus dem sumpfigen a p I gezeigt. Nun, wie greifen wir eigentlich, dass? Nun, Glück hat diese Antwort hier eine Punkt-Jason-Methode innerhalb ihres Prototyps, die Punkt-Jason-Methode zurückgibt sind lesbarer Datenstrom in der Körpereigenschaft einer Antwort in ein Jason-JavaScript-Objekt. Also verwandelt es diesen Körper genau hier, der ein lesbarer Strom ist in etwas, das wir tatsächlich direkt in unserem Code verwenden können. Diese Dajae-Methode selbst gibt ein Versprechen zurück, alles, was wir tun müssen, ist einfach eine weitere Punkt-Anweisung zu haben , und dieses Mal werden wir die Antwort eines Parameters protokollieren, der Jason aufruft. Mit unseren Spots anstelle von Council Logging wird es Antwort zurückgeben, dass Jason, dann innerhalb der anderen Anweisung haben wir einen inneren Jason-Handler für eine innere Pfeilfunktion . Nun, einfach vertraute Log Jason, Lassen Sie uns speichern und dass wir jetzt eine aktualisierte Methode haben. Also lasst uns neu laden. Lassen Sie uns den Match-Charakter testen. Und dort bekommen wir ein Objekt, das genau das ist, was wir wollten. Also hier haben wir eine Anzahl von Menschen, weil das die Anzahl der Ergebnisse ist, die wir bekommen. Wir bekommen eine Reihe von verschiedenen Charakteren innerhalb unserer Leute und Punkt. Also lasst uns sehen, was passiert, wenn wir es hash und i d bis zum Ende davon sind. Bei einem aktualisierten Objekt handelt es sich also um einen Neuladetest für jedes Zeichen. Also mit Luke Skywalker, bekommen wir das eigentliche Objekt, das wir wollen. Also haben wir Augenfarbe von blauen Haaren, Farbe blond, Geschlecht, männlich. Er hat einen blauen Lichtschwert, der hier nicht aufgeführt ist, obwohl ich dachte, dass ich das reinwerfen würde. Aber jedenfalls haben wir mit unserer Fetch-Funktion so sehr cool bekommen, was wir uns gewünscht haben. Wir haben jetzt Interaktivität mit einem A P I direkt in unserer Dot-View-Datei, was großartig ist. Lasst uns nun die Sternenbasis weiterentwickeln und diese Methode in eine hingebungsvolle Charakterkomponente platzieren , so dass wir tatsächlich etwas vorne bekommen und auf unserem Bildschirm aktualisiert werden. 6. Creating erstellen: mit Sternenbasis. Wir wollen mehrere Charaktere in ihrer Bewerbung haben. Auf diese Weise hat dieser Titel von Generate Your Team eine gewisse Bedeutung. Alle diese Zeichen, und wir können eine beliebige Anzahl von ihnen laufen die gleichen wirkt Mantel. jedoch Wir wollenjedochnicht die gleiche Fetch-Funktion mehr als einmal für jedes generierte Zeichen schreiben müssen . Was können wir also als Lösung tun? Jetzt? Dies scheint der perfekte Zeitpunkt zu sein, um eine Ansichtszeichenkomponente für unsere Anwendung zu erstellen. Es befindet sich in einem Komponenten-Ordner im AB-Quellverzeichnis und erstellen Sie eine Zeichenpunktansichtsdatei . Lassen Sie uns gehen, um neue Ordnerkomponenten Quelle. Lassen Sie uns eine Zeichen Punktansicht foul neue Datei Zeichenansicht. Fügen wir nun die Vorlage und Skripte für die Zeichenkomponente hinzu. Moment fügen wir eine Vorlage mit einem leeren inneren def hinzu, und wir werden herausfinden, wie man das Zeichen strukturiert. Sobald wir unsere Methoden und Daten alle innerhalb des Skriptabschnitts in der Vorlage eingerichtet haben, geben wir dem passenden schließenden einen und dann einen Skriptabschnitt. Natürlich, vergessen Sie nicht, dass intuitiv mit einer Vorlage für jetzt. Alles klar, jetzt ist es an der Zeit, den Skript-Teil der Komponente hinzuzufügen, was einige Ansichtsinteraktivität hinzufügen wird. Immer. Wir möchten dies als Ansichtskomponente initialisieren, so exportieren wir ein Standardobjekt, in dem wir alle Optionen für unsere View-Funktionalität platzieren können . Also nochmals, exportieren Sie Standardwerte für leeres Objekt. Zunächst geben wir diese Optionen Objekt die Zeichenkomponentendaten Einige Anfangsdaten innerhalb einer Datenfunktion . Denken Sie daran, wir müssen ein Objekt innerhalb dieser Funktion zurückgeben. Für den Moment haben wir ein Feld namens Zeichen, wie Sie vielleicht erraten haben, dass Karten auf ein leeres Objekt und absolut sicherstellen, dass Sie nicht die innere Rückkehr vergessen. Schlüsselwort. Also hier haben wir unsere Datenfunktion. Und vergessen Sie nicht, dass Rückgabe-Schlüsselwort und wurden ein Objekt mit dem Zeichenschlüssel mit einem Wert eines leeren Objekts zurückgegeben . Für den Moment, in Ordnung. Jetzt möchten wir diese Fetch-Methode aus der APP-Komponente hinzufügen, die Stelle innerhalb unseres Charakters. Also zuerst bei einem Methodenobjekt neben der Datenfunktion, und dann schneiden wir die Fetch-Zeichen-Methode, die wir zuvor erstellt haben Interact, betrachten Sie die Komponente und platzieren Sie sie direkt innerhalb der Methoden für die Zeichenpunktansicht. Also holen Sie sich ab View. Lassen Sie uns das Fetch-Zeichen hier herausnehmen, speichern Sie das und platzieren Sie es in der Charakter-Punkt-Ansicht. Großartig. Mit dieser Methode zu unserer Zeichenkomponente hinzugefügt, lassen Sie uns ein paar Änderungen vornehmen, denn man wird die Methode ändern, um das Zeichenstück der Daten mit der Rückkehr Jason zu aktualisieren . Anstatt vertraute Protokollierung, Jason wird sagen, dass dieses DOT-Zeichen gleich dem Jason ist. Zweitens, wird eine Zeichendaten innerhalb unserer Vorlage in einigen Schnurrbart interpoliert Syntax platzieren, nur um den Inhalt für jetzt zu überprüfen. Also lassen Sie uns sagen, in diesem Schnurrbart wird Charakter setzen. In Ordnung, wir sind gerade bereit, diese Komponente unserer Anwendung hinzuzufügen, außer es gibt eine Frage, die Sie vielleicht im Sinn haben. Es gibt keine Schaltfläche in der Zeichenkomponente. Also, wann wird diese Fetch-Zeichen-Methode ausgelöst? Sie wissen schon, Ausgezeichneter Punkt Rückruf. Die vorherige Diskussion der Lebenszyklus-Hooks wird den erstellten Lebenszyklus-Hook nicht nutzen , um Code auszulösen, wenn diese Zeichenkomponente für die Anwendung gemacht wird . Fügen Sie also eine einfache kreative Funktion hinzu und stellen Sie sicher, dass Sie dieses Stopp-Fetch-Zeichen innerhalb von After-Methoden bei einer erstellten Funktion aufrufen , genau wie Daten. Es muss eine Funktion sein, die wir dieses nicht viel Zeichen nennen, das sich auf dieses Fetch-Zeichen beziehen wird , das wir innerhalb von Methoden haben. Ausgezeichnet. Schließlich lassen Sie uns diese neue Charakterkomponente in unsere eigentliche App importieren. Also Köpfe in der Draufsicht und über dem Exportstandard müssen wir Zeichen aus Let's Find the Characters Ordner importieren , Entschuldigen Sie mich Components Ordner, und suchen Sie dann Zeichen Punkt Ansicht. Und jetzt müssen wir diese Komponente als tatsächlichen Teil ihrer Anwendung angeben. Wir tun dies mit den Komponenten Field of the View. Options-Objekt. Anstatt Methoden, wir an, wir haben jetzt Komponenten. Die erste 1 wird auflisten. Es wird Charakter sein. nun Dank einer Essex Kurzschriftensteuer auf die Strukturierung von Objekten können wirnundie Zeichenkette der Zeichenkomponente automatisch zuordnen , indem wir einfach nur Zeichen setzen. In Ordnung, lassen Sie uns den Test-Button mit einer Instanz der Zeichenkomponente platzieren. Lassen Sie uns diesen Knopf herausnehmen und dann ersetzen wir ihn durch ein Zeichen selbst umschließendes Tag. Wir werden es retten. Das ist Nachladen. Und da gehen wir hin. Unsere Fetch-Funktion hat am erzeugten Hook Off gearbeitet. Unsere Charakterkomponente ist ziemlich süß. Jetzt haben wir ein ziemlich verrückt aussehendes Stück Daten, die jetzt in ihrer Anwendung auftauchen. Aber ah Hasam, der die Zeichenkomponente erstellt hat, die jetzt den Fetch A P I verwendet. Und wir können dies verwenden, um die Fetch-Funktion so oft wie wir wollen mit mehreren Zeichenkomponenten aufzurufen . Lassen Sie uns auf Fuß gehen und fügen diesem Charakter mehr Verhalten hinzu. 7. Finalizing es sich: Wir haben gerade eine ziemlich süße und nützliche Charakterkomponente erstellt. Aber Sie haben vielleicht ein ziemlich eklatantes Problem mit diesem Charakter bemerkt. Wir importieren nur Daten für Luke Skywalker. Dies liegt daran, dass wir nur unsere get-Anfrage angegeben haben, Daten für den allerersten Eintrag in den Personenteil des A P I zu ziehen . Wir brauchen eine Möglichkeit, verschiedene Zahlen auf der get-Anfrage anzugeben, ist diese Art und Weise können wir Daten vier verschiedene -Zeichen. Glücklicherweise könnten wir das Requisitenfeld der View-Komponente nutzen, um die Fetch-Methode mit der Nummer zu aktualisieren , die wir an sie übergeben. Also Kopf zur Charakter-Punktansicht. Lassen Sie uns das Requisitenfeld direkt über Daten hinzufügen. Denken Sie daran, es ist ein leeres Arrangement für jetzt, aber dann werden wir eine I-D-Zeichenfolge setzen. Und vergessen Sie nicht das nachfolgende Komma. Niemand muss die fetch-Zeichenmethode aktualisieren, um einen Parameter von I D zu übernehmen und den fetch-Endpunkt mit einer interpretativen i d Variable anstatt dem hartcodierten aufzurufen fetch-Endpunkt mit einer interpretativen i d . Also holen Sie Zeichen und sein Parameter ist I D. Und dann innerhalb der Fetch-Zeichenfolge. Lassen Sie uns dies in einen Sechs-Ring verwandeln, so dass es die regulären Zitate durch Backticks ersetzt dann, anstatt der eine wird spät die I d. Variable mit der Dollar Curly Brace Syntax interpretieren . Großartig. Jetzt gibt es eine weitere Änderung für die Zeichenkomponente im ersten Aufruf von Fetch Character im erstellten Hook. Stellen Sie sicher, dass Sie diesen Punkt i D im Parameterfeld angeben, so dass wir ein gültiges I D übergeben, um Zeichen zu holen. Alles klar, bevor wir diese Datei speichern, gehen Sie zurück zur Ansicht zu handeln. Und es fehlt ein kritisches Stück in der Instanz unserer Charakterkomponente in der Anwendung. Es ist eine gute Entführung Ansicht, und Sie haben bemerkt, dass unser Charakter jetzt eine I D Requisiten braucht. Schnee wird v Bindung von I D zu einem hinzufügen. Und die Kurzschriften-Syntax für V Bind ist nur ein normaler Doppelpunkt. Also denken Sie daran, wir können die V Bind entfernen, weil View Doppelpunkt als V erkennt uns binden, während wir apt up Ansicht speichern , und wir speichern Charakter Punktansicht, wenn wir dort neu laden, wir bekommen immer noch Luke Skywalker. Außer dieses Mal holen wir uns tatsächlich mit der Vergangenheit von unseren Requisiten. Sehr cool. Nun ist das Tolle daran, diese Option der Idee von Requisiten zu haben, dass wir jetzt einige Looping verwenden können , um mehrere Zeichenkomponenten zu erstellen, die verschiedene IDs annehmen. also innerhalb der entduct-Ansicht Lassen Sie unsalso innerhalb der entduct-Ansichteine Liste von I. D. S direkt in unseren Daten für eine bestimmte Anzahl von Zeichen erstellen D. , die wir in Ihrer Anwendung laden möchten . Also, direkt neben dem Titel, fügen wir ein erstes Ideenfeld hinzu. Nun, sagte, es zu einem Array gewonnen haben 13 und 14 die einige coole Charaktere, die Sie in nur einem Moment sehen werden . Und jetzt, in ihrer Vorlage, wird diese Zeichenkomponente mit einem äußeren Div mit der Klasse der Kohle MD 12. umwickeln. Es ist eine negative Uhr ganze MD 12 und dann werden wir die vier Schleife verwenden, um durch die I DS in den ersten Ideen oder Rate in den Daten Schleife . Eins i d. Zu einer Zeit übergibt das I D an unsere benutzerdefinierte Charakterkomponente. Also nehmen Sie den Charakter heraus. Lassen Sie uns es hier platzieren wird eine V vier Direktive Schleife die vier i d zu platzieren. In den ersten i ds, was wir in Daten haben und dann kaufen wir immer noch die I D. Aber dieses Mal wird dieses ich d an unsere i d binden übergeben. Lass uns sparen und mal sehen, ob wir mehr als einen haben. Jetzt lass mich den Konsul schnell schließen. Und dann haben wir einen Luke Skywalker zu chibok A, das ist die Idee von 13. Und schließlich unser letztes Objekt. Ist Hans Solo sehr cool. Wir haben drei tolle Charaktere, die in unserer sterbasierten App erscheinen. Nun, für diejenigen von Ihnen, bei denen Ihr Konsul noch offen ist oder Ihr Terminal-Ausverkauf, werden Sie feststellen, dass wir hier eine Warnung erhalten, und es besagt, dass die Komponentenliste mit vorher explizite Schlüssel gerendert werden sollte. Jetzt ermöglichen die Schlüsselattribute ein leichteres Sortieren, Entfernen und Hinzufügen von Dibs für die Ansicht, damit diese Warnung verschwindet. Es gibt eine sehr saubere Lösung. Die for-Schleife nimmt tatsächlich einen optionalen zweiten Parameter , der den untergeordneten Index innerhalb der Schleife verfolgt. Also neben dem i D-Teil der V vier Schleife bei einem Indexparameter, sowohl innerhalb einer Reihe von Klammern, also habe ich dieses noch einmal mit einer Reihe von Klammern umschlossen, und jetzt können wir einen zweiten Parameter des Index haben und jetzt den Schlüssel von diese Komponente auf den Index innerhalb der vier Schleife Sochi gleich Index erstellt. Wie wir bei einem Neuladen sparen, bemerken Sie, dass Warnung verschwindet jetzt ich stimme zu, dass dies im Moment ziemlich schrecklich aussieht . Ich meine für uns Programmierer. All dieses JavaScript-Objektnotationsformat könnte jedoch ziemlich süß aussehen . Wir möchten, dass andere Leute diese App verwenden und eine saubere Oberfläche sehen, so dass wir in einem Moment zu bekommen. Aber bevor wir dies tun, fügen wir der Anwendung nur ein Stück schnelle Funktionalität hinzu, die es uns ermöglicht, Komparatorstunden mit einer zufälligen, basierend auf einem Klick auszuschalten . Also gehen Sie zurück zur Charakter-Punkt-Ansicht, und wir werden eine weitere Funktion namens switch character hinzufügen. In der Zeichenpunktansicht wird also eine Switch-Zeichen-Methode hinzugefügt, und die Switch-Zeichen-Funktion wird wirklich ziemlich einfach sein. Zuerst wird ein zufälliges i. D. von 1 bis 83 generieren D. , weil es 83 Zeichen in der A P I gibt. Und dann werden wir uns an die Abrufzeichenfunktion mit diesem neu generierten Zufallsprinzip erinnern. Und dann werden wir uns an die Abrufzeichenfunktion mit diesem neu generierten Zufallsprinzip erinnern. Es ist versprochen. Lassen Sie zufällig i d. Gleiche mathematische Gedankenfläche, die wenn Sie eine Dezimalzahl haben, nimmt die untere Ganzzahl Also, zum Beispiel, 7,9 tatsächlich sieben oder 13,12 wird 13. Dadurch wird eine Zufallszahl von 0 bis 1 generiert. Das gibt uns also etwas wie 0,2 oder 0,4 oder 0,999 fast fünf diese Zahl von 83. Sie werden eins dazu hinzufügen, denn einmal in Florida wollen wir sicherstellen, dass wir 1 bis 83 bekommen. Es wird schließlich einen Click-Handler zu unserem Charakter, DIV, hinzufügen . Das ruft diese neue Switch-Zeichen-Methode auf. Aber vergessen Sie nicht, diesen Punkt Fitch Zeichen auf dem zufälligen i d zu nennen und dann, natürlich, wir wollen Schalter Zeichen mit der äußeren def nennen, wie wir speichern. Wenn ich das hier anklicke, haben wir einen neuen Charakter. Wieder einmal kann ich weitermachen und neue Charaktere bekommen. Und dann generiere ich insgesamt ein Team von Charakteren aus Star Wars, die ich mag eine ausgezeichnete Lassen Sie uns zu einem der wichtigsten Aspekte der App übergehen , tatsächlich machen es gut aussehen, indem wir unsere Charakterkomponente weiter strukturieren 8. Strukturieren der Zeichen: Okay, jetzt, da wir die Funktionalität für die Anwendung unten haben, bleibt die eigentliche Strukturierung und Vorlage davon erhalten. Lasst uns zuerst angehen. Die Charakterpunktansicht-Komponente nutzt einige Bootstraps-Stylings. Helfen Sie uns, schnell eine alternative Darstellung aus diesen Charakterdaten zu erstellen, die ansprechend ist . Erstens, ändern Sie Sie insgesamt. Div. Um eine Klasse von Kohle MD zu haben. Vier. Mitchell passen gut in unsere Outer Coal MD 12, die er in ihrer AP-Komponente erstellt, um MD vier zu nennen , die eine intuitive mit der Charakterkartenklasse haben wird Erupts ein anderes DIV mit einer Klasse namens Khar Block. Der Kartenblock ist eine Buch-Shop-Klasse, während Charakterkarte ist eine, die uns definieren wird. Also die 1. 1 ist Capture-Karte und innerhalb haben wir unseren Kartenblock. Lassen Sie uns dieses interpolierte Zeichen vorerst löschen. Als nächstes fügen wir einen Titelteil der Charakterkarte mit dem Kartell zur Klasse hinzu, und dann gehen wir durch alle relevanten Felder des Charakters und verwenden Kartentext-Klauseln für Absatzelemente. Also zuerst haben wir vor oder vier Element mit einer Klasse von Kartentitel, sie werden den Namen des Charakters einfügen und als nächstes haben wir einige Absatz-Tags mit einer Klasse von Autotext, und wir werden einfach durch jeden gehen. Wir brauchen ein bisschen, um es auszutippen, aber es wird sich lohnen. Die 1. 1 ist Höhe, also lasst uns Zeichen finden, nicht Höhe. Als Nächstes gibt es noch eine Klasse Autotext für diese. Also haben wir Durcheinander, das ist Charakter dot mus. Und warum fügen wir nicht auch das Messfeld hinzu? So sieht es schön aus. K G ist also das Chaos. Es wird in Zentimetern für die Höhe gemessen. Es handelt sich um mehr globale Metriken. Wir haben Haarfarbe, also haben wir wieder eine Klasse von Kartentext. Wir haben unsere Haarfarbe dafür, und wir werden Plattencharakter-Haarfarbe, die eine Schlange umhüllt ist, intern . Und dann, natürlich, ist der letzte Applaus gleich Autotext. Lassen Sie uns voran und fügen Sie die Augenfarbe, wissen Sie, nur weil Sie nicht so Charakter Punkt Augenfarbe und groß. Schließlich fügen wir diese Charakterkartenklasse zu unserem benutzerdefinierten, nicht CSS hinzu, das wirklich alles miteinander verbindet. Ganz einfach. Wir geben diesen Karten einen schönen grünen Rand, so dass sie leicht zu unterscheiden sind. Und dann runden wir die Grenze ab und dann stellen wir sicher, dass diese Autos mit einem Zeiger vom Cursor anklickbar aussehen , also gehen Sie zum Index Punkt CSS. Lassen Sie uns diese Charakterkarte Klasse hinzufügen. Machen Sie es Kebab, gehüllt der Rand wird zwei Pixel breit sein. Es wird eine solide sein. Und hier kommen unsere grünen Grenzen. Also Kapital vier, FC 08 D schöne grüne Ansicht themed Farbe. Ein Umrandungsradius beträgt vier Pixel. Ich fühle mich, dass das nur gut aussieht mit der Dimensionierung der Karten am Ende den Cursor Pointer gibt es ein klickbares Aussehen. Speichern wir das und laden wir neu. Und natürlich müssen wir die Charakterpunktansicht speichern, also achten Sie darauf, sie zu speichern. Und während das sieht schon viel besser aus, also sobald wir auf sie klicken, um weiter zu regenerieren neue Charaktere schließlich haben wir ein Team von Charakteren, die Sie immer finden können, bis Sie sie wirklich lieben. Für mich persönlich mag ich die Idee 1 13 und 14, weil ich Han Solo Luke Skywalker mag. Chewbacca etcetera Schichten dort auch irgendwo . Aber sie haben Droiden da drin, ein Haufen anderer Jet I und andere sitzende Charaktere, die du durchstöbern kannst. So schnell. Ich werde auch verkleinern . Auf diese Weise können Sie das andere wahre Styling der App sehen. Und da sind sie, die Karten direkt nebeneinander, nicht vollständig erweitert. Sie können sehen, dass Kohle MD für in Aktion. Also gehen wir hin. Das ist es für die Sternenbasis Anwendung. Und ich hoffe, Sie haben es wirklich genossen zu bauen und dass Sie ein echtes Gefühl dafür haben, wie View-Anwendungen in einer wirklich Enterprise-Umgebung aussehen würden, wenn es mit Online-Web Quest und AP Augen ausgezeichnete Arbeit und Glückwünsche zum Aufbau der Sternenbasis.