RIOT.JS - 环境设置
有两种方法可以使用 RIOT js。
本地安装 − 可以在本地机器上下载 RIOT 库并将其包含在 HTML 代码中。
基于 CDN 的版本 − 可以直接从内容分发网络 (CDN) 将 RIOT 库包含在 HTML 代码中。
本地安装
转到 https://v3.riotjs.vercel.app/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>
这样会产生以下结果 −
广告