Riot.더듬다

개시하다


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.

기타

  • Rio로 사용자 정의 태그 만드는 방법
  • Riot.시작 및 comple precompile 대화
  • 크롬에 있는 리오.js를 실행할 때 Javascript 콘솔에는 "Fetching scripts with invalid type/language attributes is deprecated..."라고 적혀 있습니다.시의 대응 방법
  • [해설 첨부] 크롬으로 로컬 파일에서 XMLHttpRequest를 하는 방법
  • 좋은 웹페이지 즐겨찾기