当前位置： 首页 > news >正文

＜template＞标签的作用，在构建可复用 UI 片段时如何应用？

news 来源：原创 2025/6/8 7:01:22

大白话标签的作用，在构建可复用 UI 片段时如何应用

<template>标签的作用

在前端开发里，<template>标签可是个超棒的工具。它就像是一个“代码仓库”，可以把一些 HTML 代码片段存起来，而且这些代码片段在页面刚加载的时候是不会显示出来的。只有当你想用这些代码的时候，才把它们从“仓库”里拿出来，放到页面合适的位置去显示。这样做有啥好处呢？它能让你把一些常用的 UI 片段封装起来，需要的时候直接用，避免了代码的重复编写，提高了开发效率。

在构建可复用 UI 片段时的应用

下面我用一个简单的例子来详细讲讲怎么用<template>标签构建可复用的 UI 片段。假设我们要做一个商品列表，每个商品都有图片、标题和价格，而且这个商品的样式可能在很多地方都会用到，这时候就可以用<template>标签把商品的 HTML 结构封装起来。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template Example</title>
</head>

<body>
    <!-- 创建一个 template 标签，用来存放商品的 HTML 结构 -->
    <template id="product-template">
        <!-- 商品的容器 -->
        <div class="product">
            <!-- 商品图片，这里用占位图代替 -->
            <img src="https://dummyimage.com/200x200/000/fff" alt="Product Image">
            <!-- 商品标题 -->
            <h2 class="product-title">Product Title</h2>
            <!-- 商品价格 -->
            <p class="product-price">$99.99</p>
        </div>
    </template>

    <!-- 这里是用来显示商品列表的容器 -->
    <div id="product-list"></div>

    <script>
        // 获取 template 元素
        const productTemplate = document.getElementById('product-template');
        // 获取用来显示商品列表的容器
        const productList = document.getElementById('product-list');

        // 模拟一些商品数据
        const products = [
            { title: 'Product 1', price: '$19.99' },
            { title: 'Product 2', price: '$29.99' },
            { title: 'Product 3', price: '$39.99' }
        ];

        // 遍历商品数据
        products.forEach(product => {
            // 克隆 template 里的内容，true 表示深克隆，会把里面所有子元素都克隆
            const clone = document.importNode(productTemplate.content, true);

            // 找到克隆内容里的商品标题元素，并更新标题文本
            const titleElement = clone.querySelector('.product-title');
            titleElement.textContent = product.title;

            // 找到克隆内容里的商品价格元素，并更新价格文本
            const priceElement = clone.querySelector('.product-price');
            priceElement.textContent = product.price;

            // 把克隆好并更新内容的商品添加到商品列表容器里
            productList.appendChild(clone);
        });
    </script>
</body>

</html>

通过这种方式，你就可以用<template>标签构建可复用的 UI 片段啦，需要的时候就克隆一份，然后根据数据更新内容，再添加到页面上。

<template>标签和components（组件）在前端开发里用途有相似之处，不过它们在概念、功能和使用场景等方面存在明显区别，下面为你详细介绍：

<template>标签和components组件的区别是什么？

概念层面

  • <template>标签：它是 HTML 标准里的元素，就像一个“代码仓库”，能够把 HTML 代码片段存储起来，在页面初始加载时这些代码不会显示，只有在需要的时候才会被使用。
  • components组件：这是一种抽象的编程概念，在前端框架（像 Vue、React 等）中经常用到。它把 HTML、CSS、JavaScript 等代码封装在一起，形成一个独立的、可复用的单元。

功能特性

  • <template>标签
    • 内容不可见：页面加载时，<template>标签里的内容不会渲染显示，只有在通过 JavaScript 动态插入到文档中才会显示。
    • 静态结构：<template>主要用于存储静态的 HTML 结构，虽然可以通过 JavaScript 动态修改内容，但本身不具备复杂的交互逻辑和状态管理功能。
    • 轻量级：仅包含 HTML 结构，不涉及额外的框架逻辑，使用简单，对性能影响较小。
  • components组件
    • 状态管理：组件可以有自己的状态，并且能根据状态的改变更新视图。例如在 Vue 组件里可以使用data选项来定义状态，在 React 组件中可以用useState Hook 或者类组件的state属性来管理状态。
    • 生命周期管理：组件有自己的生命周期函数，在不同的阶段执行特定的操作。例如在 Vue 组件中有created、mounted等生命周期钩子，在 React 组件中有componentDidMount、componentWillUnmount等生命周期方法。
    • 事件处理：组件能够定义自己的事件处理逻辑，方便实现交互功能。例如在 Vue 组件里可以使用@click等指令绑定事件，在 React 组件中可以使用onClick属性绑定事件处理函数。

使用场景

  • <template>标签
    • 简单复用：当只需要复用简单的 HTML 结构，不需要复杂的交互和状态管理时，<template>标签是很好的选择。例如复用一个简单的商品卡片、评论框等。
    • 动态插入：需要根据用户的操作动态插入 HTML 片段时，可以使用<template>标签。例如点击按钮后动态添加一个列表项。
  • components组件
    • 复杂交互：在需要实现复杂交互逻辑和状态管理的场景下，组件是首选。例如一个电商网站的购物车组件，需要处理商品的添加、删除、数量修改等操作。
    • 大型项目：在大型前端项目中，使用组件可以提高代码的可维护性和可扩展性。将页面拆分成多个组件，每个组件负责一个特定的功能，便于团队协作开发。

示例对比

<template>标签示例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template Example</title>
</head>

<body>
    <!-- 定义一个 template 标签，存储商品卡片的 HTML 结构 -->
    <template id="product-template">
        <div class="product">
            <h2 class="product-title">Product Title</h2>
            <p class="product-price">$99.99</p>
        </div>
    </template>
    <!-- 商品列表容器 -->
    <div id="product-list"></div>

    <script>
        // 获取 template 元素
        const productTemplate = document.getElementById('product-template');
        // 获取商品列表容器
        const productList = document.getElementById('product-list');
        // 模拟商品数据
        const products = [
            { title: 'Product 1', price: '$19.99' },
            { title: 'Product 2', price: '$29.99' }
        ];
        // 遍历商品数据
        products.forEach(product => {
            // 克隆 template 内容
            const clone = document.importNode(productTemplate.content, true);
            // 更新标题和价格
            const titleElement = clone.querySelector('.product-title');
            titleElement.textContent = product.title;
            const priceElement = clone.querySelector('.product-price');
            priceElement.textContent = product.price;
            // 将克隆的内容添加到商品列表中
            productList.appendChild(clone);
        });
    </script>
</body>

</html>
Vue 组件示例
<template>
    <!-- 组件的 HTML 结构 -->
    <div class="product">
        <h2>{{ product.title }}</h2>
        <p>{{ product.price }}</p>
        <button @click="addToCart">Add to Cart</button>
    </div>
</template>

<script>
export default {
    // 组件的属性
    props: {
        product: {
            type: Object,
            required: true
        }
    },
    // 组件的方法
    methods: {
        addToCart() {
            // 模拟添加到购物车的操作
            console.log(`Added ${this.product.title} to cart`);
        }
    }
};
</script>

<style scoped>
/* 组件的样式 */
.product {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
}
</style>

综上所述，<template>标签适合简单的 HTML 结构复用和动态插入，而components组件更适合处理复杂的交互逻辑和状态管理，在大型项目中能发挥更大的作用。

相关文章：

  • Next.js 严重漏洞：攻击者可绕过中间件授权检查
  • Day28-代码随想录-平衡二叉树110+二叉树的所有路径257
  • 责任链模式-java
  • tkinter日历程序的设计
  • 【vue】warning:Avoid mutating a prop directly
  • 53.第二阶段x86游戏实战2-c++实现自动打怪2
  • 【动态规划】路径问题
  • 单片机和微控制器知识汇总——《器件手册--单片机、数字信号处理器和可编程逻辑器件》
  • STM32F103_LL库+寄存器学习笔记02 - 开启SysTick（滴答定时器）中断
  • QinQ项展 VLAN 空间
  • 数据结构与算法：Dijkstra算法和分层图最短路
  • 技术赋能与创新实践：基于低代码平台的高性能应用开发
  • YoloV8训练和平精英人物检测模型
  • Vue动态绑定：文本框、单选按钮、下拉列表、多选按钮
  • Java运行时的堆、栈和方法区
  • 参考apollo3 FLASH样例改写实际应用的接口函数（带磨损均衡处理）
  • 导入 Excel 规则批量修改或删除 PDF 文档内容
  • 【网络】手机PUSH消息发送自建IM通道实现方案
  • 【Pandas】pandas Series to_csv
  • C++学习：六个月从基础到就业——C++基础语法回顾：指针与引用基础
  • 做网站baidunongmin/留号码的广告网站不需要验证码
  • 自己建设网站的利弊/百度知道在线问答
  • 做关于植物的网站/企业推广app
  • 去设计公司还是去企业/深圳搜索引擎优化seo
  • 二级网站建设标准/网络推广策划方案
  • 贵州能源网站 中企动力建设/seo排名点击 seo查询