Skip to content

Commit 3ae3426

Browse files
committed
docs: update guide/forms translation
1 parent 0fc6871 commit 3ae3426

File tree

1 file changed

+18
-18
lines changed

1 file changed

+18
-18
lines changed

src/guide/forms.md

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,21 @@
22

33
## Uso Básico
44

5-
Você pode usar a diretiva `v-model` para criar interligações de dados de mão dupla _(two-way data binding)_ em elementos input, textarea e select de formulários. Ele automaticamente escolhe a maneira correta de atualizar o elemento baseado no tipo do _input_. Embora um pouco mágico, `v-model` é essencialmente uma forma simplificada _(syntax sugar)_ para atualizar dados nos eventos de entrada do usuário, além de cuidado especial com casos extremos.
5+
Você pode usar a diretiva `v-model` para criar interligações de dados de mão dupla _(two-way data binding)_ em elementos _input_, _textarea_ e _select_ de formulários. Ela, automaticamente, escolhe a maneira correta de atualizar o elemento baseado no tipo do _input_. Embora um pouco mágica, `v-model` é, essencialmente, uma forma simplificada _(syntax sugar)_ para atualizar dados nos eventos de entrada do usuário, além de cuidado especial com casos extremos.
66

77
::: tip Nota
8-
`v-model` irá ignorar o estado inicial dos atributos `value`, `checked` ou `selected` encontrado em qualquer elemento de formulário. Ele sempre irá tratar os dados da instância ativa com a fonte de verdade. Você pode declarar o valor inicial no lado do JavasScript, dentro da opção `data` do seu componente.
8+
`v-model` irá ignorar o estado inicial dos atributos `value`, `checked` ou `selected` encontrado em qualquer elemento de formulário. Ela sempre irá tratar os dados da instância ativa como a fonte de informação _(source of truth)_. Você pode declarar o valor inicial no lado do JavasScript, dentro da opção `data` de seu componente.
99
:::
1010

11-
`v-model` utiliza diferentes propriedades internamente e emite diferentes eventos para diferentes elementos input:
11+
`v-model` utiliza diferentes propriedades internamente e emite diferentes eventos para diferentes elementos _input_:
1212

1313
- elementos _text_ e _textarea_ usam a propriedade `value` e o evento `input`;
1414
- _checkboxes_ e _radiobuttons_ utilizam a propriedade `checked` e o evento `change`;
1515
- campos de seleção utilizam `value` como propriedade e `change` como um evento.
1616

1717
<span id="vmodel-ime-tip"></span>
1818
::: tip Nota
19-
Para idiomas que requerem um [IME](https://en.wikipedia.org/wiki/Input_method) (Chinês, Japonês, Koreano etc.), você notará que o `v-model` não é atualizado durante a composição IME. Se você também quiser atender a essas atualizações, use o evento do `input` ao invés do `v-model`.
19+
Você pode notar que `v-model` não é atualizada durante a composição através de um editor de método de entrada ([IME](https://en.wikipedia.org/wiki/Input_method)), como em Chinês, Japonês, Coreano, etc. Se você também quiser atender a essas atualizações, use diretamente o evento de `input` ao invés da `v-model`.
2020
:::
2121

2222
### Input
@@ -28,7 +28,7 @@ Para idiomas que requerem um [IME](https://en.wikipedia.org/wiki/Input_method) (
2828

2929
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="eYNPEqj" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com formulários: v-model simples">
3030
<span>Veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/rNeqvjd">
31-
Lidadndo com Fomulários: v-model simples</a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
31+
Lidando com Fomulários: v-model simples</a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
3232
no <a href="https://codepen.io">CodePen</a>.</span>
3333
</p>
3434
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
@@ -61,7 +61,7 @@ Interpolação em _textareas_ (`<textarea>{{text}}</textarea>`) não funcionará
6161

6262
### Checkbox
6363

64-
Caixa de seleção única, valor booleano:
64+
Caixa de seleção única, valor do tipo _boolean_:
6565

6666
```html
6767
<input type="checkbox" id="checkbox" v-model="checked" />
@@ -75,7 +75,7 @@ Caixa de seleção única, valor booleano:
7575
</p>
7676
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
7777

78-
Múltiplos _checkboxes_, associados ao mesmo Array:
78+
Múltiplos _checkboxes_, associados ao mesmo _array_:
7979

8080
```html
8181
<div id="v-model-multiple-checkboxes">
@@ -100,7 +100,7 @@ Vue.createApp({
100100
}).mount('#v-model-multiple-checkboxes')
101101
```
102102

103-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="bGdmoyj" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: multiplos checkboxes">
103+
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="bGdmoyj" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: múltiplos checkboxes">
104104
<span>Veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/ExKdLWp">
105105
Lidando com Formulários: múltiplos <i>checkboxes</i></a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
106106
no <a href="https://codepen.io">CodePen</a>.</span>
@@ -111,10 +111,10 @@ Vue.createApp({
111111

112112
```html
113113
<div id="v-model-radiobutton">
114-
<input type="radio" id="one" value="One" v-model="picked" />
114+
<input type="radio" id="one" value="Um" v-model="picked" />
115115
<label for="one">Um</label>
116116
<br />
117-
<input type="radio" id="two" value="Two" v-model="picked" />
117+
<input type="radio" id="two" value="Dois" v-model="picked" />
118118
<label for="two">Dois</label>
119119
<br />
120120
<span>Escolhido: {{ picked }}</span>
@@ -172,10 +172,10 @@ Vue.createApp({
172172
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
173173

174174
:::tip Nota
175-
Se o valor inicial da expressão `v-model` não corresponder match nenhuma das optções, o element `<select>` será renderizado em um estado "não selecionado". No iOS, isso impedirá o usuário de selecionar o primeiro item, pois não há disparo do evento `change` neste caso. Portanto é recomendado fornecer uma opção desabilitada com um valor vazio, como demonstrado no exemplo acima.
175+
Se o valor inicial da expressão `v-model` não corresponder a nenhuma das opções, o elemento `<select>` será renderizado em um estado "não selecionado". No iOS, isso impedirá o usuário de selecionar o primeiro item, já que, neste caso, não há disparo do evento `change`. Portanto, é recomendado fornecer uma opção desabilitada com um valor vazio, como demonstrado no exemplo acima.
176176
:::
177177

178-
Seleção de múltiplos itens (vinculando a um Array):
178+
Seleção de múltiplos itens (vinculando a um _array_):
179179

180180
```html
181181
<select v-model="selected" multiple>
@@ -215,7 +215,7 @@ Vue.createApp({
215215
options: [
216216
{ text: 'Um', value: 'A' },
217217
{ text: 'Dois', value: 'B' },
218-
{ text: 'Três', value: 'C' },
218+
{ text: 'Três', value: 'C' }
219219
]
220220
}
221221
}
@@ -231,7 +231,7 @@ Vue.createApp({
231231

232232
## Interligação de Valores
233233

234-
Para _radio_, _checkbox_ e _select_, a interligação de valores do `v-model` são sempre _strings_ estáticas (ou valores _boolean_ no caso do _checkbox_):
234+
Para _radio_, _checkbox_ e _select_, a interligação de valores do `v-model` são sempre _strings_ estáticas (ou valores do tipo _boolean_, em _checkboxes_):
235235

236236
```html
237237
<!-- `picked` é uma string "a" quando assinalado -->
@@ -246,7 +246,7 @@ Para _radio_, _checkbox_ e _select_, a interligação de valores do `v-model` s
246246
</select>
247247
```
248248

249-
Mas às vezes podemos querer vincular o valor à uma propriedade dinâmica na atual instância ativa. Nós podemos utilizar `v-bind` para alcançar isso. Além disso, utilizando `v-bind` nos permite vincular o valor de um _input_ para valores que não são uma _string_ _(non-string values)_.
249+
Porém, às vezes, podemos querer vincular o valor a uma propriedade dinâmica na atual instância ativa. Nós podemos utilizar `v-bind` para alcançar isso. Além disso, utilizando `v-bind` nos permite vincular o valor de um _input_ para valores que não são uma _string_ _(non-string values)_.
250250

251251
### Checkbox
252252

@@ -295,7 +295,7 @@ vm.selected.number // => 123
295295

296296
### `.lazy`
297297

298-
Por padrão, `v-model` sincroniza o elemento _input_ com os dados após cada evento `input` (exceto para o caso de composição IME [descrito anteriormente](#vmodel-ime-tip)). Você pode adicionar o modificador `lazy` para sincronizar depois do evento `change`:
298+
Por padrão, `v-model` sincroniza o elemento _input_ com os dados após cada evento `input` (exceto para o caso de composição _IME_ [como descrito anteriormente](#vmodel-ime-tip)). Você pode adicionar o modificador `lazy` para sincronizar depois do evento `change`:
299299

300300
```html
301301
<!-- sincronizado depois do "change" ao invés de "input" -->
@@ -322,6 +322,6 @@ Se você quiser que os espaços em branco excedentes de um _input_ sejam automat
322322

323323
## `v-model` com Componentes
324324

325-
> Se você ainda não está familiarizado com os componentes Vue, pode pular isto por enquanto.
325+
> Se você ainda não está familiarizado com os componentes Vue, pode pular esta parte, por enquanto.
326326
327-
Os tipos de _input_ nativos do HTML nem sempre atendem as suas necessidades. Felizmente, os componentes Vue te permitem construir _inputs_ reutilizáveis com comportamento completamente costumizável. Estes componentes também funcionam com `v-model`! Para saber mais, leia sobre [_inputs_ customizados](./component-basics.html#using-v-model-on-components) no guia de Componentes.
327+
Os tipos de _input_ nativos do HTML nem sempre atendem as suas necessidades. Felizmente, os componentes Vue te permitem construir _inputs_ reutilizáveis com comportamento completamente customizável. Estes componentes também funcionam com `v-model`! Para saber mais, leia sobre [_inputs_ customizados](./component-basics.html#using-v-model-on-components) no guia de Componentes.

0 commit comments

Comments
 (0)