介绍第 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
浏览:728

?欢迎回来!没听懂第 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]删除
最新教程 更多>
  • 将图片浮动到底部右侧并环绕文字的技巧
    将图片浮动到底部右侧并环绕文字的技巧
    在Web设计中围绕在Web设计中,有时可以将图像浮动到页面右下角,从而使文本围绕它缠绕。这可以在有效地展示图像的同时创建一个吸引人的视觉效果。 css位置在右下角,使用css float and clear properties: img { 浮点:对; ...
    编程 发布于2025-04-26
  • 找到最大计数时,如何解决mySQL中的“组函数\”错误的“无效使用”?
    找到最大计数时,如何解决mySQL中的“组函数\”错误的“无效使用”?
    如何在mySQL中使用mySql 检索最大计数,您可能会遇到一个问题,您可能会在尝试使用以下命令:理解错误正确找到由名称列分组的值的最大计数,请使用以下修改后的查询: 计数(*)为c 来自EMP1 按名称组 c desc订购 限制1 查询说明 select语句提取名称列和每个名称...
    编程 发布于2025-04-26
  • Python中嵌套函数与闭包的区别是什么
    Python中嵌套函数与闭包的区别是什么
    嵌套函数与python 在python中的嵌套函数不被考虑闭合,因为它们不符合以下要求:不访问局部范围scliables to incling scliables在封装范围外执行范围的局部范围。 make_printer(msg): DEF打印机(): 打印(味精) ...
    编程 发布于2025-04-26
  • 在C#中如何高效重复字符串字符用于缩进?
    在C#中如何高效重复字符串字符用于缩进?
    在基于项目的深度下固定字符串时,重复一个字符串以进行凹痕,很方便有效地有一种有效的方法来返回字符串重复指定的次数的字符串。使用指定的次数。 constructor 这将返回字符串“ -----”。 字符串凹痕= new String(' - ',depth); console.Wr...
    编程 发布于2025-04-26
  • 在PHP中如何高效检测空数组?
    在PHP中如何高效检测空数组?
    在PHP 中检查一个空数组可以通过各种方法在PHP中确定一个空数组。如果需要验证任何数组元素的存在,则PHP的松散键入允许对数组本身进行直接评估:一种更严格的方法涉及使用count()函数: if(count(count($ playerList)=== 0){ //列表为空。 } 对...
    编程 发布于2025-04-26
  • 在Ubuntu/linux上安装mysql-python时,如何修复\“ mysql_config \”错误?
    在Ubuntu/linux上安装mysql-python时,如何修复\“ mysql_config \”错误?
    mysql-python安装错误:“ mysql_config找不到”“ 由于缺少MySQL开发库而出现此错误。解决此问题,建议在Ubuntu上使用该分发的存储库。使用以下命令安装Python-MysqldB: sudo apt-get安装python-mysqldb sudo pip in...
    编程 发布于2025-04-26
  • 如何有效地转换PHP中的时区?
    如何有效地转换PHP中的时区?
    在PHP 利用dateTime对象和functions DateTime对象及其相应的功能别名为时区转换提供方便的方法。例如: //定义用户的时区 date_default_timezone_set('欧洲/伦敦'); //创建DateTime对象 $ dateTime = ne...
    编程 发布于2025-04-26
  • 为什么不````''{margin:0; }`始终删除CSS中的最高边距?
    为什么不````''{margin:0; }`始终删除CSS中的最高边距?
    在CSS 问题:不正确的代码: 全球范围将所有余量重置为零,如提供的代码所建议的,可能会导致意外的副作用。解决特定的保证金问题是更建议的。 例如,在提供的示例中,将以下代码添加到CSS中,将解决余量问题: body H1 { 保证金顶:-40px; } 此方法更精确,避免了由全局保证金重置引...
    编程 发布于2025-04-26
  • 如何从PHP中的数组中提取随机元素?
    如何从PHP中的数组中提取随机元素?
    从阵列中的随机选择,可以轻松从数组中获取随机项目。考虑以下数组:; 从此数组中检索一个随机项目,利用array_rand( array_rand()函数从数组返回一个随机键。通过将$项目数组索引使用此键,我们可以从数组中访问一个随机元素。这种方法为选择随机项目提供了一种直接且可靠的方法。
    编程 发布于2025-04-26
  • 如何在鼠标单击时编程选择DIV中的所有文本?
    如何在鼠标单击时编程选择DIV中的所有文本?
    在鼠标上选择div文本单击带有文本内容,用户如何使用单个鼠标单击单击div中的整个文本?这允许用户轻松拖放所选的文本或直接复制它。 在单个鼠标上单击的div元素中选择文本,您可以使用以下Javascript函数: function selecttext(canduterid){ if(do...
    编程 发布于2025-04-26
  • C++20 Consteval函数中模板参数能否依赖于函数参数?
    C++20 Consteval函数中模板参数能否依赖于函数参数?
    [ consteval函数和模板参数依赖于函数参数在C 17中,模板参数不能依赖一个函数参数,因为编译器仍然需要对非contexexpr futcoriations contim at contexpr function进行评估。 compile time。 C 20引入恒定函数,必须在编译时进行...
    编程 发布于2025-04-26
  • 在JavaScript中如何获取实际渲染的字体,当CSS字体属性未定义时?
    在JavaScript中如何获取实际渲染的字体,当CSS字体属性未定义时?
    Accessing Actual Rendered Font when Undefined in CSSWhen accessing the font properties of an element, the JavaScript object.style.fontFamily and objec...
    编程 发布于2025-04-26
  • 如何在Java字符串中有效替换多个子字符串?
    如何在Java字符串中有效替换多个子字符串?
    在java 中有效地替换多个substring,需要在需要替换一个字符串中的多个substring的情况下,很容易求助于重复应用字符串的刺激力量。 However, this can be inefficient for large strings or when working with nu...
    编程 发布于2025-04-26
  • 为什么我在Silverlight Linq查询中获得“无法找到查询模式的实现”错误?
    为什么我在Silverlight Linq查询中获得“无法找到查询模式的实现”错误?
    查询模式实现缺失:解决“无法找到”错误在Silverlight应用程序中,尝试使用LINQ建立LINQ连接以错误而实现的数据库”,无法找到查询模式的实现。”当省略LINQ名称空间或查询类型缺少IEnumerable 实现时,通常会发生此错误。 解决问题来验证该类型的质量是至关重要的。在此特定实例中...
    编程 发布于2025-04-26
  • 如何使用Python理解有效地创建字典?
    如何使用Python理解有效地创建字典?
    在python中,词典综合提供了一种生成新词典的简洁方法。尽管它们与列表综合相似,但存在一些显着差异。与问题所暗示的不同,您无法为钥匙创建字典理解。您必须明确指定键和值。 For example:d = {n: n**2 for n in range(5)}This creates a dicti...
    编程 发布于2025-04-26

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

Copyright© 2022 湘ICP备2022001581号-3