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。安装过程将在 html 页面中所有出现的 messageTag 中安装该 messageTag。MessageTag 标签应在安装之前使用 riot.js 定义。

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>

这将产生以下结果 -