Vue之Render函数出入茅庐

最近做后台管理系统用到了iview的自定义table，但是不满足于需求，于是，利用render函数进行一番整改。
一、介绍：
首先介绍一下render函数，Vue一般使用template来创建HTML，render函数就是用JavaScript来创建html。
(1)：举例：同样一段html，用render函数来实现它：

<div>我是一个div容器></div>

render ：createElement => {
	return createElement('div','我是一个div容器')
}

二、虚拟DOM
Vue通过建立一个虚拟DOM对真实DOM发生的变化进行跟踪：

return createElement('div', this.status)

createElement 到底会返回什么呢？官方说法：“ 其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，及其子节点。我们把这样的节点描述为“虚拟节点 (Virtual Node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。” 所谓虚拟DOM，说白了就是我们用js创建的一个标签或者组件。

三、createElement 参数
(1)：createElement接收三个参数：

• HTML标签名，组件或者函数，是必填的；
• 标签属性{object}，可选
• 标签内容：可以是string或者Array，如果创建多个子节点：[createElement(‘div’),createElement(‘p’),createElement(‘button’)]

(2)：总结：createElement(标签，标签属性，标签内容)
基本用法div：

render: createElement => {	
   return createElement('div',{
   	// 为每个h标签设置class
           'class': {
             foo: true,
             bar: false
           },
           // 最终被渲染为内联样式
           style: {
             color: 'red',
             fontSize: '14px'
           },
           // 其他的html属性
           attrs: {
             id: 'foo',
             'data-id': 'bar'
           },
           // DOM属性
           domProps: {
             // innerHTML: 'from domProps',
           },
           // 事件监听器基于 "on"
           on: {
             click: this.commit()
           },
   },'我是一个div')
}

基本用法input：

render: createElement =>{
	return createElement('input',{
		domProps:{
                  value:this.value,// value赋值
                  placeholder:'请填写内容'
                },
                style: {
                    marginLeft: '5px',
                    display:!this.status ? 'none' : '',
                    border:'1px #515a63 solid'
                  },
                on :{
                	// 原生一系列：keyup/keydown/keypress/focus/blur/mouseover/mouseout/
                	keyup: event => {
                		if (event.keyCode == 13 && event.target.value.trim()){
                			// 提交输入的值
                			this.commit(event.target.value)
                		}
                	}
                }
	})
}

基本用法Array：

render:(createElement,params) =>{
              return createElement('div',{
                style:{
                  padding:'10px 0'
                }
              },[
                createElement('p','会员姓名：' + params.row.userName),
                createElement('p','会员性别：' + params.row.userSex),
                createElement('p','手机号码：' + params.row.userPhone),
                createElement('p',{
                  style:{
                    marginBottom:'5px'
                  }
                },`身份证号：${params.row.userIdNumber}`),
                createElement('p',`银行卡号：${params.row.bankcardNo}`),
                createElement('p',`开户银行：${params.row.bankcardBankName}`),
                this.status ? createElement('p',`会员转账备注：${params.row.detailTransferMemo}`) : ''
             	 ]
              )
            }

下一篇讲render函数怎么实现v-if/v-else、v-model、自定义指令、ref等等
查看文章

API
渲染函数 & JSX