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