在前端开发中使用<template>

Question

当我在许多地方使用html代码时遇到<template>标记时，我正在浏览vue.js前端框架的一些教程：

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

我想知道这个元素的目的究竟是什么。它是前端开发中常用的东西吗？

Answer 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

如果已经由Vue.js处理了<template>元素，则它不会成为DOM的一部分。在v-for上使用<template>指令时也是如此。

Answer 2

here：

  

HTML内容模板（<template>）元素是一种机制   保存页面不会呈现的客户端内容   加载但随后可以在运行时使用时实例化   的JavaScript。

     

将模板视为正在存储的内容片段   随后在文件中使用。虽然解析器确实处理了   加载页面时<template>元素的内容，确实如此   所以只是为了确保这些内容有效;元素   但是，内容不会被渲染。

或See MDN：

  

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

     

在渲染中，模板元素不代表任何内容。