Vue.js-Komponenten

Vue.js ist ein progressives Javascript-Framework, das zum Erstellen von UIs (User Interfaces) und SPAs (Single-Page Applications) verwendet wird. Wir können mit der Erstellung von Webanwendungen in Vue beginnen.js mit Grundkenntnissen in HTML, CSS und Javascript. Vue.js basiert auf der Kombination der besten Funktionen aus bereits vorhandenen Angular- und React-Frameworks. Entwickler lieben es zu programmieren und spüren Freiheit und Komfort beim Erstellen von Anwendungen in Vue.js.

Dieser komponentenbasierte Ansatz wurde im Wesentlichen von ReactJS inspiriert und ausgewählt. Wir schreiben Code in Form von Komponenten, damit wir diese Komponente importieren und wiederverwenden können, wo immer wir sie brauchen. Vue.js bietet eine Einzeldatei-Komponente, die es zu einem lose gekoppelten und wiederverwendbaren Code macht.

Vue.js bietet den besten komponentenbasierten Ansatz, wie alles, was ein Entwickler braucht; er kann es in einer einzigen finden .vue-Datei. Entwickler fühlen sich so wohl und wohl, wenn sie sich nicht um die zusätzliche Struktur einer Komponente kümmern müssen.

In diesem Artikel werfen wir einen Blick auf die Single-File-Komponente, die eine .vue-Erweiterung. Schauen wir uns also ein sehr einfaches Beispiel für eine Vue-Komponente an und verstehen Sie es.

Dies ist ein sehr einfaches und grundlegendes Beispiel für eine Vue-Komponente. Woran wir sehen können, dass der Code in drei Schichten unterteilt ist. Diese dreischichtige Syntax ist der beste Teil von Vue.js. Es befriedigt die Trennung der Besorgnis und ist dennoch in einem einzigen .vue-Datei. Wir haben unser Template (HTML), die Logik in Javascript und das Styling in einer Komponente.

• Vorlage
• Skript
• Stil

Vorlage

In dieses Template-Tag schreiben wir unseren HTML-Code. Auch hier können wir Variablen mit dem Vue . binden.js-Datenbindungssyntax, und wir können auch einige andere Funktionen mit dem Vue hinzufügen.js lieferte Syntax für die jeweiligen Funktionalitäten.

Skript

Dies ist der Abschnitt, in dem wir die Logik der Komponente in Javascript schreiben können, indem wir den Syntaxen von Vue . folgen.js. Alle Funktionalitäten und Logik einer Komponente gehen hier. Beispielsweise,

• Importieren anderer benötigter Komponenten und Pakete.
• Variable Aussage
• Methoden/Funktionen
• Lebenszyklushaken
• Berechnete Eigenschaften und Beobachter
• Und so weiter…

Stil

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

Dies ist nur ein kleiner Einblick in eine Komponente in Vue.js. Schauen wir uns die Nutzung, Organisation und den Datenfluss zwischen den Komponenten ein wenig an.

Komponenten importieren und verwenden

Um die Komponente zu verwenden, müssen wir zuerst die Komponente importieren. Wie kann Vue sonst.js weiß davon? Wir können eine Komponente einfach importieren, indem wir eine „Import“-Anweisung am Anfang des Skript-Tags hinzufügen und diese Komponente im „components“-Objekt mit der folgenden Syntax deklarieren.

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