mirror of
https://github.com/vuejs/babel-plugin-jsx.git
synced 2024-11-10 09:39:14 +08:00
docs: update README
This commit is contained in:
parent
80b9cb1570
commit
e3e3e56707
54
README.md
54
README.md
@ -4,21 +4,71 @@ To add Vue JSX support.
|
||||
|
||||
## Syntax
|
||||
|
||||
### Content
|
||||
functional component
|
||||
|
||||
```jsx
|
||||
const App = () => <div></div>
|
||||
```
|
||||
|
||||
with setup render
|
||||
with render
|
||||
|
||||
```jsx
|
||||
const App = {
|
||||
render() {
|
||||
return <div>Vue 3.0</div>
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```jsx
|
||||
const App = defineComponent(() => {
|
||||
const count = ref(0);
|
||||
|
||||
const inc = () => {
|
||||
count.value++;
|
||||
};
|
||||
|
||||
return () => (
|
||||
<div>
|
||||
<div onClick={inc}>
|
||||
{count.value}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
```
|
||||
|
||||
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+**
|
||||
|
Loading…
Reference in New Issue
Block a user