Vuejs para desenvolvedores backend

Tenho muito carinho pelo Vuejs e recentemente conversando com alguns desenvolvedores backend de diversas linguagens, percebi que muitos possuem o interesse e curiosidade para aprender, porém não tem um norte por onde começar e em torno de tudo o que o Vue.js oferece. Então decidi compilar uma lista completa e um tutorial de coisas para aprender no Vue.js.

Se você esteve neste mesma dúvidas, este post é para você porque eu cuidadosamente selecionei algumas coisas específicas que você precisa aprender no Vue.js e que irá te ajudar.

O que é o vue.js

É um Framework progressivo que nos permite desenvolver interfaces de comunicação com o usuário, e que traduzindo, significa criar telas de uma forma mais moderna. Ele tem o objetivo de ser incrementável ou montável, no estilo Minecraft ou Lego, ou seja, divide-se em diversas peças que podem ser facilmente encaixadas umas nas outras.

Nossos estudos

Dentre os diversos assuntos de estudo do vuejs, essa é a nossa listinha dos pontos principais desse post para voce desenvolvedor iniciante com o framework poder estudar.

1. Reatividade
2. Renderização condicional
3. Interligação de dados
4. Directivas
5. Lógica do modelo (breve)
6. Componente e aninhamento (breve)
7. Manipulação de eventos (breve)
8. Propriedades Computadas (breve)
9. Reutilização & Composição (breve)

REATIVIDADE: É um dos aspectos mais importantes do Vue. Quando uma variável é alterada, instantaneamente a reatividade trata de informar a modificação para todos os observadores de elementos que a usam. Com este recurso, os devs de backend podem facilmente plataformas em tempo real e reativo, entre outras coisas que podem ser feitas com o VUEJS. Leia mais aqui.

RENDERIZAÇÃO CONDICIONAL: Usada no processo de escrever código com a intenção de esconder os detalhes depedenddo do resultado esperado. O vuejs possui diretivas especificas (nosso quarto item da lista), para trabalhar com esse conceito.

INTERLIGAÇÃO DE DADOS: É o processo que estabelece uma conexão entre a interface do usuário do aplicativo e a lógica de negócios. O vue possui uma função chamada Data que retorna os estados reativos do componente:

export default {
  name: 'App',
  data () {
    return {
      msg: `Oi eu sou o ${this.name}`,
      name: 'Felipecss',
      age: 28,
      hobby: [
        'Jogar Games',
        'Séries',
        'Vue'
      ]
    }
  }
}
</script>

Data nada mais é do que o local onde declaramos as nossas variáveis.

E como tal, temos string, numero, boolean, array, … e todos os outros que o javascript nos fornece.

Os dados são declarados dentro do atributo data, que é uma função de retorno declarado dentro do script.

Estes dados são reativos, ou seja, se sofrer alguma mudança ela sera replicada onde estiver sendo usada e serão atualizadas sem dar refresh na página.

Uma das formas de imprimir/usar uma variável no HTML é por meio dos mustaches.

Mustaches são chaves duplas {{}} onde dentro dela você informa a variável para impressão.

<span>{{ name }}</div>

O vue também nos permite interligar classes e estilos dinamicamente, podendo manipular as classes dos elementos por meio da diretiva v-bind (olha ela aqui de novo). Leia mais aqui.

<div v-bind:class="{ active: isActive }"></div>

data: {
  isActive: true,
  hasError: false
}

DIRETIVAS: Diretivas são as formas que temos para manipular o template, com ela podemos alterar o nosso DOM. O Vue nos da a possibilidade de usar varias diretivas como tbm criar as nossas proprias customizadas.

É possivel criarmos nossas própias, porém não irei abordar nesse post. Toda diretiva deve ser declara com v- na frente, tirando duas que podemos omitir/abreviar e algumas diretivas podem receber parâmetros, argumentos dinâmicos e modificadores, são elas o v-bind e o v-on.