Vuejs e suas bases — Parte 3

O objetivo dessa série de artigos é entender as bases do Vuejs para ajudar no desenvolvimento nosso de cada dia.

Silvana Lima
May 26 · 5 min read

Se você perdeu as outras partes dessa série, dá uma olhadinha aqui:

Vuejs e suas bases — Parte 1

Vuejs e suas bases — Parte 2

MAIS SOBRE INTERPOLAÇÃO…

A interpolação no Vuejs permite fazer algumas expressões ou até mesmo usar operadores ternários dentro dela sem que haja problemas. Nesse exemplo peguei o contador e multipliquei ele por 100, repare que ele não nos dá nenhum erro e faz essa operação sem problemas.

Também podemos fazer algumas expressões simples, nesse exemplo, usamos o operador ternário. Quando maior que 5 exibir ‘> 5’ e se for menor que 5 ‘< 5’


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…


Se esse artigo foi útil , fortalece com 👏 e ajude a chegar em mais pessoas.

Silvana Lima

Written by

Software Developer at Band | Technical Writer | http://silvanavlima.github.io

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade