Bem-vindos à nossa comunidade!

Junte-se a nós e faça parte hoje mesmo!

Falando um pouco sobre Two-Way Data Binding.

Jacson Rodrigues

Novo Membro
Cadastro
17/3/21
Postagens
5
Curtidas
4
Pontuação
5
Cidade
Fortaleza
Fala meus queridos, nesse pequeno post quero comentar um pouco sobre uma característica incrível do VueJS que é o Two-Way Data Binding, em português seria algo como Conexão de Dados em Dois Sentidos (tradução livre).

Two-Way Data Binding é um padrão que conecta um dado à interface, fazendo com que toda alteração feita na interface seja refletida no dado e vice-versa.

O VueJS é interessante porque ele disponibiliza pra você uma propriedade chamada v-bind que permite fazer a conexão de um atributo HTML a uma variável dentro da instância Vue, entretanto o fluxo dessa conexão é sempre do Vue para a interface, ou seja sempre que o dado é alterado no Vue, a interface é alterada. Mas essa não é a única conexão disponível, através da propriedade v-on podemos conectar um evento a uma função, porém essa fluxo só acontece no sentido da interface para a instância do Vue.

Agora que sabemos disso a gente pode usar essas duas propriedades para fazer uma conexão dupla, que seria a implementação do Two-Way Data Binding, vou mostrar um exemplo simples.
Eu fiz o seguinte script:
1621522413457.png
Que gera a seguinte saída:
1621523770057.png

Agora o que precisamos fazer é criar uma variável dentro de data que irá conter os dados do parágrafo, e iremos sincronizar esses dados tanto com o parágrafo como também com o input, e para isso usaremos a propriedade v-bind:
1621524020119.png

1621524038167.png

Entretanto por essa ser uma conexão com fluxo que vem da instancia do Vue para a interface, por mais que alteremos o valor dentro do input, nada irá mudar na nossa variável, então precisamos usar a propriedade v-on para capturarmos o evento de input e quando o input for acionado o valor do input será atribuído à variável que definimos dentro da instância do Vue:
1621524563160.png
coisa_pro_forum.gif

Dessa forma nós criamos com sucesso o Two-Way Data Binding, só que o VueJS, já pensando nessas situações implementou uma propriedade chamada v-model que já cuida desse processo pra gente, basta colocar a propriedade na tag input e atribuir a ela o nome da variável que será o alvo da conexão:
1621525015672.png
coisa_pro_forum2.gif

E é isso pessoal, espero que tenham curtido essa pequena contribuição.
 

Lucas Galdino

github.com/lucasgaldinomt
Moderador
Cadastro
24/9/20
Postagens
132
Curtidas
116
Pontuação
100
Cidade
Fortaleza
Tenho muita vontade de aprender Vue, mas como meu foco é no mobile acabo deixando em segundo plano essa vontade :unsure:
 

Jacson Rodrigues

Novo Membro
Cadastro
17/3/21
Postagens
5
Curtidas
4
Pontuação
5
Cidade
Fortaleza
Já eu sou doido pra aprender mobile, mas meu setup n permite e.e, fora que também n tenho tempo, dai foco em web fullstack.
 
Top