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

大白话标签的作用，在构建可复用 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组件更适合处理复杂的交互逻辑和状态管理，在大型项目中能发挥更大的作用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/41376.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

6.4 模拟专题：LeetCode1419.数青蛙

6.4 模拟专题：LeetCode1419.数青蛙

1.题目链接&#xff1a;数青蛙 - LeetCode 2.题目描述 给定一个字符串 croakOfFrogs&#xff0c;表示青蛙的鸣叫声序列。每个青蛙必须按顺序发出完整的 “croak” 字符&#xff0c;且多只青蛙可以同时鸣叫。要求计算最少需要多少只青蛙才能完成该字符串&#xff0c;若无法完成…
阅读更多...
Linux 搭建dns主域解析，和反向解析

Linux 搭建dns主域解析，和反向解析

#!/bin/bash # DNS主域名服务 # user li 20250325# 检查当前用户是否为root用户 # 因为配置DNS服务通常需要较高的权限&#xff0c;只有root用户才能进行一些关键操作 if [ "$USER" ! "root" ]; then# 如果不是root用户&#xff0c;输出错误信息echo "…
阅读更多...
Leetcode 二进制求和

Leetcode 二进制求和

java solution class Solution {public String addBinary(String a, String b) {StringBuilder result new StringBuilder();//首先设置2个指针, 从右往左处理int i a.length() - 1;int j b.length() - 1;int carry 0; //设置进位标志位//从2个字符串的末尾向前遍历while(…
阅读更多...
【NLP 49、提示工程 prompt engineering】

【NLP 49、提示工程 prompt engineering】

目录 一、基本介绍 语言模型生成文本的基本特点 提示工程 prompt engineering 提示工程的优势 使用注意事项 ① 安全问题 ② 可信度问题 ③ 时效性与专业性 二、应用场景 能 ≠ 适合 应用场景 —— 百科知识 应用场景 —— 写文案 应用场景 —— 解释 / 编写…
阅读更多...
【NLP 43、文本生成任务】

【NLP 43、文本生成任务】

目录 一、生成式任务 二、seq2seq任务 1.模型结构 2.工作原理 3.局限性 三、自回归语言模型训练 Decoder only 四、自回归模型结构&#xff1a;文本生成任务 —— Embedding LSTM 代码示例 &#x1f680; 数据文件 代码流程 Ⅰ、模型初始化 Ⅱ、前向计算 代码运行流程 Ⅲ、加载…
阅读更多...
vscode 通过Remote-ssh远程连接服务器报错 could not establish connection to ubuntu

vscode 通过Remote-ssh远程连接服务器报错 could not establish connection to ubuntu

vscode 通过Remote-ssh插件远程连接服务器报错 could not establish connection to ubuntu&#xff0c;并且出现下面的错误打印&#xff1a; [21:00:57.307] Log Level: 2 [21:00:57.350] SSH Resolver called for "ssh-remoteubuntu", attempt 1 [21:00:57.359] r…
阅读更多...
Linux之编辑器vim命令

Linux之编辑器vim命令

vi/vim命令&#xff1a; 终端下编辑文件的首选工具&#xff0c;号称编辑器之神 基本上分为三种模式&#xff0c;分别是 命令模式&#xff08;command mode&#xff09;>输入vi的命令和快捷键&#xff0c;默认打开文件的时候的模式插入模式&#xff08;insert mode&#x…
阅读更多...
第一天学爬虫

第一天学爬虫

阅读提示&#xff1a;我今天才开始尝试爬虫&#xff0c;写的不好请见谅。 一、准备工具 requests库&#xff1a;发送HTTP请求并获取网页内容。BeautifulSoup库&#xff1a;解析HTML页面并提取数据。pandas库&#xff1a;保存抓取到的数据到CSV文件中。 二、爬取步骤 发送请求…
阅读更多...
MySQL实战（尚硅谷）

MySQL实战（尚硅谷）

要求 代码 # 准备数据 CREATE DATABASE IF NOT EXISTS company;USE company;CREATE TABLE IF NOT EXISTS employees(employee_id INT PRIMARY KEY,first_name VARCHAR(50),last_name VARCHAR(50),department_id INT );DESC employees;CREATE TABLE IF NOT EXISTS departments…
阅读更多...
windows下安装sublime

windows下安装sublime

sublime4 alpha 4098 版本 下载 可以根据待破解的版本选择下载 https://www.sublimetext.com/dev crack alpha4098 的licence 在----- BEGIN LICENSE ----- TwitterInc 200 User License EA7E-890007 1D77F72E 390CDD93 4DCBA022 FAF60790 61AA12C0 A37081C5 D0316412 4584D…
阅读更多...
激光线检测算法的FPGA实现

激光线检测算法的FPGA实现

激光线检测算法的FPGA实现 1. 常见的激光线检测算法 激光线检测中常用的三种算法 MAX&#xff08;最大值法&#xff09;、THRESH&#xff08;阈值法&#xff09;、COG&#xff08;灰度重心法&#xff09; 分别具有以下特点和工作原理&#xff1a; 1.1 MAX&#xff08;最大值法…
阅读更多...
小样本微调大模型

小样本微调大模型

一、环境搭建 conda create -n dseek python=3.10 conda activate dseek pip install bitsandbytes Pip install numpy python -m pip install --upgrade pip setuptools wheel 安装cuda,torch,Unsloth, huggingface,wandb等，见前述章节； 微调服务器配置：单机笔记本显卡4…
阅读更多...
深入理解指针（2）（C语言版）

深入理解指针（2）（C语言版）

文章目录 前言一、数组名的理解二、使用指针访问数组三、一维数组传参的本质四、冒泡排序五、二级指针六、指针数组七、指针数组模拟二维数组总结 前言 在上一篇文章中&#xff0c;我们初步了解了指针的基本概念和用法。今天&#xff0c;我们将继续深入探索指针在数组、函数传…
阅读更多...
高效内存管理：x86-64架构中的分页机制

高效内存管理：x86-64架构中的分页机制

在 x86-64 架构的世界里&#xff0c;内存分页机制扮演着举足轻重的角色&#xff0c;它就像是一座桥梁&#xff0c;连接着虚拟地址与物理地址。简单来说&#xff0c;内存分页机制就是将线性地址&#xff08;也就是虚拟地址&#xff09;切分成一个个固定大小的页&#xff0c;并把…
阅读更多...
统一开放世界与开放词汇检测：YOLO-UniOW无需增量学习的高效通用开放世界目标检测框架

统一开放世界与开放词汇检测：YOLO-UniOW无需增量学习的高效通用开放世界目标检测框架

目录 一、摘要 二、引言 三、相关工作 开放词汇对象检测 开放世界目标检测 参数高效学习 四、高效通用的开放世界目标检测 问题定义 高效的自适应决策学习 开放世界通配符学习 五、Coovally AI模型训练与应用平台 六、实验 数据集 评价指标 实施细节 定量结果 …
阅读更多...
fileinclude

fileinclude

##解题思路 场景首页没有什么提示&#xff0c;只有个flag在flag.php中&#xff0c;而且需要更改language&#xff0c;还有个index.php的路径&#xff0c;先记住它 习惯性查看源代码&#xff0c;得到了题目真正的内容&#xff0c;关键在于lan变量读取我们传入的Cookie值中的lang…
阅读更多...
链表-LeetCode

链表-LeetCode

这里写目录标题 1 排序链表1.1 插入法 O&#xff08;n&#xff09;1.2 归并排序 1 排序链表 1.1 插入法 O&#xff08;n&#xff09; /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullpt…
阅读更多...
计算机网络基础：WiFi 与蓝牙的原理与应用

计算机网络基础：WiFi 与蓝牙的原理与应用

计算机网络基础：WiFi 与蓝牙的原理与应用 一、前言二、WiFi 原理2.1 概述2.2 工作频段2.2.1 2.4GHz 频段2.2.2 5GHz 频段2.3 调制技术2.3.1 正交频分复用（OFDM）2.3.2 直接序列扩频（DSSS）2.4 通信协议2.5 网络架构2.5.1 独立基本服务集（IBSS）2.5.2 基础服务集（BSS）2.5.…
阅读更多...
深入解析 Java 类加载机制及双亲委派模型

深入解析 Java 类加载机制及双亲委派模型

&#x1f50d; Java的类加载机制是确保应用程序正确运行的基础&#xff0c;特别是双亲委派模型&#xff0c;它通过父类加载器逐层加载类&#xff0c;避免冲突和重复加载。但在某些特殊场景下&#xff0c;破坏双亲委派模型会带来意想不到的效果。本文将深入解析Java类加载机制、…
阅读更多...
【数据可视化艺术·进阶篇】热力图探秘：用色彩演绎场馆和景区的人流奥秘

【数据可视化艺术·进阶篇】热力图探秘：用色彩演绎场馆和景区的人流奥秘

假期出游&#xff0c;你是不是也遇到过这样的状况&#xff1a;想去的热门景点&#xff0c;放眼望去全是攒动的人头&#xff0c;根本没法好好欣赏风景&#xff1b;而景区里一些小众角落&#xff0c;却冷冷清清&#xff0c;鲜有人至。还有在轨道交通枢纽、大型体育场这些地方&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023