Another time:
编写您的第一个 Web 组件（学习 Modulo.js - 第 f 部分
发布于2024-11-08
浏览：108
？欢迎所有新订阅者和回归的组件编码者！我即将开始一个新的 10 部分教程系列。虽然我的其他教程使用 Modulo.js 构建特定的、有趣的小应用程序，例如口袋妖怪舞会、复古挤压文本编辑器或视频游戏画廊，但本教程系列将建立在基本原则上，从第一个方面开始：什么是 Web 组件吗？
HTML 和 CSS 之后的下一步
您是否刚刚学习了 HTML 和 CSS 的基础知识，并对下一步感到好奇，想要构建更大、更完整的 Web 应用程序？或者，您已经是一名 Web 开发人员或 JavaScript 专业人士，并且只想构建快速、轻便的 Web 应用程序，而无需过多的臃肿、工具或过多的依赖项？
如果是这样，Web Components 就适合您！它们允许您创建可重用的代码部分。通过学习本教程，您将学习如何修复重复的、难以维护的 HTML 和 CSS。它还只使用最少的工具和库，这意味着您不需要 Node.js、NPM 或大量的 node_modules。它还可以让您磨练现代前端 Web 开发的技能：在本系列的后续教程中，您将学习 slots、shadowDOM、props 等概念、模板化、状态管理等等！这些概念可以转移到使用其他流行框架，而 Modulo 简单的声明性方法可能是一种更有吸引力的方式来学习核心概念，而无需陷入复杂的设置。
模数框架简介
什么是 Modulo？ Modulo 是一个用 JavaScript 编写的免费软件/开源、小而强大的 Web 框架。它没有依赖项，并使用 HTML 语法，因此可以在页面加载时自行设置，无需 Node.js 或编译。您可以在纯 HTML“静态站点”（例如，当您在目录中组装 HTML、CSS 和其他静态资源以在静态 Web 主机上启动时）或任何其他现有 Web 应用程序中使用它。本教程是关于使用 Modulo 作为构建 Web 组件的工具。
第 1 部分介绍
在第 1 部分中，我们将学习如何构建一个简单的“Hello World”组件。在以后的部分中，我们将学习如何添加样式、道具、状态、响应式表单、插槽、API 等等，但现在，我们将从基础知识开始：超越基本的 HTML 和通过使用 Modulo.
创建和重用 Web 组件来实现 CSS第 1 步：包含模数
在使用 Modulo 之前，我们必须包含该框架。整个框架包含在“Modulo.js”中，该文件包含 2000 行 JavaScript。 这意味着启动 Modulo 项目实际上不需要任何依赖项超出您的浏览器和编辑器。因此，只需打开一个空白 HTML 文件并开始使用以下非常简单的起始代码：
第 2 步：定义您的第一个组件
现在我们已经包含了它，我们可以开始编写模定义并一般使用该框架。我们通过创建 Modulo
Hello Modulo World!
这个“模板”因此成为我们组件的“模板”：每次我们的组件出现在页面上时，它都会在其中呈现给定的模板。
第 3 步：使用您的第一个组件
定义后，您可以通过引用其名称来使用组件，就像它是纯 HTML 标签一样：
这将导致屏幕上显示以下内容：
你好模世界！
请注意，一旦注册，组件就可以到达普通 HTML 标签可以到达的任何地方，并且也可以以相同的方式使用 CSS 进行样式设置。换句话说，创建组件就像创建一个全新类型的 HTML 标签，可以在任何地方使用，就像原来的
版本声明
本文转载于：https://dev.to/michaelpb/writing-your-first-web-component-learn-modulojs-part-1-of-10-4okh?1如有侵犯，请联系[email protected]删除
最新教程
更多>
-
如何克服PHP的功能重新定义限制？克服PHP的函数重新定义限制在PHP中，多次定义一个相同名称的函数是一个no-no。尝试这样做，如提供的代码段所示，将导致可怕的“不能重新列出”错误。 但是，PHP工具腰带中有一个隐藏的宝石：runkit扩展。它使您能够灵活地重新定义函数。 runkit_function_renction_re...编程 发布于2025-03-11 -
\“（1）vs.（;;）：编译器优化是否消除了性能差异？\”答案： 在大多数现代编译器中，while（1）和（1）和（;;）之间没有性能差异。编译器： perl： 1 输入 - > 2 2 NextState（Main 2 -E：1）V-> 3 9 Leaveloop VK/2-> A 3 toterloop（next-> 8 last-> 9 ...编程 发布于2025-03-11
-
如何修复\“常规错误：2006 MySQL Server在插入数据时已经消失\”？How to Resolve "General error: 2006 MySQL server has gone away" While Inserting RecordsIntroduction:Inserting data into a MySQL database can...编程 发布于2025-03-11
-
为什么使用固定定位时，为什么具有100％网格板柱的网格超越身体？网格超过身体，用100％grid-template-columns 为什么在grid-template-colms中具有100％的显示器，当位置设置为设置的位置时，grid-template-colly修复了？问题： 考虑以下CSS和html： class =“ snippet-code”> g...编程 发布于2025-03-11
-
Java是否允许多种返回类型：仔细研究通用方法？在Java中的多个返回类型：一种误解类型：在Java编程中揭示，在Java编程中，Peculiar方法签名可能会出现，可能会出现，使开发人员陷入困境，使开发人员陷入困境。 getResult（string s）; ，其中foo是自定义类。该方法声明似乎拥有两种返回类型：列表和E。但这确实是如此吗...编程 发布于2025-03-11
-
如何使用FormData（）处理多个文件上传？）处理多个文件输入时，通常需要处理多个文件上传时，通常是必要的。 The fd.append("fileToUpload[]", files[x]); method can be used for this purpose, allowing you to send multi...编程 发布于2025-03-11
-
如何从Python中的字符串中删除表情符号：固定常见错误的初学者指南？从python import codecs import codecs import codecs 导入 text = codecs.decode（'这狗\ u0001f602'.encode（'utf-8'），'utf-8'） 印刷（文字）＃带有...编程 发布于2025-03-11
-
如何从PHP中的数组中提取随机元素？从阵列中的随机选择，可以轻松从数组中获取随机项目。考虑以下数组：; 从此数组中检索一个随机项目，利用array_rand（ array_rand（）函数从数组返回一个随机键。通过将$项目数组索引使用此键，我们可以从数组中访问一个随机元素。这种方法为选择随机项目提供了一种直接且可靠的方法。编程 发布于2025-03-11
-
如何在JavaScript对象中动态设置键？在尝试为JavaScript对象创建动态键时，如何使用此Syntax jsObj['key' i] = 'example' 1;不工作。正确的方法采用方括号： jsobj ['key''i] ='example'1; 在JavaScript中，数组是一...编程 发布于2025-03-11
-
如何干净地删除匿名JavaScript事件处理程序？删除匿名事件侦听器将匿名事件侦听器添加到元素中会提供灵活性和简单性，但是当要删除它们时，可以构成挑战，而无需替换元素本身就可以替换一个问题。 element？ element.addeventlistener（event，function（）{/在这里工作/}，false）; 要解决此问题，请考虑...编程 发布于2025-03-11
-
PHP阵列键值异常：了解07和08的好奇情况PHP数组键值问题，使用07&08 在给定数月的数组中，键值07和08呈现令人困惑的行为时，就会出现一个不寻常的问题。运行print_r（$月份）返回意外结果：键“ 07”丢失，而键“ 08”分配给了9月的值。此问题源于PHP对领先零的解释。当一个数字带有0（例如07或08）的前缀时，PHP将...编程 发布于2025-03-11
-
如何使用PHP将斑点（图像）正确插入MySQL？essue VALUES('$this->image_id','file_get_contents($tmp_image)')";This code builds a string in PHP, but the function call ...编程 发布于2025-03-11
-
可以在纯CS中将多个粘性元素彼此堆叠在一起吗？[2这里： https：//webthemez.com/demo/sticky-multi-header-scroll/index.html </main> <section> { display：grid; grid-template-...编程 发布于2025-03-11
-
如何使用Regex在PHP中有效地提取括号内的文本php：在括号内提取文本在处理括号内的文本时，找到最有效的解决方案是必不可少的。一种方法是利用PHP的字符串操作函数，如下所示： 作为替代 $ text ='忽略除此之外的一切（text）'; preg_match（'＃（（。 &&& [Regex使用模式来搜索特...编程 发布于2025-03-11
-
为什么我的CSS背景图像出现？故障排除：CSS背景图像未出现 ，您的背景图像尽管遵循教程说明，但您的背景图像仍未加载。图像和样式表位于相同的目录中，但背景仍然是空白的白色帆布。而不是不弃用的，您已经使用了CSS样式： bockent {背景：封闭图像文件名：背景图：url（nickcage.jpg）; 如果您的html，css...编程 发布于2025-03-11
学习中文
- 1 走路用中文怎么说？走路中文发音，走路中文学习
- 2 坐飞机用中文怎么说？坐飞机中文发音，坐飞机中文学习
- 3 坐火车用中文怎么说？坐火车中文发音，坐火车中文学习
- 4 坐车用中文怎么说？坐车中文发音，坐车中文学习
- 5 开车用中文怎么说？开车中文发音，开车中文学习
- 6 游泳用中文怎么说？游泳中文发音，游泳中文学习
- 7 骑自行车用中文怎么说？骑自行车中文发音，骑自行车中文学习
- 8 你好用中文怎么说？你好中文发音，你好中文学习
- 9 谢谢用中文怎么说？谢谢中文发音，谢谢中文学习
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
