riot.정보
Riot.js 소개
Riot.js는 Javascript의 라이트 UI 라이브러리입니다.
사용자 정의 태그에 HTML, JS, CSS 등을 기술하고 이를 조합하여 페이지를 만들 수 있습니다.
일반적인 자바스크립트와 마찬가지로 <script> 라벨로 읽습니다.
Riot.js로 node를 원합니다.js 등 사전 준비가 필요합니다.
기본형 <html>
<head>
<meta charset="utf-8">
<script src='https://cdnjs.cloudflare.com/ajax/libs/riot/2.3.18/riot+compiler.js'></script>
<title>riot.js test</title>
</head>
<body>
<!-- タグを展開する場所 -->
<item name='Intro' content='おはよう' ></item>
<!-- タグの定義 -->
<script type="riot/tag">
<item>
<h1>{name}</h1>
<p>{content}</p>
this.name = opts.name;
this.content = opts.content;
</item>
</script>
<script>
// マウント
riot.mount('*');
</script>
</body>
</html>
액세스하면 다음과 같이 표시됩니다.
아이바디에 라벨이 추가된 걸 확인했어요.
Each <body>
<test></test>
<script type="riot/tag">
<test>
<div each='{item_list}'>
<h3>{name}</h1>
<p>{content}</p>
</div>
this.item_list = [
{name: '日本語', content: 'おはよう'},
{name: 'English', content: 'Hello'},
]
</test>
</script>
<script>
riot.mount('*');
</script>
</body>
</html>
액세스하면 다음과 같이 표시됩니다.
아이바디에 라벨이 추가된 걸 확인했어요.
이벤트
단추를 눌렀을 때, 어떤 처리를 하려면, onclick에서 실행하고 싶은 함수를 설정하십시오!<body>
<test></test>
<script type="riot/tag">
<test>
<button onclick='{clickEvent}'>click</button>
</test>
this.clickEvent= function() {
alert("CLICK!!!!");
}
</script>
<script>
riot.mount('*');
</script>
</body>
총결산
처음 사용하기 전에 필요한 준비는 번거롭지만 사용하기에 편리하고 개인적으로 좋아요!
오늘 기사는 여기까지!
Reference
이 문제에 관하여(riot.정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/dq-jiyoung-lee/items/5bb17754dcfaf0bb0fee
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html>
<head>
<meta charset="utf-8">
<script src='https://cdnjs.cloudflare.com/ajax/libs/riot/2.3.18/riot+compiler.js'></script>
<title>riot.js test</title>
</head>
<body>
<!-- タグを展開する場所 -->
<item name='Intro' content='おはよう' ></item>
<!-- タグの定義 -->
<script type="riot/tag">
<item>
<h1>{name}</h1>
<p>{content}</p>
this.name = opts.name;
this.content = opts.content;
</item>
</script>
<script>
// マウント
riot.mount('*');
</script>
</body>
</html>
아이바디에 라벨이 추가된 걸 확인했어요.
Each <body>
<test></test>
<script type="riot/tag">
<test>
<div each='{item_list}'>
<h3>{name}</h1>
<p>{content}</p>
</div>
this.item_list = [
{name: '日本語', content: 'おはよう'},
{name: 'English', content: 'Hello'},
]
</test>
</script>
<script>
riot.mount('*');
</script>
</body>
</html>
액세스하면 다음과 같이 표시됩니다.
아이바디에 라벨이 추가된 걸 확인했어요.
이벤트
단추를 눌렀을 때, 어떤 처리를 하려면, onclick에서 실행하고 싶은 함수를 설정하십시오!<body>
<test></test>
<script type="riot/tag">
<test>
<button onclick='{clickEvent}'>click</button>
</test>
this.clickEvent= function() {
alert("CLICK!!!!");
}
</script>
<script>
riot.mount('*');
</script>
</body>
총결산
처음 사용하기 전에 필요한 준비는 번거롭지만 사용하기에 편리하고 개인적으로 좋아요!
오늘 기사는 여기까지!
Reference
이 문제에 관하여(riot.정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/dq-jiyoung-lee/items/5bb17754dcfaf0bb0fee
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<body>
<test></test>
<script type="riot/tag">
<test>
<div each='{item_list}'>
<h3>{name}</h1>
<p>{content}</p>
</div>
this.item_list = [
{name: '日本語', content: 'おはよう'},
{name: 'English', content: 'Hello'},
]
</test>
</script>
<script>
riot.mount('*');
</script>
</body>
</html>
단추를 눌렀을 때, 어떤 처리를 하려면, onclick에서 실행하고 싶은 함수를 설정하십시오!
<body>
<test></test>
<script type="riot/tag">
<test>
<button onclick='{clickEvent}'>click</button>
</test>
this.clickEvent= function() {
alert("CLICK!!!!");
}
</script>
<script>
riot.mount('*');
</script>
</body>
총결산
처음 사용하기 전에 필요한 준비는 번거롭지만 사용하기에 편리하고 개인적으로 좋아요!
오늘 기사는 여기까지!
Reference
이 문제에 관하여(riot.정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/dq-jiyoung-lee/items/5bb17754dcfaf0bb0fee
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(riot.정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/dq-jiyoung-lee/items/5bb17754dcfaf0bb0fee텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
