介绍第 3 部分

\\\"Learn

本教程不仅介绍了 Modulo,还介绍了许多流行的现代 Web 框架的中心概念之一,包括 React.js、Vue.js 等。这就是状态的概念。

到目前为止,我们的组件是静态的且不变的。他们不能做很多事情。它们对于将 HTML 重构为更 D.R.Y 可能很有用。 (“不要重复自己”),可重用组件,但仅此而已。它们无法验证表单数据、使用 API 或在完整的应用程序中使用。事实上,他们不能有任何形式的交互,或者任何动态或变化的内容。我们希望我们的组件具有反应性

您可以将这些状态变量的概念视为“数据桶”或“可以填充的空白”。它们允许我们“命名”来引用数据,从而允许编写更通用的代码和模板。这样,您的组件就可以更改内容:更改状态,查看结果!

第 1 步:添加状态部分

State 组件部分的定义与 Props 非常相似,不同之处在于,必须提供初始值作为默认值,而不是仅列出属性名称。我们可以将我们的 Props 转换为 State,如下所示:

第 2 步:在模板中包含 State

State 可以像 Props 一样插入到您的 Template 中。事实上,要让前面的示例再次使用我们新奇的 State 部分,我们需要做的就是将 props 更改为 state,如下所示:

如果您正确执行这两个步骤,您的故事生成器仍然可以工作,只是它不再需要属性,因为数据将来自“状态”。这意味着您应该记住从底部组件的使用中删除它们,所以它看起来像:

介绍:state.bind 指令

到目前为止,我们可以手动更改源代码中的状态,但我们的应用程序仍然不是交互式的,因为实际用户(即非编码人员)无法更改状态。 这就是“绑定”发挥作用的地方,用户输入被“绑定”到状态,这样应用程序的用户也可以在使用应用程序时修改状态变量。

要“绑定”,我们需要使用指令指令是一种HTML属性。您可以通过在属性名称中发现某些特殊字符来识别 指令 。还有其他指令,但目前我们只关心一个指令:[state.bind].

这是什么意思?每次击键后,它都会将输入与状态“同步”。绑定是“双向”的:修改状态会修改输入,修改输入会修改状态。例如, 是带有 [state.bind] 指令的输入 HTML 标记。在这种情况下,它将把输入“绑定”到“动物”状态变量。

第三步:将我们的第一个输入绑定到状态

在我们的例子中,要添加绑定到我们的State变量“animal”的带标签输入,我们可以这样做:

第四步:完成并测试

现在,对所有剩余的输入进行“冲洗并重复”:

测试方法如下:首先,确保开始填写所有输入(如果名称中有拼写错误,可能会导致该内容不显示 - 检查开发工具是否有错误!)。然后,尝试编辑每个不同的输入。您是否看到它如何对您的输入进行“反应”,在您输入新的愚蠢单词时自动重新呈现每个故事?

- 完整示例

综合起来,我们得到以下(愚蠢的)结果:

州及其他州

一些思考:如何将其用于 UI 开发?想想日常 Web 应用程序中的 状态 :表单、选项卡、模式弹出界面……实际上,任何动态或反应性的东西。所有这些都在状态发生变化。 State 可以保存 CSS 类、CSS 值、绑定到滑块和其他类型的输入,等等!换句话说,我们还有很多关于 State 的内容要介绍,但我们会将其保留到第 4 部分。请务必关注更多类似的教程,并且一如既往地随时提出问题或评论中的建议。

","image":"http://www.luping.net/uploads/20241015/1728970205670dfdddbcc08.png","datePublished":"2024-11-07T01:50:26+08:00","dateModified":"2024-11-07T01:50:26+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 通过制作(愚蠢的)故事生成器来学习状态管理(学习 Modulo.js - 第 f 部分

通过制作(愚蠢的)故事生成器来学习状态管理(学习 Modulo.js - 第 f 部分

发布于2024-11-07
浏览:317

?欢迎回来!没听懂第 1 部分吗?不用担心,您可以从头开始,也可以直接从这里开始!

简介:SillyStory Web 组件

本教程中我们的任务是构建一个故事生成组件。这将为我们提供大量使用 State 的练习。上次我们以一个有点像下面的片段结束。然而,在本教程中,我们更改了“模板”以显示一个愚蠢的故事,该故事由作为道具给出的单词生成。这允许使用不同的愚蠢单词“重用”该组件。要开始本教程,请将以下内容复制并粘贴到新文件中,然后在浏览器中打开:




介绍第 3 部分

Learn state management by making a (silly) story generator (Learn Modulo.js - Part f

本教程不仅介绍了 Modulo,还介绍了许多流行的现代 Web 框架的中心概念之一,包括 React.js、Vue.js 等。这就是状态的概念。

到目前为止,我们的组件是静态的且不变的。他们不能做很多事情。它们对于将 HTML 重构为更 D.R.Y 可能很有用。 (“不要重复自己”),可重用组件,但仅此而已。它们无法验证表单数据、使用 API 或在完整的应用程序中使用。事实上,他们不能有任何形式的交互,或者任何动态或变化的内容。我们希望我们的组件具有反应性

您可以将这些状态变量的概念视为“数据桶”或“可以填充的空白”。它们允许我们“命名”来引用数据,从而允许编写更通用的代码和模板。这样,您的组件就可以更改内容:更改状态,查看结果!

第 1 步:添加状态部分

State 组件部分的定义与 Props 非常相似,不同之处在于,必须提供初始值作为默认值,而不是仅列出属性名称。我们可以将我们的 Props 转换为 State,如下所示:


第 2 步:在模板中包含 State

State 可以像 Props 一样插入到您的 Template 中。事实上,要让前面的示例再次使用我们新奇的 State 部分,我们需要做的就是将 props 更改为 state,如下所示:


如果您正确执行这两个步骤,您的故事生成器仍然可以工作,只是它不再需要属性,因为数据将来自“状态”。这意味着您应该记住从底部组件的使用中删除它们,所以它看起来像:

介绍:state.bind 指令

到目前为止,我们可以手动更改源代码中的状态,但我们的应用程序仍然不是交互式的,因为实际用户(即非编码人员)无法更改状态。 这就是“绑定”发挥作用的地方,用户输入被“绑定”到状态,这样应用程序的用户也可以在使用应用程序时修改状态变量。

要“绑定”,我们需要使用指令指令是一种HTML属性。您可以通过在属性名称中发现某些特殊字符来识别 指令 。还有其他指令,但目前我们只关心一个指令:[state.bind].

这是什么意思?每次击键后,它都会将输入与状态“同步”。绑定是“双向”的:修改状态会修改输入,修改输入会修改状态。例如, 是带有 [state.bind] 指令的输入 HTML 标记。在这种情况下,它将把输入“绑定”到“动物”状态变量。

第三步:将我们的第一个输入绑定到状态

在我们的例子中,要添加绑定到我们的State变量“animal”的带标签输入,我们可以这样做:



第四步:完成并测试

现在,对所有剩余的输入进行“冲洗并重复”:

测试方法如下:首先,确保开始填写所有输入(如果名称中有拼写错误,可能会导致该内容不显示 - 检查开发工具是否有错误!)。然后,尝试编辑每个不同的输入。您是否看到它如何对您的输入进行“反应”,在您输入新的愚蠢单词时自动重新呈现每个故事?

- 完整示例

综合起来,我们得到以下(愚蠢的)结果:




州及其他州

一些思考:如何将其用于 UI 开发?想想日常 Web 应用程序中的 状态 :表单、选项卡、模式弹出界面……实际上,任何动态或反应性的东西。所有这些都在状态发生变化。 State 可以保存 CSS 类、CSS 值、绑定到滑块和其他类型的输入,等等!换句话说,我们还有很多关于 State 的内容要介绍,但我们会将其保留到第 4 部分。请务必关注更多类似的教程,并且一如既往地随时提出问题或评论中的建议。

版本声明 本文转载于:https://dev.to/michaelpb/learn-how-to-use-state-by-building-a-silly-story-generator-web-component-learn-modulojs-part-3-of-10-3gfc?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 为什么不````''{margin:0; }`始终删除CSS中的最高边距?
    为什么不````''{margin:0; }`始终删除CSS中的最高边距?
    在CSS 问题:不正确的代码: 全球范围将所有余量重置为零,如提供的代码所建议的,可能会导致意外的副作用。解决特定的保证金问题是更建议的。 例如,在提供的示例中,将以下代码添加到CSS中,将解决余量问题: body H1 { 保证金顶:-40px; } 此方法更精确,避免了由全局保证金重置引...
    编程 发布于2025-04-06
  • 为什么使用Firefox后退按钮时JavaScript执行停止?
    为什么使用Firefox后退按钮时JavaScript执行停止?
    导航历史记录问题:JavaScript使用Firefox Back Back 此行为是由浏览器缓存JavaScript资源引起的。要解决此问题并确保在后续页面访问中执行脚本,Firefox用户应设置一个空功能。 警报'); }; alert('inline Alert'...
    编程 发布于2025-04-06
  • 如何使用PHP从XML文件中有效地检索属性值?
    如何使用PHP从XML文件中有效地检索属性值?
    从php PHP陷入困境。使用simplexmlelement :: attributes()函数提供了简单的解决方案。此函数可访问对XML元素作为关联数组的属性: - > attributes()为$ attributeName => $ attributeValue){ echo ...
    编程 发布于2025-04-06
  • PHP阵列键值异常:了解07和08的好奇情况
    PHP阵列键值异常:了解07和08的好奇情况
    PHP数组键值问题,使用07&08 在给定数月的数组中,键值07和08呈现令人困惑的行为时,就会出现一个不寻常的问题。运行print_r($月)返回意外结果:键“ 07”丢失,而键“ 08”分配给了9月的值。此问题源于PHP对领先零的解释。当一个数字带有0(例如07或08)的前缀时,PHP将其...
    编程 发布于2025-04-06
  • 如何在其容器中为DIV创建平滑的左右CSS动画?
    如何在其容器中为DIV创建平滑的左右CSS动画?
    通用CSS动画,用于左右运动 ,我们将探索创建一个通用的CSS动画,以向左和右移动DIV,从而到达其容器的边缘。该动画可以应用于具有绝对定位的任何div,无论其未知长度如何。问题:使用左直接导致瞬时消失 更加流畅的解决方案:混合转换和左 [并实现平稳的,线性的运动,我们介绍了线性的转换。这...
    编程 发布于2025-04-06
  • 对象拟合:IE和Edge中的封面失败,如何修复?
    对象拟合:IE和Edge中的封面失败,如何修复?
    To resolve this issue, we employ a clever CSS solution that solves the problem:position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)...
    编程 发布于2025-04-06
  • 如何使用PHP将斑点(图像)正确插入MySQL?
    如何使用PHP将斑点(图像)正确插入MySQL?
    essue VALUES('$this->image_id','file_get_contents($tmp_image)')";This code builds a string in PHP, but the function call ...
    编程 发布于2025-04-06
  • 为什么我在Silverlight Linq查询中获得“无法找到查询模式的实现”错误?
    为什么我在Silverlight Linq查询中获得“无法找到查询模式的实现”错误?
    查询模式实现缺失:解决“无法找到”错误在Silverlight应用程序中,尝试使用LINQ建立LINQ连接以错误而实现的数据库”,无法找到查询模式的实现。”当省略LINQ名称空间或查询类型缺少IEnumerable 实现时,通常会发生此错误。 解决问题来验证该类型的质量是至关重要的。在此特定实例中...
    编程 发布于2025-04-06
  • 在细胞编辑后,如何维护自定义的JTable细胞渲染?
    在细胞编辑后,如何维护自定义的JTable细胞渲染?
    在JTable中维护jtable单元格渲染后,在JTable中,在JTable中实现自定义单元格渲染和编辑功能可以增强用户体验。但是,至关重要的是要确保即使在编辑操作后也保留所需的格式。在设置用于格式化“价格”列的“价格”列,用户遇到的数字格式丢失的“价格”列的“价格”之后,问题在设置自定义单元格...
    编程 发布于2025-04-06
  • 如何正确使用与PDO参数的查询一样?
    如何正确使用与PDO参数的查询一样?
    在pdo 中使用类似QUERIES在PDO中的Queries时,您可能会遇到类似疑问中描述的问题:此查询也可能不会返回结果,即使$ var1和$ var2包含有效的搜索词。错误在于不正确包含%符号。通过将变量包含在$ params数组中的%符号中,您确保将%字符正确替换到查询中。没有此修改,PDO...
    编程 发布于2025-04-06
  • 如何干净地删除匿名JavaScript事件处理程序?
    如何干净地删除匿名JavaScript事件处理程序?
    删除匿名事件侦听器将匿名事件侦听器添加到元素中会提供灵活性和简单性,但是当要删除它们时,可以构成挑战,而无需替换元素本身就可以替换一个问题。 element? element.addeventlistener(event,function(){/在这里工作/},false); 要解决此问题,请考虑...
    编程 发布于2025-04-06
  • 如何从Python中的字符串中删除表情符号:固定常见错误的初学者指南?
    如何从Python中的字符串中删除表情符号:固定常见错误的初学者指南?
    从python import codecs import codecs import codecs 导入 text = codecs.decode('这狗\ u0001f602'.encode('utf-8'),'utf-8') 印刷(文字)#带有...
    编程 发布于2025-04-06
  • 您如何在Laravel Blade模板中定义变量?
    您如何在Laravel Blade模板中定义变量?
    在Laravel Blade模板中使用Elegance 在blade模板中如何分配变量对于存储以后使用的数据至关重要。在使用“ {{}}”分配变量的同时,它可能并不总是最优雅的解决方案。幸运的是,Blade通过@php Directive提供了更优雅的方法: $ old_section =“...
    编程 发布于2025-04-06
  • 如何实时捕获和流媒体以进行聊天机器人命令执行?
    如何实时捕获和流媒体以进行聊天机器人命令执行?
    在开发能够执行命令的chatbots的领域中,实时从命令执行实时捕获Stdout,一个常见的需求是能够检索和显示标准输出(stdout)在cath cath cant cant cant cant cant cant cant cant interfaces in Chate cant inter...
    编程 发布于2025-04-06
  • 如何克服PHP的功能重新定义限制?
    如何克服PHP的功能重新定义限制?
    克服PHP的函数重新定义限制在PHP中,多次定义一个相同名称的函数是一个no-no。尝试这样做,如提供的代码段所示,将导致可怕的“不能重新列出”错误。 但是,PHP工具腰带中有一个隐藏的宝石:runkit扩展。它使您能够灵活地重新定义函数。 runkit_function_renction_re...
    编程 发布于2025-04-06

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3