So erstellen Sie eine App mit VUE.JS

Das JavaScript-Ökosystem ändert sich seit über einem Jahrzehnt, was bedeutet, dass die Entwickler der Front-End-Entwickler neue Technologien verfolgen mussten. Nach dem Testen Javascript-Frameworks. und Bibliotheken seit über fünf Jahren, habe ich denjenigen gefunden, der für mich funktioniert: vue.js.

In diesem Tutorial werde ich die grundlegende Struktur einer VUE-App erklären. Darüber hinaus werde ich Komponenten detailliert definieren, und berühren Sie weitere fortgeschrittene Funktionen wie Mixins, um zu demonstrieren So starten Sie einen Blog Laufen auf Ihrer eigenen einfachen App.

Willst du mehr Ratschläge? Wir haben Guides für alles von Web-Hosting Dienstleistungen an Cloud-Speicherung. Optionen und das Beste Webseitenersteller um.

• Die besten kostenlosen Blogging-Plattformen

Die Vorteile von vue.js

Der Hauptverkaufspunkt von VUE.Js ist, wie einfach es ist, zu lernen, da es in Plain HTML, CSS und JavaScript geschrieben wird. Die Bibliothek wird von einem Satz von unterstützt Dokumentation das wird ständig aktualisiert. Die Größe der Bibliothek ist im Vergleich zu Wettbewerbern gering. Darüber hinaus wurde sein CLI 3.0 als zukunftssicher umgeschrieben.

• Beschleunigen Sie die Leistung mit VUE.js

Loslegen

Um dieses Tutorial zu verfolgen, benötigen Sie nur eine Internetverbindung, da alle Entwicklung in CodesUndbox stattfinden wird, ein Full-Featured-Webcode-Editor. Der Link zum Code kann gefunden werden Hier .

Unsere App enthält Konfigurationsdateien wie z package.json. , ein index.html. Seite, die die Eintragsdatei unserer App und ein ist Src. Ordner, der der Kern unserer Anwendung ist. Der Inhalt dieses Ordners wird im gesamten Tutorial erklärt.

Komponenten in VUE.

VUE bietet die Möglichkeit, Komponenten zu erstellen. Hierbei handelt es sich um benutzerdefinierte Elemente, die zum Einkapseln des wiederverwendbaren Codes verwendet werden, und können von einer einfachen Taste auf eine vollständige Seite variieren. Eine Komponente besteht aus drei Hauptabschnitten, & lt; Template & gt; , & lt; script & gt; und & lt; style & gt; , das weiter erkundet wird.

App.Vue erstellen.

Wir werden unsere App beginnen, indem wir ein erstellen App.vue. Datei, die unsere Wurzel ist. Diese Komponente beinhaltet alle unsere zukünftigen Komponenten. Die erste Komponente wird sehr einfach sein, da er keine dynamischen Daten hat, jedoch einfach die drei genannten Abschnitte enthält (Vorlage, Skript, Stil).

 & lt; Template & gt;
& lt; div id = "app" & gt;
& lt; img class = "logo" src = "./ Assets / logo.png" alt = "vue js offizielles logo" / & gt;
& lt; / div & gt;
& lt; / template & gt;
& lt; script & gt;
Standardeinstellung exportieren {
Name: "App",
Komponenten: {}
};
& lt; / script & gt;
& lt; style & gt;
#App {// Normal CSS hier}
& lt; / style & gt; 

Artikel erstellen.VUE.

Um unsere Bloganwendung zu erstellen, benötigen wir Artikel. Dies beinhaltet, dass er eine Datei erstellt hat Artikel.VUE. und Speichern in einem Komponentenordner. Diese Komponente wird komplexer sein, da es einige grundlegende VUE-Funktionen enthält, die es dynamisch sein können.

Die erste Funktion, die wir einführen werden, wird als Richtlinie, die doppelten gelockten Klammern, bezeichnet, die den Titelwert durch ein dynamisches Anwesen ersetzen, das an das Bauteil weitergeleitet wird. Dies ist ein spezifisches Token, das in der HTML hinzugefügt wird und von der VUE-Bibliothek verwendet wird, um das DOM zu ändern, um HTML herzustellen.

 & lt; Template & gt;
& lt; Div Class = "Artikel" & GT;
& lt; img src = "./../ Assets / logo.png" / & gt;
{{title}} & lt; / h1 & gt;
& lt; p & gt; {{value}} & lt; / p & gt;
& lt; / div & gt;
& lt; / template & gt; 

Damit das Bauteil dynamisch ist, müssen wir Daten an diese bestehen können. Dies kann erreicht werden, indem Eigenschaften deklariert werden. Eine Komponente hat auch Zugriff auf die eigene private Instanzvariable namens Daten.

 & lt; script & gt;
Standardeinstellung exportieren {
Requisiten: {
Titel: String,
Wert: {type: string, erforderlich: true}
},
Daten() {
Rückgabe {Likes: 0, ShowingsNippets: True};
}};
& lt; / script & gt; 

Diese Komponente benötigt nur einen grundlegenden Stil, der ordnungsgemäß angezeigt wird.

Um unseren ersten Artikel anzuzeigen, müssen wir drei Schritte annehmen: Fügen Sie die Datei in ein App.vue. , fügen Sie es in der Vue-Instanz hinzu und bezeichnen Sie es als Teil des Vorlagenteils:

& lt; Template & gt;
& lt; div id = "app" & gt;
& lt; img class = "logo" src = "./ Assets / logo.png" alt = "vue js offizielles logo" / & gt;
& lt; articlecontainer / & gt;
& lt; / div & gt;
& lt; / template & gt;
& lt; script & gt;
Import articlecontainer von "./components/article";
Standardeinstellung exportieren {
Name: "App",
Komponenten: {articlecontainer}};
& lt; / script & gt; 

Wenn Sie diesen Code ausführen, ergibt sich leider einen Fehler, da wir nicht alle Eigenschaften bereitgestellt haben, die in der Artikelkomponente erforderlich sind. Um das Problem zu beheben, müssen wir ein Datenobjekt deklarieren und eine neue Richtlinie nennen v-Bindung das Objekt an die Artikelkomponente weitergeben.

 & lt; Template & gt;
...
& lt; articlecontainer v-bind = "post" / & gt; ...
& lt; / template & gt;
& lt; script & gt;
...
Name: "App",
Daten: Funktion () {
  Rücksendung {Beitrag: {
    Titel: "Mein erster Beitrag",
    Wert: "Lorem Ipsum dolor sitzt amet, ....",
    IMG: "./assets/logo.png"}
  };
}, ...
& lt; / script & gt; 

Berechnete Eigenschaften

Um unsere Komponente komplexer zu gestalten, führen wir eine neue Funktion der VUE-API ein berechnet . Dies wird normalerweise als "berechnete Eigenschaften" bezeichnet, da der Wert in ein reales Eigentum umgewandelt wird. Um zu zeigen, wie berechnete Eigenschaften funktionieren, werden wir unsere Komponente verbessern, um eine Snippets-Ansicht und die vollständige Artikelansicht zu unterstützen.

 & lt; Template & gt;
& lt; Div Class = "Artikel" & GT;
& lt; img src = "./../ Assets / logo.png" / & gt;
{{title}} & lt; / h1 & gt;
& lt; P v-if = "ShowingStippets" & GT; {{Snippets}} & lt; / p & gt;
& lt; p v-sonst & gt; {{value}} & lt; / p & gt;
& lt; Schaltfläche V-ON: click = "togglearticle" & gt; {{buttontext}} & lt; / button & gt;
& lt; Schaltfläche V-On: click = "mag ++;" & gt; mag: {{{mag}} & lt; / button & gt;
& lt; / div & gt;
& lt; / template & gt;
& lt; script & gt;
Standardeinstellung exportieren {
Requisiten: {
Titel: String,
Wert: {type: string, erforderlich: true},
SnippetsLength: {Type: Nummer, erforderlich: FALSE, Standard: 20}
},
Daten() {
Rückgabe {Likes: 0, ShowingsNippets: True};
},
berechtigt: {
Snippets () {
const fullarticle = this.Value;
const-Artikplate = FullArticle.sstring (0, das. SnippetsLength);
zurückgeben `$ {ArticleSuppets} ...`;},
Schaltflächentext() {
Senden Sie dies zurück. ShowingsNippets? "Vollständiger Artikel zeigen": "Snippets anzeigen";}
},
Methoden: {
togglearticle () {
das.ShowingsNippets =! Dies ..ShowingsNippets; }
}};
& lt; / script & gt; 

Dieses Beispiel bietet eine neue Richtlinie v-if. und V-On. , wodurch die Komponenten automatisch Komponenten angezeigt oder ausblendet, wobei eine private Variable angerufen wird ShowingStippets. . Der Wert von Snippets wird in der FLY berechnet und ändert sich, wenn eine der von ihm verwendeten Eigenschaften ( SnippetsLength. , kompletter Artikel ) Änderungen.

Maincomponent.VUE.

Der nächste Schritt beinhaltet eine neue Komponente, die der Körper unserer Anwendung sein wird, um einen API-Anruf zu emulieren und uns einer neuen Richtlinie vorzustellen v-für . Die VUE-API bietet Zugriff auf eine umfassende Liste von Haken, um Ereignisse zum richtigen Zeitpunkt zu laden und auszulösen (in unserem Fall montiert). Diese sind für dieses Tutorial außerhalb des Geltungsbereichs, aber Details finden Sie Hier .

 & lt; Template & gt;
& lt; div id = "maincontent" & gt;
& lt; articlecontainer v-for = "(Artikel, Index) in Beiträgen": Key = "Index" V-Bind = "Artikel" / & GT;
& lt; / div & gt;
& lt; / template & gt;
& lt; script & gt;
Import articlecontainer von "./article.vue";
FakePosts von "../data/posts.js" importieren;
Standardeinstellung exportieren {
Daten: Funktion () {
Rückgabe {Beiträge: []};
},
Methoden: {
fakeapicall () {
// Hier empfehlen wir die Möglichkeit, den Wert mit einer API zu laden
das.Posts = FakePosts;}
},
Komponenten: {articlecontainer},
montiert () {
das.fazeapicall ();}
};
& lt; / script & gt; 

Ein Mixin bauen

Ein weiteres leistungsfähiges Merkmal von Vue.js ist die Mixine. Dies sind wiederverwendbare JS-Methoden, die die Merkmale einer bestimmten Komponente erweitern. Mixine haben Zugriff auf die meisten VUE-API (Eigenschaften, Daten, Methoden). Sie werden normalerweise in einem aufbewahrt Mixin Ordner, erstellt im SRC-Verzeichnis und, da Mixins rein js sind, mit einem .js. Erweiterung.

Zunächst kann die Leistung dieser Funktion nicht offensichtlich sein. Wenn Sie sich mit VUE und seiner API vertraut machen, nehmen Mixins jedoch an, um Ihre Anwendung zu unterstützen und zu unterstützen. Ich habe gesehen, dass diese Funktion verwendet wurde, um die Eingabevalidierung, Internationalisierung zu definieren und Produktfunktionen anzugeben, z. B. Datei-Uploader.

Die Hauptunterschied zwischen einer normalen Komponente und einem Mixin ist, dass diese auf jede Komponente einbezogen und angewendet werden können. Beispielsweise können Sie einen Datei-Upload-Mixin in eine Schaltfläche oder ein Bild hinzufügen, und sie haben alle Zugriff auf die neue Funktion.

Wir werden ein Zugänglichkeitsmix aufbauen. Dies wird eine bereitstellen TOGGLECONTRAST. Methode, die auf einen unserer Komponente angewendet werden kann.

 Standardeinstellung exportieren {
Requisiten: {
lighttextcolour: {type: string, default: "# 252525"},
lightbackgroundcolour: {type: string, default: "#fff"},
darktextcolour: {type: string, default: "#fff"},
darkbackgroundcour: {type: string, default: "# 252525"}
},
Daten() {
RETURN {ISLIGHT: TRUE};
},
Methoden: {
ToggleHighContrast () {
thislight =! Dies ist ein Licht;
Wenn (das.Itlicht) {
das. $ el.style.backgroundcolor = Dies ist lightbackgroundcolour;
das. $ el.style.color = thatlightTextColour;
} else {
das. $ el.style.backgroundcolor = dieses.darkbackgroundcolour;
das. $ el.style.color = the.darktextcolour; }
}}
}; 

Nun ist unser Code definiert, wir können es in beliebige Komponenten einschließen und seine Methoden und Eigenschaften verwenden, als wären sie in der tatsächlichen Komponente definiert. Mixins könnten Eigenschaften angetrieben werden, sodass sie es anbieten können, sobald sie in die Komponente enthalten sind, oder sie benötigen möglicherweise einige Maßnahmen, um Effekte zu ergreifen (z. B. um eine bestimmte Methode aufrufen müssen).

Um diese Funktion voll ausnutzen, müssen wir die folgende Änderung in unserem Code vornehmen:

 & lt; Template & gt;
& lt; Div Class = "Artikel" & GT;
...
& lt; Button V-On: Klicken Sie auf = "ToggleHighContrast" & GT; High Contrast & lt; / button & gt;
& lt; / div & gt;
& lt; / template & gt;

& lt; script & gt;
Importieren von Zugang von "../mixins/accessibility.js";
...
Mixins: [Zugänglichkeit]
};
& lt; / script & gt; 

Wir können jetzt den Kontrast auf der einzelnen Komponente mithilfe der neuen definierten Taste umschalten. Es ist wichtig zu verstehen, dass auch wenn keine zusätzlichen Eigenschaften definiert wurden, unsere Artikelkomponente tatsächlich akzeptieren kann lighttextcolour. , darktextcolour. , lightbackgroundcolour. und darkbackgroundcolour. . Diese sind in der Zugänglichkeitsmischung definiert.

Unser kleiner Prototyp ist jetzt voll funktionsfähig und kann als Referenz für zukünftige Projekte verwendet werden.

Dieser Artikel wurde ursprünglich in Ausgabe 316 von veröffentlicht Netz Das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. AUSGABE 316 Hier kaufen oder Abonnieren Sie hier .

Zum Thema passende Artikel:

• 9 der besten Javascript-Frameworks
• Enthüllt: die neuesten JavaScript-Trends
• Wie man eine Blogging-Site mit Gatsby baut