VueJs für Anfänger VueJs-Teil Erstellen, Importieren und Verwenden von Komponenten

Erstellen Sie Ihre erste Komponente

---

Was ist eine Komponente?
Komponenten sind die Bausteine ​​einer Vue-Anwendung. Jede Komponente verfügt über ihre eigene Funktionalität und Ansicht. Komponenten können in der gesamten Anwendung wiederverwendet werden. Ein Beispiel für eine Komponente ist eine Navigationsleiste, auf die auf verschiedenen Seiten zugegriffen werden kann.

Erstellen einer Basiskomponente

• Erstellen Sie eine neue Komponentendatei mit dem Namen HelloWorld.vue (Sie können den Dateinamen ändern, wenn Sie möchten) im Komponentenordner (erstellen Sie einen neuen Komponentenordner, falls dieser noch nicht vorhanden ist).

• HelloWorld-Komponente:
  

<template>
  <div>
    <h1>Hello, World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

• HelloWord-Komponente in App.vue importieren und verwenden

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

<script>
import HelloWorld from './components/HelloWorld.vue'; //adjust according to the path to your component

export default {
  components: {
    HelloWorld
  }
}
</script>

Jetzt sollten Sie die in der App.vue-Komponente gerenderte HelloWorld-Komponente sehen können.

Das obige ist der detaillierte Inhalt vonVueJs für Anfänger VueJs-Teil Erstellen, Importieren und Verwenden von Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!