You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/v2/guide/custom-directive.md
+5-5Lines changed: 5 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ order: 16
6
6
7
7
## Introduction
8
8
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 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 :
10
10
11
11
{% raw %}
12
12
<divid="simplest-directive-example"class="demo">
@@ -24,7 +24,7 @@ new Vue({
24
24
</script>
25
25
{% endraw %}
26
26
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 en ce moment même. À présent, jetons un œil à la directive qui pourrait accomplir cela :
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 :
28
28
29
29
```js
30
30
// Enregistrer une directive globale appelée focus
@@ -37,7 +37,7 @@ Vue.directive('focus', {
37
37
})
38
38
```
39
39
40
-
Si vous préférez enregistrer la directive en local à la place, les composants acceptent également l'option `directives` :
40
+
Si vous préférez enregistrer à la place la directive en local, les composants acceptent également l'option `directives` :
41
41
42
42
```js
43
43
directives: {
@@ -53,15 +53,15 @@ Puis dans un template, vous pouvez utiliser le nouvel attribut `v-focus` sur n'i
53
53
<inputv-focus>
54
54
```
55
55
56
-
## Fonction de hook
56
+
## Fonctions de hook
57
57
58
58
Une définition d'objet directive peut fournir plusieurs fonctions de hook (toutes optionnelles) :
59
59
60
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.
61
61
62
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).
63
63
64
-
-`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).
64
+
-`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).
65
65
66
66
-`componentUpdated`: appelée après que le composant conteneur __et ses enfants__ ai été mis à jour.
0 commit comments