JSX 语法

内容

render() {
  return <p>hello</p>
}

具有动态内容:

render() {
  return <p>hello { this.message }</p>
}

单标签:

render() {
  return <input />
}

使用组件:

import MyComponent from './my-component'

export default {
  render() {
    return <MyComponent>hello</MyComponent>
  },
}

属性

render() {
  return <input type="email" />
}

使用动态绑定:

render() {
  return <input
    type="email"
    placeholder={this.placeholderText}
  />
}

绑定事件:

render() {
  return <input onInput={this.handleInput} />
}

动态绑定事件:

render() {
  const events = {
    "visible-change": () => {
       console.log("visible-change");
     },
  }
  return <input on={events} />
}

动态属性:

render() {
  const props = {
    type: 'email',
    placeholder: 'Enter your email'
  }

  return <input props={props} />
}

使用扩展运算符:

render() {
  const inputAttrs = {
    type: 'email',
    placeholder: 'Enter your email'
  }

  return <input {...{ attrs: inputAttrs }} />
}

插槽

命名插槽：

render() {
  return (
    <MyComponent>
      <header slot="header">header</header>
      <footer slot="footer">footer</footer>
    </MyComponent>
  )
}

作用域插槽：

render() {
  const scopedSlots = {
    header: () => <header>header</header>,
    footer: () => <footer>footer</footer>
  }

  return <MyComponent scopedSlots={scopedSlots} />
}

指令

<input vModel={this.newTodoText} />
// or
<input v-model={this.newTodoText} />

使用修饰符:

<input vModel_trim={this.newTodoText} />

带有参数：

<input vOn:click={this.newTodoText} />

带有参数和修饰符:

<input vOn:click_stop_prevent={this.newTodoText} />

v-html:

<p domPropsInnerHTML={html} />