260 lines
3.9 KiB
Markdown
Raw Normal View History

2020-07-02 13:30:17 +08:00
# Vue 3 Babel JSX 插件
2020-08-28 10:59:39 +08:00
[![CircleCI](https://circleci.com/gh/vuejs/jsx-next.svg?style=svg)](https://circleci.com/gh/vuejs/vue-next) [![npm package](https://img.shields.io/npm/v/@vue/babel-plugin-jsx.svg?style=flat-square)](https://www.npmjs.com/package/@vue/babel-plugin-jsx)
2020-07-12 18:56:19 +08:00
2020-07-02 13:30:17 +08:00
以 JSX 的方式来编写 Vue 代码
[English](/packages/babel-plugin-jsx/README.md) | 简体中文
2020-07-02 13:30:17 +08:00
## 安装
安装插件
```bash
npm install @vue/babel-plugin-jsx -D
2020-07-02 13:30:17 +08:00
```
配置 Babel
```js
2020-07-02 13:30:17 +08:00
{
"plugins": ["@vue/babel-plugin-jsx"]
2020-07-02 13:30:17 +08:00
}
```
## 使用
### 参数
2020-07-29 12:37:37 +08:00
#### transformOn
Type: `boolean`
Default: `false`
2020-07-02 13:30:17 +08:00
`on: { click: xx }` 转成 `onClick: xxx`
2020-07-29 12:37:37 +08:00
#### optimize
Type: `boolean`
Default: `false`
是否开启优化. 如果你对 Vue 3 不太熟悉,不建议打开
#### isCustomElement
Type: `(tag: string) => boolean`
2020-07-02 13:30:17 +08:00
2020-07-29 12:37:37 +08:00
Default: `undefined`
2020-07-02 13:30:17 +08:00
2020-07-29 12:37:37 +08:00
自定义元素
2020-07-02 13:30:17 +08:00
2020-09-14 17:42:03 +08:00
#### mergeProps
Type: `boolean`
Default: `true`
合并 class / style / onXXX handlers
2020-07-03 00:51:53 +08:00
## 表达式
### 内容
函数式组件
```jsx
const App = () => <div></div>;
2020-07-03 00:51:53 +08:00
```
在 render 中使用
```jsx
const App = {
render() {
return <div>Vue 3.0</div>;
2020-07-03 00:51:53 +08:00
}
};
2020-07-03 00:51:53 +08:00
```
```jsx
2020-09-01 10:14:36 +08:00
import { withModifiers, defineComponent } from 'vue';
2020-07-03 00:51:53 +08:00
2020-09-01 10:14:36 +08:00
const App = defineComponent({
setup() {
const count = ref(0);
2020-07-22 09:53:16 +08:00
2020-09-01 10:14:36 +08:00
const inc = () => {
count.value++;
};
2020-07-22 09:53:16 +08:00
2020-09-01 10:14:36 +08:00
return () => (
<div onClick={withModifiers(inc, ['self'])}>
{count.value}
</div>
);
}
});
2020-07-22 09:53:16 +08:00
```
2020-07-03 00:51:53 +08:00
Fragment
```jsx
const App = () => (
<>
<span>I'm</span>
<span>Fragment</span>
</>
);
2020-07-03 00:51:53 +08:00
```
### Attributes / Props
2020-07-03 00:51:53 +08:00
```jsx
const App = () => <input type="email" />;
2020-07-03 00:51:53 +08:00
```
with a dynamic binding:
```jsx
const placeholderText = 'email';
2020-07-03 00:51:53 +08:00
const App = () => (
<input
type="email"
placeholder={placeholderText}
/>
);
2020-07-03 00:51:53 +08:00
```
### 指令
v-show
```jsx
const App = {
data() {
return { visible: true };
},
render() {
2020-07-22 09:23:23 +08:00
return <input v-show={this.visible} />;
2020-07-03 00:51:53 +08:00
},
};
```
v-model
2020-07-15 09:22:27 +08:00
> 注意:如果想要使用 `arg`, 第二个参数需要为字符串
2020-07-03 00:51:53 +08:00
```jsx
2020-07-22 09:23:23 +08:00
<input v-model={val} />
2020-07-03 00:51:53 +08:00
```
2020-07-13 23:44:52 +08:00
```jsx
2020-09-22 11:55:34 +08:00
<input v-model={[val, ['modifier']]} />
2020-07-13 23:44:52 +08:00
```
```jsx
2020-09-22 11:55:34 +08:00
<A v-model={[val, 'argument', ['modifier']]} />
2020-07-13 23:44:52 +08:00
```
会变编译成:
```js
h(A, {
2020-09-22 11:55:34 +08:00
'argument': val,
"argumentModifiers": {
"modifier": true
2020-07-13 23:44:52 +08:00
},
2020-09-22 11:55:34 +08:00
"onUpdate:argument": $event => val = $event
2020-07-13 23:44:52 +08:00
})
```
2020-07-03 00:51:53 +08:00
自定义指令
```jsx
const App = {
directives: { custom: customDirective },
setup() {
return () => (
<a
2020-07-22 09:23:23 +08:00
v-custom={[val, 'arg', ['a', 'b']]}
2020-07-03 00:51:53 +08:00
/>
);
},
};
2020-07-03 00:51:53 +08:00
```
### 插槽
2020-07-11 23:14:18 +08:00
```jsx
const App = {
setup() {
const slots = {
2020-07-22 09:53:16 +08:00
default: () => <div>A</div>,
foo: () => <span>B</span>
};
2020-07-22 09:23:23 +08:00
return () => <A v-slots={slots} />;
2020-07-11 23:14:18 +08:00
}
};
2020-07-11 23:14:18 +08:00
```
2020-07-03 00:51:53 +08:00
2020-09-04 17:49:29 +08:00
### 在 TypeSript 中使用
2020-09-01 10:14:36 +08:00
`tsconfig.json`:
```json
{
"compilerOptions": {
"jsx": "preserve"
}
}
```
2020-07-09 21:16:10 +08:00
## 谁在用
<table>
<tbody>
<tr>
<td align="center">
<a target="_blank" href="https://www.antdv.com/">
<img
width="32"
src="https://qn.antdv.com/logo.png"
/>
<br>
<strong>Ant Design Vue</strong>
</a>
</td>
<td align="center">
2020-07-09 21:36:13 +08:00
<a target="_blank" href="https://youzan.github.io/vant/#/zh-CN/">
2020-07-09 21:16:10 +08:00
<img
width="32"
style="vertical-align: -0.32em; margin-right: 8px;"
src="https://img.yzcdn.cn/vant/logo.png"
/>
<br>
<strong>Vant</strong>
</a>
</td>
<td align="center">
<a target="_blank" href="https://github.com/element-plus/element-plus">
<img
height="32"
style="vertical-align: -0.32em; margin-right: 8px;"
src="https://user-images.githubusercontent.com/10731096/91267529-259f3680-e7a6-11ea-9a60-3286f750de01.png"
/>
<br>
<strong>Element Plus</strong>
</a>
</td>
2020-07-09 21:16:10 +08:00
</tr>
</tbody>
</table>
2020-07-02 13:30:17 +08:00
## 兼容性
要求:
- **Babel 7+**
- **Vue 3+**