mirror of
https://github.com/vuejs/babel-plugin-jsx.git
synced 2025-01-10 16:29:12 +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
|
## Syntax
|
||||||
|
|
||||||
|
### Content
|
||||||
functional component
|
functional component
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const App = () => <div></div>
|
const App = () => <div></div>
|
||||||
```
|
```
|
||||||
|
|
||||||
with setup render
|
with render
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
const App = {
|
||||||
|
render() {
|
||||||
|
return <div>Vue 3.0</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const App = defineComponent(() => {
|
const App = defineComponent(() => {
|
||||||
const count = ref(0);
|
const count = ref(0);
|
||||||
|
|
||||||
|
const inc = () => {
|
||||||
|
count.value++;
|
||||||
|
};
|
||||||
|
|
||||||
return () => (
|
return () => (
|
||||||
<div>
|
<div onClick={inc}>
|
||||||
{count.value}
|
{count.value}
|
||||||
</div>
|
</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