From 0aa076f55533fab05bcb05d12d3a1cb6286842e3 Mon Sep 17 00:00:00 2001 From: yann Date: Thu, 2 Feb 2017 23:40:58 +0100 Subject: [PATCH 01/21] =?UTF-8?q?[syntax.md]=20d=C3=A9but=20traduction=20c?= =?UTF-8?q?hapitre=20attributs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/syntax.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index 9cee197921..85ede4393f 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -30,25 +30,25 @@ You can also perform one-time interpolations that do not update on data change b ### Raw HTML -The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the `v-html` directive: +La double moustaches interprète les données comme du texte brut, pas comme du HTML. Pour vraiment afficher du HTML, vous aurez besoin de la directive `v-html` ``` html
``` -The contents are inserted as plain HTML - data bindings are ignored. Note that you cannot use `v-html` to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition. +Le contenu sont insérés en tant que HTML - les liaisons de données sont ignorées. Notez que vous ne pouvez pas utiliser `v-html` pour composer des templates partiels, parce que Vue n'est pas un moteur de template basé sur les chaînes de caractères. A la place, les composants sont à préférer en tant qu'unité fondamentale pour la réutilisabilité de l'IU et la composition. -

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS vulnerabilities](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use HTML interpolation on trusted content and **never** on user-provided content.

+

Générer dynamiquement le rendu d'HTML arbitraire sur votre site peut être très dangereux car cela peut mener facilement à une [vulnérabilité XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Utilisez l'interpolation HTML uniquement sur du contenu de confiance et **jamais** sur du contenu en provenance d'un utilisateur

-### Attributes +### Les attributs -Mustaches cannot be used inside HTML attributes, instead use a [v-bind directive](../api/#v-bind): +Les Moustaches ne peuvent pas être utilisées à l'intérieur des attributs HTML, à la place utilisez une [directive v-bind](../api/#v-bind): ``` html
``` -It also works for boolean attributes - the attribute will be removed if the condition evaluates to a falsy value: +Cela fonctionne également pour les attributs booléens - l'attribut sera supprimé si la condition est évaluée à faux : ``` html From 4d1dab4087f2ad319374d75530f4963e92e7bbde Mon Sep 17 00:00:00 2001 From: yann Date: Sat, 25 Feb 2017 20:35:11 +0100 Subject: [PATCH 02/21] forms.md - first paragraph translation --- src/v2/guide/forms.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index 31885e59e1..b517918b46 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -1,18 +1,19 @@ --- -title: Form Input Bindings +title: Liaisons des champs de formulaire type: guide order: 10 --- -## Basic Usage +## Usage basique -

**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**

You can use the `v-model` directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, `v-model` is essentially syntax sugar for updating data on user input events, plus special care for some edge cases. +Vous pouvez utilisez la directive `v-model` pour créer une liaison de donnée bidirectionnelle sur les champs de formulaire et les ((textarea|zones de textes multilignes)). Elle choisira automatiquement la bonne manière de mettre à jour l'élément selon le type de champ. Bien qu'un peu magique, `v-model` est essentiellement un sucre syntaxique pour mettre à jour les données lors des évènements utilisateurs sur les champs, ((plus quelques traitements spéciaux pour les cas particuliers)). -

`v-model` doesn't care about the initial value provided to an input or a textarea. It will always treat the Vue instance data as the source of truth.

+

`v-model` ne prend pas en compte la valeur initial fourni par un champ ou une zone de texte. Il traitera toujours les données de l'instance de vue comme la source de vérité.

For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method) (Chinese, Japanese, Korean etc.), you'll notice that `v-model` doesn't get updated during IME composition. If you want to cater for these updates as well, use `input` event instead.

+

Pour les languages 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 mis à jour durant ((l'exécution de la méthode de saisie.))

-### Text +### Texte ``` html @@ -34,7 +35,7 @@ new Vue({ {% endraw %} -### Multiline text +### Text multilignes ``` html Multiline message is: From 9c4cd1d53209fa641ecac8b9c4f6085fe46a3755 Mon Sep 17 00:00:00 2001 From: yann Date: Sat, 25 Feb 2017 21:58:32 +0100 Subject: [PATCH 03/21] =?UTF-8?q?forms.md=20:=20traduction=20jusqu'=C3=A0?= =?UTF-8?q?=20.number?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/forms.md | 36 ++++++++++++++++++++---------------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index b517918b46..fc283b3ce2 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -10,7 +10,6 @@ Vous pouvez utilisez la directive `v-model` pour créer une liaison de donnée b

`v-model` ne prend pas en compte la valeur initial fourni par un champ ou une zone de texte. Il traitera toujours les données de l'instance de vue comme la source de vérité.

-

For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method) (Chinese, Japanese, Korean etc.), you'll notice that `v-model` doesn't get updated during IME composition. If you want to cater for these updates as well, use `input` event instead.

Pour les languages 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 mis à jour durant ((l'exécution de la méthode de saisie.))

### Texte @@ -35,7 +34,7 @@ new Vue({ {% endraw %} -### Text multilignes +### Texte multiligne ``` html Multiline message is: @@ -64,11 +63,13 @@ new Vue({ {% raw %}

Interpolation on textareas (<textarea>{{text}}</textarea>) won't work. Use v-model instead.

+

Les interpolations sur les textareas (<textarea>{{text}}</textarea>) ne fonctionneront pas. Utilisez v-model à la place.

{% endraw %} ### Checkbox -Single checkbox, boolean value: +((Checkbox seule, valeur booléenne:)) + ``` html @@ -89,7 +90,7 @@ new Vue({ {% endraw %} -Multiple checkboxes, bound to the same Array: +Checkboxes multiple, liées au même Array: ``` html @@ -166,7 +167,7 @@ new Vue({ ### Select -Single select: +Select à choix unique: ``` html @@ -226,7 +227,7 @@ new Vue({ {% endraw %} -Dynamic options rendered with `v-for`: +Options dynamiques rendues avec `v-for`: ``` html - + - + ``` -But sometimes we may want to bind the value to a dynamic property on the Vue instance. We can use `v-bind` to achieve that. In addition, using `v-bind` allows us to bind the input value to non-string values. +Mais parfois nous pouvons souhaiter lier la valeur à une propriété dynamique de l'instance de Vue. Nous pouvons réaliser cela en utilisant `v-bind`. De plus, utiliser `v-bind` nous permet de lier la valeur de l'input à des valeurs qui ne sont pas des chaînes de caractères. ### Checkbox @@ -321,29 +324,30 @@ vm.toggle === vm.b vm.pick === vm.a ``` -### Select Options +### Options des select ``` html ``` ``` js -// when selected: +// quand sélectionné : typeof vm.selected // -> 'object' vm.selected.number // -> 123 ``` -## Modifiers +## Modificateur ### `.lazy` -By default, `v-model` syncs the input with the data after each `input` event (with the exception of IME composition as [stated above](#vmodel-ime-tip)). You can add the `lazy` modifier to instead sync after `change` events: +Par défaut, `v-model` synchronise l'input avec les données après chaque évènement `input` (à l'exception de l'exécution d'une méthode de saisie comme [dit plus haut](#vmodel-ime-tip)). Vous pouvez ajouter le modificateur `lazy` pour synchroniser après les évènements `change` à la place: ``` html + ``` From 1da096ba473e0f1bc4052b5f7edb140c0b42b0e6 Mon Sep 17 00:00:00 2001 From: yann Date: Sun, 26 Feb 2017 22:57:13 +0100 Subject: [PATCH 04/21] =?UTF-8?q?forms.md=20:=20relecture=20premier=20trad?= =?UTF-8?q?uction=20jusqu'=C3=A0=20numbers?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/forms.md | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index fc283b3ce2..7ffc9f4ace 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -6,9 +6,9 @@ order: 10 ## Usage basique -Vous pouvez utilisez la directive `v-model` pour créer une liaison de donnée bidirectionnelle sur les champs de formulaire et les ((textarea|zones de textes multilignes)). Elle choisira automatiquement la bonne manière de mettre à jour l'élément selon le type de champ. Bien qu'un peu magique, `v-model` est essentiellement un sucre syntaxique pour mettre à jour les données lors des évènements utilisateurs sur les champs, ((plus quelques traitements spéciaux pour les cas particuliers)). +Vous pouvez utilisez la directive `v-model` pour créer une liaison de donnée bidirectionnelle sur les ((champs de formulaire)). Elle choisira automatiquement la bonne manière de mettre à jour l'élément selon le type de champ. Bien qu'un peu magique, `v-model` est essentiellement un sucre syntaxique pour mettre à jour les données lors des évènements utilisateurs sur les champs, ((plus quelques traitements spéciaux pour les cas particuliers)). -

`v-model` ne prend pas en compte la valeur initial fourni par un champ ou une zone de texte. Il traitera toujours les données de l'instance de vue comme la source de vérité.

+

`v-model` ne prend pas en compte la valeur initiale fournie par un champ. Elle traitera toujours les données de l'instance de vue comme la source de vérité.

Pour les languages 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 mis à jour durant ((l'exécution de la méthode de saisie.))

@@ -62,8 +62,7 @@ new Vue({ {% raw %} -

Interpolation on textareas (<textarea>{{text}}</textarea>) won't work. Use v-model instead.

-

Les interpolations sur les textareas (<textarea>{{text}}</textarea>) ne fonctionneront pas. Utilisez v-model à la place.

+

Les interpolations sur les textarea (<textarea>{{text}}</textarea>) ne fonctionneront pas. Utilisez v-model à la place.

{% endraw %} ### Checkbox @@ -196,7 +195,7 @@ new Vue({ {% endraw %} -Select à choix multiple (lié à Array): +Select à choix multiples (lié à Array): ``` html @@ -320,7 +318,7 @@ vm.toggle === vm.b ``` ``` js -// when checked: +// quand choisi : vm.pick === vm.a ``` From 0ccb6dd92d35dacb53f5516df61d4fd2a42b0ad6 Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 27 Feb 2017 20:47:18 +0100 Subject: [PATCH 05/21] =?UTF-8?q?forms.md=20:=203eme=20relecture=20jusqu'?= =?UTF-8?q?=C3=A0=20.number?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/forms.md | 55 +++++++++++++++++++++---------------------- 1 file changed, 27 insertions(+), 28 deletions(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index 7ffc9f4ace..a489fec720 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -6,23 +6,23 @@ order: 10 ## Usage basique -Vous pouvez utilisez la directive `v-model` pour créer une liaison de donnée bidirectionnelle sur les ((champs de formulaire)). Elle choisira automatiquement la bonne manière de mettre à jour l'élément selon le type de champ. Bien qu'un peu magique, `v-model` est essentiellement un sucre syntaxique pour mettre à jour les données lors des évènements utilisateurs sur les champs, ((plus quelques traitements spéciaux pour les cas particuliers)). +Vous pouvez utilisez la directive `v-model` pour créer une liaison de donnée bidirectionnelle sur les champs de formulaire et textarea. Elle choisira automatiquement la bonne manière de mettre à jour l'élément en fonction du type de champ. Bien qu'un peu magique, `v-model` est essentiellement un sucre syntaxique pour mettre à jour les données lors des évènements utilisateurs sur les champs, plus quelques traitements spéciaux pour certains cas particuliers. -

`v-model` ne prend pas en compte la valeur initiale fournie par un champ. Elle traitera toujours les données de l'instance de vue comme la source de vérité.

+

`v-model` ne prend pas en compte la valeur initiale fournie pour un champ ou un textarea. Elle traitera toujours les données de l'instance de vue comme la source de vérité.

-

Pour les languages 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 mis à jour durant ((l'exécution de la méthode de saisie.))

+

Pour les languages 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 mis à jour durant l'exécution de la méthode de saisie.

### Texte ``` html - -

Message is: {{ message }}

+ +

Le message est : {{ message }}

``` {% raw %}
- -

Message is: {{ message }}

+ +

Le message est : {{ message }}

{% endraw %} -Checkboxes multiple, liées au même Array: +Checkboxes multiples, liées au même Array: ``` html @@ -99,7 +99,7 @@ Checkboxes multiple, liées au même Array:
-Checked names: {{ checkedNames }} +Nom cochés : {{ checkedNames }} ``` ``` js @@ -120,7 +120,7 @@ new Vue({
- Checked names: {{ checkedNames }} + Noms cochés : {{ checkedNames }} {% endraw %} -Select à choix multiples (lié à Array): +Select à choix multiples (lié à un Array): ``` html
-Selected: {{ selected }} +Sélectionnés : {{ selected }} ``` {% raw %}
@@ -214,7 +214,7 @@ Select à choix multiples (lié à Array):
- Selected: {{ selected }} + Sélectionnés : {{ selected }}
{% endraw %} -## Liaisons de valeurs +## Liaisons des attributs value -Pour les options de bouton radio, checkbox et select, les valeurs de liaison de `v-model` sont habituellement des chaînes de caractères statiques (ou des booléens pour checkbox): +Pour les options de bouton radio, checkbox et select, les valeurs de liaison de `v-model` des attributs value sont habituellement des chaînes de caractères statiques (ou des booléens pour une checkbox): ``` html @@ -305,7 +305,7 @@ Mais parfois nous pouvons souhaiter lier la valeur à une propriété dynamique ``` ``` js -// when checked: +// quand cochée : vm.toggle === vm.a // when unchecked: vm.toggle === vm.b @@ -344,7 +344,6 @@ vm.selected.number // -> 123 Par défaut, `v-model` synchronise l'input avec les données après chaque évènement `input` (à l'exception de l'exécution d'une méthode de saisie comme [dit plus haut](#vmodel-ime-tip)). Vous pouvez ajouter le modificateur `lazy` pour synchroniser après les évènements `change` à la place: ``` html - ``` From 8bef84df996d647cc4acf6500dc0d5041aac8505 Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 27 Feb 2017 22:31:07 +0100 Subject: [PATCH 06/21] forms.md : fin premiere passe traduction --- src/v2/guide/forms.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index a489fec720..6e8ea60ae7 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -350,27 +350,28 @@ Par défaut, `v-model` synchronise l'input avec les données après chaque évè ### `.number` -If you want user input to be automatically typecast as a number, you can add the `number` modifier to your `v-model` managed inputs: +Si vous voulez que l'entrée utilisateur soit automatiquement typée en tant que nombre, vous pouvez ajouter le modificateur `number` à vos input gérés par `v-model` ``` html ``` -This is often useful, because even with `type="number"`, the value of HTML input elements always returns a string. +C'est souvent utile, parce que même avec `type="number"`, la valeur des éléments input HTML retourne toujours une chaîne de caractères. ### `.trim` If you want user input to be trimmed automatically, you can add the `trim` modifier to your `v-model` managed inputs: +c'est vous voulez que les entrées utilisateurs soit "trimmed" automatiquement, vous pouvez ajouter le modificateur `trim` à vos champs gérés par `v-model` ```html ``` -## `v-model` with Components +## `v-model` avec les composants -> If you're not yet familiar with Vue's components, just skip this for now. +> Si vous n'est pas encore familier avec les composants de Vue, sautez ce passage pour le moment -HTML's built-in input types won't always meet your needs. Fortunately, Vue components allow you to build reusable inputs with completely customized behavior. These inputs even work with `v-model`! To learn more, read about [custom inputs](components.html#Form-Input-Components-using-Custom-Events) in the Components guide. +Les types de champ standards HTML ne couvriront pas toujours vos besoins. Heureusement, les composants de Vue vous permettent de construire des inputs avec un comportement complètement customisé. Ces inputs fonctionnent même avec `v-model` ! Pour en apprendre plus, lisez [inputs personnalisés](components.html#Form-Input-Components-using-Custom-Events) dans le guide des composants. From 2dd5a798a3c5f509d1a1ccb64cc10a723ed56825 Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 27 Feb 2017 22:50:14 +0100 Subject: [PATCH 07/21] forms.md : fin de la traduction --- src/v2/guide/forms.md | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index 6e8ea60ae7..68dab7414d 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -6,11 +6,11 @@ order: 10 ## Usage basique -Vous pouvez utilisez la directive `v-model` pour créer une liaison de donnée bidirectionnelle sur les champs de formulaire et textarea. Elle choisira automatiquement la bonne manière de mettre à jour l'élément en fonction du type de champ. Bien qu'un peu magique, `v-model` est essentiellement un sucre syntaxique pour mettre à jour les données lors des évènements utilisateurs sur les champs, plus quelques traitements spéciaux pour certains cas particuliers. +Vous pouvez utilisez la directive `v-model` pour créer une liaison de donnée bidirectionnelle sur les champs de formulaire. Elle choisira automatiquement la bonne manière de mettre à jour l'élément en fonction du type de champ. Bien qu'un peu magique, `v-model` est essentiellement un sucre syntaxique pour mettre à jour les données lors des évènements utilisateurs sur les champs, ainsi que quelques traitements spéciaux pour certains cas particuliers. -

`v-model` ne prend pas en compte la valeur initiale fournie pour un champ ou un textarea. Elle traitera toujours les données de l'instance de vue comme la source de vérité.

+

`v-model` ne prend pas en compte la valeur initiale (attribut "value") fournie pour champ. Elle traitera toujours les données de l'instance de vue comme la source de vérité.

-

Pour les languages 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 mis à jour durant l'exécution de la méthode de saisie.

+

Pour les languages 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.

### Texte @@ -226,7 +226,7 @@ new Vue({ {% endraw %} -Options dynamiques rendues avec `v-for`: +Options dynamiques générées avec `v-for`: ``` html @@ -360,7 +360,6 @@ C'est souvent utile, parce que même avec `type="number"`, la valeur des éléme ### `.trim` -If you want user input to be trimmed automatically, you can add the `trim` modifier to your `v-model` managed inputs: c'est vous voulez que les entrées utilisateurs soit "trimmed" automatiquement, vous pouvez ajouter le modificateur `trim` à vos champs gérés par `v-model` ```html @@ -371,7 +370,7 @@ c'est vous voulez que les entrées utilisateurs soit "trimmed" automatiquement, > Si vous n'est pas encore familier avec les composants de Vue, sautez ce passage pour le moment -Les types de champ standards HTML ne couvriront pas toujours vos besoins. Heureusement, les composants de Vue vous permettent de construire des inputs avec un comportement complètement customisé. Ces inputs fonctionnent même avec `v-model` ! Pour en apprendre plus, lisez [inputs personnalisés](components.html#Form-Input-Components-using-Custom-Events) dans le guide des composants. +Les types de champ standards HTML ne couvriront pas toujours vos besoins. Heureusement, les composants de Vue vous permettent de construire des champs avec un comportement complètement personnalisé. Ces champs fonctionnent même avec `v-model` ! Pour en apprendre plus, lisez les [champs personnalisés](components.html#Form-Input-Components-using-Custom-Events) dans le guide des composants. From 357a6f833ec311ab6ac756632e80a7f6e065357d Mon Sep 17 00:00:00 2001 From: yann Date: Tue, 28 Feb 2017 14:26:41 +0100 Subject: [PATCH 08/21] =?UTF-8?q?forms.md=20:=20prise=20en=20compte=20corr?= =?UTF-8?q?ection=20premi=C3=A8re=20passe=20@forresst?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/forms.md | 76 +++++++++++++++++++++---------------------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index 68dab7414d..9e84d6068b 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -1,5 +1,5 @@ --- -title: Liaisons des champs de formulaire +title: Liaisons sur les champs de formulaire type: guide order: 10 --- @@ -8,20 +8,20 @@ order: 10 Vous pouvez utilisez la directive `v-model` pour créer une liaison de donnée bidirectionnelle sur les champs de formulaire. Elle choisira automatiquement la bonne manière de mettre à jour l'élément en fonction du type de champ. Bien qu'un peu magique, `v-model` est essentiellement un sucre syntaxique pour mettre à jour les données lors des évènements utilisateurs sur les champs, ainsi que quelques traitements spéciaux pour certains cas particuliers. -

`v-model` ne prend pas en compte la valeur initiale (attribut "value") fournie pour champ. Elle traitera toujours les données de l'instance de vue comme la source de vérité.

+

`v-model` ne prend pas en compte la valeur initiale (attribut "value") fournie pour un champ. Elle traitera toujours les données de l'instance de vue comme la source de vérité.

-

Pour les languages 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.

+

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.

### Texte ``` html - +

Le message est : {{ message }}

``` {% raw %}
- +

Le message est : {{ message }}

{% endraw %} -Checkboxes multiples, liées au même Array: +Checkboxes multiples, liées au même tableau (Array): ``` html @@ -99,7 +99,7 @@ Checkboxes multiples, liées au même Array:
-Nom cochés : {{ checkedNames }} +Noms cochés : {{ checkedNames }} ``` ``` js @@ -136,21 +136,21 @@ new Vue({ ``` html - - + +
- - + +
Choisi : {{ picked }} ``` {% raw %}
- - + +
- - + +
Choisi : {{ picked }}
@@ -166,7 +166,7 @@ new Vue({ ### Select -Select à choix unique: +Select à choix unique : ``` html @@ -204,7 +204,7 @@ Select à choix multiples (lié à un Array):
-Sélectionnés : {{ selected }} +Sélectionné(s) : {{ selected }} ``` {% raw %}
@@ -214,7 +214,7 @@ Select à choix multiples (lié à un Array):
- Sélectionnés : {{ selected }} + Sélectionné(s) : {{ selected }}
{% endraw %} -Options dynamiques générées avec `v-for`: +Options dynamiques générées avec `v-for` : ``` html @@ -360,7 +360,7 @@ C'est souvent utile, parce que même avec `type="number"`, la valeur des éléme ### `.trim` -c'est vous voulez que les entrées utilisateurs soit "trimmed" automatiquement, vous pouvez ajouter le modificateur `trim` à vos champs gérés par `v-model` +c'est vous voulez que les saisies utilisateurs soit automatiquement nettoyées des espaces superflus, vous pouvez ajouter le modificateur `trim` à vos champs gérés par `v-model` ```html @@ -368,9 +368,9 @@ c'est vous voulez que les entrées utilisateurs soit "trimmed" automatiquement, ## `v-model` avec les composants -> Si vous n'est pas encore familier avec les composants de Vue, sautez ce passage pour le moment +> Si vous n'êtes pas encore familier avec les composants de Vue, passez cette section pour le moment. -Les types de champ standards HTML ne couvriront pas toujours vos besoins. Heureusement, les composants de Vue vous permettent de construire des champs avec un comportement complètement personnalisé. Ces champs fonctionnent même avec `v-model` ! Pour en apprendre plus, lisez les [champs personnalisés](components.html#Form-Input-Components-using-Custom-Events) dans le guide des composants. +Les types de champ standards HTML ne couvriront pas toujours vos besoins. Heureusement, les composants de Vue vous permettent de construire des inputs avec un comportement complètement customisé. Ces inputs fonctionnent même avec `v-model` ! Pour en apprendre plus, lisez [inputs personnalisés](components.html#Form-Input-Components-using-Custom-Events) dans le guide des composants. From beead5bb3dafe5011fb7758fd4534194c2c06aec Mon Sep 17 00:00:00 2001 From: yann Date: Tue, 28 Feb 2017 14:30:12 +0100 Subject: [PATCH 09/21] =?UTF-8?q?forms.md=20:=20la=20chaine=20de=20caract?= =?UTF-8?q?=C3=A8re=20sera=20a=20quand=20la=20case=20sera=20coch=C3=A9e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/forms.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index 9e84d6068b..f3a1d49005 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -279,13 +279,13 @@ Pour les options de bouton radio, checkbox et select, les valeurs de liaison de ``` html - + - + From 35d8430f896998e9adb72c7f5ab6cf41deaff864 Mon Sep 17 00:00:00 2001 From: yann Date: Tue, 28 Feb 2017 14:50:48 +0100 Subject: [PATCH 10/21] forms.md : fix deuxieme relecture @forresst - deux petits oublis --- src/v2/guide/forms.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index f3a1d49005..adb338feb9 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -89,7 +89,7 @@ new Vue({ {% endraw %} -Checkboxes multiples, liées au même tableau (Array): +Checkboxes multiples, liées au même tableau (Array) : ``` html @@ -360,7 +360,7 @@ C'est souvent utile, parce que même avec `type="number"`, la valeur des éléme ### `.trim` -c'est vous voulez que les saisies utilisateurs soit automatiquement nettoyées des espaces superflus, vous pouvez ajouter le modificateur `trim` à vos champs gérés par `v-model` +c'est vous voulez que les saisies utilisateurs soit automatiquement nettoyées des espaces superflus, vous pouvez ajouter le modificateur `trim` à vos champs gérés par `v-model` : ```html From 46c88e65c63a6e7617b64735615e4e080273245d Mon Sep 17 00:00:00 2001 From: yann Date: Wed, 1 Mar 2017 13:47:25 +0100 Subject: [PATCH 11/21] pull/35#pullrequestreview-24456323 : sur les champs de formulaire (input, select ou textarea) --- src/v2/guide/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index adb338feb9..a464ac6997 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -6,7 +6,7 @@ order: 10 ## Usage basique -Vous pouvez utilisez la directive `v-model` pour créer une liaison de donnée bidirectionnelle sur les champs de formulaire. Elle choisira automatiquement la bonne manière de mettre à jour l'élément en fonction du type de champ. Bien qu'un peu magique, `v-model` est essentiellement un sucre syntaxique pour mettre à jour les données lors des évènements utilisateurs sur les champs, ainsi que quelques traitements spéciaux pour certains cas particuliers. +Vous pouvez utilisez la directive `v-model` pour créer une liaison de donnée bidirectionnelle sur les champs de formulaire (input, select ou textarea). Elle choisira automatiquement la bonne manière de mettre à jour l'élément en fonction du type de champ. Bien qu'un peu magique, `v-model` est essentiellement un sucre syntaxique pour mettre à jour les données lors des évènements utilisateurs sur les champs, ainsi que quelques traitements spéciaux pour certains cas particuliers.

`v-model` ne prend pas en compte la valeur initiale (attribut "value") fournie pour un champ. Elle traitera toujours les données de l'instance de vue comme la source de vérité.

From acc0e8c1bfc4cfbb37d2f7022baa53bbfce92851 Mon Sep 17 00:00:00 2001 From: yann Date: Wed, 1 Mar 2017 13:57:03 +0100 Subject: [PATCH 12/21] pull/35#pullrequestreview-24456323 : les textareas --- src/v2/guide/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index a464ac6997..186de2b175 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -62,7 +62,7 @@ new Vue({ {% raw %} -

L'interpolation sur les textarea (<textarea>{{text}}</textarea>) ne fonctionnera pas. Utilisez v-model à la place.

+

L'interpolation sur les textareas (<textarea>{{text}}</textarea>) ne fonctionnera pas. Utilisez v-model à la place.

{% endraw %} ### Checkbox From 7d33cd3bc8eea38d4d39571845bae67b14a18bc9 Mon Sep 17 00:00:00 2001 From: yann Date: Wed, 1 Mar 2017 14:05:19 +0100 Subject: [PATCH 13/21] pull/35#pullrequestreview-24456323 : suppression ligne en trop --- src/v2/guide/forms.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index 186de2b175..bb24abed0e 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -69,7 +69,6 @@ new Vue({ Checkbox seule, valeur booléenne : - ``` html From ba8ac5776ffd862c929a2b7e4e6d5d4a0d9f0657 Mon Sep 17 00:00:00 2001 From: yann Date: Wed, 1 Mar 2017 14:17:07 +0100 Subject: [PATCH 14/21] pull/35#pullrequestreview-24456323 : suppression deuxieme ligne en trop --- src/v2/guide/forms.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index bb24abed0e..dfd180894a 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -276,7 +276,6 @@ new Vue({ Pour les options de bouton radio, checkbox et select, les valeurs de liaison de `v-model` sont habituellement des chaînes de caractères statiques (ou des booléens pour une checkbox) : - ``` html From 036bf2f25c4bedcf6322a43a4d1c7c4e00b18602 Mon Sep 17 00:00:00 2001 From: yann Date: Wed, 1 Mar 2017 14:18:08 +0100 Subject: [PATCH 15/21] pull/35#pullrequestreview-24456323 : suppression majuscule 'Lorsque' --- src/v2/guide/forms.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index dfd180894a..d73d908d6f 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -316,7 +316,7 @@ vm.toggle === vm.b ``` ``` js -// Lorsque c'est choisi : +// lorsque c'est choisi : vm.pick === vm.a ``` @@ -330,7 +330,7 @@ vm.pick === vm.a ``` ``` js -// Lorsque c'est sélectionné : +// lorsque c'est sélectionné : typeof vm.selected // -> 'object' vm.selected.number // -> 123 ``` From 07f1f0dd434399276616e560d5d926bd2567e2b6 Mon Sep 17 00:00:00 2001 From: yann Date: Wed, 1 Mar 2017 14:19:27 +0100 Subject: [PATCH 16/21] pull/35#pullrequestreview-24456323 : +### Options de select --- src/v2/guide/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index d73d908d6f..25a3239738 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -320,7 +320,7 @@ vm.toggle === vm.b vm.pick === vm.a ``` -### Options des select +### Options de select ``` html From 0598b8b50b380c1677774e579c6cbe8cfeb519bc Mon Sep 17 00:00:00 2001 From: yann Date: Wed, 1 Mar 2017 15:13:03 +0100 Subject: [PATCH 19/21] =?UTF-8?q?pull/35#pullrequestreview-24456323=20:=20?= =?UTF-8?q?inputs=20personnalis=C3=A9s=20=3D>=20champs=20personnalis=C3=A9?= =?UTF-8?q?s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index 0c72125e50..3254586fe8 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -368,7 +368,7 @@ Si vous voulez que les saisies utilisateurs soit automatiquement nettoyées des > Si vous n'êtes pas encore familier avec les composants de Vue, passez cette section pour le moment. -Les types de champ standards HTML ne couvriront pas toujours vos besoins. Heureusement, les composants de Vue vous permettent de construire des inputs avec un comportement complètement customisé. Ces inputs fonctionnent même avec `v-model` ! Pour en apprendre plus, lisez [inputs personnalisés](components.html#Form-Input-Components-using-Custom-Events) dans le guide des composants. +Les types de champ standards HTML ne couvriront pas toujours vos besoins. Heureusement, les composants de Vue vous permettent de construire des champs avec un comportement complètement personnalisé. Ces champs fonctionnent même avec `v-model` ! Pour en apprendre plus, lisez [champs personnalisés](components.html#Form-Input-Components-using-Custom-Events) dans le guide des composants. From 1541722559b5b574152b6a9563efd235acfd25a4 Mon Sep 17 00:00:00 2001 From: yann Date: Wed, 1 Mar 2017 21:50:01 +0100 Subject: [PATCH 20/21] =?UTF-8?q?forms.md=20:=20correctifs=20premi=C3=A8re?= =?UTF-8?q?=20relecture=20sylvain?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/forms.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index 3254586fe8..1057aeb97e 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -6,7 +6,7 @@ order: 10 ## Usage basique -Vous pouvez utilisez la directive `v-model` pour créer une liaison de donnée bidirectionnelle sur les champs de formulaire (input, select ou textarea). Elle choisira automatiquement la bonne manière de mettre à jour l'élément en fonction du type de champ. Bien qu'un peu magique, `v-model` est essentiellement un sucre syntaxique pour mettre à jour les données lors des évènements utilisateurs sur les champs, ainsi que quelques traitements spéciaux pour certains cas particuliers. +Vous pouvez utiliser la directive `v-model` pour créer une liaison de données bidirectionnelle sur les champs de formulaire (input, select ou textarea). Elle choisira automatiquement la bonne manière de mettre à jour l'élément en fonction du type de champ. Bien qu'un peu magique, `v-model` est essentiellement du sucre syntaxique pour mettre à jour les données lors des évènements de saisie utilisateur sur les champs, ainsi que quelques traitements spéciaux pour certains cas particuliers.

`v-model` ne prend pas en compte la valeur initiale (attribut "value") fournie pour un champ. Elle traitera toujours les données de l'instance de vue comme la source de vérité.

@@ -15,13 +15,13 @@ Vous pouvez utilisez la directive `v-model` pour créer une liaison de donnée b ### Texte ``` html - +

Le message est : {{ message }}

``` {% raw %}
- +

Le message est : {{ message }}