# Vue 3 Babel JSX 插件
[](https://www.npmjs.com/package/@ant-design-vue/babel-plugin-jsx)
以 JSX 的方式来编写 Vue 代码
## 安装
安装插件
```
npm install @ant-design-vue/babel-plugin-jsx -D
npm install @ant-design-vue/babel-helper-vue-transform-on
```
配置 Babel
```
{
"plugins": ["@ant-design-vue/babel-plugin-jsx"]
}
```
## 使用
### 参数
* transformOn
把 `on: { click: xx }` 转成 `onClick: xxx`
* compatibleProps
兼容大多数 Vue 2 的写法，Vue 3 中，把所有属性都改成了顶级属性，意味这不需要再传递 props，attrs 这些属性。
开启这个参数意味着对 { attrs, props, on } 做了兼容处理，但是所有的属性外层都会有 `compatibleProps` 方法
## 表达式
### 内容
函数式组件
```jsx
const App = () =>
```
在 render 中使用
```jsx
const App = {
render() {
return Vue 3.0
}
}
```
```jsx
const App = defineComponent(() => {
const count = ref(0);
const inc = () => {
count.value++;
};
return () => (
{count.value}
)
})
```
Fragment
```jsx
const App = () => (
<>
I'm
Fragment
)
```
### Attributes/Props
```jsx
const App = () =>
```
with a dynamic binding:
```jsx
const placeholderText = 'email'
const App = () => (
)
```
### 指令
> 建议在 JSX 中使用驼峰 (`vModel`)，但是 `v-model` 也能用
v-show
```jsx
const App = {
data() {
return { visible: true };
},
render() {
return ;
},
};
```
v-model
* 修饰符：使用 (`_`) 代替 (`.`) (`vModel_trim={this.test}`)
```jsx
export default {
data: () => ({
test: 'Hello World',
}),
render() {
return (
<>
{this.test}
)
},
}
```
自定义指令
```jsx
const App = {
directives: { custom: customDirective },
setup() {
return () => (
);
},
}
```
### 插槽
```jsx
const App = {
setup() {
const slots = {
a: () => A
,
b: () => B
}
return () =>
}
}
```
## 谁在用
## 兼容性
要求：
- **Babel 7+**
- **Vue 3+**
