＜template＞标签的用法
一、原生的template标签的用法
<template> 是 HTML5 引入的一个标签，用于声明 HTML 片段，这些片段在页面加载时不会被渲染，但可以在运行时通过 JavaScript 实例化和使用。
基本用法
<template id="myTemplate">
<div class="card">
<h2>标题</h2>
<p>这是一个模板内容</p>
</div>
</template>主要特点
- 延迟渲染：模板内容在页面加载时不会显示
- 惰性加载：模板中的脚本不会执行，图片不会加载，音频不会播放
- 可克隆：可以多次实例化模板内容
使用方法
1. 通过 JavaScript 克隆模板
// 获取模板元素
const template = document.getElementById('myTemplate');// 克隆模板内容
const clone = template.content.cloneNode(true);// 将克隆的内容添加到DOM中
document.body.appendChild(clone);2. 动态修改模板内容
const template = document.getElementById('myTemplate');
const clone = template.content.cloneNode(true);// 修改克隆后的内容
clone.querySelector('h2').textContent = '动态标题';
clone.querySelector('p').textContent = '动态内容';document.body.appendChild(clone);3. 在 Web Components 中使用
class MyComponent extends HTMLElement {
constructor() {
super();
const template = document.getElementById('myTemplate');
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(template.content.cloneNode(true));
}
}customElements.define('my-component', MyComponent);实际应用示例
<template id="userCard">
<div class="user-card">
<img class="avatar" data-src="" alt="用户头像">
<h3 class="username"></h3>
<p class="bio"></p>
</div>
</template><script>
function createUserCard(userData) {
const template = document.getElementById('userCard');
const clone = template.content.cloneNode(true);clone.querySelector('.avatar').src = userData.avatarUrl;
clone.querySelector('.username').textContent = userData.name;
clone.querySelector('.bio').textContent = userData.bio;return clone;
}// 使用示例
const user = {
avatarUrl: 'path/to/avatar.jpg',
name: '张三',
bio: '前端开发者'
};document.body.appendChild(createUserCard(user));
注意事项
- 模板内容必须有一个唯一的 ID 以便引用
- 模板可以包含任何有效的 HTML，包括样式和脚本
- 模板中的
<script>和<style>在克隆后才会执行/应用 - 模板可以放在
<head>、<body>或任何其他允许放置普通元素的容器中
<template> 标签非常适合用于需要重复使用的UI组件或动态生成内容的情况，可以提高代码的可维护性和性能。
二、在Vue中，template标签的用法
在 Vue.js 中，<template> 标签有特殊的用途和意义，它与原生 HTML 的 <template> 标签有所不同。以下是 Vue 中 <template> 标签的主要用法：
1. 作为根模板容器
在 Vue 单文件组件 (SFC) 中，<template> 是必需的根元素，用于包裹组件的 HTML 结构：
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template><script>
export default {
data() {
return {
title: 'Vue 模板示例',
content: '这是在 Vue 中使用 template 标签的示例'
}
}
}
</script>
2. 作为条件渲染或循环渲染的包装器
Vue 的 v-if、v-else-if、v-else 和 v-for 指令可以直接用在 <template> 标签上，作为逻辑块的包装器而不引入额外的 DOM 元素：
<template>
<div>
<template v-if="showHeader">
<h1>标题</h1>
<p>副标题</p>
</template><ul>
<template v-for="item in items" :key="item.id">
<li>{{ item.name }}</li>
<li class="divider"></li>
</template>
</ul>
</div>
</template>3. 作为插槽内容的容器
在组件中使用插槽时，<template> 可以配合 v-slot 指令使用：
<!-- 子组件 -->
<template>
<div>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
</template><!-- 父组件使用 -->
<child-component>
<template v-slot:header>
<h1>这是头部</h1>
</template><p>这是默认插槽内容</p><template v-slot:footer>
<p>这是页脚</p>
</template>
</child-component>4. 与 Vue 的 <template> 标签和原生 <template> 的区别
- Vue 的
<template>是虚拟 DOM 的一部分，会被 Vue 的模板编译器处理 - 原生 HTML
<template>是浏览器原生支持的，内容不会被渲染直到通过 JavaScript 克隆 - 在 Vue 单文件组件中，
<template>默认是 Vue 的模板语法，除非特别指定为原生模板
5. 在 Vue 3 中使用 <template> 配合片段支持
Vue 3 支持多根节点的组件（片段），这使得 <template> 可以直接包含多个同级元素：
<template>
<header></header>
<main></main>
<footer></footer>
</template>注意事项
- 在 Vue 单文件组件中，
<template>必须有一个根元素（Vue 2）或可以有多根元素（Vue 3） - Vue 的模板语法会编译
<template>中的内容，所以不能直接使用原生<template>的功能 - 如果需要使用原生
<template>的功能，需要显式声明：<template> <div> <template native> <!-- 这里的内容会作为原生模板处理 --> </template> </div> </template>
在大多数 Vue 开发场景中，你主要使用的是 Vue 的模板语法而不是原生 HTML<template>的功能。