RIOT.JS - 环境设置



有两种方法可以使用 RIOT js。

  • 本地安装 − 可以在本地机器上下载 RIOT 库并将其包含在 HTML 代码中。

  • 基于 CDN 的版本 − 可以直接从内容分发网络 (CDN) 将 RIOT 库包含在 HTML 代码中。

本地安装

示例

现在,可以按如下方式在 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>

这样会产生以下结果 −

广告