2020-05-13 19:14:28 +08:00
|
|
|
# Babel Preset JSX for Vue 3.0
|
|
|
|
|
|
|
|
To add Vue JSX support.
|
|
|
|
|
|
|
|
## Syntax
|
|
|
|
|
2020-05-18 00:20:10 +08:00
|
|
|
### Content
|
2020-05-13 19:14:28 +08:00
|
|
|
functional component
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const App = () => <div></div>
|
|
|
|
```
|
|
|
|
|
2020-05-18 00:20:10 +08:00
|
|
|
with render
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const App = {
|
|
|
|
render() {
|
|
|
|
return <div>Vue 3.0</div>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
2020-05-13 19:14:28 +08:00
|
|
|
|
|
|
|
```jsx
|
|
|
|
const App = defineComponent(() => {
|
|
|
|
const count = ref(0);
|
2020-05-18 00:20:10 +08:00
|
|
|
|
|
|
|
const inc = () => {
|
|
|
|
count.value++;
|
|
|
|
};
|
|
|
|
|
2020-05-13 19:14:28 +08:00
|
|
|
return () => (
|
2020-05-18 00:20:10 +08:00
|
|
|
<div onClick={inc}>
|
2020-05-13 19:14:28 +08:00
|
|
|
{count.value}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
})
|
|
|
|
```
|
2020-05-18 00:20:10 +08:00
|
|
|
|
|
|
|
fragment
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const App = () => (
|
|
|
|
<>
|
|
|
|
<span>I'm</span>
|
|
|
|
<span>Fragment</span>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
```
|
|
|
|
|
|
|
|
### Attributes/Props
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const App = () => <input type="email" />
|
|
|
|
```
|
|
|
|
|
|
|
|
with a dynamic binding:
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const placeholderText = 'email'
|
|
|
|
const App = () => (
|
|
|
|
<input
|
|
|
|
type="email"
|
|
|
|
placeholder={placeholderText}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
```
|
|
|
|
|
|
|
|
## Compatibility
|
|
|
|
|
|
|
|
This repo is only compatible with:
|
|
|
|
|
|
|
|
- **Babel 7+**
|
|
|
|
- **Vue 3+**
|