技術標籤：Vue

大部分情況目的：有些地方你沒法寫html,你就需要在js中函式給他返回一個html

tip：要講的就是程式碼裡的h()；至於什麼是虛擬dom，是面試必懂的東西，這裡不贅述了

用法：

createElement()方法，別名是h()，它有三個引數，前2必選，

栗子：

h(“p”, { style: “color:red” }, “是否讓這個預約定金活動立刻結束？”)

引數一：接受一個字串、物件、元件

字串時候就是標籤名，就是‘div’標籤

引數二：接收物件、或者陣列

• 接收陣列是設定子元件的。比如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   //用於從外面接收引數
  },
  domProps: {
    // DOM 屬性
  },
  on: {
    // 事件監聽器基於on
    // 不再支援如 `v-on:keyup.enter` 修飾器，需手動匹配 keyCode
 

  },
  nativeOn: {
    // 僅對於元件，用於監聽原生元件，而不是元件內部使用`vm.$emit`觸發的事件
  },
  directives: [
    {
      // 自定義指令，注意事項：不能對繫結的舊值設值
      // vue 會為您持續追蹤
    }
  ],
  scopedSlots: {
  },
  slot: '', // 如果元件是其他元件的子元件，需為 slot 指定名稱
  // 其他特殊頂層屬性
  key: '',
  ref: ''

比如我在公司遇到這麼個需求，element表頭上加一個tips

<el-table-column label=
 
"剩餘補課次數" :render-header="renderHeader" >
            
</el-table-column>

renderHeader (h, { column }) {
      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"
            })
          ]
        )
      ]);
    }