通常開發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>} })

?

轉載于:https://www.cnblogs.com/bhaltair/p/6648946.html

總結

以上是生活随笔為你收集整理的你需要知道的vue2 jsx render函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。