render函数的理解和使用

1、官方文档地址：

https://cn.vuejs.org/v2/guide/render-function.html

2、简单理解

使用js生成需要的响应式的html代码

3、简单demo

header组件

引用：

输出：

解释：

网页出现的header标签就是header组件中，使用render函数的createElement方法创建的。

4、render函数中使用v-model

render组件

 引用：

效果：

解释：

domProps指向的input标签，domProps.value指的就是输入框的值

on.input指的是输入框输入方法，输入时，通过change方法将输入的值抛出去

5、render函数中使用el-input组件

render组件

 引用：

效果：

解释：

el-input的value是属性，不是内容，要将value放在attrs中

el-input的input方法，返回的是值，不是事件本身，所以不能用e.target.value

6、render函数中循环使用自定义组件

render组件

 引用：

效果：

解释：

forms中，label是描述，el是要创建的标签，key对应form表单中的下标。

这样写的话，即使有很多个表单组件，也只用在forms中显示出来就好了。

render函数可以完成所有html的书写，不过为了方便不这么用。如果遇到类似这种代码相似度很高的，大量的标签，用render函数会非常有用。