The Vue JS (2.0) Crashkurs

1. Einführung: jeder. Und willkommen zum View Js Crashkurs. Ich bin Stephen, ein freiberuflicher Webentwickler. Und noch wichtiger für dich, ich bin Lehrerin. Ich bin so aufgeregt, dieses fantastische JavaScript-Framework mit Ihnen zu teilen, jetzt ein wenig auf ein paar Js-Ansicht ist, was als reaktives Framework in seinem Kern abgerechnet wird. Das bedeutet, dass eine Sache, wenn Sie JavaScript sind, Daten ändern alles andere, was darauf beruht, dass Daten sich auch ändern, zum Beispiel andere JavaScript-Daten oder HTML, das auf den JavaScript-Daten beruht. Sie werden bald verstehen, warum das so ist, so mächtig in Kürze. Und natürlich, lassen Sie mich Ihnen jetzt ein Beispiel für das Kursprojekt geben. Es ist eine Lampe, die vollständig in Ansichten modelliert wurde. Ich weiß, dass es nicht zu viel ist, aber wir konzentrieren uns wirklich auf Funktionalität und JavaScript, besonders in diesem Kurs. Daher sind HTML und CSS in diesem Fall nicht so wichtig, so dass Sie sehen können, dass die Lampe schaltet sich ein und aus waken. Ändern Sie die Farbe des Lichts, indem Sie einfach eine Farbe in ein Eingabefeld eingeben. Verurteilen Sie es auch, zusammen mit einem Prozentwert neben dem Dim Schieberegler. Da ich das Gefühl habe, dass es äußerst wichtig ist, Konzepte nicht nur zu lernen, sondern sie richtig umzusetzen , wenn Sie sie lernen. Das ist genau das, was wir in diesem Kurs tun werden, wird dieses Modell einer Lampe bauen, wie wir am Ende des Kurses gehen, Sie haben das Werkzeug gesetzt, um Ihre ganz eigene reale Welt Objekt zu modellieren. Und das ist, was der Kurs Projekt, dass Sie ein Objekt mit Zustand wählen werden, zum Beispiel, eine Ampel, die drei Zustände hat. Es hat einen grünen Staat Biello Staat und Verhaftung oder eine andere, die eine Menge von verschiedenen Staaten hat. Ah, ein paar Beispiele wären es. Es hat einen Master auf und aus dem Zustand. Es hat ein Licht, das unabhängig von einem ausgeschalteten Zustand ist. Es hat einen Temperaturwert oder einen Temperaturzustand. Sie könnten es nennen, die durch Tasten oder einen Knopf gesteuert werden kann. Ich möchte, dass du damit wirklich kreativ bist, weil ich weiß, dass du etwas wirklich Erstaunliches und Interessantes einfallen kannst. Für diesen Kurs wäre es also vorteilhaft, ein grundlegendes Verständnis von HTML CSS zu haben, und vor allem ist JavaScript als View ein JavaScript-Framework. Lassen Sie sich aber nicht davon abschrecken . Ich habe jedes Konzept so zugänglich gemacht, wie ich es hätte können. Davon abgesehen freue ich mich so darauf, Ihnen zu helfen, die Grundlagen von Ihnen, meinem Lieblings-JavaScript-Framework, zu begreifen . Ich freue mich darauf, Sie im Kurs zu sehen. 2. Installation und die The: Willkommen alle zum ersten Riel Vortrag in der Ansicht Js Handwerk Kurs Ich bin wirklich aufgeregt zu gehen. Also werden wir einfach direkt mit der View-Instanz hineinspringen. Dies ist etwas, das jede einzelne View-Anwendung benötigt. Es muss da drin sein. So wird die Instanz selbst in einer regulären alten JavaScript-Variable gehalten. Nichts Leckeres daran. Um, App ist die allgemeine Art und Weise, wie Leute normalerweise ihre View-Instanz benennen, müssen Sie nicht, aber es ist Standardpraxis. Diese neue Ansicht Syntax hier wird eine neue Instanz von Ihnen für uns erstellen, so dass wir tatsächlich das Framework verwenden können . Dies ist keine ansichtsspezifische Syntax. Für den Fall, dass du es noch nie gesehen hast. Dies ist, Ich glaube, es wurde in JavaScript es sechs ein eingeführt. nur eine Versionsnummer von Javascript. Also, wenn Sie das noch nie gesehen haben, möchte ich Sie nur wissen lassen, dass es nicht spezifisch ist. Ich werde auf die Syntax hinweisen, die während des Kurses anschauspezifisch ist, nur damit Sie nicht verwirrt werden. Die einzige Sache, die jede View-Instanz benötigt, ist die L-Eigenschaft. Ähm, das zeigt tatsächlich die Ansicht auf das HTML-Element, dass unser ganzer HTML-Seitenansicht-Code in gewickelt wird Normalerweise wird es ein div sein. Also, schauen wir uns das mal an. Der HTML Dies ist sehr grundlegende HTML für die Ansicht Wenn Sie die i d gleich App im Diff bemerken also muss alles innerhalb dieses steifen ganzen View-Codes gehen. So entspricht es zahnartig l Eigentum unserer Ansicht. Instanz, wenn Sie hier sehen, habe ich Ihnen gezeigt, l ist die Nummernzeichen-App, die ein CSS-Selektor ist. So könnten Sie tatsächlich machen, dass Sie eine Klasse von App haben und Periode AP als L und das JavaScript tun . Aber auch hier ist dies die Standardpraxis. Dies ist, was Sie in der View-Dokumentation sehen. Sobald Sie sie also auf diese Weise, das JavaScript im HTML, verknüpft haben, sollte ich sagen, dass Sie anfangen können, View spezifischen Code in Ihrem HTML zu schreiben, zu dem wir in der nächsten Vorlesung gelangen. In dieser Vorlesung wollte ich auch über Code-Stift sprechen, die Plattform, die ich für diesen Kurs verwenden werde. Es ist also eine fantastische Seite, um schnelle Demos zu erstellen, Ihren Code zu teilen und, ah, den Grund, warum ich ihn benutze. Es ist großartig fürs Unterrichten. Also ist die Ansicht tatsächlich nicht automatisch im Code-Stift. Wir müssen uns einen Moment Zeit nehmen, um es einzubeziehen. Und ich möchte nur diese Ansicht erwähnen. Gibt es keine magischen Zauberansichten? Eigentlich nur eine normale alte JavaScript-Datei. Ich möchte nicht untersagen, wie komplex es ist und die wirklich klugen Leute, die es erschaffen haben . Aber denken Sie daran, dass es nur JavaScript ist, dass jeder richtig sehen kann. Obwohl nicht jemand, müssen Sie wirklich schlau sein, um es zu tun. Aber es ist nur eine normale JS-Datei. Das ist es, worüber ich hinwegkommen will. Wir können es wie jede andere JavaScript-Datei mit einem Skript einschließen, das mit einem S R C Attribute getaggt ist. So werden Sie sehen, dass hier nur Skript, und ich habe es aus einem Content-Delivery Netzwerk gezogen. Es gibt auch eine andere Möglichkeit, zweite Art des Code-Stifts spezifische Möglichkeit, externe JavaScript-Ressourcen einzubeziehen. Es macht im Grunde dasselbe, aber es hält unseren Code ein wenig organisierter, also werde ich jetzt zum Codestift springen. So sieht Code-Stift aus, und wir werden die Ansicht einschließen, also werde ich wirklich den ersten Weg, den Sie tatsächlich einfach dieses, äh, dieses Skript-Tag einfügen können äh, , das ich hier habe, und wir können zur Konsole gehen und Ansicht und es wird etwas zurückgeben, das Sie sich nicht Sorgen machen müssen Was das eigentlich ist Nur die Tatsache , dass es etwas zurückgegeben hat, bedeutet die Ansicht wurde korrekt eingeschlossen. Zum Beispiel, wenn wir dieses Skript nehmen, herausnehmen und dann in Ansicht eingeben, werden wir eine Ansicht erhalten ist nicht definiert. Wenn Sie also jemals überprüfen möchten, ob die Verwendung richtig enthalten ist, können Sie immer einfach zu Ihrem Konsolentyp gehen, um die anderen Möglichkeiten anzuzeigen. Wenn Sie zu diesem kleinen verursacht neben dem Java-Skript die Js-Sache auf Code-Stift gehen, wird dieses Fenster geöffnet und Sie können Suche, CD und Js sehen . Also, wenn wir einfach in der Ansicht tippen, wird es hier erscheinen. Klicken Sie auf das Speichern Schließen und bam! Es ist inklusive Retiping-Ansicht. Wir kriegen das Gleiche. Also, das ist es für diesen Vortrag Ich freue mich darauf, in der nächsten zu sehen, wo wir sehen, wie und warum Ansicht so magisch ist 3. Die Magie von Vue (Daten): In diesem Vortrag werden wir einen kurzen Blick darauf werfen, warum die Ansicht so mächtig ist und es Magie ist. Lasst uns dran kommen. Einer der Gründe ist Ansichten Dateneigenschaft. Das ist es, worüber wir in diesem Vortrag reden werden. Sie können sehen, ich habe es rot hervorgehoben. Wieder hier. Es ist nur eine normale alte Eigenschaft in der View-Instanz, Sie können also sehen, dass nach dem L ein Komma vorhanden ist, um sicherzustellen, dass die Ansicht weiß, dass diese beiden separate Entitäten sind . Die Eigenschaft View data nimmt ein Objekt als Wert, den Sie auf dem Datenpunkt und dann die geschweiften Klammern sehen können , die ein JavaScript-Objekt bezeichnen. Es enthält Eigenschaftswertpaare, die als Art der Variablen von Ihnen fungieren. Sie können sehen, die Eigenschaft dieser Eigenschaftswertpaare ist der Name der Anführungszeichen Variable unquotiert . In diesem Fall in der hervorgehobenen Lese-Meldung wird in der hervorgehobenen Lese-Meldungder Eigenschaftsname, und der Wert ist, was Sie im Inneren behalten möchten. In diesem Fall ist es Hallo Welt, eine Zeichenfolge, die hallo Welt sagt. Also dank dieser Luft viel zu sehen, viel leistungsfähiger als normale JavaScript-Variablen, alles in Ordnung, und es ist alles mit der Aktualisierung von HTML und Datenreaktivität zu tun, über die ich in einer Sekunde ein wenig sprechen werde. Ein Gebot, Hmm? Wirklich war noch nie so einfach, weil Sie das gleiche Javascript wie die letzte Folie in dieser Folie haben . Und hier ist der HTML-Code, der uns tatsächlich erlaubt, den Wert der Nachrichteneigenschaft anzuzeigen. In diesem Fall ist der Wert, dass hallo Welt, richtig? Sie passen die beiden geschweiften Klammern, unsere Ansicht spezifische Syntax. Ordnung, das ist etwas, nach dem die Sicht im Inneren unserer aktiven sucht. Es sucht nach diesen geschweiften Klammern, um zu sagen, OK, das Programm verweist auf eine dass A-Eigenschaft. Ich sollte das nehmen und es in was auch immer der Wert in unserem Fall wieder verwandeln, es ist hallo Welt. Hier ist also die Syntax, die HTML-Syntax zum Einbinden von Ansichtsdaten in unserem HTML. Wir nehmen den Namen unserer Dateneigenschaft und setzen ihn in geschweifte Klammern. Also lasst uns rüber springen, um Stift zu codieren und das auszuprobieren. Ich werde nur noch mal eine Dateneigenschaft anlegen. Es nimmt ein Objekt als Wert. Wir geben diesem Objekt eine Eigenschaft gut, Nachricht und wir werden in Hallo Welt setzen. Es ist erwähnenswert. Ich habe bereits Ansicht in diesen Code-Stift aufgenommen. Sie können hier sehen. Ich habe es eingeschlossen. Und das ist, warum Ansichten für uns arbeiten, wir können bis zum HTML gehen Wir werden die beiden geschweiften Klammern machen und wir werden enge Nachrichten automatisch Ansichten kümmern sich um es für uns und zeigen Hallo Welt im HTML. Wie Sie dort jetzt sehen können, ist die Datenreaktivität das, was an dieser Sache so spannend ist. Also, wenn wir zu unserer Konsul schwächen Typ App-Dot-Nachricht gehen und das wird tatsächlich zeigen, was unsere View-Instanz, die APP genannt wird, als Nachrichteneigenschaft in ihrer Dateneigenschaft gehalten hat, I Nein, ich bin sagen Eigentum eine Menge. Hoffentlich folgst du jetzt mit. Hier kommt die wahre Magie ins Spiel. Wenn wir tippen app dot message equals und wir ändern es etwas anderes gleich. Sagen wir Welt Hallo, einfach umkehren sehr originell. Ich weiß, und wir geben das sofort ein. Der HTML-Code ändert sich vor reaktiven Frameworks wie View. Wir müssten zusätzlichen Code schreiben, um das HTML-Element auszuwählen und es mit einem neuen Wert zu aktualisieren . Aber view kümmert sich um das für uns hinter den Kulissen, eine wirklich, wirklich elegante Art und Weise, können wir es ändern, was wir wollen. Wir könnten es in das seltsame Ding ändern, in das wir es ändern könnten. Weißt du, eine Nummer sogar. Und es wird angezeigt, obwohl dies ein anderer Datentyp in JavaScript ist. Wenige kümmert sich um all das für uns. So hoffentlich zeigt Ihnen das ein wenig darüber, warum die Ansicht so ist, so erstaunlich und mächtig. Und wir werden in der nächsten Vorlesung darauf eingehen, warum es noch leistungsfähiger ist. Oder wir sprechen über etwas, das View-Direktiven heißt, wir freuen uns darauf, Sie dann zu sehen. 4. Regeln, V-if und V-Bind: Willkommen zurück in dieser Vorlesung, wir werden über View-Direktiven und V Bind sprechen, ein Beispiel für eine View-Direktive. Was genau ist eine View-Direktive überhaupt? Es ist wenige spezifische Syntax, nicht Vanille-Javascript, nur etwas zu wissen. Sie gehen wohin HTML-Attribute gehen, und allgemeine Beispiele für HTML-Attribute Air the A treff Attribute in Link-Tags oder die SRC-Attribute in Bild-Tags. Nur wenige Direktiven beginnen immer mit V Dash als Präfix, und Sie werten den Wert einer Direktive aus, da JavaScript alle ein wenig mehr in das kommen , wenn wir etwas Code sehen können. Ein einfaches Beispiel für eine View-Direktive ist V. Wenn Sie sich das Laufwerk ein Skript unten links auf dem Bildschirm ansehen, sehen Sie nichts wirklich Neues für uns. Es ist eine View-Instanz mit Anel Attributen und dem Datenobjekt. jedoch Dieses Mal haben wirjedocheine zeigende Eigenschaft in unserem Datenobjekt, die auf true den booleschen Wert gesetzt ist . True in Javascript, das ist keine Zeichenfolge. Es ist einfach wahr. Jetzt dieses HTML, wir könnten etwas ein bisschen Neues sehen, und es ist ah, der zweiten Zeile, können Sie sehen, wir haben RV Armaturenbrett. Wenn die Anzeige und bis zum zweiten Punkt auf dieser Folienansicht Werte von Direktiven ausgewertet wird JavaScript View nach der Anzeige innerhalb ihrer Instanz suchen. Sagen Sie Ok, wo zeigt sich? Es wird die zeigende Eigenschaft in unserem Datenobjekt finden und sagen Was bewertet es zu gut, zeigt uns nur auf den booleschen Wert gesetzt. Wahr. Also natürlich wird es zu Truppe bewerten, und was VF tatsächlich tut, ist, dass es entweder das div anzeigen oder verstecken wird, an das es angehängt ist . Lassen Sie mich Ihnen das auf dem Codestift zeigen. Also hier ist Thievy. Wenn Beispiel können Sie sehen. Ich habe genau den gleichen Code wie wir auf der Folie hatten. Sie können Daten sehen, die true zeigen. Lassen Sie uns also zur Konsole gehen und geben Sie App Dot zeigt ein und sehen, was es auswertet , um wahr zu werden. Nun, wenn wir App Punkt zeigen und sagte, dass es gleich falsch. Wenn Sie hier oben schauen, stellen Sie sicher, dass Sie hier oben mit dem Jetzt sehen Sie mich, wir drücken die Eingabetaste und es ist weg, und das ist ohne eine Seite. Aktualisieren Sie Ansichten, die nur hinter den Kulissen tun. Also, wenn wir uns zeigen, dass es wahr ist, wird es wieder auftauchen lassen. Es ist ein sehr, sehr einfaches Beispiel für eine View-Direktive. Lassen Sie uns weitergehen, um Direktive Argumente zu sehen und entlarven einige Direktiven können Argumente nehmen, indem Sie einen Doppelpunkt nach der Direktive hinzufügen. Name und V Bindung ist eines dieser Attribute. Was Sie getan haben, ist es uns erlaubt, Daten zu einem regulären alten HTML-Attribute dynamisch zu binden . Beispiel: Ein Link kennzeichnet ein Trip-Attribute. Wenn Sie einen Blick auf dieses JavaScript, das ich hier habe, ist es nichts wirklich Neues. Das einzige, was sich geändert hat, ist, dass wir in unserem Datenobjekt eine L-Eigenschaft mit dem Wert des Hyperlinks zu Google dot com haben. Ich html. jedoch Wir werdenjedochetwas Neues sehen. Wenn Sie sich die zweite Zeile ansehen, können wir sehen, dass wir ein A-Tag mit einer V Bind-Direktive haben, die ein Argument einer Reise nimmt . Also v binden Doppelpunkt und dann das Argument. In diesem Fall ist es ein Treff, und Sie können sehen, dass der Wert auf Sie gesetzt ist, Earl. Wieder werden Sie durch seine Instanz schauen und sagen, OK, OK, ich suche nach etwas namens U. R L es findet, dass im Datenobjekt und sieht, dass sein Wert auf google dot com gesetzt ist, so dass es zurück zu der HTML und sagt, Was bin ich V bindend dies an Was ist das Argument meiner V Bind-Direktive? Und es ist eine Reise. So wird es gesetzt, dass ein Tag ein treff Google dot com sein. Und das ist wirklich mächtig, weil wir, wie Ihre Anwendung fortschreitet, tatsächlich ändern können, dass ein Datenverkehr fliehen, wenn wir es so wählen. Ich habe Code-Stift hier mit genau dem gleichen Code wieder geöffnet, und Sie können sehen, dass Sie alle auf Google Dot com eingestellt sind. Lassen Sie uns nur bestätigen, dass in der Konsolen-App dot Earl und es ist Google dot com. Mal sehen, was passiert, wenn wir es auf etwas anderes setzen, sagen wir bing dot com. Also haben wir es gesagt, wieder Dot com zu sein. Wir haben die Seite noch nicht aktualisiert. Wenn wir auf den Link klicken, wird es uns an bing dot com senden. Nun, das ist wieder wirklich, wirklich mächtig. Wenn wir die App-URL zurück auf google dot com setzen, müssen Sie das https natürlich eingeben , weil sonst Theachtziger nicht richtig geladen werden. Es wird zu Google gehen, und das ist so, so mächtig. Sie können dies mit der Thesaurus-Eigenschaft eines Bildes tun und ein anderes Bild basierend auf der Präferenz eines Benutzers oder sogar des Profils eines Benutzers laden . Das ist wirklich, wirklich mächtig, und ich bin froh, es dir gezeigt zu haben. Begleiten Sie mich in der nächsten Vorlesung, wo wir über etwas namens List Rendering CNN sprechen werden. 5. List und v-for: Willkommen in dieser Vorlesung, wir werden über Listen-Rendering und die V vier Direktive sprechen. Eine weitere Richtlinie im Blick. Ich wollte nur eine schnelle Auffrischung auf JavaScript eine Gehaltserhöhung geben, falls sie Ihrem Verstand völlig entkommen sind oder Sie sie nicht verwendet haben, um zu überwachen oder was auch immer. Es wird eine Sammlung von Daten, die die Reagan halten jede Zahl, Strings, Objekte, sogar andere Arrays. Und es könnte eine Mischung aus denen sein, die normalerweise Daten enthalten sollen, die später iteriert werden , zum Beispiel mit einer for-Schleife. Ihr habt alle die vier gesehen. Ich gleich Null iess weniger als eine Strahlpunktlänge I plus plus. Und dann können Sie sich jedes einzelne Element in diesem Array ansehen. Und das ist nur ein Beispiel für eine Reihe von Arrays. Wir haben unser Sound-Array. Unsere Zahlen sind ein und, äh, ein Array von gemischten Werten. Nun, eine Gehaltserhöhung im Blick. Eine Wieder vorhanden ist wirklich eine einfache, wie es als den Wert einer Eigenschaft innerhalb unseres Datenobjekts einschließt. So können Sie sich hier wieder das JavaScript ansehen. Nichts wirklich Neues, außer wir haben unsere Sounds, Eigentum und seinen Wert auf in einem Recht gesetzt, und es ist wirklich dieses einfache View-Rennen genau so einfach genug, richtig? Also listen Sie Rendering und die V vier Direktive auf. Hier werden Listen wirklich, wirklich interessant und super mächtig im Blick. Mit der V vier Direktive können wir leicht ein Array durchlaufen, und es funktioniert auch an Objekten, die sich das nicht ansehen würden. Aber wissen Sie nur, dass es auch auf Objekten funktioniert und wir können HTML für jedes Stück von Daten . Hier ist das JavaScript. Das war auf der letzten Folie. Und hier ist der HTML-Code. Nun, das könnte etwas überwältigend verwirrend aussehen, also werden wir in der nächsten Folie etwas tiefer hineingehen. Dies ist das gleiche JavaScript in HTML, das ich auf der vorherigen Folie hatte. Und schauen wir uns das an. Also haben wir unsere Direktive durch den V Dash D bezeichnet für den Namen des Arrays im Datenobjekt wird danach in Schlüsselwort sein, und dies ist eine temporäre Variable oder Alias, oder Alias, die das aktuelle Array-Element enthält. Es ist wichtig zu beachten, dass dies nicht die singuläre Version unseres Array-Namens sein muss dies ist nur Konvention. Wenn Sie jemals in Python gearbeitet haben, wird Ihnen das sehr, sehr vertraut sein , wenn Sie es nicht getan haben. jedoch Dies in der Syntax istjedocheine Art ansichtsspezifisch. Es ist momentan irgendwie in JavaScript. Wie auch immer, ich werde nicht darauf hineingehen. Aber wenn man es sich anschaut, macht es Sinn. Es wird sagen, dass es ein div für jeden Sound, der im Sound-Array ist, rendert. Also wird es vier in unserem Fall mit Boom bap Clap und ca bam rendern und Sie können hier unten sehen , wir haben die geschweiften Klammern, die zwei geschweiften Klammern, die uns eingeben lassen, Code in unserem HTML anzeigen lassen. Gehen wir rüber zum Codierstift und wir werden ihn in Aktion ansehen. Ich habe das gleiche Javascript wie auf den Folien, und ich habe eine leere HTML-Vorlage und wir werden tatsächlich unsere vorherige Direktive eingeben. Also V vier ist gleich Klang in Klängen, und dann werden wir die beiden geschweiften Klammern klingen. Und wenn man sich den HTML anschaut, wird es tatsächlich jedes einzelne Array-Element rendern, das wir innerhalb des HTML hatten. Und wenn wir unseren Inspektor öffnen und einen Blick darauf werfen. Sie können sehen, dass jeder von ihnen ist ein individueller def boom BAP clap und ca bam! Und Sie können verstehen, warum dies in vielen Situationen so extrem mächtig sein könnte . Ah, sehr klassisches Beispiel für diese reaktiven Frameworks ist die Erstellung einer To-Do-Liste, so dass Sie all dies haben können , um Daten in Ihrem Javascript gespeichert zu machen. Und dann kann es das hier mit nur drei Zeilen rendern, anstatt einzeln auf jede einzelne zugreifen zu müssen oder sich über die Daten innerhalb des JavaScript schleifen zu müssen, um Dinge dem Dom zu rendern . Wie auch immer, es ist sehr, sehr mächtig. Es ist nicht etwas, das wir uns ansehen werden, wir unsere Lampe erschaffen. Ich wollte es nur sehr schnell vorstellen, weil es ein leistungsfähiges Konzept ist, über das es wirklich wissenswert ist. Und Sie könnten auch in Ihrem eigenen Projekt völlig verwenden. Alles klar für Sie in der nächsten Vorlesung 6. HTML und CSS für unsere Lampe: Willkommen zurück, alle. Ich bin so aufgeregt darüber, Lecter, weil wir endlich anfangen werden, unser Beispielprojekt zu bauen. Unsere Lampe. Nun, dieser Vortrag wird komplett HTML und CSS sein. Kein Javascript, keine Ansicht. Das bedeutet, wenn Sie sich nicht um das CSS kümmern oder sich nicht um die Struktur des HTML sorgen , können Sie es überspringen. Es wird ziemlich einfach sein. Also, wenn Sie bereits mit diesen Konzepten vertraut sind, keine große Sache. Sie werden nur sehen, was ich in den kommenden Vorträgen getan habe. Und ja, das war's. Nun, ich ermutige Sie dringend, zu Code Penda, Ohio, zu gehen , und erstellen Sie auf Rechnung und Code zusammen mit mir. Ich werde das in vielen Vorträgen erwähnen, erwähnen, um sicherzustellen, dass Sie mitprogrammieren, weil ich wirklich finde, dass das der beste Weg für Studenten ist, um zu lernen, mit dem, was ich tue, zu programmieren. Und dann, selbst nachdem die Wähler über Chaos mit den Konzepten, die Sie gelernt haben, irgendwie verfestigen sie in Ihrem Gehirn. Ich werde auch einen Link zu einer Code-Stiftsammlung in den Kurs einfügen, der den Quellcode für jeden Vortrag enthält, nur damit Sie ihn überprüfen können. Bitte gehen Sie nicht hinein und kopieren Sie Einfügen, das obwohl ich wirklich, wirklich stark das Gefühl habe, dass es wichtig ist, zusammen mit dem zu programmieren, was ich tue. Alles klar, kommen wir dran. Also werden wir zu unserem HTML gehen und ein div mit einer Klasse von Lampe erstellen. Jetzt gehen wir zu den C S s und wählen die Lampe Div und geben ihm eine Position von absolut . Wir geben ihm eine Spitze von 50 Pixeln und eine linke von 50 Pixeln. Ich werde mich nicht zu viel um Responsive Design dafür sorgen, da es nur eine Demo wieder waren wirklich mawr auf die Funktionalität konzentriert, anstatt wie es aussieht und wie schön es ist. Jetzt werde ich ein div innerhalb der Lampe mit einer Klasse von Schatten erstellen, und wir werden diese Schattenklasse auswählen und ihr eine Position von absolut geben. Da das also ein Kind der Lampe ist, def, wird es nach der Lampe positioniert werden, nicht das gesamte Dokument wie die Lampe, Davis. Also werden wir geben, dies tut mir leid mit jeder bekommt einen Hauch von 70 Pixeln, wenn ich tippen kann und eine Höhe von 50 Pixeln und eine Hintergrundfarbe von Keks. Habe ich nicht. Das habe ich gegoogelt. Ich wusste nicht, dass das auf CSS-Farbe war, bevor ich diesen Kurs tatsächlich gemacht habe. In Ordnung. Jetzt werden wir ein basiertes, wenn ein div mit einer Klasse von Basis erstellen, das außerhalb der Shade-Klasse sein wird. Es wird ein Geschwister sein, sollte ich von der Schattenklasse sagen. Also lassen Sie uns wählen, sind basierend auf Klasse oder die basieren. Wenn ich in der CSS sagen sollte, werden wir auch diesem eine Position von Absoluten geben. Wir geben ihm eine Breite von 10 Pixeln. Wir geben ihm eine Höhe von 70 Pixeln. Nicht zu breit, sehr dünn und lang links von 30 Pixeln und eine Spitze von 50 Pixeln. Ich ziehe die nicht nur aus dünner Luft. Ich habe das schon getan, nur damit wir die Dinge beschleunigen können, um ihm eine Farbe von braun zu geben . Also, was ist hier los? Etwas Schlimmes. Oh, ich habe das außerhalb der Lampenspitze gesteckt. Hoffentlich hast du das erwischt. Also werden wir es dort einen Stock aufstellen, und jetzt sieht es aus wie eine Lampe. Sie können in der Vorschau sehen, alles im Moment, wir werden eine Lichtklasse erstellen, tatsächlich, innerhalb des Schattens, ein Licht, trotzen, immer sagen wie Klasse und dass wir gerade unter hier, um unser CSS organisiert zu halten. Das wird also in unserem Schatten leben, Diz. Und seine Position wird absolut sein. Was wiederum bedeutet, dass es nach seinem Elternteil positioniert wird, was der Schatten Div ist. Jetzt geben wir ihm eine Breite von 100%, nicht Pixel Prozent und eine Höhe von 100%. Und das macht es genau die gleichen Größen sind Schatten. Also, wenn wir uns ändern, sind unsere innerhalb der Höhendimensionen hier oben, die Breite und Höhe Welt passen sich dem an. Und jetzt geben wir ihm eine Hintergrundfarbe von dir, und das wird es tatsächlich beleuchten. Und das werden unsere Lampen im Zustand sein, die in den kommenden Vorträgen mit JavaScript manipulieren würden, so dass, wenn wir darauf klicken , es ein- und ausschalten kann. Also das ist es für die HTML und CSS Hope, die erleuchtend Teil im Lampenspiel war. Und ich werde Sie in der nächsten Vorlesung sehen 7. Vue Methoden und V-on: Willkommen zurück. Wieder einmal werden wir wirklich in das Fleisch von Ihnen kommen mit diesem Vortrag mit Sichtmethoden und dem V über Richtlinie. Und was jetzt? Unsere Sichtmethoden, sie sind sehr wichtig zu sehen. Also lassen Sie uns herausfinden, Methoden Luft in einem Objekt als Eigenschaft unserer Ansicht Instanz gehalten Genau wie unser Datenobjekt und Sie werden sehen, was ich meine. In einer Sekunde, anstelle von Dingen wie Strings oder Arrays, was unser Datenobjekt enthält, wird unser Methodenobjekt Funktionen enthalten, die Sie in diesem JavaScript sehen können. Ich habe eine ziemlich Standard-View-Instanz, wir haben unsere LR-Daten, und jetzt haben wir eine neue Eigenschaft namens Methoden. Es lohnt sich, darauf hinzuweisen. Denken Sie also daran, unsere View-Instanzen, nur ein großes JavaScript-Objekt. Also brauchen wir dieses Komma nach der schließenden Klammer, weil es nur eine Reihe von Eigenschaften ist wie in jedem anderen JavaScript-Objekt, ohne dass dieses Komma nicht ausgeführt wird. Es ist also etwas, das ich manchmal vergesse. Ich dachte, es wäre erwähnenswert. Wenn Sie sich die Eigenschaft methods ansehen, enthält sie ein Objekt. Und in diesem Objekt sehen wir, dass wir eine Eigenschaft haben, die hallo Welt genannt wird, und diese Eigenschaft hat einen Wert von nur einer Funktion, und in dieser Funktion führt es eine Warnung namens Hello World aus. Dies ist ein ziemlich Standard-Java-Skript Anfang Sache. Also dachte ich, ich hätte mich an die Ansicht angepasst. Nun, wie werden wir mit dieser Methode in unserem HTML interagieren? Und da kommt die V über die Richtlinie ins Spiel. Die Viane-Direktive nimmt ein Argument genau so an, wie es V bine mit dem Doppelpunkt tut. Es ermöglicht uns, Ereignis-Listener auf HTML-Elemente auf eine sehr einfache Weise zu setzen, und sehr oft wird das Argument der Viane-Direktive angeklickt. Nicht immer, aber Sie werden es ziemlich oft sehen, und der Wert der Direktive ist fast immer eine Methode, die wir unserer Meinung nach deklariert haben. Beispiel, zum Beispiel, die Hallo Welt Methode, die wir in der vorherigen Folie gesehen. Hier ist ein HTML-Code. Ziemlich einfach. Sie können sehen, wir haben R V auf Doppelpunkt klicken. Also, ah, Auffrischung wieder. Die V auf ist die Direktive Doppelpunkt und nach dem Doppelpunkt ist das Argument der Direktiven. In diesem Fall ist es klicken. Also, was dieser Code tun würde, ist, wenn wir auf die Schaltfläche klicken, wird er tatsächlich diesen Kerl hier drüben laufen. Die hallo Welt, äh, Eigentum, die eine Funktion ist. Es wird diese Funktion ausführen, und es wird hallo, Welt im Browser alarmieren . Werfen wir nun einen Blick auf Codestift und wie wir dies in unserer Lampe verwenden können. Also lasst uns zur Lampe gehen und wir werden ein V auf Direktive und auf einen Klick hinzufügen, und wir werden auf etwas verweisen, das tatsächlich im Java-Skript noch nicht existiert. Und wir werden es umschalten nennen. Das muss also sein, dass du hier unten sehen kannst, es wird mich anschreien und sagen, dass der Umschalter nicht existiert und es wird das loswerden. Aber das ist in Ordnung für jetzt. Nein, ähm, denken Sie daran, wir werden das gemeinsame hinzufügen. Wir gehen zum JavaScript, und wir werden eine Methodeneigenschaft hinzufügen, und es wird ein JavaScript-Objekt halten, okay? Und wir werden Toggle hinzufügen, das ist, was wir hinzufügen müssen. Damit dies wieder richtig rendern kann, und der Wert von Toggle wird gleich einer Funktion sein. Und wir werden einfach nur den Gedanken trösten, was zu protokollieren. Wir werden nur, ähm, Lampe angeklickt. Sagen wir mit einem Ausrufezeichen, weil wir aufgeregt sind, werde ich in diesem Rat klären, also müssen Sie sich das jetzt nicht ansehen, bevor wir überhaupt auf die Lampe klicken. Lassen Sie uns einfach die Methode testen. Denken Sie daran, dass wir Dateneigenschaften unserer Anwendung, unserer View-Anwendung zugreifen konnten , indem Sie app dot und den Namen der Dateneigenschaft eingeben. Mal sehen, ob das auch mit unseren Methoden funktioniert. Also lassen Sie uns einfach ap dot tug eingeben, und das wird eine Funktion zurückgeben. Und genau das wollen wir passieren. Wir wollten die Funktion zurückgeben. Mal sehen, was passiert, wenn wir tatsächlich laufen. Apt up, umschalten. Es wird Rat Dialog Lampe leuchtet, so dass alles fantastisch funktioniert wirklich gut. Und jetzt versuchen wir, auf die Lampe zu klicken. Denken Sie daran, das ist Thievy on Click-Richtlinie, die für uns arbeitet, und boom! Es wird diese Funktion ausführen. Nun, ist etwas, das vor diesen reaktiven Frameworks so mächtig und aufregend ist, dass man reingehen müsste. Sie müssen das eigentliche HTML-Element auswählen. Sie müssten einen Ereignis-Listener hinzufügen. Sie müssten eine Funktion hinzufügen und nur war es viel komplizierter als dies mit Ansicht. Es ist so einfach, dies zu tun und so einfach zu pflegen und nur eine wirklich aufregende Sache. Das ist ein cooler Meilenstein. Ich ermutige Sie wirklich, sich damit zu verwirren. Wenn Sie ändern möchten, was es sagt, versuchen Sie, etwas zusätzlichen Code zu unserer Toggle-Funktion hinzuzufügen. Verwirren Sie sich damit, zu sehen, was Sie sich einfallen können. keine Angst. Du wirst nichts kaputt machen, also experimentieren Sie einfach. Also, das ist es für diesen Vortrag, ich sehe Sie im nächsten. 8. Lamp und V-if: Willkommen zurück in dieser Vorlesung, wir werden grundlegende Zustand zu unserer Lampe hinzufügen, indem wir die Dateneigenschaft verwenden. Und wir werden Thievy if Direktive von ein paar Vorträgen verwenden, wenn du dich daran erinnerst , wenn du es nicht tust, ist das okay. Du wirst dich daran erinnern, wie wir gehen. In Ordnung, gehen wir zu unserem Java-Skript, und wir werden unseren Daten eine neue Eigenschaft hinzufügen, die aufgerufen wird. Das wird also den eingeschalteten Zustand unserer Lampe steuern, die standardmäßig auf „false“ gesetzt ist , damit der Benutzer die Lampe einschalten kann, sobald sie starten. Okay, also jetzt, wie interagieren wir damit auf dem Grundstück? Nun, wir könnten immer App-Punktdaten machen. Unsere Entschuldigung bei Punkt On ist gleich und ändern Sie es in das. Aber wie machen wir das eigentlich innerhalb einer Methode? Also werden wir unseren Vortrag benutzen, beklagen, dass wir das Konsul Dot Log löschen werden, und wir werden mit dem Schlüsselwort darauf verweisen. Nun, das ist eine sehr verwirrende Sache in Javascript. Das war es schon immer. Ich werde nicht versuchen, es hier zu erklären. Es gibt einige fantastische Artikel, die darüber gehen, wie man damit umgeht und was es eigentlich bedeutet. Grundsätzlich in verschiedenen Kontexten bedeutet es in verschiedenen Kontextenverschiedene Dinge. jedoch In diesem Fall werden wirjedoch vereinfachen und sagen, dass dies sich auf die View-Instanz bezieht. Okay, wenn wir also diesen Punkt eingeben, wenn wir auf diese Eigenschaft in den Daten zugreifen, wenn wir diesen Punkt umschalten, wird es auf die Methode verweisen. Das ist also eine andere Sache. Benennen Sie Ihre Methoden und Daten nicht dasselbe. Sie werden auf Probleme stoßen, aber für unsere Zwecke bezieht sich dieser Punkt auf das On innerhalb unserer Dateneigenschaft. Dieser Punkt alles bezieht sich nur auf etwas in Ihrem Ansichtscode, so dass Sie andere Funktionen innerhalb dieser Funktion aufrufen können, indem Sie diesen Punkt den Namen der Funktion eingeben. immer, lassen Sie uns diesen Start auf gleich setzen Nicht leid, nicht diese Aktie wieder auf, etwas verwirrend, wenn Sie es noch nie gesehen haben, JavaScript wertet tatsächlich Code von der rechten Zehe links aus. Also im Grunde, was passieren wird, ist, dass es OK sagen wird, was ist dieser Punkt auf diesem Falschen getan? Dies nicht dieses Ausrufezeichen wird umkehren, was auch immer dieser Hund in diesem Fall auswertet, dieser Anfang auf wird falsch ausgewertet, also wird es zu wahr invertieren. Und dann wird es tatsächlich diesen Punkt setzen, um wahr zu sein. Hoffentlich ergibt das Sinn. Es ist ein grundlegendes, wenn du es nicht verstehst, ist es okay. Dies ist im Grunde nur, wie Sie einen echten falschen Wert und JavaScript umschalten, das alles ist, was Sie wissen müssen . Also werfen wir einen Blick in das Konsulat. Was ist los? Also ist dieser App-Punkt auf gleich false. Jetzt lassen Sie uns beim Punkt umschalten alles in Ordnung laufen, und mal sehen, was handeln auf ist gleich jetzt. Es ist böse, die Truppen. Das funktioniert also einwandfrei. Und jetzt, wenn wir auf die Lampe klicken, wenn wir tun apt auf klicken Sie die Lampe und tun apt out auf wieder falsch, so dass das Klicken auf die Lampe auch unsere Methode läuft. Dafür sind wir immer noch gut. Jetzt werden wir es so machen, dass unsere Laternen ein- und ausschalten. Wie aufregend ist das? Ich bin so aufgeregt, warum wir tatsächlich eine separate Klasse von separaten Dave gemacht haben, sollte ich sagen, denn unser Licht ist so, dass wir die V if-Direktive verwenden können und wir einfach V setzen, wenn auf alles in Ordnung. Es ist wirklich, ehrlich gesagt so einfach. Und Sie können sehen, dass unsere Lampe ausgeschaltet ist, sozusagen, Das gelbe Div die gelbe Farbe tat mit der Klasse des Lichts ist verschwunden. Dank der Ansicht sagen OK, es ist nicht auf ehrlich ist falsch gesetzt. Und jetzt, wenn wir darauf klicken, um es umzuschalten, Moment der Wahrheit Bam, schaltet es sich an Das ist so cool. Wie cool ist das? Ich freue mich darauf. Und ich wusste, was passieren würde. Also lasst uns diese Kette von Ereignissen noch einmal durchlaufen. Wir klicken auf die Lampe und dass, dank RV auf Klick, es würde darauf klicken, und es wird nach Ansicht suchen, die ich sagen sollte, wird nach der Toggle-Methode suchen. Es wird hier rüber gehen und sagen, OK, die Toggle-Methode ist auf eine Funktion gesetzt, die im Grunde die on-Eigenschaft in unseren Daten invertiert, sie verwandelt sie von false zu true oder true zu false. Ok, das passiert. Und dann sagt View, Oh, OK, diese Direktive, diese V If-Direktive sagt okay, wenn on wahr ist, möchte ich das anzeigen. Jedoch, wenn auf seinem falschen. Ich will das nicht mehr anzeigen. Dies wie Div, das in unserem CSS auf eine Farbe von Gelb gesetzt ist. Sie können hier die Hintergrundfarbe sehen, gelb, und das ist im Grunde, was passiert. Das ist die Kette der Ereignisse dort. Ich bin aufgeregt, dass wir das wirklich, wirklich cool haben . Und ich bin aufgeregt, dass wir anfangen, Dinge zu tun. Ich wollte so schnell wie möglich Dinge machen, also werde ich Sie in der nächsten Vorlesung sehen. 9. Die v-model: Willkommen zurück, alle. In diesem Vortrag werden wir über eine neue Direktive namens V Model sprechen. Wirklich aufregend, wirklich mächtig. Und es wird lustig sein. Also, wie verwenden wir das Modell? Nun, es wird für die Zwei-Wege-Datenbindung verwendet, was die Ansicht Js Docks es nennt. Also zu einer Datenbindung an HTML-Elemente, die Benutzereingaben ermöglichen, zum Beispiel Texteingaben. Sie können auch für alle Elemente verwendet werden, die das Eingabetag in HTML verarbeiten kann. Kontrollkästchen, Optionsfelder , Bereichsschieber, Drop-Downs, all das gute Zeug. Wenn sich Daten in einem HTML-Element ändern, das eine V-Modelldirektive hat, aktualisiert es die Dateneigenschaft, an die es innerhalb der Ansichtsinstanz gebunden ist, und umgekehrt. Wenn ich die Daten im HTML-Element ändere, wird die zugeordnete Eigenschaft in der View-Instanz automatisch aktualisiert. Und wenn ich die View-Instanz ändere, wird die Eigenschaft innerhalb des JavaScript automatisch den HTML-Code aktualisieren. Es ist ein wirklich mächtiges Konzept, und ich freue mich, euch zu zeigen, wie es funktioniert. Jetzt sehen Sie hier etwas JavaScript, ziemlich Standardansicht. Instanz haben wir eine Eigenschaft namens Farbe innerhalb unseres Datenobjekts und sein Wert ist lila. Und wenn wir uns unseren HTML anschauen, können Sie sehen, dass wir etwas haben. Ein kleines Nuvi-Dash-Modell entspricht Farbe. Und ich möchte Sie daran erinnern, dass die Ansicht irgendetwas von einer Direktive sieht und nach diesem Wert innerhalb des JavaScript sucht. Also, diese Farbe ist nicht die String-Farbansicht sieht, dass v Dash und sagen, OK, das ist eine Direktive. Ich werde bewerten, was auch immer das ist, und versuchen, es in meiner Sicht zu finden. Instanz, Nur eine schnelle Auffrischung auf, dass. Okay, wir sind zum Codierstift gegangen, und jetzt werden wir eine V-Modelldirektive für ein Texteingabefeld implementieren, das es uns ermöglicht die Farbe unserer Lampe zu ändern, was wirklich cool ist. Nun, wir werden den Farbwechsel noch nicht wirklich implementieren. Das wird in der nächsten Vorlesung sein, wo ich über einige andere Konzepte spreche, die uns erlauben, das zu tun. Aber wir werden das Model einfach in diesem Modell zum Laufen bringen. Also werde ich bei der Eingabe mit einer Art Text außerhalb dieser Lampe hinzufügen, def. Jedoch immer noch innerhalb unserer aktiven, das ist sehr wichtig, sonst haben verwendet, nicht gehen, um es richtig zu sehen. Also fügen wir eine RV-Modellrichtlinie hinzu und wir werden diese neue Eigenschaftsfarbe nennen, wie wir es in den Folien getan haben. Jetzt sehen Sie hier unten einen Objekt-Fehler. Das ist in Ordnung. Es ist nur, weil View nicht in der Lage ist, die Eigenschaft der Farbe zu finden, weil wir es noch nicht gemacht haben. Also lasst uns voran gehen und das auf unser Komma machen. Denken Sie daran, es ist ein Objekt, das wir diese Kommas Farbe brauchen und wir werden in lila hinzufügen. Und jetzt kannst du hier oben sehen. Wir haben Lila automatisch ausgefüllt. Sie können hier oben sehen. Es sagt nicht einmal etwas Richtiges aus. Da gibt es nichts. Es gibt keinen Platzhaltertext, nichts damit verbunden. Sieh dir das an. Das ist der wirklich coole Teil. Also, wenn wir apt out farbigen erinnern, können wir jede Eigenschaft innerhalb unseres Datenobjekts zugreifen, indem wir App oder den Namen unserer Ansicht tun. Instanz. In diesem Fall ist es App, App Punkt, was auch immer der Eigenschaftsname ist. In diesem Fall ist es Farbe lila. Nun, wenn ich hier orange eintippe und mich erinnere, das wurde nicht aktualisiert oder so, das geschieht alles live in Echtzeit orange. Wie cool ist das? Sofort wird der Text, den die Benutzer eingefügt haben, aufgenommen und im Java-Skript geändert. Nun, das ist erstaunlich mächtig. Und Sie können sehen, dass es auf die gleiche Weise funktioniert. Wenn ich im JavaScript Wenn ich rot orange eintippe hier ap Punkt Farbe dort oben automatisch, es ändert sich. Sieh nochmal auf. Sieh nochmal an der Spitze zu. Während ich das mache, ändere ich es in Blau. Jetzt schauen Sie hier sofort wieder oben an. Es ändert sich. Das ist so, so cool. Das ist eines der coolsten Dinge über die Sicht für mich. Persönlich liebe ich das hin und her zwischen HTML und Js. Es ist so elegant und so, so einfach zu bedienen. Okay, in der nächsten Vorlesung werden wir tatsächlich machen, dass das jetzt einen Effekt hat, wo unsere Lampen noch gelb sind? Denn das ist, was das CSS hier unten im nächsten diktiert, waren tatsächlich V kaufen zu verwenden. Und wenn Sie sich von einer Tasse Kurfürsten vor erinnern, um die Farbe der Lampe zu ändern, sehen Sie dann 10. Reaktive Farbe hinzufügen: Willkommen zurück, alle in diesem Vortrag, wir werden unsere Farbe Eigentum in unserer Sicht nehmen. Instanz, die V an unsere Texteingabe modelliert ist. Und wir werden es schaffen, damit dieser Wert tatsächlich die Farbe unserer Länge ändert , die wir hier auf dem Bildschirm haben. Jetzt ist es erwähnenswert, dass ich hier seit der letzten Vorlesung einige Geschmackstexte hinzugefügt habe, die den Benutzer nur auffordert, eine gültige CSS-Farbe einzugeben. ich hier seit der letzten Vorlesung einige Geschmackstexte hinzugefügt habe, die den Benutzer nur auffordert, eine gültige CSS-Farbe einzugeben Und es muss eine gültige CSS-Farbe sein. Wenn wir etwas Kauderwelsch oder Zahlen eingeben oder was auch immer, es geht nicht Teoh Anzeige richtig. Es wird nur auf eine gelbe Standardeinstellung, also wird es nichts kaputt machen. jedoch Wenn Siejedocheine fehleranfälligere Möglichkeit wünschen, dies zu tun, wäre ein guter Weg eine ausgewählte Eingabe und, Sie wissen, wie ein Dropdown. Und das werde ich hier nicht eingehen. Aber die Ansicht Dokumentation, wie sie fantastische Docks haben. Es ist ein weiterer Grund, warum es eines meiner Lieblings-Frameworks in JavaScript ist. Ihre Dokumentation ist einfach erstaunlich. Aber wenn Sie zur V-Modelldokumentation gehen, hat es einen ganzen Abschnitt über ausgewählte Eingaben. Drop-Down-Eingänge. Lassen Sie uns es hier einschließen, lassen Sie uns jedoch das Modell verwenden, um die Farbe zu ändern. Lassen Sie uns jetzt eine Minute dauern, um darüber nachzudenken Wie würden wir die Farbe ändern, während wir in das CSS gehen und es einfach manuell ändern könnten , und das würde richtig funktionieren? Es ist jetzt lila, aber JavaScript hat keine Möglichkeit, eine CSS-Datei zu berühren. So sowieso nicht. Also, wie machen wir das? Wie können wir den HTML-Code ändern den Stil? , Ich bin sicher,du hast es schon mal gesehen. Es sind die Stil-Attribute auf HTML-Element. Und um das zu tun, geben wir nur einen CSS-Codehintergrund ein. Die Farbe ist lila und Sie können sehen, dass sie sich geändert hat. Wir haben es so gemacht, dass es lila ist. Allerdings wollen wir in der Lage sein, dies mit Blick zu ändern, oder? Und wir können nicht einfach eintippen, wissen Sie, Curley's und dann Farbe verdoppeln, weil die Ansicht nicht in Attribute schauen kann, oder? Dies ist nur eine Stärke, die man möglicherweise nicht wissen konnte, dass es nach innen schauen sollte um Teoh zu erkennen, was die Farbe sein sollte. Also, was haben wir zuvor gesehen, dass es uns erlaubt zu ändern? HTML-Attribute mit Ansichtsdaten. Das ist richtig. Es ist die Bindung. Okay, also werden wir das tatsächlich loswerden und v bind eingeben. Denken Sie daran, das sind unsere Attribute. Das ist unsere, Ah, unsere Direktive, sollte ich sagen. Und nach dem Doppelpunkt ist das unser Argument für eine Direktive. V Bindungsstil ist okay, und was das dauern wird, können wir nicht einfach im Hintergrund eingeben. Farbe ist lila, weil das CSS-Code ist, richtig? Es gibt viele Dinge falsch daran, aber dieser CSS-Code. Also, wie geht View mit dem V-Bind-Stil um? Nun, es dauert ein JavaScript-Objekt. Okay, und das sind die zwei geschweiften Klammern. Jetzt dauert es das, und im Grunde ist es nur eine Liste von CSS-Eigenschaften. So, zum Beispiel, Hintergrundfarbe. Denken Sie daran, dass Sie keine Bindestriche in JavaScript verwenden können, daher ist es Hintergrund mit einer Hintergrundfarbe mit einem Großbuchstaben C für die Farbe. Und wenn Sie jemals Stil mit nativem JavaScript bearbeitet haben, nur Vanille-JavaScript, sollte ich sagen, dass dies sehr ähnlich ist. Es sollte nichts Neues für dich geben, Colon und natürlich, denn es ist ein Objekt, das unser Eigentum oder Kias ist, Hintergrund, Farbe und unser Wert. Wir müssen hier einfache Anführungszeichen verwenden, denn wenn wir doppelte Anführungszeichen verwenden, wird es uns tatsächlich dieser Sequenz entkommen . Aber wir müssen einfache Anführungszeichen verwenden, weil denken Sie daran, wir können nicht einfach lila eingeben, weil dann das JavaScript nach den View-Instanzen suchen wird, sondern wird nach der Eigenschaft von lila suchen, und das tut nicht existieren, oder? Also, wenn wir hier eine Schnur als lila reinlegen, wirst du Bam sehen, es ändert sich. Das ist erstaunlich, oder? Das ist wirklich, wirklich cool. Okay? Und wirklich, wirklich mächtig. Aber wir wollen nicht, dass dies nur eine statische Stärke ist. Und hier kommt alles zusammen. Das ist so ein aufregender Moment im Kurs. Wir werden das loswerden und wollten einfach Farbe eingeben. Und denken Sie daran, wenn View eine Direktive hat, wird es den Wert der Direktive als JavaScript sehen. Richtig? Und es wird nach dieser Farbeneigenschaft in sich selbst suchen und sie wird sie in unserem Datenobjekt finden , das gleich dem violetten Ok ist. Und jetzt klicken wir darauf und es ist lila. Und sieh dir das an. Das ist so erstaunlich. Wir kombinieren Sachen, und es ist aufregend. Also werden wir lila loswerden und es standardmäßig gelb, denken Sie daran, weil in unserem CSS. Wir haben den Hintergrund. Farbe ist gelb. Wir tippen in Orange. Sieh dir das an. Automatisch. Es ändert sich. Das ist so aufregend. Es ist so aufregend. Rosa, äh, blau-grün. Erstaunlich. Und nur Zehe zeigen Ihnen, dass es funktioniert, schwächen Typ in App Punktfarbe gleich gelb oder lassen Sie uns nicht gelb machen. Das ist der Standard, ähm, orange wieder und es ändert sich. Wow. Wie erstaunlich ist das? Das ist so, so cool. Und du siehst jeden Typ Kauderwelsch, der bleibt. Ist orange Art von Zahlen, die bleiben wird, ist gelb. Aber wie erstaunlich mächtig ist das? Wir kombinieren nur zwei einfache Dinge und wir haben nicht einmal, weißt du, wir haben weniger als 30. Vielleicht würdest du hier 25 Codezeilen lehren, und das funktioniert alles so. Es ist nur Verstand zu blasen. Wie mächtig Sicht ist in einem Moment wie diesem. Und ich bin so aufgeregt, zu diesem Moment im Kurs zu kommen. Okay, das war's für diesen Vortrag. Ich sehe dich in der nächsten 11. Verdammen: Alles klar, willkommen zurück. Also hören wir Code-Stift, und wir werden einen dim Schieberegler zu unserer Lampe hinzufügen, mit dem wir die tatsächliche Farbe der Farbe, die wir gewählt haben, dimmen und aufhellen können . Nun, das wird mit Konzepten, die wir bereits erforscht haben. Das ist nichts Neues. 100% davon ist das, was wir bereits gesehen haben. Speichern Sie für eine andere Art von HTML-Eingabe. Nun, wenn Sie das selbst versuchen möchten, ermutige ich Sie, es zu tun, weil es irgendwie wie eine Puzzle-Übung ist, richtig? Es macht wirklich Spaß, dieses Zeug sowieso herauszufinden. Es macht Spaß für mich. Offensichtlich, völlig optional. Du könntest einfach mitmachen, wie ich es tue. Ich werde Ihnen einen Hinweis für diejenigen von Ihnen geben, die es selbst versuchen möchten, wird auf Eingabe HTML-Eingabe-Attribut mit einer Art von Bereich verwenden . Es wird ein Range-Schieberegler sein. Okay, lassen Sie uns hineinspringen. Diesmal fange ich mit dem Job-Skript an. Wir fügen unserem Datenobjekt eine brandneue Eigenschaft hinzu, die Helligkeit genannt wird. Okay, das werden wir gleich setzen. Die eine Anmerkung, dass dies die Nummer eins ist, die ganze Zahl ein Knoten, die Zeichenfolge, die Sie dort sehen würden. Ok, Eins. Und es ist wichtig, dass dies eins ist. Denn das ist es, was unser Licht kontrollieren wird, dibs, Opazität dergleichen, hier aufgeben, dass , wenn wir auf erscheint, richtig klicken , also wird das die Kontrolle der Deckkraft und Deckkraft. Uh, in CSS ist ein Wert zwischen Null und eins, wobei 0,5 der Mittelpunkt ist. Okay, also ist es wichtig, dass das eins ist. Es fängt an, es hat gewonnen. Es kann beginnen, was auch immer Sie möchten, aber es muss ein Wert sein, aber zwischen Null und eins, genau wie das Deckkraft-Styling in CSS. Okay, vor dieser Texteingabe werden wir eine weitere Eingabe mit dem Typ des Bereichs hinzufügen. Und hier sind einige Attribute, die , Sie normalerweise in eine Bereichseingabe einschließen würden. Wir werden einen Mann haben, der der Minimalwert sein wird. Wir werden ein Maximum haben würde den Maximalwert bedeuten. Genau wie wir darüber gesprochen haben, muss zwischen Null und Eins liegen. Wir werden diese Schritt-Attribute hinzufügen oder auf 0.1 gesetzt Wenn Sie dies noch nie gesehen haben, steuert es, wie weit die Schritte in diesem Schieberegler sind. Lassen Sie mich es Ihnen zeigen. Wenn wir also den Schritt auf 0,5 setzen, was unser halber Punkt ist, können Sie sehen, wenn ich das gezogen habe, es springt automatisch die Zehe zwischen. Jetzt wollen wir 0,1 sein, weil es uns erlauben wird, eine schöne glatte Bewegung und eine schöne sanfte Helligkeitsänderung zu haben , während wir gehen. Ordnung, lassen Sie uns in einer Ansicht Magie mit V-Modell hinzufügen. haben wir schon mal gesehen. Dies ermöglicht es uns, zu verknüpfen, um Daten Bindung zwischen einer Eingabe und einem JavaScript zu wiegen. Unser Eigentum unserer Ansicht, sollte ich sagen. Also werden wir es nach Helligkeit modellieren. Wenn ich Minamata buchstabieren kann, lassen Sie nach Helligkeit OK, Und wenn wir hier runter gehen und wir es auf 0.5 ändern und speichern, werden Sie sehen, dass die Ansicht automatisch kümmert sich um den Standardwert für uns. Wir müssen das nicht setzen und nochmals die Datenbindung abwägen. Entschuldigung, dies ist von früher Wir können klar, dass, wenn wir tun App Punkt Richtigkeit hier unten, Sie können sehen, es ist an einem. Wenn wir es im HTML auf etwas Niedriges ändern, gehen Sie zurück zum Konsul. Sieh es dir an. Es ist Punkt auf zwei, und wir können apt Aufrichtigkeit auf etwas wie 20.5 setzen und beobachten, wie der HTML erscheint der Schieberegler . Es wird sich 2,5 ändern. , Wie können wir das nutzen,um unsere Deckkraft zu kontrollieren? Die Deckkraft dieses Lichts? Wenn gut, werden wir dasselbe verwenden, was wir für die Hintergrundfarbe verwenden, wir werden dieses Stilobjekt verwenden. Und denken Sie daran, das ist nur Javascript. Also ist es nur durch Komma getrennt, rechtes Komma. Und dann geben wir unseren neuen Schlüssel oder eine neue Eigenschaft ein, was auch immer Sie es ablehnen möchten. Richtig, denn das ist ein CSS, ein CSS-Stil, den wir ändern möchten. Also, wenn wir einen Pass machen, es e gleich Helligkeit. Das ist alles, was wir tun müssen, wurden getan. Sieh es dir an. Sehen Sie dies, wir klicken darauf und wir bewegen den Schieberegler und es wird allmählich gedimmt und allmählich aufhellt. Und wir können sogar die Farbe ändern. All das passiert, oder? Das ist auf halbem Weg zwischen Orange. Es ist komplett in Orange gedimmt. Volle Farbe. Wie verrückt ist das? Das ist so cool. Richtig? Und das alles nutzt Dinge, die wir bereits gelernt haben. Sie könnten so viel mawr mit nur den Konzepten hinzufügen, die wir irgendwie unter unsere Finger bekommen haben im Kurs wieder, ich empfehle, dass Sie sich mit diesem Experiment herumwirren. Viel Spaß. Jedenfalls ist das Ende dieser Vorlesung, und wir sehen uns im nächsten. 12. Computed: Willkommen zurück in dieser Vorlesung, wir werden über berechnete Eigenschaften sprechen und sie verwenden, um einen Teil unseres Codes, den wir in unserem Lampenprojekt haben, zu bereinigen und neu zu faktorieren . Was sind berechnete Eigenschaften dort? Eine weitere sehr mächtige, sehr wichtige Facette der Sicht. Was sie sind Eigenschaften, die in einem berechneten Objekt gehalten werden, ein Objekt, das sich von unserem Datenobjekt unterscheidet. Ähnlich wie Methoden haben Eigenschaften innerhalb des berechneten Objekts Werte einer Funktion. Sie haben immer den Wert einer Funktion, genau wie unsere Methoden. Also die Funktion, die diese Funktionen verwenden das Rückgabe-Schlüsselwort, um zu bestimmen, was die Eigenschaft gleich ist , wenn wir darauf zugreifen. Es wird in einer Minute darauf hineinkommen. Wenn ich dir den Code zeige, damit du hier sehen kannst, gibt es ein bisschen, aber nicht. Machen Sie sich keine Sorgen darüber oder so. Wir haben einen Blick. Instanz ein l und wir haben diese neue Eigenschaft, eine neue ahbd, eine neue Eigenschaft in unserer View-Instanz namens computed. Und es ist gleich einem Objekt, genau wie unsere Dateneigenschaft. Und genau wie unsere Methodeneigenschaft können Sie sehen, dass wir eine Eigenschaft innerhalb unseres berechneten Objekts namens Produkt haben und sein Wert ist eine Funktion und Dysfunktion gibt etwas so einfaches wie zwei Mal zwei zurück. Okay, das ist der HTML-Code, der damit einhergeht. Sehr einfach, aber ein paar Dinge hier zu beachten. Also lassen Sie uns über diese Rückkehr Schlüsselwort sprechen. Wenn du nicht weißt, was es ist, ist das wieder okay. NDN hat einige wirklich, wirklich gute Dokumentation bei der Rückkehr. Du kannst es googeln. Es wird mit einer Reihe von Ergebnissen kommen. Grundsätzlich für unsere Zwecke, ist Rendite für unsere Zwecke,was ist der Wert, dem Produkt gleich sein wird. Wenn die berechnete Funktion beendet ist, wird sie sie zurückgeben. Dies muss am Ende der Funktion sein. Wenn wir einen Code nach der return-Anweisung schreiben, dieser Code nicht ausgeführt. Okay? Und Sie können auf der rechten Seite sehen. Ich habe etwas HTML mit Produkt in unseren lockigen Rennen. Da wir alles im Blick tun, müssen wir geschweifte Klammern, den Namen einer View-Eigenschaft und zum Schließen geschweiften Klammern. Und es wird angezeigt, weil zwei Mal zwei ist vier. Wenn wir von der Konsole aus auf das App-Dot-Produkt zugreifen würden, würde das auch für zurückkehren, damit wir auf diese berechneten Eigenschaften zugreifen können, wie wir auf Dateneigenschaften zugreifen würden , indem wir app dot und dann den Namen aus der berechneten Eigenschaft eingeben. Jetzt springen wir zum Codestift. Hier sind wir im Code Stift. Dies ist der Code aus der letzten Vorlesung. Wir haben immer noch unsere Funktionalität. Wir haben diesen dim Schieberegler im letzten hinzugefügt. Lassen Sie uns also ein berechnetes Objekt innerhalb unserer Ansicht hinzufügen. Instanz für die Lampe und ich werde Ihnen sagen, was wir in einer Minute hier machen werden, OK, also werden wir berechnet machen. Denken Sie daran, dieses Komma hier, weil unsere View-Instanzen nur ein großes Javascript-Objekt haben muss, dass dieses Komma am Ende auch ein Komma haben muss. Nun, die Reihenfolge davon spielt keine Rolle. Sie können sie in beliebiger Reihenfolge haben. Ich mag nur meine Computer direkt unter meinen Daten zu haben, weil ich Computer als eine Art von Daten sehe , nur etwas mit komplexerer Logik dahinter. Jetzt werden wir eine Eigenschaft zu diesem berechneten Objekt namens style hinzufügen. Okay? Und vielleicht können Sie erraten, was wir tun werden. Denken Sie daran, das wird gleich einer Funktion sein, die berechnete Eigenschaften sind immer gleich einer Funktion in Ordnung , einer Funktion, die etwas zurückgibt, und wir werden dazu kommen. Also, was wir hier tun werden, ist, dass wir dieses Objekt hier oben nehmen werden. Denken Sie daran, das ist nur Java-Skript, und wir werden es in das JavaScript einfügen, weil es für meinen Geschmack etwas lang wird. Ich denke, wenn Sie so etwas haben, ist das eine Menge JavaScript. Es gehört in das JavaScript. Es gehört nicht in den HTML auf. Wenn wir mehr und mehr Eigenschaften hinzufügen würden, würde es viel, viel länger, viel länger, zu lang werden. Ich denke, wir werden es im Grunde aufräumen, indem wir eine berechnete Eigenschaft hinzufügen. Okay, also haben wir eine Variable, eine lokale Variable namens Stilobjekt. Das existiert auf Lee. Innerhalb dieser Funktion berührt es keine Ansicht. Instanz. Sie können hier oben nicht darauf zugreifen. Nichts dergleichen. Also werden wir eine Variable setzen. Wir werden es einem Objekt gleich setzen, und dieses Objekt wird Eigenschaften haben, die man als Hintergrundfarbe bezeichnet. Genau wie hier oben. Denken Sie daran, wir müssen es genau sagen Hintergrundfarbe. Andernfalls wird HTML nicht verstehen, auf welche CSS-Eigenschaft wir zugreifen möchten, und wir werden diese Punktfarbe setzen. Ich habe vor ein paar Vorträgen über diesen Punkt gesprochen, früher im Kurs. Wenn Sie dieses stott nicht wieder MDMS und großartige Dokumentation verstehen, gibt es einige tolle Sachen auf Google. Sie sind großartige Artikel, die ehrlich über diesen Punkt geschrieben wurden Für unsere Zwecke verweist dieser Punkt auf alles in der View-Instanz, alles, auf das wir zugreifen können, indem wir App-Punkt eingeben, was auch immer App-Punktfarbe sagen wir innerhalb von unsere Ansicht, Instanz innerhalb von berechneten Eigenschaften oder Methoden oder was Sie haben, greift dieser Punkt Werte innerhalb unserer View-Instanz zu. Und es kann auf diesen Punkt zugreifen und ich sage Instanz und nicht nur Datenobjekt, weil wir tatsächlich auf diesen Stil auf die gleiche Weise zugreifen können, indem weil wir tatsächlich auf diesen Stil auf die gleiche Weise zugreifen können, indemwir diesen Punktstil in, sagen wir, eine Methode oder eine andere diesen Punktstil in, sagen wir, berechnete Eigenschaft. Okay, also bezieht sich dieser Punkt auf alle Daten, die wir innerhalb der App oder einer beliebigen Methode haben. Sie können auch mit diesem Punkt nach rechts umschalten. Okay, also lassen Sie uns eine 2. 1 genannte Kapazität hinzufügen. Stellen Sie sicher, dass diese Deckkraft ist und tun Sie diese Punkthelligkeit. Denken Sie daran, dass wir die Daten abgleichen müssen, nicht die Sternenkapazität, denn das gibt es nicht. Okay, jetzt machen wir eine Rückkehr des Stils. Objekt-Rückgaben haben nicht so, wie Sie in den Folien gesehen haben, hat es zweimal zwei getan, was nur eine einfache alte Zahl zurückgibt . Returns können auch eine Variable lokale Variable wie Stilobjekt zurückgeben. Richtig. Also geben wir Stil-Objekt zurück. Das ist, du könntest zurückkehren. Du könntest es so tun, wie es so ist, was manche Leute vielleicht bevorzugen. Ich denke nur, das ist ein wenig expliziter und ich mag es einfach besser, Aber Sie können nur das Objekt selbst zurückgeben, wenn Sie eso wieder schwächen möchten. Wie ich schon sagte, wir können Computer-Eigenschaften mit App Punkt Name der Computereigenschaft zugreifen, So App Punktstil Sie können sehen, dass es ein Objekt mit der Hintergrundfarbe gelb und Deckkraft eines zurückgibt . Richtig, denn unsere Helligkeit ist auf eins gesetzt. Wenn die Instanzen erstellt die View-Instanz, die ich sagen sollte, erstellt wird und Sie sehen können , dass dies das This Objekt hier genau das gleiche wie dieses Objekt hier ist. Also, was wir tun werden, ist, dass wir diesen V-Bine Stil einfach durch Stil ersetzen werden. Richtig? Und die Ansicht wird automatisch diesen Stil kennen. Nun, es ist Ah, es ist eine View-Direktive. Der Wert davon muss also irgendwo in der View-Instanz sein, oder? Und so sieht es in den Daten und sagt: OK, OK, es ist nicht in den Daten über Farbe. Helligkeit kennt einen Stil, den es durch die Computer sah und sagt, OK, ich fand Stil. Was ist diese Rückkehr jetzt? Dies ist ein Das nächste, worüber ich sprechen möchte, ist eine sehr, sehr wichtige Facette der berechneten Eigenschaften. Okay, also, wenn wir App Punktfarbe machen, sagen wir, Act up Helligkeit. In Ordnung, wenn ich buchstabieren kann, ist äh gleich eins richtig? Und wenn wir es hier ändern, habe ich die Helligkeit jetzt auf 0,54 eingestellt. OK, wenn wir uns ap Punkt Stil betrachten, es ist auch auf 0.54 gesetzt Wir ändern es wieder. Schauen Sie sich ap Punkt Helligkeit 0,77 bei Punkt-Stil. Die berechnete Eigenschaft wird aufgrund der Verwendung Magie automatisch aktualisiert. Was in der Hintergrundansicht passiert, weiß, dass es Selbstreferenzen hervorschaut, sollte ich zu anderen Daten in dieser Ansicht sagen. Instanz. Also sagt es OK, diese dunkle Farbe und diese Stopphelligkeit sind beide innerhalb dieses berechneten. Also, wenn diese dunkle Farbe oder diese Stop-Helligkeit, Sie wissen ,, hier, die Farbe und die Helligkeit, wann immer diese Ansicht ändern automatisch berechnet diese Eigenschaft. Okay? Und deshalb werden sie Computer genannt. Sie berechnen, wenn irgendetwas in ihnen irgendetwas ändert etwas in ihnen. Das ist Teil der Ansichtsinstanzänderungen, richtig? Es ist also eine wirklich mächtige Sache, eine wirklich coole Sache, und etwas, das für uns wirklich, wirklich nützlich sein kann , oder? Denn jetzt können Sie sehen, dass es genau das Gleiche tut. Wir können die Farbe ändern. Es wird auch die Farbe ändern. Okay, das war's. Mit Computern. Hoffentlich hat dir das gefallen. Ich fand sie lustig. Wie ich schon sagte, experimentieren Sie herum. Sehen Sie, was er sonst noch mit, ähm, in der nächsten Vorlesung machen kann ähm, , werden wir suchen, Maura Objekte berechnet hat, um einen prozentualen Wert unseres schwachen Schiebereglers zu erstellen . Also bleib dran. Wir sehen uns das nächste Mal 13. Bilde einen Sollwert: He, alle. Und willkommen zurück zu dem, was eigentlich die letzte praktische Vorlesung in der Ansicht Js Handwerk Kurs Ich bin wirklich stolz auf Sie alle dafür, dass es so weit in diesem zu machen, werden wir eine berechnete Eigenschaft verwenden, um ah Prozentsatz unserer Helligkeit zu zeigen. Wir werden zeigen, weißt du, 50%. Wenn unsere Helligkeit gleich 0,5 ist, lasst uns einfach anfangen. Also werde ich einfach Helligkeit plain html eingeben. Es wird nur hier auftauchen ist als Text und dann zu geschweiften Klammern. Und was passiert, wenn wir nur Helligkeit eingeben? Nun, es wird unsere Helligkeitseigenschaft hier unten in unserem Datenobjekt referenzieren. Und wenn wir den Schieberegler bewegen , wird er zeigen , dass er den Prozentsatz zeigt, aber wir wollen, dass das etwas hübscher aussieht. Wir wollen nicht, dass es 0.27 zeigt. Wir wollten 27% zeigen, oder? Wie sollen wir das machen? Nun, wir werden eine berechnete Eigenschaft verwenden, um etwas Mathematik auf unsere Helligkeitseigenschaft innerhalb unserer Daten durchzuführen . Also denken Sie daran, dass wir ein Komma verwenden, weil berechnet werden. Objekt ist nur, dass es ein Objekt ist, und wir werden eine neue Computereigenschaft namens dim Prozentsatz erstellen. Okay, und erinnere dich an alle berechneten Eigenschaften. Ihre Werte sind immer eine Funktion, und sie müssen immer etwas zurückgeben. Also lassen Sie uns einfach mit Rückkehr dieser Punkt Helligkeit mal beginnen 100. Okay, also denken Sie daran, dass dieser DOT die View-Instanz selbst referenziert, und er wird nach Helligkeit suchen. Helligkeit ist eins, und es wird diese mit 100 multiplizieren. Im Moment heißt es also, dass Helligkeit gleich eins ist, und das ist, weil ich vergessen habe, es hier oben zu ändern. Denken Sie daran, wir müssen es auch in unserer Vorlage ändern. Die Helligkeit ist nicht gleich. Wir wollen gleich Dim-Prozentsatz sein. Okay, und jetzt ist es gleich 100, die Sie sehen können, wenn wir es ändern, ändert es die Zahl. , hübsch Hübsch, hübsch, ziemlich genial, oder? Es ist wirklich so einfach, das zu tun, wie ein bisschen Mathematik. Oder du könntest sogar komplexere Mathematik machen. Sie werden hier bemerken, dass es diese wirklich seltsamen Zahlen immer wieder blinkt, oder? Wegen interner Dinge mit JavaScript, denke ich, ein HTML. Aber es gibt einen Weg, das zu beheben und was wir benutzen werden, ist, ah, Funktion, die unverdreht genannt wird. Alle JavaScript-Funktion genannt mathematische Punkt Runde. Und das wird es einfach auf den nächsten ganzzahligen Wert abrunden, so dass er es hat. Nein, es kann keine Dezimalstellen geben, oder? Also haben wir dieses Problem behoben. Es zeigt nicht mehr diese seltsamen zwischen den Zahlen, und das war's auch. Dafür können wir auch hinzufügen, ah, ah, Prozent melden Sie sich hier im HTML selbst, und es wird Prozent zeigen. Wir könnten das auch im JavaScript hinzufügen, indem wir ah, Pluszeichen und ein Prozentzeichen tun . Jetzt sehen Sie ihre 2% -Zeichen. Aber ich bevorzuge es hier oben, weil, wissen Sie, das ist HTML. Es ist im HTML, wo es hingehört. Sie können sehen, dass es wirklich so einfach ist, so etwas zu tun, nur eine berechnete Eigenschaft zu verwenden, um das zu zeigen. Alles klar, begleiten Sie mich in der nächsten Vorlesung für eine Wrap up einige wichtige Takeaways auf meinem gratulieren Sie Abschluss dieses Kurses. Gut gemacht. Sehen Sie, dass 14. Auffüllen und dein Projekt!: Willkommen zurück, alle zum letzten Vortrag des View-Js-Handwerkskurs. Herzlichen Glückwunsch. Du hast es durchgemacht. Ich hoffe, dass Sie aus diesem Kurs kommen und ein wenig mehr über das Framework wissen, als Sie es zuvor getan haben. Und ich hoffe, Sie können sehen, warum. Ich denke, es ist jetzt so ein fantastisches Werkzeug in der Web-Entwicklung. Dies war nur ein Crashkurs, ein Stück dessen, was ich denke, sind die wichtigsten Konzepte innerhalb des View-Frameworks. Wenn Sie das Framework genossen haben, wenn Sie es für cool gehalten haben, empfehle ich Ihnen, die View-Js-Dokumentation zu überprüfen und mir hier auf Skill-Sharing zu folgen , weil ich darauf schaue, einige verwandte Inhalte zu erstellen oder anzuzeigen. Wenn die Nachfrage jetzt da ist, lassen Sie uns über einige wichtige Takeaways sprechen, was Sie jetzt in der Lage sein sollten, mit Blick zu tun. Aber zumindest hoffe ich, dass Sie eine Instanz von Ihnen erstellen und einige reaktive Daten erstellen und wissen, was Sie in den HTML-Code einfügen müssen . Damit diese Daten angezeigt werden, sollten Sie in der Lage sein, eine Erhöhung in View und die V vier Direktive zu verwenden, um Listen von Daten in HTML zu rendern . Basierend auf diesen Strahlen haben wir das nicht in unserer Lampenanwendung verwendet, aber wir haben es früh in der Listenrendering-Vorlesung des Kurses gelernt. Es ist ein entscheidendes Konzept, deshalb wollte ich es abdecken. Sie sollten in der Lage sein, Ansichtsmethoden und darüber hinaus zu erstellen und zu verwenden. Um HTML interaktiv zu machen, sollten Sie in der Lage sein, View-Direktiven wie VF V Bind und das Modell zu verwenden , um den HTML-Code anzuzeigen und umgekehrt. Und Sie sollten in der Lage sein, berechnete Eigenschaften von Ansichten zu verwenden, um komplexere Datendaten zu speichern , die Berechnungen und dergleichen erfordern. Jetzt möchte ich Ihnen etwas zeigen, das ich erschaffen habe. Äh, das ist etwas fortgeschrittener in der Lampenanwendung. Ich nannte es View Dot TV, und was es tut, ist, dass es keine ganze Menge Sachen hat. Im Grunde wollte ich einen Fernseher modellieren. Ich wollte ursprünglich nur Bilder auf dem Bildschirm anzeigen und die View-Instanz Dinge wie Kanaldaten und Volumendaten halten lassen. Wenn Sie den Kanal ändern, würde es das Bild ändern, und die Lautstärkedaten würden nicht wirklich viel tun, außer die Lautstärkeregler, die Sie dort haben , Aber wie ich Dio bekannt war, habe ich es einen Schritt weiter gemacht. Ich habe tatsächlich YouTube's I Frame ein P I verwendet, um etwas zu schaffen, das tatsächlich Live-Streams innerhalb des Fernsehers beherbergen würde . Der Kanal ändert den Livestream, den du anhörst. Es sind alle diese. Weißt du, Die Chill Beats Toe Arbeitsstudie, die auf YouTube sind, all diese 24 7 Livestreams und die Lautstärke, während es auf dem Bildschirm erscheint. Es steuert auch tatsächlich die Lautstärke des YouTube-Players. Es ist also eine umfangreichere Demo eines Projekts, das ich erstellt hätte, wenn ich diesen Kurs absolviert hätte. Es verwendet einige oder erweiterte CSS, als wir in der Lampe gesehen. Ich habe dieses View TV nicht als Beispiel verwendet, weil ich mich nicht auf das CSS konzentrieren wollte. Es gab eine Menge CSS, die ich tun musste, um diese Funktion schön zu machen. Ich habe auch externe Job-Skript-Ressourcen wie YouTube verwendet, die ich ein P I rahmen , wie ich bereits sagte, und ich wollte nicht zu sehr mit diesem Zeug verstrickt werden. Deshalb habe ich so etwas geschaffen, das so einfach ist, damit wir Onley auf die Sicht in seinen Daten konzentrieren können. Etwas, das ich wirklich betonen möchte, ist, dass diese Ansicht Punkt TV-Anwendung Onley Konzepte verwendet , die wir hier im Kurs gelernt haben. Es benutzt nichts jenseits dieser Sicht klug. Wie ich schon sagte, Advance CSS und externe Jazz. Aber Onley Konzepte, die wir hier im Kurs gelernt haben, wenn es darum geht, zu sehen und die gesamte Anwendung ist so ziemlich, wissen Sie, wie 85 90% Ansicht, also werden sie ein Link dazu sein. Sie können auschecken Es ist auf Code Panic erstellt es auf Cope in wird ein Link zu ihm sein. In den Notizen dieser Vorlesung über, Ich ermutige Sie, es zu überprüfen. Sie können sich den Quellcode ansehen. Ein Schwung ist einfach mit ihm herumspielen. Ich mag die Anwendung wirklich. Ich war glücklich damit, und jetzt bist du dran. Ich möchte, dass du all das neu entdeckte Sichtwissen nimmst und etwas so kreativ machst, wie du nur kannst. Es ist nur auf Objekt mit Staat, richtig? Also wirklich, jedes elektronische Gerät, das Sie kennen, könnten Sie Lautsprecher tun, die Sie sogar wie ein Videospielkonsole Haus Benutzerdaten tun könnten. Welches Spiel läuft derzeit? Irgendwas. Weißt du, Sky ist das Limit. Denken Sie groß und schaffen Sie etwas wirklich Cooles. Um dies zu tun, wirst du auf den Kopf gehen, um pen dot io zu codieren und ein Konto zu erstellen, wenn du es noch nicht getan hast. Ich habe dir gesagt, dies zu Beginn des Kurses zu tun, aber wenn du dich entschieden hast, es nicht zu tun, ist jetzt an der Zeit, es zu tun. Auf diese Weise werden wir unsere Projekte innerhalb der Registerkarte „Projekte und Ressourcen“ des Kurses teilen . Sie werden nur einen Link und eine Miniaturansicht teilen, wenn Sie das endgültige Projekt wählen . Nun, ich möchte noch eine Sache erwähnen, bevor wir den Kurs in der Registerkarte Projekte und Ressourcen dieses Kurses beenden , gibt es einen Link zu einem pdf aus der Ansicht Js Handwerk Kurs tt, den ich auf seine alle Konzepte gemacht habe , die wir während des Kurses gelernt haben, sowie Beispiele, wie man sie benutzt. Jetzt möchte ich mich kurz dafür bedanken, dass Sie diesen Kurs besucht haben. Es bedeutet mir wirklich viel, dass du mehr über diesen fantastischen Rahmen erfahren wolltest ich so sehr liebe. Wenn Sie eine Rezension hinterlassen würden, würde ich es drehen. Sei ewig dankbar. Ich würde das wirklich zu schätzen wissen und alles Konstruktive, was du für mich hast. Ich möchte lernen, wie man besser unterrichtet, weil es dir hilft zu lernen. Und das ist wirklich mein Ziel, diesen Kurs und alle anderen Kurse zu erstellen, ich achte darauf, mir auch zu folgen, weil ich definitiv mehr Kurse hochladen werde, um Skill Share zu teilen. Ich hatte so viel Spaß, das zu machen. Vielen Dank, dass Sie sich mir in dieser Ansicht Js Crashkurs angeschlossen haben. Und ich hoffe, Sie bald in einem zukünftigen Kurs zu sehen. Danke, dass du dich mir angeschlossen hast.