Woraus besteht jede einzelne Dateikomponente in Vue?

Die Vue-Einzeldateikomponente besteht aus drei Teilen: Vorlage: Definiert die visuelle Darstellung mithilfe der HTML-Syntax. Skript: Definieren Sie logisches Verhalten mithilfe der JavaScript-Syntax. Stil: Definieren Sie Stile mithilfe der CSS-Syntax.

Die Zusammensetzung der Vue-Einzeldateikomponente

Vue-Einzeldateikomponente besteht aus drei Teilen:

1. Vorlage (Vorlage)

Der Vorlagenteil definiert die visuelle Darstellung der Komponente. Es ist mit HTML-Syntax geschrieben und kann Daten mithilfe von Vue-Anweisungen und Interpolation dynamisch rendern.

2. Skript

Der Skriptteil definiert das logische Verhalten der Komponente. Es ist in JavaScript geschrieben und enthält die Daten, Methoden und Lebenszyklus-Hooks der Komponente.

3. Stil

Der Stilteil definiert den Stil der Komponente. Es kann mit CSS-Syntax geschrieben werden und Klassenselektoren, ID-Selektoren und Medienabfragen enthalten.

Beispiel:

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello Vue',
      message: 'Welcome to the Vue world!'
    }
  }
}
</script>

<style>
h1 {
  color: blue;
}
p {
  color: red;
}
</style>

In diesem Beispiel:

• Der Abschnitt „Vorlage“ definiert einen Div-Container mit einem Titel und einer Nachricht. Der Abschnitt
• script definiert den Titel und die Nachrichtendaten der Komponente. Der Abschnitt
• styles definiert die Stilattribute von h1- und p-Elementen.

Das obige ist der detaillierte Inhalt vonWoraus besteht jede einzelne Dateikomponente in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!