Introdução ao Vue.js Conceitos Básicos Parte 2

Introdução ao Vue.js Conceitos Básicos Parte 2

08/09/2018 0 Por Alisson Suassuna

E aí galera, vamos a mais um artigo da semana, neste vamos dar continuidade aos conceitos básicos do Vue.js, iremos abordar tudo sobre o binding, veremos como o framework trata essa questão, e como sempre veremos a parte teórica junto com exemplos práticos para facilitar nossos estudos. Vamos ao código base para iniciarmos nossos estudos sobre binding no VueJS.

Binding

Não há nada de novo em nosso código base, caso você caiu direto neste artigo e não está entendendo o código acima, saiba que já explicamos cada detalhe a respeito no artigo parte 1, para acessa-lo clique aqui. Vamos ao nosso primeiro cenário. Gostaria de colocar esse valor que está em “url”, dentro do atributo href da tag <a> para de fato criamos um link, quando clicado o usuário irá ser redirecionado para o conteúdo que foi inserido em “url”, então vamos fazer o mais obvio, inserir o dado “url” dentro de href=”” será que funcionará?


Binding

Binding unidirecional

Como podemos ver na imagem nossa tentativa de criar um link com Vue.js não deu muito certo, vamos analisar o porque nossa lógica não funcionou, se você observar na barra de endereço o Vue imprimiu uma espécie de código um pouco estranho “/%7B%7B%20url%20%7D%7D” isso aconteceu por que ele não conseguiu interpolar o dado “url”, então ele escreveu literalmente o código, mas porque isso aconteceu? Simples o Vue.js precisa que passamos instruções que ele conheça para que ele possa fazer a interpolação de um dado, e dizemos isso ao Vue usando as diretivas, esse é um conceito super importante para entender o Vue.js, vamos ver funcionando na prática.

Binding

Como podemos ver na imagem, o link funcionou, quando colocamos o v-bind:href=”url” aqui estamos dizendo ao Vue que esse valor precisa ser interpolado, isso serve para qualquer atributo do HTML. Existem outras formas de escritas para se fazer um binding em Vue, podemos omitir o v-bind  escrevendo apenas :nomeDoAtributo, veja o exemplo.

O que são Diretivas?

Diretivas são propriedades personalizadas, que o Vue usa para fazer manipulações na DOM, para interpolar determinados valores e fazer sincronização de dados. Existem várias diretivas, entre elas estão o v-bind, v-if e v-for e muitas outras, caso queira ver mais acesse a documentação. 

Binding Bidirecional

Para simular esse binding bidirecional, vamos criar uma tag <input> em nosso HTML, e criar uma propriedade  “name”  no atributo “date” em nossa Vue Instance.

Binding

Observe, que agora quando digitamos no <input> automaticamente a nossa view é atualizada, esse é o famoso binding bidirecional, o termo em inglês é two-way data binding que ficou amplamente conhecido com a criação do Angularjs, com certeza você já ouviu falar.

Watch

Os watch no Vue são atributos que usamos para ouvir determinadas ações produzidas pelos usuários da nossa aplicação, linkamos  esses atributos aos valores das propriedades que desejamos fazer determinada ação, quando essa for modificada a função que está em watch é invocada, lembrando que o nome da função deve ser o mesmo atribuído ao dado que você deseja escutar.

Binding

Veja que quando escrevemos algo no <input> nossa função que está no atributo watch foi chamada automaticamente, esse recurso é muito útil em nosso dia-a-dia como desenvolvedor frontend.

Conclusões

Terminamos por aqui mais um artigo sobre esse maravilhoso framework JavaScript, aguardem que teremos as próximas partes, espero que vocês tenham gostado do conteúdo apresentado até aqui, e caso não tenha lido a parte 1 deste artigo é só clicar aqui.  Por favor deixa seu like se gostou, e deixa seu feedback nos comentário, com alguma dúvida ou sugestão de melhoria, vou ter o prazer de ler e responder, forte abraço e até semana que vem com mais um artigo.

Recomendações de Cursos e Livros

Curso Introdução ao Vue JS 2 – Udemy

Curso muito bom galera, recomendo demais para aqueles que querem sair do básico e avançar um pouco mais seus conhecimento no VueJS.


CLIQUE AQUI PARA VISUALIZAR O CURSO

Javascript. O Guia Definitivo

Esse livro é muito bom galera, muito completo tenho ele a algum tempo e me ajudou muito a entender o JavaScript de verdade, vale muito apena o investimento.

CLIQUE AQUI PARA VISUALIZAR O LIVRO