通常開發vue我們使用的是模板語法，其實還有和react相同的語法，那就是render函數，同樣支援jsx語法。 本文主要介紹了詳解Vue如何支援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>
npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-es2015\ --save-dev
程式碼編輯如下{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}登入後複製
Vue.component('jsx-example', {
render (h) { // <-- h must be in scope
return <p id="foo">bar</p>
}
})以上是Vue如何支援JSX語法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
