You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/v2/examples/themes.md
+3-5
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,10 @@
1
1
---
2
-
title: Themes
2
+
title: Thèmes
3
3
type: examples
4
4
is_new: true
5
5
order: 13
6
6
---
7
-
<p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <ahref="https://github.com/vuejs-fr/vuejs.org"target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>
8
-
9
-
> With the examples below built by our partners from [Creative Tim](https://creative-tim.com?affiliate_id=116187) you can see how a real world application is built, the technology stack behind it and how most of the concepts you've learned so far apply in a real world application.
7
+
> Avec les exemples ci-dessous construits par nos partenaires de chez [Creative Tim](https://creative-tim.com?affiliate_id=116187) vous pouvez voir comment une réelle application est construite, la technologie utilisée derrière et quels sont les concepts principaux à apprendre pour réaliser une vraie application.
Copy file name to clipboardExpand all lines: src/v2/guide/components-edge-cases.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -331,7 +331,7 @@ Quand l'attribut spécial `inline-template` est présent sur un composant enfant
331
331
</my-component>
332
332
```
333
333
334
-
$todo Your inline template needs to be defined inside the DOM element to which Vue is attached.
334
+
Votre template inline a besoin d'être défini à l'intérieur de l'élément du DOM pour être attaché à Vue.
335
335
336
336
<pclass="tip">Cependant, <code>inline-template</code> rend la portée de vos templates plus difficile à appréhender. Une bonne pratique est de préférer la définition de templates à l'intérieur du composant en utilisant l'option <code>template</code> ou dans un élément <code><template></code> dans un fichier <code>.vue</code>.</p>
$todo Your x-template needs to be defined outside the DOM element to which Vue is attached.
354
+
Votre x-template a besoin d'être défini à l'extérieur de l'élément du DOM pour être attaché à Vue.
355
355
356
356
<pclass="tip">Ce type de templates peut être utile pour des démos avec de gros templates ou dans des applications extrêmements petites, mais sinon il doit être évité, car ils séparent les templates du reste de la définition du composant.</p>
Copy file name to clipboardExpand all lines: src/v2/guide/components-slots.md
+51-52
Original file line number
Diff line number
Diff line change
@@ -6,9 +6,9 @@ order: 104
6
6
7
7
> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez-les en premier si les composants sont quelque chose de nouveau pour vous.
8
8
9
-
> $todo In 2.6.0, we introduced a new unified syntax (the `v-slot` directive) for named and scoped slots. It replaces the `slot`and`slot-scope`attributes, which are now deprecated, but have _not_ been removed and are still documented [here](#Deprecated-Syntax). The rationale for introducing the new syntax is described in this[RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md).
9
+
> En 2.6.0, nous introduisons une nouvelle syntaxe unifiée (la directive `v-slot`) pour nommer vos slots avec portée. Il remplace les attributs `slot`et`slot-scope`qui sont à présent dépréciés mais _non_ retirés et toujours documentés [ici](#Syntaxe-dépréciée). La raison à l'introduction de la nouvelle syntaxe est décrite dans cette[RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md).
10
10
11
-
## Les contenu de slot
11
+
## Les contenus de slot
12
12
13
13
Vue implémente une API de distribution de contenu inspirée du [brouillon de spécification des WebComponents](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) utilisant l'élément `<slot>` comme zone de distribution de contenu.
14
14
@@ -53,84 +53,83 @@ Ou encore faire appel à d'autres composants :
53
53
54
54
Si `<navigation-link>` ne contient **pas** d'élément `<slot>`, n'importe quel contenu fourni entre la balise d'ouverture et de fermeture sera ignoré.
55
55
56
-
## $todo Compilation Scope
56
+
## Portée de compilation
57
57
58
-
When you want to use data inside a slot, such as in:
58
+
Quand vous voulez utiliser des données à l'intérieur d'un slot, comme ici :
59
59
60
60
```html
61
61
<navigation-linkurl="/profile">
62
-
Logged in as {{ user.name }}
62
+
Se connnecter en tant que {{ user.name }}
63
63
</navigation-link>
64
64
```
65
65
66
-
That slot has access to the same instance properties (i.e. the same "scope") as the rest of the template. The slot does**not**have access to `<navigation-link>`'s scope. For example, trying to access`url`would not work:
66
+
Le slot a accès à la même propriété d'instance (c.-à-d. la même « portée ») que le reste du template. Le slot n'a**pas**accès à la portée de `<navigation-link>`. Par exemple, essayer d'accéder à`url`ne fonctionnera pas :
67
67
68
68
```html
69
69
<navigation-linkurl="/profile">
70
-
Clicking here will send you to: {{ url }}
70
+
Cliquer ici vous amènera à : {{ url }}
71
71
<!--
72
-
The `url` will be undefined, because this content is passed
73
-
_to_ <navigation-link>, rather than defined _inside_ the
74
-
<navigation-link> component.
72
+
Ici `url` sera `undefined` car le contenu est passé
73
+
_à l'intérieur de_ <navigation-link>, au lieu d'être défini _entre_ le composant <navigation-link>.
75
74
-->
76
75
</navigation-link>
77
76
```
78
77
79
-
As a rule, remember that:
78
+
Souvenez-vous de cette règle :
80
79
81
-
> Everything in the parent template is compiled in parent scope; everything in the child template is compiled in the child scope.
80
+
> Tout ce qui est dans le template parent est compilé dans la portée parente, tout ce qui est dans le template enfant est compilé dans la portée enfant.
82
81
83
-
## Fallback Content
82
+
## Contenu par défaut
84
83
85
-
There are cases when it's useful to specify fallback (i.e. default) content for a slot, to be rendered only when no content is provided. For example, in a `<submit-button>`component:
84
+
Il y a des cas où il est utile de spécifier un contenu par défaut pour un slot qui sera rendu uniquement si aucun contenu n'est fourni. Par exemple, dans le composant `<submit-button>` :
86
85
87
86
```html
88
87
<buttontype="submit">
89
88
<slot></slot>
90
89
</button>
91
90
```
92
91
93
-
We might want the text "Submit" to be rendered inside the `<button>`most of the time. To make "Submit" the fallback content, we can place it in between the `<slot>`tags:
92
+
Nous pourrions vouloir que le texte « Envoyer » soit rendu à l'intérieur de `<button>`la plupart du temps. Pour faire de « Envoyer » le contenu par défaut, nous pouvons le placer à l'intérieur des balises `<slot>` :
94
93
95
94
```html
96
95
<buttontype="submit">
97
-
<slot>Submit</slot>
96
+
<slot>Envoyer</slot>
98
97
</button>
99
98
```
100
99
101
-
Now when we use`<submit-button>`in a parent component, providing no content for the slot:
100
+
Maintenant quand nous utilisons`<submit-button>`dans le composant parent, nous ne fournissons aucun contenu pour le slot:
102
101
103
102
```html
104
103
<submit-button></submit-button>
105
104
```
106
105
107
-
will render the fallback content, "Submit":
106
+
ce qui fera le rendu du contenu par défaut « Envoyer » :
108
107
109
108
```html
110
109
<buttontype="submit">
111
-
Submit
110
+
Envoyer
112
111
</button>
113
112
```
114
113
115
-
But if we provide content:
114
+
Cependant, si nous fournissons le contenu :
116
115
117
116
```html
118
117
<submit-button>
119
-
Save
118
+
Sauver
120
119
</submit-button>
121
120
```
122
121
123
-
Then the provided content will be rendered instead:
122
+
Le contenu fourni sera rendu à la place :
124
123
125
124
```html
126
125
<buttontype="submit">
127
-
Save
126
+
Sauver
128
127
</button>
129
128
```
130
129
131
130
## Les slots nommés
132
131
133
-
> $todo Updated in 2.6.0+. [See here](#Deprecated-Syntax) for the deprecated syntax using the `slot` attribute.
132
+
> Mis à jour dans la 2.6.0+. [Voir ici](#Syntaxe-dépréciée) pour la syntaxe dépréciée en utilisant l'attribut `slot`.
134
133
135
134
Dans certains cas, il peut être intéressant d'avoir plusieurs éléments `<slot>`. Dans un exemple hypothétique, voici le template d'un composant `<base-layout>` :
136
135
@@ -166,7 +165,7 @@ Dans le cas suivant, l'élément `<slot>` à un l'attribut spécial `name` , qui
166
165
167
166
Un `<slot>` sans `name` obtient implicitement le nom "default".
168
167
169
-
$todo To provide content to named slots, we can use the `v-slot`directive on a `<template>`, providing the name of the slot as `v-slot`'s argument:
168
+
Pour fournir du contenu à des slots nommés, nous pouvons utiliser la directive `v-slot`sur un `<template>`, fournissant le nom du slot en tant qu'argument de `v-slot`:
170
169
171
170
```html
172
171
<base-layout>
@@ -183,9 +182,9 @@ $todo To provide content to named slots, we can use the `v-slot` directive on a
183
182
</base-layout>
184
183
```
185
184
186
-
$todo Now everything inside the `<template>`elements will be passed to the corresponding slots. Any content not wrapped in a`<template>`using`v-slot`is assumed to be for the default slot.
185
+
Maintenant, tout a l'intérieur des éléments `<template>`sera passé aux slots correspondants. Tout contenu non inclu dans un`<template>`utilisant`v-slot`est considéré comme étant destiné au slot par défaut `default`.
187
186
188
-
However, you can still wrap default slot content in a `<template>`if you wish to be explicit:
187
+
Cependant, vous pouvez toujours entourer le contenu du slot par défaut dans un `<template>`si vous désirez que cela soit plus explicite :
189
188
190
189
```html
191
190
<base-layout>
@@ -204,7 +203,7 @@ However, you can still wrap default slot content in a `<template>` if you wish t
204
203
</base-layout>
205
204
```
206
205
207
-
$todo Either way, the rendered HTML will be:
206
+
Dans tous les cas, le rendu HTML sera :
208
207
209
208
```html
210
209
<divclass="container">
@@ -221,31 +220,31 @@ $todo Either way, the rendered HTML will be:
221
220
</div>
222
221
```
223
222
224
-
$todo Note that **`v-slot`can only be added to a `<template>`** (with [one exception](#Abbreviated-Syntax-for-Lone-Default-Slots)), unlike the deprecated [`slot` attribute](#Deprecated-Syntax).
223
+
Notez que **`v-slot`ne peut seulement être ajouté à un `<template>`** (avec [une exception](#Abbreviated-Syntax-for-Lone-Default-Slots)) contrairement aux [attributs de `slot`](#Syntax-dépréciée) dépréciés.
225
224
226
-
## Scoped Slots
225
+
## Slots avec portée
227
226
228
-
> Updated in 2.6.0+. [See here](#Deprecated-Syntax) for the deprecated syntax using the `slot-scope` attribute.
227
+
> Mis à jour dans la 2.6.0+. [Voir ici](#Syntaxe-dépréciée) pour la syntaxe dépréciée en utilisant l'attribut `slot-scope`.
229
228
230
-
Sometimes, it's useful for slot content to have access to data only available in the child component. For example, imagine a `<current-user>`component with the following template:
229
+
Parfois, il est utile pour les contenus de slot d'avoir accès aux données uniquement disponibles dans le composant enfant. Par exemple, imaginez un composant `<current-user>`avec le template suivant :
231
230
232
231
```html
233
232
<span>
234
233
<slot>{{ user.lastName }}</slot>
235
234
</span>
236
235
```
237
236
238
-
We might want to replace this fallback content to display the user's first name, instead of last, like this:
237
+
Nous souhaiterions remplacer le contenu par défaut pour afficher le nom de famille de l'utilisateur à la place de son prénom comme ceci :
239
238
240
239
```html
241
240
<current-user>
242
241
{{ user.firstName }}
243
242
</current-user>
244
243
```
245
244
246
-
That won't work, however, because only the `<current-user>`component has access to the `user`and the content we're providing is rendered in the parent.
245
+
Ce qui ne fonctionnera pas puisque le composant `<current-user>`n'a pas accès à `user`ni au contenu que nous avons fourni lors du rendu du parent.
247
246
248
-
To make`user`available to the slot content in the parent, we can bind`user`as an attribute to the`<slot>`element:
247
+
Pour rendre`user`disponible dans le contenu du slot dans le parent, nous pouvons lier`user`comme un attribut de l'élément`<slot>` :
249
248
250
249
```html
251
250
<span>
@@ -255,7 +254,7 @@ To make `user` available to the slot content in the parent, we can bind `user` a
255
254
</span>
256
255
```
257
256
258
-
Attributes bound to a `<slot>`element are called**slot props**. Now, in the parent scope, we can use`v-slot`with a value to define a name for the slot props we've been provided:
257
+
Les attributs liés à l'élément `<slot>`sont appelés des**props de slot**. Maintenant, dans la portée parente, nous pouvons utiliser`v-slot`avec une valeur pour définir un nom pour les props de slot qui nous ont été fournies :
259
258
260
259
```html
261
260
<current-user>
@@ -265,39 +264,39 @@ Attributes bound to a `<slot>` element are called **slot props**. Now, in the pa
265
264
</current-user>
266
265
```
267
266
268
-
In this example, we've chosen to name the object containing all our slot props `slotProps`, but you can use any name you like.
267
+
Dans cet exemple, nous avons choisi de nommer l'objet contenant tous nos props de slot `slotProps` mais vous pouvez choisir n'importe quel nom.
269
268
270
-
### Abbreviated Syntax for Lone Default Slots
269
+
### Syntaxe abrégée pour les slots par défaut uniques
271
270
272
-
In cases like above, when _only_ the default slot is provided content, the component's tags can be used as the slot's template. This allows us to use `v-slot`directly on the component:
271
+
Dans les cas comme au-dessus, quand _uniquement_ le slot par défaut a un contenu fourni, la balise du composant peut utiliser le template de slot. Cela nous permet d'utiliser `v-slot`directement sur le composant :
273
272
274
273
```html
275
274
<current-userv-slot:default="slotProps">
276
275
{{ slotProps.user.firstName }}
277
276
</current-user>
278
277
```
279
278
280
-
This can be shortened even further. Just as non-specified content is assumed to be for the default slot, `v-slot`without an argument is assumed to refer to the default slot:
279
+
Cela peut même être raccourci encore plus. Comme un contenu non spécifié est considéré comme étant destiné au slot par défaut, `v-slot`sans un argument est considéré comme faisant référence au slot par défaut :
281
280
282
281
```html
283
282
<current-userv-slot="slotProps">
284
283
{{ slotProps.user.firstName }}
285
284
</current-user>
286
285
```
287
286
288
-
Note that the abbreviated syntax for default slot **cannot**be mixed with named slots, as it would lead to scope ambiguity:
287
+
Notez que la syntaxe abrégée pour le slot par défaut **ne**peut **pas** être mélangée avec les slots nommées, ce qui mènerait à une ambigüité de portée :
289
288
290
289
```html
291
-
<!--INVALID, will result in warning-->
290
+
<!--INVALIDE, résultera en un avertissement-->
292
291
<current-userv-slot="slotProps">
293
292
{{ slotProps.user.firstName }}
294
293
<templatev-slot:other="otherSlotProps">
295
-
slotProps is NOT available here
294
+
`slotProps` n'est PAS disponible ici
296
295
</template>
297
296
</current-user>
298
297
```
299
298
300
-
Whenever there are multiple slots, use the full `<template>`based syntax for _all_slots:
299
+
À chaque fois qu'il y a de multiples slots, utilisez la syntaxe complète pour le `<template>`pour _tous_ les slots:
301
300
302
301
```html
303
302
<current-user>
@@ -311,43 +310,43 @@ Whenever there are multiple slots, use the full `<template>` based syntax for _a
311
310
</current-user>
312
311
```
313
312
314
-
### Destructuring Slot Props
313
+
### Décomposition de props de slot
315
314
316
-
Internally, scoped slots work by wrapping your slot content in a function passed a single argument:
315
+
En interne, les slots avec portée fonctionnent en entourant votre contenu de slot dans une fonction avec un seul argument:
317
316
318
317
```js
319
318
function (slotProps) {
320
-
// ... slot content ...
319
+
// ... contenu du slot ...
321
320
}
322
321
```
323
322
324
-
That means the value of `v-slot`can actually accept any valid JavaScript expression that can appear in the argument position of a function definition. So in supported environments ([single-file components](single-file-components.html)or [modern browsers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Browser_compatibility)), you can also use [ES2015 destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring)to pull out specific slot props, like so:
323
+
Cela signifie que la valeur de `v-slot`peut accepter n'importe quelle expression JavaScript valide pouvant apparaitre à la position d'un argument lors de la définition d'une fonction. Également, pour les environnements qui le supportent ([composants monofichier](single-file-components.html)ou les [navigateurs modernes](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs)), vous pouvez utiliser la [décomposition ES2015](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Affecter_par_d%C3%A9composition#Object_destructuring)pour définir une collection de props de slot comme suit :
325
324
326
325
```html
327
326
<current-userv-slot="{ user }">
328
327
{{ user.firstName }}
329
328
</current-user>
330
329
```
331
330
332
-
This can make the template much cleaner, especially when the slot provides many props. It also opens other possibilities, such as renaming props, e.g.`user`to`person`:
331
+
Cela rend les templates vraiment propres, en particulier quand un slot fournit divers props. Cela agrandit les possibilités, comme le renommage de props, par ex.`user`à`person`:
333
332
334
333
```html
335
334
<current-userv-slot="{ user: person }">
336
335
{{ person.firstName }}
337
336
</current-user>
338
337
```
339
338
340
-
You can even define fallbacks, to be used in case a slot prop is undefined:
339
+
Vous pouvez même définir des valeurs par défaut à utiliser dans le cas où les props de slot sont `undefined`:
341
340
342
341
```html
343
342
<current-userv-slot="{ user = { firstName: 'Guest' } }">
344
343
{{ user.firstName }}
345
344
</current-user>
346
345
```
347
346
348
-
## Dynamic Slot Names
347
+
## Noms de slot dynamiques
349
348
350
-
> New in 2.6.0+
349
+
> Nouveau dans la 2.6.0+
351
350
352
351
[Dynamic directive arguments](syntax.html#Dynamic-Arguments) also work on `v-slot`, allowing the definition of dynamic slot names:
Copy file name to clipboardExpand all lines: src/v2/guide/forms.md
+5-5
Original file line number
Diff line number
Diff line change
@@ -10,12 +10,12 @@ Vous pouvez utiliser la directive `v-model` pour créer une liaison de données
10
10
11
11
<pclass="tip">`v-model` ne prend pas en compte la valeur initiale des attributs `value`, `checked` ou `selected` fournis par un champ. Elle traitera toujours les données de l'instance de vue comme la source de vérité. Vous devez déclarer la valeur initiale dans votre JavaScript, dans l'option `data` de votre composant.</p>
12
12
13
-
$todo `v-model`internally uses different properties and emits different events for different input elements:
14
-
- text and textarea elements use `value`property and`input` event;
15
-
- checkboxes and radiobuttons use `checked`property and`change` event;
16
-
-select fields use `value`as a prop and`change`as an event.
13
+
`v-model`utilise en interne différentes propriétés et émetteurs d'évènement pour différents éléments de saisie :
14
+
-Les éléments `text` et `textarea` utilisent la propriété `value`et évènement`input`;
15
+
-Les éléments `checkboxes` et `radiobuttons` utilisent la propriété `checked`et l'évènement`change`;
16
+
-Les éléments `select` utilisent `value`comme une prop et`change`comme un évènement.
17
17
18
-
<pclass="tip"id="vmodel-ime-tip">Pour les langues qui requièrent une [méthode de saisie (IME)](https://fr.wikipedia.org/wiki/M%C3%A9thode_d%27entr%C3%A9e) (chinois, japonais, coréen, etc.), vous remarquerez que `v-model` ne sera pas mise à jour durant l'exécution de la méthode de saisie. $todo If you want to cater for these updates as well, use `input` event instead.</p>
18
+
<pclass="tip"id="vmodel-ime-tip">Pour les langues qui requièrent une [méthode de saisie (IME)](https://fr.wikipedia.org/wiki/M%C3%A9thode_d%27entr%C3%A9e) (chinois, japonais, coréen, etc.), vous remarquerez que `v-model` ne sera pas mise à jour durant l'exécution de la méthode de saisie. Si vous souhaitez également prendre en compte ces mises à jour, utilisez plutôt l'évènement `input`.</p>
0 commit comments