From ecbdf6b4caf6fe2fc561af55ea37c6143cbf798c Mon Sep 17 00:00:00 2001 From: yann Date: Thu, 2 Feb 2017 23:20:20 +0100 Subject: [PATCH 01/20] premier paragraphe syntax.md --- src/v2/guide/syntax.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index 9cee197921..cc37e668a2 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -4,28 +4,31 @@ type: guide order: 4 --- -

**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).**

Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance's data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers. +

**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).**

Vue.js utilise une syntaxe basée sur le HTML vous permettant de lier déclarativement le DOM rendu aux données de l'instance de Vue sous-jacente. Tous les templates de Vue.js sont du HTML valide qui peut être parsé par les navigateurs conformes aux spécifications et les parseurs HTML. -Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal amount of components to re-render and apply the minimal amount of DOM manipulations when the app state changes. +Sous le capot, Vue compile les templates en fonctions de rendu de DOM Virtuel. Combiné au système de réactivité, Vue est en mesure de déterminer judicieusement le nombre minimum de composants dont il doit re-déclencher le rendu et d'appliquer un nombre minimal de manipulation du DOM lorsque l'état de l'application change. If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also [directly write render functions](render-function.html) instead of templates, with optional JSX support. +Si vous êtes familiers avec les concepts de DOM Virtuel et que vous préférez la puissance à l'état brut de Javascript, vous pouvez aussi [écrire directement des fonctions de rendu](render-function.html) à la place des templates, avec un support de JSX optionnel. ## Interpolations -### Text +### Texte The most basic form of data binding is text interpolation using the "Mustache" syntax (double curly braces): +La forme la plus basique de liaison de donnée est l'interpolation de texte en utilisant la syntaxe "Moustache" (les accolades doubles) ``` html Message: {{ msg }} ``` -The mustache tag will be replaced with the value of the `msg` property on the corresponding data object. It will also be updated whenever the data object's `msg` property changes. +Le tag moustache sera remplacé par la valeur de la propriété `msg` sur l'objet data correspondant. Il sera également mis à jour à chaque fois que la propriété `msg` de l'objet data changera. You can also perform one-time interpolations that do not update on data change by using the [v-once directive](../api/#v-once), but keep in mind this will also affect any binding on the same node: +Vous pouvez également réaliser des interpolations uniques qui ne se mettront pas à jour lors du changement des données en utilisant la directive [v-once directive](../api/#v-once), mais gardez à l'esprit que cela affectera toutes les liaisons données présente sur le même noeud: ``` html -This will never change: {{ msg }} +Ceci ne changera jamais: {{ msg }} ``` ### Raw HTML From af44cec76e2763e5bc2e0bf48ad78791c151ed87 Mon Sep 17 00:00:00 2001 From: yann Date: Fri, 3 Feb 2017 22:59:32 +0100 Subject: [PATCH 02/20] [syntax.md] - save again --- src/v2/guide/syntax.md | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index cc37e668a2..ed27638b1c 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -8,14 +8,12 @@ order: 4 Sous le capot, Vue compile les templates en fonctions de rendu de DOM Virtuel. Combiné au système de réactivité, Vue est en mesure de déterminer judicieusement le nombre minimum de composants dont il doit re-déclencher le rendu et d'appliquer un nombre minimal de manipulation du DOM lorsque l'état de l'application change. -If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also [directly write render functions](render-function.html) instead of templates, with optional JSX support. Si vous êtes familiers avec les concepts de DOM Virtuel et que vous préférez la puissance à l'état brut de Javascript, vous pouvez aussi [écrire directement des fonctions de rendu](render-function.html) à la place des templates, avec un support de JSX optionnel. ## Interpolations ### Texte -The most basic form of data binding is text interpolation using the "Mustache" syntax (double curly braces): La forme la plus basique de liaison de donnée est l'interpolation de texte en utilisant la syntaxe "Moustache" (les accolades doubles) ``` html @@ -24,7 +22,6 @@ La forme la plus basique de liaison de donnée est l'interpolation de texte en u Le tag moustache sera remplacé par la valeur de la propriété `msg` sur l'objet data correspondant. Il sera également mis à jour à chaque fois que la propriété `msg` de l'objet data changera. -You can also perform one-time interpolations that do not update on data change by using the [v-once directive](../api/#v-once), but keep in mind this will also affect any binding on the same node: Vous pouvez également réaliser des interpolations uniques qui ne se mettront pas à jour lors du changement des données en utilisant la directive [v-once directive](../api/#v-once), mais gardez à l'esprit que cela affectera toutes les liaisons données présente sur le même noeud: ``` html @@ -39,19 +36,19 @@ The double mustaches interprets the data as plain text, not HTML. In order to ou
``` -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 -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 8e1b33d52871011c2985c71b00e23fd8fb565b46 Mon Sep 17 00:00:00 2001 From: yann Date: Fri, 3 Feb 2017 23:20:58 +0100 Subject: [PATCH 03/20] [syntax.md] - save another paragraph draft --- src/v2/guide/syntax.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index ed27638b1c..7cb9c4af63 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -56,39 +56,40 @@ Cela fonctionne également pour les attributs booléens - l'attribut sera suppri ### Using JavaScript Expressions -So far we've only been binding to simple property keys in our templates. But Vue.js actually supports the full power of JavaScript expressions inside all data bindings: +Jusqu'ici, nous avons seulement lié de simples propriétés dans nos templates. Mais Vue.js supporte en réalité toute la puissance des expression Javascript à l'intérieur de toutes les liaisons de données. ``` html {{ number + 1 }} -{{ ok ? 'YES' : 'NO' }} +{{ ok ? 'OUI' : 'NON' }} {{ message.split('').reverse().join('') }}
``` -These expressions will be evaluated as JavaScript in the data scope of the owner Vue instance. One restriction is that each binding can only contain **one single expression**, so the following will **NOT** work: +Ces expressions seront évaluées en tant que Javascript dans la portée des données de la Vue instance propriétaire. Une restriction est que chacune de ces liaisons ne peut contenir **qu'une seule expression**, donc ce qui suit ne fonctionnera **PAS** ``` html - + {{ var a = 1 }} + {{ if (ok) { return message } }} ``` -

Template expressions are sandboxed and only have access to a whitelist of globals such as `Math` and `Date`. You should not attempt to access user defined globals in template expressions.

+

Les expressions de template sont sandboxées et ont seulement accès à une liste blanche de globales telles que `Math` et `Date`. Vous ne devriez pas tenter d'accéder à des variables globales définies par l'utilisateur dans les expressions de template

## Directives -Directives are special attributes with the `v-` prefix. Directive attribute values are expected to be **a single JavaScript expression** (with the exception for `v-for`, which will be discussed later). A directive's job is to reactively apply side effects to the DOM when the value of its expression changes. Let's review the example we saw in the introduction: +Les directives sont des attributs spéciaux avec le prefixe `v-`. Les valeurs attendues pour les attributs directives sont **une unique expression Javascript** (A l'exception de `v-for`, qui sera discuté plus loin). Le travail d'une directive est d'appliquer réactivement des effets au DOM quand la valeur de son expression change. Revenons à l'exemple vu dans l'introduction : ``` html -

Now you see me

+

Maintenant vous me voyez

``` -Here, the `v-if` directive would remove/insert the `

` element based on the truthiness of the value of the expression `seen`. +Ici, la directive `v-if` enleverait / insererait l'élement `

` basé sur l'évaluation à vrai de la valeur de l'expression `seen`. ### Arguments From 334525bb4129cc327968c91385aed9afe7abebbe Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 6 Feb 2017 20:38:27 +0100 Subject: [PATCH 04/20] [syntax.md] relecture introduction --- src/v2/guide/syntax.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index 7cb9c4af63..a9a688ce5c 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -1,14 +1,14 @@ --- -title: Template Syntax +title: La syntaxe des templates type: guide order: 4 --- -

**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).**

Vue.js utilise une syntaxe basée sur le HTML vous permettant de lier déclarativement le DOM rendu aux données de l'instance de Vue sous-jacente. Tous les templates de Vue.js sont du HTML valide qui peut être parsé par les navigateurs conformes aux spécifications et les parseurs HTML. +

**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).**

Vue.js utilise une syntaxe basée sur le HTML qui vous permet de lier déclarativement le DOM rendu aux données de l'instance de Vue sous-jacente. Tous les templates de Vue.js sont du HTML valide qui peut être parsé par les navigateurs conformes aux spécifications et les parseurs HTML. -Sous le capot, Vue compile les templates en fonctions de rendu de DOM Virtuel. Combiné au système de réactivité, Vue est en mesure de déterminer judicieusement le nombre minimum de composants dont il doit re-déclencher le rendu et d'appliquer un nombre minimal de manipulation du DOM lorsque l'état de l'application change. +Sous le capot, Vue compile les templates en fonctions de rendu de DOM Virtuel. Combiné au système de réactivité, Vue est en mesure de déterminer intelligemment le nombre minimum de composants dont il faut re-faire le rendu et d'appliquer le nombre minimales de manipulation au DOM quand l'état de l'application change. -Si vous êtes familiers avec les concepts de DOM Virtuel et que vous préférez la puissance à l'état brut de Javascript, vous pouvez aussi [écrire directement des fonctions de rendu](render-function.html) à la place des templates, avec un support de JSX optionnel. +Si vous êtes familiers avec les concepts de DOM Virtuel et que vous préférez la puissance à l'état brut du Javascript, vous pouvez aussi [écrire directement des fonctions de rendu](render-function.html) à la place des templates, avec un support de JSX optionnel. ## Interpolations From 60df2a85d6c42c91932dea2dec43b581bd3ef4bf Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 6 Feb 2017 20:44:26 +0100 Subject: [PATCH 05/20] [syntax.md] relecture deuxieme paragraphe --- src/v2/guide/syntax.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index a9a688ce5c..63168f3799 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -14,15 +14,15 @@ Si vous êtes familiers avec les concepts de DOM Virtuel et que vous préférez ### Texte -La forme la plus basique de liaison de donnée est l'interpolation de texte en utilisant la syntaxe "Moustache" (les accolades doubles) +La forme de base de la liaison de donnée est l'interpolation de texte en utilisant la syntaxe "Moustache" (les doubes accolades) ``` html Message: {{ msg }} ``` -Le tag moustache sera remplacé par la valeur de la propriété `msg` sur l'objet data correspondant. Il sera également mis à jour à chaque fois que la propriété `msg` de l'objet data changera. +Le tag moustache sera remplacé par la valeur de la propriété `msg` sur l'objet data correspondant. Il sera également mis à jour chaque fois que la propriété `msg` de l'objet data changera. -Vous pouvez également réaliser des interpolations uniques qui ne se mettront pas à jour lors du changement des données en utilisant la directive [v-once directive](../api/#v-once), mais gardez à l'esprit que cela affectera toutes les liaisons données présente sur le même noeud: +Vous pouvez également réaliser des interpolations uniques qui ne se mettront pas à jour lors de la modification des données en utilisant la directive [v-once directive](../api/#v-once), mais gardez à l'esprit que cela affectera toutes les liaisons données présentes sur le même noeud: ``` html Ceci ne changera jamais: {{ msg }} From 0bd3ed49b7dda9a9ea56dd2b91ccb08594912ce2 Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 6 Feb 2017 21:27:14 +0100 Subject: [PATCH 06/20] syntax.md : relecture raw html --- src/v2/guide/syntax.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index 63168f3799..9090c9f56b 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -1,12 +1,12 @@ --- -title: La syntaxe des templates +title: La syntaxe de template type: guide order: 4 --- -

**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).**

Vue.js utilise une syntaxe basée sur le HTML qui vous permet de lier déclarativement le DOM rendu aux données de l'instance de Vue sous-jacente. Tous les templates de Vue.js sont du HTML valide qui peut être parsé par les navigateurs conformes aux spécifications et les parseurs HTML. +

**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).**

Vue.js utilise une syntaxe basée sur le HTML qui vous permet de lier déclarativement le DOM rendu aux données de l'instance de Vue sous-jacente. Tous les templates de Vue.js sont du HTML valide qui peut être interprété par les navigateurs conformes aux spécifications et les interpréteurs HTML. -Sous le capot, Vue compile les templates en fonctions de rendu de DOM Virtuel. Combiné au système de réactivité, Vue est en mesure de déterminer intelligemment le nombre minimum de composants dont il faut re-faire le rendu et d'appliquer le nombre minimales de manipulation au DOM quand l'état de l'application change. +Sous le capot, Vue compile les templates en fonctions de rendu de DOM Virtuel. Combiné au système de réactivité, Vue est en mesure de déterminer intelligemment le nombre minimum de composants pour lesquels il faut re-déclencher le rendu et d'appliquer le nombre minimales de manipulations au DOM quand l'état de l'application change. Si vous êtes familiers avec les concepts de DOM Virtuel et que vous préférez la puissance à l'état brut du Javascript, vous pouvez aussi [écrire directement des fonctions de rendu](render-function.html) à la place des templates, avec un support de JSX optionnel. @@ -20,9 +20,9 @@ La forme de base de la liaison de donnée est l'interpolation de texte en utilis Message: {{ msg }} ``` -Le tag moustache sera remplacé par la valeur de la propriété `msg` sur l'objet data correspondant. Il sera également mis à jour chaque fois que la propriété `msg` de l'objet data changera. +Le tag moustache sera remplacé par la valeur de la propriété `msg` de l'objet data correspondant. Il sera également mis à jour à chaque fois que la propriété `msg` de l'objet data changera. -Vous pouvez également réaliser des interpolations uniques qui ne se mettront pas à jour lors de la modification des données en utilisant la directive [v-once directive](../api/#v-once), mais gardez à l'esprit que cela affectera toutes les liaisons données présentes sur le même noeud: +Vous pouvez également réaliser des interpolations uniques qui ne se mettront pas à jour lors de la modification des données en utilisant la [directive v-once](../api/#v-once), mais gardez à l'esprit que cela affectera toutes les liaisons de données présentes sur le même noeud: ``` html Ceci ne changera jamais: {{ msg }} @@ -30,15 +30,15 @@ Vous pouvez également réaliser des interpolations uniques qui ne se mettront p ### 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: +Les doubles moustaches interprètent la donnée en tant que texte brut, pas en tant que HTML. Pour afficher réellement du HTML, vous aurez besoin d'utiliser la directive `v-html` ``` html
``` -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. +Le contenus sont alors insérés en tant que simple HTML - les liaisons de données sont ignorées. A noter que vous ne pouvez pas utiliser `v-html` pour composer des fragments de templates, 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érés en tant qu'unité de base pour la réutilisabilité et la composition de l'IU (Interface Utilisateur). -

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

+

Générer dynamiquement le rendu de 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 fourni par un utilisateur

### Attributes From caa43dcb85763da99d9f92a6fdfff1fd77c25d53 Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 6 Feb 2017 21:29:51 +0100 Subject: [PATCH 07/20] syntax.md : relecture chapitre attributes --- src/v2/guide/syntax.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index 9090c9f56b..ed2e7f414f 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -45,13 +45,13 @@ Le contenus sont alors insérés en tant que simple HTML - les liaisons de don 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 -
+
``` -Cela fonctionne également pour les attributs booléens - l'attribut sera supprimé si la condition est évaluée à faux : +Cela fonctionne également pour les attributs booléens - l'attribut sera retiré si la condition est évaluée à faux : ``` html - + ``` ### Using JavaScript Expressions From 9a2ed8403ba865d7b57db538ff6013234ea13fbb Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 6 Feb 2017 22:01:47 +0100 Subject: [PATCH 08/20] syntax.md - relecture intro directives --- src/v2/guide/syntax.md | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index ed2e7f414f..7c4db1bfd0 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -28,7 +28,7 @@ Vous pouvez également réaliser des interpolations uniques qui ne se mettront p Ceci ne changera jamais: {{ msg }} ``` -### Raw HTML +### interpétation du HTML Les doubles moustaches interprètent la donnée en tant que texte brut, pas en tant que HTML. Pour afficher réellement du HTML, vous aurez besoin d'utiliser la directive `v-html` @@ -36,11 +36,11 @@ Les doubles moustaches interprètent la donnée en tant que texte brut, pas en t
``` -Le contenus sont alors insérés en tant que simple HTML - les liaisons de données sont ignorées. A noter que vous ne pouvez pas utiliser `v-html` pour composer des fragments de templates, 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érés en tant qu'unité de base pour la réutilisabilité et la composition de l'IU (Interface Utilisateur). +Le contenus sont alors insérés en tant que simple HTML - les liaisons de données sont ignorées. A noter que vous ne pouvez pas utiliser `v-html` pour composer des fragments de templates, 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érés en tant qu'unité de base pour la réutilisabilité et la composition de l'IU (Interface Utilisateur).

Générer dynamiquement le rendu de 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 fourni par un utilisateur

-### Attributes +### Attributs Les Moustaches ne peuvent pas être utilisées à l'intérieur des attributs HTML, à la place utilisez une [directive v-bind](../api/#v-bind): @@ -54,12 +54,12 @@ Cela fonctionne également pour les attributs booléens - l'attribut sera retir ``` -### Using JavaScript Expressions +### Utiliser des expressions Javascript -Jusqu'ici, nous avons seulement lié de simples propriétés dans nos templates. Mais Vue.js supporte en réalité toute la puissance des expression Javascript à l'intérieur de toutes les liaisons de données. +Jusqu'ici, nous avons seulement lié de simples clefs de propriétés dans nos templates. Mais Vue.js supporte en réalité toute la puissance des expressions Javascript à l'intérieur de toutes les liaisons de données. ``` html -{{ number + 1 }} +{{ nombre + 1 }} {{ ok ? 'OUI' : 'NON' }} @@ -68,28 +68,27 @@ Jusqu'ici, nous avons seulement lié de simples propriétés dans nos templates.
``` -Ces expressions seront évaluées en tant que Javascript dans la portée des données de la Vue instance propriétaire. Une restriction est que chacune de ces liaisons ne peut contenir **qu'une seule expression**, donc ce qui suit ne fonctionnera **PAS** +Ces expressions seront évaluées en tant que Javascript au sein de la portée des données de l'instance de Vue propriétaire. Une restriction est que chacune de ces liaisons ne peut contenir **qu'une seule expression**, donc ce qui suit ne fonctionnera **PAS** ``` html {{ var a = 1 }} - {{ if (ok) { return message } }} ``` -

Les expressions de template sont sandboxées et ont seulement accès à une liste blanche de globales telles que `Math` et `Date`. Vous ne devriez pas tenter d'accéder à des variables globales définies par l'utilisateur dans les expressions de template

+

Les expressions de template sont sandboxées et ont seulement accès à une liste blanche de globales telles que `Math` et `Date`. Vous ne devriez pas tenter d'accéder à des variables globales définies par l'utilisateur dans les expressions de template.

## Directives -Les directives sont des attributs spéciaux avec le prefixe `v-`. Les valeurs attendues pour les attributs directives sont **une unique expression Javascript** (A l'exception de `v-for`, qui sera discuté plus loin). Le travail d'une directive est d'appliquer réactivement des effets au DOM quand la valeur de son expression change. Revenons à l'exemple vu dans l'introduction : +Les directives sont des attributs spéciaux avec le prefixe `v-`. Les valeurs attendues pour les attributs directives sont **une unique expression Javascript** (A l'exception de `v-for`, qui sera discuté plus loin). Le travail d'une directive est d'appliquer réactivement des effets secondaires au DOM quand la valeur de son expression change. Revenons à l'exemple vu dans l'introduction : ``` html

Maintenant vous me voyez

``` -Ici, la directive `v-if` enleverait / insererait l'élement `

` basé sur l'évaluation à vrai de la valeur de l'expression `seen`. +Ici, la directive `v-if` retirerait / insererait l'élement `

` basé sur l'évaluation à vrai de la valeur de l'expression `seen`. ### Arguments From 6ddb29e658a8354e5b5972d28ca985599a8a9d89 Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 6 Feb 2017 22:16:21 +0100 Subject: [PATCH 09/20] syntax.md : fin de traduction du chapitre des modificateurs --- src/v2/guide/syntax.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index 7c4db1bfd0..85700b9e14 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -92,31 +92,31 @@ Ici, la directive `v-if` retirerait / insererait l'élement `

` basé sur l'é ### Arguments -Some directives can take an "argument", denoted by a colon after the directive name. For example, the `v-bind` directive is used to reactively update an HTML attribute: +Certains directives peuvent prend un argument, indiqué par deux petits points après le nom de la directive. Par exemple, la directive `v-bind` est utilisée pour mettre à jour réactivement un attribut HTML : ``` html ``` -Here `href` is the argument, which tells the `v-bind` directive to bind the element's `href` attribute to the value of the expression `url`. +Ici `href`est un argument, qui dit à la directive `v-bind` de lier l'attribut `href` de l'élément à la valeur de l'expression `url` -Another example is the `v-on` directive, which listens to DOM events: +Un autre exemple est la directive `v-on`, qui écoute les évènements du DOM : ``` html - + ``` -Here the argument is the event name to listen to. We will talk about event handling in more detail too. +Ici l'argument est le nom de l'évènement à écouter. Nous parlerons aussi de la gestion des évènements plus en détail. -### Modifiers +### Modificateurs -Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the `.prevent` modifier tells the `v-on` directive to call `event.preventDefault()` on the triggered event: +Les modificateurs sont des suffixes indiqués par un point, qui indique qu'une directivement devrait être lié d'une manière spécifique. Par exemple, le modificateur `.prevent`dit à la directive `v-on` d'appeler `Using JavaScript Expressions` sur l'évènement déclenché. ``` html

``` -We will see more use of modifiers later when we take a more thorough look at `v-on` and `v-model`. +Nous verrons plus de cas d'utilisations des modificateurs plus loin quand nous porterons un regard plus attentif à `v-on` et `v-model` ## Filters From d9a578e823b59648ab625d6de3c3dac400bd4142 Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 6 Feb 2017 23:05:56 +0100 Subject: [PATCH 10/20] =?UTF-8?q?syntax.md=20-=20fin=20premi=C3=A8re=20pas?= =?UTF-8?q?se=20de=20traduction?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/syntax.md | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index 85700b9e14..b298e22b4c 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -118,21 +118,21 @@ Les modificateurs sont des suffixes indiqués par un point, qui indique qu'une d Nous verrons plus de cas d'utilisations des modificateurs plus loin quand nous porterons un regard plus attentif à `v-on` et `v-model` -## Filters +## Filtres -Vue.js allows you to define filters that can be used to apply common text formatting. Filters are usable in two places: **mustache interpolations and `v-bind` expressions**. Filters should be appended to the end of the JavaScript expression, denoted by the "pipe" symbol: +Vue.js permet de définir des filtres qui peuvent être utilisés pour appliquer des formatages de textes courants. Les filtres sont utilisables à deux endroits : **les interpolations de moustaches et les expressions de v-bind**. Les filtres doivent être ajoutés à la fin de l'expression Javascript, indiqués par le symbole de la barre verticale : ``` html - + {{ message | capitalize }} - +
``` -

Vue 2.x filters can only be used inside mustache interpolations and `v-bind` expressions (the latter supported since 2.1.0), because filters are primarily designed for text transformation purposes. For more complex data transforms in other directives, you should use [Computed properties](computed.html) instead.

+

Les filtres de Vue 2.x peuvent être seulement utilisés à l'intérieur des interpolations moustaches et des expressions de `v-bind` ( ces dernières étant supportés depuis la 2.1.0) car les filtres ont été conçus à la base dans le but de transformer du texte. Pour des cas plus complexes de transformation de données dans d'autres directives, vous devriez utilisez les [propriétés calculées](computed.html) à la place.

-The filter function always receives the expression's value as the first argument. +La fonction de filtre reçoit toujours la valeur de l'expression comme premier argument. ``` js new Vue({ @@ -147,43 +147,43 @@ new Vue({ }) ``` -Filters can be chained: +Les filtres peuvent être enchainés : ``` html {{ message | filterA | filterB }} ``` -Filters are JavaScript functions, therefore they can take arguments: +Les filtres sont des fonctions Javascript et peuvent donc recevoir des arguments : ``` html {{ message | filterA('arg1', arg2) }} ``` -Here, the plain string `'arg1'` will be passed into the filter as the second argument, and the value of expression `arg2` will be evaluated and passed in as the third argument. +Ici la chaîne de caractères `'arg1'` sera passé au filtre en tant que second argument, and la valeur de l'expression `arg2` sera évaluée et passée en tant que troisième argument. -## Shorthands +## Abréviations -The `v-` prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the `v-` prefix becomes less important when you are building an [SPA](https://en.wikipedia.org/wiki/Single-page_application) where Vue.js manages every template. Therefore, Vue.js provides special shorthands for two of the most often used directives, `v-bind` and `v-on`: +Le préfixe `v-` sert d'indicateur visuel pour identifier les attributs spécifiques à Vue dans vos templates. C'est pratique lorsque vous utilisez Vue.js pour appliquer des comportements dynamiques sur un balisage existant, mais peut sembler verbeux pour les directives utilisées fréquemment. Par ailleurs, le besoin pour le préfixe `v-`devient moins important quand vous développez une [application monopage](https://fr.wikipedia.org/wiki/Application_web_monopage) où Vue.js gère tous les templates. C'est pourquoi Vue.js fournit des abréviations pour deux des directives les plus utilisées, `v-bind` et `v-on`: -### `v-bind` Shorthand +### Abréviation pour `v-bind` ``` html - +
- + ``` -### `v-on` Shorthand +### Abréviation pour `v-on` ``` html - + - - + + ``` -They may look a bit different from normal HTML, but `:` and `@` are valid chars for attribute names and all Vue.js supported browsers can parse it correctly. In addition, they do not appear in the final rendered markup. The shorthand syntax is totally optional, but you will likely appreciate it when you learn more about its usage later. +Cela peut paraître un peu différent du HTML classique mais `:` et `@` sont des caractères valides pour des noms d'attributs et tous les navigateurs supportés par Vue.js peuvent l'interpréter correctement. De plus, ils n'apparaissent pas dans le balisage final. La syntaxe abrégée est totalement optionnelle, but vous allez probablement l'apprécier quand vous en apprendrez plus sur son usage plus loin. From 98f01d94338dce6b5771e90f3813e8212440e31f Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 6 Feb 2017 23:07:56 +0100 Subject: [PATCH 11/20] =?UTF-8?q?syntax.md=20:=20suppression=20de=20l'enca?= =?UTF-8?q?rt=20concernant=20la=20traduction=20fran=C3=A7aise?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/syntax.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index b298e22b4c..9a1e53c7ec 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -4,7 +4,7 @@ type: guide order: 4 --- -

**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).**

Vue.js utilise une syntaxe basée sur le HTML qui vous permet de lier déclarativement le DOM rendu aux données de l'instance de Vue sous-jacente. Tous les templates de Vue.js sont du HTML valide qui peut être interprété par les navigateurs conformes aux spécifications et les interpréteurs HTML. +Vue.js utilise une syntaxe basée sur le HTML qui vous permet de lier déclarativement le DOM rendu aux données de l'instance de Vue sous-jacente. Tous les templates de Vue.js sont du HTML valide qui peut être interprété par les navigateurs conformes aux spécifications et les interpréteurs HTML. Sous le capot, Vue compile les templates en fonctions de rendu de DOM Virtuel. Combiné au système de réactivité, Vue est en mesure de déterminer intelligemment le nombre minimum de composants pour lesquels il faut re-déclencher le rendu et d'appliquer le nombre minimales de manipulations au DOM quand l'état de l'application change. From 961c076f9afe80988bc1675b9bba11111af5c765 Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 6 Feb 2017 23:08:38 +0100 Subject: [PATCH 12/20] syntax.md - suppression du mot anglais 'but' --- src/v2/guide/syntax.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index 9a1e53c7ec..1ce61bf85c 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -186,4 +186,4 @@ Le préfixe `v-` sert d'indicateur visuel pour identifier les attributs spécifi ``` -Cela peut paraître un peu différent du HTML classique mais `:` et `@` sont des caractères valides pour des noms d'attributs et tous les navigateurs supportés par Vue.js peuvent l'interpréter correctement. De plus, ils n'apparaissent pas dans le balisage final. La syntaxe abrégée est totalement optionnelle, but vous allez probablement l'apprécier quand vous en apprendrez plus sur son usage plus loin. +Cela peut paraître un peu différent du HTML classique mais `:` et `@` sont des caractères valides pour des noms d'attributs et tous les navigateurs supportés par Vue.js peuvent l'interpréter correctement. De plus, ils n'apparaissent pas dans le balisage final. La syntaxe abrégée est totalement optionnelle, mais vous allez probablement l'apprécier quand vous en apprendrez plus sur son usage plus loin. From 004c03f94392af11af2c3a650ea7464311c7644c Mon Sep 17 00:00:00 2001 From: yann Date: Tue, 7 Feb 2017 20:53:42 +0100 Subject: [PATCH 13/20] =?UTF-8?q?derni=C3=A8re=20relecture?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/syntax.md | 48 +++++++++++++++++++++--------------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index 1ce61bf85c..ef5d222a6d 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -1,5 +1,5 @@ --- -title: La syntaxe de template +title: Syntaxe de template type: guide order: 4 --- @@ -8,13 +8,13 @@ Vue.js utilise une syntaxe basée sur le HTML qui vous permet de lier déclarati Sous le capot, Vue compile les templates en fonctions de rendu de DOM Virtuel. Combiné au système de réactivité, Vue est en mesure de déterminer intelligemment le nombre minimum de composants pour lesquels il faut re-déclencher le rendu et d'appliquer le nombre minimales de manipulations au DOM quand l'état de l'application change. -Si vous êtes familiers avec les concepts de DOM Virtuel et que vous préférez la puissance à l'état brut du Javascript, vous pouvez aussi [écrire directement des fonctions de rendu](render-function.html) à la place des templates, avec un support de JSX optionnel. +Si vous êtes familiers avec les concepts de DOM Virtuel et que vous préférez la puissance du Javascript pur, vous pouvez aussi [écrire directement des fonctions de rendu](render-function.html) à la place des templates, avec un support de JSX optionnel. ## Interpolations ### Texte -La forme de base de la liaison de donnée est l'interpolation de texte en utilisant la syntaxe "Moustache" (les doubes accolades) +La forme de base de la liaison de donnée est l'interpolation de texte en utilisant la syntaxe "Moustache" (les doubles accolades) ``` html Message: {{ msg }} @@ -28,7 +28,7 @@ Vous pouvez également réaliser des interpolations uniques qui ne se mettront p Ceci ne changera jamais: {{ msg }} ``` -### interpétation du HTML +### Interpétation du HTML Les doubles moustaches interprètent la donnée en tant que texte brut, pas en tant que HTML. Pour afficher réellement du HTML, vous aurez besoin d'utiliser la directive `v-html` @@ -36,30 +36,30 @@ Les doubles moustaches interprètent la donnée en tant que texte brut, pas en t
``` -Le contenus sont alors insérés en tant que simple HTML - les liaisons de données sont ignorées. A noter que vous ne pouvez pas utiliser `v-html` pour composer des fragments de templates, 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érés en tant qu'unité de base pour la réutilisabilité et la composition de l'IU (Interface Utilisateur). +Le contenu est alors inséré en tant que HTML classique - les liaisons de données sont ignorées. À noter que vous ne pouvez pas utiliser `v-html` pour composer des fragments de templates, 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érés en tant qu'unité de base pour la réutilisabilité et la composition de l'IU (Interface Utilisateur). -

Générer dynamiquement le rendu de 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 fourni par un utilisateur

+

Générer dynamiquement du 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

### Attributs 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 -
+
``` Cela fonctionne également pour les attributs booléens - l'attribut sera retiré si la condition est évaluée à faux : ``` html - + ``` ### Utiliser des expressions Javascript -Jusqu'ici, nous avons seulement lié de simples clefs de propriétés dans nos templates. Mais Vue.js supporte en réalité toute la puissance des expressions Javascript à l'intérieur de toutes les liaisons de données. +Jusqu'ici, nous avons seulement lié de simples clés de propriétés dans nos templates. Mais Vue.js supporte en réalité toute la puissance des expressions Javascript à l'intérieur de toutes les liaisons de données. ``` html -{{ nombre + 1 }} +{{ number + 1 }} {{ ok ? 'OUI' : 'NON' }} @@ -78,21 +78,21 @@ Ces expressions seront évaluées en tant que Javascript au sein de la portée d {{ if (ok) { return message } }} ``` -

Les expressions de template sont sandboxées et ont seulement accès à une liste blanche de globales telles que `Math` et `Date`. Vous ne devriez pas tenter d'accéder à des variables globales définies par l'utilisateur dans les expressions de template.

+

Les expressions de template sont isolées et ont accès seulement à une liste blanche de globales telles que `Math` et `Date`. Vous ne devriez pas tenter d'accéder à des variables globales définies par l'utilisateur dans les expressions de template.

## Directives -Les directives sont des attributs spéciaux avec le prefixe `v-`. Les valeurs attendues pour les attributs directives sont **une unique expression Javascript** (A l'exception de `v-for`, qui sera discuté plus loin). Le travail d'une directive est d'appliquer réactivement des effets secondaires au DOM quand la valeur de son expression change. Revenons à l'exemple vu dans l'introduction : +Les directives sont des attributs spéciaux avec le prefixe `v-`. Les valeurs attendues pour les attributs de directives sont **une unique expression Javascript** (A l'exception de `v-for`, qui sera discuté plus loin). Le travail d'une directive est d'appliquer réactivement des effets secondaires au DOM quand la valeur de son expression change. Revenons à l'exemple vu dans l'introduction : ``` html

Maintenant vous me voyez

``` -Ici, la directive `v-if` retirerait / insererait l'élement `

` basé sur l'évaluation à vrai de la valeur de l'expression `seen`. +Ici, la directive `v-if` retirerait / insererait l'élement `

` en se basant sur l'évaluation à vrai de la valeur de l'expression `seen`. ### Arguments -Certains directives peuvent prend un argument, indiqué par deux petits points après le nom de la directive. Par exemple, la directive `v-bind` est utilisée pour mettre à jour réactivement un attribut HTML : +Certaines directives peuvent prendre un argument, indiqué par deux petits points après le nom de la directive. Par exemple, la directive `v-bind` est utilisée pour mettre à jour réactivement un attribut HTML : ``` html @@ -103,20 +103,20 @@ Ici `href`est un argument, qui dit à la directive `v-bind` de lier l'attribut ` Un autre exemple est la directive `v-on`, qui écoute les évènements du DOM : ``` html - + ``` -Ici l'argument est le nom de l'évènement à écouter. Nous parlerons aussi de la gestion des évènements plus en détail. +Ici l'argument est le nom de l'évènement à écouter. Nous parlerons aussi plus en détail de la gestion des évènements. ### Modificateurs -Les modificateurs sont des suffixes indiqués par un point, qui indique qu'une directivement devrait être lié d'une manière spécifique. Par exemple, le modificateur `.prevent`dit à la directive `v-on` d'appeler `Using JavaScript Expressions` sur l'évènement déclenché. +Les modificateurs sont des suffixes indiqués par un point, qui indique qu'une directive devrait être lié d'une manière spécifique. Par exemple, le modificateur `.prevent` dit à la directive `v-on` d'appeler `event.preventDefault()` lorsque l'évènement survient. ``` html

``` -Nous verrons plus de cas d'utilisations des modificateurs plus loin quand nous porterons un regard plus attentif à `v-on` et `v-model` +Nous verrons plus de cas d'utilisations des modificateurs plus loin quand nous porterons un regard plus attentif sur `v-on` et `v-model` ## Filtres @@ -130,7 +130,7 @@ Vue.js permet de définir des filtres qui peuvent être utilisés pour appliquer
``` -

Les filtres de Vue 2.x peuvent être seulement utilisés à l'intérieur des interpolations moustaches et des expressions de `v-bind` ( ces dernières étant supportés depuis la 2.1.0) car les filtres ont été conçus à la base dans le but de transformer du texte. Pour des cas plus complexes de transformation de données dans d'autres directives, vous devriez utilisez les [propriétés calculées](computed.html) à la place.

+

Les filtres de Vue 2.x peuvent être seulement utilisés à l'intérieur des interpolations de moustaches et des expressions de `v-bind` ( ces dernières étant supportées depuis la 2.1.0) car les filtres ont été conçus à la base dans le but de transformer du texte. Pour des cas plus complexes de transformation de données dans d'autres directives, vous devriez utiliser les [propriétés calculées](computed.html) à la place.

La fonction de filtre reçoit toujours la valeur de l'expression comme premier argument. @@ -147,7 +147,7 @@ new Vue({ }) ``` -Les filtres peuvent être enchainés : +Les filtres peuvent être chainés : ``` html {{ message | filterA | filterB }} @@ -159,11 +159,11 @@ Les filtres sont des fonctions Javascript et peuvent donc recevoir des arguments {{ message | filterA('arg1', arg2) }} ``` -Ici la chaîne de caractères `'arg1'` sera passé au filtre en tant que second argument, and la valeur de l'expression `arg2` sera évaluée et passée en tant que troisième argument. +Ici la chaîne de caractères `'arg1'` sera passée au filtre en tant que second argument, et la valeur de l'expression `arg2` sera évaluée et passée en tant que troisième argument. ## Abréviations -Le préfixe `v-` sert d'indicateur visuel pour identifier les attributs spécifiques à Vue dans vos templates. C'est pratique lorsque vous utilisez Vue.js pour appliquer des comportements dynamiques sur un balisage existant, mais peut sembler verbeux pour les directives utilisées fréquemment. Par ailleurs, le besoin pour le préfixe `v-`devient moins important quand vous développez une [application monopage](https://fr.wikipedia.org/wiki/Application_web_monopage) où Vue.js gère tous les templates. C'est pourquoi Vue.js fournit des abréviations pour deux des directives les plus utilisées, `v-bind` et `v-on`: +Le préfixe `v-` sert d'indicateur visuel pour identifier les attributs spécifiques à Vue dans vos templates. C'est pratique lorsque vous utilisez Vue.js pour appliquer des comportements dynamiques sur un balisage existant, mais peut sembler verbeux pour des directives utilisées fréquemment. Par ailleurs, le besoin pour le préfixe `v-`devient moins important quand vous développez une [application monopage](https://fr.wikipedia.org/wiki/Application_web_monopage) où Vue.js gère tous les templates. C'est pourquoi Vue.js fournit des abréviations pour deux des directives les plus utilisées, `v-bind` et `v-on`: ### Abréviation pour `v-bind` @@ -183,7 +183,7 @@ Le préfixe `v-` sert d'indicateur visuel pour identifier les attributs spécifi
- + ``` -Cela peut paraître un peu différent du HTML classique mais `:` et `@` sont des caractères valides pour des noms d'attributs et tous les navigateurs supportés par Vue.js peuvent l'interpréter correctement. De plus, ils n'apparaissent pas dans le balisage final. La syntaxe abrégée est totalement optionnelle, mais vous allez probablement l'apprécier quand vous en apprendrez plus sur son usage plus loin. +Cela peut paraître un peu différent du HTML classique mais `:` et `@` sont des caractères valides pour des noms d'attributs et tous les navigateurs supportés par Vue.js peuvent l'interpréter correctement. De plus, ils n'apparaissent pas dans le balisage final. La syntaxe abrégée est totalement optionnelle, mais vous allez probablement l'apprécier quand vous en apprendrez plus sur son utilisation plus loin. From 91d45d9f87db8699636f2ae3423821e48540584a Mon Sep 17 00:00:00 2001 From: yann Date: Fri, 10 Feb 2017 14:36:03 +0100 Subject: [PATCH 14/20] =?UTF-8?q?syntax.md=20:=20relecture=20suite=20?= =?UTF-8?q?=C3=A0=20premi=C3=A8re=20review=20@Haerisis?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/syntax.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index ef5d222a6d..bf02f65e1d 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -8,24 +8,24 @@ Vue.js utilise une syntaxe basée sur le HTML qui vous permet de lier déclarati Sous le capot, Vue compile les templates en fonctions de rendu de DOM Virtuel. Combiné au système de réactivité, Vue est en mesure de déterminer intelligemment le nombre minimum de composants pour lesquels il faut re-déclencher le rendu et d'appliquer le nombre minimales de manipulations au DOM quand l'état de l'application change. -Si vous êtes familiers avec les concepts de DOM Virtuel et que vous préférez la puissance du Javascript pur, vous pouvez aussi [écrire directement des fonctions de rendu](render-function.html) à la place des templates, avec un support de JSX optionnel. +Si vous êtes familiers avec les concepts de DOM Virtuel et que vous préférez la puissance du JavaScript pur, vous pouvez aussi [écrire directement des fonctions de rendu](render-function.html) à la place des templates, avec un support de JSX optionnel. ## Interpolations ### Texte -La forme de base de la liaison de donnée est l'interpolation de texte en utilisant la syntaxe "Moustache" (les doubles accolades) +La forme de base de la liaison de donnée est l'interpolation de texte en utilisant la syntaxe "Mustache" (les doubles accolades) ``` html Message: {{ msg }} ``` -Le tag moustache sera remplacé par la valeur de la propriété `msg` de l'objet data correspondant. Il sera également mis à jour à chaque fois que la propriété `msg` de l'objet data changera. +La balise moustache sera remplacée par la valeur de la propriété `msg` de l'objet data correspondant. Elle sera également mis à jour à chaque fois que la propriété `msg` de l'objet data changera. -Vous pouvez également réaliser des interpolations uniques qui ne se mettront pas à jour lors de la modification des données en utilisant la [directive v-once](../api/#v-once), mais gardez à l'esprit que cela affectera toutes les liaisons de données présentes sur le même noeud: +Vous pouvez également réaliser des interpolations uniques qui ne se mettront pas à jour lors de la modification des données en utilisant la [directive v-once](../api/#v-once), mais gardez à l'esprit que cela affectera toutes les liaisons de données présentes sur le même noeud : ``` html -Ceci ne changera jamais: {{ msg }} +Ceci ne changera jamais : {{ msg }} ``` ### Interpétation du HTML @@ -54,9 +54,9 @@ Cela fonctionne également pour les attributs booléens - l'attribut sera retir ``` -### Utiliser des expressions Javascript +### Utiliser des expressions JavaScript -Jusqu'ici, nous avons seulement lié de simples clés de propriétés dans nos templates. Mais Vue.js supporte en réalité toute la puissance des expressions Javascript à l'intérieur de toutes les liaisons de données. +Jusqu'ici, nous avons seulement lié de simples clés de propriétés dans nos templates. Mais Vue.js supporte en réalité toute la puissance des expressions JavaScript à l'intérieur de toutes les liaisons de données. ``` html {{ number + 1 }} @@ -68,7 +68,7 @@ Jusqu'ici, nous avons seulement lié de simples clés de propriétés dans nos t
``` -Ces expressions seront évaluées en tant que Javascript au sein de la portée des données de l'instance de Vue propriétaire. Une restriction est que chacune de ces liaisons ne peut contenir **qu'une seule expression**, donc ce qui suit ne fonctionnera **PAS** +Ces expressions seront évaluées en tant que JavaScript au sein de la portée des données de l'instance de Vue propriétaire. Une restriction est que chacune de ces liaisons ne peut contenir **qu'une seule expression**, donc ce qui suit ne fonctionnera **PAS** ``` html @@ -82,7 +82,7 @@ Ces expressions seront évaluées en tant que Javascript au sein de la portée d ## Directives -Les directives sont des attributs spéciaux avec le prefixe `v-`. Les valeurs attendues pour les attributs de directives sont **une unique expression Javascript** (A l'exception de `v-for`, qui sera discuté plus loin). Le travail d'une directive est d'appliquer réactivement des effets secondaires au DOM quand la valeur de son expression change. Revenons à l'exemple vu dans l'introduction : +Les directives sont des attributs spéciaux avec le prefixe `v-`. Les valeurs attendues pour les attributs de directives sont **une unique expression JavaScript** (A l'exception de `v-for`, qui sera discuté plus loin). Le travail d'une directive est d'appliquer réactivement des effets secondaires au DOM quand la valeur de son expression change. Revenons à l'exemple vu dans l'introduction : ``` html

Maintenant vous me voyez

@@ -120,7 +120,7 @@ Nous verrons plus de cas d'utilisations des modificateurs plus loin quand nous p ## Filtres -Vue.js permet de définir des filtres qui peuvent être utilisés pour appliquer des formatages de textes courants. Les filtres sont utilisables à deux endroits : **les interpolations de moustaches et les expressions de v-bind**. Les filtres doivent être ajoutés à la fin de l'expression Javascript, indiqués par le symbole de la barre verticale : +Vue.js permet de définir des filtres qui peuvent être utilisés pour appliquer des formatages de textes courants. Les filtres sont utilisables à deux endroits : **les interpolations de moustaches et les expressions de v-bind**. Les filtres doivent être ajoutés à la fin de l'expression JavaScript, indiqués par le symbole de la barre verticale : ``` html @@ -130,7 +130,7 @@ Vue.js permet de définir des filtres qui peuvent être utilisés pour appliquer
``` -

Les filtres de Vue 2.x peuvent être seulement utilisés à l'intérieur des interpolations de moustaches et des expressions de `v-bind` ( ces dernières étant supportées depuis la 2.1.0) car les filtres ont été conçus à la base dans le but de transformer du texte. Pour des cas plus complexes de transformation de données dans d'autres directives, vous devriez utiliser les [propriétés calculées](computed.html) à la place.

+

Les filtres de Vue 2.x peuvent être seulement utilisés à l'intérieur des interpolations de moustaches et des expressions de `v-bind` (ces dernières étant supportées depuis la 2.1.0) car les filtres ont été conçus à la base dans le but de transformer du texte. Pour des cas plus complexes de transformation de données dans d'autres directives, vous devriez utiliser les [propriétés calculées](computed.html) à la place.

La fonction de filtre reçoit toujours la valeur de l'expression comme premier argument. @@ -153,7 +153,7 @@ Les filtres peuvent être chainés : {{ message | filterA | filterB }} ``` -Les filtres sont des fonctions Javascript et peuvent donc recevoir des arguments : +Les filtres sont des fonctions JavaScript et peuvent donc recevoir des arguments : ``` html {{ message | filterA('arg1', arg2) }} From 67622e1165abde6a22dbc3be099790bd598322e2 Mon Sep 17 00:00:00 2001 From: yann Date: Fri, 10 Feb 2017 14:40:05 +0100 Subject: [PATCH 15/20] =?UTF-8?q?syntax.md=20:=20corrections=20suite=20?= =?UTF-8?q?=C3=A0=20review=201=20@Haerisis?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit espaces manquants ou en trop Javascript => JavaScript --- src/v2/guide/syntax.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index bf02f65e1d..7dbb21bb63 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -56,7 +56,7 @@ Cela fonctionne également pour les attributs booléens - l'attribut sera retir ### Utiliser des expressions JavaScript -Jusqu'ici, nous avons seulement lié de simples clés de propriétés dans nos templates. Mais Vue.js supporte en réalité toute la puissance des expressions JavaScript à l'intérieur de toutes les liaisons de données. +Jusqu'ici, nous avons seulement lié de simples clés de propriétés dans nos templates. Mais Vue.js supporte en réalité toute la puissance des expressions JavaScript à l'intérieur de toutes les liaisons de données : ``` html {{ number + 1 }} From 43da1a0f4a3dc17e3cd0405bccbdc3d216c2bbea Mon Sep 17 00:00:00 2001 From: yann Date: Fri, 17 Feb 2017 13:15:07 +0100 Subject: [PATCH 16/20] =?UTF-8?q?int=C3=A9gration=20relecture=20sylvain=20?= =?UTF-8?q?et=20Haerisis?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/syntax.md | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index 7dbb21bb63..f0189afadd 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -4,9 +4,9 @@ type: guide order: 4 --- -Vue.js utilise une syntaxe basée sur le HTML qui vous permet de lier déclarativement le DOM rendu aux données de l'instance de Vue sous-jacente. Tous les templates de Vue.js sont du HTML valide qui peut être interprété par les navigateurs conformes aux spécifications et les interpréteurs HTML. +Vue.js utilise une syntaxe basée sur le HTML qui vous permet de lier déclarativement le DOM rendu aux données de l'instance de Vue sous-jacente. Tous les templates de Vue.js sont du HTML valide qui peut être interprété par les navigateurs et les interpréteurs HTML conformes aux spécifications . -Sous le capot, Vue compile les templates en fonctions de rendu de DOM Virtuel. Combiné au système de réactivité, Vue est en mesure de déterminer intelligemment le nombre minimum de composants pour lesquels il faut re-déclencher le rendu et d'appliquer le nombre minimales de manipulations au DOM quand l'état de l'application change. +Sous le capot, Vue compile les templates en fonctions de rendu de DOM Virtuel. Combiné au système de réactivité, Vue est en mesure de déterminer intelligemment le nombre minimal de composants pour lesquels il faut re-déclencher le rendu et d'appliquer le nombre minimales de manipulations au DOM quand l'état de l'application change. Si vous êtes familiers avec les concepts de DOM Virtuel et que vous préférez la puissance du JavaScript pur, vous pouvez aussi [écrire directement des fonctions de rendu](render-function.html) à la place des templates, avec un support de JSX optionnel. @@ -14,15 +14,15 @@ Si vous êtes familiers avec les concepts de DOM Virtuel et que vous préférez ### Texte -La forme de base de la liaison de donnée est l'interpolation de texte en utilisant la syntaxe "Mustache" (les doubles accolades) +La forme de base de la liaison de données est l'interpolation de texte en utilisant la syntaxe "Mustache" (les doubles accolades) ``` html Message: {{ msg }} ``` -La balise moustache sera remplacée par la valeur de la propriété `msg` de l'objet data correspondant. Elle sera également mis à jour à chaque fois que la propriété `msg` de l'objet data changera. +La balise moustache sera remplacée par la valeur de la propriété `msg` de l'objet data correspondant. Elle sera également mise à jour à chaque fois que la propriété `msg` de l'objet data changera. -Vous pouvez également réaliser des interpolations uniques qui ne se mettront pas à jour lors de la modification des données en utilisant la [directive v-once](../api/#v-once), mais gardez à l'esprit que cela affectera toutes les liaisons de données présentes sur le même noeud : +Vous pouvez également réaliser des interpolations à usage unique (qui ne se mettront pas à jour lors de la modification des données) en utilisant la [directive v-once](../api/#v-once), mais gardez à l'esprit que cela affectera toutes les liaisons de données présentes sur le même noeud : ``` html Ceci ne changera jamais : {{ msg }} @@ -36,19 +36,19 @@ Les doubles moustaches interprètent la donnée en tant que texte brut, pas en t
``` -Le contenu est alors inséré en tant que HTML classique - les liaisons de données sont ignorées. À noter que vous ne pouvez pas utiliser `v-html` pour composer des fragments de templates, 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érés en tant qu'unité de base pour la réutilisabilité et la composition de l'IU (Interface Utilisateur). +Le contenu est alors inséré en tant que HTML classique - les liaisons de données sont ignorées. À noter que vous ne pouvez pas utiliser `v-html` pour composer des fragments de templates, 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érés en tant qu'unité fondamentale pour la réutilisabilité et la composition de l'interface Utilisateur. -

Générer dynamiquement du 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

+

Générer dynamiquement du HTML arbitraire sur votre site peut être très dangereux car cela peut mener facilement à des [vulnérabilités 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

### Attributs -Les Moustaches ne peuvent pas être utilisées à l'intérieur des attributs HTML, à la place utilisez une [directive v-bind](../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
``` -Cela fonctionne également pour les attributs booléens - l'attribut sera retiré si la condition est évaluée à faux : +Cela fonctionne également pour les attributs booléens - l'attribut sera retiré si la condition est évaluée fausse : ``` html @@ -78,11 +78,11 @@ Ces expressions seront évaluées en tant que JavaScript au sein de la portée d {{ if (ok) { return message } }} ``` -

Les expressions de template sont isolées et ont accès seulement à une liste blanche de globales telles que `Math` et `Date`. Vous ne devriez pas tenter d'accéder à des variables globales définies par l'utilisateur dans les expressions de template.

+

Les expressions de template sont isolées et ont seulement accès à une liste blanche de globales telles que `Math` et `Date`. Vous ne devriez pas tenter d'accéder à des variables globales définies par l'utilisateur dans les expressions de template.

## Directives -Les directives sont des attributs spéciaux avec le prefixe `v-`. Les valeurs attendues pour les attributs de directives sont **une unique expression JavaScript** (A l'exception de `v-for`, qui sera discuté plus loin). Le travail d'une directive est d'appliquer réactivement des effets secondaires au DOM quand la valeur de son expression change. Revenons à l'exemple vu dans l'introduction : +Les directives sont des attributs spéciaux avec le prefixe `v-`. Les valeurs attendues pour les attributs de directives sont **une unique expression JavaScript** (A l'exception de `v-for`, qui sera discuté plus loin). Le travail d'une directive est d'appliquer réactivement des effets secondaires au DOM quand la valeur de son expression change. Revenons à l'exemple vu dans l'introduction : ``` html

Maintenant vous me voyez

@@ -92,13 +92,13 @@ Ici, la directive `v-if` retirerait / insererait l'élement `

` en se basant s ### Arguments -Certaines directives peuvent prendre un argument, indiqué par deux petits points après le nom de la directive. Par exemple, la directive `v-bind` est utilisée pour mettre à jour réactivement un attribut HTML : +Certaines directives peuvent prendre un argument, indiqué par un deux-points après le nom de la directive. Par exemple, la directive `v-bind` est utilisée pour mettre à jour réactivement un attribut HTML : ``` html ``` -Ici `href`est un argument, qui dit à la directive `v-bind` de lier l'attribut `href` de l'élément à la valeur de l'expression `url` +Ici `href` est un argument, qui dit à la directive `v-bind` de lier l'attribut `href` de l'élément à la valeur de l'expression `url` Un autre exemple est la directive `v-on`, qui écoute les évènements du DOM : @@ -110,17 +110,17 @@ Ici l'argument est le nom de l'évènement à écouter. Nous parlerons aussi plu ### Modificateurs -Les modificateurs sont des suffixes indiqués par un point, qui indique qu'une directive devrait être lié d'une manière spécifique. Par exemple, le modificateur `.prevent` dit à la directive `v-on` d'appeler `event.preventDefault()` lorsque l'évènement survient. +Les modificateurs sont des suffixes spéciaux indiqués par un point, qui indique qu'une directive devrait être liée d'une manière spécifique. Par exemple, le modificateur `.prevent` dit à la directive `v-on` d'appeler `event.preventDefault()` lorsque l'évènement survient. ``` html

``` -Nous verrons plus de cas d'utilisations des modificateurs plus loin quand nous porterons un regard plus attentif sur `v-on` et `v-model` +Nous verrons plus de cas d'utilisation des modificateurs plus loin quand nous porterons un regard plus attentif sur `v-on` et `v-model` ## Filtres -Vue.js permet de définir des filtres qui peuvent être utilisés pour appliquer des formatages de textes courants. Les filtres sont utilisables à deux endroits : **les interpolations de moustaches et les expressions de v-bind**. Les filtres doivent être ajoutés à la fin de l'expression JavaScript, indiqués par le symbole de la barre verticale : +Vue.js permet de définir des filtres qui peuvent être utilisés pour appliquer des formatages de textes courants. Les filtres sont utilisables à deux endroits : **les interpolations à moustaches et les expressions de v-bind**. Les filtres doivent être ajoutés à la fin de l'expression JavaScript, indiqués par le symbole de la barre verticale : ``` html @@ -147,7 +147,7 @@ new Vue({ }) ``` -Les filtres peuvent être chainés : +Les filtres peuvent être chaînés : ``` html {{ message | filterA | filterB }} @@ -159,11 +159,11 @@ Les filtres sont des fonctions JavaScript et peuvent donc recevoir des arguments {{ message | filterA('arg1', arg2) }} ``` -Ici la chaîne de caractères `'arg1'` sera passée au filtre en tant que second argument, et la valeur de l'expression `arg2` sera évaluée et passée en tant que troisième argument. +Ici la chaîne de caractères `'arg1'` sera passée au filtre en tant que second argument, et la valeur de l'expression `arg2` sera évaluée et passée en tant que troisième argument. ## Abréviations -Le préfixe `v-` sert d'indicateur visuel pour identifier les attributs spécifiques à Vue dans vos templates. C'est pratique lorsque vous utilisez Vue.js pour appliquer des comportements dynamiques sur un balisage existant, mais peut sembler verbeux pour des directives utilisées fréquemment. Par ailleurs, le besoin pour le préfixe `v-`devient moins important quand vous développez une [application monopage](https://fr.wikipedia.org/wiki/Application_web_monopage) où Vue.js gère tous les templates. C'est pourquoi Vue.js fournit des abréviations pour deux des directives les plus utilisées, `v-bind` et `v-on`: +Le préfixe `v-` sert d'indicateur visuel pour identifier les attributs spécifiques à Vue dans vos templates. C'est pratique lorsque vous utilisez Vue.js pour appliquer des comportements dynamiques sur un balisage existant, mais peut sembler verbeux pour des directives utilisées fréquemment. Par ailleurs, le besoin d'un préfixe `v-`devient moins important quand vous développez une [application monopage](https://fr.wikipedia.org/wiki/Application_web_monopage) où Vue.js gère tous les templates. C'est pourquoi Vue.js fournit des abréviations pour deux des directives les plus utilisées, `v-bind` et `v-on`: ### Abréviation pour `v-bind` From 2d4974c0e606327ef557f5d75e6a8d30d1e4dd8a Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 20 Feb 2017 09:59:25 +0100 Subject: [PATCH 17/20] nombre minimales => nombre minimal --- src/v2/guide/syntax.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index f0189afadd..b1158d64de 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -6,7 +6,7 @@ order: 4 Vue.js utilise une syntaxe basée sur le HTML qui vous permet de lier déclarativement le DOM rendu aux données de l'instance de Vue sous-jacente. Tous les templates de Vue.js sont du HTML valide qui peut être interprété par les navigateurs et les interpréteurs HTML conformes aux spécifications . -Sous le capot, Vue compile les templates en fonctions de rendu de DOM Virtuel. Combiné au système de réactivité, Vue est en mesure de déterminer intelligemment le nombre minimal de composants pour lesquels il faut re-déclencher le rendu et d'appliquer le nombre minimales de manipulations au DOM quand l'état de l'application change. +Sous le capot, Vue compile les templates en fonctions de rendu de DOM Virtuel. Combiné au système de réactivité, Vue est en mesure de déterminer intelligemment le nombre minimal de composants pour lesquels il faut re-déclencher le rendu et d'appliquer le nombre minimal de manipulations au DOM quand l'état de l'application change. Si vous êtes familiers avec les concepts de DOM Virtuel et que vous préférez la puissance du JavaScript pur, vous pouvez aussi [écrire directement des fonctions de rendu](render-function.html) à la place des templates, avec un support de JSX optionnel. From 8fd8346f0a5b762226c6bcee0dd99ca2146d692d Mon Sep 17 00:00:00 2001 From: yann Date: Mon, 20 Feb 2017 13:37:15 +0100 Subject: [PATCH 18/20] relecture modif @forresst & @Haerisis --- src/v2/guide/syntax.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index b1158d64de..0f1a043cb5 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -4,17 +4,17 @@ type: guide order: 4 --- -Vue.js utilise une syntaxe basée sur le HTML qui vous permet de lier déclarativement le DOM rendu aux données de l'instance de Vue sous-jacente. Tous les templates de Vue.js sont du HTML valide qui peut être interprété par les navigateurs et les interpréteurs HTML conformes aux spécifications . +Vue.js utilise une syntaxe de template basée sur le HTML qui vous permet de lier déclarativement le DOM rendu aux données de l'instance sous-jacente de Vue. Tous les templates de Vue.js sont du HTML valide qui peut être interprété par les navigateurs et les interpréteurs HTML conformes aux spécifications . -Sous le capot, Vue compile les templates en fonctions de rendu de DOM Virtuel. Combiné au système de réactivité, Vue est en mesure de déterminer intelligemment le nombre minimal de composants pour lesquels il faut re-déclencher le rendu et d'appliquer le nombre minimal de manipulations au DOM quand l'état de l'application change. +Sous le capot, Vue compile les templates dans des fonctions de rendu de DOM Virtuel. Combiné au système de réactivité, Vue est en mesure de déterminer intelligemment le nombre minimal de composants pour lesquels il faut re-déclencher le rendu et d'appliquer le nombre minimal de manipulations au DOM quand l'état de l'application change. -Si vous êtes familiers avec les concepts de DOM Virtuel et que vous préférez la puissance du JavaScript pur, vous pouvez aussi [écrire directement des fonctions de rendu](render-function.html) à la place des templates, avec un support de JSX optionnel. +Si vous êtes familiers avec les concepts de DOM Virtuel et que vous préférez la puissance du JavaScript pur, vous pouvez aussi [écrire directement des fonctions de rendu](render-function.html) à la place des templates, avec un support facultatif de JSX. ## Interpolations ### Texte -La forme de base de la liaison de données est l'interpolation de texte en utilisant la syntaxe "Mustache" (les doubles accolades) +La forme la plus élémentaire de la liaison de données est l'interpolation de texte en utilisant la syntaxe "Mustache" (les doubles accolades) ``` html Message: {{ msg }} @@ -38,7 +38,7 @@ Les doubles moustaches interprètent la donnée en tant que texte brut, pas en t Le contenu est alors inséré en tant que HTML classique - les liaisons de données sont ignorées. À noter que vous ne pouvez pas utiliser `v-html` pour composer des fragments de templates, 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érés en tant qu'unité fondamentale pour la réutilisabilité et la composition de l'interface Utilisateur. -

Générer dynamiquement du HTML arbitraire sur votre site peut être très dangereux car cela peut mener facilement à des [vulnérabilités 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

+

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

### Attributs @@ -54,7 +54,7 @@ Cela fonctionne également pour les attributs booléens - l'attribut sera retir ``` -### Utiliser des expressions JavaScript +### Utilisation des expressions JavaScript Jusqu'ici, nous avons seulement lié de simples clés de propriétés dans nos templates. Mais Vue.js supporte en réalité toute la puissance des expressions JavaScript à l'intérieur de toutes les liaisons de données : @@ -68,7 +68,7 @@ Jusqu'ici, nous avons seulement lié de simples clés de propriétés dans nos t
``` -Ces expressions seront évaluées en tant que JavaScript au sein de la portée des données de l'instance de Vue propriétaire. Une restriction est que chacune de ces liaisons ne peut contenir **qu'une seule expression**, donc ce qui suit ne fonctionnera **PAS** +Ces expressions seront évaluées en tant que JavaScript au sein de la portée des données de l'instance de Vue propriétaire. Il y a une restriction : chacune de ces liaisons ne peut contenir **qu'une seule expression**, donc ce qui suit **NE** fonctionnera **PAS** ``` html @@ -82,23 +82,23 @@ Ces expressions seront évaluées en tant que JavaScript au sein de la portée d ## Directives -Les directives sont des attributs spéciaux avec le prefixe `v-`. Les valeurs attendues pour les attributs de directives sont **une unique expression JavaScript** (A l'exception de `v-for`, qui sera discuté plus loin). Le travail d'une directive est d'appliquer réactivement des effets secondaires au DOM quand la valeur de son expression change. Revenons à l'exemple vu dans l'introduction : +Les directives sont des attributs spéciaux avec le prefixe `v-`. Les valeurs attendues pour les attributs de directives sont **une unique expression JavaScript** (A l'exception de `v-for`, qui sera expliquée plus loin). Le travail d'une directive est d'appliquer réactivement des effets secondaires au DOM quand la valeur de son expression change. Revenons à l'exemple vu dans l'introduction : ``` html

Maintenant vous me voyez

``` -Ici, la directive `v-if` retirerait / insererait l'élement `

` en se basant sur l'évaluation à vrai de la valeur de l'expression `seen`. +Ici, la directive `v-if` retirerait / insérerait l'élement `

` en se basant sur l'évaluation à vrai de la valeur de l'expression `seen`. ### Arguments -Certaines directives peuvent prendre un argument, indiqué par un deux-points après le nom de la directive. Par exemple, la directive `v-bind` est utilisée pour mettre à jour réactivement un attribut HTML : +Certaines directives peuvent prendre un "argument", indiqué par un deux-points après le nom de la directive. Par exemple, la directive `v-bind` est utilisée pour mettre à jour réactivement un attribut HTML : ``` html ``` -Ici `href` est un argument, qui dit à la directive `v-bind` de lier l'attribut `href` de l'élément à la valeur de l'expression `url` +Ici `href` est un argument, qui dit à la directive `v-bind` de lier l'attribut `href` de l'élément à la valeur de l'expression `url`. Un autre exemple est la directive `v-on`, qui écoute les évènements du DOM : From d620e47e98aa311afe5d85a2737fb9d0bf530a71 Mon Sep 17 00:00:00 2001 From: yann Date: Wed, 22 Feb 2017 13:12:32 +0100 Subject: [PATCH 19/20] dans des fonctions de rendu => en des fonctions de rendu --- src/v2/guide/syntax.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index 0f1a043cb5..73364bc777 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -6,7 +6,7 @@ order: 4 Vue.js utilise une syntaxe de template basée sur le HTML qui vous permet de lier déclarativement le DOM rendu aux données de l'instance sous-jacente de Vue. Tous les templates de Vue.js sont du HTML valide qui peut être interprété par les navigateurs et les interpréteurs HTML conformes aux spécifications . -Sous le capot, Vue compile les templates dans des fonctions de rendu de DOM Virtuel. Combiné au système de réactivité, Vue est en mesure de déterminer intelligemment le nombre minimal de composants pour lesquels il faut re-déclencher le rendu et d'appliquer le nombre minimal de manipulations au DOM quand l'état de l'application change. +Sous le capot, Vue compile les templates en des fonctions de rendu de DOM Virtuel. Combiné au système de réactivité, Vue est en mesure de déterminer intelligemment le nombre minimal de composants pour lesquels il faut re-déclencher le rendu et d'appliquer le nombre minimal de manipulations au DOM quand l'état de l'application change. Si vous êtes familiers avec les concepts de DOM Virtuel et que vous préférez la puissance du JavaScript pur, vous pouvez aussi [écrire directement des fonctions de rendu](render-function.html) à la place des templates, avec un support facultatif de JSX. From 089e42c99e09c7aab13d876818c61a02c842519c Mon Sep 17 00:00:00 2001 From: yann Date: Wed, 22 Feb 2017 13:24:31 +0100 Subject: [PATCH 20/20] =?UTF-8?q?selon=20que=20l'expression=20soit=20consi?= =?UTF-8?q?d=C3=A9r=C3=A9e=20comme=20fausse=20/=20vraie?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/syntax.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index 73364bc777..fa705d8905 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -88,7 +88,7 @@ Les directives sont des attributs spéciaux avec le prefixe `v-`. Les valeurs at

Maintenant vous me voyez

``` -Ici, la directive `v-if` retirerait / insérerait l'élement `

` en se basant sur l'évaluation à vrai de la valeur de l'expression `seen`. +Ici, la directive `v-if` retirerait / insérerait l'élement `

` selon que l'expression `seen` soit considérée comme fausse / vraie. ### Arguments