内置指令

Regular 提供少量常用指令解决语法能力的不足, 你也尝试实现自己的指令

1. on-[eventName]

绑定事件。

Example

on-click={expression}

Arguments

事件系统完整指南请参考 入门:事件 章节

2. r-model

r-model 实现与表单类DOM元素的 双向绑定, 所以对应的表达式应该是 setable 的

Syntax

r-model={Expression}

Example

Type

• input、textarea:

  • 绑定类型: String

  <textarea  r-model={blog.title}>hahah</textarea>
  <input  r-model={input} />
  

• input:checkbox:

  • 绑定类型: Boolean

  绑定[checked]属性，注意需要是

  <input type="checkbox" checked  r-model={checked}> Check me out (value: {checked})
  

• input:radio:

  • 绑定类型: String

  可以绑定多个input:radio元素

  <input type="radio" value="option1" r-model={radio} >
  <input type="radio" value="option2" r-model={radio} >

• select:

  • 绑定类型: String

  绑定select的value值

  <!-- city = 1 -->
  <select r-model={city}>
    <option value="1" selected>Hangzhou</option>
    <option value="2">Ningbo</option>
    <option value="3">Guangzhou</option>
  </select>
  

双向绑定不总是 「银弹」，复杂的数据关系，你可以考虑使用value属性 + 表单事件监听的方式来解决

3. r-style

r-style={Expression} 是 style样式绑定的增强指令

Exmaple

new Regular({
  template: `
    <button class='btn' 
      on-click={left=left+10}
      r-style={ {left: left+'px'}}
      >left+10</button> left:  {left}`,
  data: {
    left: 1
  }
}).inject(document.body)

Arguments

⚠️如果已经有 style 插值了，那r-style的将会被覆盖

例如 <div style='left: {left}px' r-style='{left: left+10+"px"}'></div>

4. r-class

与r-style 类型， 不过 r-class作用于 class 属性

Example

<div r-class={{"active": page === "home"}}></div>

上例中，如果page === 'home',则active会被添加到div节点的class属性中

Description

⚠️与r-style类似，如果已经存在一个 class 插值了， 那r-class的定义会被覆盖

5. r-hide

控制节点的 display 样式

Exmaple

<div r-hide={page !== 'home'}></div>

如果page !== 'home'为真，则display:none样式会被添加到style中

6. r-html

即innerHTML插值，注意 XSS 攻击风险

Example

<textarea r-model='value'>Hello</textarea>
<h2>实时编辑</h2>
<div r-html='content' > </div>

本例双向绑定参考r-model

7. r-animation

动画系统请参考动画章节