詳解Vue如何支持JSX語法

更新時(shí)間：2017年11月10日 17:19:06 作者：清風(fēng)晴雨

這篇文章主要介紹了詳解Vue如何支持JSX語法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

通常開發(fā)vue我們使用的是模板語法，其實(shí)還有和react相同的語法，那就是render函數(shù)，同樣支持jsx語法。

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語法

這就是會(huì)用到一個(gè)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)中的一個(gè)通用慣例，實(shí)際上也是 JSX 所要求的，如果在作用域中 h 失去作用，在應(yīng)用中會(huì)觸發(fā)報(bào)錯(cuò)。

官網(wǎng)說明文檔：https://cn.vuejs.org/v2/guide/render-function.html#JSX

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue兄弟組件傳遞數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇vue兄弟組件傳遞數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue3中provide和inject作用和場景
Vue3中provide和inject作用和場景是頂層組件向任意的底層組件傳遞數(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í)刷新頁面或定時(shí)更新數(shù)據(jù)是一種常見的需求,尤其是在需要與服務(wù)器進(jìn)行定時(shí)通信或者展示實(shí)時(shí)數(shù)據(jù)的場景下,Vue.js 提供了簡單而有效的方法來實(shí)現(xiàn)定時(shí)刷新和自動(dòng)更新,本文將介紹幾種常見的定時(shí)刷新方式、適用場景、優(yōu)缺點(diǎn)以及性能考慮
2024-11-11
vue自定義指令directive的使用方法
這篇文章主要介紹了vue自定義指令directive的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue中英文切換實(shí)例代碼
在本篇文章里小編給大家整理了關(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è)參考。一起跟隨小編過來看看吧
2017-10-10
分享7個(gè)成為更好的Vue開發(fā)者的技巧
作為使用Vue已經(jīng)很多年的人，特別是去年一直在使用?Vue3，因此，學(xué)到了很多東西。所以本文為大家準(zhǔn)備了7個(gè)讓我們成為更好?Vue?開發(fā)者的技巧，需要的可以參考一下
2022-06-06
VueJS 集成 Medium Editor的示例代碼（自定義編輯器按鈕）
本篇文章主要介紹了VueJS 集成 Medium Editor的示例代碼（自定義編輯器按鈕），具有一定的參考價(jià)值，有興趣的可以了解一下
2017-08-08