VueJS 2 中 <template> 中的 <template> 有什么用？

Question

我试图了解<template> 的用例及其功能。引用了the docs，我仍然很困惑。

考虑 any.vue 文件中的以下代码：

<template>
   <div class="top-right links">

      <!-- Why use <template> here instead of a div, for example? -->
      <template v-if="authenticated">
         <router-link :to="{ name: 'home' }">
            {{ $t('home') }}
         </router-link>
      </template>

      <template v-else>
         <router-link :to="{ name: 'login' }">
            {{ $t('login') }}
         </router-link>
      </template>

   </div>
</template>

我们为什么要使用<template> 而不是简单的<div>，使用<template> 与使用<custom-component> 有何不同？

Answer 1

在.vue 的主要<template> 文件中使用<template> 意味着我们要使用不可见的包装器。现在的问题是我们什么时候需要使用隐形包装？答案很简单：每当我们想对 group 元素（而不是 单个 元素）使用 v-if、v-else 或 v-for 指令时。 p>

因此，在这种情况下，我们使用以下方法包装所有提到的元素组：

<template v-if = " "></template>

而这样做，我们只是简单的渲染了上面<template>标签之间的内容，不需要创建一个多余的<div>，然后渲染之后，<template>标签本身就不会存在于DOM中了，所以它作为一个隐形包装做得很好。

Answer 2

如果您使用简单的<div>，即使您的<div> 使用CSS 隐藏，也会加载外部CSS、图像和其他资源。

点击下面的链接了解为什么在 HTML5 中引入了<template>。

template introduction

Answer 3

据我了解，使用 <template> 不会渲染出 DOM 中的额外元素。当您有条件地添加多个不需要父 <div> 的元素时，它特别有用。如果<div> 除了条件多个标签之外没有其他用途，则无需额外的<div> 即可完成。

我通常会默认使用<template>，直到我需要<div> 或其他元素作为父容器，主要用于应用样式。

Answer 4

你是对的，在你的情况下你应该简单地使用这个：

<template>
   <div class="top-right links">
     <router-link v-if="authenticated" :to="{ name: 'home' }">
        {{ $t('home') }}
     </router-link>
     <router-link v-else :to="{ name: 'login' }">
        {{ $t('login') }}
     </router-link>
   </div>
</template>

但是假设您需要条件多个标签不使用父标签：

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
</template>

阅读更多：

• Conditional Groups with v-if on <template>
• v-for on a <template>

Answer 5

模板标签中的内容将呈现到.vue 文件中的视图中。