Vue3: тег шаблона<template>

Vue3 选项式 APIVue3 Options API

В Vue3,<template>тег <template> — это очень важная концепция.

<template>Он используется для определения структуры шаблона компонента и служит основой для того, чтобы Vue рендерил страницы.

<template>Основная концепция тега

<template>Тег <template> — это тег в Vue3, используемый для определения шаблона компонента. Сам он не рендерится в итоговый DOM, а служит контейнером для обёртывания синтаксиса шаблонов Vue (например, интерполяции, директив и т. д.). Vue, основываясь на<template>содержимое внутри него генерирует фактическую HTML-структуру.

Особенности

  1. Неотображаемый тег：<template>Сам тег не появится в итоговой структуре DOM.
  2. Контейнер шаблона: Он используется для обёртывания синтаксиса шаблонов Vue, такого как интерполяция, условный рендеринг, рендеринг списков и т. д.
  3. Поддерживает несколько корневых узлов: В Vue3,<template>тег <template> может содержать несколько корневых узлов, тогда как в Vue2 он может содержать только один.

<template>Сценарии использования тега

1. Определение шаблона компонента

В однофайловом компоненте (.vueфайл),<template>тег <template> используется для определения части шаблона компонента. Например:

Пример

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

<script>
export default {
  data() {
    return {
      title: "Привет Vue3",
      description: "Это пример шаблона Vue3."
    };
  }
};
</script>

2. Условный рендеринг

<template>Тег можно использовать сv-ifилиv-elseдирективами для реализации условного рендеринга. Например:

Пример

<template>
  <div>
    <template v-if="isVisible">
      <p>Этот контент виден.</p>
    </template>
    <template v-else>
      <p>Этот контент скрыт.</p>
    </template>
  </div>
</template>

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

3. Рендеринг списков

<template>Тег можно использовать сv-forдирективы для реализации рендеринга списков. Например:

Пример

<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>Примечания к тегу

  1. Не поддерживает динамические атрибуты：<template>Сам тег не поддерживает динамические атрибуты (такие как:classили:styleи т. д.), поскольку при рендеринге они будут проигнорированы.
  2. Избегайте вложенного использования: хотя<template>тег можно вкладывать, чрезмерная вложенность может снизить читаемость кода.
  3. иv-slotИспользование с: В Vue3,<template>тег обычно используется для определения содержимого слота, например:

Пример

<template>
  <MyComponent>
    <template v-slot:header>
      <h1>Содержимое заголовка</h1>
    </template>
    <template v-slot:default>
      <p>Содержимое по умолчанию</p>
    </template>
  </MyComponent>
</template>

Vue3 选项式 APIVue3 Options API

Другие расширения