vue中的渲染函数(render)的用法

createElement 接受的参数示例:

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象,或者
  // resolve 了上述任何一种的一个 async 函数。必填项。
  'div',

  // {Object}
  // 一个与模板中属性对应的数据对象。可选。
  {
    // (详情见1.3)
  },

  // {String | Array}
  // 子级虚拟节点 (VNodes),由 `createElement()` 构建而成,
  // 也可以使用字符串来生成“文本虚拟节点”。可选。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

createElement 使用示例:

render:(h) => {
  return h('div',{
    // 给div绑定class属性
    class: {
      child: true,
      more: false
    },
  // 给div绑定样式
  style:{
    width:'200px',
      height:'200px',
  }, 
  // 给div绑定点击事件  
    on: {
      click: () => {
        console.log('点击事件')
      }
    },
  })
}

1.vue.js与vue.runtime.xxx.js的区别:
(1).vue.js是完整版的Vue,包含:核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。

猜你喜欢

转载自blog.csdn.net/qq_34082921/article/details/131195603