Skip to content

Commit 04ac43e

Browse files
committed
Retour de @sylvainpolletvillard pris en compte.
Signed-off-by: Bruno Lesieur <[email protected]>
1 parent 0b9a994 commit 04ac43e

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

src/v2/guide/custom-directive.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ order: 16
66

77
## Introduction
88

9-
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 :
9+
En supplément de l'ensemble de directives fournies par défaut (`v-model` et `v-show`), Vue vous permet également d'enregistrer vos propres directives. Notez qu'avec Vue 2, les composants sont la forme principale de réutilisabilité et d'asbtraction du code. 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 :
1010

1111
{% raw %}
1212
<div id="simplest-directive-example" class="demo">
@@ -24,7 +24,7 @@ new Vue({
2424
</script>
2525
{% endraw %}
2626

27-
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 :
27+
Quand la page se 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 :
2828

2929
``` js
3030
// Enregistrer une directive globale appelée focus
@@ -55,15 +55,15 @@ Puis dans un template, vous pouvez utiliser le nouvel attribut `v-focus` sur n'i
5555

5656
## Fonctions de hook
5757

58-
Une définition d'objet directive peut fournir plusieurs fonctions de hook (toutes optionnelles) :
58+
Un objet de définition de directive peut fournir plusieurs fonctions de hook (toutes optionnelles) :
5959

60-
- `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.
60+
- `bind` : appelée une seule fois quand la directive est attachée à l'élément. C'est ici que vous pouvez effectuer les actions uniques d'initialisation.
6161

62-
- `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).
62+
- `inserted`: appelée quand l'élément lié a été inséré dans son nœud parent (cela garantit uniquement sa présence dans le nœud parent, mais pas nécessairement dans le document principal).
6363

64-
- `update`: appelée après que le composant conteneur ai été mis à jour, __mais peut-être avant que ses enfants soit 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).
64+
- `update`: appelée après que le composant conteneur ait été mis à jour, __mais possiblement avant que ses enfants aient é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).
6565

66-
- `componentUpdated`: appelée après que le composant conteneur __et ses enfants__ soit mis à jour.
66+
- `componentUpdated`: appelée après que le composant conteneur __et ses enfants__ aient été mis à jour.
6767

6868
- `unbind`: appelée uniquement une fois, quand la directive est déliée de l'élément.
6969

@@ -74,11 +74,11 @@ Nous allons explorer les arguments passés à ces hooks (c.-à-d. `el`, `binding
7474
Les hooks d'une directive ont accès à ces arguments :
7575

7676
- **el**: L'élément sur lequel la directive est liée. Cela peut être utilisé pour directement manipuler le DOM.
77-
- **binding**: Un objets contenant les propriétés suivantes.
77+
- **binding**: Un objet contenant les propriétés suivantes.
7878
- **name**: Le nom de la directive, sans le préfixe `v-`.
7979
- **value**: La valeur passée à la directive. Par exemple dans `v-my-directive="1 + 1"`, la valeur serait `2`.
80-
- **oldValue**: La valeur précédente, seulement disponible dans `update` et `componentUpdated`. Elle est disponible, que la valeur ai changé ou non.
81-
- **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"`.
80+
- **oldValue**: La valeur précédente, seulement disponible dans `update` et `componentUpdated`. Elle est disponible, que la valeur ait changé ou non.
81+
- **expression**: L'expression liée en tant que chaîne de caractères. Par exemple dans `v-my-directive="1 + 1"`, l'expression serait `"1 + 1"`.
8282
- **arg**: L'argument passé à la directive, s'il y en a une. Par exemple dans `v-my-directive:foo`, l'argument serait `"foo"`.
8383
- **modifiers**: Un objet contenant les modificateurs, s'il y en a. Par exemple dans `v-my-directive.foo.bar`, l'objet des modificateurs serait `{ foo: true, bar: true }`.
8484
- **vnode**: Le nœud virtuel produit par le compilateur Vue. Voir l'[API VNode](../api/#Interface-VNode) pour tous les détails.
@@ -140,15 +140,15 @@ new Vue({
140140

141141
## Fonction abrégée
142142

143-
La plupart du temps, vous souhaiterez un même comportement pour les hooks `bind` et `update`, sans avoir besoin des autres hooks. Par exemple :
143+
Dans de nombreux cas, vous pourriez vouloir le même comportement pour les hooks `bind` et `update`, sans avoir besoin des autres hooks. Par exemple :
144144

145145
``` js
146146
Vue.directive('color-swatch', function (el, binding) {
147147
el.style.backgroundColor = binding.value
148148
})
149149
```
150150

151-
## Objet en tant que valeur
151+
## Littéraux objet
152152

153153
Si votre directive a besoin de plusieurs valeurs, vous pouvez également passer un objet JavaScript. Souvenez-vous, une directive peut accepter n'importe quelle expression JavaScript.
154154

0 commit comments

Comments
 (0)