"@babel/core": "^7.9.0",
    "@babel/helper-compilation-targets": "^7.8.7",
    "@babel/helper-module-imports": "^7.8.3",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-decorators": "^7.8.3",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-syntax-jsx": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/runtime": "^7.9.2",
    "@vue/babel-preset-jsx": "^1.1.2",
    "babel-plugin-dynamic-import-node": "^2.3.0",
    

    render (h) {
      return (
        <div
          // Component props
          propsMsg="hi"
          // Normal attributes or component props.
          id="foo"
          // DOM properties are prefixed with `domProps`
          domPropsInnerHTML="bar"
          // event listeners are prefixed with `on` or `nativeOn`
          onClick={this.clickHandler}
          nativeOnClick={this.nativeClickHandler}
          // other special top-level properties
          class={{ foo: true, bar: false }}
          style={{ color: 'red', fontSize: '14px' }}
          key="key"
          ref="ref"
          // assign the `ref` is used on elements/components with v-for
          refInFor
          slot="slot">
        </div>
      )
    }
    

    render (h) {
      return h('div', {
        // Component props
        props: {
          msg: 'hi'
        },
        // Normal HTML attributes
        attrs: {
          id: 'foo'
        },
        // DOM props
        domProps: {
          innerHTML: 'bar'
        },
        // Event handlers are nested under "on", though
        // modifiers such as in v-on:keyup.enter are not
        // supported. You'll have to manually check the
        // keyCode in the handler instead.
        on: {
          click: this.clickHandler
        },
        // For components only. Allows you to listen to
        // native events, rather than events emitted from
        // the component using vm.$emit.
        nativeOn: {
          click: this.nativeClickHandler
        },
        // Class is a special module, same API as `v-bind:class`
        class: {
          foo: true,
          bar: false
        },
        // Style is also same as `v-bind:style`
        style: {
          color: 'red',
          fontSize: '14px'
        },
        // Other special top-level properties
        key: 'key',
        ref: 'ref',
        // Assign the `ref` is used on elements/components with v-for
        refInFor: true,
        slot: 'slot'
      })
    }
    

    export default {
      name: "button-counter",
      props: ["count"],
      methods: {
        onClick() {
          this.$emit("change", this.count + 1);
        }
      },
      render() {
        return (
          <button onClick={this.onClick}>You clicked me {this.count} times.</button>
        );
      }
    };
    

    const dynamicProps = {
      props: {},
      on: {},
    }
    if(haValue) dynamicProps.props.value = value
    if(hasChange) dynamicProps.on.change = onChange
    <Dynamic {...dynamicProps} />
    

    // v-show,同理v-if
    render(){
           return (
             <div>
               {this.show?'你帅':'你丑'}
             </div>
           )
         }
    
    // v-for
    render(){
            return (
              <div>
                {this.list.map((v)=>{
                  return <p>{v}</p>
                })}
              </div>
            )
          }
    
    // v-model： 传值和监听事件改变值(babel插件已支持)
    data(){
            return{
              text:'',
            }
          },
          methods:{
            input(e){
              this.text=e.target.value
            }
          },
          render(){
            return (
              <div>
                <input type="text" value={this.text} onInput={this.input}/>
                <p>{this.text}</p>
              </div>
            )
          }
    

    export default {
      render(h) {
        return <div>
            {
              (this.title || this.$slots.header) && (
                <div class="header">
                  <span class="title">{this.title}</span>
                  {this.$slots.header}
                </div>
              )
            }
            {this.$slots.default}
          </div>
      },
    }
    

    import Todo from './Todo.jsx'
    
    export default {
      render(h) {
        return <Todo /> // no need to register Todo via components option
      },
    }
    

    export default {
        functional:true,
        render(h,context){
            return (
              <div class="red" {...context.data}>
                {context.props.data}
              </div>
            )
          }
        }
    

    <el-input vModel_trim={inputValue}/>
    // 或者使用
    <el-input 
     value={this.inputValue}
     onInput={val => this.inputValue = val.trim()}/>