核心函数;

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;
                                    }
                                },
                            })
                        }

,
dblclick : e => {
e . target . readonly = false ;
console . log ( e , 198888 ) ;
}


Logo

前往低代码交流专区

更多推荐