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>

这将产生以下结果 −

打印页面