代码拉取完成，页面将自动刷新
To add Vue JSX support.
English | 简体中文
Install the plugin with:
npm install @vue/babel-plugin-jsx -D
Then add the plugin to your babel config:
{
"plugins": ["@vue/babel-plugin-jsx"]
}
Type: boolean
Default: false
transform on: { click: xx } to onClick: xxx
Type: boolean
Default: false
enable optimization or not. It's not recommended to enable it If you are not familiar with Vue 3.
Type: (tag: string) => boolean
Default: undefined
configuring custom elements
Type: boolean
Default: true
merge static and dynamic class / style attributes / onXXX handlers
Type: boolean
Default: true
Whether to enable object slots (mentioned below the document) syntax". It might be useful in JSX, but it will add a lot of _isSlot condition expressions which increase your bundle size. And v-slots is still available even if enableObjectSlots is turned off.
Type: string
Default: createVNode
Replace the function used when compiling JSX expressions.
Type: boolean
Default: false
(Experimental) Infer component metadata from types (e.g. props, emits, name). This is an experimental feature and may not work in all cases.
functional component
const App = () => <div>Vue 3.0</div>;
with render
const App = {
render() {
return <div>Vue 3.0</div>;
},
};
import { withModifiers, defineComponent } from 'vue';
const App = defineComponent({
setup() {
const count = ref(0);
const inc = () => {
count.value++;
};
return () => (
<div onClick={withModifiers(inc, ['self'])}>{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} />;
const App = {
data() {
return { visible: true };
},
render() {
return <input v-show={this.visible} />;
},
};
Note: You should pass the second param as string for using
arg.
<input v-model={val} />
<input v-model:argument={val} />
<input v-model={[val, ['modifier']]} />
// Or
<input v-model_modifier={val} />
<A v-model={[val, 'argument', ['modifier']]} />
// Or
<input v-model:argument_modifier={val} />
Will compile to:
h(A, {
argument: val,
argumentModifiers: {
modifier: true,
},
'onUpdate:argument': ($event) => (val = $event),
});
Note: You should pass a Two-dimensional Arrays to v-models.
<A v-models={[[foo], [bar, 'bar']]} />
<A
v-models={[
[foo, 'foo'],
[bar, 'bar'],
]}
/>
<A
v-models={[
[foo, ['modifier']],
[bar, 'bar', ['modifier']],
]}
/>
Will compile to:
h(A, {
modelValue: foo,
modelModifiers: {
modifier: true,
},
'onUpdate:modelValue': ($event) => (foo = $event),
bar: bar,
barModifiers: {
modifier: true,
},
'onUpdate:bar': ($event) => (bar = $event),
});
Recommended when using string arguments
const App = {
directives: { custom: customDirective },
setup() {
return () => <a v-custom:arg={val} />;
},
};
const App = {
directives: { custom: customDirective },
setup() {
return () => <a v-custom={[val, 'arg', ['a', 'b']]} />;
},
};
Note: In
jsx,v-slotshould be replaced withv-slots
const A = (props, { slots }) => (
<>
<h1>{slots.default ? slots.default() : 'foo'}</h1>
<h2>{slots.bar?.()}</h2>
</>
);
const App = {
setup() {
const slots = {
bar: () => <span>B</span>,
};
return () => (
<A v-slots={slots}>
<div>A</div>
</A>
);
},
};
// or
const App = {
setup() {
const slots = {
default: () => <div>A</div>,
bar: () => <span>B</span>,
};
return () => <A v-slots={slots} />;
},
};
// or you can use object slots when `enableObjectSlots` is not false.
const App = {
setup() {
return () => (
<>
<A>
{{
default: () => <div>A</div>,
bar: () => <span>B</span>,
}}
</A>
<B>{() => 'foo'}</B>
</>
);
},
};
tsconfig.json:
{
"compilerOptions": {
"jsx": "preserve"
}
}
|
Ant Design Vue |
Vant |
Element Plus |
Vue Json Pretty |
This repo is only compatible with:
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
