RIOT.JS - 环境设置

有两种使用 RIOT js 的方法。

本地安装- 您可以在本地计算机上下载 RIOT 库并将其包含在 HTML 代码中。
基于 CDN 的版本- 您可以直接从内容分发网络 (CDN) 将 RIOT 库包含到您的 HTML 代码中。

本地安装

转至https://riot.js.org/download/下载可用的最新版本。
现在将下载的riot.min.js文件放入您网站的目录中，例如 /riotjs。

例子

现在您可以在 HTML 文件中包含riotjs库，如下所示 -

<!DOCTYPE html>
<html>
   <head>
      <script src = "/riotjs/riot.min.js"></script>
      <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>

这将产生以下结果 -

基于CDN的版本

您可以直接从内容分发网络 (CDN) 将 RIOT js 库包含到您的 HTML 代码中。Google 和 Microsoft 提供最新版本的内容交付。

注意- 在本教程中我们使用 CDNJS 版本的库。

例子

现在让我们使用 CDNJS 的 jQuery 库重写上面的示例。

<!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>

这将产生以下结果 -