components.md #42

MachinisteWeb · 2017-03-04T17:41:31Z

Cette page est en cours de traduction. Je vais faire une relecture avant de vous la soumettre à la review.

Je vais moi même me servir de l'outil de comparaison pour faire ma relecture, donc je vous fais signe quand vous pouvez m'aider !

Traduction complète du fichier `components.md`

Signed-off-by: Bruno Lesieur <[email protected]>

MachinisteWeb

Voilà. J'ai fait une petite relecture avec mes propres commentaires pour que vous puissiez m'aider. Je vous laisse faire les votres !

Merci beaucoup

MachinisteWeb · 2017-03-06T09:57:59Z

src/v2/guide/components.md


 ``` js
 Vue.component('my-component', {
  // options
 })
 ```

-<p class="tip">Note that Vue does not enforce the [W3C rules](http://www.w3.org/TR/custom-elements/#concepts) for custom tag names (all-lowercase, must contain a hyphen) though following this convention is considered good practice.</p>
+<p class="tip">Notez que Vue ne force pas l'utilisation des [règles du W3C](http://www.w3.org/TR/custom-elements/#concepts) en ce qui concerne les noms de balises personnalisées (tout-minuscule, avec obligation de contenir un trait d'union) cependant suivre cette convention est considéré comme une bonne pratique.</p>


La je suis pas sur de ne pas avoir fait de contre-sens car ça me parait étrange. Cette phrase est vrai dans le cas où on utilise l'option template avec une chaîne de caractère représentant le template où l'option template avec un selecteur dedans vers une balise <script type="text/x-template"></script> contenant le template. Dans le cas de l'option el cela n'est pas vrai et Vue (en fait c'est pas de son fait) force l'utilisation des règles du W3C. Je suppose que ce que cette phrase se réfère à ce que Vue peut faire et parle du fait que on puisse utiliser <MyComponent></MyComponent> avec l'option template mais qu'il est préférable d'utiliser <my-component></my-component> tout de même car c'est considéré comme une bonne pratique.

J'ai bon ?

l'option el c'est le point d'ancrage existant dans le DOM, ça ne définit pas le nom du tag du composant

Notez que Vue ne vous force pas à respecter les règles du W3C en ce qui concerne les noms de balises personnalisées (tout en minuscules, avec obligation de contenir un trait d'union) bien que suivre cette convention est considéré comme une bonne pratique.

J'approuve la proposition de sylvain

MachinisteWeb · 2017-03-06T10:11:03Z

src/v2/guide/components.md


-Components are meant to be used together, most commonly in parent-child relationships: component A may use component B in its own template. They inevitably need to communicate to one another: the parent may need to pass data down to the child, and the child may need to inform the parent of something that happened in the child. However, it is also very important to keep the parent and the child as decoupled as possible via a clearly-defined interface. This ensures each component's code can be written and reasoned about in relative isolation, thus making them more maintainable and potentially easier to reuse.
+Les composants sont destinés à être utilisés ensemble, le plus souvent dans une relation parent-enfant : le composant A peut utiliser le composant B dans son propre template. Ils vont inévitablement avoir besoin de communiquer les uns avec les autres : le parent peut avoir besoin de passer des données à son enfant, et l'enfant peut avoir besoin d'informer le parent que quelque chose c'est produit à l'intérieur. Cependant, il est également très important de garder le parent et l'enfant aussi découplé que possible via une interface clairement définie. Cela assure que le code de chaque composant peut être écrit et raisonner à propos de sa propre isolation relative [se suffire à lui même], cela les rends plus maintenable et potentiellement plus simple à ré-utiliser.


isolation relative, je suis pas trop sur de ce terme. J'ai bien compris que c'est un équivalent de « se suffire à lui-même » mais le terme est bisarre :D

Des avis ?

MachinisteWeb · 2017-03-06T10:24:16Z

src/v2/guide/components.md


-The proper answer to these use cases are:


answer devrait être answers non ?

MachinisteWeb · 2017-03-06T10:34:35Z

src/v2/guide/components.md

@@ -640,67 +640,67 @@ new Vue({
 </script>
 {% endraw %}

-The implementation above is pretty naive though. For example, users are allowed to enter multiple periods and even letters sometimes - yuck! So for those that want to see a non-trivial example, here's a more robust currency filter:
+L'implémentation ci-dessus est un peu candide tout de même, Par exemple, les utilisateurs peuvent toujours entrer de multiple périodes [???] et même parfois des lettres (beurk) ! Donc pour ce qui souhaiterait voir un exemple non trivial, voici un filtre de devise plus costaux :


de multiples périodes

On parle de quoi au juste ?

MachinisteWeb · 2017-03-06T10:55:32Z

src/v2/guide/components.md


-A scoped slot is a special type of slot that functions as a reusable template (that can be passed data to) instead of already-rendered-elements.


Je l'ai retourné dans tous les sens celle là. J'ai du mal à parvenir à quelque chose de satisfaisant.

Help !

MachinisteWeb · 2017-03-06T10:56:59Z

src/v2/guide/components.md

  <template slot="item" scope="props">
    <li class="my-fancy-item">{{ props.text }}</li>
  </template>
 </my-awesome-list>
 ```

-And the template for the list component:


Il devrait pas y avoir un « s » à composant ?

MachinisteWeb · 2017-03-06T11:00:38Z

src/v2/guide/components.md


-When authoring components, it's good to keep in mind whether you intend to reuse it somewhere else later. It's OK for one-off components to be tightly coupled, but reusable components should define a clean public interface and make no assumptions about the context it's used in.
+Quand on créé des composants, c'est une bonne chose de garder à l'esprit la manière dont vous souhaitez le réutiliser plus tard. C'est acceptable qu'un composant ai un couplage fort, mais un composant réutilisable devrait définir une interface publique clair et ne laisser aucun doutes sur son contexte d'utilisation.


Je comprends que si un composant à un couplage fort avec un autre ponctuellement ça passe mais que si un composant à pour vocation d'être réutiliser ça passe PAS du tout. Cependant, c'est pas exactement ce que dit la phrase là ...

Une meilleure traduction ?

Lors de la création de composants, il est bon de garder à l’esprit que vous avez l’intention plus tard de les réutiliser ailleurs. Il est bon que les composants uniques soient fortement couplés, mais des composants réutilisables doivent définir une interface publique claire et émettre aucune hypothèse sur le contexte dans lequel ils sont utilisés.

MachinisteWeb · 2017-03-06T11:01:47Z

src/v2/guide/components.md


- **Events** allow the component to trigger side effects in the external environment
+- Les **événements** permettent au composant de déclencher des effets de bord [bizarre c'est péjoratif pour moi] dans l'environnement extérieur


C'est super péjoratif effet de bord alors que c'est justement ce qu'on souhaite faire. Quelque chose de mieux ?

MachinisteWeb · 2017-03-06T11:11:14Z

src/v2/guide/components.md

 var child = parent.$refs.profile
 ```

-When `ref` is used together with `v-for`, the ref you get will be an array or an object containing the child components mirroring the data source.
+Quand `ref` est utilisé conjointement avec `v-for`, la référence que vous obtiendrez sera un tableau ou un objet contenant les composant enfant en tant que miroir de la source de donnée.


Pas très sur de « en tant que mirroir »

# Conflicts: # src/v2/guide/components.md Signed-off-by: Bruno Lesieur <[email protected]>

forresst

Très beau travail @haeresis .
J'ai vu quelques erreurs d'orthographe et de grammaire.
J'ai fait beaucoup de proposition qui me semble personnellement plus correcte : à toi de décider

forresst · 2017-03-07T07:53:41Z

src/v2/guide/components.md


-<p class="tip">**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).**</p>Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that Vue's compiler attaches behavior to. In some cases, they may also appear as a native HTML element extended with the special `is` attribute.
+Les composants sont l'une des plus puissantes fonctionnalités de Vue. Ils vous aident à étendre les éléments de base du HTML en encapsulant du code ré-utilisable. À un haut niveau, les composants sont des éléments personnalisables auxquels le compilateur de Vue attache un comportement. Dans plusieurs cas, ils peuvent apparaître comme des éléments HTML natifs étendus avec l'attribut spécial `is`.


Ils vous permettent d'étendre les éléments de base HTML pour encapsuler du code réutilisable.

auxquels le compilateur de Vue leur attache un comportement.

forresst · 2017-03-07T07:57:51Z

src/v2/guide/components.md


 ``` js
 Vue.component('my-component', {
  // options
 })
 ```

-<p class="tip">Note that Vue does not enforce the [W3C rules](http://www.w3.org/TR/custom-elements/#concepts) for custom tag names (all-lowercase, must contain a hyphen) though following this convention is considered good practice.</p>
+<p class="tip">Notez que Vue ne force pas l'utilisation des [règles du W3C](http://www.w3.org/TR/custom-elements/#concepts) en ce qui concerne les noms de balises personnalisées (tout-minuscule, avec obligation de contenir un trait d'union) cependant suivre cette convention est considéré comme une bonne pratique.</p>


J'approuve la proposition de sylvain

forresst · 2017-03-07T09:14:45Z

src/v2/guide/components.md


-You don't have to register every component globally. You can make a component available only in the scope of another instance/component by registering it with the `components` instance option:
+Vous n'avez pas à enregistrer chaque composant de manière global. Vous pouvez rendre un composant disponible dans la portée d'un(e) autre composant/instance en l'enregistrant avec l'option `components` lors de l'instanciation :


Vous n'êtes pas obligé d'enregistrer chaque composant de manière globale.

c'est une suggestion, pas une certitude. Mais je trouve que cela est plus en accord avec la phrase suivante.

forresst · 2017-03-07T09:17:02Z

src/v2/guide/components.md

    'my-component': Child
  }
 })
 ```

-The same encapsulation applies for other registerable Vue features, such as directives.
+La même encapsulation est appliquée pour les autres fonctionnalités enregistrables de Vue, comme les directives.


La même encapsulation s’applique pour les autres fonctionnalités enregistrables de Vue, comme les directives.

forresst · 2017-03-07T12:25:39Z

src/v2/guide/components.md


-When using the DOM as your template (e.g. using the `el` option to mount an element with existing content), you will be subject to some restrictions that are inherent to how HTML works, because Vue can only retrieve the template content **after** the browser has parsed and normalized it. Most notably, some elements such as `<ul>`, `<ol>`, `<table>` and `<select>` have restrictions on what elements can appear inside them, and some elements such as `<option>` can only appear inside certain other elements.
+Quand vous utilisez le DOM en tant que template (ex. : en utilisant l'option `el` pour monter un élément avec du contenu existant), vous êtes sujet à plusieurs restrictions dépendantes de la façon de fonctioner du HTML, car Vue peut uniquement récupérer le contenu du template **après** qu'il ai été analysé et normalisé. Des éléments tels que `<ul>`, `<ol>`, `<table>` et `<select>` ont notablement des restrictions sur les éléments que l'on peut trouver à l'intérieur, et plusieurs éléments comme `<option>` ne peuvent apparaitre qu'à l'intérieur de certains éléments.


ex. : en utilisant l'option => par exemple en utilisant l'option

vous êtes sujet à plusieurs restrictions dépendantes de la façon dont fonctionne le HTML

le contenu du template après qu'il ait été analysé et normalisé.

ait (il manque le "t")

Toutes les traductions de e. g. sont remplacé par ex. : actuellement. Je garde cette nomonclature pour la consistance (ce qui veut pas dire que j'ai raison hein). Pour changer toutes les occurrences de ex. : en par exemple, je préfère passé par une PR dédiée à travers tous les fichier si c'est l'avis d'un plus grand nombre.

forresst · 2017-03-23T11:59:29Z

src/v2/guide/components.md


 ```
-Failed to mount component: template or render function not defined.
+Échec de montage du composant : un template ou une fonction de rendu n'est pas défini.


Je mettrais aussi la version non traduite, car je pense que c'est un message d'erreur de Vue

forresst · 2017-03-23T12:02:33Z

src/v2/guide/components.md


-In our case, I'll make that point the `tree-folder` component. We know the child that creates the paradox is the `tree-folder-contents` component, so we'll wait until the `beforeCreate` lifecycle hook to register it:
+Dans notre cas, il faut que le composant `tree-folder` le signifie. Nous savons que l'enfant créé un paradoxe dans le composant `tree-folder-contents`, aussi nous allons attendre que le *hook* `beforeCreate` du cycle de vie pour l'enregistrer :


composant tree-folder-contents, nous allons donc attendre le hook du cycle de vie beforeCreate pour l'enregistrer :

forresst · 2017-03-23T12:04:29Z

src/v2/guide/components.md

@@ -1203,19 +1203,19 @@ Vue.component('hello-world', {
 })
 ```

-These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.
+Cela peut être pratique pour des démos avec de gros templates ou dans une application extrêmement petites, mais devrait être évité dans tous les autres cas, car cela sépare les templates du reste de la définition du composant.


mais cela devrait être évité dans tous

forresst · 2017-03-23T12:07:20Z

src/v2/guide/components.md

@@ -1203,19 +1203,19 @@ Vue.component('hello-world', {
 })
 ```

-These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.
+Cela peut être pratique pour des démos avec de gros templates ou dans une application extrêmement petites, mais devrait être évité dans tous les autres cas, car cela sépare les templates du reste de la définition du composant.

 ### Cheap Static Components with `v-once`


Composants statiques peu couteux avec v-once

il manque la traduction

forresst · 2017-03-23T12:08:30Z

src/v2/guide/components.md


 ### Cheap Static Components with `v-once`

-Rendering plain HTML elements is very fast in Vue, but sometimes you might have a component that contains **a lot** of static content. In these cases, you can ensure that it's only evaluated once and then cached by adding the `v-once` directive to the root element, like this:
+Faire le rendu d'éléments HTML est vraiment rapide avec Vue, mais parfois vous aurez un composant qui contient **beaucoup** de contenu statique. Dans ces cas, vous pouvez vous assurer qu'il est évalué qu'une seul fois puis mis en cache avec la directive `v-once` sur l'élément racine, comme cela :


qu'il est évalué qu'une seule fois puis

manque un "e" à "seul"

j'ai rajouté « n' » également

MachinisteWeb · 2017-03-23T12:28:46Z

Merci ! Je m'y mets de ce pas !

Signed-off-by: Bruno Lesieur <[email protected]>

sylvainpolletvillard · 2017-03-25T14:15:17Z

J'attends que les retours de @forresst soient pris en compte pour effectuer ma relecture

MachinisteWeb · 2017-03-25T14:24:32Z

Oui. Très bonne idée.

Signed-off-by: Bruno Lesieur <[email protected]>

MachinisteWeb · 2017-03-27T07:41:37Z

Merci beaucoup @forresst pour cette longue review ! J'ai inclus tout ce qui faisait vraiment sens. Il y a deux trois idées encore en suspend, j'attends de voir si cela généra aussi @sylvainpolletvillard ou pas. Je vais mettre à jour le document vis à vis de la source anglaise au cas ou il y est quelque ajustement à faire avant la review de @sylvainpolletvillard

MachinisteWeb · 2017-03-27T12:55:14Z

C'est tout bon @sylvainpolletvillard , le fork fr est up-to-date avec le en et mes fork ssr et components sont up-to-date avec le fork fr. Pas de modification pour ses fichiers, tu peux relire ça dès maintenant.

Bon courage !

sylvainpolletvillard

2ème relecture

sylvainpolletvillard · 2017-04-03T21:38:25Z

src/v2/guide/components.md


-<p class="tip">**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).**</p>Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that Vue's compiler attaches behavior to. In some cases, they may also appear as a native HTML element extended with the special `is` attribute.
+Les composants sont l'une des plus puissantes fonctionnalités de Vue. Ils vous permettent d'étendre les éléments de base du HTML pour encapsuler du code réutilisable. À un haut niveau, les composants sont des éléments personnalisables auxquels le compilateur de Vue leur attache un comportement. Dans plusieurs cas, ils peuvent apparaître comme des éléments HTML natifs étendus avec l'attribut spécial `is`.


auxquels le compilateur de Vue attache un comportement

Dans certains cas, ils peuvent aussi apparaître

sylvainpolletvillard · 2017-04-03T21:40:11Z

src/v2/guide/components.md


-### Registration
+### Enregistrement


dans d'autres pages, register a été traduit par inscrire / Inscription. Ça permet de différencier de "save"

sylvainpolletvillard · 2017-04-03T21:41:29Z

src/v2/guide/components.md


-Once registered, a component can be used in an instance's template as a custom element, `<my-component></my-component>`. Make sure the component is registered **before** you instantiate the root Vue instance. Here's the full example:
+Une fois enregistré, un composant peut être utilisé dans une instance de template en tant qu'élément personnalisé, `<my-component></my-component>`. Assurez-vous que le composant soit enregistré **avant** l'instanciation de l'instance racine de Vue. Voici un exemple complet :


dans le template d'une instance

sylvainpolletvillard · 2017-04-03T21:42:06Z

src/v2/guide/components.md

 new Vue({
  el: '#example'
 })
 ```

-Which will render:
+Ce qui va faire le rendu :


Ce qui donnera comme rendu

sylvainpolletvillard · 2017-04-03T21:44:59Z

src/v2/guide/components.md


-### DOM Template Parsing Caveats
+### Limitations d'analyse d'un template à partir du DOM


de l'analyse

sylvainpolletvillard · 2017-04-03T23:28:06Z

src/v2/guide/components.md


-In our case, I'll make that point the `tree-folder` component. We know the child that creates the paradox is the `tree-folder-contents` component, so we'll wait until the `beforeCreate` lifecycle hook to register it:
+Dans notre cas, il faut que le composant `tree-folder` le signifie. Nous savons que l'enfant créé un paradoxe dans le composant `tree-folder-contents`, nous allons donc attendre le *hook* `beforeCreate` du cycle de vie pour l'enregistrer :


Dans notre cas, je ferais cela avec le composant tree-folder

crée

pour l'inscrire

sylvainpolletvillard · 2017-04-03T23:28:53Z

src/v2/guide/components.md

  </div>
 </my-component>
 ```

-However, `inline-template` makes the scope of your templates harder to reason about. As a best practice, prefer defining templates inside the component using the `template` option or in a `template` element in a `.vue` file.
+Cependant, la propriété `inline-template` rend la portée de votre template difficile à appréhender. Pour une bonne pratique, préférez définir vos templates à l'intérieur du composant en utilisant l'option `template` ou un élément `template` dans un fichier `.vue`.


prefer => optez plutôt pour

sylvainpolletvillard · 2017-04-03T23:29:33Z

src/v2/guide/components.md

@@ -1203,19 +1203,19 @@ Vue.component('hello-world', {
 })
 ```

-These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.
+Cela peut être pratique pour des démos avec de gros templates ou dans une application extrêmement petites, mais cela devrait être évité dans tous les autres cas, car cela sépare les templates du reste de la définition du composant.


des applications extrêmement petites

sylvainpolletvillard · 2017-04-03T23:30:06Z

src/v2/guide/components.md


-### Cheap Static Components with `v-once`
+### Composants statiques peu couteux avec `v-once`


sylvainpolletvillard · 2017-04-03T23:30:43Z

src/v2/guide/components.md


-Rendering plain HTML elements is very fast in Vue, but sometimes you might have a component that contains **a lot** of static content. In these cases, you can ensure that it's only evaluated once and then cached by adding the `v-once` directive to the root element, like this:
+Faire le rendu d'éléments HTML est vraiment rapide avec Vue, mais parfois vous aurez un composant qui contient **beaucoup** de contenu statique. Dans ces cas, vous pouvez vous assurer qu'il n'est évalué qu'une seule fois puis mis en cache avec la directive `v-once` sur l'élément racine, comme cela :


vous pouvez avoir

MachinisteWeb

Comme toujours une revue avec une mines de bonne chose. J'ai juste levé mes points de doutes en commentaire.

MachinisteWeb · 2017-04-04T06:35:18Z

src/v2/guide/components.md


 - `<script type="text/x-template">`
- JavaScript inline template strings
- `.vue` components
+- Template de chaîne de caractère littérale JavaScript


Je ne suis pas sur que cela ne concerne « que » les chaîne ES6. Je veux dire que :

« template: "<table><tr is="my-row"></tr></table>" »

marche tout aussi bien.

J'ai fini par changer d'avis sur la nécessite de garder des termes anglais bien connu alors qu'ils disposent d'une traduction moins connu. Bien sur pour les besoins de cette trad je vais rester sur ce qui a été convenu mais à l'avenir (sur d'autre projets, ou des PRs global ultérieures) je proposerais de respecter ce point plus fermement.

Par exemple, concernant la mocheté de « Littéraux de gabarits ». À force de traduire des textes je m'aperçois juste que c'est un comportement du cerveau fasse à des mots qu'on a jamais entendu (nouveau, pas connu). Le lire plus de 3 ou 4 fois à travers une ou deux pages et c'est plié. Le rencontrer encore un autre jour et sa s'estompe. Du coup maintenant, j'ai tendance à toujours prendre une version FR, si celui-ci existe, même si le mot anglais est connu.

Genre personne dit ça, et c'est pas fautes d'essayer : http://www.gouvernement.fr/top-10-des-mots-d-internet-que-vous-allez-oser-dire-en-francais

Je pense que c'est notre responsabilité de traduire un texte d'une langue dans sa langue sinon autant se référer à l'original.

MachinisteWeb · 2017-04-04T06:41:47Z

src/v2/guide/components.md

-  // just like data, the prop can be used inside templates
-  // and is also made available in the vm as this.message
+  // tout comme les data, une prop peut être utilisée à l'intérieur de templates
+  // et est également disponible dans le vm via this.message


Première page du guide, vm c'est le nom que l'on donne partout dans le guide à une instance de vue pour « vue-model ». Il est utilisé partout. Cependant c'est donc la vm « pour variable vm ou instance de Vue vm.

https://fr.vuejs.org/v2/guide/instance.html => « Bien que n’étant pas strictement associée au patron d’architecture MVVM pattern, la conception de Vue s’en est en partie inspirée. Par convention, nous utilisons souvent la variable vm (abréviation pour ViewModel) pour faire référence à nos instances de Vue. »

MachinisteWeb · 2017-04-04T06:59:44Z

src/v2/guide/components.md

@@ -297,13 +297,13 @@ Similar to binding a normal attribute to an expression, we can also use `v-bind`
 </div>
 ```

-It's often simpler to use the shorthand syntax for `v-bind`:
+C'est souvent plus simple d'utiliser la syntaxe d'abréviation pour `v-bind` :


Ok j'ajoute ça.

Shorthands => Abréviations
Shorthand => Abréviation
Shorthand syntax => Syntaxe abrégée

MachinisteWeb · 2017-04-04T07:13:16Z

src/v2/guide/components.md


-There may be times when you want to listen for a native event on the root element of a component. In these cases, you can use the `.native` modifier for `v-on`. For example:
+Il y a des fois où vous souhaitez écouter un événement natif sur l'élément racine d'un composant. Dans ce cas, vous devez utiliser le modificateur `.native` sur `v-on`. Par exemple :

 ``` html
 <my-component v-on:click.native="doTheThing"></my-component>


On traduit les valeurs de variable et les commentaires. Pas les noms de variable sinon :

dans https://fr.vuejs.org/v2/guide/ on aurait :

<div id="app-3"> <p v-if="vu">Maintenant vous me voyez</p> </div>

var app3 = new Vue({ el: '#app-3', data: { vu: true } })

ou

<div id="app-4"> <ol> <li v-for="element in listes"> {{ liste.texte }} </li> </ol> </div>

et

var app4 = new Vue({ el: '#app-4', data: { listes: [ { texte: 'Apprendre JavaScript' }, { texte: 'Apprendre Vue' }, { texte: 'Créer quelque chose de génial' } ] } })

et dans cette même page, plus haut, on aurait

<div id="exemple-compteur-evenement"> <p>{{ total }}</p> <compteur-bouton v-on:incrementer="incrementerTotal"></compteur-bouton> <compteur-bouton v-on:incrementer="incrementerTotal"></compteur-bouton> </div>

Vue.component('compteur-bouton', { template: '<button v-on:click="incrementer">{{ compteur }}</button>', data: function () { return { compteur: 0 } }, methods: { incrementer: function () { this.compteur += 1 this.$emit('incrementer') } }, }) new Vue({ el: '#exemple-compteur-evenement', data: { total: 0 }, methods: { incrementerTotal: function () { this.total += 1 } } })

MachinisteWeb · 2017-04-04T09:05:27Z

src/v2/guide/components.md


-Sometimes two components may need to communicate with one-another but they are not parent/child to each other. In simple scenarios, you can use an empty Vue instance as a central event bus:
+Parfois deux composants peuvent avoir besoin de communiquer l'un et l'autre mais ne sont pas parent/enfant l'un de l'autre. Dans un simple scénario, vous pouvez utiliser une instance de Vue vide comme bus d'événements central.


Je trouve sa bien, mais à bien répercuter partout dans la doc à l'avenir.

BTW, je passe beaucoup de temps sur le chat de Vue et le terme « bus » est énormément utilisé pour tout cas de figure n'utilisant pas Vuex.

MachinisteWeb · 2017-04-04T09:19:39Z

src/v2/guide/components.md

 </app-layout>
 ```

-The rendered result will be:
+Le résultat du rendu serait :


Si vous insistez, mais je dois alors retirer l'aspect « supposée » de la phrase soit « Par exemple, avec un composant » ce qui pour moi n'est pas la traduction la plus proche.

« Supposons que tout le monde faisait 3 mètres, il faudrait augmenter la hauteur des portes »

vs

« Maintenant, tout le monde fait trois mètres, il faudra augmenter la hauteur des portes »

MachinisteWeb · 2017-04-04T09:53:52Z

src/v2/guide/components.md


-In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's actually needed. To make that easier, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. Vue will only trigger the factory function when the component actually needs to be rendered and will cache the result for future re-renders. For example:
+Dans de grosses applications, nous avons parfois besoin de diviser la structure en plus petits morceaux et uniquement charger le composant depuis le serveur quand c'est vraiment nécessaire. Pour rendre ça plus simple, Vue permet de définir votre composant comme une fonction génératrice qui complétera de manière asynchrone la définition de votre composant. Vue fera appel à la fonction génératrice quand un rendu aura besoin d'être fait sur le composant et mettra ce rendu en cache pour le resservir lors de futures demandes de rendu. Par exemple :


je vais mettre fragment comme proposé dans le SSR

MachinisteWeb · 2017-04-04T10:22:45Z

src/v2/guide/components.md

 <kebab-cased-component></kebab-cased-component>
 <camel-cased-component></camel-cased-component>
 <title-cased-component></title-cased-component>
 ```

-When using _string_ templates however, we're not bound by HTML's case-insensitive restrictions. That means even in the template, you can reference your components and props using camelCase, TitleCase, or kebab-case:
+Quand vous utilisez des template basés sur les _chaînes de caractère_ vous n'êtes cependant pas restreint à la sensibilité de la casse du HTML. Cela signifie que même dans le template, vous pouvez référencer vos composants et props en utilisant les camelCase, TitleCase, ou kebab-case :


Y a un soucis ici.

Pour qu'un code HTML soit valide il faut que tout soit en minuscule. Si il est en majuscule il n'est pas valide. Le HTML est donc sensible à la casse. Pourquoi dit-on alors que il est insensible ?

MachinisteWeb · 2017-04-04T10:33:25Z

src/v2/guide/components.md


-However, if you're requiring/importing components using a __module system__, e.g. via Webpack or Browserify, you'll get an error:
+Cependant, si vous réclamez/importez des composants en utilisant un __système de module__, c-à-d via Webpack ou Browserify, vous obtiendrez une erreur « Échec de montage du composant : un template ou une fonction de rendu n'est pas défini. » :


Idem que remarque SSR, je garde « c-à-d » car c'est celui utilisé partout ailleurs pour la consistance.

Je laisse le soins à une PR Global de changer les c-à-d en « c.-à-d. » si cela est vraiment pertinent à travers toutes les pages déjà traduite.

Signed-off-by: Bruno Lesieur <[email protected]>

MachinisteWeb · 2017-04-04T10:42:45Z

J'ai eu l'unicorne de GitHub lors de la validation de ma review. Je crois que j'ai perdu plein de commentaire...

sylvainpolletvillard · 2017-04-07T10:02:55Z

On va refaire une nouvelle PR avec les correctifs à plat pour éviter l'Unicorn de Github

Traduction : components.md

2cabcd9

Traduction complète du fichier `components.md`

MachinisteWeb self-assigned this Mar 4, 2017

MachinisteWeb added Proposition Traduction en cours and removed Proposition labels Mar 4, 2017

MachinisteWeb added 4 commits March 4, 2017 19:00

Retrait des grosses coquilles

764b4c8

realigner les numéros de ligne

59d5b09

Update exemple

cf3858e

Reorganize exemple

76ca254

MachinisteWeb changed the title ~~Traduction : components.md~~ components.md Mar 6, 2017

MachinisteWeb added 4 commits March 6, 2017 09:21

New component part translation

a59d268

Signed-off-by: Bruno Lesieur <[email protected]>

Add example for components.md

5f52cdd

Signed-off-by: Bruno Lesieur <[email protected]>

New promise example.

eab4070

Signed-off-by: Bruno Lesieur <[email protected]>

Relecture de components.md

5e75834

Signed-off-by: Bruno Lesieur <[email protected]>

MachinisteWeb commented Mar 6, 2017

View reviewed changes

MachinisteWeb added Relecture nécessaire and removed Traduction en cours labels Mar 6, 2017

MachinisteWeb requested review from forresst, yann-yinn and sylvainpolletvillard March 6, 2017 12:27

Merge remote-tracking branch 'upstreamfr/master' into french_components

25210e7

# Conflicts: # src/v2/guide/components.md Signed-off-by: Bruno Lesieur <[email protected]>

forresst reviewed Mar 23, 2017

View reviewed changes

2 propositions en réponse à mes interrogations

5883d38

Signed-off-by: Bruno Lesieur <[email protected]>

Traitement des remarques de Forresst

0abd93e

Signed-off-by: Bruno Lesieur <[email protected]>

Merge remote-tracking branch 'upstreamfr/master' into french_components

16646b9

sylvainpolletvillard requested changes Apr 3, 2017

View reviewed changes

MachinisteWeb commented Apr 4, 2017

View reviewed changes

MàJ des modifs proposées par Sylvain

6da314e

Signed-off-by: Bruno Lesieur <[email protected]>

MachinisteWeb mentioned this pull request Apr 6, 2017

Pages en cours de traduction #3

Open

sylvainpolletvillard closed this Apr 7, 2017


		Components are meant to be used together, most commonly in parent-child relationships: component A may use component B in its own template. They inevitably need to communicate to one another: the parent may need to pass data down to the child, and the child may need to inform the parent of something that happened in the child. However, it is also very important to keep the parent and the child as decoupled as possible via a clearly-defined interface. This ensures each component's code can be written and reasoned about in relative isolation, thus making them more maintainable and potentially easier to reuse.
		Les composants sont destinés à être utilisés ensemble, le plus souvent dans une relation parent-enfant : le composant A peut utiliser le composant B dans son propre template. Ils vont inévitablement avoir besoin de communiquer les uns avec les autres : le parent peut avoir besoin de passer des données à son enfant, et l'enfant peut avoir besoin d'informer le parent que quelque chose c'est produit à l'intérieur. Cependant, il est également très important de garder le parent et l'enfant aussi découplé que possible via une interface clairement définie. Cela assure que le code de chaque composant peut être écrit et raisonner à propos de sa propre isolation relative [se suffire à lui même], cela les rends plus maintenable et potentiellement plus simple à ré-utiliser.


		A scoped slot is a special type of slot that functions as a reusable template (that can be passed data to) instead of already-rendered-elements.


		When authoring components, it's good to keep in mind whether you intend to reuse it somewhere else later. It's OK for one-off components to be tightly coupled, but reusable components should define a clean public interface and make no assumptions about the context it's used in.
		Quand on créé des composants, c'est une bonne chose de garder à l'esprit la manière dont vous souhaitez le réutiliser plus tard. C'est acceptable qu'un composant ai un couplage fort, mais un composant réutilisable devrait définir une interface publique clair et ne laisser aucun doutes sur son contexte d'utilisation.


		- Events allow the component to trigger side effects in the external environment
		- Les événements permettent au composant de déclencher des effets de bord [bizarre c'est péjoratif pour moi] dans l'environnement extérieur


		<p class="tip">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).</p>Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that Vue's compiler attaches behavior to. In some cases, they may also appear as a native HTML element extended with the special `is` attribute.
		Les composants sont l'une des plus puissantes fonctionnalités de Vue. Ils vous aident à étendre les éléments de base du HTML en encapsulant du code ré-utilisable. À un haut niveau, les composants sont des éléments personnalisables auxquels le compilateur de Vue attache un comportement. Dans plusieurs cas, ils peuvent apparaître comme des éléments HTML natifs étendus avec l'attribut spécial `is`.


		You don't have to register every component globally. You can make a component available only in the scope of another instance/component by registering it with the `components` instance option:
		Vous n'avez pas à enregistrer chaque composant de manière global. Vous pouvez rendre un composant disponible dans la portée d'un(e) autre composant/instance en l'enregistrant avec l'option `components` lors de l'instanciation :


		When using the DOM as your template (e.g. using the `el` option to mount an element with existing content), you will be subject to some restrictions that are inherent to how HTML works, because Vue can only retrieve the template content after the browser has parsed and normalized it. Most notably, some elements such as `<ul>`, `<ol>`, `<table>` and `<select>` have restrictions on what elements can appear inside them, and some elements such as `<option>` can only appear inside certain other elements.
		Quand vous utilisez le DOM en tant que template (ex. : en utilisant l'option `el` pour monter un élément avec du contenu existant), vous êtes sujet à plusieurs restrictions dépendantes de la façon de fonctioner du HTML, car Vue peut uniquement récupérer le contenu du template après qu'il ai été analysé et normalisé. Des éléments tels que `<ul>`, `<ol>`, `<table>` et `<select>` ont notablement des restrictions sur les éléments que l'on peut trouver à l'intérieur, et plusieurs éléments comme `<option>` ne peuvent apparaitre qu'à l'intérieur de certains éléments.


		In our case, I'll make that point the `tree-folder` component. We know the child that creates the paradox is the `tree-folder-contents` component, so we'll wait until the `beforeCreate` lifecycle hook to register it:
		Dans notre cas, il faut que le composant `tree-folder` le signifie. Nous savons que l'enfant créé un paradoxe dans le composant `tree-folder-contents`, aussi nous allons attendre que le hook `beforeCreate` du cycle de vie pour l'enregistrer :


		Once registered, a component can be used in an instance's template as a custom element, `<my-component></my-component>`. Make sure the component is registered before you instantiate the root Vue instance. Here's the full example:
		Une fois enregistré, un composant peut être utilisé dans une instance de template en tant qu'élément personnalisé, `<my-component></my-component>`. Assurez-vous que le composant soit enregistré avant l'instanciation de l'instance racine de Vue. Voici un exemple complet :


		### DOM Template Parsing Caveats
		### Limitations d'analyse d'un template à partir du DOM


		### Cheap Static Components with `v-once`
		### Composants statiques peu couteux avec `v-once`


		Rendering plain HTML elements is very fast in Vue, but sometimes you might have a component that contains a lot of static content. In these cases, you can ensure that it's only evaluated once and then cached by adding the `v-once` directive to the root element, like this:
		Faire le rendu d'éléments HTML est vraiment rapide avec Vue, mais parfois vous aurez un composant qui contient beaucoup de contenu statique. Dans ces cas, vous pouvez vous assurer qu'il n'est évalué qu'une seule fois puis mis en cache avec la directive `v-once` sur l'élément racine, comme cela :


		Sometimes two components may need to communicate with one-another but they are not parent/child to each other. In simple scenarios, you can use an empty Vue instance as a central event bus:
		Parfois deux composants peuvent avoir besoin de communiquer l'un et l'autre mais ne sont pas parent/enfant l'un de l'autre. Dans un simple scénario, vous pouvez utiliser une instance de Vue vide comme bus d'événements central.


		In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's actually needed. To make that easier, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. Vue will only trigger the factory function when the component actually needs to be rendered and will cache the result for future re-renders. For example:
		Dans de grosses applications, nous avons parfois besoin de diviser la structure en plus petits morceaux et uniquement charger le composant depuis le serveur quand c'est vraiment nécessaire. Pour rendre ça plus simple, Vue permet de définir votre composant comme une fonction génératrice qui complétera de manière asynchrone la définition de votre composant. Vue fera appel à la fonction génératrice quand un rendu aura besoin d'être fait sur le composant et mettra ce rendu en cache pour le resservir lors de futures demandes de rendu. Par exemple :


		However, if you're requiring/importing components using a __module system__, e.g. via Webpack or Browserify, you'll get an error:
		Cependant, si vous réclamez/importez des composants en utilisant un __système de module__, c-à-d via Webpack ou Browserify, vous obtiendrez une erreur « Échec de montage du composant : un template ou une fonction de rendu n'est pas défini. » :

components.md #42

components.md #42

Conversation

MachinisteWeb commented Mar 4, 2017 • edited Loading

MachinisteWeb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sylvainpolletvillard Mar 6, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

forresst left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MachinisteWeb commented Mar 23, 2017

sylvainpolletvillard commented Mar 25, 2017

MachinisteWeb commented Mar 25, 2017 via email

MachinisteWeb commented Mar 27, 2017 • edited Loading

MachinisteWeb commented Mar 27, 2017 • edited Loading

sylvainpolletvillard left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MachinisteWeb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MachinisteWeb commented Apr 4, 2017

sylvainpolletvillard commented Apr 7, 2017

MachinisteWeb commented Mar 4, 2017 •

edited

Loading

sylvainpolletvillard Mar 6, 2017 •

edited

Loading

MachinisteWeb commented Mar 27, 2017 •

edited

Loading

MachinisteWeb commented Mar 27, 2017 •

edited

Loading