Vue Render函数的使用

在vue的开发中，会时不时就遇到render函数的问题，比如想更改组件库的样式使用自定义样式。

对于新手小白而言，render函数的使用很让人困扰！争取这篇笔记当你豁然开朗吧！

一、基本格式

createment(,{},[])

第一个参数（必须有）：为html标签。

第二个参数： 为改html标签的属性（可以理解为template中写在标签里面的属性，有需要都写在这里）

第三个参数： 为该html的子元素

二、基本使用

1.最基础的情况

      allType: (h) => h('div', [
        h('span', '所有类型广告'),
      ]),

相当于

<div>
    <span>所有类型</span>
</div>

2.携带一些类名或者样式

      appStart: (h) => h('div', [
        h('img', {
          class: {
            imgHover: true,
          },
          style: {
            display: 'inline-block',
            width: '20px',
            height: '20px',
            verticalAlign: 'bottom',
            marginRight: '12px',
          },
          attrs: {
            src: require('../../assets/image/ic_Interstitial_ad_selected@2x.png'),
          },
        }),
        h('span', 'App启动'),
      ]),

相当于

<div>
    <img 
        class="imgHover"
        style="display: 'inline-block'
        src="../../a/c/d"/>
    <span>App启动</span>
</div>

3.带有绑定事件

      unAppStart: (h) => h('div',
        {
          class: 'unselectedApp',
          on: {
            mouseover: () => {
              const html = document.querySelector('.unselectedApp');
              // eslint-disable-next-line global-require
              html.firstChild.src = require('../../assets/image/ic_Interstitial_ad_selected@2x.png');
            },
            mouseleave: () => {
              const html = document.querySelector('.unselectedApp');
              // eslint-disable-next-line global-require
              html.firstChild.src = require('../../assets/image/ic_Interstitial_ad_unselected@2x.png');
            },
          },
        },
        [
          h('img', {
            style: {
              display: 'inline-block',
              width: '20px',
              height: '20px',
              verticalAlign: 'bottom',
              marginRight: '12px',
            },
            attrs: {
            // eslint-disable-next-line global-require
              src: require('../../assets/image/ic_Interstitial_ad_unselected@2x.png'),
            },
          }),
          h('span', 'App启动'),
        ]),

相当于

<div
    class="unselectedApp"
    @mouseover="over"
    @mouseLeave="leave">
    <img 
        class="imgHover"
        style="display: 'inline-block'
        src="../../a/c/d"/>
    <span>App启动</span>
</div>

三、与template的优先级

render函数的优先级高于template