你需要知道的vue2 jsx render函数

通常开发vue我们使用的是模板语法，其实还有和react相同的语法，那就是render函数，同样支持jsx语法。

Vue 的模板实际是编译成了 render 函数。

 

0 传统的createElement方法

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


渲染成下面这样

<anchored-heading :level="1">

　　<span>Hello</span> world!

</anchored-heading>

 

 

 

1 使用jsx语法

 

安装下面的东东

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

https://github.com/vuejs/babel-plugin-transform-vue-jsx

 

npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  babel-preset-es2015\
  --save-dev

然后编辑.babelrc文件

{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}

 

必须要像这样写

Vue.component('jsx-example', {
  render (h) { // <-- h must be in scope
    return <div id="foo">bar</div>
  }
})