RIOT.JS - 标签

RIOT 的工作原理是构建自定义、可重用的 html 标签。这些标签类似于 Web 组件，并且可以跨页面和 Web 应用程序重复使用。当您在 HTML 页面中包含 RIOT 框架时，导入的 js 会创建一个指向 riot 对象的 riot 变量。该对象包含与 RIOT.js 交互所需的功能，例如创建和安装标签。

我们可以通过两种方式创建和使用标签。

内联 HTML - 通过调用 riot.tag() 函数。该函数使用标签名称和标签定义来创建标签。标签定义可以包含 HTML、JavaScript 和 CSS 等。
单独的标签文件- 通过将标签定义存储在标签文件中。该标签文件包含用于创建标签的标签定义。需要导入此文件来代替 riot.tag() 调用。

<script src = "/riotjs/src/messageTag.tag" type = "riot/tag"></script<

以下是内联标签的示例。

例子

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

这将产生以下结果 -

以下是外部文件标签的示例。

例子

消息标签.tag

<messageTag>
   <h1>Hello World!</h1>
</messageTag>

索引.htm

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script src = "messageTag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("messageTag");
      </script>
   </body>
</html>

这将产生以下结果 -