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