Balise de template Vue<template>

Vue3 选项式 APIVue3 API des options

Dans Vue3,<template>la balise <template> est un concept très essentiel.

<template>Elle sert à définir la structure de template d'un composant, et constitue la base pour que Vue affiche les pages.

<template>Concept de base de la balise

<template>La balise <template> est une balise dans Vue3 utilisée pour définir un template de composant. Elle n'est pas rendue dans le DOM final elle-même, mais sert de conteneur pour englober la syntaxe de template de Vue (comme l'interpolation, les directives, etc.). Vue, en fonction de la<template>le contenu qu'il contient, générer la structure HTML réelle.

Fonctionnalités

  1. Balise non rendue：<template>La balise elle-même n'apparaîtra pas dans la structure DOM finale.
  2. Conteneur de template: Il est utilisé pour encapsuler la syntaxe de template de Vue, telle que l'interpolation, le rendu conditionnel, le rendu de liste, etc.
  3. Prend en charge plusieurs nœuds racines: Dans Vue3,<template>la balise <template> peut contenir plusieurs nœuds racines, alors qu'en Vue2 elle ne peut en avoir qu'un seul.

<template>Scénarios d'utilisation de la balise

1. Définition d'un template de composant

Dans un composant monofichier (.vuefichier),<template>la balise <template> est utilisée pour définir la partie template d'un composant. Par exemple :

Exemple

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

<script>
export default {
  data() {
    return {
      title: "Bonjour Vue3",
      description: "Ceci est un exemple de template Vue3."
    };
  }
};
</script>

2. Rendu conditionnel

<template>La balise peut être utilisée avecv-ifouv-elsedes directives pour implémenter le rendu conditionnel. Par exemple :

Exemple

<template>
  <div>
    <template v-if="isVisible">
      <p>Ce contenu est visible.</p>
    </template>
    <template v-else>
      <p>Ce contenu est masqué.</p>
    </template>
  </div>
</template>

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

3. Rendu de liste

<template>La balise peut être utilisée avecv-fordes directives pour implémenter le rendu de liste. Par exemple :

Exemple

<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>Notes sur la balise

  1. Ne prend pas en charge les attributs dynamiques：<template>La balise elle-même ne prend pas en charge les attributs dynamiques (tels que:classou:styleetc.), car elle sera ignorée lors du rendu.
  2. Éviter l'utilisation imbriquée: Bien que<template>la balise peut être imbriquée, une imbrication excessive peut réduire la lisibilité du code.
  3. etv-slotUtilisation avec: Dans Vue3,<template>la balise est couramment utilisée pour définir le contenu d'un slot, par exemple :

Exemple

<template>
  <MyComponent>
    <template v-slot:header>
      <h1>Contenu d'en-tête</h1>
    </template>
    <template v-slot:default>
      <p>Contenu par défaut</p>
    </template>
  </MyComponent>
</template>

Vue3 选项式 APIVue3 API des options

Autres extensions