vue虚拟dom，Render、h函数的运用

大部分情况目的：有些地方你没法写html,你就需要在js中函数给他返回一个html

tip：要讲的就是代码里的h()；至于什么是虚拟dom，是面试必懂的东西，这里不赘述了
建议先看一眼官方文档，很多文章直接复制官方文档的，lj文章，看的浪费时间

用法：

createElement()方法，别名是h()，它有三个参数，第一个必选，

栗子：

h(“p”, { style: “color:red” }, “是否让这个预约定金活动立刻结束？”)

参数一：接受一个字符串、对象、函数

字符串时候就是标签名，就是‘div’标签，也可以是自定义组件名称
函数时候，无非就是return回来一个字符串

参数二：接收对象、或者数组

• 接收数组是设置子组件的。比如div里面还想放一个span。意味着你h()里面还要一个h(),里面的h就是放在数组里面的

 h( 'div',
   [ h(),h() ]
 )

• 对象时候是这么用，上代码更直接点

{
    
    
  'class': {
    
    
     // 和`v-bind:class`一样的API
  },
  style: {
    
    
     // 和`v-bind:style`一样的API
  },
  attrs: {
    
    
     // 正常的 html 特性
  },
  props: {
    
    
    name:this.name   //用于从外面接收参数
  },
  on: {
    
    
    // 事件监听器基于on
    // 不再支持如 `v-on:keyup.enter` 修饰器，需手动匹配 keyCode
    //比如设置方法（一般是新建组件时候用到）
    mymethod() {
    
     console.log('w de 函数')}
    click: () => {
    
     console.log('点击事件')  }
    },
  slot: '', // 如果组件是其他组件的子组件，需为 slot 指定名称
  // 其他特殊顶层属性
  key: '',
  ref: ''
}

比如我在公司遇到这么个需求，element表头上加一个tips

<el-table-column label="剩余补课次数" :render-header="renderHeader" >
            
</el-table-column>

renderHeader (h, {
    
     column }) {
    
      // { column }是element函数参数
      let serviceContent = [
        h(
          'div',
          {
    
    
            slot: "content",
          },
          "剩余一对一补课次数/剩余插班补课次数"
        )
      ]
      return h("div", [
        h("span", column.label),
        h(
          "el-tooltip",
          {
    
    
            props: {
    
    
              placement: "top"
            }
          },
          [
            serviceContent,
            h("i", {
    
    
              class: "el-icon-question",
              style: "color: #ffd737;font-size: 16px;margin-left: 10px"
            })
          ]
        )
      ]);
    }

还有一个栗子是element官方提供的，可以自己看看