Curso gratuito Vue.js 3 INTRO #3 - Componentes de arquivo único SFC

e o jovem Thiago Matos aqui Nesta aula a gente vai dar show no quesito componentes vem comigo cara na verdade eu quero te explicar o que é single File on next esse cara aqui ó single while componentes ou componente de arquivo único jeito é se ao concerto 5 Faial com sfc o que é que seria isso Thiago vamos lá no shopping aqui para ter espaço cara a gente abre Esse é ponto viesse época viu nada mais é do que um componente Então você viu aqui que a extensão do arquivo é ponto viu porque é o

navegador não vai ler esse arquivo quando viu e por isso que a gente precisa dessa arquitetura de todas as dependências para poder compilar esse arquivo aqui e arquivos JavaScript Tá certo então esse é o primeiro. Todos os componentes que a gente criar tem que ter ponto viu Tá certo e esse componente activo de arquivo 1 e no componente você viu aí já na aula passada deve ter percebido Você tem uma camada de template que é o nosso HTML uma camada de JavaScript que é o nosso JavaScript e a camada de estilo O que é o

nosso CSS Tá certo então componente de arquivo único porque em um único arquivo você tem as três camadas necessário o que é incrível cara porque você copia esse componente para outra pasta para outro projeto para qualquer lugar você leva tudo você leva todas as lógicas do componente você leva o estilo dele né Cê leva o template tão isso aí é fantástica foi uma sacada muito muito boa dos criadores do Vegeta Tá certo então conhecimentos cara vamos aqui criar um componente de teste para gente beber então você vê aqui que ele tem um hello world né

que a gente já veio na aula passada e essa componente a gente pode utilizar em qualquer lugar na nossa aplicação E é só fazer a importação acerta já estão entrando no assunto bem avançadinho aqui mas isso é e beijar do início que a gente vai mexer e componente quase que toda aula eu vou querer aqui um arquivo é não sei porque minha ideia atualizou e agora quando eu crio arquivo novo Olha só o meu campo de input e ele fica muito pequeno não dá para ver mas enfim eu vou querer um arquivo chamado aqui de

renda. Viu Tá certo reta. Ouviu que vai ser o rei da do nosso projeto Digamos que a gente esteja construindo um site alguma coisa normal E aí que é que eu faço template beleza aqui vai ter uma dif né ela aí eu tenho aqui e escrito que vai ser o nossos vídeos e esses clipes de cara você pode seguir assim mesmo padrão aqui ó Sem problema nenhum Export default Ou seja você tá exportando o objeto normal de já descobrimos que o verde essa vai recorrer reconhecer esse objeto aqui vai saber qual é o nome do

componente a e vai saber tudo as propriedades do componente ou seja galera aqui o default aqui onde vão estar todas as propriedades deste componente que aí o que a gente vai ver aula após aula isso daqui cara chega me emociona chega eu fico empolgadíssima beleza e aí eu tenho também o a camada disse SSD estilo e o que que eu vou colocar aqui já vou colocar aqui é dar é dó é da eu não sei porque ele tá usando aqui de algum erro Olha só o excelente acusando aqui por isso que muita gente não gosta

porque ele é um pé no saco a componente nem me regra shield ou os Big Mouth World não é porque você tem uma tag HTML head isso aqui até interessante galera foi até bom ter acontecido isso só você sabe que você não HTML5 Você tem uma tag chamada arreda tem uma pega e chamada section certo e assim sucessivamente né E aí você tá querendo componente chamado Renda quando você importar esse componente nesse caso aqui vamos lá vamos lá vamos o que o o baile vamos seguir o baile aí a gente vai importar O componente exatamente

como tá aqui isso daqui a JavaScript você tá galera você tem que ter noção do que está acontecendo a dessa Import Export se você ainda não é familiarizado com Import Export deixa eu dar uma pausa aqui e vim aqui ó youtube.com/Thiago Matos web lá nesse nesse canal aqui desse cidadão ele tem um monte de coisa interessante é java script em módulos deixa eu colocar aqui módulos Deixa eu ver se eu acho pronto aqui ó es6 Import Export módulos né é utilizando funções dinamicamente eu já assisti esse vídeo aqui que é onde eu abordo bastante nessa

questão de Import e Export Tá certo então vamos importar aqui o nosso nosso reza é importa queda geralmente com letra maiúscula from aí aqui né outro componente barra queda aí Seguindo aqui o padrão tem que declarar esse cara aqui dentro dessa os componentes para poder Ele está ele ficar disponível né no template aí agora vou pegar esse cara aqui e vou jogar no template e da aí agora foi o pepino se você tem um você tem um elemento HTML chamado renda e é isso aí que a seguinte não gosta então é 20 é criar nome

de componentes e sejam parecidas o que seja iguais de elementos HTML Então nesse caso aqui a gente utiliza de renda ou seja o único cabeçalho do nosso projeto de reza e aqui também de rezar bom então se você quer saber mais sobre como nomear componentes etc o próprio na própria documentação do vídeo existem então a gente coloca o de aqui para dizer que é o cabeçalho porque a gente só vai utilizar esse cara provavelmente uma vez no topo da página Tá certo E lembrando que componente galera a gente pode colocar dessa forma como uma tag

HTML abrindo e fechando normal faz a gente também pode simplificar dessa forma aqui beleza então se eu salvar aqui deixa eu ver eu passei o meu pregado não está sendo e Alice já não serve para poder está nosso projeto então eu espero galera que esse daqui né esse reta aqui aparece aqui em cima a atualizar aqui o pai ele apareceu é da hora e aqui eu posso agora estilizar colocando um background background sei lá preto e uma fonte e cor branca a roupa branca tá aí que é que vai acontecer Olha lá a pedra não

pegou claro eu não apliquei aquela se aqui ela Lógico agora sim pegou a classe renda Então veja aqui dentro do componente eu tenho meu template em HTML Eu tenho mil inscritos que a gente vai mergulhar isso nossa mais aulas eu tenho aqui também o meu estilo e o estilo eu posso jogar aqui não é directamente né e utilizar ele não tem plástico E aí cara quando eu pegar esse componente colocar em qualquer outro local eu já levo tudo de uma vez só perfeito e se você observar o código aqui né é o código HTML normal

tem um Reza a classe e o conteúdo no meu renda sentem Sem problema nenhum e lembrando de novo a gente importou isso aqui eu vou frisar né para ficar claro a gente importou esse componente no nosso componente principal e esse conceito é interessante deixar bem claro para vocês porque a gente vai importar componente dentro do componente toda a hora e aqui no curso Inclusive o seu projeto real ainda mais um projeto de grande porte Então o que a gente fez aqui dentro de a gente importou esse componente daqui o de renda para a gente utilizar

ele dentro do tempo a gente tá certo e para possibilitar ele ficar disponível para gente dentro do template a gente precisa declarar esse cara aqui e como é que declara a esse esse cara hora a gente já havia anteriormente que esse objeto Aqui é onde tem as propriedades do componente em questão então no componente em questão eu digo assim olha eu vou utilizar componentes externos e quais são os componentes externos são esses daqui aí a gente passa o objeto uma lista né ela essa propriedade componentes vai declarar o que é a gente vai utilizar um

template de componentes externos Tá certo então a gente pode importar aqui galera quantos componentes a gente quiser contanto que a gente dá é claro esses componentes aqui eles vão estar né um amigo para ser utilizado com template olha só que acontece se eu não importaria aqui o melhor se eu tirar ele aqui de componentes Provavelmente o dia seguinte já vai reclamar né vai dizer aqui ó é Stephen Boyd Neve Stitch ou seja esse componente foi definir o mas nunca usada certo e do modo invés se eu tirar o reporte aqui essa variável aqui não existe

né é de regras do nosso de faz isso aí por conta do excelente que já vem embutido aqui no projeto vídeo é ficar interessante que vai manter o seu código padronizada porque se for essa para você esquecer isso daqui aí você não deixa a lixo no seu projeto Então se acostume com esses problemas aí é seguinte é bem chatinho ele vai reclamar de uma, que você colocar fora do lugar se você assim quiser você deixa eu ver se ele está configurado com ou sem, acho que ele não se importa então você pode configurar ele de

uma forma aqui se você colocar a Bíblia no final ele reclama ou se você não colocar e ele reclama então é muito interessante para você deixar o código padronizado eu gosto muito porque se você decide não coloca a virgula no final das coisas não coloca eu não crie um objeto tá certo aí o próximo objeto você já vai colocar, no final aí você já começa o código perder qualidade isso não é interessante Beleza então EA seguinte é para isso galera e aí também não deixar lixo no código né Por exemplo isso daqui né funcionaria porque

ele tá importando você não tá usando então não tem problema nenhum ou a mesma coisa de você estar criando uma variável aqui uma constante chamada nem é igual a Long Time se você não tá usando essa variável lugar nenhum Mas isso não vai quebrar seu código mas o excelente vai acusar que essa variável nunca foi usado Então você nunca foi usada delete é o Se acostume porque isso é muito importante para a qualidade do seu crânio certo mas um pouco dessa lei componente Espero que tenha ficado Tudo Claro a questão do de renda não utiliza

componente com nomes parecidos com HTML para não ter risco de dar conflitos então partir de agora galera a gente vai seguir em frente utilizando componentes dessa forma e eu preciso que você esteja já familiarizado então se tiver dúvida já sabe deixa aqui embaixo nos comentários que eu pessoalmente eu vou te responder ou me procura no Instagram lá e fala no privado diretamente comigo eu fico por aqui te vejo aí nas próximas aulas e [Música]