mirror of
https://github.com/vuejs/babel-plugin-jsx.git
synced 2025-12-30 01:43:54 +08:00
style: format
This commit is contained in:
@@ -92,7 +92,7 @@ Default: `false`
|
||||
functional component
|
||||
|
||||
```jsx
|
||||
const App = () => <div>Vue 3.0</div>;
|
||||
const App = () => <div>Vue 3.0</div>
|
||||
```
|
||||
|
||||
with render
|
||||
@@ -100,27 +100,25 @@ with render
|
||||
```jsx
|
||||
const App = {
|
||||
render() {
|
||||
return <div>Vue 3.0</div>;
|
||||
return <div>Vue 3.0</div>
|
||||
},
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
```jsx
|
||||
import { withModifiers, defineComponent } from 'vue';
|
||||
import { withModifiers, defineComponent } from 'vue'
|
||||
|
||||
const App = defineComponent({
|
||||
setup() {
|
||||
const count = ref(0);
|
||||
const count = ref(0)
|
||||
|
||||
const inc = () => {
|
||||
count.value++;
|
||||
};
|
||||
count.value++
|
||||
}
|
||||
|
||||
return () => (
|
||||
<div onClick={withModifiers(inc, ['self'])}>{count.value}</div>
|
||||
);
|
||||
return () => <div onClick={withModifiers(inc, ['self'])}>{count.value}</div>
|
||||
},
|
||||
});
|
||||
})
|
||||
```
|
||||
|
||||
Fragment
|
||||
@@ -131,20 +129,20 @@ const App = () => (
|
||||
<span>I'm</span>
|
||||
<span>Fragment</span>
|
||||
</>
|
||||
);
|
||||
)
|
||||
```
|
||||
|
||||
### Attributes / Props
|
||||
|
||||
```jsx
|
||||
const App = () => <input type="email" />;
|
||||
const App = () => <input type="email" />
|
||||
```
|
||||
|
||||
with a dynamic binding:
|
||||
|
||||
```jsx
|
||||
const placeholderText = 'email';
|
||||
const App = () => <input type="email" placeholder={placeholderText} />;
|
||||
const placeholderText = 'email'
|
||||
const App = () => <input type="email" placeholder={placeholderText} />
|
||||
```
|
||||
|
||||
### Directives
|
||||
@@ -154,12 +152,12 @@ const App = () => <input type="email" placeholder={placeholderText} />;
|
||||
```jsx
|
||||
const App = {
|
||||
data() {
|
||||
return { visible: true };
|
||||
return { visible: true }
|
||||
},
|
||||
render() {
|
||||
return <input v-show={this.visible} />;
|
||||
return <input v-show={this.visible} />
|
||||
},
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
#### v-model
|
||||
@@ -195,7 +193,7 @@ h(A, {
|
||||
modifier: true,
|
||||
},
|
||||
'onUpdate:argument': ($event) => (val = $event),
|
||||
});
|
||||
})
|
||||
```
|
||||
|
||||
#### v-models (Not recommended since v1.1.0)
|
||||
@@ -238,7 +236,7 @@ h(A, {
|
||||
modifier: true,
|
||||
},
|
||||
'onUpdate:bar': ($event) => (bar = $event),
|
||||
});
|
||||
})
|
||||
```
|
||||
|
||||
#### custom directive
|
||||
@@ -249,18 +247,18 @@ Recommended when using string arguments
|
||||
const App = {
|
||||
directives: { custom: customDirective },
|
||||
setup() {
|
||||
return () => <a v-custom:arg={val} />;
|
||||
return () => <a v-custom:arg={val} />
|
||||
},
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
```jsx
|
||||
const App = {
|
||||
directives: { custom: customDirective },
|
||||
setup() {
|
||||
return () => <a v-custom={[val, 'arg', ['a', 'b']]} />;
|
||||
return () => <a v-custom={[val, 'arg', ['a', 'b']]} />
|
||||
},
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### Slot
|
||||
@@ -273,20 +271,20 @@ const A = (props, { slots }) => (
|
||||
<h1>{slots.default ? slots.default() : 'foo'}</h1>
|
||||
<h2>{slots.bar?.()}</h2>
|
||||
</>
|
||||
);
|
||||
)
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const slots = {
|
||||
bar: () => <span>B</span>,
|
||||
};
|
||||
}
|
||||
return () => (
|
||||
<A v-slots={slots}>
|
||||
<div>A</div>
|
||||
</A>
|
||||
);
|
||||
)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// or
|
||||
|
||||
@@ -295,10 +293,10 @@ const App = {
|
||||
const slots = {
|
||||
default: () => <div>A</div>,
|
||||
bar: () => <span>B</span>,
|
||||
};
|
||||
return () => <A v-slots={slots} />;
|
||||
}
|
||||
return () => <A v-slots={slots} />
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// or you can use object slots when `enableObjectSlots` is not false.
|
||||
const App = {
|
||||
@@ -313,9 +311,9 @@ const App = {
|
||||
</A>
|
||||
<B>{() => 'foo'}</B>
|
||||
</>
|
||||
);
|
||||
)
|
||||
},
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### In TypeScript
|
||||
|
||||
Reference in New Issue
Block a user