riot.js learning [7] Skript zum Erstellen von Tags

Tags erstellen

In Riot erstellen wir benutzerdefinierte Tags über HTML-Code, aber tatsächlich wird das endgültige ausführbare benutzerdefinierte Tag in ein Skript kompiliert.

Tatsächlich ein Stück benutzerdefinierter Tag-Code wie dieser:

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

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

Nach der Kompilierung wird daraus ein wirklich ausführbares Skript, wie folgt:

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

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

});

riot.tag hat drei erforderliche Parameter:

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

Es gibt zwei optionale Parameter, nämlich Stil und Attribute:

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

Stil:

Der Inhalt des Stils wird in einem Style-Tag im Kopf platziert.
Die korrekte Schreibweise des Stils lautet also wie folgt:

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

Der Stil muss den vollständigen Selektor und den zugehörigen Stil schreiben.

Attribut: Der Inhalt des

-Attributs wird schließlich in context.opts widergespiegelt. Die korrekte Schreibweise des Attributs ist wie folgt:

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

Begegnung für Neulinge Fallstricke

Auf der offiziellen Website heißt es, dass Attributausdrücke in Anführungszeichen stehen müssen, wie zum Beispiel: value=“{ val }“ anstelle von value={ val } [ABER persönlich getestete Version 2.1, es gibt keinen Unterschied, kann es jemand erklären? 】

Boolesches Attribut: __checked="{ isTrue }" anstelle von geprüft={ isTrue }【Das ist ein absolutes Muss! 】

Der src des img-Tags wird am besten als riot-src geschrieben, um falsche Anfragen zu vermeiden

Verwenden Sie riot-style statt style für Kompatibilität mit ie

Das Obige ist riot.js learning [7] Der Inhalt von Skripterstellungs-Tags finden Sie auf der chinesischen PHP-Website (www.php.cn).