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>

这将产生以下结果 -

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

示例

messageTag.tag

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

index.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>

这将产生以下结果 -

打印页面

前一个

下一个