<template>在前端开发中的应用

Question

当我在许多地方看到在html代码中使用的vue.js标记时，我正在阅读一些关于<template>前端框架的教程：

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

我想知道这个元素的确切目的是什么。它是否通常用于前端开发？

Answer 1

一般的元素

(<template>)元素是一种保存客户端内容的机制，该机制在加载页面时不会呈现，但可能随后在运行时使用JavaScript进行实例化。 将模板视为存储在文档中供后续使用的内容片段。虽然解析器在加载页面时确实处理<template>元素的内容，但它这样做只是为了确保这些内容是有效的；但是，元素的内容没有呈现出来。

##The <template>元素在Vue.js中的应用

您可以在Vue.js指南中找到有关它的更多信息。例如，在v-if上下文中。

根据表达式值的真实性有条件地呈现元素。元素及其包含的指令/组件在切换过程中被销毁和重新构造。如果该元素是<template> 元素，则其内容将被提取为条件块.。

在这个例子中可以看到这到底意味着什么：

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

这将导致：

<div>Foo</div>
Bar

在if被Vue.js处理之后，Vue.js元素将不再是DOM的一部分。在<template>上使用<template>指令时也是如此。

Answer 2

见MDN

(<template>)元素是一种保存客户端内容的机制，该机制在加载页面时不会呈现，但可能随后在运行时使用JavaScript进行实例化。 将模板视为存储在文档中供后续使用的内容片段。虽然解析器在加载页面时确实处理<template>元素的内容，但它这样做只是为了确保这些内容是有效的；但是，元素的内容没有呈现出来。

或HTML规范

模板元素用于声明可以通过脚本克隆和插入到文档中的HTML片段。 在呈现中，模板元素不代表任何内容。