Introdução ao Vue

Acredito que se você chegou até aqui, muito provavelmente já passou por outros conteúdos ou, pelo menos, tem curiosidade de conhecer mais sobre ferramenta Vue.

Ao longo desse texto, vou supor que você já tem conhecimentos básicos de JavaScript, HTML e CSS. Meu objetivo com esse artigo é juntar um pouco do que acredito ser essencial para quem quer aprender Vue e fazer algumas comparações com outras ferramentas.

O que é o Vue?

Vue, ou VueJS, é um framework de código aberto com foco na criação de interfaces do usuário. Assim como o React, Angular, Svelte, essa ferramenta usa o JavaScript como base — e de também aceitar TypeScript.

Esse framework foi criado pelo Evan You, mesmo criador do ViteJS e provavelmente você já ouviu falar dele caso goste de projetos open source. Diferente de outros frameworks e bibliotecas conhecidas, como React, do Facebook, e Angular, do Google, o Vue não tem uma empresa gigante por trás do projeto, apesar de contar com um time desenvolve para o projeto.

Atualmente, o Vue está na versão 3 e algumas outras ferramentas podem complementar seu uso, como o Vuetify e o Nuxt — um equivalente ao NextJS e que também trabalha com SSR e SSG.

Pensando do jeito Vue

Diferente de outros frameworks, o Vue possui seu próprio formato de arquivo, que se aproveita das tags template, styles e script, deixando todo o código em único local.

Esse formato pode ser um pouco alterado caso você queira usar alguma biblioteca de estilização de CSS in JS, como o Styled-Component. Nesse caso, você pode criar um arquivo separado e colocar seus estilos, algo que também se aplica a outros frameworks focados na criação de interfaces.

Além disso, também é possível exportar um CSS separado, mas talvez essa não seja uma solução tão interessante para um primeiro momento. Isso dependente do projeto e em como você irá querer implementar a estilização, então sinta-se livre para buscar algumas referências de código.

No caso das outras tags, podemos imaginar o template como uma tag HTML e o Script servindo para armazenar o JavaScript da página, assim como acontece numa página normalmente.

O Vue usa um sistema de estados e tem um formato um pouco diferente de criar o JavaScript da página. Nele, o código do JS se aproxima mais das classes, inclusive sendo necessário colocar this antes de chamar funções ou estados.

Declarando funções

Diferente do React, o Vue tem dois lugares lugares específicos para que você possa declarar funções: o computed e o methods. Cada uma dessas partes tem funções específicas no código e devem ser usadas corretamente.

Vou tentar resumir um pouco essa parte porque a diferença entre computed e methods pode ser um pouco extensa.

O computed serve para armazenar funções que não precisaram receber propriedades. Apesar disso, ela pode usar estados e, por exemplo, limpar todos os campos de input após o envio de um formulário.

Seguindo o mesmo exemplo, o methods segue quase um caminho contrário, podendo receber propriedades. No caso, ele pode ser o responsável por pegar os dados do formulário e manipular de alguma forma.

No código, tanto o computed quanto o methods ficam assim:

computed: {
    algumaFuncao: function () {
      this.estado = ""
    }
},
methods: {
        algumaFuncao: function (valor) {
      console.log(valor)
    }
}

Declarando e usando states

Assim como no React e em alguns outros frameworks, os estados estão presentes dentro do ecossistema do Vue. Eles são responsáveis por cuidar de um estado, que pode ser modificado e usado em vários locais do código.

Normalmente, esses estados são renderizados em tela, podendo ser usados para armazenar os dados de uma lista completa que será mostrada em tela, por exemplo.

No código, os estados são armazenados no data. Essa parte do Vue é responsável por armazenar todas as informações que serão usadas, funcionando de forma similar a uma variável global.

export default {
    data: {
        state: "same state"
    }
}

// or

export default {
    data(): {
        return {
            state: "same state"
        }
    }
}

No HTML, você pode chamar um estado desta forma:

<template>
    <h1>{{ state }}</h1>
<template>

Note que no Vue utilizamos chaves duplas para exibir um estado. Se você está acostumado com o ReactJS, ele é equivalente as chaves normais e tem a mesma função: exibir um estado em tela.

Para chamar um estado em alguma função ou para chamar a própria função em outras partes do código é necessário utilizar o this antes.

this.estado
this.funcao()

Por padrão, o Vue permite que você dê uma nova propriedade para um estado, funcionando de forma semelhante ao let do JavaScript.

this.estado = "novo estado"

Vale lembrar que se você está acostumado com o sistema de ciclo de vida do React, talvez o Vue seja um pouco confuso. Esse framework permite que você reescreva a propriedade de um estado e, em seguida, já use a nova propriedade declarada.

Isso permite que seu código ganhe rapidamente novas propriedades e que não seja necessário forçar mais uma renderização de página ou passar diretamente a nova propriedade.

Passando propriedades para funções e atributos do Vue

No Vue, você consegue passar estados para todos os atributos do HTML e os que vem com o próprio framework, como v-for, v-if, key, entre outros. No caso dos atributos próprios da ferramenta, cada um deles tem sua função especifica e limitações para receber e usar propriedades.

Você pode chamar elas usando o @click ou v-on:click e chamar as funções, por exemplo. Para passar propriedades para uma função, você deve abrir parênteses e colocar um estado, string, número ou qualquer outra coisa que você deseja enviar para a função, inclusive estados.

<button @click="funcao('propriedade')">Enviando propriedades para a função</button>

Esse exemplo também se aplica a outras propriedades e formatos, como o @change (também feito como v-on:change) e outros atributos do Vue.

Condicionais com Vue

Além do @click, há outros atributos que causam efeitos na página, como o v-if, que faz parte do sistema de renderização condicional do framework. Esse atributo funciona como o if do JavaScript puro e deve ser implementado diretamente na tag HTML.

<h1 v-if="estado">Esse h1 é renderizado se "estado" for true ou equivalente</h1>

No caso do v-if e de todos os atributos do Vue que começam com "v", ele sempre poderá receber um estado ou alguma propriedade que possa ser modificada durante a criação da página. Para simplificar, imagine que todas as propriedades que podem ser passadas no if do JavaScript também são aceitas no v-if do Vue.

Além do v-if, assim como no JavaScript, também temos um equivalente ao else, chamado de v-else.

<h1 v-if="estado">Esse h1 é renderizado se "estado" for true ou equivalente</h1>
<h1 v-else>Esse h1 é renderizado se "estado" for false ou equivalente</h1>

Por fim, também temos o v-if-else, que também é bastante semelhante ao v-if, mas serve como uma segunda opção para a renderização.

<h1 v-if="estado.length > 1">Esse h1 é renderizado se o tamanho do "estado" for maior do que 1</h1>
<h1 v-else-if="estado.length === 0">Esse h1 é renderizado se o tamanho do "estado" for igual a 0<h1>

Manipulação de arrays

Assim como no JavaScript puro, os arrays tem a mesma função no Vue e podem ser usados em for, foreach e map sem nenhum problema. No entanto, esse framework acrescenta novas ferramentas para utilizar e mapeamento de arrays.

Dentre as mais comuns, vale citar o v-for. Essa funcionalidade permite que, de forma prática, elementos sejam renderizados em tela de acordo com os dados de um array.

No código, esse atributo pode ser chamado diretamente no elemento pai e, por consequência, pode ser utilizado nos filhos. Veja o exemplo:

<li v-for="(elemento, index) in array" :key="index">
    <p>{{ elemento.nome }}</p>
</li>

Note que, além do v-for, está sendo passado uma key como atributo. Essa key serve para identificar que um elemento é único. Isso permite que o item seja renderizado sem problemas.

Como ela é única, utilizamos o index na maioria das vezes, apesar de ser possível substituir por um id, por exemplo.

No caso do elemento, que está sendo chamado diretamente no v-for, ele pode ser usado em tudo que estiver dentro da tag li. Caso haja, esse elemento poderá ter suas propriedades acessadas, como foi o caso do exemplo acima, que está chamando a propriedade nome do elemento.

Usando Bind

Além dos atributos convencionais, também é possível passar estados para atributos padrão do HTML. Isso se chama bind ou v-bind e serve para passar propriedades para um atributo que não receberia normalmente um estado.

No código, o v-bind pode ser chamado apenas colocando dois pontos antes do atributo, como aconteceu no exemplo do tópico anterior.

// Com bind na forma reduzida
<img :src="estado.imagem" :alt="estado.nome" />

// Com bind normal
<img v-bind:src="estado.imagem" v-bind:alt="estado.nome" />

Conclusão

Se você chegou até aqui, espero que tenha entendido um pouco sobre o Vue. Essa ferramenta é bastante poderosa e conta com uma comunidade muito grande por atrás desse framework.

Tentei deixar o artigo o mais didático possível tanto para quem escolheu o Vue como primeiro framework quanto para quem está vindo do React.

Caso você ache que algum ponto do artigo pode melhorar, fique a vontade para deixar um feedback nos comentários.