mirror of
https://github.com/vuejs/babel-plugin-jsx.git
synced 2024-09-20 12:54:44 +08:00
JSX for Vue 3
|
||
---|---|---|
.github/workflows | ||
packages | ||
scripts | ||
.eslintignore | ||
.eslintrc.js | ||
.gitignore | ||
CHANGELOG.md | ||
global.d.ts | ||
lerna.json | ||
LICENSE | ||
package.json | ||
README.md | ||
renovate.json | ||
tsconfig.json | ||
yarn.lock |
Babel Plugin JSX for Vue 3.0
To add Vue JSX support.
English | 简体中文
Installation
Install the plugin with:
npm install @ant-design-vue/babel-plugin-jsx -D
Then add the plugin to .babelrc:
{
"plugins": ["@ant-design-vue/babel-plugin-jsx"]
}
Usage
options
- 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 }
Syntax
Content
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>
</>
);
Attributes / Props
const App = () => <input type="email" />;
with a dynamic binding:
const placeholderText = 'email';
const App = () => (
<input
type="email"
placeholder={placeholderText}
/>
);
Directives
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
Note: You should pass the second param as string for using
arg
.
<input vModel={val} />
<input vModel={[val, ['trim']]} />
<A vModel={[val, 'foo', ['bar']]} />
Will compile to:
h(A, {
'foo': val,
"fooModifiers": {
"bar": true
},
"onUpdate:foo": $event => val = $event
})
custom directive
const App = {
directives: { custom: customDirective },
setup() {
return () => (
<a
vCustom={[val, 'arg', ['a', 'b']]}
/>
);
},
};
Slot
const App = {
setup() {
const slots = {
a: () => <div>A</div>,
b: () => <span>B</span>
};
return () => <A vSlots={slots} />;
}
};
Who is using
![]() Ant Design Vue |
![]() Vant |
Compatibility
This repo is only compatible with:
- Babel 7+
- Vue 3+