riot.js learning [7] Script to create tags

Create Tags

In Riot, we create custom tags through html code, but in fact, the final runnable custom tag will be compiled into a script.

In fact, a piece of custom tag code like this:

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

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

After compilation, it will become a truly executable script, like this:

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

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

});

riot. There are three required parameters for tag:

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

There are two optional parameters, namely style and attributes:

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

Style:

style content will be Place it in a style tag in the head.
So, the correct writing of the style is as follows:

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

The style needs to write the completed selector and associated style.

Attribute:

The content of the attribute will eventually be reflected in context.opts. The correct way to write the attribute is as follows:

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

Newbie’s Encounter

The official website says that attribute expressions must be in quotation marks, such as: value=”{ val }” instead of value={ val } [BUT, personally tested version 2.1, there is no difference, can anyone explain it? 】

Boolean attribute: __checked=”{ isTrue }” instead of checked={ isTrue }【This is an absolute must! 】

The src of the img tag is best written as riot-src to avoid wrong requests

Use riot-style instead of style, in order to be compatible with ie

The above is riot. js learning [7] The content of script creation tags. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!