来源 {#menu_index_1}

• GitHub - vuejs/jsx

语法 {#menu_index_2}

内容（Content） {#menu_index_3}

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>;
},
}`

Attributes / Props {#menu_index_4}

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

动态绑定：

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

使用"展开"操作符：

传递的对象需要与 深入数据对象 相匹配。

render() {
  const inputAttrs = {
    type: 'email',
    placeholder: 'Enter your email',
  };
  return <input {...{ attrs: inputAttrs }} />;
}

插槽（Slots） {#menu_index_5}

具名插槽：

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} />;
}

指令（Directives） {#menu_index_6}

<input vModel={this.newTodoText} />

使用修饰符（modifier）：

<input vModel_trim={this.newTodoText} />

使用参数（argument）：

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

同时使用参数和修饰符：

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

v-html：

<p domPropsInnerHTML={html} />

函数式组件（Functional Components） {#menu_index_7}

渲染函数 & JSX - 函数式组件

export default ({ props }) => (<p>hello {props.message}</p>);

const HelloWorld = ({ props }) => (<p>hello {props.message}</p>);