RIOT.JS-첫 번째 응용 프로그램

RIOT는 재사용 가능한 맞춤형 HTML 태그를 구축하여 작동합니다. 이러한 태그는 웹 구성 요소와 유사하며 페이지 및 웹 앱에서 재사용 할 수 있습니다.

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를 전달하십시오. 마운트 프로세스는 html 페이지의 모든 발생에 messageTag를 마운트합니다. MessageTag 태그는 마운트하기 전에 riot.js를 사용하여 정의해야합니다.

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>

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