VueJS 2 中 <template> 中的 <template> 有什么用?
What's the use of <template> within a <template> in VueJS 2?
我正在尝试了解 <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>
有何不同?
模板标签中的内容将呈现到 .vue
文件的视图中。
如果您使用简单的 <div>
、外部 CSS,图像和其他资源将被加载,即使您的 <div>
使用 CSS 隐藏。[=14] =]
按照下面的 link 来解释 HTML5 中引入 <template>
的原因。
你是对的,在你的情况下你应该简单地使用这个:
<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>
阅读更多:
据我了解,使用 <template>
不会渲染出 DOM 中的额外元素。当您有条件地添加多个不需要父元素的元素时,它特别有用 <div>
。如果 <div>
除了有条件的多个标签外没有其他用途,则可以在没有额外的 <div>
.
的情况下完成
我通常会默认使用 <template>
,直到我需要 <div>
或其他元素作为父容器,主要是为了应用样式。
在 .vue
文件的主要 <template>
中使用 <template>
意味着我们要使用 不可见包装器 。现在的问题是我们什么时候需要使用隐形包装器?答案很简单:每当我们想对 group 元素(而不是 单个元素)。
因此,在这种情况下,我们使用以下方法包装所有提到的元素组:
<template v-if = " "></template>
通过这样做,我们只是渲染了上面<template>
标签之间的内容,不需要创建多余的<div>
,然后在渲染之后,<template>
标签本身不会存在于 DOM 中,因此它作为 隐形包装器 .
可以很好地发挥作用
我正在尝试了解 <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>
有何不同?
模板标签中的内容将呈现到 .vue
文件的视图中。
如果您使用简单的 <div>
、外部 CSS,图像和其他资源将被加载,即使您的 <div>
使用 CSS 隐藏。[=14] =]
按照下面的 link 来解释 HTML5 中引入 <template>
的原因。
你是对的,在你的情况下你应该简单地使用这个:
<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>
阅读更多:
据我了解,使用 <template>
不会渲染出 DOM 中的额外元素。当您有条件地添加多个不需要父元素的元素时,它特别有用 <div>
。如果 <div>
除了有条件的多个标签外没有其他用途,则可以在没有额外的 <div>
.
我通常会默认使用 <template>
,直到我需要 <div>
或其他元素作为父容器,主要是为了应用样式。
在 .vue
文件的主要 <template>
中使用 <template>
意味着我们要使用 不可见包装器 。现在的问题是我们什么时候需要使用隐形包装器?答案很简单:每当我们想对 group 元素(而不是 单个元素)。
因此,在这种情况下,我们使用以下方法包装所有提到的元素组:
<template v-if = " "></template>
通过这样做,我们只是渲染了上面<template>
标签之间的内容,不需要创建多余的<div>
,然后在渲染之后,<template>
标签本身不会存在于 DOM 中,因此它作为 隐形包装器 .