通常開發vue我們使用的是模板語法，其實還有和react相同的語法，那就是render函數，同樣支持jsx語法。

Vue 的模板實際是編譯成了 render 函數。

1.傳統的createElement方法

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

渲染成下面這樣

<anchored-heading :level="1">　　<span>Hello</span> world!</anchored-heading>

2.使用jsx語法

這就是會用到一個Babel plugin 插件，用于在 Vue 中使用 JSX 語法的原因，它可以讓我們回到于更接近模板的語法上。

1.安裝

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

2.編輯.babelrc文件

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

代碼編輯如下

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

將 h 作為 createElement 的別名是 Vue 生態系統中的一個通用慣例，實際上也是 JSX 所要求的，如果在作用域中 h 失去作用， 在應用中會觸發報錯。

官網說明文檔：https://cn.vuejs.org/v2/guide/render-function.html#JSX

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。