German Subtitles for Vue.js 2 Quickstart Tutorial 2017



Subtitles / Closed Captions - German

Hallo , mein Name ist <font color="#E5E5E5">Dustin von Codierung der </font>

intelligente Art und Weise ruhig und heute in diesem <font color="#CCCCCC">Video </font> Ich möchte <font color="#CCCCCC">Sie </font><font color="#E5E5E5">geben </font><font color="#CCCCCC">eine kurze </font> Einführung in die Ansicht js2 <font color="#E5E5E5">Front-End </font> Rahmen und Sicht ist ein sehr neue Rahmen, die viel Traktion gewinnt zur Zeit und in dieser Einleitung

Ich werde Sie durch die ersten Schritte führen Sie müssen <font color="#CCCCCC">wissen , mit ein , um loszulegen </font> Rahmen und einen Virus Projekt initiieren so stay tuned in <font color="#CCCCCC">Ordnung zuerst es ist immer ein </font> gute Idee , <font color="#E5E5E5">einen Blick auf das Projekt zu übernehmen </font> Website und die Ansicht <font color="#CCCCCC">jas Website kann sein </font>

bei UJS dunkel und <font color="#CCCCCC">man kann es gefunden sehen </font> hier so was genau ist vu Arm Ansicht als progressives haben Sie einen Skript Framework dass konzentriert sich auf die Erstellung von Benutzeroberflächen so funktioniert es nur in <font color="#E5E5E5">der Ansicht Schicht </font> Ihre Anwendung und es macht keinen

Annahmen von Middleware und <font color="#CCCCCC">zurück und </font> Technologien, die Sie sind so in der Tat mit Sie können mit allen zusammenarbeiten, um die gemeinsam <font color="#E5E5E5">zurück und Technologien , die sind </font> <font color="#CCCCCC">für Web - Entwicklung bei der </font> Moment und kann leicht in integriert werden

Ihre <font color="#E5E5E5">bestehenden Projekte natürlich und </font> das macht <font color="#E5E5E5">es sehr einfach zu integrieren </font> Blick in Ihren bestehenden Projekten einer anderen Hauptvorteil einer Ansicht ist, dass es Ja <font color="#E5E5E5">sehr performant ist so , wie Sie </font><font color="#CCCCCC">es </font><font color="#E5E5E5">lesen kann </font> hier sind es nur 17 Kilobyte und Größe und

Das heißt, die Kern-Bibliothek, und dass extrem schnelle macht Sie Anwendung so der Overhead Sie hinzufügen, indem Blick <font color="#CCCCCC">Stühle </font><font color="#E5E5E5">in Ihrem Projekt ist sehr </font> klein und das macht Sie sicher , <font color="#CCCCCC">dass Ihre </font> Anwendung ist performant in <font color="#CCCCCC">Ordnung , wenn </font><font color="#E5E5E5">Sie </font>

möchten <font color="#CCCCCC">Ansicht draya die in Ihre integrieren </font> Projekt gibt es <font color="#E5E5E5">verschiedene Möglichkeiten, </font> tun so lassen Sie uns hier auf der Führungs klicken zu bekommen eine Übersicht über <font color="#E5E5E5">die verschiedenen Optionen und </font> <font color="#E5E5E5">Sie können hier bei der Installation klicken Sie auf </font>

die linke Seite Menü und hier können Sie <font color="#CCCCCC">sehen , </font> gibt <font color="#CCCCCC">es verschiedene Optionen , </font><font color="#E5E5E5">so dass für </font> <font color="#E5E5E5">Beispiel Sie können es direkt umfassen durch </font> mit einem Skript - Tag in der <font color="#CCCCCC">HTML - Seite </font> das ist <font color="#E5E5E5">im Grunde alles , was </font><font color="#CCCCCC">benötigt wird , </font> bekommen <font color="#E5E5E5">mit Blick </font><font color="#CCCCCC">gehen </font><font color="#E5E5E5">und Sie können </font>

integrieren <font color="#E5E5E5">sie direkt mit einem Skript </font> Tag und die Ressource von einem Content verwenden er Delivery-Netzwerk zum Beispiel läuft Pakete einen der Content-Delivery Netzwerke , die Zuschauer <font color="#CCCCCC">j / s weibull macht </font> und das ist die <font color="#CCCCCC">einfachste Möglichkeit , eine andere </font>

Option ist <font color="#CCCCCC">das </font><font color="#E5E5E5">NPM - Paket - Manager </font><font color="#CCCCCC">zu verwenden </font> installieren <font color="#CCCCCC">Ansicht von oder einfach eingeben </font> <font color="#E5E5E5">NPM installieren Ansicht , dass es herunterlädt </font> die Bibliothek und Hinzufügen <font color="#E5E5E5">zu den Noten </font> Module Ordner Ihres Projekts und dort eine <font color="#CCCCCC">andere Version ist , und das ist </font><font color="#E5E5E5">die andere </font>

Version, die werden, die wir sein unter Verwendung des in diesem Video <font color="#CCCCCC">und das ist eine Ansicht , </font> <font color="#CCCCCC">Ja CLI ist eine Befehlszeilenschnittstelle und </font> mit einer Kommandozeilen-Schnittstelle Sie sind einen anderen Kommandanten bekommen, das ist die Anzeigebefehl und durch diesen Befehl

Sie können ein neues Projekt initiieren, ist bereits auf Basis einer Vorlage und ist einschließlich der Ansicht Bibliothek, so dass Sie nicht tun <font color="#CCCCCC">müssen </font><font color="#E5E5E5">sie in einem separaten Schritt zum Download </font> <font color="#E5E5E5">okay , also lassen Sie uns auf </font><font color="#CCCCCC">die Kommandozeile </font><font color="#E5E5E5">wechseln </font> und starten Sie den Befehl Ansicht der Installation

Zeilenschnittstelle , so dass wir <font color="#CCCCCC">sie verwenden können , um </font> <font color="#E5E5E5">unser erstes Projekt initiieren und so zu tun , </font> wir müssen <font color="#E5E5E5">sagen npm installieren und ich es tun </font> als Root-Benutzer minus G, weil wir wollen, <font color="#CCCCCC">die Ansicht , eine Befehlszeile zu installieren </font> Schnittstelle als globaler Befehl so brauchen wir

diese Möglichkeit zu geben, g für die globale und der <font color="#CCCCCC">Paketname </font> Ansicht Strich auf CL ich, dass so ausführen Befehl und die Installation <font color="#E5E5E5">nimmt ein </font> zweite ok hier sind wir Ihnen die sehen können Installation abgeschlossen

erfolgreich und jetzt <font color="#CCCCCC">die neue Ansicht </font> Befehl ist verfügbar, können Sie es hier sehen es hat verschiedene Optionen und um ein neues Projekt erzeugen wir <font color="#E5E5E5">das verwenden </font> erste Option hier die in der Annahme und wir tun Sie es in <font color="#E5E5E5">der folgenden Art und Weise wollen wir sparen </font>

Sie in Web - Pack, weil <font color="#E5E5E5">wir wollen </font> die Projektvorlage erhalten, die unter Verwendung von die Web-Packung von Modul-Lader und Bündler und dann im <font color="#E5E5E5">letzten Parameter </font> geben Sie den Namen des Projekts und wir <font color="#E5E5E5">rufen Sie einfach es app 01 sehen und es ist jetzt </font>

das Projekt initiieren können Sie <font color="#E5E5E5">sehen , es ist </font> die Vorlage herunterladen und es ist dann einige Fragen zu stellen , müssen wir zuerst <font color="#CCCCCC">zu </font> geben Sie einen <font color="#E5E5E5">Projektnamen hier und wir können </font> <font color="#E5E5E5">lassen Sie es hier bei der Standard - App sehen </font><font color="#CCCCCC">01 </font> eine Projektbeschreibung obwohl, wenn die

Standard hier den Autor und jetzt ist es zu fragen, wie die Sicht getan werden sollte gebaut wir <font color="#E5E5E5">entscheiden sich für eine Laufzeit und kompilieren </font> das ist eine empfohlene Weg, die Jahre Linda Feature für den <font color="#CCCCCC">Moment Ich sage </font><font color="#E5E5E5">nein und </font> hier in Bezug auf den Testaufbau war Karma

und Straßenräuber obwohl nicht und End-to-End Tests beobachten war nicht wieder nicht so, das ist alle benötigt, was jetzt ein neues Projekt Ordner erstellt wurde Ansicht app eine <font color="#E5E5E5">Eins und </font> Sie <font color="#CCCCCC">können es hier der nächste Schritt zu sehen ist </font> ändern in diesen Ordner und dann

die Installation abzuschließen durch Installieren all das Ende <font color="#CCCCCC">em - Pakete für unser </font><font color="#E5E5E5">Projekt </font><font color="#CCCCCC">benötigt </font><font color="#E5E5E5">durch </font> mit der <font color="#E5E5E5">NPM - Befehl installiert in Ordnung so </font> Lassen Sie uns schalte so in das neue Projekt Verzeichnis und dann Ausführen von <font color="#E5E5E5">NPM installieren </font>

in diesem Verzeichnis und jetzt ist es zu holen Download alle definierten Pakete in JSON-Datei der Paket Punkt, der war <font color="#E5E5E5">das </font><font color="#CCCCCC">Projekt </font><font color="#E5E5E5">hinzugefügt , </font><font color="#CCCCCC">die Datei ist </font> enthält alle Abhängigkeiten und es ist Download alle <font color="#CCCCCC">Abhängigkeiten und </font>

Einbau der Module in die Knoten Knotenmodule Ordner <font color="#CCCCCC">des Projekts </font><font color="#E5E5E5">und </font> das <font color="#E5E5E5">dauert wieder eine zweite </font><font color="#CCCCCC">abzuschließen </font> <font color="#E5E5E5">okay , hier </font><font color="#CCCCCC">sind </font><font color="#E5E5E5">wir </font><font color="#CCCCCC">es fertig gestellt und jetzt </font> können wir einen ersten Test tun, und wir können beginnen auf dem Web-Server der Web-Entwicklung

Server das Projekt auszuführen , und <font color="#CCCCCC">das ist </font> wieder getan , indem Sie <font color="#E5E5E5">den </font><font color="#CCCCCC">Befehl npm und </font> Lassen Sie uns npm Lauf sagen def hier in <font color="#E5E5E5">Ordnung möglich </font> finden Sie in der Browser automatisch geöffnet und es ist das Laden über das <font color="#CCCCCC">Projekt hier bei </font> lokal Host-Port 8080, und Sie können das sehen

<font color="#CCCCCC">App , die mit Blick initialisiert wurde </font> Befehl bereits ausgeführt wird und zeigt, diese Ausgabe hier <font color="#E5E5E5">im Browser und wenn </font><font color="#CCCCCC">ich </font> Schalter zum Terminal zurück Sie <font color="#CCCCCC">sehen können </font> es sagt okay, es kompiliert wurde erfolgreich und jetzt, was der Server

auf localhost 8080 hören und es ist ein Live-Reload-Server so, wenn wir Umsetzung jetzt die <font color="#CCCCCC">Website Änderungen </font> <font color="#E5E5E5">wird geladen automatisch ohne </font> manuelle Schritte aussehen , warum nicht in <font color="#E5E5E5">Ordnung , so lassen sie </font> halten unser Projekt hier läuft , <font color="#E5E5E5">und ich habe </font>

<font color="#E5E5E5">ein anderes Register hier auf Befehl geöffnet </font> Linie und ich bin im selben Projekt Verzeichnis hier und lassen Sie uns nun meine Code - Editor und <font color="#E5E5E5">das ist Adam </font> so dass wir einen <font color="#E5E5E5">Blick auf das nehmen </font> erste Projektstruktur in <font color="#CCCCCC">Ordnung ist hier </font>

so wollen wir es in der Nähe und sehen , was <font color="#E5E5E5">drin ist </font> aus unserem Projektordner und hier <font color="#CCCCCC">sehen </font><font color="#E5E5E5">können , </font><font color="#CCCCCC">haben wir verschiedene Dateien enthalten </font> Hier können Sie die package.json-Datei das ist <font color="#CCCCCC">das Feuer gut keine Abhängigkeiten </font> aufgeführt sind und <font color="#E5E5E5">bevor wir haben dafür gesorgt , </font>

dass die Abhängigkeiten haben heruntergeladen <font color="#E5E5E5">und in </font><font color="#CCCCCC">den Knoten </font><font color="#E5E5E5">installiert </font> modules Ordner durch die <font color="#CCCCCC">npm Ausführung in </font> Stil Befehl im Projektordner und dann wird <font color="#E5E5E5">die nächste Datei , die </font><font color="#CCCCCC">wichtig ist , ist </font> die Datei index.html , weil in <font color="#E5E5E5">dieser Datei </font>

<font color="#E5E5E5">Sie finden den Ausgangspunkt für die </font> Anwendung und <font color="#E5E5E5">Sie können es ist eine Ebene sehen </font> einfache ha HTML-Datei und im Körper <font color="#CCCCCC">Abschnitt dieser HTML - Datei ein Diff Abschnitt </font> enthalten ist , und <font color="#E5E5E5">daß eine Ablenkein Arm </font> hat ein Attribut hier das ID-Attribut

und die ID-ID-Attribut wird zugewiesen ein Zeichenfolge in unserem Fall , <font color="#E5E5E5">dass der App - String ist </font> und <font color="#CCCCCC">z Übel Arm die Platzhalter , so dass </font> die Ansicht Rahmen weiß, wo einfügen Der Inhalt, der <font color="#CCCCCC">durch die erzeugten </font> Ansicht Anwendung ok Hals nächste Lassen Sie uns offen

der Quellordner, weil so dass a Platz in unserer Projektstruktur, wo die Ansicht <font color="#CCCCCC">jes Anwendung implementiert und </font> Lassen Sie uns öffnen innerhalb dass die Datei-Ordner Hauptpunkt <font color="#CCCCCC">jas und das ist der Ort , an dem </font> die <font color="#CCCCCC">Viewer - Anwendung initialisiert </font>

<font color="#E5E5E5">und Sie können hier sehen wir importieren </font> hier zwei Dinge zuerst müssen wir <font color="#E5E5E5">importieren </font> eine Ansicht aus Sicht und <font color="#CCCCCC">dass </font><font color="#E5E5E5">dies </font><font color="#CCCCCC">die </font> Hauptanwendungsklasse und man kann sehen, hier wird es verwendet , um <font color="#E5E5E5">eine neue zu erstellen </font> Instanz

Rahmen und zusammen mit einer Aussicht, die wir eine zweite Sache, importieren und das ist App aus dem <font color="#CCCCCC">App - Datei und das ist ein </font> Komponente wir hier umsetzen in unser Projekt , das <font color="#CCCCCC">in verfügbar ist </font><font color="#E5E5E5">hier </font> <font color="#E5E5E5">Epcot Ansicht werden wir einen Blick in einer Seite nehmen </font>

<font color="#CCCCCC">diese Umsetzung in einem zweiten aber </font> lassen Sie uns zuerst auf den Teil konzentrieren sich hier und die neue Ansicht Rahmen Instanz erstellt von ihnen <font color="#CCCCCC">der Konstruktor aufrufen </font> durch das neue Schlüsselwort und die Konstruktor bekommt einen Parameter und

<font color="#E5E5E5">das ist das Objekt hier mit diesem </font> Rekonfiguration Eigenschaften und die erste <font color="#E5E5E5">Immobilien hier kann man es heißt </font><font color="#CCCCCC">al </font><font color="#E5E5E5">sehen </font> <font color="#E5E5E5">für das Element und die </font><font color="#CCCCCC">zugewiesen bekommt die </font> String hier und das ist in erster Linie sagen oder eine definierende , dass die Ausgabe <font color="#CCCCCC">der Ansicht , </font>

<font color="#CCCCCC">Anwendung sollte in das eingeführt werden </font> Element , das <font color="#CCCCCC">der ID - App ist und wir sahen , </font> es zuvor in der Datei index.html wir die Zeichenfolge App <font color="#CCCCCC">z rd Eigenschaft zugewiesen </font> und jetzt verbinden wir unsere Sicht Anwendung mit dem div-Elemente, so dass die

Ausgang, der <font color="#CCCCCC">die HTML erzeugt wird </font> Ausgabe , die <font color="#CCCCCC">durch unsere Ansicht </font><font color="#E5E5E5">erzeugt wird </font> Anwendung ersetzt, dass die div Element in unserem Index HTML-Datei so hier ist die Vorlage unserer Anwendung und dass die Vorlage <font color="#CCCCCC">E ist sehr einfach </font>

weil es <font color="#E5E5E5">ein Element nur enthält , </font> und <font color="#CCCCCC">das ist das Z AB Element , das ist </font> die sich auf <font color="#E5E5E5">die App - Komponente und durch </font> Verwendung dieses Element hier in unserem Template wir definieren, dass auf der HTML-Ausgabe die <font color="#CCCCCC">von der App - Komponente erzeugt wird , </font>

sollte hier <font color="#E5E5E5">innerhalb unserer Ansicht platziert werden </font> Schablone, also ist es ein Teil des Ausgangs die unsere Ansicht Anwendung generiert und der Lage sein , auf dem <font color="#E5E5E5">App - Element zu verwenden , </font> hier ist und die Ausgabe der <font color="#CCCCCC">App </font> Komponente

wir <font color="#CCCCCC">müssen uns nicht nur importieren hier oben </font> <font color="#E5E5E5">müssen auch hier innerhalb der erklären , oben </font> Objekt, das wir auf die zuweisen Komponenten Eigenschaft in der Ansicht Konfigurationsobjekt, so dass die Ansicht Anwendung weiß , dass wir <font color="#E5E5E5">machen wollen </font>

Verwendung von App-Komponente innerhalb unserer Vorlage <font color="#CCCCCC">okay , also lassen Sie uns Umschalten auf die </font> <font color="#CCCCCC">Umsetzung der App - Komponente und </font> die Umsetzung ist in App verfügbar Kröte Blick so hier <font color="#CCCCCC">können Sie unsere Sets sehen </font> der vollständigen Umsetzung <font color="#CCCCCC">Ende , wie in </font>

jede Ansicht <font color="#E5E5E5">J als einzelne Datei Komponente </font> Implementierungen als Datei gliedert sich in drei Abschnitte auf der Oberseite können Sie <font color="#CCCCCC">hier sehen </font> <font color="#E5E5E5">Abschnitt des app ist die Vorlage , </font> Komponente dann haben wir ein Skript Abschnitt hier und <font color="#E5E5E5">schließlich haben wir hier die </font>

<font color="#CCCCCC">Abschnitt Stil enthält , auf CSS - Styling </font> Code <font color="#CCCCCC">für die Komponentenvorlage und </font> Sie können sehen , das macht <font color="#E5E5E5">es sehr einfach, </font> behalten die Übersicht, weil alles auf eine Komponente gehört, ist hier innerhalb dieser eine Datei und die so lassen Sie uns zuerst

werfen Sie einen Blick <font color="#E5E5E5">auf die Skriptabschnitt Sie </font> siehe hier kann das Skript Abschnitt Herstellung eines Standard-Experte von a und Komponentenkonfigurationsobjekt für View und das Konfigurationsobjekt ist enthält <font color="#E5E5E5">zwei Eigenschaften </font><font color="#CCCCCC">Name zuweisen </font>

ein Name auf die Komponente in unserem Fall <font color="#CCCCCC">ist es </font> App und wieder eine Komponenten-Eigenschaft ein Objekt, wobei alle die enthält nachfolgende Komponenten, die verwendet werden, hier in App-Komponente und wir haben eine Komponente enthalten <font color="#CCCCCC">hier das ist der </font>

hallo Komponente es hier aufgeführt, weil wenn wir einen <font color="#CCCCCC">Blick </font><font color="#E5E5E5">auf die Vorlage , die Sie </font> sehen die hallo-Komponente ist im Preis inbegriffen <font color="#E5E5E5">in der Vorlage durch den hallo LM mit </font> und hier und jetzt können Sie sehen <font color="#CCCCCC">die </font> Vorlage ist nicht so lange mit nur einem

<font color="#E5E5E5">diff Abschnitt hier und der diff Abschnitt </font> besteht aus zwei <font color="#CCCCCC">Elementen </font><font color="#E5E5E5">eines Bildes </font> Element dieses Bildelement einschließlich das Logo PNG-Datei und die Ausgabe und <font color="#E5E5E5">es einschließlich der Ausgabe , die ist </font> erzeugt durch <font color="#E5E5E5">die Unterkomponente Hallo und </font>

<font color="#CCCCCC">Vergleichen wir nun diese Vorlage auf die </font> Ausgang, der ein <font color="#CCCCCC">weibull hier in der war </font> Browser können Sie <font color="#CCCCCC">das </font><font color="#E5E5E5">Etikett hier sehen </font> das ist die <font color="#E5E5E5">Logo - Datei und alle anderen </font> Ausgang, der <font color="#CCCCCC">hier erzeugt wird , die </font> <font color="#CCCCCC">Begrüßungsnachricht der wesentlichen Flügel des </font>

Ökosystem Links und so weiter herkommt <font color="#E5E5E5">der Inhalt oder die Ausgabe , die </font><font color="#CCCCCC">ist </font> durch <font color="#E5E5E5">Z Hallo Komponente hergestellt und ist </font> <font color="#CCCCCC">hier enthalten in der Vorlage so lassen </font> einen Blick <font color="#E5E5E5">auf den letzten Teil auf die </font> erste Projektstruktur und das ist die

Umsetzung der Komponente Hallo die Umsetzung <font color="#CCCCCC">als weibull hier in </font> die Unterordner Komponenten und Datei hallo Punkt Ansicht und / oder die Datei öffnen und hier Sie können <font color="#CCCCCC">wieder sehen wir die Vorlage </font> Bereich zur Verfügung, dann haben wir die Crew

<font color="#CCCCCC">/ Script </font><font color="#E5E5E5">Abschnitt und schließlich </font><font color="#CCCCCC">die </font><font color="#E5E5E5">Verwendung </font> Style-Sektion und wie Sie sehen können, wenn wir starten, indem Sie einen Blick auf das Skript unter Abschnitt wieder ein Standard-Export wird Definieren einer Komponentenkonfiguration Objekt den Namen in diesem Fall ist hallo

weil wir die Hölle definieren Komponente und dann <font color="#CCCCCC">gibt es etwas , </font> <font color="#E5E5E5">neu , es ist eine Datenfunktion eine Rückkehr </font> Objekt mit einer Eigenschaft enthalten und das ist eine Z msg <font color="#E5E5E5">für Nachricht steht </font> Eigentum und msg wird zugewiesen die

Willkommen String und man kann sehen, dass es Willkommen <font color="#E5E5E5">zu Ihrer Sicht </font> Schienen - App , die genau <font color="#CCCCCC">die Zeichenfolge ist </font> die <font color="#CCCCCC">als Überschrift ausgegeben wird hier </font> unter der Logo-Datei und jetzt, wenn Sie nehmen <font color="#E5E5E5">ein Blick auf die , die Template - Code </font><font color="#CCCCCC">ist </font>

definiert hier aus können Sie auf dem Grundstück sehen msg wie hierin verwendet, die Vorlage in der h1 Element durch die Interpolation unter Verwendung von Syntax, die offen zu verwenden, erfordert und Schließen Doppel geschweiften Klammern und durch die Verwendung zetas Syntax wir in der Lage sind <font color="#E5E5E5">zu schließen </font>

Eigenschaften von dem <font color="#E5E5E5">Objekt , das ist </font> aus der Daten Funktion der zurück Komponente in unserem Template und das ist die Grund , <font color="#CCCCCC">warum der Text </font><font color="#E5E5E5">aus </font><font color="#CCCCCC">dem msg </font> Eigentum ist hier ausgedruckt und die die Rest der Vorlage können Sie sehen, es ist

über diese Links hier ausdrucken wir haben die wesentliche Verbindung Abschnitt enthalten in einem h2 - Elemente und <font color="#E5E5E5">dann als eine Liste aller </font> die Links <font color="#E5E5E5">werden ausgedruckt und wir haben </font> das Ökosystem hier ist es, dass ein Teil mit fallings zeigen Router <font color="#CCCCCC">yucks anzuzeigen </font>

Ansicht loader und atemberaubender Blick so auf dem <font color="#CCCCCC">nächsten Schritt </font><font color="#E5E5E5">möchte ich </font><font color="#CCCCCC">einige </font><font color="#E5E5E5">Änderungen </font><font color="#CCCCCC">vornehmen </font> auf die anfängliche Implementierung und nur um <font color="#CCCCCC">Ihnen einen Eindruck </font><font color="#E5E5E5">davon , wie einfach es </font> ist <font color="#CCCCCC">die Ansicht , Rahmen zu verwenden und geben </font> <font color="#E5E5E5">Sie eine kleine Einführung zu einigen der </font>

Standardansicht <font color="#CCCCCC">jrs Richtlinien und </font><font color="#E5E5E5">ich beginne </font> mit <font color="#CCCCCC">den Änderungen von einigen Löschen </font> der Inhalt hier in der Vorlage von die hallo - Komponente und <font color="#E5E5E5">ich werde </font> entfernen alles , was <font color="#E5E5E5">zu zusammenhängt </font> die beiden <font color="#CCCCCC">Verbindungsabschnitte hier so lassen sich </font>

diese löschen , so dass wir <font color="#E5E5E5">nur drucken </font> aus der <font color="#CCCCCC">Willkommensnachricht und Sie können sehen , </font> Ich rette die Datei und sofort <font color="#E5E5E5">wird es in der neu geladen </font> Browser ohne mich zu müssen <font color="#E5E5E5">tun </font> manuell hier alles und jetzt können wir gehen

auf beispielsweise <font color="#E5E5E5">eine Liste mit der Umsetzung </font> ausdrucken und <font color="#E5E5E5">ich definieren eine andere Daten </font> Immobilien hier im <font color="#E5E5E5">Objekt , </font><font color="#CCCCCC">das ist </font> durch <font color="#CCCCCC">die zurückgegebenen </font><font color="#E5E5E5">Daten gemessen und ich bin </font> das Array Namensgebung <font color="#E5E5E5">i haben möchte </font> Benutzer und es dann als ein Array definieren und

innerhalb dieser Anordnung lassen Sie uns sagen, wir haben Objekte in <font color="#E5E5E5">dieser Anordnung enthalten , die </font> besteht aus zwei Eigenschaften lassen Sie uns ein verwenden Vorname Eigenschaft und ordnet zuerst Name String und ein Nachname in <font color="#CCCCCC">Ordnung , das ist </font> es läßt so vielleicht die zwei weitere Elemente hinzufügen

hier in <font color="#E5E5E5">Ordnung einen anderen Vornamen zuweisen </font> und Nachnamen für <font color="#E5E5E5">das zweite Benutzerobjekt </font> und für das cert Benutzerobjekt sie verwendet John als Vorname <font color="#E5E5E5">und vielleicht Porter als </font> ein Nachname so jetzt <font color="#E5E5E5">haben wir drei Benutzer </font> hier in dem Benutzer-Array definiert und jetzt

wir sind in der Lage <font color="#CCCCCC">zu nutzen oder zu nutzen zu machen </font> , dass die <font color="#E5E5E5">Benutzer - Array mit dem Inhalt </font> in unserer Vorlage enthalten und ich möchte die Benutzer als Liste ausdrucken, so unter das h1-Element lassen Sie uns ein anderes umfassen diff Abschnitt hier und dies sollte eine sein

ungeordnete Liste und ich sagte Listenelement und jetzt bin ich mit <font color="#E5E5E5">Blick </font><font color="#CCCCCC">Ja </font> Standardrichtlinie , die <font color="#E5E5E5">V genannt wird </font> minus <font color="#E5E5E5">4 und ich sage es einige gleich </font> die Feder Benutzer in Nutzer und durch Anwenden <font color="#E5E5E5">dass Syntax hier die Ansicht </font><font color="#CCCCCC">Ja Rahmen </font>

wird <font color="#E5E5E5">über das Array iterieren und </font> darunter ein Listenelement Element <font color="#CCCCCC">pro </font> Objekt <font color="#E5E5E5">in unserem Array in dem definierten </font> <font color="#E5E5E5">erzeugten Ausgabe und jetzt können wir das nutzen </font> Interpolation Syntax erneut <font color="#CCCCCC">drucken </font> aus den Werten zuerst aus dem Benutzer drucken

<font color="#E5E5E5">Vorname und dann aus dem Benutzer drucken </font> Nachname <font color="#CCCCCC">okay , machen wir es speichern und Sie können </font> siehe die Ausgabe <font color="#CCCCCC">erzeugt und </font><font color="#E5E5E5">I und </font> die Namen der Benutzer immer wieder in <font color="#CCCCCC">Ordnung </font> so nächste , was ich <font color="#CCCCCC">schließen möchte, ist ein </font> Eingabeelement und verwenden Zweiweg-Daten

Binden der Wert des Eingangs zu synchronisieren Element , das eine Eigenschaft , die <font color="#CCCCCC">ist </font> in unserem Datenmodell in <font color="#E5E5E5">Ordnung Lassen Sie uns definiert </font> zuerst eine neue Eigenschaft definieren hier <font color="#CCCCCC">in der </font> Rückgabeobjekt der Datenfunktion und Lassen Sie uns diese Eigenschaft Input Name gut und

nur einen leeren String zuweisen hier in <font color="#E5E5E5">Ordnung </font> und in unserer Vorlage hier unter dem diff Abschnitt der Liste der Benutzer <font color="#E5E5E5">Ich bin </font> Definieren andere diff Abschnitt und innerhalb dass diff Abschnitt Ich bin einschließlich ein Eingabeelement und wir verwenden

die <font color="#E5E5E5">Zeit , Text und wir nicht Namen brauchen , und </font> Wert hier stattdessen verwende ich eine andere <font color="#E5E5E5">Ansicht j als Standardrichtlinie , die ist </font> <font color="#CCCCCC">V Model - View - dash - Modell genannt , und </font><font color="#E5E5E5">ich bin </font> Zuordnen der <font color="#CCCCCC">Eingangsstange , die Zeichenfolge </font> entspricht <font color="#CCCCCC">den Namen unseres Eigentums </font>

wir haben hier definiert und <font color="#E5E5E5">lassen Sie uns die Ausgabe auf </font> diese Eigenschaft hier unter dem Eingang Element und lassen Sie uns sagen, oder sagen wir mal unsere laichen , und ich bin mit dem <font color="#E5E5E5">v dash Text </font> Richtlinie und <font color="#CCCCCC">ich bin die Zuordnung wieder Eingang </font> Val <font color="#CCCCCC">okay , also lassen Sie sich hier sieht unser Eingang </font>

Element , und ich kann jetzt beginnen <font color="#E5E5E5">Typisierung </font> etwas in die <font color="#E5E5E5">Entwicklung und Sie </font> siehe hier kann das ist die Leistung unserer Spannelement , das <font color="#CCCCCC">mit dem Eingang gebunden ist , </font> gut Element durch den <font color="#CCCCCC">V minus Text mit </font> Richtlinie die <font color="#E5E5E5">Ausgabe von z den Eingang hier </font>

direkt hier als Ausgang reflektiert auf der <font color="#CCCCCC">gleichen Seite in </font><font color="#E5E5E5">Ordnung das letzte , was ich würde </font> <font color="#E5E5E5">zu </font><font color="#CCCCCC">zeigen , wie ist , wie Sie verwenden können , </font> auf Ereignisse mit Blick Arzneimittelstudien und gehen, um einen anderen diff Abschnitt umfassen hier so den Anwendungsfall <font color="#E5E5E5">würde Ich mag an </font>

Umsetzung ist ein sehr <font color="#CCCCCC">einfaches nur uns lassen </font> <font color="#E5E5E5">implementieren einen Knopf, </font> wird ein Zähler um eins zu erhöhen jedes Mal , wenn der Benutzer <font color="#E5E5E5">auf die Schaltfläche klickt </font> so lassen Sie uns zuerst die Zählerdaten definieren Immobilien hier in unserem Datenobjekt <font color="#E5E5E5">Ich bin </font>

geht einen Zähler rufen und setzen Sie ihn zunächst auf 20 und innerhalb dieser neuen Erkennung ich Umsetzung einer Taste <font color="#CCCCCC">und </font> diese Taste sollte enthalten und beauteous Event-Handler, und ich bin mit dem Richtlinie <font color="#E5E5E5">v dash auf </font><font color="#CCCCCC">gefolgt von der </font>

Ereignis <font color="#CCCCCC">i </font><font color="#E5E5E5">reagieren </font><font color="#CCCCCC">möchte </font><font color="#E5E5E5">und </font> das ist ein Click - Ereignis und jedes Mal , wenn <font color="#CCCCCC">die </font> Benutzer klickt <font color="#E5E5E5">auf die Schaltfläche wird der Zähler </font> Eigenschaft sollte erhöht werden, so bin ich mit <font color="#E5E5E5">plus plus hier und den Inhalt der </font> die Taste sicher , dass der <font color="#CCCCCC">Wert widerzuspiegeln </font>

der Zähler , so dass <font color="#CCCCCC">ich ein wenig bin auch </font> Bit von Textinformationen hier haben Sie auf diese Schaltfläche geklickt und jetzt werde ich <font color="#CCCCCC">verwenden Interpolation Syntax wieder </font> umfassen den Wert des Zählers <font color="#E5E5E5">x </font><font color="#CCCCCC">ok </font> wir speichern sie und sehen , wie <font color="#CCCCCC">die Ausgabe </font>

sieht aus wie hier so jetzt ein Knopf <font color="#E5E5E5">und I </font> <font color="#E5E5E5">Klicken Sie auf die Schaltfläche und jedes Mal , wenn ich </font> <font color="#CCCCCC">zu sehen , klicken Sie können , ist der Zählerwert </font> die auf den Button ausgedruckt wird hier erhöht wird, wurde durch ein dies die gleichen <font color="#E5E5E5">von Codierung der intelligenten Art und Weise </font><font color="#CCCCCC">ruhig , wenn Sie tun </font>

<font color="#CCCCCC">vergessen Sie nicht , wie meine Videos bitte auf </font> abonnieren <font color="#E5E5E5">Sie meinen Kanal sehen Sie in der </font> nächstes Video bye Sie



Video Description

#1 Online Course: Vue JS 2 - The Complete Guide (http://codingthesmartway.com/courses/vuejs2-complete-guide/)

Vue.js 2 Quickstart Tutorial 2017

Vue is a progressive JavaScript framework that focuses on building user interfaces. As it only works in the “view layer” it makes no assumption of middleware and backend and therefore can be integrated easily into other projects and libraries. Vue.js offers a lot of functionality for the view layer and can be used for building powerful single-page webapps. In this video tutorial you'll learn how to get started with Vue.js!

This is a CodingTheSmartWay.com tutorial

---------------------
Check out our ebooks on Leanpub.com:

* Angular 2 - A Practical Introduction to the new Web Development Platform
https://leanpub.com/angular2-book

* Ionic 2 - A Practical Introduction To Hybrid Mobile Apps Development
https://leanpub.com/ionic2-book
---------------------

Musik:
Night Owl by Broke For Free is licensed under a Creative Commons Attribution License.
(http://freemusicarchive.org/music/Broke_For_Free/Directionless_EP/Broke_For_Free_-_Directionless_EP_-_01_Night_Owl)