Vue—— JSX渲染函数rander

1、直接在vue实例中使用 rander 函数进行渲染，使用 rander 函数之后，不需要使用 template 以及 components 

    rander 函数的 createElement 方法的第一个参数为组件或者html标签，第二个参数为 option ，第三个参数为插槽的内容

new Vue({
  el: '#app',
  render(createElement) {
    // createElement 这个函数是用来渲染组件或者标签的
    // createElement('组件或者html标签',options={},插槽内容)

    //渲染组件

    return createElement(Test, {
      props: { // 给组件添加props
        num: 100,
        title:'标题',
      },
      on: { // 给组件监听事件
        click() {
          console.log(123)
        }
      },
      style: {//设置样式
        background:'red'
      },
      class: 'test'//添加类
    }, 'Test')
  
    //渲染标签

    //return createElement('button', {
    //  style:'background:red'
    //},'这是一个div')
  }
})

2.通过创建JSX文件来渲染页面

    需要在webpack的配置文件中添加JSX的解析规则（默认不解析JSX文件），在vue-lic中的配置文件是webpack.base.js ，把loader的正则表达式改为 /\.(js|jsx)$/ ,需要使用模板来渲染JSX文件，在JSX中不存在任何vue方法

    在JSX文件中如果需要访问定义的变量，需要使用 {this.XX} 的格式进行访问，如果需要通过rander函数渲染多个标签，需要像Vue的模板一样使用一个容器包裹住

export default {
  data() {
    return {
      title: "这是一个div",
      arr: ["张三", "李四"]
    };
  },
  methods: {
    click() {
      console.log(222);
    },
    input(e) {
      this.title = e.target.value;
    }
  },
  render() {
    return (
      <div>
        {this.arr.map((k, i) => {
          return (
            <div key={i}>
              {k}
              {i}
            </div>
          );
        })}
        {[<div>1</div>, <div>2</div>]}
        <input value={this.title} onInput={this.input} />
      </div>
    );
  }
};