ホームページ > 記事 > ウェブフロントエンド > riot.js学習[7]タグを作成するスクリプト
タグを作成する
Riot では、HTML コードを通じてカスタム タグを作成しますが、実際には、最終的に実行可能なカスタム タグはスクリプトにコンパイルされます。
実際、カスタム タグ コードは次のようなものです:
<script type="riot/tag"> <todo> <h1>{ title }</h1> this.title = opts.title || "da宗熊"; </todo></script>
コンパイル後、次のような実際に実行可能なスクリプトになります:
riot.tag('todo', '<h1>{ title }</h1>', 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('todo', '<p class="title">{opts.title}</p>', '.title{color:#ff0;}', function(opts){ // todo something});
スタイルは、完成したセレクターと関連するスタイルを記述する必要があります。
属性:
属性の内容は最終的に context.opts に反映されます。属性の正しい書き方は次のとおりです:
riot.tag('todo', '<p>{ opts.title }</p>', 'title="da宗熊" age="26"', 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 サイト (www.php.cn) に注目してください。