RIOT通过构建自定义的,可重复使用的html标签来工作。这些标记类似于Web组件,并且可以在页面和Web应用程序之间重用。当您在HTML页面中包含RIOT框架时,导入的js将创建一个指向防暴对象的防暴变量。该对象包含与RIOT.js交互所需的功能,例如创建和安装标签。
我们可以通过两种方式创建和使用标签。
<script src = "/riotjs/src/messageTag.tag" type = "riot/tag"></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>
这将产生以下结果:
Hello World!
以下是外部文件标签的示例。
<messageTag> <h1>Hello World!</h1> </messageTag>
<!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 src = "messageTag.tag" type = "riot/tag"></script> <script> riot.mount("messageTag"); </script> </body> </html>
这将产生以下结果:
Hello World!