babel-plugin-jsx/README.md

75 lines
846 B
Markdown
Raw Normal View History

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+**