style: format

This commit is contained in:
Kevin Deng
2025-11-26 16:58:43 +08:00
parent 85d98b5b6f
commit 620450b5ba
28 changed files with 1297 additions and 1302 deletions

View File

@@ -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