一般情况下每个vue组件都用”\<template>”写html, 蓝狮注册登陆但实际还可以在js代码中通过render函数生成dom. 最主要常见组件库也需要配合”h”使用.

render
render是组件的一个选项, 他的返回值会被作为组件的DOM结构.

试试插入html:

可以看到html标签被当做字符串渲染了, 并没有生成h2标签. 如何正确插入h2标签呢?

VNode
如果想插入DOM就要用到”VNode”, VNode是vue对页面DOM节点的描述, 蓝狮官网其是一个Object类型.

h
结构这么复杂的”VNode”肯定不是自己拼写的, 官方提供了”h”函数, 可以帮助我们生成”VNode”

这次生成了真正”h2″:

“h”函数的第1个参数是”标签名”, 第2个是”属性”, 在这个例子里可以理解为html的所有属性, 第3个是”内容”. “内容”不仅仅可以是字符串, 还可以是”VNode”或2者混合:

如果实际只传入2个参数, 那么第二2参数就会作为内容, 比如这里的”small”.

渲染组件
“h”还可以渲染”组件”, 这一下灵活度就上来了, 假设我们有一个”switch”组件, 其支持.