vue从入门到进阶：渲染函数 JSX（八）

文章目录

• 节点、树以及虚拟 DOM
• createElement 参数
  • 深入 data 对象
  • 完整示例
  • 约束
• 使用 JavaScript 代替模板功能
  • v-if 和 v-for
  • v-model
  • 事件 & 按键修饰符
  • 插槽
• JSX
• 函数式组件
  • slots() 和 children 对比

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。

<h1>
  <a name="hello-world" href="#hello-world"> Hello world! </a> </h1>

在 HTML 层，我们决定这样定义组件接口：

<anchored-heading :level="1">Hello world!</anchored-heading>

当我们开始写一个通过 level prop 动态生成 heading 标签的组件，你可能很快想到这样实现：

<script type="text/x-template" id="anchored-heading-template"> <h1 v-if="level === 1"> <slot></slot> </h1> <h2 v-else-if="level === 2"> <slot></slot> </h2> <h3 v-else-if="level === 3"> <slot></slot> </h3> <h4 v-else-if="level === 4"> <slot></slot> </h4> <h5 v-else-if=