Vue3 Template-Tag<template>

Vue3 选项式 APIVue3 Options API

In Vue3,<template>Das <template>-Tag ist ein sehr zentrales Konzept.

<template>Es wird verwendet, um die Template-Struktur einer Komponente zu definieren, und ist die Grundlage dafür, dass Vue Seiten rendert.

<template>Grundlegendes Konzept des Tags

<template>Das <template>-Tag ist ein Tag in Vue3, das verwendet wird, um ein Komponenten-Template zu definieren. Es wird nicht selbst in das endgültige DOM gerendert, sondern dient als Container, um Vues Template-Syntax (wie Interpolation, Direktiven usw.) einzuschließen. Vue wird, basierend auf der<template>Inhalt darin, die tatsächliche HTML-Struktur generieren.

Funktionen

  1. Nicht gerendertes Tag：<template>Das Tag selbst wird nicht in der endgültigen DOM-Struktur erscheinen.
  2. Template-Container: Er wird verwendet, um die Template-Syntax von Vue zu umschließen, wie Interpolation, bedingtes Rendering, Listen-Rendering usw.
  3. Unterstützt mehrere Wurzelknoten: In Vue3,<template>das <template>-Tag kann mehrere Wurzelknoten enthalten, während es in Vue2 nur einen haben kann.

<template>Verwendungsszenarien des Tags

1. Definieren eines Komponenten-Templates

In einer Single-File-Komponente (.vueDatei),<template>das <template>-Tag wird verwendet, um den Template-Teil einer Komponente zu definieren. Zum Beispiel:

Beispiel

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

<script>
export default {
  data() {
    return {
      title: "Hello Vue3",
      description: "Dies ist ein Vue3-Template-Beispiel."
    };
  }
};
</script>

2. Bedingtes Rendering

<template>Das Tag kann mitv-ifoderv-elseDirektiven verwendet werden, um bedingtes Rendering zu implementieren. Zum Beispiel:

Beispiel

<template>
  <div>
    <template v-if="isVisible">
      <p>Dieser Inhalt ist sichtbar.</p>
    </template>
    <template v-else>
      <p>Dieser Inhalt ist ausgeblendet.</p>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

3. Listen-Rendering

<template>Das Tag kann mitv-forDirektiven, um Listen-Rendering zu implementieren. Zum Beispiel:

Beispiel

<template>
  <ul>
    <template v-for="item in items" :key="item.id">
      <li>{{ item.name }}</li>
    </template>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "Apple" },
        { id: 2, name: "Banana" },
        { id: 3, name: "Orange" }
      ]
    };
  }
};
</script>

<template>Hinweise zum Tag

  1. Unterstützt keine dynamischen Attribute：<template>Das Tag selbst unterstützt keine dynamischen Attribute (wie z. B.:classoder:styleusw.), weil es beim Rendern ignoriert wird.
  2. Verschachtelte Verwendung vermeiden: Obwohl<template>das Tag verschachtelt werden kann, kann übermäßige Verschachtelung die Lesbarkeit des Codes verringern.
  3. undv-slotVerwendung mit: In Vue3,<template>Das Tag wird üblicherweise verwendet, um Slot-Inhalt zu definieren, zum Beispiel:

Beispiel

<template>
  <MyComponent>
    <template v-slot:header>
      <h1>Header-Inhalt</h1>
    </template>
    <template v-slot:default>
      <p>Standardinhalt</p>
    </template>
  </MyComponent>
</template>

Vue3 选项式 APIVue3 Options API

Weitere Erweiterungen