riot.js学習[7]タグを作成するスクリプト

タグを作成する

Riot では、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.tag には 3 つの必須パラメータがあります:

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

2 つのオプションのパラメータがあります、つまりスタイルと属性:

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

Style:

スタイルの内容は、head の style タグに配置されます。
したがって、スタイルの正しい書き方は次のとおりです:

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});

初心者の落とし穴

公式 Web サイトには、属性表現は引用符で囲む必要があると記載されています。例: value={ val } の代わりに value="{ val }" [ただし、個人的にテストしたバージョン 2.1 では違いはありません。これを説明できる専門家はいますか? 】

ブール属性:checked={ isTrue } の代わりに __checked=”{ isTrue }” 【これは絶対必須です！ 】

imgタグのsrcは、誤ったリクエストを避けるために、riot-srcとして記述するのが最適です

IEと互換性を保つために、styleではなく、riot-styleを使用してください

上記がriot.jsの学習内容です[7] タグを作成するスクリプト、その他 関連コンテンツについては、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。