RIOT.JS教程:环境设置

有两种使用RIOT js的方法。

  • 本地安装-您可以在本地计算机上下载RIOT库,并将其包含在HTML代码中。
  • 基于CDN的版本-您可以直接从Content Delivery Network(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>

这将产生以下结果:

Hello World!

基于CDN的版本

您可以直接从Content Delivery Network(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>

这将产生以下结果:

Hello World!

作者:terry,如若转载,请注明出处:https://www.web176.com/riotjs/2210.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年3月31日 下午4:02
下一篇 2021年3月31日 下午4:05

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注