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

webcomponents学习

news 2026/3/31 1:09:09

一、新建index.html文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div>我是你大哥</div><!-- 传递参数，可以看出来和vue的使用方法差不多 --><wu-jie  url="baidu.com" age="18"></wu-jie><template id="wujie"><style>.box {width: 100px;height: 100px;background-color: red;}</style><div class="box">你好呀</div></template></body><script src="./index.js"></script>
</html>

二、新建index.js文件

"use strict";
window.onload = () => {class Wujie extends HTMLElement {constructor() {super();const dom = this.attachShadow({ mode: "open" });  //开启样式隔绝const template = document.getElementById("wujie");  //获取到index.html中的templatedom.appendChild(template.content.cloneNode(true));  //这里必须要克隆console.log(this.#getAttr("age"));}#getAttr(attr) {return this.getAttribute(attr); //通过getAttribute获取属性值}// 生命周期卸载disconnectedCallback() {console.log("类似于vue的destory");}// 生命周期创建connectedCallback() {console.log("类似于vue的mouted");}// 类似于watchattributeChangedCallback(name, oldValue, newValue) {console.log(name, oldValue, newValue);}}window.customElements.define("wu-jie", Wujie); //全局挂载，相当于vue的组件
};

更多知识看MDN文档

相关文章：

webcomponents学习

一、新建index.html文件 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title>…...

编程日记 2024/6/26 0:40:59

2024会展行业发展趋势预测

在当今这个数字化浪潮汹涌的时代&#xff0c;会展行业也迎来了自己的变革时刻。 根据《2023中国会展主办机构数字化调研报告》&#xff0c;我们可以清晰地看到几个显著的趋势&#xff1a; 首先&#xff0c;数字化转型已经不再是一道选择题&#xff0c;而是必答题。 超过90%的…...

编程日记 2024/6/26 0:38:57

达梦（DM8）数据库备份与还原（逻辑备份）二

一、达梦数据库的逻辑备份分四种级别的导出&#xff08;dexp&#xff09;与导入&#xff08;dimp&#xff09;的备份 第一种是&#xff1a;数据库级&#xff1a;导出或导入数据库中所有的对象。主要参数是&#xff1a;FULL 第二种是&#xff1a;用户级别&#xff1a;导出或导…...

编程日记 2024/6/26 0:37:56

ThreeJS-截屏下载pdf或者图片时白屏

JS-页面截图下载为pdf 关于如何下载为 pdf 在上面的这篇文章中有写&#xff0c;大家可以看下&#xff0c;下载图片代码在最下面 这时我们发现 three 部分是空白的如下&#xff1a; 这就多少有点尴尬了&#xff0c;这时我们习惯性的看下后台报错 是不是发现了惊喜&#xff0c;…...

编程日记 2024/6/26 0:36:54

redis以后台的方式启动

文章目录 1、查看redis安装的目录2、Redis以后台的方式启动3、通过客户端连接redis4、连接后&#xff0c;测试与redis的连通性 1、查看redis安装的目录 [rootlocalhost ~]# cd /usr/local/redis/ [rootlocalhost redis]# ll 总用量 112 drwxr-xr-x. 2 root root 150 12月 6…...

编程日记 2024/6/26 0:35:53

力扣随机一题 哈希表 排序 数组

博客主页&#xff1a;誓则盟约系列专栏&#xff1a;IT竞赛 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 2491.划分技能点相等的团队【中等】 题目&#xff1a; 给你一个正整数数组…...

编程日记 2024/6/26 0:34:52

昇思25天学习打卡营第01天|基本介绍

作为曾经的javaer&#xff0c;本着不断学习的初心&#xff0c;报名了昇思25天的课程&#xff0c;希望自己能学会点东西的目的。 昇思MindSpore介绍 昇思MindSpore是一个全场景深度学习框架&#xff0c;旨在实现易开发、高效执行、全场景统一部署三大目标。 其中&#xff0c;…...

编程日记 2024/6/26 0:33:51

问题：1、金属基复合材料界面的物理结合是指 #学习方法#媒体

问题&#xff1a;1、金属基复合材料界面的物理结合是指 A&#xff0e;与化学作用有关&#xff0c;既有化学键力存在&#xff0c;又有范德华力存在 B&#xff0e;是一种纯的物理作用&#xff0c;与化学作用无关&#xff0c;即无化学键力存在&#xff0c;但有范德华力存在 C&a…...

编程日记 2024/6/26 0:29:47

突发！OpenAI停止不支持国家API，7月9日开始执行

6月25日凌晨&#xff0c;有部分开发者收到了OpenAI的信&#xff0c;“根据数据显示&#xff0c;你的组织有来自OpenAl目前不支持的地区的API流量。从7月9日起&#xff0c;将采取额外措施&#xff0c;停止来自不在OpenAI支持的国家、地区名单上的API使用。” 但这位网友表示&am…...

编程日记 2024/6/26 0:28:46

大数据集群数据传输

简单的服务器间的通信示例 netcat&#xff0c;简写为 nc&#xff0c;是 unix 系统下一个强大的命令行网络通信工具&#xff0c;用于在两台主机之间建立 TCP 或者 UDP 连接&#xff0c;并提供丰富的命令进行数据通信。nc 在网络参考模型属于应用层。使用 nc 可以做很多事情&…...

编程日记 2024/6/26 0:27:45

css-vxe列表中ant进度条与百分比

1.vxe列表 ant进度条 <vxe-column field"actualProgress" title"进度" align"center" width"200"><template #default"{ row }"><a-progress:percent"Math.floor(row.actualProgress)"size"s…...

编程日记 2024/6/26 0:26:43

网络协议TCP/IP, HTTP/HTTPS介绍

TCP/IP协议 TCP/IP是一种基于连接的通信协议&#xff0c;它是互联网的基础协议。TCP代表传输控制协议&#xff0c;IP代表Internet协议。虽然这两个协议通常一起提及&#xff0c;但它们实际上是分开的&#xff1a;IP负责在网络中从一台计算机向另一台计算机发送数据包&#xff0…...

编程日记 2024/6/26 0:25:42

STM32高级控制定时器（STM32F103）：PWM输出模式

目录 概述 1 PWM模式介绍 2 PWM类型 2.1 PWM边缘对齐模式 2.2 PWM中心对齐模式 3 使用STM32Cube配置PWM 3.1 STM32Cube配置参数 3.2 生成Project 4 设置PWM占空比 4.1 函数介绍 4.3 函数源码 5 测试代码 5.1 编写测试代码 5.2 函数源码 6 运行代码 概述 本文主…...

编程日记 2024/6/26 0:24:41

TikTok达人背后的品牌影响力与用户增长

TikTok独特的算法和广泛的用户基础&#xff0c;使得品牌在TikTok上的推广活动变得尤为重要。在这种背景下&#xff0c;TikTok达人合作成为品牌推广、用户增长和社交影响力的重要工具。本文Nox聚星将和大家探讨TikTok达人合作在这些方面的作用。 一、对品牌推广的作用 1. 增加…...

编程日记 2024/6/26 0:23:40

零撸广告创业项目：撸包小游戏对接广告联盟app开发

“撸包小游戏”APP是一款专注于小游戏的应用软件&#xff0c;它为用户提供了丰富多样的小游戏选择&#xff0c;并允许开发者通过广告变现的方式获取收益。以下是关于“撸包小游戏”APP的一些关键信息&#xff1a; 广告变现&#xff1a; 广告变现是“撸包小游戏”APP中开发者获…...

编程日记 2024/6/26 0:21:39

【Web3初识系列】如何连接 Binance Smart Chain通过交易对绘制 k 线？

连接 Binance Smart Chain通过交易对绘制 k 线 安装 web3 pip install web3连接到 Binance Smart Chain 使用公共的 BSC 节点 URL。 from web3 import Web3# 连接到 BSC 公共节点 bsc_url "https://bsc-dataseed.binance.org/" web3 Web3(Web3.HTTPProvider(bs…...

编程日记 2024/6/26 0:20:38

STM32——定时器

一、定时器简介&#xff1a; 1.最大59.65s定时&#xff1a; 因为预分频器和自动重装寄存器的最大存储值都是65536&#xff0c;当预分频器设置为65536时&#xff0c;就是当有65536个波形输入到预分频器时&#xff0c;预分频器才会输出一个波形到计数器&#xff0c;然后跟自动重装…...

编程日记 2024/6/26 0:19:36

[20] Opencv_CUDA应用之 关键点检测器和描述符

Opencv_CUDA应用之 关键点检测器和描述符 本节中会介绍找到局部特征的各种方法&#xff0c;也被称为关键点检测器关键点(key-point)是表征图像的特征点&#xff0c;可用于准确定义对象 1. 加速段测试特征功能检测器 FAST算法用于检测角点作为图像的关键点&#xff0c;通过对…...

编程日记 2024/6/26 0:18:35

支持离线翻译任意语言的桌面应用程序；单张图像高效生成高质量的 3D 模型；2500种色彩映射的集合，适用于matplotlib和seaborn

✨ 1: Lingo Lingo是一款支持离线翻译任意语言的桌面应用程序 Lingo 是一款支持离线翻译的桌面应用程序&#xff0c;用户可以在不连接互联网的情况下进行多语言翻译。这款软件利用了Meta公司提供的nllb-200-distilled-600M 多语言模型&#xff0c;以实现高效的翻译功能。 没…...

编程日记 2024/6/26 0:17:34

BC-Linux 8.6最小化安装的服务器启用GNOME图形化界面

本文记录了BC-Linux 8.6最小化安装的服务器如何启用GNOME图形化界面的过程。 一、服务器环境 1、系统版本 [rootlocalhost ~]# cat /etc/os-release NAME"BigCloud Enterprise Linux" VERSION"8.6 (Core)" ID"bclinux" ID_LIKE"rhel fe…...

编程日记 2024/6/26 0:16:33

探索kedro：数据科学项目的高效管理框架

探索kedro&#xff1a;数据科学项目的高效管理框架 【免费下载链接】kedro Kedro is a toolbox for production-ready data science. It uses software engineering best practices to help you create data engineering and data science pipelines that are reproducible, ma…...

编程新知 2026/3/31 0:54:55

Mysql 主从复制详解

MySQL 主从复制详解 MySQL 主从复制是数据库高可用架构的基石，也是系统分析师考试中数据库部分的高频考点。下面从核心原理、复制类型、架构模式、配置实战到运维监控进行全面解析。 📌 一、主从复制核心概念 定义与目的 主从复制是指将主数据库（Master）的数据变化实时…...

编程新知 2026/3/30 23:59:27

Meta超智能体开源：任意可计算任务中，能自我改进实现无尽演化

AI已经从被动解答问题的工具&#xff0c;演化为能主动探索如何进化的计算实体了。Meta人工智能实验室联合英属哥伦比亚大学、矢量研究所、爱丁堡大学以及纽约大学等多家顶尖学术机构的科研团队&#xff0c;共同推出了极具前沿性的架构设计DGM-Hyperagents。DGM-Hyperagents把执…...

编程新知 2026/3/30 23:57:27

避开这3个坑！STM32 CubeMX配置QSPI读写MX25L25645G实战复盘

STM32 CubeMX配置QSPI驱动MX25L25645G的三大实战陷阱与解决方案 在嵌入式系统开发中&#xff0c;外部Flash存储器的使用几乎成为标配&#xff0c;而MX25L25645G凭借其256Mb的大容量和QSPI接口的高速特性&#xff0c;成为许多STM32项目的首选。但当你真正开始用CubeMX配置QSPI接…...

编程新知 2026/3/30 23:02:16

百考通：AI全流程智能化赋能答辩PPT，让学术展示更高效从容

毕业季、开题季&#xff0c;一份专业出彩的PPT是顺利通过答辩的关键。但从论文中提炼核心观点、规划答辩逻辑、设计美观版式&#xff0c;往往让学生们焦头烂额。百考通&#xff08;https://www.baikaotongai.com&#xff09; 凭借AI技术深度赋能&#xff0c;打造出一站式答辩PP…...

编程新知 2026/3/30 22:46:02

Microstation v8与Terrasolid插件安装全攻略：从零到精通

1. MicroStation v8安装前的准备工作 在开始安装MicroStation v8之前&#xff0c;我们需要做好充分的准备工作。首先确保你的电脑满足最低系统要求&#xff1a;Windows 7/8/10操作系统&#xff08;32位或64位均可&#xff09;、至少4GB内存、2GB可用磁盘空间。我建议使用独立显…...

编程新知 2026/3/30 22:21:45

Flux.1-Dev深海幻境在网络安全领域的应用：恶意流量日志可视化分析

Flux.1-Dev深海幻境在网络安全领域的应用&#xff1a;恶意流量日志可视化分析 每天&#xff0c;安全运维中心的告警大屏上&#xff0c;成千上万条日志像瀑布一样滚动。分析师小李紧盯着屏幕&#xff0c;试图从这些密密麻麻的IP地址、端口号和状态码中&#xff0c;分辨出一次真…...

编程新知 2026/3/30 20:20:27

FreeFileSync 14.9更新：多维度优化提升使用体验

FreeFileSync 14.9&#xff1a;核心功能更新亮点FreeFileSync作为一款适用于Windows、macOS和Linux的开源文件夹对比和同步软件&#xff0c;在14.9版本有了诸多重要更新。在Linux系统方面&#xff0c;支持高DPI显示器上的200%显示缩放&#xff0c;这对于使用高分辨率显示器的用…...

编程新知 2026/3/30 20:06:24

Comsol 多裂纹水力压裂扩展：拉伸与压缩下的破坏探索

comsol多裂纹水力压裂扩展&#xff0c;可以实现拉伸和压缩下的破坏。在工程领域&#xff0c;水力压裂是一项至关重要的技术&#xff0c;尤其在石油和天然气开采等方面应用广泛。而 Comsol 作为强大的多物理场仿真软件&#xff0c;为我们研究多裂纹水力压裂扩展提供了有力工具&a…...

编程新知 2026/3/30 18:36:50

探索内转子MotorCAD电机模型：面包型永磁体的独特魅力

内转子motorcad电机模型&#xff0c;电机永磁体采用面包型&#xff0c;额定转速3000&#xff0c;可用于后续的优化设计&#xff0c;送motorcad中文手册。最近在研究电机这块&#xff0c;发现了一个超有意思的内转子MotorCAD电机模型&#xff0c;今天来和大家唠唠。这个模型的电…...

编程新知 2026/3/30 18:36:48