Masterclass Vue.JS 2024

Então pessoal estamos começando mais um vídeo aqui no canal da coder e nesse vídeo a gente vai falar e vai falar bastante sobre o vi JS porque esse aqui vai ser o nosso aulão de View E como tu provavelmente tá vendo aí na timeline do vídeo esse aqui é um vídeo que tá longo e ele tá longo justamente porque a gente vai abordar diversos conceitos do View e a gente vai abordar esses conceitos de uma forma bem detalhada Então se tu tá Querendo começar a mexer com vio seja para trabalhar com esse Frame workel só

para entender como ele funciona esse vídeo é para ti porque ao longo desse vídeo a gente vai não só criar a nossa aplicação vi do zero mas a gente também vai criar os nossos primeiros componentes e vai explorar diversos recursos e funcionalidades que existem e que estão disponíveis pra gente dentro do vijs Então pessoal vamos começar aqui o nosso aulão de vijs e eu já quero Começar dando um aviso para vocês para aproveitar o máximo esse aulão é importante que tu tenha con cono prévio de html CSS e JavaScript porque esses conhecimentos são fundamentais para

entender como que o View funciona e como que ele se integra ao ecossistema de desenvolvimento web e como o foco aqui é a viw eu não vou est entrando em detalhes sobre o HTML que a gente vai escrever sobre o CSS que a gente vai escrever porque eu já Espero que tu Tenha esses conhecimentos Beleza então dito isso a gente pode iniciar aqui o nosso processo para trabalhar com o View então então quero trabalhar com View qual é a primeira coisa que eu preciso fazer eu preciso criar um projeto View e para criar um projeto

View a gente vai precisar aqui abrir o terminal então abri aqui o meu terminal e eu vou agora através do meu terminal entrar na pasta onde eu quero salvar o meu projeto View então eu vou entrar aqui na pasta Desktop e em seguida eu vou rodar o comando para criar o meu projeto View antigamente para poder criar um projeto View a gente precisava fazer o download de uma ferramenta que era o View Command Line interface ou View cli ou View cli né muitas pessoas também chamam de View c e e essa ferramenta era uma ferramenta

específica pra gente trabalhar com os projetos View hoje a gente não usa mais essa ferramenta mas é importante eu dizer aqui para vocês que ela existe Porque pode ser que eventualmente você se deparem com ela aí se precisarem da manutenção em algum projeto legado Mas como que hoje a a gente cria um projeto View a gente usa o comando npm createview @lestodj uma série de coisas no meu projeto eu quero fazer o setup mais básico aqui possível porque o intuito desse aulão é ser básico mesmo então eu não vou adicionar typescript não vou adicionar jsx

não vou adicionar vi router também Não quero pinia não quero v test não quero test end to end não quero ES lint e não quero vi Tools beleza esse aqui é o setup mais básico que a gente pode fazer e depois disso ele me indica aqui alguns comandos que eu posso rodar para poder subir o meu servidor e ver a aplicação de exemplo que a gente recebe toda vez que a gente inicia um projeto viw rodando eu não vou seguir esses comandos agora exatamente porque eu vou querer abrir o meu vs Code com essa Pasta

então eu quero abrir a pasta aulão View no vs code E como eu já tô aqui no meu terminal eu vou usar o comando code mesmo para poder abrir aqui essa pasta beleza pasta aberta e aqui a gente consegue ver o conteúdo da nossa pasta então aqui a gente consegue ver que a gente tem a pasta src onde a gente tem alguns componentes aqui e já apareceu aqui um pop-up do próprio vs code pedindo para que eu instale a extensão do View que é algo que a gente vai fazer Agora então eu não vou instalar

ali por aquele popup eu vou abrir aqui as minhas extensões e eu vou procurar por View E aí ele vai me mostrar aqui essa extensão o View official e essa extensão aqui que eu vou instalar para dar ao meu vs code o suporte ali para o View extensão instalada a gente consegue ver aqui que o ícone do View já apareceu nos nossos arquivos né tanto aqui nesse app que é o ponto de entrada do meu projeto quanto aqui nos Components que a gente e tem por padrão então antes da gente rodar o projeto eu só

quero rapidinho aqui comentar com vocês o que que a gente tem dentro dessa pasta e que a gente acabou de criar então aqui a gente tem um ser transformado em o código que vai ser entendido pelo browser temos aqui o nosso package.js também que eu imagino que todo mundo já esteja acostumado aí de projetos com nodejs temos um jsconfig p Jason também que é um arquivo aqui Paraa configuração do JavaScript de novo não vou entrar em detalhes aqui sobre o que que esse arquivo faz eh essa parte padrão aqui que a gente já recebe já

vai ser o suficiente pra gente aqui nesse aulão Mas se vocês quiserem se aprofundar depois sintam-se à vontade temos também o index P HTML aqui que é o arquivo principal onde a gente vai injetar todo o conteúdo View que a gente fizer então todo conteúdo View que a gente vai desenvolver ele vai ser Injetado aqui dentro desse index P HTML temos também um ponto Git Ignore aqui para ignorar alguns arquivos e aí temos a pasta src com arquivo main.js com o arquivo app pview que é o ponto de entrada da nossa aplicação que é o

que a gente vai ter aqui com como o nosso arquivo principal temos alguns componentes aqui que já existem que depois eu vou mostrar eh em mais detalhes para vocês como que a gente cria esses componentes e temos o alguns Assets aqui que são alguns arquivos estáticos ali que a nossa aplicação vai acabar usando E também temos aqui essa pasta Public onde a gente tem o favicon da aplicação e a pasta P vscode ali para armazenar algumas configurações do vscode Então essa aqui é a estrutura que a gente tem dentro do nosso projeto e uma vez

que a gente tenha entendido essa estrutura a gente pode colocar o projeto para rodar para isso eu vou abrir aqui o meu terminal dentro do vs code mesmo e Eu vou instalar as dependências que eu ainda não instalei então npm e para fazer a instalação das dependências dependências instaladas beleza e aí eu posso rodar aqui o meu projeto com npm Run Dev então o projeto aqui tá rodando e a gente consegue ver que ele tá rodando aqui na porta 5173 então eu vou aqui no meu navegador abri essa porta 5173 e aqui a gente tem

a nossa aplicação de exemplo rodando Então essa Aqui é a aplicação que sempre vai ser mostrada e sempre vai est aqui sendo exibida quando a gente cria um novo projeto do zero essa aqui é a aplicação de teste então conseguimos aqui rodar o nosso projeto e agora que que a gente vai fazer agora a gente vai voltar aqui no vs code e eu vou matar o servidor aqui um pouquinho porque eu vou fazer algumas alterações aqui na estrutura do projeto então aqui dentro de src eu tenho dentro de components alguns Conteúdos aqui e eu vou

simplesmente deletar todos esses conteúdos aqui que são conteúdos que são usados para criar aquela aplicação de teste ali e depois eu vou vir aqui no meu app pview e eu vou apagar esses imports aqui em cima vou apagar todo o conteúdo aqui dentro desse template e vou apagar todo o conteúdo aqui dentro dessa tag Style Então vamos selecionar tudo aqui e apagar Beleza então meio que eu desmontei aqui o meu componente Principal que é o meu app. viw e quando a gente fala do View qualquer arquivo ponto viw que a gente criar vai ser um

componente Então esse App P viw aqui que é o nosso componente principal ele é um componente né pode soar meio redundante aí mas eu preciso que isso fique claro então qualquer coisa ponto View aqui que a gente criar é um componente e o que que é um componente do View componente vai ser um arquivo pon viw e ele pode ter três partes que são essas três tags Que estão aqui então um compon ele pode ter um script ele pode ter um JavaScript ele pode ter um template que é onde a gente vai colocar o HTML

né aqui vai ser o JavaScript aqui vai ser o HTML e ele pode ter uma tag Style também que é aonde a gente vai colocar o nosso CSS para os componentes do View o que que é obrigatório o obrigatório é a gente ter aqui o nosso template é a gente ter o HTML o JavaScript e o CSS são opcionais mas a gente precisa ter o HTML e o View Ele usa aqui pra gente separar o HTML do CSS do JavaScript essas tags aqui a tag script e a tag Style a gente já conhece lá do

HTML normal mas a tag template é novidade a tag template ela é uma tag específica do View que vai ser usada para fazer a definição do HTML de um componente Então o que eu colocar aqui dentro vai ser o código HTML desse meu componente E aí essa tag template Ela não é uma tag que vai ser de fato renderizada lá no nosso HTML final ela é Uma tag que tá aqui só para agrupar esse HTML que a gente vai colocar aqui dentro e aí a gente pode começar aqui criando o nosso próprio componente para poder

colocar esse componente aqui dentro e ver um componente que a gente criou sendo renderizado lá na nossa tela então aqui dentro da pasta components eu vou criar um novo arquivo eu vou chamar de primeiro componente pview e aqui eu vou criar o meu primeiro componente então o componente tem três partes tem o script Tem o template e tem o Style e a ordem não precisa ser exatamente essa tá eu posso botar o script no início eu posso botar ele no final posso botar o Style no início posso botar ele no final vai depender aí do

que que tu achar que faz mais sentido dentro da da tua aplicação para esse primeiro componente eu vou começar com a minha tag template então eu vou começar colocando o meu HTML e o que que eu quero colocar nesse meu primeiro componente eu vou colocar aqui Uma div e dentro dessa div eu vou colocar um H1 então um título que vai ser primeiro componente beleza isso aqui já é um componente do vi como que eu posso importar esse componente aqui dentro do meu aplicativo então bom primeiro eu vou precisar salvar aqui o meu componente E

aí aqui dentro do meu App eu vou dentro do meu script fazer a importação desse primeiro componente então aqui eu vou importar o meu primeiro Componente PR P barra components barra primiro componente E aí aqui no meu template eu vou usar o meu primeiro componente então para usar o componente aqui eu vou usar o mesmo nome que eu usei aqui na ort ação tá então esse aqui é o nome que eu preciso colocar dentro da minha tag template e eu até vou dar um enter aqui ou melhor um Tab para ficar com uma identação beleza

Esse é o primeiro componente ali o mais básico possível só Com HTML Então agora eu vou aqui novamente abrir o meu terminal e colocar o projeto para rodar com npm Run Dev projeto rodando vou aqui no meu navegador agora e aqui a gente consegue enxergar o nosso primeiro componente então o nosso primeiro componente ele é só um título aqui tá ele Eu Posso duplicar ele aqui algumas vezes então vou duplicar ele aqui né agora a gente vai ter quatro vezes o nosso primeiro Componente aparecendo tanto é que se eu voltar aqui tá aqui o primeiro

componente aparecendo quatro vezes no caso aqui ele tá com essa formatação devido a alguns CSS globais que a gente tem aqui dentro de assets então aqui dentro de assets a gente tem esse base CSS que eu vou simplesmente selecionar e e deixar vazio aqui e aí ele reclama Porque eu tô tentando importar e algo que é vazio então eu vou simplesmente excluir aqui esse primeiro Base.css e o main.css aqui eu vou deixar é a formatação é desse app aqui beleza e aqui ele tava reclamando só para deixar claro desse importe tá então tava tentando importar

um arquivo vazio ele tava reclamando Então a gente vai ficar com esse arquivo Main CSS aqui onde a gente vai ter csss globais que vão ser aplicados a toda a nossa aplicação a todos os nossos componentes e agora tudo que a gente tem é esse estilo aqui e da div com ID app Que é justamente aqui onde a gente vai ter o nosso componente principal então voltando aqui agora a gente perdeu aquela formatação bonitinha que a gente tinha ali e a gente tem o nosso primeiro componente beleza primeiro componente aqui eu vou querer adicionar um

estilo nesse primeiro componente para ele não ficar tão feio então aqui eu vou adicionar uma tag Style para adicionar um estilo aqui e aí na minha tag Style eu tenho a opção de passar aqui a Propriedade scoped essa propriedade scoper ela vai fazer com que esse estilo seja aplicável apenas a esse componente então se eu tiver o scoped eu vou aplicar o meu estilo apenas a esse componente se eu não tiver o meu estilo vai ser aplicado a minha aplicação inteira no caso eu vou deixar aqui o meu scoped e eu vou querer colocar uma

formatação aqui na minha div que vai ser um background color aqui de 0 e 7 28 Então vai ser um verde mais escurinho Vou querer colocar um pading aqui de 20 PI uma margem de 30 pixels e um border radius radius aqui de 5 pi E além disso eu vou querer fazer uma formatação aqui para quando eu tiver um Rover nessa div então div aqui dois pontos eu V querer que o background color seja o # 133 B 939 Então vai ser um verdinho um pouco mais claro e eu vou colocar aqui que o meu

H1 vai ter uma cor branca então color White e eu vou colocar uma margem borum aqui de 10 pixels beleza salvei aqui e agora vou fechar aqui esse terminal também só para ele não ficar ocupando espaço Mas ele tá tá rodando tá eu não matei o processo Ele só tá ocultado aqui da interface E aí voltando aqui na nossa interface a gente consegue ver o nosso Componente formatado vou fazer mais uma alteração aqui só para colocar um text Center aqui depois do meu border radius então aqui vai ter um text e align Center só pro

texto ficar Centralizado aqui ficar um pouquinho mais bonito então aqui a gente tem o nosso primeiro componente sendo reusado né porque essa é a ideia dos componentes eles serem reusáveis então aqui eu tenho o meu primeiro componente várias vezes e aqui com a formatação scoped ali que é Esse Rover que eu coloquei para eles beleza esse aqui é o nosso primeiro componente já tá funcionando já criamos o nosso primeiro componente e antes da gente ir pro nosso segundo componente eu quero fazer algumas formatações aqui com relação ao estilo do nosso app e as formatações que

eu quero fazer aqui são formatações globais então eu nem vou fazer elas dentro do app pview eu vou fazer elas direto aqui dentro do main.css então aqui antes do app eu vou Fazer uma configuração aqui é no bare da minha aplicação para deixar o bar com uma margem de zer pixels e eu vou querer colocar um background color aqui de black então nosso nosso fundo aqui vai ser preto da nossa aplicação e eu vou colocar a cor do texto aqui no bar para ser o RGB 224 217 217 Então vai ser um cins aqui e

por que que eu tô fazendo essa formatação dentro do bar e não dentro desse hashtag app aqui bom para isso a gente pode dar uma olhada aqui no nosso index HTML que é onde todo o nosso código View vai ser injetado e aqui a gente vai ver que a gente vai ter essa div com ID app e essa div aqui vai ser onde eu vou colocar toda a minha aplicação View de certa forma né não é exatamente isso mas aqui em questão de abstração dá pra gente Entender como sendo então aqui a gente vai substituir

isso pel por todo o nosso código View nosso código View vai ser inserido aqui dentro dessa div e o bar ele tá fora então pode ter algumas configurações no bar que vão afetar aqui a configuração dessa div por isso que eu tô com colocando a cor do texto e a cor do fundo diretamente aqui no bar para que elas sejam aplicadas a toda a minha aplicação e não fiquem aqui dentro e dessa div eventualmente ali com alguma Configuração do bar por fora então feito isso aqui essa configuração do meu bar eu também vou querer fazer

a configuração aqui de um header que eu vou criar paraa nossa aplicação que vai ter um fonte size de 2 em vai ter uma color aqui de White uma margem borom de 20 pixels um background color Green uma fonte weight de bold e um pading aqui de 10 pixels e também vou adicionar aqui um text Aline é Center E aí eu vou criar esse meu header aqui dentro do meu App então aqui antes do meu primeiro componente eu vou colocar aqui o meu header e no meu header eu vou colocar um título bem tranquilo aqui

que vai ser View E aí eu vou apagar aqui esses outros componentes vou deixar apenas o meu primeiro componente vamos ver como Que a nossa aplicação está aqui então eu quero aqui que ele ocupe a tela inteira vamos dar uma olhada aqui no CSS para ver o que que pode tar usando isso assim aqui no app eu esqueci de tirar essa parte do tamanho máximo e também esse pading aqui eu vou tirar essa margem também porque eu não vou querer que ela exista então salvei aqui e voltando agora a gente tem o aplicativo no tipo

de visualização que eu gostaria para esse aulão que é um Header aqui em cima com o nome da tecnologia e aqui o nosso primeiro componente Beleza agora que a gente já fez o nosso primeiro componente a gente pode fazer o nosso segundo componente que vai ser um componente que vai ter dados então eu vou criar aqui dentro de components um novo arquivo que eu vou chamar de comados pview e nesse arquivo a gente vai criar o nosso próximo componente então o componente pode ter três partes como a gente já viu pode ter Aqui o html

no template na verdade deve ter essa parte aqui mas também pode ter um estilo aqui na tag Style e pode ter um script aqui é d dentro da tag script então o que que eu quero fazer nesse exemplo nesse exemplo eu vou querer ter aqui uma div e nessa div eu vou colocar um H1 para colocar o nome do nosso componente que vai ser componente com dados E aí depois aqui desse H1 eu vou querer colocar um parágrafo para exibir alguns dados então eu vou querer exibir Aqui o nome de um produto Então vamos supor

que o nome do meu produto aqui vai ser caneta e eu vou querer exibir também o código desse produto Então vamos supor que o código aqui vai ser # 1223 Então esse aqui vai ser o tipo de apresentação que eu quero ter eu quero ter o nome de um produto E eu quero ter o código desse produto e aí para ter uma estilização aqui eu vou criar dentro do meu Style aqui uma classe para fazer a estilização disso então vou criar aqui a Estilização da minha div onde eu vou colocar um text align Center vou

colocar uma border de dois pixels sólida e que vai ter como cor aqui o RGB 10 69 E4 vou colocar também um background color de 050 d04 vou botar um border r e uma margem aqui de 30 pi em todas as Direções e um pading de 10 pixs em todas as direções beleza vamos só importar esse arquivo aqui pra gente ver como que ele tá aparecendo lá no nosso app então para importar um componente que a gente criou a gente vai importar ele aqui em cima então importe com dados PR pon barra components barra com

dados e aqui eu vou adicionar ele mas eu vou adicionar ele em cima do meu primeiro componente Então os últimos Exemplos eu sempre vou adicionar aqui como sendo o item logo abaixo do meu header Então vou adicionar aqui com dados e aí a gente pode ver o resultado aqui então aqui tá o nosso componente com dados então aqui a gente já tem uma ideia dessa apresentação né o nome e o código aqui 1 2 3 só que esses dados aqui são Dados mocados que a gente colocou não são Dados que estão de fato no nosso

componente e como que a gente poderia colocar os dados no nosso Componente e fazer esses dados aparecerem aqui Existem algumas formas diferentes de fazer isso e eu vou tentar mostrar elas aqui para vocês de uma forma que não seja muito demorada então quando a gente fala em colocar JavaScript dentro do nosso componente View a gente a tem duas opções diferentes a gente tem dois jeitos diferentes de fazer isso a gente tem a options api e a gente tem a composition Api são duas formas que a gente tem de escrever aqui o nosso JavaScript dentro de

um componente View e são duas formas válidas são duas formas que estão em uso ainda e são duas formas que são equivalentes em termos de poder aí de criação de coisas né elas duas têm ali uma equivalência não tem uma que permite mais coisas do que a outra elas simplesmente são implementadas ali de uma forma um pouquinho diferente então é importante a gente saber que a gente tem Essas duas opções e que as duas funcionam tá Inclusive a gente pode ter numa mesma aplicação componentes que utilizam uma e componentes que utilizam outra vai depender aí

e do que que o programador da pessoa que tá programando vai querer fazer então eu vou começar aqui mostrando para vocês a forma com a a options api Então como que a gente poderia criar dados aqui com a options api com a options api a gente precisaria aqui exportar por padrão um objeto e Nesse objeto a gente teria uma função data e essa função iria retornar um objeto então aqui eh na verdade não é aqui os parênteses né os parênteses seriam aqui Então vou definir aqui uma função data né a chave data e esse nome

aqui ele é importante ele precisa ser esse nome né precisa ser data precisa ser dados e aqui eu vou ter uma função e aqui essa função pode ser uma errow function ou pode ser uma function assim né não tem Problema pode definir das duas formas e essa função vai retornar alguma coisa e eu acabei de perceber aqui que eu cometi um erro que foi definir essa data como uma A function tá ela não pode ser definida com uma como uma Arrow function eu acabei definindo aqui porque normalmente é a forma que eu faço mas dentro

do View isso não vai funcionar porque dentro do View a gente tem um negócio aqui de contexto do objeto então Arrow functions aqui vão ser Problemáticas então quando a gente tiver usando a options api a gente sempre vai usar as function expressions então vou fazer essa correção aqui e essa coisa que a função vai retornar vai ser um objeto onde eu vou colocar os dados que eu quero que estejam disponíveis na minha aplicação Então deixa eu colapsar aqui o meu estilo para melhorar a nossa visualização eu quero ter aqui na minha aplicação um nome de

produto então eu poderia ter aqui o nome de produto Então Vou colocar o nome do meu produto para ser caderno e eu quero também o código de um produto então poderia colocar aqui o código produto para ser um outro valor vou colocar # 321 então aqui agora quando eu faço isso já tenho disponível dentro do meu componente esse valor nome produto e esse valor código produto esses valores já estão disponíveis basta usá-los e para usá-los aqui eu vou usar a sintaxe de Double mustache ou de Bigode duplo aqui em uma tradução livre que é uma

sintaxe onde a gente vai usar duas Chaves então dois pares de Chaves Eu tenho dois abre Chaves e dois fecha Chaves e aqui no meio desses dois abre Chaves e desses dois fecha Chaves eu vou colocar o o nome da variável que eu quero usar Então quais variáveis que eu tenho aqui eu tenho justamente as variáveis que são as chaves do meu produto Então eu tenho nome produto e código produto então eu posso usar aqui Nome produto e aqui eu posso usar o código produto beleza salvei aqui a gente pode voltar no navegador e aqui

a gente consegue ver o resultado né o meu nome produto e o meu código produto Inclusive eu acho que esse essa fonte Aqui tá muito muito pequena então deixa aqui no meu script eu aumentar um pouquinho essa fonte Na verdade eu nem vou aumentar ela aqui dentro da div eu vou aumentar ela dentro do parágrafo e eu vou colocar aqui que a Fonte size vai ser 1.2 RM vamos ver se assim fica um pouquinho melhor é melhorou mas só para ter certeza que vai ficar bom aí a visualização de vocês eu vou dar um zoom

aqui acho que 125 150 tá bom aí pra gente ter uma visualização aqui eh em um zoom bom do texto que a gente vai ter então aqui eu tenho o nome do meu produto e eh O código dele beleza nessa aqui é a nossa primeira forma então de fazer essas Variáveis serem utilizadas que é utilizando a options api mas a gente tem a nossa segunda opção aqui que é usando a composition Api para usar a composition api a gente também vai poder exportar por padrão aqui um objeto e dentro desse objeto a gente vai ter

uma função setup então eu vou ter aqui a minha chave setup que vai receber uma função e nessa função setup eu vou definir as minhas variáveis então eu posso definir aqui eh que eu vou ter a Variável nome produto Então vou criar aqui uma constante nome produto e essa aqui vai ser um pouquinho diferente né eu não vou colocar caderno eu vou colocar lá e eu vou criar aqui uma outra variável que vai ser o código produto que eu vou colocar aqui como sendo # 789 então agora depois de definir essas variáveis eu vou precisar

Retornar aqui nessa minha função um objeto também colocando o nome do produto e o código do produto beleza salvei aqui se a gente voltar no navegador agora a gente vai ver atualização aqui n nome lápis e o código aqui beleza para esse exemplo específico a gente nota que a gente não tem muita diferença da parte da api com as options e da parte da api com o composition a estrutura aqui é mais ou menos a mesma Só que essa forma aqui de utilizar a Composition api ela não é a forma mais comum ela é uma

forma que existe a gente pode definir as nossas variáveis e os nossos dados aqui os a composition api dessa forma mas essa aqui não é a forma mais comum Então qual que é a forma mais comum aí que a gente encontra de utilizar a composition api é utilizando a tag script de uma forma um pouquinho diferente então até vou comentar essa tag script aqui para ficar de referência e aqui eu vou definir uma nova tag Script e essa tag script ela vai receber aqui a propriedade setup mais ou menos como essa tag Style recebe o

scope aqui o script pode receber essa propriedade setup E aí quando a gente passa o setup aqui é como se toda essa nossa tag script fosse essa função setup então a gente pode colocar diretamente dentro da nossa tag Script o que a gente tem dentro da função setup então aqui eu posso copiar esses dados que eu tinha dentro da minha função setup vou colocar Eles dentro do meu script setup aqui vou descomentar todo esse resto e quando eu uso o script setup eu não preciso do return Então dessa forma aqui eu poderia passar esses dados

dessa forma e ao invés de um lápis aqui eu vou colocar um apontador e o código do apontador vai ser 987 então salvando aqui a gente pode voltar no navegador e agora a gente tem o nosso apontador Então a gente tem essas três formas aqui de trabalhar com o View e com o JavaScript no View principalmente a gente tem a options AP que é a forma até mais antiga que a gente já usava desde o vi2 e a gente tem a composition api que foi uma introdução do vi3 e que a gente pode utilizar dessa

forma aqui colocando um Export default com a função setup Ou a gente pode usar aqui diretamente no Script setup beleza Vamos então pro nosso próximo componente agora já que a gente fez esse componente aqui que trabalha com dados agora a Gente vai trabalhar com dados re iOS o que que são dados reativos são Dados que podem ser alterados aqui dentro da nossa aplicação View nesse exemplo a gente criou dados aqui a gente tem dados dentro do nosso JavaScript e a gente tá usando esses dados aqui no nosso HTML dentro do componente só que a gente

não pode fazer nada com esses dados esses dados ali são constantes que vão ficar ali e que não podem ser alterados eles poderiam muito bem tá aqui e escritos Diretamente no nosso código porque é dessa forma que eles acabam não funcionando muito bem como eh variáveis realmente ali dentro do nosso código Então como que a gente pode criar dados criar variáveis dentro do nosso script que vão ser alteradas é o que a gente vai ver no nosso próximo exemplo então eu vou criar aqui o nosso novo componente que vai ser o componente eh com dados

reativos primitivos pon viw e o que que São Dados primitivos tá porque a gente tem duas coisas diferentes aqui quando a gente fala trabalhar com dados e atualizar esses dados dentro do componente a gente tem a reatividade de valores primitivos então de números de Strings de valores banos e a gente tem a reatividade de valores compostos ali como por exemplo objetos que a gente vai ver logo em seguida por enquanto nesse exemplo a gente vai focar em valores eh primitivos então Strings números valores Booleanos valores nesse sentido aí beleza vou começar aqui colocando o meu

template nesse nosso novo documento aqui e aqui eu vou colocar uma div Se eu conseguir digitar divva forma correta vou colocar o título aqui desse componente que vai ser componente com dados reativos e aqui nesse componente eu vou querer colocar um parágrafo onde eu vou colocar o nome de uma pessoa então eu vou colocar aqui esse Nome e vou interpolar aqui uma variável nome que a gente vai definir e vou querer colocar aqui um Pipe e vou colocar a idade dessa pessoa também em uma variável idade que eu vou definir Então já vou aqui fazer

o meu script para esse caso específico e aqui eu vou est usando a função setup por conveniência mesmo porque o script setup acaba sendo o que a gente escreve menos código e aqui eu vou definir as minhas variáveis nome e idade então aqui eu vou Definir por enquanto o meu nome como sendo Ana e Vou definir também a minha idade como sendo 27 dessa forma aqui só pra gente poder visualizar o nosso componente lá no nosso app e ver como é que ele tá e acompanhar as alterações aqui que vão acontecer nesse componente então aqui

dentro de app eu vou importar esse componente que a gente acabou de criar Então vou importar aqui com dados reativos primitivos Prom ponto barra components barra com Dados reativos primitivos vou adicionar aqui nosso componente e agora olhando aqui no navegador a gente já tem esse componente só que ele tá feio aqui porque não tem nenhuma formatação Então o que eu vou fazer para fazer a formatação desse componente dos próximos é que eu vou copiar aqui o estilo desse componente com dados então vou simplesmente copiar ele aqui e vou adicionar ele aqui no nosso Main.css mas

ao invés de deixar ele aqui como sendo uma formatação de div eu vou criar uma classe que eu vou chamar de componente Então o que tiver a classe componente vai ter essa formatação e eu vou adicionar essa classe aqui embaixo também e vou aplicar essa classe dentro do nosso componente com dados primitivos então aqui vai ter a classe componente isso Vai facilitar a estilização dos próximos então agora sim tá aqui o nosso componente com dados reativos onde eu Tenho o nome e a idade Beleza agora o que que eu quero fazer com esse nome e

com essa idade eu vou querer alterar eles de alguma forma e para fazer a alteração desses dados eu vou precisar de uma função por exemplo então eu vou querer fazer uma função para aumentar a idade e uma função para mudar o nome e para chamar Essas funções eu vou precisar chamar elas a partir da interface então aqui na interface eu já vou criar um botão aqui com o texto Fazer aniversário e eu vou criar um outro botão aqui com o texto eh mudar nome então eu vou ter aqui é dois botões que vão executar duas

funções diferentes para alterar esses campos aqui que a gente definiu beleza só que aí eu vou precisar definir Essas funções que eu quero executar então aqui eu vou definir a minha função fazer Aniversário e essa função ela vai incrementar o valor da minha idade Então ela faria algo como idade mais igual 1 e eu teria a minha segunda função aqui que seria a função mudar nome e essa função mudaria aqui o nome para eh Ana Maria beleza só que isso aqui não vai funcionar por quê quando eu tô trabalhando com viil Eu Preciso Dizer para

ele que uma determinada variável é uma variável que vai poder mudar dentro aqui do contexto do meu componente e eu Não tô fazendo isso então mesmo que eu chamasse Essas funções ali em cima e executasse essas alterações eu não ia ter nenhuma variável porque eu viu ele não deu permissão de certa forma para essas variáveis mudarem eu preciso dizer pro Vi olha vi essa variável aqui ela tem permissão para mudar de valor ela pode mudar de valor se eu não explicitar isso ele vai entender que a variável não pode mudar de valor e como que

eu digo para ele essa variável pode mudar de Valor bom eu vou importar aqui dentro do meu script setup uma função que vai servir pra gente fazer isso pra gente dizer pro viw olha essa variável aqui ela pode mudar de valor então eu vou importar aqui essa função que a função ref e eu vou importar ela do View E aí eu vou envolver aqui esses valores com essa função f então agora o vi sabe nome pode mudar de valor idade pode mudar de valor e aqui uma coisa importante tá É que eu tô usando a

Constante porque esse ref aqui ele vai retornar pra gente um ref né um objeto aqui do tipo ref então eu posso usar constante aqui porque essa constante vai se referir a esse objeto e não ao valor em si tá então aqui agora eu já falei pro viw Olha tanto o nome quanto idade podem mudar de valor Beleza o viw sabe isso como que eu altero o valor dessas variáveis então eu altero dessa forma aqui não porque como a gente acabou de Ver o nome e a idade ele eles vão receber um objeto do tipo ref

aqui se eu passar o mouse por cima a gente consegue ver que o resultado aqui é um objeto do tipo ref e para alterar o conteúdo de um objeto do tipo ref eu vou usar a propriedade velho então eu vou alterar o idade ponto velho para conseguir alterar a idade e o nome ponto velho para conseguir alterar o nome então essas aqui são as duas funções beleza funções implementadas como que a gente chama Essas funções aqui agora para chamar Essas funções a gente vai lá no nosso botão e a gente vai dizer para o botão

que quando eu tiver um clique no botão quando ele ouvir um evento de clique que foi executado nesse botão eu quero que ele execute a função então eu vou usar aqui a diretiva v1 dois pontos clique e aqui eu vou colocar o nome da minha função Então essa aqui vai ser a função fazer aniversário então o que que eu tô Fazendo aqui quando eu clicar nesse botão eu vou executar essa função fazer aniversário e aí aqui a função eu posso passar ela é dessa forma então eu posso colocar os parênteses aqui se eu for passar

parâmetros para Essas funções eu vou precisar dos parênteses se eu não for passar parâmetros eu posso omitir no caso eu vou deixar com porque eventualmente se a gente tiver parâmetros a gente vai utilizar é os parênteses mesmo mas se tu quiser deixar Senha aí também é uma opção já que essa função não recebe nenhum parâmetro então quando eu clicar nesse botão que vai ter o texto fazer aniversário eu vou Executar a função fazer aniversário e quando eu clicar nesse botão mudar nome então eu vou querer executar função mudar nome vou deixar aqui um sem um

com pra gente ter essas referências aí então quando eu clicar nesse eu vou fazer aniversário nesse eu vou mudar nome e aí Aqui a gente tá usando essa diretiva V um tá que é para indicar que eu vou executar alguma coisa quando acontecer um evento mas eu também posso substituir essa diretiva aqui por um aroba tá então v1 do P clique é a mesma coisa que @click tá o v1 é a mesma coisa que esse ar aqui normalmente a gente acaba usando é o arr por questão de escrever menos código então vou salvar aqui e

se a gente acessar aqui no navegador o nosso projeto a gente vai ver aqui que eu Posso clicar nesse botão de fazer aniversário e a idade vai mudando e se eu clicar nesse botão mudar nome o nome aqui também é alterado Beleza agora eu vou fazer uma mudança aqui no nosso CSS de novo para adicionar uma formatação ali pros nossos botões não ficarem e feios então vou fazer a formatação aqui no main.css porque eu quero que seja um CSS Global mesmo então o background color vai ser o RGB eh 10 694 aqui a cor Vai

ser branco vou colocar um pading aqui de 10 pixels e 20 pixels vou colocar a fonte weight para ser bold e vou colocar uma margem de 5 pixels e 10 pixels e vou adicionar aqui também um Rover então vou ter o buton aqui aqui Rover e no Rover vou querer simplesmente mudar o background color aqui para o RGB 5 102 28 beleza salvei aqui vamos dar uma olhada como que ficaram os botões Ficaram melhorzinhos mas ele ainda tá com uma borda aqui que eu não gostei muito então eu vou tirar aqui essa borda dele beleza

ficou legal aqui os nossos botões agora mas eu vou adicionar ainda mais uma border radius aqui para ele ficar e um pouquinho mais arredondado vou colocar C pixels Beleza agora estão bonitos os nossos botões Então posso aqui fazer aniversário ou mudar o nome né o mudar nome ele não vai funcionar nas outras vezes porque ele vai setar o Nome para Ana Maria se o nome já é Ana Maria ele até vai fazer essa alteração só que a gente não vai ver e a alteração acontecendo Beleza então esses aqui são os dados reativos e eu até

Vou botar aqui no nome que são os dados reativos primitivos primitivos porque agora a gente vai trabalhar com os dados reativos não primitivos e para trabalhar com os dados Reativos não primitivos eu vou querer duplicar aqui esse exemplo que a gente acabou de fazer e a cópia aqui eu vou renomear para dados reativos não primitivos Então a gente vai reaproveitar aqui o nosso exemplo com a diferença de que agora ao invés de ter duas variáveis eu vou querer ter um um único objeto aqui com o nome e com a idade de uma pessoa então para

fazer isso eu vou importar uma outra função do View que não é mais a ref é a Reactive e aqui eu vou criar a minha constante pessoa então vou criar aqui a constante é pessoa na verdade eu nem precisaria desse Tab aqui que ele acabou colocando para mim então vou tirar aqui esse Tab Então vou então vou tirar aqui esse Tab porque a gente não precisa dele e aqui a minha pessoa ela vai receber o resultado desse reactive passando o nome aqui e o nome vai ser Ana e a idade aqui que vai ser 27

então agora os meus dados estão dentro desse objeto pessoa e aí o que que vai mudar aqui vai mudar aqui agora eu não vou ter mais essas variáveis e a forma como eu vou acessar os meus componentes também vai mudar então agora ao invés de acessar idade pon velho eu vou acessar pessoa ponto idade então aqui ele já entende que o pessoa é o meu objeto então cada uma dessas propriedades já é uma propriedade do meu objeto é um pouco Diferente de quando a gente usava o ref porque o ref precisava pegar um valor primitivo

e transformar esse valor primitivo em um objeto aqui a gente já tá trabalhando com o objeto então aqui no fazer aniversário Eu vou acessar o pessoa ponto idade e no mudar nome eu vou acessar o pessoa pon n e é isso aqui a alteração que eu vou fazer tá então para trabalhar com objetos aqui eu vou usar essa propriedade reactive vai mudar a forma como eu acesso essas Informações ali com relação ao valor primitivo né que a gente acessava com o velho aqui a gente vai acessar direto pelo nome da propriedade e aqui em cima

não muda nada só o que eu vou mudar Vai ser usar o atalho aqui para um clique no fazer aniversário então vou salvar aqui colocar no meu título componente com dados reativos não primitivos e vou importar esse componente lá dentro do nosso app então aqui eu vou importar O Componente com dados reativos não primitivos vamos ver aqui se ele importou não ele acabou eh colocando o anterior Mas não tem problema eu edito aqui e agora eu vou colocar ele aqui dentro eh da nossa aplicação então componente com dados reativos não primitivos Vou salvar e aqui

na nossa aplicação a gente já tem o nosso componente o nome e a idade acabaram não aparecendo aqui porque eu deveria ter Feito uma alteração importante aqui nesse acesso tá então eu tenho a pessoa tem a variável pessoa e o nome ele tá dentro da variável pessoa e a idade tá dentro da variável pessoa também né Então tinha de fato uma alteração aqui para ser feita nesse exemplo que eu acabei e não prestando atenção ali então agora sim vou salvar aqui o nosso código né porque senão a gente não vai ter essa alteração sendo aplicada

tenho aqui a Ana com a sua idade então vou fazer o Aniversário aqui a gente vê a idade da Ana sendo atualizada E se eu clicar em mudar nome o nome também é modificado beleza esse aqui é o nosso exemplo de utilização de dados reativos não primitivos E aí só por curiosidade aqui eu vou fazer esse exemplo também ao invés de usar a função de setup eu vou usar aqui a options api também aqui em uma tag script só pra gente ver a diferença e a gente ter isso de comparação então para usar a options

API Eu vou exportar aqui por padrão um objeto onde eu vou ter a minha propriedade data aqui que vai ser uma função e essa função aqui vai e retornar um objeto e nesse objeto eu vou colocar as variáveis que eu tenho no caso eu tenho uma única variável aqui que é a variável pessoa e essa variável pessoa tem duas propriedades o nome que é Ana e a idade que é 27 e depois eu tenho duas funções e como que eu vou definir Essas funções eu vou definir aqui e no mesmo nível de data então aqui

logo abaixo do meu data no mesmo nível aqui do meu data eu vou criar uma nova chave que eu vou chamar de methods que também vai ser aqui um objeto e dentro desse objeto eu vou definir as minhas funções então tenho duas funções para definir a função fazer aniversal Então vou definir ela aqui e aqui quando a gente tá usando e esses métodos a gente não pode definir os métodos como er functions tá a gente Vai definir eles sempre como funções ali usando a palavra-chave function e aqui dentro do fazer aniversário eu vou simplesmente acessar

essa pessoa nessa variável pessoa que eu tenho aqui e alterar a idade dela e como que eu acesso essa pessoa eu vou acessar ela a partir do dis então dis ppessoa dade mais igual 1 por que que eu tô usando dis aqui porque quando a gente utiliza options api a gente tem uma sintaxe muito de objeto Então eu tenho Aqui que dentro do meu objeto eu vou ter essas propriedades Então dentro do dis entre outras coisas eu vou conseguir o acesso direto a essas variáveis aqui que foram que forem retornadas dentro desse objeto então aqui

eu consigo acessar e a pessoa e a minha segunda função aqui que vai ser a função mudar nome eu vou definir é aqui também como uma função e aqui eu vou alterar o dis ppessoa pon nome onde o nome agora vai ser Ana Maria então salvando aqui a gente pode voltar No navegador e a gente vai ver que a gente tem o mesmo comportamento então aqui idade sendo alterada e o nome Beleza então esse aqui foi a finalização do nosso exemplo e aqui a gente pode comparar mais ou menos né como que é a utilização

usando a options api e usando a composition api aqui com o script setup a gente consegue ver aqui que a gente acaba escrevendo um pouco menos de código com script setup Mas a gente não precisa ter esse trabalho aqui de marcar Essa propriedade como sendo reativa dentro da options api porque a options api aqui tudo que tá dentro desse return aqui tudo que tá dentro desse objeto o View já sabe que são coisas que podem mudar então aqui a gente não tem essa preocupação com a reatividade quando a gente tá usando a options api da

mesma forma que a gente tem que ter quando a gente tá usando a compositions api beleza Vamos agora pro nosso próximo exemplo então onde a gente vai falar Sobre data binding Então já vou criar aqui meu componente databinding pview vou criar aqui o meu template nesse template eu já vou colocar uma div com o ID componente e aqui dentro dessa div eu vou colocar um input E aí aqui eu já vou colocar o meu script também e eu vou colocar o meu script como sendo setup porque é a forma aqui que eu vou usar predominantemente

ao longo do curso Então aqui no meu script setup eu vou definir uma variável Reativa que eu vou chamar de valor então vou importar aqui o meu ref porque essa vai ser uma variável primitiva então ortar o ref aqui de View e eu vou definir aqui o valor que vai ser o ref e eu vou passar aqui um texto que vai ser View View é muito legal e o que eu quero fazer eu quero colocar esse valor dentro do meu input então eu quero inicializar o meu input com esse valor vi é muito legal e

como que eu posso fazer isso bom eu vou precisar aqui Definir que esse meu input vai ser do tipo Text e aí o meu input ele tem a propriedade vue dele né a propriedade valor e essa propriedade vue serve para setar o valor que o meu input vai ter então se eu quisesse essa frase viu é muito legal dentro aqui do meu input eu poderia escrever aqui viu é muito legal mas e se eu mudasse esse valor aqui então vamos supor que eu colocasse um ponto de exclamação aqui aí o valor do meu input já

não estaria é refletindo o Valor aqui que eu defini dentro dessa constante valor né dentro desse valor aqui que é justamente esse texto Então como que eu poderia fazer com que esse valor aqui que eu defini fosse colocado dentro dessa propriedade aqui bom para isso Eu precisaria utilizar a diretiva V bind que é parecida com com o v1 que a gente viu na aula anterior Só que essa diretiva V bind ela vai fazer com que o valor que eu vou passar aqui então vou passar E o valor seja entendido como uma variável então quando eu

faço isso aqui V bind value igual valor ele tá entendendo olha eu quero colocar na propriedade vue do meu input o que tá dentro da variável valor e é isso que ele faz ele vai olhar o que que tá dentro de valor vai ver que é esse texto aqui e é isso que ele vai colocar no input a gente pode até já importar esse componente lá no nosso App pra gente ver ele em Ação então aqui dentro do meu App Eu vou importar o meu componente que eu chamei de data binding PR P barra components

barra databinding e aqui eu vou importar ele ou melhor vou colocar ele para aparecer na tela e aqui tá o nosso componente dat binding parece que ele não pegou a classe provavelmente eu digitei a classe com um valor errado aqui né Componente vamos salvar Agora sim ele não pegou aqui o CSS provavelmente e eu escrevi aqui componente errado e eu coloquei ID ao invés de classe né nunca ia dar certo dessa forma agora sim tá aqui o nosso componente e a gente consegue ver aqui que ele tá com a frase né viu é muito legal

que é justamente a frase que eu tinha colocado aqui na minha variável vou colocar um H1 aqui também pra gente colocar o título nesse componente que vai ser o componente com Data binding e o que que é o data binding o data binding é isso aqui é eu fazer esse binding essa junção essa Associação de pegar o valor de uma variável e fazer com que esse valor ele fique eh acorrentado de certa forma a essa propriedade então o valor da propriedade aqui de certa forma tá acorrentado né acho que não é exatamente essa tradução de

binding mas ele tá acorrentado aqui ao conteúdo dessa minha variável E aproveitando aqui que a gente Fez uma alteração dentro desse componente eu vou querer fazer mais uma alteração lá dentro do meu arquivo CSS pra gente poder fazer uma formatação aqui no input pro input ficar um pouquinho melhor visualmente então no meu input eu vou colocar um pading aqui de 5 pixels e 10 pixels vou colocar uma border aqui de um pixel sólida e com essa cor aqui vou colocar também um border radius de 5 pixels e eu tô colocando Essas informações aqui no main.css

porque a gente vai ter outros inputs na aplicação e eu já quero é que todos tenham o mes M CSS vou colocar também aqui um fonte size de 24 pixels e vou colocar uma margem aqui de 0 pixels 5 pixels 10 pixels e zero pixels novamente vamos salvar aqui vamos ver se o input ficou um pouquinho mais legal ficou e e parece que ele não pegou as alterações que eu tinha feito porque provavelmente eu não Salvei o componente e aqui de fato componente é não tinha sido salvo agora a gente tem o nosso título e

aqui o View é muito legal beleza então a gente tem aqui e nessa implementação que a gente fez o que a gente chama de One Way databinding o que que isso significa eu tô pegando o conteúdo de uma variável que eu tenho no meu código e eu tô jogando ele pra interface eu tô então eu tô fazendo One Way né uma setinha unidirecional eu tô tirando o conteúdo Do meu JavaScript e eu tô colocando ele no meu HT ml Esse é o oneway databind oneway databinding Então eu tenho uma setinha aqui unidirecional que tá saindo

do meu JavaScript e tá indo pro meu HTML esse oneway databinding ele também poderia ser o contrário ele poderia ser um valor que tá saindo da minha interface e tá vindo para o meu JavaScript só que normalmente a gente acaba utilizando não o One Way databinding que é esse onde a gente só Tem uma setinha né o dado indo de um lugar para outro mas o twoa data binding que é onde a gente tem duas setinhas então no oneway data binding eu só pego o valor da minha variável e jogo nesse input e o two

databinding eu vou pegar o valor da variável e eu vou jogar no meu input e eu vou pegar as alterações do meu input e eu vou atualizar essa variável então o dado ele de certa forma vai mas ele também volta ele vai pra interface mas Ele volta aqui pro meu JavaScript sendo e atualizado e como que eu implemento esse twoa databinding eu vou até comentar aqui e essa linha e vou duplicar pra gente ter essa aqui de referência Então aquela ali é o oneway databinding e no Two databinding a gente vai manter aqui a mesma

lógica que a gente tinha do V binding vou até deixar aqui na mesma linha mas a gente vai adicionar mais uma diretiva aqui que é a diretiva v1 e aqui a gente vai colocar Dois pontos e vai colocar o tipo de evento que a gente espera que aconteça então o evento que a gente vai esperar aqui vai ser um evento de input e quando acontecer o input o que que eu quero que aconteça eu vou até definir minha função diretamente aqui eu vou querer pegar o evento e vou querer atualizar o valor então o meu

valor vai receber aqui o meu i p target PV e uma coisa importante é quando a gente tá trabalhando aqui com uma Propriedade reativa dentro do meu script eu vou usar a propriedade velho tá Eu vou acessar aqui valor ponto velho mas quando eu Trago essa propriedade reativa para dentro do meu HTML eu não preciso usar o velho tá eu posso usar aqui só o valor então o que que eu vou fazer aqui eu vou pegar esse valor dessa variável vou jogar pro meu input e quando eu tiver uma um input aqui quando eu digitar

alguma letra eu vou atualizar o valor dessa minha variável só pra gente Ter certeza que isso tá acontecendo eu vou aqui colocar um parágrafo e aqui eu vou interpolar o meu valor então aqui a gente vai ver e esse valor sendo atualizado para ver se de fato ele vai ser atualizado com o que a gente tá digitando aqui dentro do nosso input então voltando aqui a gente pode digitar alguma coisa então viu é muito legal mesmo e a gente vê que de fato aqui em cima a gente tem é essa variável sendo atualizada Então tá

funcionando aqui o Nosso TW databinding Então essa aqui é uma forma que a gente tem de fazer esse two databinding e aqui a gente poderia também fazer isso usando os atalhos tá então o atalho do V bind aqui ele é o dois pontos então se eu colocar V bind velho ou colocar e dois pontos velho vai ser a mesma coisa e aqui no v1 a gente já viu que a gente pode utilizar E o arroba ali em outro exemplo Inclusive eu acho que eu vou deixar aqui e esses dois exemplos aqui aqui de referência um

com O atalho e outro sem o atalho Então vou comentar aqui pra gente ficar com esse último exemplo aqui beleza vimos como fazer esse processo de fazer o nosso dado ele ir para a interface e voltar pro nosso JavaScript né Lembrando que isso aqui é JavaScript que a gente definiu Só que essa forma aqui de fazer o t databinding ela não é a forma mais otimizada que a gente tem dentro do View em outros frameworks e em outras tecnologias essa aqui pode até ser a Melhor forma mas dentro do View a gente tem uma outra

eh opção aqui que é utilizar ao invés do V binding e utilizar o v1 é usar a diretiva V Model E aí quando eu uso V Model eu não preciso aqui do velho e eu não preciso aqui desse v1 Então a gente tem a diretiva V Model aqui que a gente pode passar pros nossos inputs e essa diretiva V Model ela faz exatamente a mesma coisa que a gente fez aqui em cima Então esse V Model aqui ele Tem o mesmo comportamento de fazer o binding aqui dessa variável e de fazer o o input aqui

posso até comentar esse input aqui salvar que a gente vai ver que a gente tem exatamente o mesmo resultado aqui deixa eu só atualizar a página aqui porque ele deu um bugzinho mas aqui temos a nossa frase e se eu seguir digitando aqui a gente vê que eu tenho de fato a atualiza então quando a gente tá trabalhando com inputs a forma mais normal que a gente acaba utilizando Dentro do View é essa forma aqui com o v Model embora a gente possa utilizar aqui essa outra forma fazendo esses Passos manualmente então é possível Mas

se a gente tem essa opção aqui que é mais simples normalmente a gente acaba utilizando essa opção justamente por ser mais simples beleza vamos para nosso próximo exemplo agora que vai ser um exemplo aqui de componente com props Então a gente vai ver como que a gente pode passar passar propriedades para um Componente e as propriedades aqui são valores que a gente vai passar para esse componente na hora que a gente tá criando ele então através dessas propriedades eu posso fazer o meu componente ter comportamentos diferentes ali então eu vou criar o componente com props

aqui e aqui eu vou definir o template desse meu componente nesse componente eu vou ter uma div com a componente aqui e aqui eu vou colocar um título Dizendo que esse aqui vai ser o componente com props e vou colocar aqui um parágrafo para exibir Um item e o preço desse item então o item aqui eu vou obter a partir da interpolação Ali vai ser uma variável que eu vou ter definida dentro do meu JavaScript e e o preço aqui eu vou colocar entre parênteses também aqui com o Double mustache Beleza depois disso eu vou

definir aqui o meu script Então tá aqui A minha tag script e nesse caso eu vou usar aqui o script setup também então agora eu quero colocar dentro desse meu componente Um item e um preço só que eu não quero definir esse item e esse preço diretamente aqui dentro do meu script Eu quero que o meu componente receba esse item e esse preço e isso vai fazer meu componente ser mais dinâmico porque eu posso passar para esse componente as informações que eu quero que ele exiba então eu quero aqui dentro desse Componente obter o item

e o preço que eu vou receber de fora que eu vou receber do componente que chama esse componente então aqui no meu setup eu vou precisar definir as propriedades que esse meu componente vai receber para isso eu vou precisar importar aqui a função define props que eu vou importar do View E aí eu vou chamar essa função essa função ela serve pra gente definir as propriedades que o nosso componente vai receber então ela vai servir pra gente Definir o que que o componente pai pode passar para esse componente filho no caso eu vou ter aqui

o item que vai ser uma string e o preço que vai ser um Number beleza com isso eu já defini o meu componente o meu componente já tem essas propriedades e eu já posso acessar essas propriedades quando eu uso esse define props aqui eu tô definindo o item e o preço e aí eu posso usar o item e o preço aqui da mesma forma como se eles fossem e Valores que estão aqui dentro Então então se eu tivesse aqui um const item igual a alguma coisa a forma como eu uso esse item aqui é exatamente

a mesma forma que eu uso esse outro aqui que tá dentro do meu define props então é a mesma forma de usar ele sendo declarado com define props ou não então definido aqui o nosso componente e as propriedades que ele recebe eu vou aqui no meu App pra gente poder importar esse componente Então vou importar aqui o componente com Props pron ponto barra components barra com props e aqui eu vou chamar o meu componente com props E aí para o meu componente eu precisar passar as propriedades eu vou precisar passar esses parâmetros que eu defini

que ele teria que são aqui deixa até fechar esses outros arquivos que tem muisa aber aqui wew eu salvar vou fechar os outros aqui vou abrir só o meu componente com aqui eu defini que ele ia ter um item Que é uma string e um preço que é o Number então aqui eu vou definir o item que vai ser por exemplo uma borracha e Vou definir aqui o valor né o preço dele que aqui vai ser por exemplo 2,50 então aqui eu defini o item né a propriedade item que eu quero passar e a propriedade

preço que eu quero passar também só que aqui tem uma coisa quando a gente define uma propriedade dessa forma aqui que é a forma padrão da gente definir as propriedades tá a gente Sempre vai definir as propriedades entre aspas essa propriedade vai ser entendida como uma string então ele tá entendendo o item aqui como uma string e o preço como uma string Como que eu faço ele entender que o preço não é uma string utilizando o v bind então eu posso usar aqui o v traço bind E aí agora a gente vê até aqui que

o 2,50 mudou de cor Então agora ele tá sendo entendido como uma coisa diferente de string E aí eu posso usar o V bind aqui explícito ou eu posso usar só o atalho aqui do dois pontos e aí eu posso e chamar aqui esse componente mais algumas vezes passando valores diferentes para ele a gente vai ver que a gente vai ter o mesmo componente sendo renderizado ali mas recebendo esses parâmetros diferentes que vão fazer com que ele exiba dados diferentes então além da Borracha aqui eu vou exibir um apontador e um caderno caderno vai ser

10 e 25 E o apontador aqui vai ser 1,99 Então vou salvar aqui e voltando o navegador está aqui os nossos componentes então primeiro aqui o apontador é que custa 1,99 o caderno que custa 10,25 e aqui a gente tem a borracha que custa 2,50 só que aqui ele tá tratando o 2,50 como sendo um número e aí ele acaba Tirando esse zero aqui do 50 porque é um zero que dentro da Matemática não vai fazer diferença nenhuma a gente poderia Mudar isso lá na lógica do nosso componente com props para fazer uma formatação bonitinha

para exibir os dois números então eu poderia vir aqui no meu componente com props e exibir aqui o preço ponto fixed dois acho que isso aqui já resolve resolveu aqui então agora o nosso número Ele sempre vai ter duas casas decimais Então tá aqui a borracha 2,50 o caderno 10,25 e o apontador 1,99 Vou apagar aqui esses dois últimos né vou ficar só com a borracha porque a gente não precisa de muito mais do que um exemplo aqui de de referência desse tema E aí falando aqui das prós né já que a gente chegou nas

pras a gente entra em uma outra parte e do uso de componentes que é a parte de comunicação entre componentes Então dentro do vio a gente tem esses componentes e a gente vai é compondo esses componentes como a gente tá Fazendo aqui então aqui a gente tem o nosso componente app e o que que a gente tem dentro do nosso componente app dentro do HTML do nosso componente app a gente tem um header e vários outros componentes Então a gente vai colocando componentes dentro de componentes que vão ficando dentro de componentes que vão ficando dentro

de outros componentes e acaba sendo isso que permite que a gente faça aplicações eh grandes e aplicações robustas de uma forma simples É justamente essa opção aí da gente juntando componentes e essa opção aqui também que a gente tem de fazer com que esses componentes fiquem personalizáveis né no caso esse aqui componente com props que recebe ali os parâmetros Então a gente vai compondo esses componentes e esses componentes eventualmente eles precisam ter algum tipo de comunicação entre si normalmente a gente vai ter a comunicação de um componente pai com o componente filho então aqui a

gente tem O nosso componente pai que é esse componente app nesse componente App eu tenho vários componentes filhos O que são os componentes filhos são esses componentes aqui que estão dentro do meu componente app Então os filhos do meu componente app são o com props o databinding o com dados reativos não primitivos dados reativos primitivos com dados e primeiro componente Esses são os componentes filhos do meu componente app E aí a gente já tem aqui uma comunicação Desse componente app com o nosso componente filho aqui nesse comprs aqui a gente tá tendo uma comunicação a

gente tá enviando um dado que tá no componente pai para o componente filho no caso esses dados aqui eles estão até hardcoded mas eu poderia ter eles aqui na forma de uma constante por exemplo dentro do meu script então poderia ter uma constante borra que Vai B E aí eu podia passar aqui essa constante mas aí Eu precisaria do dat binding aqui então aqui e eu poderia definir aqui também o preço né preço borracha que seria R 2,50 e aqui eu poderia passar o preço borracha Então são valores aqui que estão no meu componente p

e aqui eu até separei para ficar um pouquinho mais Claro Tá Mas da forma como eles estavam eles já eram dados que estavam aqui no componente P só que eles estavam hardcoded aqui na chamada do comp ente aqui eu separei para eles ficarem dentro do meu setup mas aqui eu tenho os dados do componente Pie e eu tô passando esses dados pro componente filho esse é o tipo de comunicação que a gente tem de um componente pai para um componente filho é através da passagem de props Então sempre que um componente pai quiser se Comunicar

com o componente filho quiser passar algum dado que é relevante para esse componente filho essa comunicação vai acontecer dessa forma aqui utilizando props então eu vou pegar dados do componente p e vou passar para o componente filho só que o que que acontece se eu quiser fazer o componente filho se comunicar com o componente pai se eu quiser que esse comprs aqui envie algum dado para o meu App como que isso poderia acontecer isso acontece a partir De eventos que é o que a gente vai ver agora logo em seguida só que a gente não

vai ver isso diretamente aqui no componente app a gente vai ver isso aqui em outro componente então eu vou criar dois componentes aqui para esse exemplo eu vou criar um componente que escuta evento p viw e eu vou criar um outro componente aqui que vai ser o componente que emite evento pview Então a gente vai ter dois componentes aqui eu vou ter o componente pai que vai ser o Componente que vai escutar um evento e eu vou ter o componente filho que vai emitir um evento essa parte vai ficar um pouquinho mais clara conforme a

gente for organizando aqui o nosso código então eu vou começar aqui no meu componente que emite evento e eu vou definir aqui o meu template eu vou fazer aqui organização básica e depois a gente entra na parte do evento em si então aqui eu vou criar minha div que vai ter a minha classe componente aqui eu vou Colocar um título que vai ser componente que emite evento e aqui eu vou colocar um parágrafo onde eu vou colocar um item e um preço da mesma forma que a gente fez aqui no com props Inclusive eu vou

até copiar esse componente com props aqui para ser um pouquinho mais rápido esse exemplo Então vou mudar aqui o título para componente que emite evento e vou adicionar aqui um Botão que vai ter [Música] como texto adicionar ao carrinho e aí aqui no meu componente escuta evento eu vou criar um template também e aqui eu vou colocar uma div que também vai ter a classe componente e vou colocar aqui um H1 dizendo que esse é o componente que escuta evento e aqui nesse componente eu vou colocar um parágrafo onde eu vou O valor total ali

é de produtos que eu vou ter onde eu vou exibir um valor total Então esse valor total aqui eu vou colocar e em reais e vou ter aqui o valor total e depois eu vou colocar aqui e mais uma div onde eu vou ter alguns componentes que emitem evento Então para usar o componente que emite evento aqui dentro eu vou precisar importar ele a gente já tá trabalhando com a importação de componentes Desde do início desse aulão Aqui dentro do app então aqui dentro do app a gente já importou vários componentes e a gente vai

aqui dentro do scuta evento importar um componente também então para importar um componente Eu preciso da minha tag script vou usar o script setup aqui e aqui eu vou importar o meu componente emite evento PR pon barra emite evento pview Então vou fazer essa importação aqui e dentro dessa div eu Vou chamar o meu componente e emite evento aqui e aí como e ele não tem nada para ser passado pelo corpo eu posso chamar ele dessa forma aqui e aí eu vou passar aqui Um item que vai ser é o item um que vai ter

aqui é um preço que eu vou colocar como sendo é 1 e99 e vou colocar mais alguns aqui vai ter o item dois e o item TR o item dois vai ter o preço aqui de c e o item TR vai ter o preço aqui de 10,99 Beleza vou agora importar esse Escuta evento lá no nosso app só pra gente ver aqui como que ele se parece então vou importar aqui o escuta evento pon barra componentes barra escuta evento e aqui eu vou chamar o meu componente escuta evento beleza salvei aqui e aí a gente

pode olhar mais ou menos como que eles se parecem aqui então aqui tá o componente que escuta evento aqui a gente tem os nossos nosos componentes que emitem eventos Só que Essa visualização não tá muito legal então eu vou fazer uma formatação CSS aqui rapidinho eu vou colocar uma classe aqui de lista e aqui eu vou colocar um Style scoped e vou formatar minha classe lista aqui para ter um display FX com um justify content de Space between então agora aqui a gente vai ter Uma visualização um pouquinho eh melhor aqui ele tá reclamando de

uma tag inválida porque e por algum motivo eu apaguei ali e o símbolo para fechar aquela tag Beleza vou salvar aqui e voltar pro nosso navegador e aqui ele já atualizou a visualização então aqui a gente consegue ver os nossos três itens temos aqui o botão adicionar o carrinho e temos aqui a variável Total então o que que eu quero que aconteça nesse Componente eu quero armazenar aqui no componente que escuta evento um valor que vai ser o total do meu carrinho entre aspas e vamos pensar um valor que vai ser o total do meu

carrinho entre aspas né Vamos pensar que isso aqui é um carrinho então aqui seria o total do meu carrinho e toda vez que eu clicar em adicionar ao carrinho dentro de um desses componentes aqui eu vou querer fazer com que esse Total seja atualizado então o que que vai acontecer aqui essa Variável Total ela vai est nesse componente P que é o componente que escuta o evento e eu vou querer que alguma coisa que acontece dentro desses componentes filhos altere esse valor do componente Pie e isso é o evento e o que que é o

evento o evento é justamente o alguma coisa que vai acontecer dentro do componente filho então vai acontecer alguma coisa aqui dentro do componente filho e o componente filho vai grit tá aconteceu alguma coisa E aí o componente Pai vai lá ver o que que foi que aconteceu e vai tomar eh as medidas necessárias Então vamos pensar num pai e num filho num mundo mais real se o filho grita pai eu tô com fome o pai vai ouvir o grito Estou com fome e ele vai tomar uma decisão uma ação com base no grito que ele

ouviu Então se o filho tá com fome ele vai alimentar o filho de alguma forma se o filho grita tô com sono o pai vai ouvir de novo esse grito e vai tomar alguma ação a partir desse grito do Filho então se o filho gritou tô com sono o que o pai vai fazer provavelmente vai ser uma coisa diferente do que se o filho gritasse estou com fome ou preciso no banheiro Então a gente vai ter algo Eh mais ou menos nesse sentido acontecendo aqui o componente filho vai gritar que alguma coisa aconteceu o componente

P vai escutar eh que alguma coisa aconteceu e vai tomar alguma ação com relação a isso Então como que a gente pode implementar isso bom a gente Vai aqui no nosso componente filho fazer com que esse componente filho Grite e como que esse componente filho vai gritar ele vai gritar a partir da emissão de um evento E aí eu preciso fazer com que esse meu componente filho ele emita de fato esse evento E para isso eu vou precisar importar aqui do View uma nova função que vai ser a função define emits para definir as emissões

que vão acontecer aqui os eventos que vão ser definidos E aí aqui Eu vou uma constante que eu vou chamar de emit que ela vai receber aqui o resultado dessa função define emites então o que que eu vou passar aqui dentro desse define emites eu vou colocar os gritos que esse componente filho pode dar então pensando ali naquele exemplo que eu dei do pai e do filho de verdade né o filho poderia gritar eh estou com fome seria um grito que ele pode dar ele pode dar outro grito Aqui estou com sono seria Outro grito

um outro grito ainda é preciso ir no banheiro Então aqui seriam os gritos que o filho de verdade e poderia dar qual vai ser o grito que eu vou colocar que esse componente pode dar ele vai gritar aqui que foi adicionado Então esse aqui vai ser o grito que eu quero que o meu componente filho dá ele vai dizer ele vai gritar foi adicionado foi adicionado o qu esse tem aqui no meu carrinho Então esse aqui vai ser o grito que ele vai dar E aí Para fazer ele de fato dar esse grito eu vou

criar uma função aqui que eu vou chamar de adicionar então function function que eu vou chamar de adicionar e nessa função aqui eu vou fazer ele D O Grito ali e o grito aqui vai ser o foi adicionado então isso aqui é uma variável que vai guardar os possíveis Gritos e essa variável também é uma função tá então ela vai guardar aqui os possíveis Gritos e eu vou chamar ela passando o grito que eu quero que o Filho Dê então aqui o grito que ele vai dar eu foi adicionado e quando eu chamar essa função

emite eu posso passar aqui também algum dado e Extra algum argumento para essa função e eu vou querer passar justamente o preço só que isso aqui não vai funcionar porque aqui dentro do meu JavaScript eu não tenho essa variável preço quando eu uso define aqui ele define o preço mas ele define o preço lá para fora ele define o preço para o meu HTML aqui dentro do meu JavaScript eu não tenho preço Como que eu posso pegar esse preço a partir aqui de uma variável Então vou usar aqui essa propriedade props e eu vou pegar

aqui nesse props o resultado do define props então aqui dentro eu vou ter e um objeto com esses elementos aqui então aqui eu vou vou poder acessar o meu preço a partir de props pon preço então o que que o filho vai gritar aqui ele vai gritar foi adicionado e vai gritar O preço foi adicionado R 2,50 foi Adicionado 9 foi adicionado 1,99 foi adicionado 152 com 93 é isso que ele vai gritar então quando eu chamar essa função aqui é esse o grito que o meu componente vai dar E como que eu chamo essa

função eu venho aqui no meu botão e adiciono um um clique então quando eu clicar eu vou chamar minha função adicionar Beleza agora o meu filho tá gritando ele já pode gritar aqui o que ele precisa gritar Ele Pode emitir o evento aqui que ele precisa emitir Como Que eu faço pai escutar isso agora porque o pai não vai escutar a menos que eu diga que ele tem que estar escutando então para isso a gente vai voltar aqui no nosso evento e a gente vai dentro aqui da chamada do componente filho colocar O componente pai

para escutar o evento Então quando aconteceu o evento e qual que é o evento é justamente esse evento que eu defini aqui que foi adicionado Quando acontecer o evento foi adicionado eu vou querer executar uma Função e aqui olhando para essa sintaxe isso aqui já deve ser familiar porque é a mesma coisa que a gente tá usando aqui no um clique por quê Porque o clique também é um evento inclusive é um dos primeiros eventos que a gente acaba tendo contato quando a gente começa a trabalhar com JavaScript então então aqui no nosso componente Pie

a gente vai definir que quando aconteceu o evento foi adicionado dentro do componente filho eu vou executar alguma função e Qual é a função que eu quero executar é uma função que eu vou definir aqui que eu vou chamar de atualizar total e para atualizar o total eu vou precisar da minha variável Total então aqui eu vou criar o total a partir de um ref aqui com zero e aí eu vou importar o ref do View beleza aqui e aí aqui dentro do meu atualizar Total eu vou receber um parâmetro que vai ser justamente o

dado Aqui que eu tô enviando junto eh na emissão do meu evento Então eu ele tá gritando foi adicionado 2,50 esse 2,50 e esse preço que tá aqui que é o parâmetro que eu tô passando pro meu imite ele é o parâmetro que minha função vai receber então essa função vai receber exatamente o parâmetro aqui que foi emitido né o valor ali que foi emitido E aí eu vou fazer alguma coisa com esse parâmetro aqui o que que eu vou querer fazer eu vou querer eh criar aqui um valor que Vai ser obtido a partir

de Total ponto velho mais p e aqui conste com s né mas não antes do n e E aí depois eu vou setar o meu Total ponto velho aqui para receber o valor ponto to fixed aqui fixed do Então vou querer colocar aqui o meu valor com duas casas decimais E aí esse aqui é um valor que vai ser uma string Então vou colocar um mais Aqui na frente pra gente garantir que ele vai ser com convertido para número e que a gente não vai ter nenhum problema eh ao trabalhar aqui e em todas as

adições beleza definida essa função que é a ação que o pai vai ter que fazer quando escutar o grito do filho a gente pode eh colocar ela aqui então atualizar total e agora de fato a gente tem o pai agindo a um grito do filho ali ao evento que foi emitido pelo filho então o filho vai gritar ali foi adicionado e essa Aqui é a ação que o pai vai tomar e aqui é importante eh dizer que para cada um dos possíveis eventos que esse componente Pode emitir a gente precisaria definir um listener aqui para

esses eventos de forma distinta Então se um componente Pode emitir três eventos Eu precisaria de três listeners diferentes e nesse momento aqui do nosso código a gente tem que o total ele vai ser atualizado mas ele vai ser atualizado apenas para esse componente Emit evento aqui para esse primeiro por quê Porque é apenas nesse primeiro que a gente coloc colocou esse listener apenas nesse primeiro que o pai tá ouvindo o pai tá ouvindo só é esse filho os outros ele não tá ouvindo se eu quero que ele escute todos eu preciso colocar isso aqui em

todos então vou colocar aqui em todos e vou salvar e agora a gente pode testar isso aqui lá no navegador então voltando aqui no navegador tenho aqui o meu componente Que escuta evento com total de zero e se eu adicionar aqui neste primeiro componente a gente vai ter o valor sendo atualizado então ele gritou Olha foi adicionado ao carrinho aqui 1,99 E aí o pai vai pegar 1,99 e vai adicionar aqui posso fazer a mesma coisa aqui com esse segundo é de dois ou com esse terceiro aqui é de 10,99 a gente tem o mesmo

resultado aqui então o nosso exemplo de componente que escuta evento Tá funcionando então o nosso exemplo de Eventos aqui de comunicação do componente filho pro componente pai via evento tá funcionando e essa aqui é a forma como a gente vai fazer essa comunicação Então esse aqui é um exemplo legal de comunicação porque aqui eh do componente Pai a gente tá passando já os dados para o componente filho então a gente tem a comunicação do pai pro filho aqui nesse exemplo já e a gente também tem a comunicação aqui eh do filho para o pai a

partir aqui da emissão do evento Então mais um exemplo aqui completado e agora a gente vai fazer mais um aqui que vai ser um exemplo onde a gente vai trabalhar com propriedades computadas Então vou criar aqui meu arquivo e aqui a gente pode começar a desenvolver o nosso código só que antes da gente desenvolver o nosso código é importante que a gente entenda o que são as propriedades computadas do View Então as propriedades computadas são Propriedades ou variáveis que a gente vai ter ali no nosso código que dependem de outras propriedades que a gente vai

ter também ali dentro do nosso script e que vão ser automaticamente recalculadas elas vão ser atualizadas automaticamente Quando essas dependências mudam Vamos pensar na idade de uma pessoa que é o exemplo aqui até que a gente vai fazer eh nesse arquivo a idade de uma pessoa ela vai depender do ano que essa pessoa nasceu e vai depender do ano que a gente Tá se eu alterar o ano que a gente tá a gente vai alterar a idade dessa pessoa então se se a gente tá se a pessoa nasceu em 2000 por exemplo e a gente

tá em 2024 essa pessoa vai ter 24 anos se a gente tiver em 2030 essa pessoa vai ter 30 anos então a gente tem essa dependência da idade com relação ao ano atual E aí usando a propriedade computada a gente vai conseguir fazer com que a idade seja calculada de forma automática a partir do ano atual então Eu vou começar aqui o meu código estruturando o meu template e no meu template eu vou colocar uma div que vai ter a classe componente aqui dentro dessa div eu vou colocar o H1 para especificar que esse é

o componente com propriedades computadas e aqui é um t Beleza depois disso eu vou colocar aqui um parágrafo para exibir a idade e depois eu vou colocar aqui um input que vai ser do tipo Aqui Number e vou fazer um v Model desse input para uma variável que eu ainda vou criar que vai ser a variável ano atual E aí só para deixar essa visualização um pouquinho melhor eu vou colocar uma Label aqui dizendo que esse é o ano atual e eu vou colocar aqui para ficar um pouco mais dinâmico o exemplo um outro setzinho

aqui de Label input para especificar o ano do nascimento então aqui eu vou ter o ano Nascimento e o valor mínimo eu vou colocar como sendo 100900 Beleza então essa aqui vai ser mais ou menos a nossa estrutura a gente vai ter idade vai ter o ano de nascimento e o ano atual e eu quero que a idade seja atualizada de acordo com o ano de nascimento e o ano atual Beleza depois disso eu vou fazer aqui o meu script e eu vou começar no meu script importando aqui o ref do View e definindo as

minhas constantes então eu vou definir aqui a minha constante Nascimento que vai receber um ref aqui e vou especificar o valor mínimo aqui que eu coloquei mesmo então o ano de nascimento vai ser 1900 né E aqui seria ano nascimento da mesma forma que eu defini ali em cima e depois eu vou ter aqui o ano atual eu vou inicializar como sendo aqui o 2000 e aí eu vou ter aqui a minha idade como que eu vou definir a idade como propriedade Computada bom eu vou precisar importar aqui também do View posso até aproveitar esse

mesmo Import mas eu vou precisar importar aqui a função computed essa função é a função que a gente vai utilizar para criar uma propriedade computada e para criar essa propriedade a gente vai usar essa função comp e vai passar como parâmetro para ela uma função callback então aqui uma função callback e essa função callback ela vai fazer o cálculo pra função idade É mais ou menos como um getter então o computer daqui ele meio que vai ter como parâmetro um getter para essa propriedade aqui Então como que eu vou calcular a idade eu vou calcular

a idade a partir do ano atual ponto velho menos o ano Nascimento pon velho então toda vez que eu acessar a idade ele vai na verdade chamar essa função aqui e vai me trazer os valores atualizados isso aqui é muito interessante Porque como ele atua meio Que como um getter a gente não precisa se preocupar em fazer verificações com a idade porque a idade já vai ser definida aqui automaticamente a partir dos valores do ano atual e dos valores do ano Nascimento e vai ser recalculada de forma automática quando o uma dessas variáveis aí for

alterada beleza esse aqui é o exemplo agora a gente pode invocar ele aqui no nosso App pra gente ver ele funcionando então vou importar aqui o propriedades Computadas e vou adicionar ele aqui vou salvar aqui e a gente pode ver esse resultado no navegador então aqui tá o nosso exemplo de propriedades computadas e aqui a gente tem o ano de de nascimento e o ano atual e aqui a idade né Posso até dar uma melhoradinha nessa visualização só para ficar um pouquinho mais legal então aqui eu vou colocar é idade e aqui eu vou botar

um Style Style aqui scoped para que eu possa Colocar na minha Label uma margem de 10 pixels só para ela ficar um pouquinho mais afastada ali Beleza já deu uma melhorada temos aqui o ano de nascimento o ano atual e a idade da pessoa conforme eu vou alterando o ano de nascimento Então vamos botar aqui uma pessoa que nasceu eh em 1987 e o ano atual é 2000 Então essa pessoa teria 13 anos o ano atual 2001 pessoa tem 14 para facilitar Vou colocar Aqui 2000 e 2001 então 2000 2001 a pessoa tem a idade

de um depois 2 3 4 e isso funciona tanto se eu alterar aqui a parte do ano de nascimento quanto o ano atual né A idade aqui ela vai ser alterada de forma correspondente beleza Esse aqui foi o nosso exemplo de propriedades computadas e agora a gente vai ver um outro tipo de propriedade que a gente tem aqui dentro do View também que são as propriedades assistidas e as Propriedades assistidas elas são de certa forma parecidas aqui com as propriedades computadas porque elas também vão permitir que a gente faça ações de forma automática quando alguma

coisa acontecer com uma variável né quando o valor de uma variável for alterado e para facilitar esse nosso exemplo de propriedades assistidas eu vou duplicar aqui o exemplo de propriedades computadas vou renomear a cópia aqui para Propriedades assistidas e vou manter aqui o nosso mesmo template Leite só vou mudar aqui para propriedades assistidas e aí a gente vai trabalhar agora com as propriedades assistidas nesse exemplo Então vou apagar aqui essa idade como sendo um valor computado mas vou manter as minhas variáveis ali de ano de nascimento e ano atual então como eu falei as propriedades

assistidas elas vão Permitir que a gente Execute uma ação quando o valor de uma variável for alterado e as propriedades assistidas elas acabam sendo muito interessantes pra gente performar efeitos colaterais então quando a gente precisa de um efeito colateral na nossa aplicação como uma reação alguma coisa por exemplo a variável ano atual eh mudou e aí eu quero a partir dessa variável mudar alguma coisa na Dom ou eu quero eventualmente fazer uma requisição a uma API ou eu quero fazer e alteração de algum outro valor que eu tenho na minha aplicação então esses são casos

que são interessantes da gente utilizar propriedade assistir e nesse exemplo a gente vai replicar a mesma coisa que a gente fez no exemplo anterior mas agora utilizando as propriedades assistidas então para utilizar as propriedades assistidas a gente vai precisar importar aqui a função What que é a função que vai Assistir Né que vai ficar observando essas variáveis e eu vou definir aqui a minha variável idade novamente agora como sendo um ref aqui e de zero e aí eu vou fazer aqui eh um at então eu vou começar a assistir então vou ficar de olho em

alguma coisa em alguma variável vou ficar de olho em qual variável vou ficar de olho na variável ano atual e quando a variável ano atual mudar eu vou precisar fazer alguma coisa e essa coisa vai est descrita aqui nessa callback e Essa callback vai receber como parâmetro o novo valor do ano atual então eu vou botar aqui eh o ano atual como parâmetro também então esse aqui vai ser o nome do parâmetro da função tá não precisaria ser exatamente esse nome mas eu vou deixar aqui então quando o ano atual mudar o que que eu

vou fazer eu vou querer atualizar o valor da idade então idade ponto velho vai receber aqui o ano atual menos o ano Nascimento pon velho então aqui eu tô usando o ano atual que É essa variável aqui né poderia até dear só ano acho que fica um pouquinho mais claro aqui que aqui o valor que eu tô passando aqui para essa atribuição da idade é justamente o valor que eu tô recebendo aqui como parâmetro nessa função que é o valor atualizado do ano atual então eu tô observando aqui o ano atual quando o ano atual

mudar eu vou executar essa função e Vou atualizar a idade e aí para fazer a mesma coisa quando eu mudar o nascimento eu vou Precisar aqui fazer um outro watch então pro ano Nascimento e aqui eu vou usar o ano atual pon velho porque aqui eu tô usando o ano atual que é essa variável e aqui eu vou usar o ano que eu recebi como parâmetro Então dessa forma aqui a gente vai ter o mesmo comportamento que a gente tinha no exemplo anterior só que agora a gente tá usando uma sintaxe um pouquinho diferente que

é a sintaxe do watch o Watch ele acabaria não sendo a melhor Opção aqui nesse caso específico que a gente tá trabalhando nesse exemplo mas eu quis usar ele nesse exemplo mesmo assim para ficar claro também a diferença e a gente poder comparar com a propriedade computada então aqui a gente já conseguiria ver que o Watch não seria a melhor opção porque o código que a gente tem dentro desses dois Wats é mais ou menos o mesmo então a gente conseguiria resolver esse problema aqui de atualizar a idade colocando ela como Uma propriedade computada Quando

que o Watch acabaria sendo mais útil o Watch acabaria sendo mais útil realmente nesses casos onde a gente teria os efeitos colaterais então de alguma forma mudar a Dom por exemplo ou de alguma forma fazer alguma requisição para alguma pi externa ou qualquer efeito colateral aí nesse sentido beleza vamos agora aqui no nosso app colocar esse exemplo para rodar então vou importar aqui o nosso exemplo Propriedades assistidas assistidas PR pon Barra component barra propriedades assistidas e vou colocar ele aqui no nosso exemplo beleza salvei vamos olhar aqui no navegador o resultado e aqui tá o

nosso exemplo de propriedades assistidas e aqui a gente consegue ver que o valor inicial da idade é zero justamente porque é o valor que eu coloquei aqui para ser o valor inicial da idade Então Esse valor aqui só vai ser atualizado quando eu mudar o valor do ano atual ou quando eu mudar o valor do ano Nascimento então aqui eu vou alterar e aqui a gente consegue ver a alteração então uma pessoa que nasceu em 1912 em 2000 teria 88 anos e em 2024 por exemplo teria 112 anos em 2030 teria 118 anos e aí

a gente tem aqui o mesmo comportamento mas agora utilizando uma sintaxe diferente e aí eu quero aproveitar esse exemplo aqui para Mostrar para vocês também uma outra forma da gente definir minh as propriedades assistidas que é usando o Watch effect então só para facilitar aqui eu vou separar a minha importação então eu vou copiar isso aqui porque eu quero comentar um pedaço do código e vai ficar um pouquinho mais fácil a gente fazer o comentário e dessa forma Então essa aqui é a forma como a gente tinha com o Watch né a propriedade watch aqui

e agora eu vou mostrar para vocês como Que a gente faria essa mesma coisa usando o Watch effect Qual que é a diferença do watch para o Watch effect o Watch effect também é uma função ali que vai assistir vai observar os valores de variáveis e vai executar alguma coisa quando esses valores mudarem só que ele é um pouquinho diferente no do watch no sentido de sintaxe então no watch effect a gente não precisa especificar aqui a variável que a gente tá monitorando e depois especificar uma callback que Recebe o valor dessa variável atualizado o

Watch effect ele é uma sintaxe um pouquinho mais simples que também resulta aqui no mesmo resultado mas que é um pouquinho mais simples da gente escrever então para usar o Watch effect a gente vai usar aqui watch effect né chamar a função ali e o Watch effect ele recebe como parâmetro apenas a função callback então ele é meio que um watch simplificado porque a gente não precisa especificar quais variáveis a gente tá Monitorando ele vai vai inferir isso automaticamente e ele vai selecionar de forma automática ali Quando que ele vai precisar ser executado E aí

aqui dentro do watch effect a gente vai lidar com as nossas variáveis aqui da forma como elas foram definidas diretamente dentro da nossa função setup que no caso é o que esse script setup é né no fim das contas ele vai ser ali uma função setup então aqui a gente vai se referir a ele sempre como ref né a todas as variáveis aqui Envolvidas a gente vai se referir a elas como as refs que elas de fato são então aqui eu vou ter que a minha idade ponto velho vai ser igual ao meu ano atual

ponto velho menos o meu ano Nascimento ponto velho então aqui a gente tem uma sintaxe simplificada né ficou até um pouco parecido lá com a propriedade computada E se a gente voltar aqui pro navegador a gente vai ver que a gente ainda mantém o mesmo comportamento né E aqui Inclusive eu posso ir alterando as Idades aqui a gente vê que o valor ali eh vai refletindo e a gente viu aqui que o valor neste caso ele já foi atualizado ali com o valor sem porque o Watch effect ele já foi executado ali na primeira vez

que esses dois valores foram setad então quando esses valores foram setad aqui ele já teve a sua execução e já mostrou pra gente esses valores aqui atualizados beleza voltando aqui pro vs code Então a gente vai pro nosso próximo exemplo que Vai ser um exemplo de renderização condicional e o que que é renderização condicional renderização é mostrar coisas na tela condicional vem das estruturas condicionais da programação então if e else então a renderização condicional é a partir de uma condicional a partir de um if else eu decidi o que que eu vou render o que

que eu vou mostrar na tela e aí nesse exemplo eu quero que esse componente receba como parâmetro a quantidade de Cachorros que uma determinada pessoa tem E aí a partir dessa quantidade de cachorros eu vou decidir se eu vou exibir um texto e dizendo que a pessoa não tem cachorros que ela tem um cachorro ou que ela tem muitos cachorros Então esse aqui vai ser o nosso exemplo então eu já vou estruturar aqui o meu template onde eu vou ter a minha div aqui que vai ter aquela classe componente para que ela fique e formadinha

vou colocar um H1 aqui Dizendo que esse é o componente com renderização condicional E além disso vou colocar aqui um parágrafo para exibir o nome é de uma pessoa só para esse exemplo ficar um pouquinho mais é legal então vou botar o nome da pessoa e logo depois eu vou querer exibir a quantidade de é cachorros que essa pessoa tem já vou colocar aqui o meu script e no meu script eu vou querer receber tanto a quantidade de cachorros como o nome via Props Então vou importar aqui a função define props do View Lembrando que

o script aqui ele vai precisar ser setup para fazer dessa forma Então vou importar aqui o define props do viil e aqui eu vou chamar essa função define props passando aqui o nome que vai ser uma string e a quantidade de Cachorros que vai ser um Number Beleza o nome aqui já tô exibindo e agora eu preciso lidar com a quantidade de cachorros então o que que eu quero fazer o que que eu quero exibir eu vou querer exibir aqui um outro parágrafo dizendo que a pessoa não tem cachorros se ela não tiver cachorros se

ela tiver cachorros eu vou querer exibir um outro parágrafo aqui dizendo E tem um cachorro e se ela tiver mais de um cachorro eu vou querer exibir o Parágrafo aqui dizendo tem muitos cachorros beleza isso aqui é o que eu quero fazer agora preciso estruturar a minha condicional para saber quando que eu vou exibir isso quando que eu vou exibir isso e quando que eu vou exibir isso porque da forma como tá aqui eu sempre vou renderizar essas três opções eh juntas então para usar a renderização condicional a gente vai utilizar uma diretiva que a

gente tem aqui dentro do View que é o v if e aqui dentro do vif a gente vai definir a condicional do IF realmente então aqui é como se a gente tivesse de fato escrevendo uma estrutura if F else lá do JavaScript ou de outra linguagem então no vif eu vou colocar a minha condição para que esse parágrafo seja exibido Então para que esse componente aqui esse parágrafo seja exibido eu vou querer que a quantidade de cachorro seja igual a zero quantidade de cachorro sendo igual a Zero eu vou exibir não tem cachorros e uma

coisa importante aqui é que o vif Ele sempre vai dizer se eu vou mostrar o se eu vou esconder esse componente aqui que tá onde essa condição tá sendo aplicada então com o vif aqui nesse parágrafo se essa condição for verdadeira eu vou exibir esse parágrafo e tudo que tem dentro dele então poderia que ter outros componentes outras coisas tudo isso seria exibido porque eu estaria exibindo esse parágrafo aqui e Tudo que tá dentro dele beleza Esse aqui foi o if então pra gente exibir aqui que a pessoa não tem cachorros para exibir que a

pessoa tem um cachorro eu precisaria pensando na programação de um else if para adicionar uma outra condição e aqui no vio a gente tem essa possibilidade usando a diretiva V else if e aqui eu vou querer verificar se a quantidade de cachorros é igual a um então se a quantidade de cachorros for um eu vou colocar aqui que a pessoa Tem um cachorro e para finalizar aqui né caso nenhuma dessas condições seja atendida eu vou usar V ELS então se a quantidade de cachorros aqui for zero eu vou exibir esse parágrafo dizendo que a pessoa

não tem cachoros Senão se a quantidade for um vou exibir esse parágrafo aqui e senão eu vou exibir esse último parágrafo aqui então a gente tem aqui as estruturas básicas de um condicional que a gente já tá acostumado em outras linguagens Então A gente tem o vef o elseif e o else aqui como diretivas do vi PR gente fazer essa renderização beleza essa aqui é a definição do componente componente definido eu vou salvar e vou importar ele lá no nosso app então aqui no app eu vou importar o renderização condicional então ponto barra components barra

renderização condicional e vou exibir ele aqui beleza e agora a gente vai Precisar passar os parâmetros aqui então eu vou passar o nome aqui de uma pessoa que vai ser por exemplo Maria e vou passar a quantidade de cachorros que eu vou colocar inicialmente como zero Então vou colocar aqui o bind porque eu quero que isso aqui seja interpretado como um número Vou salvar e aí a gente pode ver o resultado aqui no navegador Então a gente tem aqui o nome Maria Maria não tem cachorro se eu vier aqui alterar esse parâmetro para um essa

propriedade Aqui agora a Maria tem um cachorro E caso eu altere aqui para dois por exemplo a gente vai ter a informação aqui de que a Maria tem muitos cachorros Então esse aqui é o nosso exemplo de renderização condicional e ainda falando sobre renderização eu quero falar agora sobre a renderização de listas então eu vou criar aqui um novo Eh componente que eu vou chamar de renderização listas pview Então o que é a renderização de lista a renderização De lista vai ser uma forma que a gente pode utilizar para renderizar itens de uma lista de

uma forma correta entre aspas aqui dentro do vi Vamos pensar que a gente tem um Array e esse Array tem 10 funcionários eu quero mostrar esses 10 funcionários na minha tela a primeira forma que a gente pode pensar de implementar isso é pegar manualmente cada um desses funcionários e transformar esses funcionários em um componente que a gente vai exibir na Tela Beleza a gente até poderia fazer isso mas essa é uma estratégia que meio que não funciona no mundo real por ser impraticável né a gente tem os sistemas aí crescendo sempre mudando sempre e principalmente

com dados que mudam a toda hora então se eu criasse esse componente dessa forma se eu alterasse a lista de funcionários ele já não ia funcionar da forma correta porque ele não estaria mais refletindo os dados ali e reais dos meus funcionários Então Nesse exemplo a gente vai ver a forma correta de fazer essa renderização de lista E aí para fazer esse exemplo eu vou querer fazer algo bem parecido com o que a gente tinha no exemplo anterior então vou até copiar aqui e trazer para cá com a diferença aqui de que agora ao invés

de passar quantidade de cachorros como sendo número eu vou querer passar os cachorros aqui como sendo um arrei então eu vou querer passar aqui o uma lista de cachorros para esse componente Vou mudar o nome aqui também para componente com renderização de lista vou salvar vou manter o nome aqui e aqui eu vou apagar essa nossa renderização condicional então o que que eu quero fazer aqui eu quero que os cachorros que essa pessoa tem sejam exibidos e os cachorros eles vão ter aqui um nome eh e uma idade vai ser essas informações aqui que eu

vou definir PR os cachorros Então eu tenho uma lista de cachorros e eu quero exibir Essa lista para exibir uma lista aqui eu vou definir uma ul e essa ul vai ter vários L né vários itens ali que vão representar esses cachorros só que como que eu vou acessar individualmente cada um desses cachorros Eu vou acessar eles a partir aqui da diretiva V for Então a gente tem o vif que é um if que funciona dentro das tags aqui no template do View e a gente tem o VF que é um for que funciona dentro

do template aqui nas tags do View então o VF a gente vai estruturar aqui como um forin então para cada cachorro em cachorros ca chorros a gente vai fazer alguma coisa né A gente vai repetir essa tag aqui importante essa diretiva ver for aqui ela precisa ser colocada exatamente na tag que vai ser repetida então eu quero gerar vários Li eu quero que cada cachorro seja um li então por isso eu vou colocar o VF no Li e aí aqui dentro do li eu vou colocar o nome que vai ser o cachorro pon Nome e

eu vou até quebrar isso aqui em múltiplas linhas para ficar mais fácil a visualização e eu vou querer colocar também aqui é a idade que vai ser cachorro. idade então o que que vai acontecer aqui para cada cachorro em cachorros eu vou gerar um li que vai ter aqui o nome do cachorro e a idade do cachorro então aqui a gente tem uma estrutura de repetição que vai gerar pra gente de forma automática é todos esses liis aqui que a gente vai precisar para Exibir e esses cachorros e aí só para finalizar aqui esse exemplo

eu vou definir um estilo aqui só pra gente ficar com uma visualização um pouquinho melhor e esse estilo aqui eu vou definir como scoped para que ele não interfira com o resto do nosso programa e aqui a gente vai ter um estilo bem Tranquilo então vou ter uma ul aqui com uma margem margem de 0 pixels e um pading pading também de zer Pixels e aqui no li Deixa eu só colocar o ponto e vírgula aqui que eu esqueci no li eu vou colocar uma list Style para ser None vou botar também um text align

Center e um fon size large Beleza agora a gente pode aqui no nosso app importar o nosso componente renderização listas então renderização listas PR pon Barra e aqui precisa obviamente de um espaço então de Ponto barra components então de ponto barra components barra renderização listas e aqui a gente vai chamar o nosso componente de renderização de listas e eu vou passar aqui o nome esse aqui vai ser o João e aqui eu vou definir os cachorros desse João Então vou criar aqui uma constante que eu vou chamar é cachorros do João Isso aqui vai ser

uma arrei e aqui a gente vai ter vários objetos é com o Nome do cachorro Então vai ter o totó e a idade desse cachorro então o totó vai ter do anos e aí a gente pode colocar mais alguns cachorros aqui então vai ter o totó vai ter também aqui e a por exemplo a laica vai ter 8 anos e vai ter também a flor que vai ter e 6 anos por exemplo E aí eu vou passar aqui para o parâmetro cachorros que esse componente vai receber então cachorros aqui vai receber os cachorros do João

e aqui eu vou precisar usar o binding para Que seja entendido que isso aqui é um objeto então salvando aqui a gente pode voltar lá na nossa aplicação e aqui a gente tem os cachorros do João então componente com renderização de lista tem aqui o João e aqui temos os cachorros então tem o totó com a idade dois a laica com a idade oito e a flor com idade seis Inclusive eu posso aqui colocar eh uns dois pontos depois da idade também da mesma forma só pra visualização ficar e um pouquinho Melhor então esse aqui

é o nosso exemplo de renderização de listas e como a gente consegue ver aqui que a renderização de lista é algo muito simples da gente fazer a gente vai usar o VF vai colocar um forin aqui dentro e aí dentro desse componente dentro desse ali a gente pode acessar aqui cada um dos itens de forma individual E aí a gente pode fazer a formatação ali De acordo com o que a gente achar que é relevante E aí só para finalizar aqui esse exemplo eu vou Querer colocar e um parágrafo aqui opcional caso não tenha cachorros

então caso ele não tenha cachorros eu vou colocar aqui e não tem cachorros né caso a pessoa aqui né não precisa ser necessariamente João tô dizendo João porque é o nome que eu coloquei ali do nosso exemplo então aqui eu vou usar a diretiva V Show A vsh é uma diretiva também parecida com Vl que serve pra gente mostrar ou ocultar coisas dentro da nossa interface Mas ela É um pouquinho diferente da renderização condicional a rização condicional ela vai realmente decidir se ela vai e colocar no código esse pedaço ou esse pedaço ou esse pedaço

então na renderização condicional eu tô decidindo se eu vou colocar no HTML final que vai lá pra página esse texto aqui ou então esse outro texto ou esse outro texto é isso que eu tô decidindo no vsh eu tô decidindo se eu vou mostrar ou não isso Aqui o vow Ele sempre vai adicionar esse código no no HTML Mas a partir ali do vch eu vou decidir se eu vou mostrar ou não esse HTML que já existe então aqui no vch eu vou colocar uma condição booleana Então vou colocar aqui o cachorros pon lenf eh

igual a zero então se eu passar aqui um arreio vazio eu vou dizer que ele não tem cachoro E aí a gente pode até testar isso voltando aqui no app e ao invés do cachorros do João aqui eu vou passar um Arrei vazio então voltando aqui na aplicação a gente consegue ver agora que ele vai mostrar que não tem cachorro e ele não mostrou aqui nenhuma lista porque a minha lista ficou vazia Então essa tag w aqui ela existe lá no nosso HTML só que ela não tá mostrando nada porque ela não tem nada dentro

Mas se a gente for observá-la o HTML a gente vai ver que ela existe Inclusive a gente pode fazer isso aqui então eu posso inspecionar Aqui deixa eu só trazer a minha doc é aqui para a lateral beleza e aqui eu posso inspecionar o meu HTML Deixa eu só trazer isso aqui aqui para visualizar esse componente específico aqui e aqui a gente consegue ver que a gente tem aqui a nossa o ó só que como ela tá vazia ela não tá aparecendo e aqui a gente tem o nosso parágrafo ali não tem cachorro que tá

associado ao V show eu posso até aqui e mostrar para vocês funcionando na Prática ali a questão do V show então vou colocar aqui de volta o cachorros do João Vou salvar voltando aqui a gente vê que a gente tem a exibição do cachorros do João mas a gente tem o parágrafo aqui ainda definido só que ele tá com um display none em comparação aqui no nosso componente de renderização condicional a gente consegue ver aqui que ele só tem o parágrafo referente ao que foi selecionado ali para renderização Então esse exemplo era sobre listas mas

a Gente acabou vendo uma coisa extra aqui que foi essa diretiva V Show Beleza E agora pra gente já ir se encaminhando pro final desse aulão eu quero mostrar mais uma coisa aqui para vocês que são os Slots do vi então já vou criar um novo componente aqui que eu vou chamar de Slots então o que que são os Slots os Slots são formas da gente passar informações de um componente pai para um componente filho também de uma forma ali parecida com a props só que o Slots vão Servir pra gente passar componentes ou então

algum outro código HTML para dentro dos nossos componentes Então as propriedades vão servir pra gente passar dados para dentro do componente e o slot aqui vai servir para a gente passar e outros componentes ou então código HTML para dentro dos nossos componentes aqui que a gente tá e desenvolvendo isso vai ficar um pouquinho mais claro durante o desenvolvimento do exemplo mas eu já vou começar estrutura dele aqui então eu vou Criar aqui um template onde eu vou ter uma div com a classe componente e aqui dentro dessa div eu vou ter por enquanto só um

botão e esse botão vai ter um texto aqui genérico Isso aqui vai ser a primeira versão né sem os Slots a versão básica aqui pra gente ter o nosso entendimento e de como que os Slots entram aqui dentro do View então componente definido aqui eu vou lá no meu app. viw Import tá esse componente então aqui eu vou Importar o Slots from P barra component bar Slots e aqui agora eu vou usar esse componente aqui no nosso template então Slots aqui beleza salvei e agora a gente pode ver aqui o nosso componente Então tá aqui

o nosso botão vou até colocar o título aqui nesse componente para dizer que esse aqui é o componente com Slots para ele ficar da mesma forma que os outros Beleza então tá aqui o nosso componente com Slots e a Gente tem o nosso botão então tenho aqui o botão e eu quero alterar esse botão Então vou querer alterar o texto que tá dentro desse botão e quando eu falo em alterar o texto que tá dentro desse botão a gente já pensa ah Vou definir uma propia ali que vai ser o texto do botão e aí

eu vou passar isso via props poderia fazer isso se o texto do botão fosse sempre apenas um texto mas ess se o texto do botão for outra coisa né vamos supor que eu quero colocar dentro Do meu botão um ícone então eu vou ter um componente ali que vai indicar esse ícone e vou ter ali o texto que eu quero associado a esse ícone isso eu já não conseguiria fazer por props então é aqui que entram os Slots então eu vou voltar aqui pro meu vs code e vou acessar o meu App pview pra gente

tentar fazer isso né pra gente tentar passar para dentro do botão e colocar como conteúdo do botão um ícone com um texto Então a primeira coisa que a gente vai precisar fazer Aqui vai ser mudar a forma como a gente tá chamando o nosso componente de Slots Então até agora a gente estava chamando os componentes dessa forma aqui então eu tenho apenas uma tag aqui que vai ser a tag de abertura e ela já atua também como tag de fechamento né então todas essas aqui são tags que já estão fechadas pra gente utilizar os slot

e ter essa possibilidade de passar e componentes para dentro do nosso componente a gente não vai poder Utilizar dessa forma a gente vai precisar definir aqui a tag de abertura e a tag de fechamento e aí aqui dentro dessas tags eu vou poder colocar o meu conteúdo então aqui dentro dessas tags eu vou poder colocar o meu conteúdo então se eu quero colocar um ícone e um texto eu posso colocar o ícone e o texto aqui dentro dessa tag dentro dessa tag Slots aqui que representa dentro o meu componente então aqui eu posso colocar esses

dados que eu quero passar dentro Dessas tags aqui slot então quero colocar um ícone e um texto vamos pegar um ícone aqui qualquer então eu vou acessar aqui o tabler icons para pegar um ícone qualquer aqui em formato e em formato svg então aqui já tem um ícone será que eu consigo pegar esse ícone não vou pesquisar aqui eh vou pegar deixa eu ver se algum desses ícones aqui vou pegar um ícone de home Então vou Pesquisar aqui home ele vai me trazer algumas casinhas aqui e eu vou clicar nesse botão para copiar o svg

E aí eu vou vir aqui e vou colar o meu svg então o svg aqui ficou um pouco grande deixa eu e fazer aqui a quebra dele para facilitar a nossa visualização Então vou até ativar aqui o Word wrap para ficar um pouquinho mais fácil fazer essa quebra do svg aqui então aqui a gente tem a nossa tag Svg que representa ali uma casinha e aqui eu vou colocar o nome home Então é isso aqui que eu quero que seja o conteúdo do botão Então o que eu quero que seja o conteúdo do botão é

o que tá dentro aqui do meu componente eh Slots E aí para fazer com que isso aqui apareça lá dentro do meu botão eu vou usar aqui dentro do botão uma tag específica do View que é a tag slot então o que que isso aqui faz isso aqui vai renderizar Isso aqui vai dizer aonde que Eu vou colocar o código que eu tô passando aqui no corpo eh dessa tag então aqui eu tô dizendo olha dentro do meu slot eu vou querer ter esse ícone com essa casinha eu vou querer ter esse ícone e esse

texto home beleza eu disse isso aqui pro View só que eu também preciso dizer pro View aonde que ele vai colocar essas informações então aqui eu só tô passando essas informações Mas aonde que ele vai colocar Onde tiver essa tag slot então isso aqui significa Que o conteúdo que eu tô passando aqui dentro vai ser o conteúdo colocado dentro do botão e aí a gente pode vir no navegador aqui para conferir isso então posso voltar aqui e aqui a gente tem a casinha com o texto que é justamente o que a gente queria né aqui

ficou um pouquinho desalinhado mas eu não vou est entrando em CSS aqui para arrumar isso porque acaba não sendo o foco o foco aqui é que a gente consegui passar eh a casinha o ícone da casinha e também a Palavra home para o nosso componente Então essa aqui é a primeira forma da gente trabalhar com Slots que é criando um único slot genérico aqui e aí todo o conteúdo que a gente passar aqui vai ser renderizado dentro desse slot genérico isso aqui acaba sendo interessante quando a gente pensa na construção de layout de uma página

por exemplo Então vamos pensar que a gente tem ali uma página de um site de notícias e a aí a gente tem um layout padrão ali que vai Ser é usado em todo o site mas a gente vai ter uma parte de conteúdo que vai mudar e o conteúdo ali que vai mudar pode ser a notícia que tá sendo exibida então eu poderia ter um componente que faria todo esse layout E aí o conteúdo eu usaria aqui o slot então todo o layout ficaria dentro de um componente e eu vou inserindo é o conteúdo que

vai ser exibido dentro daquele layout conforme a necessidade utilizando o slide Então esse aqui é um caso de uso interessante pra gente trabalhar com os Slots né a definição de layouts mas a gente também tem a opção aqui dentro do View de trabalhar com Slots que T nomes então a gente pode ter não apenas um slot mas vários Slots dentro aqui da nossa definição que vão colocar coisas em lugares diferentes então eu posso aqui ter um slot que vai ser responsável por renderizar o meu ícone e um outro slot que vai ser responsável por Renderizar

o meu texto eu poderia fazer isso eu poderia fazer isso e eu vou fazer para mostrar aqui para vocês como que a gente faz então vamos colocar aqui eh que eu vou ter um slot e aqui no caso do slot como ele só indica onde eu vou renderizar eu nem precisaria ter a tag de fechamento ali separada Então vou colocar aqui eh o meu outro slot aqui e aqui eu vou ter dois Slots agora um slot vai renderizar o meu ícone e o outro vai renderizar o meu Texto como que o View vai saber E

qual é qual a partir da propriedade name que eu vou passar para cá então esse primeiro slot eu vou nomear ele como sendo o meu ícone Então vou querer exibir dentro desse slot o meu ícone e nesse segundo eu vou querer exibir aqui o meu texto Então agora o View já sabe que eu tenho dois lugares onde eu quero colocar essas informações que eu vou receber ali no corpo da tag e ele vai colocar essas informações nesses lugares desde que é Elas sejam passadas de forma correta então aqui no meu App para que eu possa

fazer com que esse svg aqui seja renderizado dentro desse slot ícone eu vou precisar aqui envolver esse svg em uma tag template Então vou envolver ele aqui beleza na verdade não agora sim beleza então coloquei o meu o meu svg aqui dentro desse template e nesse template eu vou precisar colocar a diretiva V slot e aqui o auto complete colocou essa atribuição um string mas eu Não vou precisar disso eu vou logo em seguida do V slot colocar dois pontos e o nome do slot Então esse aqui vai ser o slot ícone então o que

que eu tô dizendo o que tiver dentro desse template coloca no slot que se chama ícone que é esse slot aqui e depois eu vou fazer a mesma coisa aqui para o home Então vou pegar aqui uma tag template também vou envolver esse texto numa tag template e vou usar o v slot aqui para ser o meu texto então o que que eu tô dizendo aqui Renderiza isso dentro do slot ícone e isso dentro do slot texto Então vou salvar aqui e a gente pode ver que a gente ainda vai ter o mesmo resultado aqui

então a gente ainda tem a renderização funcionando direitinho mas a gente poderia vir aqui no nosso componente agora e inverter a ordem então agora primeiro eu vou querer exibir o texto e depois o ícone só pra gente ver aqui eh o resultado Vou salvar e aí a gente pode acessar aqui o Nosso navegador novamente e aqui a gente vê o resultado agora a gente tem o texto primeiro e o ícone depois eu vou deixar aqui o ícone primeiro como tava antes então vou desfazer aqui essas alterações mas só pra gente ver aqui a gente poderia

eh fazer essa alteração também aqui desses conteúdos de forma rápida só alterando os Slots E aí para finalizar esse exemplo eu quero aqui mostrar como que a gente poderia colocar um valor padrão dentro desses Slots Então vamos Supor aqui que no meu texto Eu quero ter um valor padrão para ter um valor padrão eu não posso já fechar a tag assim imediatamente Eu precisaria aqui ter uma tag de abertura e uma de fechamento e no corpo dessa t tag slot aqui que tem o nome texto eu vou definir o valor padrão então aqui o valor

padrão poderia ser botão e aí se eu não passar nada para esse slot texto então se eu vier aqui e apagar essa home por exemplo a gente vai ter aqui o valor padrão como sendo botão Se eu passar alguma coisa ele vai e utilizar esse valor que eu passei sen Não ele cai naquele valor padrão ali de botão e com isso pessoal a gente chega no final do nosso aulão de View eu sei que teve muito conteúdo aqui nesse aulão mas durante esse aulão a gente viu as bases do uso de componentes dentro do View

e eu tenho certeza que com o que tu aprendeu nesse aulão tu já consegue começar a desenvolver as tuas aplicações usando esse Framework inclusive se tu quiser ver uma aplicação View sendo construída do zero aqui no canal usando os conhecimentos que a gente viu nesse aulão deixa aqui nos comentários que a gente pode trazer esse conteúdo e agora para encerrar com chave de ouro eu tenho uma surpresa para vocês mas eu só conto Qual é a surpresa se tu deixar o like no vídeo se não tiver like não vai ter surpresa Inclusive eu vou ficar

aqui esperando tu deixar o like no Vídeo olha que se não deixar o like eu não vou contar Qual é a surpresa Ah tá bom a surpresa é que no repositório desse aulão no github cujo link tá aqui na descrição do vídeo vocês vão poder ter acesso não só ao código que eu desenvolvi aqui na aula mas também a diferentes ões dessa aplicação Zinha que a gente criou aqui usando a options api e a composition api com script setup e sem script setup então vou deixar aí pra referência e pra consulta de vocês essas Três

versões utilizando essas três formas diferentes da gente escrever o nosso JavaScript aqui dentro de uma aplicação View para que vocês possam comparar essas diferentes formas de escrever esse JavaScript e também possam aí ter essas diferentes versões como referência é uma surpresa tão boa que até vale a pena se inscrever no canal não vale eu me inscreveria se fosse você então surpresa entregue eu vou nessa até [Música] Mais n