RIOT.JS - 第一个应用程序

RIOT 通过构建自定义、可重复使用的 html 标签来工作。这些标签类似于 Web 组件，可跨页面和 Web 应用程序重复使用。

使用 RIOT 的步骤

• 在 html 页面中导入 riot.js。

<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>

• 开始一个脚本部分并将标签内容定义为 html。还可以包含脚本，我们将在本教程的后面部分看到。

var tagHtml = "<h1>Hello World!</h1>";

• 使用 riot.tag() 方法定义标签。将标签名称、messageTag 和包含标签内容的变量传递给它。

riot.tag("messageTag", tagHtml);

• 使用 riot.mount() 方法挂载标签。将标签名称 messageTag 传递给它。挂载过程会将 messageTag 挂载到 html 页面中的所有位置。挂载之前，应使用 riot.js 定义 MessageTag 标签。

riot.mount("messageTag");
</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>

这将产生以下结果 −