riot.js lernt [5] Chowder 1-js-Tutorial-php.cn

riot.js lernt [5] Chowder 1

黄舟

Freigeben： 2017-01-16 16:14:04

Original

1044 Leute haben es durchsucht

Klassenabkürzung

Riot bietet eine einfache Syntax zum Generieren von Klassennamen, zum Beispiel:

[code]<p class={ foo: true, bar: 0, baz: new Date(), zorro: &#39;a value&#39; }></p>

Nach dem Login kopieren

Nur wahre Werte werden generiert, falsche Werte werden ignoriert. Die generierten Ergebnisse lauten wie folgt:

[code]<p class="foo baz zorro"></p>

Nach dem Login kopieren

Natürlich können Sie diese Funktion auch für andere Attribute verwenden, wenn Sie einen geeigneten Ort finden~

Geben Sie mir ein Betrugsbeispiel:

[code]<h1 xxx={a: true, b: 1}></h1>

Nach dem Login kopieren

Natürlich wird es generiert, aber es ist auch ein Betrug:

[code]<h1 xxx="a b"></h1>

Nach dem Login kopieren

Klammer-Escape

Nach dem Escape können Sie „{“ und „ }" .

[code]\{ 这里的表达式，将不会执行 \}

Nach dem Login kopieren

gibt Folgendes aus:

[code]{ 这里的表达式，将不会执行 }

Nach dem Login kopieren

Benutzerdefinierte Klammern

Wir können Klammern für Lesewerte frei definieren, genau wie:

[code]riot.settings.brackets = &#39;${ }&#39;
riot.settings.brackets = &#39;{{ }}&#39;

Nach dem Login kopieren

Im Leerzeichen in der Mitte wird der Ausdruckswert platziert

HTML ohne Escapezeichen binden

Der Ausdruck von Riot kann nur andere Textwerte als HTML binden. Sie können HTML-Inhalte jedoch über benutzerdefinierte Tags binden. Zum Beispiel:

[code]    <raw>
        <span></span>

        // 把这个标签的HTML，设为参数的content值
        this.root.innerHTML = opts.content;
    </raw>

Nach dem Login kopieren

Mit den oben genannten benutzerdefinierten Tags können Sie HTML-Inhalte in andere Tags einbetten:

[code]    <todo>
        <p>
            这里有一些HTML的内容——
            <raw content="{ html }"></raw>
        </p>

        this.html = &#39;我叫:<strong>da宗熊</strong>&#39;;
    </todo>

Nach dem Login kopieren

Sie können sehen, dass das Todo-Tag in das Raw-Tag eingebettet ist. Das ist eine sehr interessante Sache bei Riot.

Verschachteltes HTML

In Riot gibt es ein sehr wichtiges Tag namens >Es kann den im Tag eingebetteten HTML-Code innerhalb der Tag-Definition verwenden.

Zum Beispiel gibt es eine Tag-Definition:

Bei Verwendung wie folgt:

[code]    <my-tag>
        <!-- 这里使用了yield标签 -->
        <p>Hello <yield/></p>
        this.text = &#39;world&#39;
    </my-tag>

Nach dem Login kopieren

Das Ergebnis ist wie folgt:

[code]    <my-tag>
        <!-- 这部分内容，会替换掉<yield />标签 -->
        <b>{ text }</b>
    </my-tag>

Nach dem Login kopieren

Element mit Name oder ID

[code]<my-tag>
    <p>Hello <b>world</b></p>
</my-tag>

Nach dem Login kopieren

如果自定义标签内，元素带有 id 或 name ，这些元素，会自动绑定到标签内容的 context 上，我们可以很简单的通过javascript，获取到这些元素进行操作：

[code]    <login>
        <form id="login" onsubmit={ submit }>
            <input name="username">
            <input name="password">
            <button name="submit">
        </form>

        // 上面的元素，已经绑定到this对象中了
        var form = this.login,
            username = this.username.value,
            password = this.password.value,
            button = this.submit

    </login>

Nach dem Login kopieren

当然咯，这些带有 name 或 id 的元素，也可以在标签的HTML内使用，例如：

[code]<div>{ username.value }</div>

Nach dem Login kopieren

事件处理

Riot标签的事件定义，可以通过简单的方式进行绑定:

[code]    <login>
        <form onsubmit={ submit }></form>

        // 表单的提交，会运行下面的submit方法
        submit(e) {

        }
    </login>

Nach dem Login kopieren

如果属性以“on”开头，例如： onclick, onsubmit, oninput等等，它们都接受一个函数，来处理对应的事件。

这种函数，甚至可以根据表达式的值，动态的进行绑定:

[code]<form onsubmit={ condition ? mA : mB}></form>

Nach dem Login kopieren

如果条件成立，onsubmit执行mA，否则执行mB。

在Roit中，绑定的所有事件处理的函数，它们的默认事件，都被自动取消掉，除非你绑定的元素，是checkbox或者radio。

这意味着， e.preventDefault() 已经替你自动执行了，因为我们经常那么干~，so，Riot已经帮我们自动取消了默认事件。

当然，我们可以在事件处理函数中，return true；来让默认事件正常触发。

Event对象

在所有的事件处理函数中，第一个参数，就是event对象。每个event对象，含有下面几个属性：

e.currentTarget 指向事件触发的那个元素

e.target 事件起源的元素，呃，跟e.currentTarget一样

e.which 键盘事件中的按键值【key code】

e.item 当前each循环中，元素绑定的this对象

以上就是riot.js学习【五】杂烩1的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！