render就是用js来写html代码
render我们经常看见会这么用
render:h=>h(app)
//原本样子是这样
render:function (h) {
return h(app);
}
箭头函数简写:
1.首先只有一个参数可以去掉function和括号加上 =>
变成以下形式
render:createElement=>{
return createElement(app);
}
2.再由于只有一条语句 大括号和return可以省略
render:createElement=>createElement(app)
此时再把createElement改成h就成了一下形式
render:h=>h(app)
render有三个参数
-第一个参数 必选 类型为String Object function
-第二个参数可选 类型为 Object
-第三个参数 可选 类型为String Array
简单的例子：
用render渲染一个h1标签
<div id="app">
<test></test>
</div>
Vue.component("test",{
render(createElement){ //reder第一个是一个函数
return createElement('h1',"this is a title")
}
})
let vm=new Vue({
el:'#app',
components:{
}
})
第二个参数
render:function (createElement) {
return createElement('h1',{
class: {
data:"数据"
// cs6中的class
},
style: {
// 设置样式
background: 'blue',
},
attrs: {
title:'render'
// 设置属性
},
// 类似innerhtml
domProps: {
innerHTML: '<span >第二参数可以是以下内容</span>'
}
})
}
第三个参数
String或者Array
···
Vue.component("test",{
render:function (createElement) {
return createElement('h1',"这是第三个参数是第一个参数的子标 签")
}
})
···
