Heim  >  Artikel  >  Web-Frontend  >  riot.js learning [7] Skript zum Erstellen von Tags

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

黄舟
黄舟Original
2017-01-16 16:19:461400Durchsuche

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(&#39;标签名&#39;, &#39;模版内容&#39;, 初始化函数);

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

riot.tag(&#39;标签名&#39;, &#39;模版内容&#39;, &#39;样式&#39;, fn);
或:riot.tag(&#39;标签名&#39;, &#39;模版内容&#39;, &#39;属性&#39;, fn);
或:riot.tag(&#39;标签名&#39;, &#39;模版内容&#39;, &#39;样式&#39;, &#39;属性&#39;, 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).


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:riot.js lernt [6] Chowder 2Nächster Artikel:riot.js lernt [6] Chowder 2