📝 RIOT.JS教程

17篇技术文档
  RIOT.JS教程

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

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

  RIOT.JS-概述

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

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

  RIOT.JS-环境设置

📅  最后修改于: 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。...

  RIOT.JS-第一个应用程序

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

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

  RIOT.JS-标签

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

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

  RIOT.JS-表达式

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

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

  RIOT.JS-样式

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

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

  RIOT.JS-条件

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

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

  RIOT.JS-产量

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

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

  RIOT.JS-事件处理

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

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

  RIOT.JS-访问DOM

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

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

  RIOT.JS-循环

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

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

  RIOT.JS-Mixin

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

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

  RIOT.JS-可观察到

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

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

  RIOT.JS-快速指南

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

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