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/events.md
+23-22Lines changed: 23 additions & 22 deletions
Original file line number
Diff line number
Diff line change
@@ -42,7 +42,7 @@ var example1 = new Vue({
42
42
</script>
43
43
{% endraw %}
44
44
45
-
## Les méthodes de gestion d'évènement"
45
+
## Les méthodes de gestion d'évènement
46
46
47
47
La logique pour beaucoup des gestionnaires d'événements sera très certainement plus complexe, par conséquence, garder votre JavaScript dans la valeur de l'attribut v-on ne sera tout simplement pas possible. C'est pourquoi v-on peut aussi accepter le nom d'une méthode que vous voudriez appeler.
48
48
@@ -75,7 +75,7 @@ var example2 = new Vue({
75
75
})
76
76
77
77
// vous pouvez également invoquer ces méthodes en JavaScript
@@ -150,7 +150,7 @@ Parfois nous avons également besoin d'accéder à l'événement original du DOM
150
150
```js
151
151
// ...
152
152
methods: {
153
-
avertissement:function (message, event) {
153
+
warn:function (message, event) {
154
154
// now we have access to the native event
155
155
if (event) event.preventDefault()
156
156
alert(message)
@@ -160,9 +160,9 @@ methods: {
160
160
161
161
## Modificateurs d'événements
162
162
163
-
C'est un besoin courant que de faire appel ā `event.preventDefault()` ou `event.stopPropagation()` à l'intérieur d'une déclaration de gestionnaire d'évènement. Bien que nous puissions réaliser ceci aisément à l'intérieur de " Methods " , il serait préférable que les méthodes restent purement dediées à la logique des données au lieu d'avoir à prendre en charge les événements du DOM en détails.
164
-
``
165
-
Pour résoudre ce problème, Vue propose des modificateurs d'événement pour `v-on`. Faire appel à ces modificateurs se fait grâce aux extensions d'instruction, ceux-ci commençant par un point.
163
+
C'est un besoin courant que de faire appel ā `event.preventDefault()` ou `event.stopPropagation()` à l'intérieur d'une déclaration de gestionnaire d'évènement. Bien que nous puissions réaliser ceci aisément à l'intérieur de " methods " , il serait préférable que les méthodes restent purement dediées à la logique des données au lieu d'avoir à gérer les détails des évènements du DOM.
164
+
165
+
Pour résoudre ce problème, Vue propose des modificateurs d'événement pour `v-on`. Rappelez-vous que les modificateurs sont des suffixes de directives indiqués par un point.
166
166
167
167
-`.stop`
168
168
-`.prevent`
@@ -174,7 +174,7 @@ Pour résoudre ce problème, Vue propose des modificateurs d'événement pour `v
174
174
<!-- la propagation de l'événement du clic sera stoppée -->
175
175
<av-on:click.stop="doThis"></a>
176
176
177
-
<!-- l'événement « submit », ne rechargera plus la page -->
177
+
<!-- l'événement « submit » ne rechargera plus la page -->
178
178
<formv-on:submit.prevent="onSubmit"></form>
179
179
180
180
<!-- les modificateurs peuvent être chainés -->
@@ -183,10 +183,10 @@ Pour résoudre ce problème, Vue propose des modificateurs d'événement pour `v
183
183
<!-- seulement le modificateur -->
184
184
<formv-on:submit.prevent></form>
185
185
186
-
<!-- utilise le mode « capture » lorsque l'événement d'écoute est ajouté -->
186
+
<!-- utilise le mode « capture » lorsque l'événement écouteur est ajouté -->
187
187
<divv-on:click.capture="doThis">...</div>
188
188
189
-
<!-- seulement déclanché si l'instruction « event.target » est l'élément lui même.-->
189
+
<!-- seulement déclenché si l'instruction « event.target » est l'élément lui même.-->
190
190
<!-- c-à-d : ne s'applique pas aux éléments "enfant" -->
191
191
<divv-on:click.self="doThat">...</div>
192
192
```
@@ -195,12 +195,13 @@ Pour résoudre ce problème, Vue propose des modificateurs d'événement pour `v
195
195
196
196
```html
197
197
<!-- l'événement « click » sera déclenché au moins une fois -->
198
-
<av-on:click.once="faisCeci"></a>
198
+
<av-on:click.once="DoThis"></a>
199
199
```
200
200
201
201
Au contraire des autres modificateurs, qui sont exclusifs aux événements natifs du DOM, le modificateur `.once` peut également être utilisé pour les [événements des composants](components.html#Using-v-on-with-Custom-Events). Si vous n'avez pas encore lu la section concernant les composants, ne vous en inquiétez pas pour le moment.
202
202
203
203
## Modificateurs "key" (Touches)
204
+
204
205
Lorsque nous écoutons les événements du clavier, nous avons régulièrement besoin de s'assurer des codes des touches. Vue permet également d'ajouter un modificateur de touches pour `v-on`:
205
206
206
207
```html
@@ -222,15 +223,15 @@ Voici la liste complète des raccourcis de modificateur pour les touches :
222
223
223
224
-`.enter`
224
225
-`.tab`
225
-
-`.delete` (fonctionne pour les touches "Suppression" et "retour-arrière")
226
+
-`.delete` (fonctionne pour les touches "Suppression" et "Retour arrière")
226
227
-`.esc`
227
228
-`.space`
228
229
-`.up`
229
230
-`.down`
230
231
-`.left`
231
232
-`.right`
232
233
233
-
Vous pouvez également [definir des raccourcis personnalisés pour vos modificateurs ](../api/#keyCodes) grâce à l'objet global `config.keyCodes`:
234
+
Vous pouvez également [définir des raccourcis personnalisés pour vos modificateurs ](../api/#keyCodes) grâce à l'objet global `config.keyCodes`:
Vous pouvez utiliser les modificateurs suivants pour déclancher un événement du clavier ou de la souris seulement lorsque la touche du modificateur correspondant est appuyé :
245
+
Vous pouvez utiliser les modificateurs suivants pour déclencher un événement du clavier ou de la souris seulement lorsque la touche du modificateur correspondante est appuyé :
245
246
246
247
-`.ctrl`
247
248
-`.alt`
248
249
-`.shift`
249
250
-`.meta`
250
251
251
-
> Note: Sur les claviers Macintosh, meta est la touche commande (⌘). Sur Windows, meta est la touche windows (⊞). Sur les claviers Sun Microsystems, meta est symbolisé par un diamant plein (◆). Sur certain clavier, spécifiquement sur les claviers des machines MIT et Lisp et leurs successeurs, comme le clavier « Knight » et « space-cadet », meta est ecrit « META ». Sur les claviers Symboliques, meta est etiqueté « META » ou « Meta ».
252
+
> Note: Sur les claviers Macintosh, meta est la touche commande (⌘). Sur Windows, meta est la touche windows (⊞). Sur les claviers Sun Microsystems, meta est symbolisé par un diamant plein (◆). Sur certains claviers, spécifiquement sur les claviers des machines MIT et Lisp et leurs successeurs, comme le clavier « Knight » et « space-cadet », meta est ecrit « META ». Sur les claviers Symboliques, meta est etiqueté « META » ou « Meta ».
252
253
253
254
Par exemple:
254
255
@@ -260,13 +261,13 @@ Par exemple:
260
261
<div@click.ctrl="doSomething">Do something</div>
261
262
```
262
263
263
-
## Pourquoi des écoutes dans le code HTML ?
264
+
## Pourquoi des écouteurs dans le HTML ?
264
265
265
-
Vous pouriez être preoccupé que tous ces événements d'écoutes viole la bonne vieille règle de la séparation des préoccupations.
266
-
Rassurez-vous - depuis que le gestionnaire de fonctions et d'expressions est strictement lié à « ViewModel » qui gère la vue courante, cela ne causera aucune difficulté de maintenance. En realité, il y a plusieurs bénéfices à utiliser `v-on` :
266
+
Vous pourriez être inquiets du fait que l'ensemble de cette approche d'écouteurs d'évènements viole la bonne vieille règle de la séparation des préoccupations.
267
+
Rassurez-vous - puisque toutes les fonctions et expressions sont strictement liées à « ViewModel » qui gère la vue courante, cela ne causera aucune difficulté de maintenance. En realité, il y a plusieurs bénéfices à utiliser `v-on` :
267
268
268
-
1. Il est plus facile de localiser l'implementation des fonctions dans le gestionnaire de code JS en survolant le code HTML.
269
+
1. Il est plus facile de localiser l'implémentation des fonctions de gestion du code JS en survolant le code HTML.
269
270
270
-
2. Comme vous n'avez pas à attacher manuellement les écoutes dans votre JS, le code du « ViewModel » peut-être purement logique et sans DOM. Ceci rend plus facile les tests.
271
+
2. Comme vous n'avez pas à attacher manuellement les écouteurs dans votre JS, le code du « ViewModel » peut-être purement logique et sans DOM. Ceci rend plus facile les tests.
271
272
272
-
3. Quand un « ViewModel » est detruit, tout les evenements d'ecoutes sont automatiquenemt retiré. Vous n'avez pas à vous soucier de le faire vous-même.
273
+
3. Quand un « ViewModel » est détruit, tout les événements écouteurs sont automatiquenemt retiré. Vous n'avez pas à vous soucier de le faire vous-même.
0 commit comments