PROPRIEDADES REATIVAS

TWO WAY BINDING

Vimos o v-bind que faz o binding em uma única direção que é do Javascript para o htmle agora para uma ligação bidirecional em um elemento de entrada de formulário ou em um componente, veremos o v-model

A partir da diretiva v-model conseguimos ter essa ligação, a partir do template atualiza o dado que está na instância do Vue e o que for atualizado na instância do Vue possibilita atualizar o template.

PROPRIEDADES COMPUTADAS

Vimos anteriormente os methods , e agora vamos conhecer o computed . Quando desejar um resultado calculado, que não seja tratado como um método e sim como propriedade, se os valores mudarem sempre a melhor performance será usando o computed . Os methodssão mais indicados para executar ações do usuário.

Note também que quando estamos trabalhando com computed que é uma propriedade, o Vue não chama como método {{ reversedMessage() }}, chama como atributo {{ reversedMessage }} , a partir disso o Vue sabe que é uma propriedade computada e vai tratar como computed .

WATCH

Embora as propriedades calculadas sejam mais apropriadas na maioria dos casos, há momentos em que um observador personalizado é necessário. É por isso que o Vue fornece uma maneira mais genérica de reagir às mudanças de dados por meio da opçãowatch. Isso é mais útil quando você deseja executar operações assíncronas.

O watchserve para monitorar as mudanças de uma determinada variável, e fazer algo em resposta a essas determinadas alterações.
A diferença entre a computada é que o método chamado tem que retornar algo pronto para ser usado, por exemplo no template,watch faz ações assíncronas. Você também precisa dizer exatamente o nome da propriedade que você quer monitorar.

Nesse exemplo, temos um botão que incrementa 20 ao contador toda vez que clicado. Veja que precisamos passar o mesmo nome da propriedade, também precisamos colocar de parâmetros: um novo valor e antigo valor. E dentro desse exemplo passamos apenas a função setTimeout que vai retornar uma mensagem após os 3 segundos.

TRABALHANDO COM CSS

Aqui veremos algumas coisas que o Vue pode fazer para ajudar a aplicar os estilos em nossas páginas.

Veremos nesse exemplo em conjunto com os recursos do Vuejs, como aplicar estilo dinamicamente.

Criaremos um button e toda vez que clicar nele irá adicionar ou remover uma class chamada .danger com o background na cor red .

Ou seja, o botão irá mudar para o background redcada vez que a gente clicar nele.

Definindo o estilo:

Em data criaremos um propriedade chamada applyDanger e iniciaremos com false

No button vamos adicionar um click , ele será responsável por alternar o valor de applyDanger , por ser do tipo boolen basta receber a negação desse valor.

Para aplicar a class dentro de button , vamos fazer bind emclass , passaremos o nome da class e o segundo um valor verdadeiro ou falso, fazendo com que aplique ou não uma class

Se a classe estiver separada por - é necessário colocar dentro de '' ou " " , por exemplo: {"danger-btn": applyDanger}

Se seu cenário for aplicar várias classes css, é interessante criar propriedade computada para ficar mais organizado e menos verboso.

Podemos definir um nome como por exemplo, styleBtn e retornar um objeto que terá as chaves com os nomes das classes css , nesse caso, danger e warning .

Depois passamos a propriedade computada no template:

Quando você quiser trabalhar com estilo sem uma classe associada, aplicando style na tag , podemos fazer dessa forma:

Também temos a opção de criar uma propriedade computada, retornando um objeto.

Bem, chegamos ao final dessa terceira parte.

Conclusão

Chegamos ao final da terceira parte sobre a base/fundamentos do Vuejs, falamos um pouco sobre interpolação, propriedades computadas e css.

Até os próximos artigos…