vue render函数的使用（1）

1、render函数是什么???

// 在vue中我们使用模板HTML语法组建页面的
// 除此之外，使用还可以使用render函数，用js语言来动态穿件构建DOM（这就是rneder函数）
// 因为vue是虚拟DOM，拿到template模板时也要转译成VNode的函数。
// 而直接使用render函数构建DOM。vue就免去了转译的过程。
// 当使用render函数描述虚拟DOM时，vue提供一个函数。
// 这个函数的名字叫createElement。还有约定的简写叫h,
// vm中有一个方法_c,也是这个函数的别名
参考地址：https://www.cnblogs.com/weichen913/p/9676210.html

如何使用render函数实现以下html

 <div :class="{'is-red':isRed }">
       <p>这是一个render</p>
 </div>

render函数这样使用
创建一个XXX.js文件 代码如下

// 这是render函数的使用方法
export default{
    data(){
        return{
            isRed:true,
            arr:[1,2,3,4],
            inputValue:""
        }
    },
    //  h 最终创建的是一个元素
    // 第一个参数div  是表示创建一个div区域的元素
    // 第二个参数class表示的是这个div上有一个属性
    // 第三个参数可以是数组，表示div元素下的子元素
    render(h){
        return h('div',{//第二个参数
            class:{
                'is-red': this.isRed
            }
        },
        //第三个参数  
        [h('p','这是一个render')]
      
    );
    }
}

在使用的页面上引入注册（跟组件一样）
import aa from "./myrender"
components:{
   aa
}
<aa></aa>