Categories: RIOT.JS教程

RIOT.JS教程:第一个应用程序

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

这个人很懒,什么都没有留下~

Share
Published by
terry

Recent Posts

聊聊vue3中的defineProps

在Vue 3中,defineP…

1 周 ago

在 Chrome 中删除、允许和管理 Cookie

您可以选择删除现有 Cooki…

2 周 ago

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

3 周 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

4 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

4 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

1 月 ago