Etiqueta de plantilla Vue3<template>

Vue3 选项式 APIAPI de opciones de Vue3

En Vue3,<template>la etiqueta es un concepto muy central.

<template>Se utiliza para definir la estructura de la plantilla del componente, es la base del renderizado de páginas en Vue.

<template>Conceptos básicos de la etiqueta

<template>La etiqueta es una etiqueta en Vue3 que se utiliza para definir la plantilla del componente. En sí misma no se renderiza en el DOM final, sino que actúa como un contenedor para envolver la sintaxis de plantilla de Vue (como interpolación, directivas, etc.). Vue, de acuerdo con el<template>contenido interno, genera la estructura HTML real.

Características

  1. Etiqueta no renderizada：<template>La etiqueta en sí no aparece en la estructura DOM final.
  2. Contenedor de plantilla: se utiliza para envolver la sintaxis de plantilla de Vue, como interpolación, renderizado condicional, renderizado de listas, etc.
  3. Soporta múltiples nodos raíz: en Vue3,<template>la etiqueta puede contener múltiples nodos raíz, mientras que en Vue2 solo puede tener uno.

<template>Escenarios de uso de la etiqueta

1. Definir la plantilla del componente

En un componente de un solo archivo (.vuearchivo),<template>la etiqueta se utiliza para definir la parte de la plantilla del componente. Por ejemplo:

Ejemplo

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

<script>
export default {
  data() {
    return {
      title: "Hello Vue3",
      description: "This is a Vue3 template example."
    };
  }
};
</script>

2. Renderizado condicional

<template>La etiqueta puede combinarse con lav-ifov-elsedirectiva para lograr renderizado condicional. Por ejemplo:

Ejemplo

<template>
  <div>
    <template v-if="isVisible">
      <p>This content is visible.</p>
    </template>
    <template v-else>
      <p>This content is hidden.</p>
    </template>
  </div>
</template>

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

3. Renderizado de listas

<template>La etiqueta puede combinarse con lav-fordirectiva para lograr renderizado de listas. Por ejemplo:

Ejemplo

<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>Notas sobre la etiqueta

  1. No admite atributos dinámicos：<template>La etiqueta en sí no admite atributos dinámicos (como:classo:styleetc.), porque se ignora durante el renderizado.
  2. Evitar el uso anidado: aunque<template>la etiqueta puede anidarse, pero un anidamiento excesivo puede reducir la legibilidad del código.
  3. yv-slotLa combinación con: en Vue3,<template>la etiqueta se usa a menudo para definir el contenido de los slots, por ejemplo:

Ejemplo

<template>
  <MyComponent>
    <template v-slot:header>
      <h1>Header Content</h1>
    </template>
    <template v-slot:default>
      <p>Default Content</p>
    </template>
  </MyComponent>
</template>

Vue3 选项式 APIAPI de opciones de Vue3

Otras extensiones