RIOT.JS-태그

RIOT는 재사용 가능한 맞춤형 HTML 태그를 구축하여 작동합니다. 이러한 태그는 웹 구성 요소와 유사하며 페이지 및 웹 앱에서 재사용 할 수 있습니다. HTML 페이지에 RIOT 프레임 워크를 포함하면 가져온 js가 riot 객체를 가리키는 riot 변수를 만듭니다. 이 객체는 태그 생성 및 마운트와 같이 RIOT.js와 상호 작용하는 데 필요한 기능을 포함합니다.

두 가지 방법으로 태그를 만들고 사용할 수 있습니다.

Inline HTML− riot.tag () 함수를 호출합니다. 이 함수는 태그 이름과 태그 정의를 사용하여 태그를 만듭니다. 태그 정의에는 HTML, JavaScript 및 CSS 등이 포함될 수 있습니다.
Seperate Tag file− 태그 파일에 태그 정의를 저장합니다. 이 태그 파일에는 태그를 생성하기위한 태그 정의가 포함되어 있습니다. 이 파일은 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>

이것은 다음 결과를 생성합니다-