riot.js 학습 [5] 차우더 1-JS 튜토리얼-php.cn

riot.js 학습 [5] 차우더 1

黄舟

풀어 주다： 2017-01-16 16:14:04

원래의

1045명이 탐색했습니다.

클래스 약어

Riot는 클래스 이름을 생성하는 간단한 구문을 제공합니다. 예:

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

로그인 후 복사

참 값만 생성되고 거짓 값은 무시됩니다. 생성된 결과는 다음과 같습니다:

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

로그인 후 복사

물론, 적절한 장소를 찾으면 다른 속성에도 이 기능을 사용할 수 있습니다~

부정행위 예를 들어주세요:

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

로그인 후 복사

물론 생성된 것도 사기입니다:

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

로그인 후 복사

괄호 이스케이프

이스케이프 후 "{" 및 "}"가 출력될 수 있습니다.

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

로그인 후 복사

는 다음을 출력합니다:

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

로그인 후 복사

사용자 정의 괄호

다음과 같이 읽기 값에 대한 괄호를 자유롭게 정의할 수 있습니다.

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

로그인 후 복사

The space in the the space 중간, 표현식 값이 위치하는 곳입니다

Unescaped HTML 바인딩

Riot의 표현식은 HTML이 아닌 텍스트 값만 바인딩할 수 있습니다. 그러나 사용자 정의 태그를 통해 HTML 콘텐츠를 바인딩할 수 있습니다. 예:

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

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

로그인 후 복사

위의 사용자 정의 태그가 있으면 다른 태그에 HTML 콘텐츠를 삽입할 수 있습니다.

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

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

로그인 후 복사

raw 태그에 todo 태그가 내장되어 있는 것을 볼 수 있습니다. 이것은 Riot에서 매우 흥미로운 것입니다.

중첩 HTML

Riot에는 라는 매우 중요한 태그가 있습니다. >사용 중인 태그에 포함된 HTML을 태그 정의 내에 넣을 수 있습니다.

예를 들어 태그 정의가 있습니다:

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

로그인 후 복사

이렇게 사용하면:

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

로그인 후 복사

결과는 다음과 같습니다.

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

로그인 후 복사

이름이나 ID가 있는 요소

如果自定义标签内，元素带有 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>

로그인 후 복사

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

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

로그인 후 복사

事件处理

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

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

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

        }
    </login>

로그인 후 복사

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

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

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

로그인 후 복사

如果条件成立，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）！