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/guide/forms.md
+18-18Lines changed: 18 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,21 +2,21 @@
2
2
3
3
## Uso Básico
4
4
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.
6
6
7
7
::: 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.
9
9
:::
10
10
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_:
12
12
13
13
- elementos _text_ e _textarea_ usam a propriedade `value` e o evento `input`;
14
14
-_checkboxes_ e _radiobuttons_ utilizam a propriedade `checked` e o evento `change`;
15
15
- campos de seleção utilizam `value` como propriedade e `change` como um evento.
16
16
17
17
<spanid="vmodel-ime-tip"></span>
18
18
::: 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`.
20
20
:::
21
21
22
22
### Input
@@ -28,7 +28,7 @@ Para idiomas que requerem um [IME](https://en.wikipedia.org/wiki/Input_method) (
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.
176
176
:::
177
177
178
-
Seleção de múltiplos itens (vinculando a um Array):
178
+
Seleção de múltiplos itens (vinculando a um _array_):
179
179
180
180
```html
181
181
<selectv-model="selected"multiple>
@@ -215,7 +215,7 @@ Vue.createApp({
215
215
options: [
216
216
{ text:'Um', value:'A' },
217
217
{ text:'Dois', value:'B' },
218
-
{ text:'Três', value:'C' },
218
+
{ text:'Três', value:'C' }
219
219
]
220
220
}
221
221
}
@@ -231,7 +231,7 @@ Vue.createApp({
231
231
232
232
## Interligação de Valores
233
233
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_):
235
235
236
236
```html
237
237
<!-- `picked` é uma string "a" quando assinalado -->
@@ -246,7 +246,7 @@ Para _radio_, _checkbox_ e _select_, a interligação de valores do `v-model` s
246
246
</select>
247
247
```
248
248
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)_.
250
250
251
251
### Checkbox
252
252
@@ -295,7 +295,7 @@ vm.selected.number // => 123
295
295
296
296
### `.lazy`
297
297
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`:
299
299
300
300
```html
301
301
<!-- 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
322
322
323
323
## `v-model` com Componentes
324
324
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.
326
326
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