溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

詳解Vue如何支持JSX語(yǔ)法

發(fā)布時(shí)間：2020-10-03 12:03:02 來(lái)源：腳本之家 閱讀：134 作者：清風(fēng)晴雨 欄目：web開(kāi)發(fā)

通常開(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í)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手