你须要知道的vue2 jsx render函数

时间 2019-12-13 标签须要知道 vue2 vue jsx render 函数

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

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

0 传统的createElement方法git


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


渲染成下面这样

<anchored-heading :level="1">

　　<span>Hello</span> world!

</anchored-heading>

1 使用jsx语法github

安装下面的东东npm

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

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文件spa

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

必需要像这样写code

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