@@ -88,35 +88,33 @@ Default: `false`
8888函数式组件
8989
9090``` jsx
91- const App = () => < div>< / div> ;
91+ const App = () => < div>< / div>
9292```
9393
9494在 render 中使用
9595
9696``` jsx
9797const App = {
9898 render () {
99- return < div> Vue 3.0 < / div> ;
99+ return < div> Vue 3.0 < / div>
100100 },
101- };
101+ }
102102```
103103
104104``` jsx
105- import { withModifiers , defineComponent } from ' vue' ;
105+ import { withModifiers , defineComponent } from ' vue'
106106
107107const App = defineComponent ({
108108 setup () {
109- const count = ref (0 );
109+ const count = ref (0 )
110110
111111 const inc = () => {
112- count .value ++ ;
113- };
112+ count .value ++
113+ }
114114
115- return () => (
116- < div onClick= {withModifiers (inc, [' self' ])}> {count .value }< / div>
117- );
115+ return () => < div onClick= {withModifiers (inc, [' self' ])}> {count .value }< / div>
118116 },
119- });
117+ })
120118```
121119
122120Fragment
@@ -127,20 +125,20 @@ const App = () => (
127125 < span> I ' m</span>
128126 <span>Fragment</span>
129127 </>
130- );
128+ )
131129```
132130
133131### Attributes / Props
134132
135133```jsx
136- const App = () => <input type="email" />;
134+ const App = () => <input type="email" />
137135```
138136
139137动态绑定:
140138
141139```jsx
142- const placeholderText = ' email' ;
143- const App = () => <input type="email" placeholder={placeholderText} />;
140+ const placeholderText = ' email'
141+ const App = () => <input type="email" placeholder={placeholderText} />
144142```
145143
146144### 指令
@@ -150,12 +148,12 @@ const App = () => <input type="email" placeholder={placeholderText} />;
150148```jsx
151149const App = {
152150 data() {
153- return { visible: true };
151+ return { visible: true }
154152 },
155153 render() {
156- return <input v-show={this.visible} />;
154+ return <input v-show={this.visible} />
157155 },
158- };
156+ }
159157```
160158
161159#### v-model
@@ -191,7 +189,7 @@ h(A, {
191189 modifier: true,
192190 },
193191 ' onUpdate: argument' : ($event) => (val = $event),
194- });
192+ })
195193```
196194
197195#### v-models (从 1.1.0 开始不推荐使用)
@@ -234,7 +232,7 @@ h(A, {
234232 modifier: true,
235233 },
236234 ' onUpdate: bar' : ($event) => (bar = $event),
237- });
235+ })
238236```
239237
240238#### 自定义指令
@@ -245,18 +243,18 @@ h(A, {
245243const App = {
246244 directives: { custom: customDirective },
247245 setup() {
248- return () => <a v-custom:arg={val} />;
246+ return () => <a v-custom:arg={val} />
249247 },
250- };
248+ }
251249```
252250
253251```jsx
254252const App = {
255253 directives: { custom: customDirective },
256254 setup() {
257- return () => <a v-custom={[val, ' arg' , [' a' , ' b' ]]} />;
255+ return () => <a v-custom={[val, ' arg' , [' a' , ' b' ]]} />
258256 },
259- };
257+ }
260258```
261259
262260### 插槽
@@ -269,20 +267,20 @@ const A = (props, { slots }) => (
269267 <h1>{slots.default ? slots.default() : ' foo' }</h1>
270268 <h2>{slots.bar?.()}</h2>
271269 </>
272- );
270+ )
273271
274272const App = {
275273 setup() {
276274 const slots = {
277275 bar: () => <span>B</span>,
278- };
276+ }
279277 return () => (
280278 <A v-slots={slots}>
281279 <div>A</div>
282280 </A>
283- );
281+ )
284282 },
285- };
283+ }
286284
287285// or
288286
@@ -291,10 +289,10 @@ const App = {
291289 const slots = {
292290 default: () => <div>A</div>,
293291 bar: () => <span>B</span>,
294- };
295- return () => <A v-slots={slots} />;
292+ }
293+ return () => <A v-slots={slots} />
296294 },
297- };
295+ }
298296
299297// 或者,当 `enableObjectSlots` 不是 `false` 时,您可以使用对象插槽
300298const App = {
@@ -309,9 +307,9 @@ const App = {
309307 </A>
310308 <B>{() => ' foo' }</B>
311309 </>
312- );
310+ )
313311 },
314- };
312+ }
315313```
316314
317315### 在 TypeScript 中使用
0 commit comments