Vue 3: entendendo componentes, diretivas e reatividade no framework

Entendendo componentes - Apresentação

Olá, boas-vindas a este curso de Vue.js. Meu nome é Antônio Evaldo e serei seu instrutor.

Audiodescrição: Antônio Evaldo é um homem branco de olhos castanhos, cabelos pretos encarracolados atualmente amarrados para trás. Tem bigode e cavanhaque. Usa óculos com armação arredondada e um moletom azul-escuro com o logotipo da Alura. Ao fundo, uma parede com gradiente de cor azul para rosa.

Conhecendo o projeto

Neste curso, utilizaremos o Vue para desenvolver um projeto muito interessante, o Cookin'UP. O protótipo deste projeto no Figma foi desenvolvido especialmente para nós e já posso adiantar que está incrível.

Mas, já vamos mostrar como ele funciona no navegador que está aberto em outra aba.

A ideia do projeto é a seguinte: você está em casa, não possui muitas ideias de receitas para preparar, portanto, pode utilizar este site para selecionar os ingredientes que possui em sua casa.

Para simular essa situação, vamos selecionar alguns ingredientes nos cards de categoria que serão: azeite de oliva, alho, orégano, ovos, queijo e leite.

À medida que selecionamos os ingredientes, eles aparecem na lista que está na parte superior da seção de ingredientes intitulada "Sua lista". Podemos remover esses ingredientes, caso não queiramos utilizá-los. Basta desselecioná-los.

Ao final da página, clicamos no botão "Buscar receitas". Feito isso, aparecem as receitas que podem ser feitas com os ingredientes selecionados. Caso queira, podemos clicar no botão "Editar lista" e realizar uma nova busca.

O que vamos aprender?

Ao construir este projeto, você aprenderá muitos conceitos específicos do Vue, além de outros conteúdos mais gerais de frameworks de front-end, aplicáveis em outros, como o React e o Angular.

Neste curso, você aprenderá a criar um projeto Vue do zero, criará os primeiros componentes, entenderá o que são, para que servem e como podem nos auxiliar.

Vamos também conhecer várias diretivas do Vue que resolvem problemas comuns de HTML e CSS, muitas vezes relacionados à repetição de código. Além disso, abordaremos o que é estado e reatividade, um dos conceitos fundamentais de frameworks de front-end.

Aplicaremos comunicação entre componentes, utilizando props e eventos. Estes são problemas muito específicos que surgem quando estamos trabalhando com frameworks de front-end.

Por fim, vamos explorar os métodos de ciclo de vida do Vue, pois utilizaremos um deles, o Created.

Ao final deste curso, você terá muito mais produtividade ao desenvolver outros projetos de front-end, pois é isso que os frameworks de front-end nos proporcionam, além de uma melhor experiência de desenvolvimento.

O Vue é uma das ferramentas mais utilizadas no mercado atualmente, portanto, surgirão diversas oportunidades após aprender a utilizá-lo.

Pré-requisitos

Para realizar este curso, é fundamental que você tenha conhecimentos básicos de HTML e CSS. No entanto, não vamos concentrar muito nisso, pois nosso foco será nos conceitos do Vue.

Além disso, você também precisa de familiaridade com JavaScript, pelo menos até conceitos intermediários, como requisições HTTP ou consumo de APIs. Por fim, conhecimentos básicos de TypeScript são necessários, pois também vamos utilizá-lo em conjunto com o Vue.

Em caso de dúvidas, você pode acessar o fórum da Alura. Nós responderemos o mais rápido possível. Você pode também acessar o Discord da Alura para esclarecer dúvidas com outras pessoas estudantes.

Te esperamos no curso. Vamos começar a aprender!

Entendendo componentes - Criando projeto Vue

Para começarmos a desenvolver efetivamente com o Cookin'UP, necessitamos de uma série de configurações. Existe um pacote disponibilizado pela própria equipe do Vue, que nos permite realizar tais configurações de maneira manual. O Vue requer uma gama de ferramentas auxiliares para funcionar corretamente.

Criando projeto Vue

Para utilizar esse pacote, vamos abrir o terminal. Neste caso, vamos abrir o terminal PowerShell, já que estamos utilizando o Windows. Caso você não esteja usando o Windows, basta abrir o terminal do seu sistema operacional.

Com o terminal aberto, vamos digitar o seguinte comando:

npm create vue@3.7.3

Este comando pode ser encontrado também na documentação do Vue. Adicionamos o @ 3.7.3 para instalar exatamente essa versão, garantindo que você não tenha diferenças de projeto em relação ao nosso.

Após digitar o comando, pressionamos "Enter". Para pessoas que estiverem executando este comando pela primeira vez em seus computadores, será solicitada a instalação do pacote Create Vue. Trata-se de uma operação normal, portanto pode autorizar a instalação.

No nosso caso, a execução já retornou de maneira interativa e solicitou o nome do projeto. Vamos nomeá-lo como cookin-up

As próximas perguntas estão em inglês, então vamos traduzir enquanto respondemos. Para alternar as opções de sim (yes) e não (no), utilizamos as setas de navegação do teclado e confirmamos a escolha com o "Enter".

• Adicionar TypeScript ao projeto? Sim.
• Adicionar suporte JSX? Não.
• Adicionar Vue Router para desenvolvimento de aplicação de página única? Não.
• Adicionar Pinha para gerenciamento de estado? Não.
• Adicionar Vitest para teste de unidade? Não.
• Adicionar solução para teste de ponta a ponta? Não.
• Adicionar ESLint para qualidade de código? Não.

De todas as opções, utilizaremos apenas o TypeScript.

Com essas respostas, o terminal retorna uma sequência de passos que devemos seguir. Vamos começar com o cd cookin-up, este comando nos direciona para a pasta do projeto recém-criado.

cd cookin-up

Antes de executar o próximo comando, vamos abrir nosso editor de código utilizando o comando code . e pressionando "Enter". Neste caso, será aberto o Visual Studio Code, que é editor de texto padrão desse computador.

code .

O projeto já inclui uma série de arquivos necessários para rodar um projeto Vue, que logo mais exploraremos juntos.

Uma janela pop-up apareceu no canto inferior direito do VSCode, perguntando se desejamos instalar as configurações recomendadas de extensões para o Vue nesse repositório. Vamos clicar no botão de "Mostrar as recomendações" para analisá-las.

São abertas duas abas com as recomendações. A primeira extensão recomendada é a Vue Language Features (Volar). Vamos instalá-la clicando no botão de "Instalar." A segunda extensão é TypeScript Vue Plugin (Volar), que também será instalada da mesma maneira.

Essas extensões são essenciais para o desenvolvimento, proporcionando uma colorização de código e uma melhor experiência de desenvolvimento.

Com as extensões instaladas, vamos voltar ao explorador de arquivos do projeto ("Ctrl + Shift + E") e abrir o arquivo que está na raiz, chamado package.json. Este arquivo é padrão para qualquer projeto Node. Caso não tenha muita familiaridade com Node, deixaremos um material auxiliar para entender melhor a respeito.

Nesse arquivo, queremos te mostrar que, a partir da linha 12, temos uma lista de dependências na qual a única listada nessa parte é a vue, um pacote da própria Vue que executa todas as configurações necessárias.

A partir da linha 15, temos as devDependencies, que listam outras ferramentas de terceiros que Vue também utiliza para conseguir executar o projeto. No entanto, essas devDependencies não serão instaladas se o site for para produção, ou seja, se for ser um site ativo.

package.json:

"dependencies": {
    "vue": "^3.3.4"
},
"devDependencies": {
    "@tsconfig/node18": "^18.2.0",
    "@types/node": "^18.17.5",
    "@vitejs/plugin-vue": "^4.3.1",
    "@vue/tsconfig": "^0.4.0",
    "npm-run-all": "^4.1.5",
    "typescript": "~5.1.6",
    "vite": "^4.4.9",
    "vue-tsc": "^1.8.8"
}

Isso tem relação com nosso próximo comando que é o npm install, seguido de npm rundev. Vamos retornar ao VSCode e abrir o terminal integrado, o qual vamos usar a partir de agora. Abrindo com "Ctrl + J", vamos digitar npm install ou simplesmente npm i, são equivalentes.

npm install

Ao pressionar "Enter", ele instalará todas as dependências do package.json diretamente da internet. Esse processo pode levar algum tempo.

added 145 packages, and audited 146 packages in 25s

Ele instalou 145 pacotes em 25 segundos, mas esse tempo pode variar. Se quiser conferir, eles estão agora dentro de uma pasta chamada "node_modules", que não estava antes no projeto. Algumas dependências vão chamar outras, é por isso que temos tantos pacotes instalados.

Agora, o próximo passo é executar o outro comando que o terminal nos forneceu.

npm run dev

Para entender esse comando, voltamos ao package.json. Na parte de scripts, existem um chamado dev.

package.json:

"scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
},

Estamos pedindo para o projeto executar esse script, que é basicamente um comando chamado vite. O vite é uma das ferramentas que o Vue utiliza para conseguir rodar um servidor local, que nos disponibiliza uma página web.

Retornando ao terminal integrado, vamos executar o comando npm run dev.

Vite v4.4.9 ready in 1379 ms

Após alguns segundos, um link será disponibilizado: http://localhost:5173. Você pode digitar esse link no seu navegador, ou simplesmente segurar "Ctrl" e clicar nele, que vai abri-lo automaticamente.

O primeiro carregamento pode demorar um pouco. Apareceu o esqueleto do projeto que vem por padrão em inglês, dizendo que conseguimos rodar esse projeto Vite + Vue 3 e algumas possibilidades de desenvolvimento.

Assim, já temos a infraestrutura necessária para começar a codificar, e é isso que faremos no próximo vídeo. Te espero lá!

Entendendo componentes - Criando o primeiro componente

Já conseguimos rodar o projeto Vue pela primeira vez. Além disso, deixamos uma atividade para você fazer algumas configurações no projeto, para prepará-lo para começarmos a codificar o Cookin'UP.

No estado atual, o projeto está basicamente com o texto: "Meu primeiro projeto Vue!" em fundo verde. Para continuar a codificação do projeto, vamos primeiro entender como esse texto é exibido na tela. Quais são os pontos que o Vue conecta no projeto? Compreender isso vai nos auxiliar no desenvolvimento.

O que é um componente

Vamos abrir o VS Code. Na pasta raiz, temos o index.html. Todo o projeto Vue terá, pelo menos, um arquivo HTML como esse.

No index.html, encontramos uma tag <head> com algumas configurações que também já deixamos na atividade. Temos a parte do <body> com uma <div> com id app. Esta <div> está atualmente vazia. E temos um <script> do tipo module com o src para /src/main.ts.

index.html:

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="vueport" content="width=device-width, initial-scale=1.0">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,400;6..12,700&family=Paytone+One&display=swap"
    rel="stylesheet">

  <title>Cookin' Up</title>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>

Note que o HTML não tem conteúdo algum. Então, como ele está mostrando o texto "Meu primeiro projeto Vue!" na tela? Isso acontece porque o Vue utiliza o JavaScript para inserir o texto dinamicamente.

Vamos seguir um caminho até encontrar aquele texto. Portanto, seguindo essa parte do /src/main.ts, podemos olhar na estrutura do projeto, abrindo o "src" e entrando em main.ts.

Esse arquivo tem o import de ./assets/main.css. Também são declarados alguns estilos globais, que também são importados.

Em seguida, também importamos uma função chamada createApp do pacote vue. Uma função muito importante para montar o projeto pela primeira vez. Além disso, na linha 4, importamos o App com "A" maiúsculo de um arquivo que está na mesma pasta, que se chama App.vue.

Na última linha, chamamos o createApp(), passando o App como parâmetro, e finalmente, dando o mount() com uma string que é o #app. Essa string #app é um seletor CSS que faz referência àquela <div> com o id app do index.html.

main.ts:

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Desta forma, o Vue irá inserir dinamicamente o conteúdo. A partir deste componente, componente chamado App. Agora vamos entender o que é um componente.

Vamos primeiro abrir o arquivo App.vue. Já o modificamos, mas por enquanto só tem uma tag <template>. Dentro dela, tem uma tag <h1> com o texto "Meu primeiro projeto Vue!". Assim, é como as coisas se conectam.

App.vue:

<template>
    <h1>Meu primeiro projeto Vue!</h1>
</template>

E, podemos dizer que esse App.vue é o componente raiz da nossa aplicação. Um componente do Vue é basicamente qualquer arquivo que termina com a extensão .vue. E ele pode ser constituído por:

• lógica com JavaScript;
• HTML** a partir da tag <template>;
• e também estilos, como a tag <style>.

Como criar um componente

Agora que entendemos como ele conecta esses pontos, podemos começar a desenvolver dentro desse <template> e codificar o Cookin'UP.

Para entender o que vamos codificar, vamos abrir o Figma no navegador. A primeira parte que iremos fazer é a parte de cima, o banner, que possui o logo do Cookin'UP, um texto de introdução e uma imagem.

Voltando no arquivo App.vue no VS Code, vamos apagar o <h1> e colocaremos um <header> com uma classe banner. Dentro desse <header>, teremos uma <div> com uma classe chamada apresentacao. Dentro dessa <div>, teremos uma imagem com a classe logo.

E para referenciar uma imagem no Vue, o VS Code já nos ajudou a escrever a tag. No src, vamos colocar ./assets/imagens/logo.svg, referenciando a imagem que está exatamente no caminho dentro de "src". No alt, vamos colocar o texto alternativo "Logo do Cookin'UP".

App.vue:

<template>
  <header class="banner">
    <div class="apresentacao">
      <img src="./assets/imagens/logo.svg" alt="Logo do Cookin' Up" class="logo">
  </header>
</template>

Ainda no <header>, abaixo dessa imagem, teremos um parágrafo com a classe cabecalho-lg, uma classe global que já configuramos. E outra classe também chamada frase-cabecalho. Nesse parágrafo, teremos uma tag <span> com a classe texto-verde.

Agora, podemos copiar texto direto do Figma, ativando o modo desenvolvedor do Figma no botão superior direito (ou "Shift + D"). Depois, clicamos em "Copy" para copiar o texto da seção de "Content" no painel de inspecionar à direita. Vamos voltar ao VS Code e dar um "Ctrl + V" dentro da tag <span>.

Desse texto, vamos recortar apenas a parte de "despertar o chefe que há em você!", pois que ficará fora do <span>.

<p class="cabecalho-lg frase-cabecalho">
    <span class="texto-verde">Um banquete de ideias para</span>
    despertar o chef que há em você!
</p>

Após esse parágrafo, teremos outro <p> com a classe subtitulo-lg. Faremos o mesmo processo, voltando ao Figma para copiar o texto "Explore novas receitas" de volta ao VS Code com "Ctrl + V".

Agora, vamos sair da <div> ainda dentro do <header>, vamos inserir uma nova imagem que tem a classe foto-banner. O src dela será ./assets/imagens/foto-banner.png. E a descrição em alt será "Foto de uma mulher cozinhando com uma bacia de vidro nas mãos. Ela está sorrindo e está apoiando o celular entre o rosto e o ombro". Inserimos essa descrição para acessibilidade.

<p class="subtitulo-lg">
    Explore novas receitas todos os dias com os ingredientes que estão ao seu alcance!
</p>
</div>

<img src="./assets/imagens/foto-banner.png" alt="Foto de uma mulher cozinhando com uma bacia de vidro nas mãos. Ela está sorrindo e está apoiando um celular entre seu rosto e ombro." class="foto-banner">

Pronto, o conteúdo já está pronto.

Ao salvar esse arquivo e abri-lo no navegador, já podemos visualizar o conteúdo sendo exibido na tela. Note que ele é atualizado automaticamente, graças ao servidor Vue. Apesar de ter o conteúdo, ainda não temos os estilos e posicionamentos corretos. Então, vamos voltar para o VS Code.

Para adicionar estilos, nós os inserimos no mesmo arquivo. Portanto, vamos adicionar uma tag <style> fora do <template>. Na tag de abertura de <style>, vamos adicionar um atributo chamado scoped, cuja funcionalidade vamos explicar posteriormente.

Dentro dele, vamos copiar e colar os estilos CSS que disponibilizamos na atividade anterior.

<style scoped>
.banner {
  padding: 4rem 7.5rem;
  color: var(--creme);

  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 3.25rem;
}

.logo {
  height: 4.5rem;
  margin-bottom: 3rem;
}

.frase-cabecalho {
  margin-bottom: 2rem;
}

.texto-verde {
  color: var(--verde-medio, #3D6D4A);
}

.foto-banner {
  width: 35rem;
}

@media only screen and (max-width: 1300px) {
  .banner {
    padding: 4rem 3.75rem;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (max-width: 767px) {
  .banner {
    padding: 4rem 1.5rem;
  }

  .foto-banner {
    width: min(100%, 21.25rem);
  }
}
</style>

Lembre-se, o foco deste curso não é o CSS, portanto, não vamos passar muito tempo explicando. O foco é o Vue. Ao salvar esse arquivo e voltar ao navegador, os estilos já estão corretos.

Uma informação adicional: repare que colocamos tanto o template quanto o CSS no componente Vue. Isso é o que chamamos de Single File Component (componente de arquivo único).

É basicamente um padrão que o Vue segue e traz benefícios que vamos ver ao longo do tempo.

Um desses benefícios é resolver um problema que começa a aparecer à medida que desenvolvemos projetos maiores. Repare que no componente principal, o App.vue, o código já está grande e fizemos apenas o banner. Ainda temos muito mais código do Figma para escrever. Isso pode tornar os arquivos muito grandes e de difícil manutenção.

Agora, vamos utilizar um recurso do Vue para começar a otimizar esse código. Dentro da pasta de "components", que atualmente está vazia, vamos criar um novo arquivo chamado Banner.vue com B maiúsculo, seguindo a convenção chamada PascalCase onde iniciamos todas as palavras com letras maiúsculas.

Após criar essa arquivo, vamos retornar a App.vue e dar um "Ctrl + X" no <header>, ou seja, em todo o conteúdo do <template>. Voltamos para Banner.vue, criamos um novo <template> e usaremos o atalho "Ctrl + V" para colar o código.

Também vamos criar uma nova tag de estilo, o <style scoped> e recortaremos todo o conteúdo CSS que estava no arquivo App.vue. Depois vamos salvar esse arquivo, retornar para Banner.vue e aplicar um "Ctrl + V" dentro de <style scoped>.

Confira como ficou o código completo de Banner.vue

Se salvamos esse novo arquivo e retornamos ao navegador, o conteúdo desaparecerá. Por quê? Deixamos esse conteúdo todo num arquivo separado, todavia, não informamos ao Vue como esse conteúdo deveria ser utilizado. Portanto, faremos isso agora.

Vamos voltar para App.vue e, dentro do <template>, devemos chamar o Banner, o novo componente que criamos. Para isso, é preciso usar a mesma sintaxe utilizada para as tags do HTML. Isto é, usamos o sinal de "menor que" para abrir a tag e escrevemos Banner e fechamos a tag com a barra e o sinal de "maior que".

No entanto, isso ainda não é suficiente. Precisamos informar melhor sobre como desejamos importar esse Banner. Faremos isso com uma nova tag, que será o <script>, colocado no início do arquivo.

Inclusive, vamos dizer que este <script> tem um atributo denominado lang igual a ts, para indicar que quero utilizar a linguagem TypeScript.

Em seguida, vamos escrever import Banner. Até apareceu uma sugestão do VS Code para BannerVue. Se aceitamos essa sugestão, o caminho será completado automaticamente. E agora, para finalizar essa importação de forma que o Vue entenda que precisa utilizar esse componente, precisamos escrever export default ainda no <script>.

Devemos abrir um objeto e escrever components. Essa propriedade de componentes é um objeto e vamos declarar que uma propriedade se chama Banner e seu valor é o Banner que importamos na linha 2.

App.vue:

<script lang="ts">
import Banner from './components/Banner.vue';

export default {
  components: { Banner: Banner }
}
</script>

<template>
  <Banner />
</template>

Contudo, temos uma sintaxe que o JavaScript nos oferece, a qual é muito útil quando o nome da propriedade é igual ao seu valor. Nesse caso, podemos apagar o valor e deixar apenas o nome da propriedade. Então, temos apenas Banner entre chaves.

Isso até ajudou a colorir o <Banner /> que estamos usando no <template> e vai funcionar do mesmo jeito.

export default {
  components: { Banner }
}

Vamos testar se isso funciona. Após salvar o arquivo, retornamos ao navegador. Os textos com seus estilos já aparecem, porém, as imagens não estão sendo importadas corretamente.

Como mudamos de arquivo, precisamos apenas alterar o caminho das imagens. Então, vamos retornar na tag <template> do Banner.vue. No src de cada imagem, ao invés de ./assets, usarei ../assets. Faremos essa alteração nas duas imagens, pois vamos subir uma pasta e entrar em "assets".

Salvamos o arquivo, retornamos ao navegador e já está funcionando novamente.

Conclusão

Vamos voltar ao VS Code para entender melhor o que foi feito. Essa é uma sintaxe muito interessante que ajuda a deixar nosso código muito mais conciso. Conseguimos separar diferentes partes do código em diferentes componentes e chamamos esses componentes apenas quando necessário.

Quando temos uma estrutura em que App.vue está chamando Banner.vue, dizemos que App.vue é o componente-pai de Banner.vue. E o Banner, por sua vez, é filho de App.vue. É importante que você entenda esses termos porque eles serão utilizados durante o curso.

Com isso, criamos nosso primeiro componente no Vue e o utilizamos com sucesso. No próximo vídeo, vamos explicar um pouco melhor como funciona a <style scoped>. Espero você lá.

Sobre o curso Vue 3: entendendo componentes, diretivas e reatividade no framework

O curso Vue 3: entendendo componentes, diretivas e reatividade no framework possui 154 minutos de vídeos, em um total de 59 atividades. Gostou? Conheça nossos outros cursos de VueJS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Entendendo componentes
• Utilizando diretivas
• Passando informações com props
• Emitindo eventos
• Alternando telas