riot.js 학습 [7] 태그 생성 스크립트

태그 생성

라이엇에서는 HTML 코드를 통해 커스텀 태그를 생성하는데 실제로는 최종 실행 가능한 커스텀 태그가 스크립트로 컴파일됩니다.

사실 다음과 같은 사용자 정의 태그 코드:

<script type="riot/tag">
    <todo>        <h1>{ title }</h1>

        this.title = opts.title || "da宗熊";    </todo></script>

는 컴파일 후 다음과 같이 실제로 실행 가능한 스크립트가 됩니다.

riot.tag(&#39;todo&#39;, &#39;<h1>{ title }</h1>&#39;, function(opts) {

    this.title = opts.title || "da宗熊";

});

riot에는 세 가지가 필요합니다. 태그 매개변수:

riot.tag('标签名', '模版内容', 初始化函数);

스타일과 속성이라는 두 가지 선택적 매개변수가 있습니다.

riot.tag('标签名', '模版内容', '样式', fn);
或:riot.tag('标签名', '模版内容', '属性', fn);
或:riot.tag('标签名', '模版内容', '样式', '属性', fn);

스타일:

스타일의 내용은 다음과 같습니다. 스타일 태그에 배치하세요. 머리에.
따라서 스타일의 올바른 표기는 다음과 같습니다.

riot.tag(&#39;todo&#39;, &#39;<p class="title">{opts.title}</p>&#39;, &#39;.title{color:#ff0;}&#39;, function(opts){
    // todo something});

스타일은 완성된 선택자와 관련 스타일을 작성해야 합니다.

속성:

속성의 내용은 결국 context.opts에 반영됩니다. 속성을 작성하는 올바른 방법은 다음과 같습니다.

riot.tag(&#39;todo&#39;, &#39;<p>{ opts.title }</p>&#39;, &#39;title="da宗熊" age="26"&#39;, function(opts){
    // todo something});

초보자는 함정에 직면합니다

공식 웹 사이트에서는 속성 표현식이 value={ val } 대신 value=”{ val }”와 같이 따옴표로 묶여 있어야 한다고 나와 있습니다. [하지만 개인적으로 테스트한 버전 2.1에서는 차이가 없습니다. 누구든지 할 수 있습니까? 설명해? 】

부울 속성: selected={ isTrue } 대신 __checked="{ isTrue }" 【이것은 필수입니다! ]

img 태그의 src는 잘못된 요청을 피하기 위해 riot-src로 작성하는 것이 가장 좋습니다.

ie와 호환되도록 스타일 대신 riot 스타일을 사용하세요

위 내용은 riot.js 학습입니다. [7] 스크립트 생성 태그 내용에 대한 자세한 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!