RIOT.JS - 标签
RIOT 通过构建自定义、可重复使用的 html 标签来工作。这些标签类似于 Web 组件，可跨页面和 Web 应用程序重复使用。当您在 HTML 页面中包含 RIOT 框架时，导入的 js 会创建一个指向 riot 对象的 riot 变量。此对象包含与 RIOT.js 交互所需的函数，如创建和安装标签。
我们可以通过两种方式创建和使用标签。
内联 HTML − 通过调用 riot.tag() 函数。此函数采用标签名称和标签定义来创建标签。标签定义可以包含 HTML、JavaScript 和 CSS 等。
单独的标签文件 − 通过将标签定义存储在标签文件中。此标签文件包含用于创建标签的标签定义。需要导入此文件来代替 riot.tag() 调用。
<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>
这将产生以下结果 −
以下是外部文件标签的示例。
示例
messageTag.tag
<messageTag> <h1>Hello World!</h1> </messageTag>
index.htm
<!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>
这将产生以下结果 −
