vue 使用jsx的配置

joshinrai發表於2019-07-15
VueJS

在有些特定場景中需要使用jsx來精簡程式碼，關於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"]

}
複製程式碼

JSX對大多數的Vue內建指令都不支援，唯一的例外是v-show，該指令可以使用v-show={value}的語法。大多數指令都可以用程式設計方式實現，比如v-if就是一個三元表示式，v-for就是一個array.map()等。

如果是自定義指令，可以使用v-name={value}語法，但是改語法不支援指令的引數arguments和修飾器modifier。有以下兩個解決方法：

  • 將所有內容以一個物件傳入，如：v-name={{ value, modifier: true }}

  • 使用原生的vnode指令資料格式 const directives = [ { name: 'my-dir', value: 123, modifiers: { abc: true } } ]

    return <div {...{ directives }}/>

相關文章