To add Vue JSX support.
English | 简体中文
Install the plugin with:
npm install @ant-design-vue/babel-plugin-jsx -D
npm install @ant-design-vue/babel-helper-vue-transform-on
Then add the plugin to .babelrc:
{
"plugins": ["@ant-design-vue/babel-plugin-jsx"]
}
- transformOn
transform on: { click: xx } to onClick: xxx
- compatibleProps
compatible with Vue 2.x
{ props, on = {}, attrs, ...rest } will be transformed to { ...props, ...attrs, ...transformOn(on), ...rest }
functional component
const App = () => <div></div>with render
const App = {
render() {
return <div>Vue 3.0</div>
}
}const App = defineComponent(() => {
const count = ref(0);
const inc = () => {
count.value++;
};
return () => (
<div onClick={inc}>
{count.value}
</div>
)
})Fragment
const App = () => (
<>
<span>I'm</span>
<span>Fragment</span>
</>
)const App = () => <input type="email" />with a dynamic binding:
const placeholderText = 'email'
const App = () => (
<input
type="email"
placeholder={placeholderText}
/>
)It is recommended to use camelCase version of it (
vModel) in JSX, but you can use kebab-case too (v-model).
v-show
const App = {
data() {
return { visible: true };
},
render() {
return <input vShow={this.visible} />;
},
};v-model
- You should use underscore (
_) instead of dot (.) for modifiers (vModel_trim={this.test})
export default {
data: () => ({
test: 'Hello World',
}),
render() {
return (
<>
<input type="text" vModel_trim={this.test} />
{this.test}
</>
)
},
}custom directive
const App = {
directives: { custom: customDirective },
setup() {
return () => (
<a
vCustom={{
value: 123,
modifiers: { modifier: true },
arg: 'arg',
}}
/>
);
},
}const App = {
setup() {
const slots = {
a: () => <div>A</div>,
b: () => <span>B</span>
}
return () => <A vSlots={slots} />
}
}
Ant Design Vue |
Vant |
This repo is only compatible with:
- Babel 7+
- Vue 3+
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent