Использование <template>в разработке переднего плана

Question

Я просматривал некоторые учебные пособия по фреймворку vue.js, когда наткнулся на тег <template>, используемый в HTML-коде во многих местах:

<template v-for="(choice,index) in choices">
    <h1>{{ choice }}</h1>
    <p>{{ index }}</p>
</template>

Я хотел знать, какова цель этого элемента. Это обычно используется в разработке переднего конца?

Answer 1

Элемент <template> в целом

Элемент HTML Content Template (<template>) представляет собой механизм для содержит содержимое на стороне клиента, которое не должно отображаться, когда страница загружен, но впоследствии может быть создан во время выполнения с использованием JavaScript.

Думайте о шаблоне как о фрагменте контента, который хранится для последующее использование в документе. Пока парсер обрабатывает содержимое элемента <template> при загрузке страницы только для того, чтобы убедиться, что это содержание является действительным; содержимое элемента не отображаются, однако.

Элемент <template> в Vue.js

Более подробную информацию об этом вы можете найти в руководстве Vue.js. Например, в контексте v-if.

Условно отображать элемент на основе истинности значения выражения. Элемент и содержащиеся в нем директивы / компоненты уничтожаются и воссоздаются при переключении. Если элемент является элементом <template>, его содержимое будет извлечено как условный блок.

Что именно это означает, можно увидеть в этом примере:

<div v-if="true">Foo</div>
<template v-if="true">Bar</template>

, что приведет к:

<div>Foo</div>
Bar

Элемент <template> не будет частью DOM после обработки Vue.js. То же самое относится и к использованию директивы v-for в <template>.

Answer 2

См. MDN :

Элемент HTML Content Template (<template>) представляет собой механизм для содержит содержимое на стороне клиента, которое не должно отображаться, когда страница загружен, но впоследствии может быть создан во время выполнения с использованием JavaScript.

Думайте о шаблоне как о фрагменте контента, который хранится для последующее использование в документе. Пока парсер обрабатывает содержимое элемента <template> при загрузке страницы только для того, чтобы убедиться, что это содержание является действительным; элементы однако содержимое не отображается.

или спецификация HTML :

Элемент шаблона используется для объявления фрагментов HTML, которые могут быть клонированы и вставлены в документ скриптом.

В рендеринге элемент шаблона ничего не представляет.