vuejs Render 函数
核心函数;createElement:createElement接收3个参数:第一个参数可以是HTML标签名,组件或者函数都可以;此参数是必须的;第二个为数据对象(可选);第三个为子节点(可选)。附上一个非常简单的createElement函数demo;varapp = newVue({ el:"#app", render:createEle
核心函数;
createElement:
createElement接收3个参数:
第一个参数可以是HTML标签名,组件或者函数都可以;此参数是必须的;
第二个为数据对象(可选);
第三个为子节点(可选)。
附上一个非常简单的createElement函数demo;
var
app =
new
Vue({
el:
"#app"
,
render:createElement => {
eturn createElement(
'h2'
,
[
createElement(
'a'
,
{
domProps:{
href:
"#biaoti"
}
},
"标题"
)
]
);
}
});
这只是一个createElement函数的使用,而Vue2中VNodeData
class: v-bind/:class
style:v-bind/:style
attrs:dom属性,如id
props:props,
on:自定义事件等,
nativeOn:原生事件
像这些也可以在render函数中实现
{
title: '发布时间',
key: 'pubdate',
sortable: true,
width: 280,
render: (h, params) => {
return h('div', [
h('DatePicker', {
props: {
type: 'datetime',
format: 'yyyy-MM-dd HH:mm',
placeholder: '选择日期和时间',
value: params.row.pubdate
},
style: {
marginRight: '5px'
},
on: {
'on-change': (val) => {
console.log('发布时间1')
}
}
})
])
}
}
render: (h, params) => {
return h('Input',{
props:{
type:'text',
value:vm.data[params.index].value
},
on:{
'on-blur':(event) => {
vm.data[params.index].value = event.target.value;
}
},
})
}
更多推荐
所有评论(0)