Erstellen Ihrer ersten Vue.js-Komponente

Vue.js ist ein komponentenbasiertes Framework, d. h. Anwendungen werden mithilfe wiederverwendbarer Komponenten erstellt. Jede Komponente kapselt ihr eigenes HTML, CSS und JavaScript. Dieser Artikel führt Sie durch den Prozess der Erstellung Ihrer ersten Vue.js-Komponente von Grund auf.

Erstellen einer neuen Vue-Komponente

Vue.js-Komponenten werden normalerweise in .vue-Dateien gespeichert. Jede Komponentendatei besteht aus drei Hauptabschnitten: '<template>', '<script>' und '<style>'. Lassen Sie uns eine einfache Komponente namens Greeting.vue erstellen.

1. Navigieren Sie zu Ihrem Projektordner: . Verwenden Sie das Terminal, um in Ihr Vue-Projektverzeichnis zu wechseln:

cd my-vue-project

2. Erstellen Sie eine neue Komponentendatei: Erstellen Sie im Verzeichnis src/components eine neue Datei mit dem Namen Greeting.vue.

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
    <p>Welcome to your first Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Diese Greeting.vue-Komponente enthält:

• <template>: Definiert die HTML-Struktur der Komponente.
• <script>: Enthält die JavaScript-Logik für die Komponente, beispielsweise Dateneigenschaften und Methoden.
• <style>: Enthält die auf diese Komponente beschränkten CSS-Stile. Das Attribut scoped stellt sicher, dass die Stile nur auf diese Komponente angewendet werden.

Verwenden Ihrer Komponente

Nachdem Sie die Komponente erstellt haben, müssen Sie sie in Ihrer Vue-Anwendung verwenden. Öffnen Sie die Datei src/App.vue und ändern Sie sie, um die Komponente Greeting einzuschließen:

<template>
  <div id="app">
    <Greeting />
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  name: 'App',
  components: {
    Greeting
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

In dieser aktualisierten App.vue-Datei:

• Importieren Sie die Komponente: . Verwenden Sie import Greeting from './components/Greeting.vue';, um die Komponente Greeting zu importieren.
• Registrieren Sie die Komponente: . Fügen Sie Greeting zum Objekt components im Block export default hinzu.
• Verwenden Sie die Komponente: . Fügen Sie das Tag '<Greeting />' in den Abschnitt '<template>' ein, um die Komponente in Ihrer App zu verwenden.

Testen Ihrer Komponente

Speichern Sie Ihre Änderungen und stellen Sie sicher, dass Ihr Entwicklungsserver läuft. Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost:8080. Sie sollten den Inhalt der Komponente Greeting auf der Seite sehen.

Abschluss

Sie haben Ihre erste Vue.js-Komponente erfolgreich erstellt und verwendet. Komponenten sind die Bausteine ​​von Vue.js-Anwendungen, mit denen Sie verschiedene Teile Ihrer Benutzeroberfläche kapseln und verwalten können. Wenn Sie sich mit Vue.js vertrauter machen, können Sie erweiterte Funktionen wie Komponenteneigenschaften, Ereignisse und Lebenszyklus-Hooks erkunden, um interaktivere und komplexere Anwendungen zu erstellen.

Experimentieren Sie weiter mit Vue.js-Komponenten und erweitern Sie Ihr Wissen, um dynamische und ansprechende Webanwendungen zu erstellen.