Traduction de `custom-directive.md` #68

MachinisteWeb · 2017-06-17T08:13:25Z

La prochaine page à devoir être traduit dans l'ordre des traductions du guide.

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

forresst

Quelques remarques ...

forresst · 2017-06-19T11:45:38Z

src/v2/guide/custom-directive.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><p>In addition to the default set of directives shipped in core (`v-model` and `v-show`), Vue also allows you to register your own custom directives. Note that in Vue 2.0, the primary form of code reuse and abstraction is components - however there may be cases where you just need some low-level DOM access on plain elements, and this is where custom directives would still be useful. An example would be focusing on an input element, like this one:</p>
+En supplément de la palette de directive fournie en standard (`v-model` et `v-show`), Vue vous permet également d'enregistrer vos propres directives. Notez qu'avec Vue 2, la forme de code préféré pour la réutilisabilité et l''abstraction est le composant. Il y a cependant des cas où vous aurez juste besoin d'un accès de bas niveau aux éléments du DOM, et c'est là que les directives personnalisées vous seraient utiles. Un exemple pourrait être la prise du focus sur un élément de champ, comme celui-ci :


l'abstraction est le composant

une seule apostrophe

forresst · 2017-06-19T11:48:22Z

src/v2/guide/custom-directive.md

@@ -24,69 +24,69 @@ new Vue({
 </script>
 {% endraw %}

-When the page loads, that element gains focus (note: autofocus doesn't work on mobile Safari). In fact, if you haven't clicked on anything else since visiting this page, the input above should be focused now. Now let's build the directive that accomplishes this:
+Quand la page charge, cet élément prend le focus (notez que l'autofocus ne fonctionne pas sur Safari mobile). En fait, si vous n'avez cliqué sur rien du tout depuis votre arrivée sur la page, le champ ci-dessous devrait avoir le focus en ce moment même. À présent, jetons un œil à la directive qui pourrait accomplir cela :


votre arrivée sur la page, le champ ci-dessous devrait avoir le focus ~~en ce moment même~~.

pas utile, cela parait implicite

forresst · 2017-06-19T11:49:51Z

src/v2/guide/custom-directive.md

    el.focus()
  }
 })
 ```

-If you want to register a directive locally instead, components also accept a `directives` option:
+Si vous préférez enregistrer la directive en local à la place, les composants acceptent également l'option `directives` :


Si vous préférez enregistrer à la place la directive en local ~~à la place~~,

forresst · 2017-06-19T11:50:45Z

src/v2/guide/custom-directive.md


 ``` html
 <input v-focus>
 ```

-## Hook Functions
+## Fonction de hook


Fonctions

Au pluriel comme la version anglaise

forresst · 2017-06-19T11:53:44Z

src/v2/guide/custom-directive.md


- `update`: called after the containing component has updated, __but possibly before its children have updated__. The directive's value may or may not have changed, but you can skip unnecessary updates by comparing the binding's current and old values (see below on hook arguments).
+- `update`: appelée après que le composant conteneur ai été mis à jour, __mais possiblement avant que ses enfants ai été mis à jour__. La valeur de la directive peut ou pas avoir changé, mais vous pouvez passer les mises à jour non nécessaire en comparant les valeurs couramment liées avec les anciennes valeurs (voir plus bas les arguments de hook).


mais peut-être ~~possiblement~~ avant que ses enfants

mais vous pouvez ~~passer~~ ignorer les mises à jour ~~non nécessaire en comparant les valeurs couramment liées avec les anciennes valeurs~~ inutiles en comparant les valeurs actuelles et anciennes de la liaison

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

MachinisteWeb · 2017-06-19T13:26:15Z

Merci @forresst, c'est top, j'ai tout pris en compte ;)

MachinisteWeb · 2017-06-28T07:17:12Z

Une seconde review ? @Kocal, @sylvainpolletvillard ?

Kocal

Review partielle parce que j'ai pas trop le temps atm :/

Kocal · 2017-06-28T09:17:04Z

src/v2/guide/custom-directive.md


- `update`: called after the containing component has updated, __but possibly before its children have updated__. The directive's value may or may not have changed, but you can skip unnecessary updates by comparing the binding's current and old values (see below on hook arguments).
+- `update`: appelée après que le composant conteneur ai été mis à jour, __mais peut-être avant que ses enfants ai été mis à jour__. La valeur de la directive peut ou pas avoir changé, mais vous pouvez ignorer les mises à jour inutiles en comparant les valeurs actuelles et anciennes de la liaison (voir plus bas les arguments de hook).


__mais peut-être avant que ses enfants soit mis à jour__

Kocal · 2017-06-28T09:17:24Z

src/v2/guide/custom-directive.md


- `componentUpdated`: called after the containing component __and its children__ have updated.
+- `componentUpdated`: appelée après que le composant conteneur __et ses enfants__ ai été mis à jour.


soit mis à jour

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

MachinisteWeb · 2017-06-29T07:26:30Z

Merci @Kocal ! Bon pour toi ?

sylvainpolletvillard

3ème relecture

sylvainpolletvillard · 2017-06-29T09:20:31Z

src/v2/guide/custom-directive.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><p>In addition to the default set of directives shipped in core (`v-model` and `v-show`), Vue also allows you to register your own custom directives. Note that in Vue 2.0, the primary form of code reuse and abstraction is components - however there may be cases where you just need some low-level DOM access on plain elements, and this is where custom directives would still be useful. An example would be focusing on an input element, like this one:</p>
+En supplément de la palette de directive fournie en standard (`v-model` et `v-show`), Vue vous permet également d'enregistrer vos propres directives. Notez qu'avec Vue 2, la forme de code préféré pour la réutilisabilité et l'abstraction est le composant. Il y a cependant des cas où vous aurez juste besoin d'un accès de bas niveau aux éléments du DOM, et c'est là que les directives personnalisées vous seraient utiles. Un exemple pourrait être la prise du focus sur un élément de champ, comme celui-ci :


En supplément de l'ensemble de directives fourni par défaut

Notez que dans Vue 2, la forme principale de réutilisabilité du code et d'abstraction est les composants - cependant il peut avoir des cas où vous avez juste besoin

Merci, j'ai mis « directives fournies », me semble que c'est correcte ?

J'ai mis « sont les composants » du coup.

top

soit c'est l'ensemble qui est fourni, soit ce sont les directives qui sont fournies. Les deux sont valables.

pour éviter la confusion sur le sujet (la forme sont), il vaut mieux retourner la phrase:
Notez qu'avec Vue 2, les composants sont la forme principale de réutilisabilité et d'asbtraction du code.

sylvainpolletvillard · 2017-06-29T09:22:41Z

src/v2/guide/custom-directive.md

@@ -24,69 +24,69 @@ new Vue({
 </script>
 {% endraw %}

-When the page loads, that element gains focus (note: autofocus doesn't work on mobile Safari). In fact, if you haven't clicked on anything else since visiting this page, the input above should be focused now. Now let's build the directive that accomplishes this:
+Quand la page charge, cet élément prend le focus (notez que l'autofocus ne fonctionne pas sur Safari mobile). En fait, si vous n'avez cliqué sur rien du tout depuis votre arrivée sur la page, le champ ci-dessous devrait avoir le focus. À présent, jetons un œil à la directive qui pourrait accomplir cela :


Quand la page se charge

sylvainpolletvillard · 2017-06-29T09:23:21Z

src/v2/guide/custom-directive.md


-A directive definition object can provide several hook functions (all optional):
+Une définition d'objet directive peut fournir plusieurs fonctions de hook (toutes optionnelles) :


Un objet de définition de directive

sylvainpolletvillard · 2017-06-29T09:24:44Z

src/v2/guide/custom-directive.md


- `bind`: called only once, when the directive is first bound to the element. This is where you can do one-time setup work.
+- `bind` : appelée une fois quand la directive est attachée à l'élément. C'est ici que vous pouvez effectuer les actions uniques d'initialisation.


une seule fois

sylvainpolletvillard · 2017-06-29T09:25:16Z

src/v2/guide/custom-directive.md


- `inserted`: called when the bound element has been inserted into its parent node (this only guarantees parent node presence, not necessarily in-document).
+- `inserted`: appelée quand l'élément lié a été inséré dans son nœud parent (cela garanti uniquement sa présence dans le nœud parent, mais pas nécessairement dans le DOM principal).


cela garantit

pas nécessairement dans le document

sylvainpolletvillard · 2017-06-29T09:27:16Z

src/v2/guide/custom-directive.md

- **vnode**: The virtual node produced by Vue's compiler. See the [VNode API](../api/#VNode-Interface) for full details.
- **oldVnode**: The previous virtual node, only available in the `update` and `componentUpdated` hooks.
+- **el**: L'élément sur lequel la directive est liée. Cela peut être utilisé pour directement manipuler le DOM.
+- **binding**: Un objets contenant les propriétés suivantes.


sylvainpolletvillard · 2017-06-29T09:27:30Z

src/v2/guide/custom-directive.md

+- **binding**: Un objets contenant les propriétés suivantes.
+  - **name**: Le nom de la directive, sans le préfixe `v-`.
+  - **value**: La valeur passée à la directive. Par exemple dans `v-my-directive="1 + 1"`, la valeur serait `2`.
+  - **oldValue**: La valeur précédente, seulement disponible dans `update` et `componentUpdated`. Elle est disponible, que la valeur ai changé ou non.


ait changé

sylvainpolletvillard · 2017-06-29T09:27:42Z

src/v2/guide/custom-directive.md

+  - **name**: Le nom de la directive, sans le préfixe `v-`.
+  - **value**: La valeur passée à la directive. Par exemple dans `v-my-directive="1 + 1"`, la valeur serait `2`.
+  - **oldValue**: La valeur précédente, seulement disponible dans `update` et `componentUpdated`. Elle est disponible, que la valeur ai changé ou non.
+  - **expression**: L'expression liée en tant que chaîne de caractère. Par exemple dans `v-my-directive="1 + 1"`, l'expression serait `"1 + 1"`.


chaîne de caractères

sylvainpolletvillard · 2017-06-29T09:29:03Z

src/v2/guide/custom-directive.md


-In many cases, you may want the same behavior on `bind` and `update`, but don't care about the other hooks. For example:
+La plupart du temps, vous souhaiterez un même comportement pour les hooks `bind` et `update`, sans avoir besoin des autres hooks. Par exemple :


Dans de nombreux cas, vous pourriez vouloir le même comportement

sylvainpolletvillard · 2017-06-29T09:31:43Z

src/v2/guide/custom-directive.md


 ``` js
 Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
 })
 ```

-## Object Literals
+## Objet en tant que valeur


Littéraux objet
(source: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition#Utiliser_la_décomposition_avec_les_littéraux_objet)

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

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

Merci @sylvainpolletvillard ! J'ai tout pris (avec le retournement de phrase) !

MachinisteWeb · 2017-07-01T08:06:15Z

Je peux merge ?!

Kocal · 2017-07-01T09:22:55Z

Je pense que oui ^^

MachinisteWeb · 2017-07-01T09:34:09Z

Si @sylvainpolletvillard a des petites modifs, je les réinjecterai rétroactivement

sylvainpolletvillard · 2017-07-01T11:23:47Z

Je ne peux plus approuver les changements, mais bon pour moi

Traduction de custom-directive.md

44302a3

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

MachinisteWeb self-assigned this Jun 17, 2017

MachinisteWeb requested review from forresst, sylvainpolletvillard and Kocal June 17, 2017 08:13

MachinisteWeb mentioned this pull request Jun 17, 2017

Pages en cours de traduction #3

Open

MachinisteWeb added the Relecture nécessaire label Jun 17, 2017

forresst reviewed Jun 19, 2017

View reviewed changes

Ajout des remarques de @forresst

ddb81a1

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

forresst approved these changes Jun 19, 2017

View reviewed changes

Merge branch 'french' into custom-directive

117b5e2

Kocal requested changes Jun 28, 2017

View reviewed changes

Add points from @Kocal

0b9a994

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

sylvainpolletvillard requested changes Jun 29, 2017

View reviewed changes

Kocal approved these changes Jun 29, 2017

View reviewed changes

Retour de @sylvainpolletvillard pris en compte.

04ac43e

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

MachinisteWeb merged commit 0f7067d into vuejs-fr:master Jul 1, 2017

MachinisteWeb deleted the custom-directive branch July 1, 2017 09:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Traduction de `custom-directive.md` #68

Traduction de `custom-directive.md` #68

MachinisteWeb commented Jun 17, 2017 •

edited

Loading

forresst left a comment

forresst Jun 19, 2017

forresst Jun 19, 2017

forresst Jun 19, 2017

forresst Jun 19, 2017

forresst Jun 19, 2017

MachinisteWeb commented Jun 19, 2017

MachinisteWeb commented Jun 28, 2017

Kocal left a comment

Kocal Jun 28, 2017

Kocal Jun 28, 2017

MachinisteWeb commented Jun 29, 2017

sylvainpolletvillard left a comment

sylvainpolletvillard Jun 29, 2017

MachinisteWeb Jun 29, 2017 •

edited

Loading

sylvainpolletvillard Jun 29, 2017

MachinisteWeb Jun 29, 2017

sylvainpolletvillard Jun 29, 2017

sylvainpolletvillard Jun 29, 2017

sylvainpolletvillard Jun 29, 2017

sylvainpolletvillard Jun 29, 2017

sylvainpolletvillard Jun 29, 2017

sylvainpolletvillard Jun 29, 2017

sylvainpolletvillard Jun 29, 2017

sylvainpolletvillard Jun 29, 2017

sylvainpolletvillard Jun 29, 2017

MachinisteWeb commented Jun 29, 2017

MachinisteWeb commented Jul 1, 2017

Kocal commented Jul 1, 2017

MachinisteWeb commented Jul 1, 2017

sylvainpolletvillard commented Jul 1, 2017


		<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><p>In addition to the default set of directives shipped in core (`v-model` and `v-show`), Vue also allows you to register your own custom directives. Note that in Vue 2.0, the primary form of code reuse and abstraction is components - however there may be cases where you just need some low-level DOM access on plain elements, and this is where custom directives would still be useful. An example would be focusing on an input element, like this one:</p>
		En supplément de la palette de directive fournie en standard (`v-model` et `v-show`), Vue vous permet également d'enregistrer vos propres directives. Notez qu'avec Vue 2, la forme de code préféré pour la réutilisabilité et l''abstraction est le composant. Il y a cependant des cas où vous aurez juste besoin d'un accès de bas niveau aux éléments du DOM, et c'est là que les directives personnalisées vous seraient utiles. Un exemple pourrait être la prise du focus sur un élément de champ, comme celui-ci :


		- `update`: called after the containing component has updated, __but possibly before its children have updated__. The directive's value may or may not have changed, but you can skip unnecessary updates by comparing the binding's current and old values (see below on hook arguments).
		- `update`: appelée après que le composant conteneur ai été mis à jour, __mais possiblement avant que ses enfants ai été mis à jour__. La valeur de la directive peut ou pas avoir changé, mais vous pouvez passer les mises à jour non nécessaire en comparant les valeurs couramment liées avec les anciennes valeurs (voir plus bas les arguments de hook).


		- `componentUpdated`: called after the containing component __and its children__ have updated.
		- `componentUpdated`: appelée après que le composant conteneur __et ses enfants__ ai été mis à jour.


		A directive definition object can provide several hook functions (all optional):
		Une définition d'objet directive peut fournir plusieurs fonctions de hook (toutes optionnelles) :


		- `bind`: called only once, when the directive is first bound to the element. This is where you can do one-time setup work.
		- `bind` : appelée une fois quand la directive est attachée à l'élément. C'est ici que vous pouvez effectuer les actions uniques d'initialisation.


		- `inserted`: called when the bound element has been inserted into its parent node (this only guarantees parent node presence, not necessarily in-document).
		- `inserted`: appelée quand l'élément lié a été inséré dans son nœud parent (cela garanti uniquement sa présence dans le nœud parent, mais pas nécessairement dans le DOM principal).


		In many cases, you may want the same behavior on `bind` and `update`, but don't care about the other hooks. For example:
		La plupart du temps, vous souhaiterez un même comportement pour les hooks `bind` et `update`, sans avoir besoin des autres hooks. Par exemple :

Traduction de custom-directive.md #68

Traduction de custom-directive.md #68

Conversation

MachinisteWeb commented Jun 17, 2017 • edited Loading

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

MachinisteWeb commented Jun 19, 2017

MachinisteWeb commented Jun 28, 2017

Kocal left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MachinisteWeb commented Jun 29, 2017

sylvainpolletvillard left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MachinisteWeb Jun 29, 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

MachinisteWeb commented Jun 29, 2017

MachinisteWeb commented Jul 1, 2017

Kocal commented Jul 1, 2017

MachinisteWeb commented Jul 1, 2017

sylvainpolletvillard commented Jul 1, 2017

Traduction de `custom-directive.md` #68

Traduction de `custom-directive.md` #68

MachinisteWeb commented Jun 17, 2017 •

edited

Loading

MachinisteWeb Jun 29, 2017 •

edited

Loading