你需要知道的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>
  }
})