10. Componentes (Introdução ao Vue.js)
Nesse tópico vamos aprender sobre o básico de componentes no Vue.
Se você caiu de paraquedas aqui, saiba que esse post faz parte de uma série de tópicos sobre como aprender os conceitos básicos do Vue.js criando um Gerador de Memes.
Além disso, se você ficou com dúvidas sobre como resolver o desafio do 9. Interligações de classe e estilo. Segue o código do desafio resolvido no Github para você entender :)
Componentes
Vamos aprender sobre o básico de componentes no Vue.
O que é são componentes?
- São blocos reusáveis de código que possuem estrutura e funcionalidade.
Objetivo
Vamos criar um componente chamado meme-generator e adicionar todo o código que programamos até agora.
Vue CLI
Além do mais, vamos usar a ferramenta Vue CLI para esta tarefa:
- Vue CLI é uma ferramenta para criar rapidamente aplicações Vue.js;
- Possui um conjunto de configurações de build prontas para um processo de trabalho de front-end moderno;
- Leva apenas alguns minutos para estar pronto e executando com hot-reload, lint ao salvar e empacotamente pronto para distribuição em produção.
Vue CLI — (Requisitos)
- Vue CLI exige Node.js na versão 8.9 ou acima (recomendado 8.11.0 +). Você pode gerenciar múltiplas versões do Node na mesma máquina usando o nvm ou nvm-windows.
- Yarn — instalação ubuntu, instalação windows
Vue CLI — Instalação
yarn global add @vue/cli
ou pelo npm
npm install -g @vue/cli
Checar a versão
vue --version
Vue create project
Vamos criar nosso projeto digitando vue create meme-generator
Depois disso, só selecionar default e manager que você preferir para instalar as dependências.
Depois da instalação basta
- Acessar a pasta
cd meme-generator - E rodar
yarn serve
E acessar o localhost:8080
Estrutura inicial
Problema
- Em uma aplicação Vue nós não queremos que todos nossos dados, métodos, dados computados, entre outros na raiz da instância Vue.
- Inclusive, nós queremos deixar nosso código modular e mais fácil de trabalhar.
Solução
Vamos criar um componente chamado meme-generator.vue dentro da pasta components.
Mas antes de criarmos nosso componente, vamos entender uma maneira de estruturar um componente
Estrutura de um Single File Component
Nesse tipo de estrutura o seu código que contém o HTML, JavaScript e CSS ficam em um arquivo. Sendo os dados do
- HTML dentro da tag
<template></template> - JavaScript dentro da tag
<script></script> - CSS dentro da tag
<style></style>
Single File Component
Para testar você pode substituir o conteúdo da compoente HelloWorld.vue que já vem na estrutura inicial do Vue Cli e substituir pelo seguinte.
e também alterar o conteúdo do App.vue
Resultado
Nomenclatura de componentes
Nós temos duas opções para definir o nome dos componentes sendo elas:
- kebab-case.vue
- CamelCase.vue
Sendo assim, vamos criar um componente chamado meme-generator
Você pode copiar o código abaixo e substituir com os dados de todo código que já usamos até agora, e adicionar os trechos de código faltantes.
Importar o componente
E no App.vue vamos importar nosso componente para utilizá-lo
Além do mais, incluir meta tags, bootstrap e fonte no public/index.html
It workss!!
10. Componentes — (O que aprendemos)
- Componentes são blocos de código reusáveis;
- Componentes facilitam a manutenção da aplicação.
