Vue.js教程
3.3.5 JSX
阅读(

Vue.js 基础

Vue.js 过渡和动画

Vue.js 可复用性和组合

Vue.js 混入

Vue.js 自定义指令

Vue.js 渲染函数 & JSX

使用 JavaScript 代替模板功能

createElement 参数

节点、树以及虚拟 DOM

基础

JSX

如果你写了很多render函数,可能会觉得痛苦:

createElement(
  'anchored-heading', {
    props: {
      level: 1
    }
  }, [
    createElement('span', 'Hello'),
    ' world!'
  ]
)

特别是模板如此简单的情况下:

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

这就是为什么会有一个Babel 插件,用于在 Vue 中使用 JSX 语法的原因,它可以让我们回到更接近于模板的语法上。

import AnchoredHeading from './AnchoredHeading.vue'

new Vue({
  el: '#demo',
  render: function (h) {
    return (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  }
})

h作为createElement的别名是 Vue 生态系统中的一个通用惯例,实际上也是 JSX 所要求的,如果在作用域中h失去作用,在应用中会触发报错。

更多关于 JSX 映射到 JavaScript,阅读使用文档

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验