From d228c35f2063562fa01758017e1dcabaedfdc988 Mon Sep 17 00:00:00 2001 From: Ti Bretin Date: Mon, 6 Feb 2017 16:31:32 +1300 Subject: [PATCH 1/3] Traduction vuesjs page documentation events.md --- src/v2/guide/events.md | 120 ++++++++++++++++++++--------------------- 1 file changed, 60 insertions(+), 60 deletions(-) diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md index 2c1361da5b..79f66d6113 100644 --- a/src/v2/guide/events.md +++ b/src/v2/guide/events.md @@ -4,16 +4,16 @@ type: guide order: 9 --- -## Listening to Events +## Ecoute des événements -

**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).**

We can use the `v-on` directive to listen to DOM events and run some JavaScript when they're triggered. +Nous pouvons utiliser l'instruction `v-on` pour écouter les événements du DOM afin d'éxécuter des scripts Javascript lorsque ces événements surviennent. -For example: +Par example: ``` html
-

The button above has been clicked {{ counter }} times.

+

Le boutton ci-dessus à été cliqué {{ counter }} fois.

``` ``` js @@ -25,12 +25,12 @@ var example1 = new Vue({ }) ``` -Result: +Resultat: {% raw %}
-

The button above has been clicked {{ counter }} times.

+

Le boutton ci-dessus à été cliqué {{ counter }} fois.

{% endraw %} -## Method Event Handlers +## Gestionnaire de Méthodes pour "les Evénements" -The logic for many event handlers will be more complex though, so keeping your JavaScript in the value of the `v-on` attribute simply isn't feasible. That's why `v-on` can also accept the name of a method you'd like to call. +La logique pour beaucoup des gestionnaires d'événements sera très certainement plus compliqué, par consequence, garder vos valeurs dans l'attribu `v-on` ne sera pas possible. C'est pour cette raison que `v-on` peut également accepter que vous nommiez vos méthodes comme vous le souhaitez. -For example: +For exemple: ``` html
- +
``` @@ -61,12 +61,12 @@ var example2 = new Vue({ data: { name: 'Vue.js' }, - // define methods under the `methods` object + // defini les méthodes sous l'objet `methods` methods: { greet: function (event) { - // `this` inside methods points to the Vue instance + // `this` à l'intérieur de l'objet methods se réfère à l'instance de Vue. alert('Hello ' + this.name + '!') - // `event` is the native DOM event + // `event` est un événement natif du DOM if (event) { alert(event.target.tagName) } @@ -74,15 +74,15 @@ var example2 = new Vue({ } }) -// you can invoke methods in JavaScript too +// vous pouvez également invoqué ces méthodes en Javscript example2.greet() // -> 'Hello Vue.js!' ``` -Result: +Resultat: {% raw %}
- +
{% endraw %} -## Methods in Inline Handlers +## Gestionnaire de Méthodes "En-ligne": -Instead of binding directly to a method name, we can also use methods in an inline JavaScript statement: +Au lieu de lier directement la méthode à un nom, nous pouvons également utiliser la méthode avec une declaration Javascript dans la ligne: ``` html
@@ -141,16 +141,16 @@ new Vue({ {% endraw %} -Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special `$event` variable: +Parfois, nous avons également besoin, avec les déclarations en ligne, d'accéder aux événements du DOM. Vous pouvez réaliser ceci en utilisant la variable speciale `$event`: ``` html - + ``` ``` js // ... methods: { - warn: function (message, event) { + avertissement: function (message, event) { // now we have access to the native event if (event) event.preventDefault() alert(message) @@ -158,11 +158,11 @@ methods: { } ``` -## Event Modifiers +## Modifieurs "Events" -It is a very common need to call `event.preventDefault()` or `event.stopPropagation()` inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details. +C'est un besoin courant que de faire appel ā `event.preventDefault()` ou `event.stopPropagation()` à l'intérieur d'une déclaration d'événements. Bien que nous puissions realiser ceci aisément à l'intérieur de "Methods", il aurait été préférable que "Methods" reste purement dedié à la logique des données au lieu d'avoir à prendre en charge les éléments du DOM> -To address this problem, Vue provides **event modifiers** for `v-on`. Recall that modifiers are directive postfixes denoted by a dot. +Pour resoudre ce problème, Vue propose des modifieurs d'événement à `v-on`. Evoquer ces modifieurs se fait grâce aux extensions d'instruction, ceux-ci commençant par un point. - `.stop` - `.prevent` @@ -171,59 +171,58 @@ To address this problem, Vue provides **event modifiers** for `v-on`. Recall tha - `.once` ``` html - - + + - -
+ +
- - + + - +
- -
...
+ +
...
- - -
...
+ + +
...
``` > New in 2.1.4 ``` html - - + + ``` -Unlike the other modifiers, which are exclusive to native DOM events, the `.once` modifier can also be used on [component events](components.html#Using-v-on-with-Custom-Events). If you haven't read about components yet, don't worry about this for now. - -## Key Modifiers +Au contraire des autres modifieurs, qui sont exclusifs aux événement natif du DOM, le modifieur `.once` peut également être utilisé pour les [component events](components.html#Using-v-on-with-Custom-Events). Si vous n'avez pas encore lu la section concernant les composants, ne vous en inquitez pas pour le moment. -When listening for keyboard events, we often need to check for common key codes. Vue also allows adding key modifiers for `v-on` when listening for key events: +## Modifieurs "key" (Touches) +Lorsque nous écoutons les événements du clavier, nous avons regulièrement besoin de s'assurer des codes des touches. Vue permet également d'ajouter un modifieur de touches pour `v-on`: ``` html - + ``` -Remembering all the keyCodes is a hassle, so Vue provides aliases for the most commonly used keys: +Rappelez vous que les codes des touches sont disputés, c'est pourquoi Vue propose des alias pour ceux courament employés. ``` html - + - + ``` -Here's the full list of key modifier aliases: +Voici une liste complète des raccourci clavier "modifieurs" - `.enter` - `.tab` -- `.delete` (captures both "Delete" and "Backspace" keys) +- `.delete` (fonctionne pour les touches "Suppression" et "retour-arrière") - `.esc` - `.space` - `.up` @@ -231,27 +230,27 @@ Here's the full list of key modifier aliases: - `.left` - `.right` -You can also [define custom key modifier aliases](../api/#keyCodes) via the global `config.keyCodes` object: +Vous pouvez également [definir des raccourci personnalisé pour vos "modifieurs" ](../api/#keyCodes) grâce à l'objet global `config.keyCodes`: ``` js -// enable v-on:keyup.f1 +// active v-on:keyup.f1 Vue.config.keyCodes.f1 = 112 ``` -## Modifier Keys +## Modifieurs "key" (Touches) > New in 2.1.0 -You can use the following modifiers to trigger mouse or keyboard event listeners only when the corresponding modifier key is pressed: +Vous pouvez utiliser les modifieurs suivants pour déclancher un événement du clavier ou de la souris seulement lorsque la touche du modifieur est appuyé : - `.ctrl` - `.alt` - `.shift` - `.meta` -> Note: On Macintosh keyboards, meta is the command key (⌘). On Windows keyboards, meta is the windows key (⊞). On Sun Microsystems keyboards, meta is marked as a solid diamond (◆). On certain keyboards, specifically MIT and Lisp machine keyboards and successors, such as the Knight keyboard, space-cadet keyboard, meta is labeled “META”. On Symbolics keyboards, meta is labeled “META” or “Meta”. +> 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". -For example: +Par exemple: ```html @@ -261,12 +260,13 @@ For example:
Do something
``` -## Why Listeners in HTML? +## Pourquoi des écoutes dans le code HTML ? -You might be concerned that this whole event listening approach violates the good old rules about "separation of concerns". Rest assured - since all Vue handler functions and expressions are strictly bound to the ViewModel that's handling the current view, it won't cause any maintenance difficulty. In fact, there are several benefits in using `v-on`: +Vous pouriez être preoccupé que tous ces événements d'écoutes viole la bonne vieille règle de la separation des problèmes. +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` : -1. It's easier to locate the handler function implementations within your JS code by simply skimming the HTML template. +1. Il est plus facile de localiser l'implementation des functions dans le gestionnaire de code JS en survolant le code HTML. -2. Since you don't have to manually attach event listeners in JS, your ViewModel code can be pure logic and DOM-free. This makes it easier to test. +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. -3. When a ViewModel is destroyed, all event listeners are automatically removed. You don't need to worry about cleaning it up yourself. +3. Quand un "ViewModel est detruit, tout les evenements d'ecoutes sont automatiquenemt retiré". Vous n'aveez pas à vous soucier de le faire vous meme. From d12f4d309739370976ae1bb7a98a5c6a4baf712e Mon Sep 17 00:00:00 2001 From: Ti Bretin Date: Fri, 24 Feb 2017 12:23:15 +1300 Subject: [PATCH 2/3] correction gestionnaire events --- src/v2/guide/events.md | 110 ++++++++++++++++++++--------------------- 1 file changed, 55 insertions(+), 55 deletions(-) diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md index 79f66d6113..dd5d9df1eb 100644 --- a/src/v2/guide/events.md +++ b/src/v2/guide/events.md @@ -1,19 +1,19 @@ --- -title: Event Handling +title: Gestionnaire des événements type: guide order: 9 --- -## Ecoute des événements +## Ecoute des événements -Nous pouvons utiliser l'instruction `v-on` pour écouter les événements du DOM afin d'éxécuter des scripts Javascript lorsque ces événements surviennent. +Nous pouvons utiliser l'instruction `v-on` pour écouter les événements du DOM afin d'éxécuter du JavaScript lorsque ces événements surviennent. -Par example: +Par exemple: ``` html
-

Le boutton ci-dessus à été cliqué {{ counter }} fois.

+

Le bouton ci-dessus a été cliqué {{ counter }} fois.

``` ``` js @@ -25,12 +25,12 @@ var example1 = new Vue({ }) ``` -Resultat: +Résultat: {% raw %}
-

Le boutton ci-dessus à été cliqué {{ counter }} fois.

+

Le bouton ci-dessus a été cliqué {{ counter }} fois.

{% endraw %} -## Gestionnaire de Méthodes pour "les Evénements" +## Les méthodes de gestion d'évènement" -La logique pour beaucoup des gestionnaires d'événements sera très certainement plus compliqué, par consequence, garder vos valeurs dans l'attribu `v-on` ne sera pas possible. C'est pour cette raison que `v-on` peut également accepter que vous nommiez vos méthodes comme vous le souhaitez. +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. -For exemple: +Par exemple: ``` html
- +
``` @@ -61,12 +61,12 @@ var example2 = new Vue({ data: { name: 'Vue.js' }, - // defini les méthodes sous l'objet `methods` + // Définissez les méthodes de l'objet methods: { greet: function (event) { - // `this` à l'intérieur de l'objet methods se réfère à l'instance de Vue. + // `this` fait référence à l'instance de Vue à l'intérieur de `methods`.. alert('Hello ' + this.name + '!') - // `event` est un événement natif du DOM + // `event` est l'événement natif du DOM if (event) { alert(event.target.tagName) } @@ -74,15 +74,15 @@ var example2 = new Vue({ } }) -// vous pouvez également invoqué ces méthodes en Javscript -example2.greet() // -> 'Hello Vue.js!' +// vous pouvez également invoquer ces méthodes en JavaScript +2.greet() // -> 'Hello Vue.js!' ``` -Resultat: +Résultat : {% raw %}
- +
{% endraw %} -## Gestionnaire de Méthodes "En-ligne": +## Méthode d'écoute dans les attributs : -Au lieu de lier directement la méthode à un nom, nous pouvons également utiliser la méthode avec une declaration Javascript dans la ligne: +Au lieu de lier directement la méthode par son nom dans l'attribut, nous pouvons également utiliser la méthode avec une instruction JavaScript : ``` html
@@ -123,7 +123,7 @@ new Vue({ }) ``` -Result: +Résultat: {% raw %}
@@ -141,10 +141,10 @@ new Vue({ {% endraw %} -Parfois, nous avons également besoin, avec les déclarations en ligne, d'accéder aux événements du DOM. Vous pouvez réaliser ceci en utilisant la variable speciale `$event`: +Parfois nous avons également besoin d'accéder à l'événement original du DOM depuis l'instruction dans l'attribut. Vous pouvez le passer à une méthode en utilisant la variable spéciale $event : ``` html - + ``` ``` js @@ -158,11 +158,11 @@ methods: { } ``` -## Modifieurs "Events" - -C'est un besoin courant que de faire appel ā `event.preventDefault()` ou `event.stopPropagation()` à l'intérieur d'une déclaration d'événements. Bien que nous puissions realiser ceci aisément à l'intérieur de "Methods", il aurait été préférable que "Methods" reste purement dedié à la logique des données au lieu d'avoir à prendre en charge les éléments du DOM> +## Modificateurs d'événements -Pour resoudre ce problème, Vue propose des modifieurs d'événement à `v-on`. Evoquer ces modifieurs se fait grâce aux extensions d'instruction, ceux-ci commençant par un point. +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. +`` +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. - `.stop` - `.prevent` @@ -171,44 +171,44 @@ Pour resoudre ce problème, Vue propose des modifieurs d'événement à `v-on`. - `.once` ``` html - - + + - -
+ +
- - + + - +
- -
...
+ +
...
- - -
...
+ + +
...
``` > New in 2.1.4 ``` html - + ``` -Au contraire des autres modifieurs, qui sont exclusifs aux événement natif du DOM, le modifieur `.once` peut également être utilisé pour les [component events](components.html#Using-v-on-with-Custom-Events). Si vous n'avez pas encore lu la section concernant les composants, ne vous en inquitez pas pour le moment. +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. -## Modifieurs "key" (Touches) -Lorsque nous écoutons les événements du clavier, nous avons regulièrement besoin de s'assurer des codes des touches. Vue permet également d'ajouter un modifieur de touches pour `v-on`: +## Modificateurs "key" (Touches) +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`: ``` html - + ``` -Rappelez vous que les codes des touches sont disputés, c'est pourquoi Vue propose des alias pour ceux courament employés. +Se rappeler de tous les codes des touches est compliqué, c'est pourquoi Vue propose des alias pour les touches les plus couramment employées : ``` html @@ -218,7 +218,7 @@ Rappelez vous que les codes des touches sont disputés, c'est pourquoi Vue propo ``` -Voici une liste complète des raccourci clavier "modifieurs" +Voici la liste complète des raccourcis de modificateur pour les touches : - `.enter` - `.tab` @@ -230,25 +230,25 @@ Voici une liste complète des raccourci clavier "modifieurs" - `.left` - `.right` -Vous pouvez également [definir des raccourci personnalisé pour vos "modifieurs" ](../api/#keyCodes) grâce à l'objet global `config.keyCodes`: +Vous pouvez également [definir des raccourcis personnalisés pour vos modificateurs ](../api/#keyCodes) grâce à l'objet global `config.keyCodes`: ``` js // active v-on:keyup.f1 Vue.config.keyCodes.f1 = 112 ``` -## Modifieurs "key" (Touches) +## Modificateurs de touches > New in 2.1.0 -Vous pouvez utiliser les modifieurs suivants pour déclancher un événement du clavier ou de la souris seulement lorsque la touche du modifieur est appuyé : +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é : - `.ctrl` - `.alt` - `.shift` - `.meta` -> 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". +> 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 ». Par exemple: @@ -262,11 +262,11 @@ Par exemple: ## Pourquoi des écoutes dans le code HTML ? -Vous pouriez être preoccupé que tous ces événements d'écoutes viole la bonne vieille règle de la separation des problèmes. -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` : +Vous pouriez être preoccupé que tous ces événements d'écoutes viole la bonne vieille règle de la séparation des préoccupations. +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` : -1. Il est plus facile de localiser l'implementation des functions dans le gestionnaire de code JS en survolant le code HTML. +1. Il est plus facile de localiser l'implementation des fonctions dans le gestionnaire de code JS en survolant le code HTML. -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. +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. -3. Quand un "ViewModel est detruit, tout les evenements d'ecoutes sont automatiquenemt retiré". Vous n'aveez pas à vous soucier de le faire vous meme. +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. From 3ed1fab286b4c0cda07bf9ec639e9fe44e706d15 Mon Sep 17 00:00:00 2001 From: Ti Bretin Date: Tue, 14 Mar 2017 17:49:53 +1300 Subject: [PATCH 3/3] seconde correction events.md --- src/v2/guide/events.md | 45 +++++++++++++++++++++--------------------- 1 file changed, 23 insertions(+), 22 deletions(-) diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md index dd5d9df1eb..5181ff6773 100644 --- a/src/v2/guide/events.md +++ b/src/v2/guide/events.md @@ -42,7 +42,7 @@ var example1 = new Vue({ {% endraw %} -## Les méthodes de gestion d'évènement" +## Les méthodes de gestion d'évènement 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. @@ -75,7 +75,7 @@ var example2 = new Vue({ }) // vous pouvez également invoquer ces méthodes en JavaScript -2.greet() // -> 'Hello Vue.js!' +example2.greet() // -> 'Hello Vue.js!' ``` Résultat : @@ -126,8 +126,8 @@ new Vue({ Résultat: {% raw %}
- - + +