RIOT.JS - 環境設定

有兩種方法可以使用 RIOT js。

本地安裝 − 可以在本地機器上下載 RIOT 庫並將其包含在 HTML 程式碼中。
基於 CDN 的版本 − 可以直接從內容分發網路 (CDN) 將 RIOT 庫包含在 HTML 程式碼中。

本地安裝

轉到 https://v3.riotjs.vercel.app/download/ 下載最新可用版本。
現在將下載的 riot.min.js 檔案放入網站的目錄中，例如 /riotjs。

示例

現在，可以按如下方式在 HTML 檔案中包含 riotjs 庫 −

<!DOCTYPE html>
<html>
   <head>
      <script src = "/riotjs/riot.min.js"></script>
      <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>

這樣會產生以下結果 −

基於 CDN 的版本

可以從內容分發網路 (CDN) 直接將 RIOT js 庫包含在 HTML 程式碼中。Google 和 Microsoft 為最新版本提供內容分發。

注意 − 在整個教程中使用的是 CDNJS 版本的庫。

示例

現在，讓我們使用 CDNJS 中的 jQuery 庫重寫上面的示例。

<!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>

這樣會產生以下結果 −

列印頁面

上一個

下一個