詳解Vue如何支持JSX語法

來源：懂視網責編：小采時間：2020-11-27 22:25:43

詳解Vue如何支持JSX語法

詳解Vue如何支持JSX語法:通常開發vue我們使用的是模板語法，其實還有和react相同的語法，那就是render函數，同樣支持jsx語法。 Vue 的模板實際是編譯成了 render 函數。 1.傳統的createElement方法 createElement( 'anchored-heading', { props:

推薦度：

點擊下載本文 文檔為doc格式

導讀詳解Vue如何支持JSX語法:通常開發vue我們使用的是模板語法，其實還有和react相同的語法，那就是render函數，同樣支持jsx語法。 Vue 的模板實際是編譯成了 render 函數。 1.傳統的createElement方法 createElement( 'anchored-heading', { props:

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

Vue 的模板實際是編譯成了 render 函數。

1.傳統的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 生態系統中的一個通用慣例，實際上也是 JSX 所要求的，如果在作用域中 h 失去作用，在應用中會觸發報錯。

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

詳解Vue如何支持JSX語法

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE 解析語法

熱門焦點

詳解Vue如何支持JSX語法

詳解Vue如何支持JSX語法

詳解Vue如何支持JSX語法

最新推薦

猜你喜歡

熱門推薦