詳解Vue如何支持JSX語(yǔ)法
通常開發(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兄弟組件傳遞數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-09-09
Vue3中provide和inject作用和場(chǎng)景
Vue3中provide和inject作用和場(chǎng)景是頂層組件向任意的底層組件傳遞數(shù)據(jù)和方法,實(shí)現(xiàn)跨層組件通信,本文通過實(shí)例介紹Vue3 provide和inject的相關(guān)知識(shí),感興趣的朋友一起看看吧2023-11-11
前端vue?a鏈接下載文件失敗的問題(未發(fā)現(xiàn)文件)
這篇文章主要介紹了前端vue?a鏈接下載文件失敗的問題(未發(fā)現(xiàn)文件)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue如何通過ref調(diào)用router-view子組件的方法
這篇文章主要介紹了vue?通過ref調(diào)用router-view子組件的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
Vue 實(shí)現(xiàn)定時(shí)刷新與自動(dòng)更新(示例詳解)
在現(xiàn)代 Web 開發(fā)中,定時(shí)刷新頁(yè)面或定時(shí)更新數(shù)據(jù)是一種常見的需求,尤其是在需要與服務(wù)器進(jìn)行定時(shí)通信或者展示實(shí)時(shí)數(shù)據(jù)的場(chǎng)景下,Vue.js 提供了簡(jiǎn)單而有效的方法來(lái)實(shí)現(xiàn)定時(shí)刷新和自動(dòng)更新,本文將介紹幾種常見的定時(shí)刷新方式、適用場(chǎng)景、優(yōu)缺點(diǎn)以及性能考慮2024-11-11
這篇文章主要介紹了vue自定義指令directive的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在本篇文章里小編給大家整理了關(guān)于vue中英文切換實(shí)例代碼，需要的朋友們學(xué)習(xí)參考下。2020-01-01
安裝vue-cli報(bào)錯(cuò) -4058 的解決方法
這篇文章主要介紹了安裝vue-cli報(bào)錯(cuò) -4058 的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-10-10
作為使用Vue已經(jīng)很多年的人，特別是去年一直在使用?Vue3，因此，學(xué)到了很多東西。所以本文為大家準(zhǔn)備了7個(gè)讓我們成為更好?Vue?開發(fā)者的技巧，需要的可以參考一下2022-06-06
VueJS 集成 Medium Editor的示例代碼 （自定義編輯器按鈕）
本篇文章主要介紹了VueJS 集成 Medium Editor的示例代碼 （自定義編輯器按鈕），具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08