Wo muss die Vue-Vorlage im Projekt platziert werden?

Vues Vorlagen variieren je nach den tatsächlichen Bedürfnissen der Entwickler und den verwendeten Tools. Im Allgemeinen können sie an folgenden Stellen platziert werden:

1. Vorlage innerhalb der Vue-Komponente

Vue-Komponenten können ihre eigenen Vorlagen in der Vorlage definieren Ist Vue eine Kernfunktion? Verwenden Sie im Skript-Tag der Komponente template, um die Vorlage zu definieren und die Vorlage zur Verwendung an die Komponente zu binden. Zum Beispiel:

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

<script>
  export default {
    name: 'MyComponent',
    data() {
      return {
        title: 'Vue Template',
        content: 'This is a Vue template example'
      }
    }
  }
</script>

2. Einzeldateikomponente

Da Vue-Komponenten immer komplexer werden, ist es bequemer, Mehrdateikomponenten zu verwenden, was die Verwendung von Einzeldateikomponenten erfordert. Das Hauptmerkmal von Einzeldateikomponenten besteht darin, dass Vorlagen, Stile und Logik alle in einer .vue-Datei gekapselt sind. Zum Beispiel:

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

<script>
  export default {
    name: 'MyComponent',
    data() {
      return {
        title: 'Vue Template',
        content: 'This is a Vue template example'
      }
    }
  }
</script>

3. Eingebettete Vorlagen

Manchmal möchten Sie vielleicht einige generische Vue-Vorlagen verwenden, anstatt eine völlig neue zu schreiben. In diesem Fall können Sie sich dafür entscheiden, eingebettete Vorlagen zu verwenden, um dies zu erreichen. Eingebettete Vorlagen können wie folgt geschrieben werden:

<template id="my-template">
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
  export default {
    name: 'MyComponent',
    data() {
      return {
        title: 'Vue Template',
        content: 'This is a Vue template example'
      }
    },
    template: document.getElementById('my-template')
  }
</script>

4. Öffentliche Vorlagen für Vue CLI

Vue CLI kann Ihnen vordefinierte öffentliche Vorlagen zur Verfügung stellen, damit Sie Ihr Vue-Projekt schnell starten können. Zu den öffentlichen Vorlagen gehören: Webpack, Webpack-Simple, Browserify, Browserify-Simple, Simple usw. Diese Vorlagen können über die offizielle Dokumentation heruntergeladen und verwendet werden.

Zusammenfassung

Das Obige ist der Hauptspeicherort und die Hauptform der Vue-Vorlagen. Vorlagen können einfach definiert werden, sei es innerhalb einer Vue-Komponente oder in einer Einzeldateikomponente. Natürlich können Sie auch öffentliche Vorlagen auswählen, um Ihre eigene Vue-Anwendung zu entwickeln und das Projekt schnell für die Entwicklung zu starten.

Das obige ist der detaillierte Inhalt vonWo muss die Vue-Vorlage im Projekt platziert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!