Vue.JS -Komponenten

Vue.JS ist ein progressives JavaScript-Framework, mit dem UIS (Benutzeroberflächen) und SPAs (einseitige Anwendungen) erstellt werden. Wir können mit dem Erstellen von Webanwendungen in Vue beginnen.JS mit dem Grundkenntnis von HTML, CSS und JavaScript. Vue.JS wird gebaut, indem die besten Funktionen aus bereits vorhandenen Angular- und React -Frameworks kombiniert werden. Entwickler lieben es, Freiheit und Komfort zu codieren und zu fühlen, während sie Anwendungen in Vue erstellen.JS.

Dieser komponentenbasierte Ansatz wurde im Grunde genommen von den ReactJs inspiriert und ausgewählt. Wir schreiben Code in Form von Komponenten, damit wir diese Komponente importieren und ihn wiederverwenden können, wo wir sie brauchen. Vue.JS bietet eine Einzelfilmkomponente, die es zu einem locker gekoppelten und wiederverwendbaren Code macht.

Vue.JS bietet den besten Komponentenansatz, wie unabhängig von einem Entwickler. Er kann es in einer einzigen finden .VUE -Datei. Entwickler fühlen sich so wohl und wohl, wenn sie sich keine Sorgen machen müssen oder sich um die zusätzliche Struktur einer Komponente kümmern müssen.

In diesem Artikel werden wir uns die einlesige Komponente ansehen, die a hat .VUE -Erweiterung. Schauen wir uns also ein sehr einfaches Beispiel für Vue -Komponenten an und verstehen Sie es.

Dies ist ein sehr einfaches und grundlegendes Beispiel für eine Vue -Komponente. In dem wir sehen können, dass der Code in drei Ebenen unterteilt ist. Diese dreischichtige Syntax ist der beste Teil von VUE.JS. Es erfüllt die Besorgnistrennung und ist jedoch in einem einzigen .VUE -Datei. Wir haben unsere Vorlage (HTML), Logik in JavaScript und Styling in einer Komponente.

• Vorlage
• Skript
• Stil

Vorlage

In diesem Vorlagen -Tag schreiben wir unseren HTML -Code. Wir können auch mit dem Vue Variablen binden.JS-Datenbindungssyntax, und wir können einige andere Funktionen auch mit dem VUE hinzufügen.JS lieferte Syntax für die jeweiligen Funktionen.

Skript

Dies ist der Abschnitt, in dem wir die Logik der Komponente in JavaScript schreiben können, indem wir den VUE -Syntaxen folgen.JS. Alle Funktionen und Logik einer Komponente finden Sie hier. Zum Beispiel,

• Importieren anderer Komponenten und Pakete erforderlich.
• Variable Aussage
• Methoden/Funktionen
• Lebenszyklushaken
• Berechnete Eigenschaften und Beobachter
• Usw…

Stil

Hier schreiben wir das Styling in CSS der Komponente oder können jeden Präprozessor verwenden, den wir verwenden möchten.

Dies ist nur ein Blick auf eine Komponente in Vue.JS. Schauen wir uns den Gebrauch, die Organisation und den Datenfluss zwischen den Komponenten ein wenig an.

Komponenten importieren und verwenden

Um die Komponente zu verwenden, müssen wir zunächst die Komponente importieren. Ansonsten wie kann VUE VUE.JS Bescheid wissen? Wir können einfach eine Komponente importieren, indem wir zu Beginn des Skript -Tags eine Anweisung „Import“ hinzufügen und diese Komponente im Objekt „Komponenten“ unter Verwendung der folgenden Syntax deklarieren.

Nachdem wir die Komponente erfolgreich importiert haben, können wir sie in der Vorlage wie dieser verwenden