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>

這將產生以下結果 −

列印頁面