如何在 Vue 中使用 JSX

createElement(
 'anchored-heading', {
 props: {
  level: 1
 }
 }, [
 createElement('span', 'Hello'),
 ' world!'
 ]
)

<anchored-heading :level="1">
 <span>Hello</span> world!
</anchored-heading>

# 直接回车即可
vue create vue-jsx

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

module.exports = {
 presets: [
 '@vue/cli-plugin-babel/preset',
 ['@vue/babel-preset-jsx',
  {
  'injectH': false
  }]
 ]
}

render() {
 return (
 <div>
  <h3>内容</h3>
  {/* 纯文本 */}
  <p>hello, I am Gopal</p>
  {/* 动态内容 */}
  <p>hello { this.msg }</p>
  {/* 输入框 */}
  <input />
  {/* 自定义组件 */}
  <myComponent></myComponent>
 </div>
 );
}

render() {
 return <div><input placeholder="111" /></div>
}

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

render (createElement) {
 return (
  <button {...this.largeProps}></button>
 )
}

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

render() {
 {/* 具名插槽 */}
 <myComponent>
 <header slot="header">header</header>
 <header slot="content">content</header>
 <footer slot="footer">footer</footer>
 </myComponent>
}

render() {
 return (
 <div>
  {/* 纯文本 */}
  <p>我是自定义组件</p>
  {this.$slots.header}
  {this.$slots.content}
  {this.$slots.footer}
 </div>
 );
}

render() {
 {/* 具名插槽 作用域插槽 */}
 <myComponent {
 ...{
  scopedSlots: {
  test: ({user}) => (
   <div>{user.name}</div>
  )
  }
 }
 }>
 </myComponent>

render() {
 return (
 <div>
  {this.$scopedSlots.test({
  user: this.user
  })}
 </div>
 );
}

render() {
 {/* 指令 */}
 {/* v-model */}
 <div><input vModel={this.newTodoText} /></div>
 {/* v-model 以及修饰符 */}
 <div><input vModel_trim={this.tirmData} /></div>
 {/* v-on 监听事件 */}
 <div><input vOn:input={this.inputText} /></div>
 {/* v-on 监听事件以及修饰符 */}
 <div><input vOn:click_stop_prevent={this.inputText} /></div>
 {/* v-html */}
 <p domPropsInnerHTML={html} />
}

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

import funComponent from './FunctionalComponent'

...

render() {
 return {/* 函数式组件 */}
  <funComponent message="Gopal"></funComponent>
}