通常開發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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
