📅  最后修改于: 2020-10-20 04:40:24        🧑  作者: Mango

RIOT.js是一个非常小巧的基于Web组件的UI库，用于开发Web应用程序。它结合了React.JS和Polymer的优点以及非常简洁的实现和易于学习和使用的简单构造。听众本教程是为希望以简单的方式学习RIOT.JS及其编程概念基础的软件程序员而设计的。本教程将通过适当的示例使您对RIOT.JS的各个组件有足够的了解。先决条件在继续本教程之前，您应该对HTML，CSS，JavaScript和文档...

📅  最后修改于: 2020-10-20 04:40:38        🧑  作者: Mango

RIOT.js是一个非常小巧的基于Web组件的UI库，用于开发Web应用程序。它结合了React.JS和Polymer的优点以及非常简洁的实现和易于学习和使用的简单构造。压缩后的版本接近10KB。以下是RIOT.js的主要功能表达式绑定DOM更新和重排期间的有效负载非常小。更改从父标记向下传播到子标记/控件。使用预编译的表达式并将其缓存以提高性能。在生命周期事件中提供良好的控制。遵循标准没有专有的...

📅  最后修改于: 2020-10-20 04:40:54        🧑  作者: Mango

有两种使用RIOT js的方法。本地安装-您可以在本地计算机上下载RIOT库，并将其包含在HTML代码中。基于CDN的版本-您可以直接从Content Delivery Network（CDN）将RIOT库包含到HTML代码中。本地安装转到https://riot.js.org/download/下载可用的最新版本。现在，将下载的riot.min.js文件放在您网站的目录中，例如/ riotjs。...

📅  最后修改于: 2020-10-20 04:41:10        🧑  作者: Mango

RIOT通过构建自定义，可重复使用的html标签来工作。这些标记类似于Web组件，并且可以在页面和Web应用程序之间重用。使用RIOT的步骤在html页面中导入riot.js。启动脚本部分，并将标签内容定义为html。也可以包含脚本，我们将在本教程的后面部分看到该脚本。使用riot.tag（）方法定义一个标签。向其传递标签名称，messageTag和包含标签内容的变量。使用riot.mount（）...

📅  最后修改于: 2020-10-20 04:41:26        🧑  作者: Mango

RIOT通过构建自定义，可重复使用的html标签来工作。这些标记类似于Web组件，并且可以在页面和Web应用程序之间重用。当您在HTML页面中包含RIOT框架时，导入的js将创建一个指向防暴对象的防暴变量。该对象包含与RIOT.js交互所需的功能，例如创建和安装标签。我们可以通过两种方式创建和使用标签。内联HTML-通过调用riot.tag（）函数。此函数使用标签名称和标签定义来创建标签。标签定义...

📅  最后修改于: 2020-10-20 04:41:41        🧑  作者: Mango

RIOT js使用{}定义表达式。 RIOT js允许以下类型的表达式。简单表达式-定义变量并在标签内使用。评估表达式-在操作中使用时评估变量。从Options对象获取值-获取通过属性传递给标签的值。例以下是上述概念的完整示例。customTag.tag索引这将产生以下结果-...

📅  最后修改于: 2020-10-20 04:41:54        🧑  作者: Mango

RIOT js标记可以具有自己的样式，我们可以在标记内定义样式，这只会影响标记内的内容。我们还可以在标签中使用脚本来设置样式类。以下是如何实现RIOT标签样式的语法。custom1Tag.tag索引这将产生以下结果-...

📅  最后修改于: 2020-10-20 04:42:09        🧑  作者: Mango

条件语句是用于显示/隐藏RIOT标签元素的构造。以下是RIOT支持的三个条件-如果-根据传递的值添加/删除元素。show−如果传递true，则使用style =“display：””显示元素。hide-如果传递true，则使用style =“display：’none’”隐藏元素。例以下是完整的示例。custom2Tag.tagcustom2.htm这将产生以下结果-...

📅  最后修改于: 2020-10-20 04:42:25        🧑  作者: Mango

Yield是一种将外部html内容放入RIOT标签的机制。有多种产生收益的方法。简单收益-如果我们要替换标签中的单个占位符。然后使用这种机制。多重收益-如果我们要替换标签中的多个占位符。然后使用这种机制。例以下是完整的示例。custom3Tag.tagcustom4Tag.tagcustom3.htm这将产生以下结果-...

📅  最后修改于: 2020-10-20 04:42:40        🧑  作者: Mango

我们可以使用类似于使用refs对象访问HTML元素的方式，将事件附加到HTML元素。第一步，我们将ref属性添加到DOM元素，并在标签的脚本块中使用this.ref对其进行访问。附加ref-将ref属性添加到DOM元素。使用refs对象-现在在挂载事件中使用refs对象。当RIOT装入自定义标签并填充refs对象时，将引发此事件。例以下是完整的示例。custom5Tag.tagcustom5.ht...

📅  最后修改于: 2020-10-20 04:42:55        🧑  作者: Mango

我们可以使用refs对象访问HTML元素。第一步，我们将ref属性添加到DOM元素，并在标签的脚本块中使用this.ref对其进行访问。附加ref-将ref属性添加到DOM元素。使用refs对象-现在在挂载事件中使用refs对象。当RIOT装入自定义标签并填充refs对象时，将引发此事件。例以下是完整的示例。custom6Tag.tagcustom6.htm这将产生以下结果-...

📅  最后修改于: 2020-10-20 04:43:09        🧑  作者: Mango

我们可以遍历RIOT的原语或对象数组，并随时随地创建/更新html元素。使用“每个”构造我们可以实现它。创建数组-创建对象数组。添加每个属性-现在使用“每个”属性。迭代对象数组-使用对象属性迭代数组。例以下是完整的示例。custom7Tag.tagcustom7.htm这将产生以下结果-...

📅  最后修改于: 2020-10-20 04:43:26        🧑  作者: Mango

通过Mixin，我们可以在标签之间共享通用功能。 Mixin可以是函数，类或对象。考虑每个标签应使用的身份验证服务的情况。定义Mixin-在调用mount（）之前使用riot.mixin（）方法定义mixin。初始化混合-在每个标签中初始化混合。使用mixin-初始化后，可以在标记内使用mixin。例以下是完整的示例。custom8Tag.tagcustom9Tag.tagcustom8.htm这...

📅  最后修改于: 2020-10-20 04:43:42        🧑  作者: Mango

Observables机制允许RIOT将事件从一个标签发送到另一个标签。遵循以下API对于理解RIOT可观察性很重要。riot.observable（element）-添加对给定对象元素的Observer支持，或者如果参数为空，则创建并返回一个新的observable实例。此后，该对象便能够触发并监听事件。element.trigger（events）-执行所有侦听给定事件的回调函数。elemen...

📅  最后修改于: 2020-10-20 04:45:25        🧑  作者: Mango

RIOT.JS-概述RIOT.js是一个非常小巧的基于Web组件的UI库，用于开发Web应用程序。它结合了React.JS和Polymer的优点以及非常简洁的实现和易于学习和使用的简单构造。压缩后的版本接近10KB。以下是RIOT.js的主要功能表达式绑定DOM更新和重排期间的有效负载非常小。更改从父标记向下传播到子标记/控件。使用预编译的表达式并将其缓存以提高性能。在生命周期事件中提供良好的控制...