8000 feat: more enhanced code blocks (follow up for #3235) · vuejs/docs@b7cbf76 · GitHub
[go: up one dir, main page]
Skip to content

Commit b7cbf76

Browse files
AloisSeckarAloisSeckar
committed
feat: more enhanced code blocks (follow up for #3235)
1 parent a3c31de commit b7cbf76

File tree

14 files changed

+91
-125
lines changed

14 files changed

+91
-125
lines changed

‎src/api/sfc-script-setup.md

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -298,16 +298,20 @@ function inc() {
298298
:::warning
299299
If you have a `default` value for `defineModel` prop and you don't provide any value for this prop from the parent component, it can cause a de-synchronization between parent and child components. In the example below, the parent's `myRef` is undefined, but the child's `model` is 1:
300300

301-
```js
302-
// child component:
301+
```vue [Child.vue]< 8000 /span>
302+
<script setup>
303303
const model = defineModel({ default: 1 })
304+
</script>
305+
```
304306

305-
// parent component:
307+
```vue [Parent.vue]
308+
<script setup>
306309
const myRef = ref()
307-
```
310+
</script>
308311
309-
```html
310-
<Child v-model="myRef"></Child>
312+
<template>
313+
<Child v-model="myRef"></Child>
314+
</template>
311315
```
312316

313317
:::

‎src/guide/built-ins/transition.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -469,8 +469,7 @@ Here's a demo using the [GSAP library](https://gsap.com/) to perform the animati
469469

470470
Transitions can be reused through Vue's component system. To create a reusable transition, we can create a component that wraps the `<Transition>` component and passes down the slot content:
471471

472-
```vue{5}
473-
<!-- MyTransition.vue -->
472+
```vue{6} [MyTransition.vue]
474473
<script>
475474
// JavaScript hooks logic...
476475
</script>

‎src/guide/components/provide-inject.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -297,7 +297,7 @@ provide('read-only-count', readonly(count))
297297

298298
In order to make injections reactively linked to the provider, we need to provide a computed property using the [computed()](/api/reactivity-core#computed) function:
299299

300-
```js{10}
300+
```js{12}
301301
import { computed } from 'vue'
302302
303303
export default {
@@ -327,8 +327,7 @@ So far, we have been using string injection keys in the examples. If you are wor
327327

328328
It's recommended to export the Symbols in a dedicated file:
329329

330-
```js
331-
// keys.js
330+
```js [keys.js]
332331
export const myInjectionKey = Symbol()
333332
```
334333

‎src/guide/components/v-model.md

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,7 @@
1212

1313
Starting in Vue 3.4, the recommended approach to achieve this is using the [`defineModel()`](/api/sfc-script-setup#definemodel) macro:
1414

15-
```vue
16-
<!-- Child.vue -->
15+
```vue [Child.vue]
1716
<script setup>
1817
const model = defineModel()
1918
@@ -30,8 +29,7 @@ function update() {
3029

3130
The parent can then bind a value with `v-model`:
3231

33-
```vue-html
34-
<!-- Parent.vue -->
32+
```vue-html [Parent.vue]
3533
<Child v-model="countModel" />
3634
```
3735

@@ -63,8 +61,7 @@ const model = defineModel()
6361

6462
This is how you would implement the same child component shown above prior to 3.4:
6563

66-
```vue
67-
<!-- Child.vue -->
64+
```vue [Child.vue]
6865
<script setup>
6966
const props = defineProps(['modelValue'])
7067
const emit = defineEmits(['update:modelValue'])
@@ -80,8 +77,7 @@ const emit = defineEmits(['update:modelValue'])
8077

8178
Then, `v-model="foo"` in the parent component will be compiled to:
8279

83-
```vue-html
84-
<!-- Parent.vue -->
80+
```vue-html [Parent.vue]
8581
<Child
8682
:modelValue="foo"
8783
@update:modelValue="$event => (foo = $event)"
@@ -103,20 +99,20 @@ const model = defineModel({ default: 0 })
10399
:::warning
104100
If you have a `default` value for `defineModel` prop and you don't provide any value for this prop from the parent component, it can cause a de-synchronization between parent and child components. In the example below, the parent's `myRef` is undefined, but the child's `model` is 1:
105101

106-
**Child component:**
107-
108-
```js
102+
```vue [Child.vue]
103+
<script setup>
109104
const model = defineModel({ default: 1 })
105+
</script>
110106
```
111107

112-
**Parent component:**
113-
114-
```js
108+
```vue [Parent.vue]
109+
<script setup>
115110
const myRef = ref()
116-
```
111+
</script>
117112
118-
```html
119-
<Child v-model="myRef"></Child>
113+
<template>
114+
<Child v-model="myRef"></Child>
115+
</template>
120116
```
121117

122118
:::
@@ -156,8 +152,7 @@ For this to actually work though, the `<CustomInput>` component must do two thin
156152

157153
Here's that in action:
158154

159-
```vue
160-
<!-- CustomInput.vue -->
155+
```vue [CustomInput.vue]
161156
<script>
162157
export default {
163158
props: ['modelValue'],
@@ -183,8 +178,7 @@ Now `v-model` should work perfectly with this component:
183178

184179
Another way of implementing `v-model` within this component is to use a writable `computed` property with both a getter and a setter. The `get` method should return the `modelValue` property and the `set` method should emit the corresponding event:
185180

186-
```vue
187-
<!-- CustomInput.vue -->
181+
```vue [CustomInput.vue]
188182
<script>
189183
export default {
190184
props: ['modelValue'],
@@ -221,8 +215,7 @@ export default {
221215

222216
In the child component, we can support the corresponding argument by passing a string to `defineModel()` as its first argument:
223217

224-
```vue
225-
<!-- MyComponent.vue -->
218+
```vue [MyComponent.vue]
226219
<script setup>
227220
const title = defineModel('title')
228221
</script>
@@ -243,8 +236,7 @@ const title = defineModel('title', { required: true })
243236
<details>
244237
<summary>Pre 3.4 Usage</summary>
245238

246-
```vue
247-
<!-- MyComponent.vue -->
239+
```vue [MyComponent.vue]
248240
<script setup>
249241
defineProps({
250242
title: {
@@ -271,8 +263,7 @@ defineEmits(['update:title'])
271263

272264
In this case, instead of the default `modelValue` prop and `update:modelValue` event, the child component should expect a `title` prop and emit an `update:title` event to update the parent value:
273265

274-
```vue
275-
<!-- MyComponent.vue -->
266+
```vue [MyComponent.vue]
276267
<script>
277268
export default {
278269
props: ['title'],
@@ -412,7 +403,7 @@ console.log(modifiers) // { capitalize: true }
412403

413404
To conditionally adjust how the value should be read / written based on modifiers, we can pass `get` and `set` options to `defineModel()`. These two options receive the value on get / set of the model ref and should return a transformed value. This is how we can use the `set` option to implement the `capitalize` modifier:
414405

415-
```vue{6-8}
406+
```vue{4-6}
416407
<script setup>
417408
const [model, modifiers] = defineModel({
418409
set(value) {
@@ -577,10 +568,10 @@ console.log(lastNameModifiers) // { uppercase: true }
577568
```vue{5,6,10,11}
578569
<script setup>
579570
const props = defineProps({
580-
firstName: String,
581-
lastName: String,
582-
firstNameModifiers: { default: () => ({}) },
583-
lastNameModifiers: { default: () => ({}) }
571+
firstName: String,
572+
lastName: String,
573+
firstNameModifiers: { default: () => ({}) },
574+
lastNameModifiers: { default: () => ({}) }
584575
})
585576
defineEmits(['update:firstName', 'update:lastName'])
586577

‎src/guide/essentials/component-basics.md

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -188,8 +188,7 @@ Props are custom attributes you can register on a component. To pass a title to
188188

189189
<div class="options-api">
190190

191-
```vue
192-
<!-- BlogPost.vue -->
191+
```vue [BlogPost.vue]
193192
<script>
194193
export default {
195194
props: ['title']
@@ -206,8 +205,7 @@ When a value is passed to a prop attribute, it becomes a property on that compon
206205
</div>
207206
<div class="composition-api">
208207

209-
```vue
210-
<!-- BlogPost.vue -->
208+
```vue [BlogPost.vue]
211209
<script setup>
212210
defineProps(['title'])
213211
</script>
@@ -352,8 +350,8 @@ Which can be used in the template to control the font size of all blog posts:
352350

353351
Now let's add a button to the `<BlogPost>` component's template:
354352

355-
```vue{5}
356-
<!-- BlogPost.vue, omitting <script> -->
353+
```vue{5} [BlogPost.vue]
354+
<!-- omitting <script> -->
357355
<template>
358356
<div class="blog-post">
359357
<h4>{{ title }}</h4>
@@ -373,8 +371,8 @@ The button doesn't do anything yet - we want clicking the button to communicate
373371

374372
Then the child component can emit an event on itself by calling the built-in [**`$emit`** method](/api/component-instance#emit), passing the name of the event:
375373

376-
```vue{5}
377-
<!-- BlogPost.vue, omitting <script> -->
374+
```vue{5} [BlogPost.vue]
375+
<!-- omitting <script> -->
378376
<template>
379377
<div class="blog-post">
380378
<h4>{{ title }}</h4>
@@ -400,8 +398,7 @@ We can optionally declare emitted events using the <span class="options-api">[`e
400398

401399
<div class="options-api">
402400

403-
```vue{5}
404-
<!-- BlogPost.vue -->
401+
```vue{4} [BlogPost.vue]
405402
<script>
406403
export default {
407404
props: ['title'],
@@ -413,8 +410,7 @@ export default {
413410
</div>
414411
<div class="composition-api">
415412

416-
```vue{4}
417-
<!-- BlogPost.vue -->
413+
```vue{3} [BlogPost.vue]
418414
<script setup>
419415
defineProps(['title'])
420416
defineEmits(['enlarge-text'])
@@ -472,8 +468,7 @@ Something bad happened.
472468

473469
This can be achieved using Vue's custom `<slot>` element:
474470

475-
```vue{5}
476-
<!-- AlertBox.vue -->
471+
```vue{4} [AlertBox.vue]
477472
<template>
478473
<div class="alert-box">
479474
<strong>This is an Error for Demo Purposes</strong>

‎src/guide/extras/web-components.md

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,7 @@ export default {
4343

4444
#### Example Vue CLI Config {#example-vue-cli-config}
4545

46-
```js
47-
// vue.config.js
46+
```js [vue.config.js]
4847
module.exports = {
4948
chainWebpack: (config) => {
5049
config.module
@@ -218,8 +217,7 @@ If the custom elements will be used in an application that is also using Vue, yo
218217

219218
It is recommended to export the individual element constructors to give your users the flexibility to import them on-demand and register them with desired tag names. You can also export a convenience function to automatically register all elements. Here's an example entry point of a Vue custom element library:
220219

221-
```js
222-
// elements.js
220+
```js [elements.js]
223221

224222
import { defineCustomElement } from 'vue'
225223
import Foo from './MyFoo.ce.vue'
@@ -311,9 +309,7 @@ This approach is one possible way to do it, but it may vary depending on the fra
311309

312310
Suppose we have a custom element with some JS properties and events defined, and it is shipped in a library called `some-lib`:
313311

314-
```ts
315-
// file: some-lib/src/SomeElement.ts
316-
312+
```ts [some-lib/src/SomeElement.ts]
317313
// Define a class with typed JS properties.
318314
export class SomeElement extends HTMLElement {
319315
foo: number = 123
@@ -351,9 +347,7 @@ The implementation details have been omitted, but the important part is that we
351347

352348
Let's create a type helper for easily registering custom element type definitions in Vue:
353349

354-
```ts
355-
// file: some-lib/src/DefineCustomElement.ts
356-
350+
```ts [some-lib/src/DefineCustomElement.ts]
357351
// We can re-use this type helper per each element we need to define.
358352
type DefineCustomElement<
359353
ElementType extends HTMLElement,
@@ -394,9 +388,7 @@ We marked `$props` and `$emit` as deprecated so that when we get a `ref` to a cu
394388
395389
Using the type helper we can now select the JS properties that should be exposed for type checking in Vue templates:
396390
397-
```ts
398-
// file: some-lib/src/SomeElement.vue.ts
399-
391+
```ts [some-lib/src/SomeElement.vue.ts]
400392
import {
401393
SomeElement,
402394
SomeElementAttributes,
@@ -419,7 +411,7 @@ declare module 'vue' {
419411

420412
Suppose that `some-lib` builds its source TypeScript files into a `dist/` folder. A user of `some-lib` can then import `SomeElement` and use it in a Vue SFC like so:
421413

422-
```vue
414+
```vue [SomeElementImpl.vue]
423415
<script setup lang="ts">
424416
// This will create and register the element with the browser.
425417
import 'some-lib/dist/SomeElement.js'
@@ -465,7 +457,7 @@ onMounted(() => {
465457

466458
If an element does not have type definitions, the types of the properties and events can be defined in a more manual fashion:
467459

468-
```vue
460+
```vue [SomeElementImpl.vue]
469461
<script setup lang="ts">
470462
// Suppose that `some-lib` is plain JS without type definitions, and TypeScript
471463
// cannot infer the types:

0 commit comments

Comments
 (0)
0