Vue如何支援JSX語法詳解

通常開發vue我們使用的是模板語法，其實還有和react相同的語法，那就是render函數，同樣支援jsx語法。 本文主要介紹了詳解Vue如何支援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 <p id="foo">bar</p>
 }
})

將h 作為createElement 的別名是Vue 生態系統中的一個通用慣例，實際上也是JSX 所要求的，如果在作用域中h 失去作用， 在應用程式中會觸發報錯。 ######相關推薦：############JSX與HTML的那些不同############開始使用React和JSX_html/css_WEB-ITnose## ##########JavaScript的React框架中的JSX語法學習入門教學_基礎知識#######

以上是Vue如何支援JSX語法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！