你需要知道的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 scopereturn <div id="foo">bar</div>}
})