RIOT通过构建自定义的,可重复使用的html标签来工作。这些标记类似于Web组件,并且可以在页面和Web应用程序之间重用。
使用RIOT的步骤
- 在html页面中导入riot.js。
<head> <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script> </head>
- 启动脚本部分,并将标签内容定义为html。也可以包含脚本,我们将在本教程的后面部分看到该脚本。
var tagHtml = "<h1>Hello World!</h1>";
- 使用riot.tag()方法定义一个标签。向其传递标签名称,messageTag和包含标签内容的变量。
riot.tag("messageTag", tagHtml);- 使用riot.mount()方法安装标签。将标签名称messageTag传递给它。挂载过程将messageTag挂载在html页面中的所有匹配项中。挂载之前,应使用riot.js定义MessageTag标签。
riot.mount("messageTag");
</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>作者:terry,如若转载,请注明出处:https://www.web176.com/riotjs/2207.html
支付宝
微信