render函数的用法,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函数会非常有用。

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注