<template> 在前端开发中的使用答案

【问题标题】：Usage of <template> in front end development<template> 在前端开发中的使用
【发布时间】：2018-10-17 09:32:37
【问题描述】：

我正在阅读一些关于 vue.js 前端框架的教程时，我发现<template>tag 在很多地方被用于 html 代码中：

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

我想知道这个元素的确切用途是什么。是前端开发中常用的东西吗？

【问题讨论】：

使用 Vue？是的。
可以在这里找到一个很好的解释：bennadel.com/blog/…
"在与其他 html 元素一起检查时，我发现它与 div 元素的工作方式相同" — 不，它没有！ jsbin.com/hebuzenite/1/edit?html,output
<template> 允许您在模板中放置结构，例如您的 v-for 循环，您不需要在渲染产品中表示为 DOM 节点。在您的示例中，您可以使用 div 或 span 代替模板标签，但这会留下不必要的 div 或 span 包装每个标题/段落对。
（我错过了我的编辑窗口，我应该澄清一下，我指的是 Vue 的 template 元素，而不是 HTML5 元素，我认为这是一个稍微不同的东西。）

标签： javascript vue.js frontend

【解决方案1】：

一般`<template>` element

HTML 内容模板 (<template>) 元素是一种机制保存在页面被渲染时不被渲染的客户端内容已加载，但随后可能会在运行时使用 JavaScript。

将模板视为存储的内容片段后续在文档中使用。虽然解析器确实处理 <template> 元素的内容在加载页面时，它会这样做仅确保这些内容有效；元素的内容但是没有渲染。

Vue.js 中的 `<template>` 元素

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

根据表达式值的真实性有条件地渲染元素。元素及其包含的指令/组件在切换期间被破坏和重建。 如果元素是<template>元素，其内容将被提取为条件块。

具体的含义可以在这个例子中看出：

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

这将导致：

<div>Foo</div>
Bar

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

【讨论】：

示例中的解释很好。我不知道模板会以这种方式呈现。第一种方式（使用 div）不是几乎总是有利的吗？ ....否则我会在元素检查器中看到一些奇怪的东西
@VSharma 这取决于用例。有时你需要一个，有时另一个。

【解决方案2】：

See MDN:

HTML 内容模板 (<template>) 元素是一种机制保存在页面被渲染时不被渲染的客户端内容已加载，但随后可能会在运行时使用 JavaScript。

将模板视为存储的内容片段后续在文档中使用。虽然解析器确实处理 <template> 元素的内容在加载页面时，它确实所以只是为了确保那些内容是有效的；要素但是，不会呈现内容。

或the HTML specification:

模板元素用于声明可以通过脚本克隆并插入到文档中的 HTML 片段。

在渲染中，模板元素代表什么。

【讨论】：

一般&lt;template&gt; element

Vue.js 中的 &lt;template&gt; 元素

一般`<template>` element

Vue.js 中的 `<template>` 元素