-
Notifications
You must be signed in to change notification settings - Fork 103
Traduction syntax.md #28
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 2 commits
77881b6
734f583
ecbdf6b
af44cec
8e1b33d
334525b
60df2a8
0bd3ed4
caa43dc
9a2ed84
6ddb29e
d9a578e
98f01d9
961c076
004c03f
91d45d9
67622e1
43da1a0
2d4974c
8fd8346
d620e47
089e42c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 minimales 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 | ||
<span>Message: {{ msg }}</span> | ||
|
@@ -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. | ||
|
||
<p class="tip">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</p> | ||
<p class="tip">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</p> | ||
|
||
### Attributs | ||
|
||
|
@@ -54,7 +54,7 @@ Cela fonctionne également pour les attributs booléens - l'attribut sera retir | |
<button v-bind:disabled="someDynamicCondition">Button</button> | ||
``` | ||
|
||
### 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 | |
<div v-bind:id="'list-' + id"></div> | ||
``` | ||
|
||
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 | ||
<!-- ceci est une déclaration, pas une expression: --> | ||
|
@@ -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 | ||
<p v-if="seen">Maintenant vous me voyez</p> | ||
``` | ||
|
||
Ici, la directive `v-if` retirerait / insererait l'élement `<p>` en se basant sur l'évaluation à vrai de la valeur de l'expression `seen`. | ||
Ici, la directive `v-if` retirerait / insérerait l'élement `<p>` en se basant sur l'évaluation à vrai de la valeur de l'expression `seen`. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ici nous avons traduit
par
car ce sont les termes utilisés dans cette explication : https://github.com/vuejs-fr/vuejs.org/blob/master/src/v2/guide/class-and-style.md#liaison-de-classes-html On « évalue » et on ne « considère » pas une expression. Les Hommes considères, mais Vue évalue. Il faut garder ainsi ! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Je t'invite à regarder le lien vers le MDN de "Truthy" mis sur l'exemple que tu cites:
Il faut un moyen de distinguer sémantiquement l'égalité stricte de l'égalité simple, et "évaluer à" risque de causer des confusions car sous-entend une égalité stricte. Mes propositions: "considéré comme", "assimilable à", "équivalente à". Ça me va aussi si on garde le mot "truthy" avec un lien vers la page MDN. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Si je résume True c'est Effectivement, une valeur Truthy n'est pas strictement égale à Merci Il faut donc changer
en
Je m'en charge |
||
|
||
### 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 | ||
<a v-bind:href="url"></a> | ||
``` | ||
|
||
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 : | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Je propose à la place de la proposition de @forresst
Si vous avez l'impression que en fonctions sonne trop s'il y a présence de ou pas, cela lève le doute.
Cependant, le traduire par « dans » pour lever le doute n'est pas correcte car c'est les éléments du template lui-même qui génère des fonctions, ils ne sont pas « glissé dedans » comme le mentionne @nyl-auster.