Riot.더듬다
9390 단어 HTMLJavaScriptriot.jsCSS
개시하다
Riot.js를 배우기 위해서 Live demo의 코드를 참고했습니다.
Riot.무엇이 js입니까?
Riot 공식 페이지에서
A REACT- LIKE, 2.5KB USER INTERFACE LIBRARY
리액트의 초경량 UI 프로그램 라이브러리를 의식적으로 제작한 것으로, 화면 부분을 특수화하는 것이 특징이다.Vue.js와 동류다.Rio t 1.0은'초경량'이라는 점에서도 한동안 관심을 끌었다.
그 리오는 2.0으로 생각을 바꾸어 JSX의 사전 컴파일링 구조를 도입하여 React와 Polymer가 좋은 곳을 취한 듯한 느낌을 준다.그러나 다음과 같은 큰 차이가 있다.
React: JavaScript(JSX)에서 HTML로 쓰기
HTML에서 JavaScript 또는 CSS 쓰기
스크립트 크기는 24분의 1입니다.Rio는 React가 100KB를 초과하는 것보다 낫다.gzip 압축 후 2.5KB.그나저나 리오의 개발자 MUT는 기존 사이트에서 활용한 포럼 도구를 제작하는 팀이다.(디스쿠스 같은 놈)
인용자 여기.
Live demo 코드 이해
샘플 코드
index.html<html>
<head>
<title>Hello Riot.</title>
</head>
<body>
<sample></sample>
<script type="riot/tag" src="sample.tag"></script>
<script src="https://cdn.jsdelivr.net/riot/3.0/riot+compiler.min.js"></script>
<script>riot.mount('sample')</script>
</body>
</html>
sample.tag<sample>
<h3>{ message }</h3>
<ul>
<li each={ techs }>{ name }</li>
</ul>
<script>
this.message = 'Hello, Riot!'
this.techs = [
{ name: 'HTML' },
{ name: 'JavaScript' },
{ name: 'CSS' }
]
</script>
<style>
:scope { font-size: 2rem }
h3 { color: #444 }
ul { color: #999 }
</style>
</sample>
나타내다
샘플 코드 정보
Riot.js에서 부품 (사용자 정의 탭) 을 조합해서 페이지를 만듭니다.
샘플 코드에서 index.구문을 사용합니다.
index.html
1. Sample 태그 구성<sample></sample>
2. Sample 태그 읽기<script type="riot/tag" src="sample.tag"></script>
3. (브라우저에서) Sample 태그 컴파일<script src="https://cdn.jsdelivr.net/riot/3.0/riot+compiler.min.js"></script>
4. Sample 태그 마운트<script>riot.mount('sample')</script>
또한 페이지에 모든 사용자 정의 태그를 마운트할 수 있습니다.<script>riot.mount('*')</script>
sample.tag
다음은 Sample.나는 영화를 보러 간다.
1. 태그 정의<sample>
~
</sample>
2.html<h3>{ message }</h3>
<ul>
<li each={ techs }>{ name }</li>
</ul>
{} js에서 정의한 변수를 참조하십시오.
each가 테크놀로지의 내용을 회전하고 있습니다.
3.script<script>
this.message = 'Hello, Riot!'
this.techs = [
{ name: 'HTML' },
{ name: 'JavaScript' },
{ name: 'CSS' }
]
</script>
4.style<style>
:scope { font-size: 2rem }
h3 { color: #444 }
ul { color: #999 }
</style>
사용Scoped CSS.
기타
Riot 공식 페이지에서
A REACT- LIKE, 2.5KB USER INTERFACE LIBRARY
리액트의 초경량 UI 프로그램 라이브러리를 의식적으로 제작한 것으로, 화면 부분을 특수화하는 것이 특징이다.Vue.js와 동류다.Rio t 1.0은'초경량'이라는 점에서도 한동안 관심을 끌었다.
그 리오는 2.0으로 생각을 바꾸어 JSX의 사전 컴파일링 구조를 도입하여 React와 Polymer가 좋은 곳을 취한 듯한 느낌을 준다.그러나 다음과 같은 큰 차이가 있다.
React: JavaScript(JSX)에서 HTML로 쓰기
HTML에서 JavaScript 또는 CSS 쓰기
스크립트 크기는 24분의 1입니다.Rio는 React가 100KB를 초과하는 것보다 낫다.gzip 압축 후 2.5KB.그나저나 리오의 개발자 MUT는 기존 사이트에서 활용한 포럼 도구를 제작하는 팀이다.(디스쿠스 같은 놈)
인용자 여기.
Live demo 코드 이해
샘플 코드
index.html<html>
<head>
<title>Hello Riot.</title>
</head>
<body>
<sample></sample>
<script type="riot/tag" src="sample.tag"></script>
<script src="https://cdn.jsdelivr.net/riot/3.0/riot+compiler.min.js"></script>
<script>riot.mount('sample')</script>
</body>
</html>
sample.tag<sample>
<h3>{ message }</h3>
<ul>
<li each={ techs }>{ name }</li>
</ul>
<script>
this.message = 'Hello, Riot!'
this.techs = [
{ name: 'HTML' },
{ name: 'JavaScript' },
{ name: 'CSS' }
]
</script>
<style>
:scope { font-size: 2rem }
h3 { color: #444 }
ul { color: #999 }
</style>
</sample>
나타내다
샘플 코드 정보
Riot.js에서 부품 (사용자 정의 탭) 을 조합해서 페이지를 만듭니다.
샘플 코드에서 index.구문을 사용합니다.
index.html
1. Sample 태그 구성<sample></sample>
2. Sample 태그 읽기<script type="riot/tag" src="sample.tag"></script>
3. (브라우저에서) Sample 태그 컴파일<script src="https://cdn.jsdelivr.net/riot/3.0/riot+compiler.min.js"></script>
4. Sample 태그 마운트<script>riot.mount('sample')</script>
또한 페이지에 모든 사용자 정의 태그를 마운트할 수 있습니다.<script>riot.mount('*')</script>
sample.tag
다음은 Sample.나는 영화를 보러 간다.
1. 태그 정의<sample>
~
</sample>
2.html<h3>{ message }</h3>
<ul>
<li each={ techs }>{ name }</li>
</ul>
{} js에서 정의한 변수를 참조하십시오.
each가 테크놀로지의 내용을 회전하고 있습니다.
3.script<script>
this.message = 'Hello, Riot!'
this.techs = [
{ name: 'HTML' },
{ name: 'JavaScript' },
{ name: 'CSS' }
]
</script>
4.style<style>
:scope { font-size: 2rem }
h3 { color: #444 }
ul { color: #999 }
</style>
사용Scoped CSS.
기타
<html>
<head>
<title>Hello Riot.</title>
</head>
<body>
<sample></sample>
<script type="riot/tag" src="sample.tag"></script>
<script src="https://cdn.jsdelivr.net/riot/3.0/riot+compiler.min.js"></script>
<script>riot.mount('sample')</script>
</body>
</html>
<sample>
<h3>{ message }</h3>
<ul>
<li each={ techs }>{ name }</li>
</ul>
<script>
this.message = 'Hello, Riot!'
this.techs = [
{ name: 'HTML' },
{ name: 'JavaScript' },
{ name: 'CSS' }
]
</script>
<style>
:scope { font-size: 2rem }
h3 { color: #444 }
ul { color: #999 }
</style>
</sample>
<sample></sample>
<script type="riot/tag" src="sample.tag"></script>
<script src="https://cdn.jsdelivr.net/riot/3.0/riot+compiler.min.js"></script>
<script>riot.mount('sample')</script>
<script>riot.mount('*')</script>
<sample>
~
</sample>
<h3>{ message }</h3>
<ul>
<li each={ techs }>{ name }</li>
</ul>
<script>
this.message = 'Hello, Riot!'
this.techs = [
{ name: 'HTML' },
{ name: 'JavaScript' },
{ name: 'CSS' }
]
</script>
<style>
:scope { font-size: 2rem }
h3 { color: #444 }
ul { color: #999 }
</style>
Reference
이 문제에 관하여(Riot.더듬다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/residenti/items/5f5a41d6d2a9d6fa43db텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
