詳解Vue如何支持JSX語(yǔ)法
通常開(kāi)發(fā)vue我們使用的是模板語(yǔ)法，其實(shí)還有和react相同的語(yǔ)法，那就是render函數(shù)，同樣支持jsx語(yǔ)法。
Vue 的模板實(shí)際是編譯成了 render 函數(shù)。
1.傳統(tǒng)的createElement方法
createElement(
'anchored-heading', {
props: {
level: 1
}
}, [
createElement('span', 'Hello'),
' world!'
]
)
渲染成下面這樣
<anchored-heading :level="1"> <span>Hello</span> world! </anchored-heading>
2.使用jsx語(yǔ)法
這就是會(huì)用到一個(gè)Babel plugin 插件，用于在 Vue 中使用 JSX 語(yǔ)法的原因，它可以讓我們回到于更接近模板的語(yǔ)法上。
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 生態(tài)系統(tǒng)中的一個(gè)通用慣例，實(shí)際上也是 JSX 所要求的，如果在作用域中 h 失去作用， 在應(yīng)用中會(huì)觸發(fā)報(bào)錯(cuò)。
官網(wǎng)說(shuō)明文檔：https://cn.vuejs.org/v2/guide/render-function.html#JSX
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue Element UI + OSS實(shí)現(xiàn)上傳文件功能
這篇文章主要為大家詳細(xì)介紹了Vue Element UI + OSS實(shí)現(xiàn)上傳文件功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
今天小編就為大家分享一篇關(guān)于Vue核心概念Getter的使用方法，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
vue2響應(yīng)式原理之Object.defineProperty()方法的使用
這篇文章主要介紹了vue2響應(yīng)式原理之Object.defineProperty()方法的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue-admin-template?報(bào)Uncaught?(in?promise)?error問(wèn)題及解決
這篇文章主要介紹了Vue-admin-template?報(bào)Uncaught?(in?promise)?error問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
解決vue項(xiàng)目axios每次請(qǐng)求session不一致的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目axios每次請(qǐng)求session不一致的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了vuex操作state對(duì)象的實(shí)例代碼,本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04
有關(guān)vue 組件切換,動(dòng)態(tài)組件,組件緩存
這篇文章主要介紹了有關(guān)vue 組件切換,動(dòng)態(tài)組件,組件緩存，在組件化開(kāi)發(fā)模式下，我們會(huì)把整個(gè)項(xiàng)目拆分成很多組件，然后按照合理的方式組織起來(lái),達(dá)到預(yù)期效果，下面來(lái)看看文章的詳細(xì)內(nèi)容2021-11-11
vue-music 使用better-scroll遇到輪播圖不能自動(dòng)輪播問(wèn)題
根據(jù)vue-music視頻中slider組建的使用，當(dāng)安裝新版本的better-scroll，輪播組件，不能正常輪播。如何解決這個(gè)問(wèn)題呢，下面小編給大家?guī)?lái)了vue-music 使用better-scroll遇到輪播圖不能自動(dòng)輪播問(wèn)題，感興趣的朋友一起看看吧2018-12-12
vue項(xiàng)目API接口get請(qǐng)求傳遞參數(shù)方式
這篇文章主要介紹了vue項(xiàng)目API接口get請(qǐng)求傳遞參數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue使用拖拽方式創(chuàng)建結(jié)構(gòu)樹(shù)
這篇文章主要為大家詳細(xì)介紹了vue使用拖拽方式創(chuàng)建結(jié)構(gòu)樹(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10