Vue 渲染函数

相关概念:

child::模板渲染原理

适用范围:

1. 需要JavaScript完成编程能力来编写html标签

语法:

1. 创建一个vnode:

const vnode = h(
  'div', // 类型
  { id: 'foo', class: ['bar','fly'],style:{color: 'red'}}, // 标签含有的属性,用一个键值对对象表示
  内容
)

1.1. 说明:

1. class与style的声明可以使用Vue提供的便捷语法
2. 事件监听器需要用属性onClick:()=>{}表示
3. 内容和属性参数都是可选的
4. 内容可以是
   1. 数组
      1. 元素可以是:
      2. vnode
      3. 字符串
         1. 表示innerText
   2. 字符串
      1. 表示innerText

注意:

1. 一个渲染函数创建的vnode只能渲染一次
   1. 如果向渲染多个内容相同vnode, 请多次调用相同的渲染函数, 返回多个不同引用值的vnode
2. 创建出来的vnode，需要与其他vnode一起挂载虚拟DOM
3. 不能vnode与组件模板进行混用