From 8aec92f7c8c8438777ab46431ee20965b162f6c8 Mon Sep 17 00:00:00 2001 From: dumedeiros Date: Sat, 26 Sep 2020 13:47:25 -0300 Subject: [PATCH 1/4] docs: translate "guide/events.md" --- src/guide/events.md | 178 ++++++++++++++++++++++---------------------- 1 file changed, 89 insertions(+), 89 deletions(-) diff --git a/src/guide/events.md b/src/guide/events.md index 32d1177ff4..6e2f534688 100644 --- a/src/guide/events.md +++ b/src/guide/events.md @@ -1,15 +1,15 @@ -# Event Handling +# Manipulação de Eventos -## Listening to Events +## Escutando Eventos -We can use the `v-on` directive, which we typically shorten to the `@` symbol, to listen to DOM events and run some JavaScript when they're triggered. The usage would be `v-on:click="methodName"` or with the shortcut, `@click="methodName"` +Podemos usar a diretiva `v-on`, que normalmente abreviamos para o símbolo `@`, para escutar eventos do DOM e rodar algum JavaScript quando tal evento for disparado. A maneira de usar seria `v-on:click="methodName"` ou com o atalho, `@click="methodName"` -For example: +Por exemplo: ```html
- -

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

+ +

O botão acima foi clicado {{counter}} vezes.

``` @@ -23,25 +23,25 @@ Vue.createApp({ }).mount('#basic-event') ``` -Result: +Resultado: -

- See the Pen - Event handling: basic by Vue (@Vue) - on CodePen. +

+ Veja o + Exemplo básico de manipulação de eventos por Vue.js Brasil (@vuejs-br) + no CodePen.

-## Method Event Handlers +## Métodos em Manipuladores -The logic for many event handlers will be more complex though, so keeping your JavaScript in the value of the `v-on` attribute isn't feasible. That's why `v-on` can also accept the name of a method you'd like to call. +A lógica para muitos manipuladores de evento será mais complexa, portanto, manter diretamente código JavaScript no valor do atributo `v-on` não é viável. É por isso que `v-on` também pode aceitar o nome de um método que você gostaria de chamar. -For example: +Por Exemplo: ```html
- - + +
``` @@ -54,9 +54,9 @@ Vue.createApp({ }, methods: { greet(event) { - // `this` inside methods points to the current active instance - alert('Hello ' + this.name + '!') - // `event` is the native DOM event + // `this` dentro de métodos aponta para a atual instância Vue ativa + alert('Olá ' + this.name + '!') + // `event` é o evento DOM nativo if (event) { alert(event.target.tagName) } @@ -65,23 +65,23 @@ Vue.createApp({ }).mount('#event-with-method') ``` -Result: +Resultado: -

- See the Pen - Event handling: with a method by Vue (@Vue) - on CodePen. +

+ Veja o + Exemplo de manipulação de eventos com um método por Vue.js Brasil (@vuejs-br) + no CodePen.

-## Methods in Inline Handlers +## Chamada Direta de Métodos -Instead of binding directly to a method name, we can also use methods in an inline JavaScript statement: +Em vez de interligar o evento diretamente ao nome de um método, também podemos chamar métodos diretamente com uma instrução JavaScript: ```html
- - + +
``` @@ -95,20 +95,20 @@ Vue.createApp({ }).mount('#inline-handler') ``` -Result: +Resultado: -

- See the Pen - Event handling: with an inline handler by Vue (@Vue) +

+ Veja o + Exemplo de evento com chamada direta de método by Vue (@Vue) on CodePen.

-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: +Às vezes, também precisamos acessar o evento original do DOM em um manipulador. Você pode passá-lo a um método usando a variável especial `$event`: ```html - ``` @@ -116,7 +116,7 @@ Sometimes we also need to access the original DOM event in an inline statement h // ... methods: { warn(message, event) { - // now we have access to the native event + // agora temos acesso ao evento nativo if (event) { event.preventDefault() } @@ -125,14 +125,14 @@ methods: { } ``` -## Multiple Event Handlers +## Múltiplos Manipuladores de Eventos -You can have multiple methods in an event handler separated by a comma operator like this: +Você pode ter vários métodos em um manipulador de eventos separados por vírgula, desta forma: ```html - + ``` @@ -140,19 +140,19 @@ You can have multiple methods in an event handler separated by a comma operator // ... methods: { one(event) { - // first handler logic... + // lógica do primeiro manipulador... }, two(event) { - // second handler logic... + // lógica do segundo manipulador... } } ``` -## Event Modifiers +## Modificadores de Evento -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. +É muito comum precisar chamar `event.preventDefault()` ou `event.stopPropagation()` em manipuladores de eventos. Embora possamos fazer isto facilmente dentro de métodos, seria melhor se os métodos pudessem lidar apenas com a lógica dos dados, em vez de ter que lidar com detalhes de eventos DOM. -To address this problem, Vue provides **event modifiers** for `v-on`. Recall that modifiers are directive postfixes denoted by a dot. +Para resolver esse problema, Vue fornece **modificadores de evento** para `v-on`. É só se lembrar que modificadores são sufixos da diretiva, denotados por um ponto. - `.stop` - `.prevent` @@ -162,77 +162,77 @@ To address this problem, Vue provides **event modifiers** for `v-on`. Recall tha - `.passive` ```html - + - +
- + - +
- - + +
...
- - + +
...
``` ::: tip -Order matters when using modifiers because the relevant code is generated in the same order. Therefore using `@click.prevent.self` will prevent **all clicks** while `@click.self.prevent` will only prevent clicks on the element itself. +A ordem importa ao utilizar modificadores pois o código relevante é gerado na mesma ordem. Desta forma, `@click.prevent.self` irá prevenir **todos os cliques**, enquanto `@click.self.prevent` irá prevenir apenas cliques no próprio elemento.

::: ```html - + ``` -Unlike the other modifiers, which are exclusive to native DOM events, the `.once` modifier can also be used on [component events](component-custom-events.html). If you haven't read about components yet, don't worry about this for now. +Diferente dos outros modificadores, que são exclusivos para eventos nativos, o modificador `.once` também pode ser usado em [eventos de componentes](components-custom-events.html). Se você ainda não leu sobre componentes, não se preocupe com isso neste momento. -Vue also offers the `.passive` modifier, corresponding to [`addEventListener`'s `passive` option](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters). +Vue também oferece o modificador `.passive`, correspondendo à [opção `passive` do `addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters). ```html - - - + + +
...
``` -The `.passive` modifier is especially useful for improving performance on mobile devices. +O `.passive` é especialmente útil para otimizar desempenho em dispositivos móveis. ::: tip -Don't use `.passive` and `.prevent` together, because `.prevent` will be ignored and your browser will probably show you a warning. Remember, `.passive` communicates to the browser that you _don't_ want to prevent the event's default behavior. +Não use `.passive` e `.prevent` juntos, pois `.prevent` será ignorado e seu navegador provavelmente exibirá um aviso. Lembre-se, `.passive` comunica ao navegador que você _não_ quer prevenir o comportamento padrão do evento. ::: -## Key Modifiers +## Modificadores de Teclado -When listening for keyboard events, we often need to check for specific keys. Vue allows adding key modifiers for `v-on` or `@` when listening for key events: +Quando escutamos eventos do teclado, precisamos muitas vezes verificar a ocorrência de teclas específicas. O Vue também permite a adição de modificadores `v-on` ou `@` ao escutar eventos de teclado: ```html - + ``` -You can directly use any valid key names exposed via [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) as modifiers by converting them to kebab-case. +Você pode usar diretamente qualquer nome de chave válido exposto via [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) como modificadores, convertendo-os em kebab-case. ```html ``` -In the above example, the handler will only be called if `$event.key` is equal to `'PageDown'`. +No exemplo acima, o manipulador só será chamado se `$event.key` for igual a `'PageDown'`. -### Key Aliases +### Apelidos de Teclas -Vue provides aliases for the most commonly used keys: +Vue fornece apelidos para os códigos de teclas mais comuns: - `.enter` - `.tab` -- `.delete` (captures both "Delete" and "Backspace" keys) +- `.delete` (captura tanto "Delete" quanto "Backspace") - `.esc` - `.space` - `.up` @@ -240,62 +240,62 @@ Vue provides aliases for the most commonly used keys: - `.left` - `.right` -## System Modifier Keys +## Teclas Modificadoras de Sistema -You can use the following modifiers to trigger mouse or keyboard event listeners only when the corresponding modifier key is pressed: +Você pode utilizar os seguintes modificadores para acionar eventos de _mouse_ ou teclado apenas quando o modificador correspondente estiver pressionado: - `.ctrl` - `.alt` - `.shift` - `.meta` -::: tip 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”. +::: tip Nota: +Nos teclados Macintosh, meta é a tecla de comando (⌘). Nos teclados Windows, meta é a tecla Windows (⊞). Nos teclados Sun Microsystems, meta é marcada como um diamante sólido (◆). Em alguns teclados, especificamente em máquinas MIT e Lisp e suas sucessoras, assim como o teclado Knight e teclados space-cadet, meta é marcada como “META”. Em teclados Symbolics, meta é marcada como “META” ou “Meta”. ::: -For example: +Por exemplo: ```html -
Do something
+
Faça alguma coisa
``` ::: tip -Note that modifier keys are different from regular keys and when used with `keyup` events, they have to be pressed when the event is emitted. In other words, `keyup.ctrl` will only trigger if you release a key while holding down `ctrl`. It won't trigger if you release the `ctrl` key alone +Teclas modificadoras são diferentes de teclas comuns, e quando utilizadas com eventos `keyup`, precisam estar pressionadas quando o evento é emitido. Em outras palavras, `keyup.ctrl` só vai disparar se você soltar alguma tecla enquanto ainda estiver segurando `ctrl`. E não irá disparar se você soltar a tecla `ctrl` sozinha. ::: -### `.exact` Modifier +### Modificador `.exact` -The `.exact` modifier allows control of the exact combination of system modifiers needed to trigger an event. +O modificador `.exact` permite controlar a exata combinação de modificadores de sistema que deve ser pressionada para que o gatilho dispare. ```html - + - + - + ``` -### Mouse Button Modifiers +### Modificadores dos Botões do Mouse - `.left` - `.right` - `.middle` -These modifiers restrict the handler to events triggered by a specific mouse button. +Estes modificadores restringem o manipulador a eventos disparados por um botão específico do _mouse_. -## Why Listeners in HTML? +## Por Que Escutas no 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` or `@`: +Você pode estar pensando que esta abordagem de escutas de evento viola as boas e velhas práticas sobre "separação de responsabilidades". Fique tranquilo - como todas as funções de manipuladores e expressões Vue são estritamente ligadas ao _ViewModel_ que está manipulando o modo de exibição atual, essa abordagem não causará qualquer dificuldade de manutenção. Na verdade, há vários benefícios em usar `v-on` ou `@`: -1. It's easier to locate the handler function implementations within your JS code by skimming the HTML template. +1. É mais fácil localizar as implementações de função de manipulador dentro de seu código JS percorrendo o _template_ 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. Como você não tem que manualmente anexar escutas a eventos em JS, seu código de _ViewModel_ pode conter apenas a lógica pura e está livre de manipulação DOM. Isto torna mais fácil de testar. -3. When a ViewModel is destroyed, all event listeners are automatically removed. You don't need to worry about cleaning it up yourself. +3. Quando um _ViewModel_ é destruído, todas escutas a eventos são removidas automaticamente. Você não precisa se preocupar em removê-las explicitamente. From 7ec91c3d26f8b553ba1d76da7be2283c503e276f Mon Sep 17 00:00:00 2001 From: dumedeiros Date: Sun, 27 Sep 2020 13:53:09 -0300 Subject: [PATCH 2/4] fix: Using codepen-snippet component --- src/guide/events.md | 23 ++++------------------- 1 file changed, 4 insertions(+), 19 deletions(-) diff --git a/src/guide/events.md b/src/guide/events.md index 6e2f534688..4f798c9b34 100644 --- a/src/guide/events.md +++ b/src/guide/events.md @@ -2,7 +2,7 @@ ## Escutando Eventos -Podemos usar a diretiva `v-on`, que normalmente abreviamos para o símbolo `@`, para escutar eventos do DOM e rodar algum JavaScript quando tal evento for disparado. A maneira de usar seria `v-on:click="methodName"` ou com o atalho, `@click="methodName"` +Podemos usar a diretiva `v-on`, que normalmente abreviamos para o símbolo `@`, para escutar eventos do DOM e rodar algum JavaScript quando tal evento for disparado. A maneira de usar seria `v-on:click="nomeDoMétodo"` ou com o atalho, `@click="nomeDoMétodo"` Por exemplo: @@ -25,12 +25,7 @@ Vue.createApp({ Resultado: -

- Veja o - Exemplo básico de manipulação de eventos por Vue.js Brasil (@vuejs-br) - no CodePen. -

- + ## Métodos em Manipuladores @@ -67,12 +62,7 @@ Vue.createApp({ Resultado: -

- Veja o - Exemplo de manipulação de eventos com um método por Vue.js Brasil (@vuejs-br) - no CodePen. -

- + ## Chamada Direta de Métodos @@ -97,12 +87,7 @@ Vue.createApp({ Resultado: -

- Veja o - Exemplo de evento com chamada direta de método by Vue (@Vue) - on CodePen. -

- + Às vezes, também precisamos acessar o evento original do DOM em um manipulador. Você pode passá-lo a um método usando a variável especial `$event`: From 63c9489197fc4173366a7bd849536671334684df Mon Sep 17 00:00:00 2001 From: dumedeiros Date: Mon, 28 Sep 2020 20:25:15 -0300 Subject: [PATCH 3/4] update: codepen-snippet slug from vue.js BR --- src/guide/events.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guide/events.md b/src/guide/events.md index 4f798c9b34..181477e6cc 100644 --- a/src/guide/events.md +++ b/src/guide/events.md @@ -25,7 +25,7 @@ Vue.createApp({ Resultado: - + ## Métodos em Manipuladores @@ -62,7 +62,7 @@ Vue.createApp({ Resultado: - + ## Chamada Direta de Métodos @@ -87,7 +87,7 @@ Vue.createApp({ Resultado: - + Às vezes, também precisamos acessar o evento original do DOM em um manipulador. Você pode passá-lo a um método usando a variável especial `$event`: From aa669ac5f99a072791dc640c854abbd4f47be8a1 Mon Sep 17 00:00:00 2001 From: Guilherme Correia Date: Wed, 14 Oct 2020 19:20:57 -0300 Subject: [PATCH 4/4] Review on guide/events --- src/guide/events.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/guide/events.md b/src/guide/events.md index 181477e6cc..0aaa969e23 100644 --- a/src/guide/events.md +++ b/src/guide/events.md @@ -89,7 +89,7 @@ Resultado: -Às vezes, também precisamos acessar o evento original do DOM em um manipulador. Você pode passá-lo a um método usando a variável especial `$event`: +Às vezes, também precisamos acessar o evento original do DOM em um manipulador. Você pode passá-lo à um método usando a variável especial `$event`: ```html - + ``` @@ -273,7 +273,7 @@ O modificador `.exact` permite controlar a exata combinação de modificadores d - `.right` - `.middle` -Estes modificadores restringem o manipulador a eventos disparados por um botão específico do _mouse_. +Estes modificadores restringem o manipulador à eventos disparados por um botão específico do _mouse_. ## Por Que Escutas no HTML? @@ -281,6 +281,6 @@ Você pode estar pensando que esta abordagem de escutas de evento viola as boas 1. É mais fácil localizar as implementações de função de manipulador dentro de seu código JS percorrendo o _template_ HTML. -2. Como você não tem que manualmente anexar escutas a eventos em JS, seu código de _ViewModel_ pode conter apenas a lógica pura e está livre de manipulação DOM. Isto torna mais fácil de testar. +2. Como você não tem que manualmente anexar escutas à eventos em JS, seu código de _ViewModel_ pode conter apenas a lógica pura e ser livre de manipulação do DOM. Isto torna mais fácil de testar. -3. Quando um _ViewModel_ é destruído, todas escutas a eventos são removidas automaticamente. Você não precisa se preocupar em removê-las explicitamente. +3. Quando um _ViewModel_ é destruído, todas as escutas de eventos são removidas automaticamente. Você não precisa se preocupar em removê-las explicitamente.