Curso aprofundado de Vue 3 para iniciantes

1. Boas-vindas ao curso!: Ei, bem-vindo a este curso. Este curso vai ensinar-lhe tudo o que você precisa saber para começar com Vue.js e também todos os recursos novos e melhorados com o Vue versão 3. Você construirá esses quatro projetos enquanto aprende com mais de 130 aulas de vídeo em HD claras e organizadas, cada uma fornecida com legendas e também o código-fonte para cada estágio do projeto. Então você não deve ter nenhum problema se você ficar preso. Quem sou eu? Meu nome é Chris e sou um desenvolvedor web do Reino Unido. Construí meu primeiro site há mais de 20 anos. A web mudou bastante durante este tempo, mas minha paixão por aprender e também ensinar isso ainda permanece. Eu também usei Vue.js desde os primeiros dias, então eu tenho muita experiência tanto usando para meus próprios sites e também com o ensino disso também. Estou entusiasmada com esta, e vejo-te na aula. 2. O que você vai precisar para fazer este curso: Para começar com este curso, há muito pouco que você vai precisar. Se você está assistindo a este vídeo, as chances são, você já tem a maioria das coisas que você precisa já configurar. Vamos precisar de um navegador da Web e eu vou usar o Google Chrome ao longo deste curso, mas você pode usar qualquer outro navegador importante. Também para editar o código, precisaremos de um editor de texto. Vou usar o Visual Studio Code e você pode encontrar o link aqui. Isso também é gratuito para usar também. Se houver algo que precisamos de muito tempo durante o curso, vamos baixá-lo. Não haverá compras adicionais para fazer, então tudo o que você precisa é uma ânsia para aprender o Vue 3. Vou começar isto no próximo vídeo. 3. Compartilhe seu trabalho em Skillshare!: Ao fazer qualquer curso, é muito importante não adquirir o hábito de acompanhar apenas para terminar outra palestra. Reserve um tempo para processar cada lição, revisar o código que você escreve e pensar em como você mesmo pode abordar essas soluções. Com isso em mente, esta aula é baseada em projetos e isso lhe dá a oportunidade de realmente criar algo pessoal e único. Você não precisa se perder muito e se desviar da aula, e pode até mesmo dar um passo atrás depois de terminar a aula e voltar e fazer algumas mudanças no projeto depois. Isso realmente lhe dará uma boa chance de praticar o que aprendeu fora da aula. Além disso, lembre-se de compartilhar seu projeto também aqui no Skillshare. Não só vou dar uma olhada, mas também inspirará outros estudantes. Para obter mais informações sobre o projeto da turma, acesse a guia Projeto e Recursos, onde você pode não apenas fazer o upload do seu projeto, mas também ver outros projetos de classe. Com isso em mente, estou ansioso para ver o que você cria e carrega aqui no Skillshare. 4. O que é Vue.js e o que pode fazer?: No seu mais fundamental Vue.js é uma estrutura para construir interfaces de usuário. Seu principal trabalho é lidar com uma parte do aplicativo do site que o usuário vê e interage com. Ele leva em alguns dados e exibi-lo para o usuário. Como o Vue é responsável pela interface do usuário, ele precisa de alguns dados para trabalhar. Os dados que recebe podem vir de qualquer forma, como de um servidor web, uma API. Podemos armazená-lo dentro de nossa aplicação e também a partir da entrada do usuário também. Para iniciantes, pode ser muito amigável para começar, apenas precisando de algum HTML, CSS e um pouco de conhecimento em JavaScript. Assim que você ficar mais confortável com o Vue.js e para usuários mais avançados, você também apreciará o quão rápido e escalável Vue pode ser. Junto com um ecossistema maduro também que estende o núcleo Vue.js, se necessário. O núcleo Vue.js em si é muito leve e pode ser usado desde simplesmente controlar uma única parte de um site, até lidar com um aplicativo complexo de página única. Se você ainda não tem certeza do que é um aplicativo de página única, haverá mais sobre isso mais tarde no curso. No seu mais simples, imagine se tivéssemos um site de portfólio existente, que foi criado apenas com HTML e CSS. Mais adiante, podemos querer adicionar alguns novos recursos ou seções a este site, como nossos tweets recentes. Poderíamos percorrer o caminho mais longo e copiar manualmente todos os nossos tweets em nosso arquivo HTML cada vez que ele cria uma nova postagem ou um novo tweet, ou provavelmente gostaríamos de lidar com isso com a API do Twitter para puxar nossas postagens recentes automaticamente. Com esse caso de uso, poderíamos usar Vue.js para controlar apenas uma parte do nosso site, ou mesmo várias partes, se quiséssemos. Tudo o que precisamos fazer é vincular o link CDN Vue.js, que é um link para a biblioteca do Vue. O link CDN é inserido em um arquivo HTML, assim como qualquer outro link CDN. Então podemos acessar recursos do Vue a partir de um arquivo JavaScript. Voltaremos a isto e tentaremos isto muito em breve. Além de controlar uma parte da interface do usuário, Vue também pode controlar nosso aplicativo de página inteira também. Usaremos uma ferramenta no próximo projeto chamado Vue CLI, que nos permitirá criar esses aplicativos, e como eu mencionei antes, precisamos de uma fonte de dados como alguns produtos e [inaudível] eles após o Vue que pode então exibi-los para o usuário de qualquer maneira que quisermos, juntamente com qualquer alteração de dados e atualizações ao longo do caminho também. 5. Visão geral das mudanças no Vue 3: Vue.js versão 3 é uma regravação importante. Um que surgiu por várias razões. A base de código para o Vue 2 foi rápida, eficiente no desempenho, mas sempre há espaço para melhorias no design atual. Liderado por aprender e descobrir coisas novas sobre o projeto, juntamente com a capacidade de acessar agora novos recursos JavaScript que estão disponíveis dentro de navegadores modernos, este vídeo vai lhe dar uma visão geral de algumas das principais mudanças . Então, mais tarde, quando rolamos um pouco mais código Vue.JS com uma melhor compreensão de como ele funciona, haverá algumas seções mais dedicadas para nos fornecer mais detalhes. Talvez não seja o que um túmulo que se um pouco disso não faz sentido no momento. Em primeiro lugar, quero abordar um grande equívoco sobre o Vue 3. Desde o anúncio da nova versão, muitas pessoas pensam que tudo o que sabem até agora sobre Vue está obsoleto. Isto não é verdade. Você pode usar a biblioteca Vue 3 e ainda direito Vue aplicativos praticamente da mesma maneira que você fez no Vue 2. Muitas das mudanças ou sob o capô melhorias de desempenho que o desenvolvedor não está ciente diretamente, Vue 3 tem alguns recursos também, mas estes são geralmente adicionais. Significa que se você tem algum conhecimento do Vue até agora, tudo isso é totalmente transferível. Uma das grandes melhorias do Vue versão 3 é o desempenho. Isso foi aprimorado de várias maneiras, e uma das principais coisas é usando um recurso ES6 chamado proxy. Isso resulta em um sistema de detecção de alterações mais rápido e eficiente. Esta é uma parte fundamental da reatividade do Vue 3, que é um processo de reação do Vue às mudanças e atualização quando necessário. Por exemplo, se um usuário atualizou uma quantidade de item em um carrinho de compras, também gostaríamos que o preço total fosse atualizado também. Este é o processo de reagir a uma mudança. No Vue 2, qualquer dado que tivemos quando carregamos é reativo automaticamente, pode perder algumas alterações de dados, e há outra parte do aplicativo que depende dele. Essa parte também será atualizada. Se o usuário alterar seu nome de usuário, e isso foi exibido na seção de cabeçalho, ele atualizaria seu automático também. uma das advertências do sistema de reatividade Vue 2 era se uma nova propriedade fosse adicionada ao Vue.JS após o aplicativo ter carregado, ele não seria reativo. Isto é algo que os proxies resolveram e vamos olhar para estes mais detalhados mais tarde. Reduzir todo o tamanho do código também pode melhorar as coisas também. Quando usamos uma estrutura, muitas vezes não precisamos de todos os recursos que ela fornece. Ou seja, quando um aplicativo é carregado, podemos estar baixando JavaScript ou ativos adicionais que não precisamos para nosso projeto. Para ajudar com isso, o Vue 3 é mais modular. Portanto, ferramentas mais modernas podem descartar qualquer código desnecessário, mas usando o tamanho do pacote. Outra grande melhoria é a reescrita do DOM virtual. Novamente, há um vídeo dedicado mais tarde, uma vez que ficamos mais confortáveis com o Vue.JS, mas por enquanto a atualização virtual do dom significa que agora você pode verificar de forma mais eficiente quais elementos mudaram após uma atualização. A biblioteca Vue 2 foi escrita em JavaScript regular. Ao longo do tempo, percebeu-se que um projeto desse tamanho se beneficiaria com a introdução de tipos, que ajudará a reduzir o risco de bugs. Mesmo que a causa do Vue 3 seja reescrita usando o texto datilografado, os desenvolvedores podem escrever código mesmo em JavaScript regular, ou o texto datilografado 2 agora totalmente suportado. Typescript estava disponível no Vue 2 coloca muito mais profundamente integrado no Vue 3 e também não requer nenhum adicional [inaudível]. A API de composição é provavelmente o recurso mais falado no Vue versão 3, e também o único recurso que causou o maior mal-entendido sobre como o Vue 3 nos forçará a escrever aplicativos de uma maneira completamente nova. Como mencionado anteriormente, a API da competição não se destina a substituir tudo o que sabemos sobre o Vue até agora. Ele se destina a ser puramente aditivo e nos dá uma maneira tornar nosso projeto mais sustentável e reutilizável à medida que cresce. Vamos mergulhar nisso muito mais tarde. Além disso, também temos alguns recursos do Vue para explorar, como portais, fragmentos, suspense e muito mais. O takeaway chave é Vue ainda é Vue, independentemente se é a versão 2 ou 3, mas a versão 3 tem algumas melhorias de desempenho agradáveis, juntamente com alguns recursos adicionais que você pode usar. Agora tem um pouco de fundo, vamos passar a escrever algum código Vue. 6. Código fonte do projeto: Ao aprender uma nova habilidade e codificar nossos quatro projetos, provavelmente haverá um ponto em que você vai ficar preso. Às vezes, seu código simplesmente não funciona, e você não consegue detectar esse erro. Agora, para ajudar com isso fornecido com o curso após cada uma das palestras é o código-fonte em cada estágio individual, e você pode baixar isso do GitHub. Dentro do GitHub e do meu perfil, que é chrisdixon161, e depois /vue-3-curso. Aqui onde você encontrará todo o código-fonte do projeto para este curso. Deve ser muito fácil de navegar. No topo, temos os quatro primeiros projetos numerados 1-4, e estes estão na mesma ordem que você os levará durante o curso. Por exemplo, se você preso no projeto de portfólio, clique nele, e então veremos em ordem todas as palestras que irão passar para esses projetos. Eles são numerados, então temos o número 2, que é o número da seção e o vídeo 1, seção 2, vídeo 2 e, em seguida, o nome do vídeo. Você pode clicar nisso, e ver o código final após este vídeo, e entrar em qualquer um desses arquivos. Junto com isso, se voltarmos para a raiz do nosso repositório, também temos os arquivos iniciais para todos os quatro do nosso projeto. Os arquivos iniciais irão garantir que estamos nos mesmos números de versão ao progredir darão um caminho suave ao longo deste curso, e vamos dar uma olhada em como configurá-los à medida que avançamos. Para acessar estes, precisamos clicar neste botão verde. Haverá um menu suspenso, e você pode baixar este repositório completo como um arquivo ZIP. Então isso lhe dará acesso a todos esses iniciantes e a todos os exemplos de código também. Vá em frente e baixe isso, e coloque isso em algum lugar conveniente, como sua área de trabalho, e podemos pegar os arquivos iniciais quando necessário. 7. Introdução: primeiro contato com o Vue.js: Para iniciar sua jornada de aprendizagem do Vue, vamos aplicar muitos conhecimentos que aprenderemos durante esta seção em um projeto. Este projecto será relativamente simples. Vamos baixar um HTML, iniciar um arquivo e, em seguida, começaremos o processo de conversão desse arquivo para usar Vue.js. Aprenderemos todos os fundamentos que você precisa saber, como eventos, veremos o ciclo de vida do Vue, encontrando dados, também analisaremos listas, métodos e muito mais. Vamos entrar e te vejo no próximo vídeo. 8. A instância do Vue: Em um vídeo anterior, mencionamos Vue.js e controlamos todas as partes de uma interface de usuário. Para obter alguma experiência de Vue.js, agora vamos tomar um site HTML simples, que é um site pessoal, e aplicar alguns Vue.js para criar uma seção de blog. Podemos saltar para Vue.js, o projeto inicial está disponível para download a partir do repositório GitHub. Para encontrar isso, você precisa ir para este link que é github.com/chrisdixon161/vue-3-course. Você também pode encontrar isso como um repositório de pinos do meu perfil. Uma vez que você entrar nesta seção, vamos ter todo o código que você precisa para este curso. Atualmente temos apenas o início do portfólio, mas sua versão terá todo o código de exemplo que é necessário para outros projetos, juntamente com também o código final para cada vídeo para que possamos comparar se você ficar preso. O que você precisa fazer é baixar todo esse repositório. Então, se você entrar na seção de código, você pode baixar isso como um arquivo zip. Vamos abrir isto. Então, a partir daqui, podemos extrair toda a informação que precisamos. Então, vamos apenas colocar isso na área de trabalho e abrir isso. partir daqui, temos o início do portfólio, que é apenas o HTML básico e CSS, que vamos usar para testar como a view funciona em um projeto simples. O que você precisa fazer é renomear isso, eu vou apenas manter isso como um portfólio, e então manter isso separado do resto do código. Abra isso no código do Visual Studio ou no editor de sua escolha. Então aqui dentro, tudo vai ver é uma página de índice, que é apenas um HTML regular que temos de nossa seção de cabeça, vamos vincular a uma fonte, nós vinculamos a uma folha de estilo fornecida, temos uma seção de cabeçalho básico que tem um título, e, em seguida, alguns links de navegação. Então temos esta seção do blog. Esta seção de blog só tem dois artigos HTML estáticos, eu vou fazer isso dinâmico com Vue.js. O importante agora está no fundo, você tem um script que é um link para o CDN do Vue, então este é um link para a biblioteca de chamadas do Vue que vamos usar para explorar alguns dos recursos do Vue. Isso significa que não precisamos fazer nada especial, como baixar pacotes. Tudo o que estamos fazendo aqui é vinculá-lo diretamente ao Vue.js. Em seguida, podemos incluir algumas das características em nosso projeto. Para começar com Vue.js, vamos criar um novo arquivo, que vai ser um arquivo JavaScript, e eu vou chamar isso de script.js. Podemos vincular isso como qualquer script regular para baixo na parte inferior do nosso HTML, e nós adicionamos o atributo fonte que vai vincular ao script.js. Também podemos abrir esta página de índice no navegador, podemos clicar duas vezes sobre o índice ou arquivo HTML dentro do nosso projeto. Ou se estiver usando um Visual Studio Code, podemos clicar com o botão direito do mouse nesta guia e, em seguida, copiar o caminho, colar isso em. Este é o projeto inicial, que é apenas HTML. Vamos começar convertendo essas seções HTML para serem controladas pelo Vue.js. Para fazer isso, vamos para o arquivo de script. A primeira coisa que precisamos fazer é criar uma nova instância do Vue. Fazemos isso com o Vue, V maiúsculo e, em seguida, usamos um código de função para CreateApp. Temos acesso ao Vue.createApp já que estamos usando o link CDN na parte inferior da nossa página de índice. Nos próximos vídeos, também passaremos um objeto Options que é instância também. Mas, por enquanto, precisamos montar este aplicativo Vue em nossa página de índice. Para fazer isso, precisamos dizer ao Vue exatamente onde queremos montar. Poderíamos controlar a página HTML completa se você quisesse. Todos podem montar em apenas um certo caminho, se você quiser. Por exemplo, esta instância do Vue vai controlar nossa seção de blog, que é um wrapper para todos os nossos artigos. Teremos esta seção com a idéia de blog, então vamos fazer uso disso e dizer Vue.js que esta seção é a parte do HTML que você deseja controlar. Isso tem o blog id, então tudo o que precisamos fazer é ir até CreateApp e, em seguida, chamar o método de montagem onde vamos passar nos elementos que você deseja vincular. Isso é exatamente como seletores CSS regulares, então, se isso é uma idéia, usamos o hash, usamos o [inaudível] ou podemos direcionar diretamente qualquer um de nossos elementos pelo nome, que possamos direcionar esta seção, e queremos direcionar para o blog. Embora aqui estamos visando um elemento de seção, não importa o tipo de elementos que montamos. Pode ser a seção do corpo, pode ser DIV, qualquer coisa está completamente bem. Também podemos criar várias instâncias do Vue. Se duplicarmos isso, poderíamos chamar novamente Vue.CreateApp, mas desta vez poderia montar em uma seção diferente. Por exemplo, se quiséssemos ter esta instância do Vue para controlar o blog, e então queríamos também controlar a seção de cabeçalho, tudo o que precisamos fazer é passar em nosso seletor diferente e vamos para o elemento de cabeçalho, que é a seção de cabeçalho que contém nosso cabeçalho de nível um, ao lado de nossos links de navegação. Também podemos alterar este título para ser o nosso nome, e também o mesmo para o título da página também. Isso significa que agora criamos dois aplicativos separados do Vue que são completamente independentes e podem ter seus próprios dados, como veremos no próximo vídeo. 9. Dados e listas: Com o nosso aplicativo agora montado, agora precisamos de alguns dados para trabalhar. Para fazer isso, vamos adicionar algumas opções para criar aplicativo. Aqui dentro, vamos passar um objeto, e este objeto vai ser onde vamos trabalhar a partir de agora. A primeira opção que vai para este objeto é a propriedade data, que sons é usado para manter os dados do nosso aplicativo, que às vezes é referido como estado. Estado é uma função que vai retornar um objeto. Isso irá conter todas as nossas propriedades de dados, que você pode pensar como um lugar para armazenar as informações que nosso aplicativo precisa. Assim como faríamos com variáveis. Se você já usou o Vue 2 no passado, a propriedade data poderia ser declarada como uma função como esta ou também um objeto, tanto o Vue livre como agora deve ser sempre declarado como uma função. Voltar ao nosso índice, nosso HTML. Lembre-se que temos um aplicativo Vue montado na seção de cabeçalho e também na seção de blog logo abaixo. que significa que agora podemos usar o Vue [inaudível] controlar qualquer um dos dados dentro dessas duas seções. Atualmente, trabalhamos em, dentro da seção de cabeçalho, o que significa que podemos produzir nossas propriedades de dados dentro desta seção de cabeçalho. O primeiro que vou controlar da aplicação do Vue vai ser o título do portfólio. Então, se colocarmos nosso nome aqui fora, e então podemos armazenar isso dentro de uma propriedade chamada “nome”. Esta será uma string, então adicione isso dentro das aspas. Agora, em vez de ter esse “nome” como HTML codificado, agora podemos usar essa propriedade de dados chamada nome. Vou colocar isso em qualquer lugar dentro de nossa seção de cabeçalho. Podemos usar as chaves duplas e, em seguida, acessar nossa propriedade nome. Vamos para o navegador e verificar se isso ainda está funcionando, já que isso está vinculado ou montado em nossa seção de cabeçalho, esse valor de nome não pode ser usado em nenhum lugar fora disso. Se você ir logo abaixo do nosso cabeçalho e tentar produzir esta variável de nome ou para o navegador, vemos que isso é emitido como uma string regular em vez de ser substituído pelo nome real, propriedade de dados. Os benefícios de declarar nossos dados dentro da seção de dados, em vez de HTML embutido, é que os dados são reativos, que significa que se qualquer um dos valores dentro daqui mudaria, todas as seções HTML que usa seria então atualizado instantaneamente. Este é um exemplo bastante simples usando uma string de texto. Mas e se tivéssemos vários itens, como um array? Bem, nós temos três valores dentro da nossa lista não ordenada. Tenha a casa, o portfólio, e também a seção de contato comigo. Voltando ao script, agora podemos ver como isso ficaria como uma propriedade de dados. O segundo valor separado por uma vírgula será links. Vou configurar isto como uma matriz. Este primeiro vai ser em casa. O segundo link era portfólio, e o terceiro de contato comigo. Uma vez que esta é uma matriz contendo vários valores, nós temos algumas opções de como podemos produzir isso. A opção mais básica é produzir isso diretamente como uma propriedade de dados. Poderíamos enviar o nome dos links. Isso será diretamente saída como uma string. No entanto, é improvável que isso seja o que queremos. Em vez disso, poderíamos acessar cada um desses links individualmente. Assim como uma matriz regular, poderíamos usar as chaves duplas, acessar nossos links e, em seguida, acessar cada link individual pelo número de índice. O primeiro valor dentro de uma matriz é zero, o segundo é a posição um, e o terceiro de contato comigo. Haverá ligações também. Novamente, isso funcionará perfeitamente bem, mas é uma longa maneira de fazer as coisas se você tiver muitos itens de array, uma maneira mais eficiente de lidar com itens de lista como este é usar um loop for. Até a nossa lista não ordenada, podemos usar um V para loop, que vai ser link e links. Links com o S é a propriedade da nossa data armazenada em nosso script, e então o valor do link será atualizado para cada loop. Então, a primeira vez que percorrermos esses três itens, o valor do link será definido como home. A segunda vez que ele passa será definido para o portfólio, e a terceira e última vez que ele sair, isso será definido para entrar em contato comigo. v-for é uma diretiva Vue.js, que é um atributo especial que adicionamos ao nosso HTML. Diretivas começarão com um prefixo traço V. E esse particular permite que Vue.js faça loop através de uma determinada propriedade de dados. Também analisaremos mais diretivas durante o curso. Uma vez que temos três itens dentro da nossa matriz de links, o conteúdo aqui dentro será repetido três vezes. Então, efetivamente, repetimos nossa lista não ordenada três vezes diferentes. Mas isso também não é o que queremos. Então, em vez disso, podemos cortar o loop v-for e, em vez disso, apenas repetir nosso item da lista três vezes. Podemos remover o segundo e terceiro item da lista, deixando apenas um no lugar, que vamos repetir para cada item dentro dos links. Podemos então substituir isso com nossa variável de link, salvar isso, e nossos três links e agora de volta no lugar. Então, só para recapitular, temos três itens dentro dos links. O primeiro loop de tempo, link será definido como home. Então, isso será substituído por casa. A segunda vez que será substituído por portfólio e assim por diante. As propriedades de dados também podem ser sobre tipos de dados, como booleanos e também números, e também objetos para os quais vamos descobrir a seguir. 10. Usando loops em objetos: Também podemos trabalhar com objetos no Vue.js também. Vamos fazer isso para adicionar algumas postagens ao nosso exemplo. Para isso, podemos usar a segunda instância do Vue que criamos para a nossa seção de blog neste script. Não podemos configurar o objeto de opções para o CreateApp que é montado através da nossa seção de blog como um objeto, e vamos trabalhar com a propriedade de dados mais uma vez. Esta é uma função como acima, que vai retornar todos os dados que podemos usar em nossa seção de blog. Dentro daqui vamos acessar nossos postos que vai ser uma matriz. Cada um desses posts vai ser armazenado dentro de um objeto que vai ter um ID, um título, e a seção de corpo. O primeiro ID será o valor de um separado por uma vírgula, o título da postagem do blog. Isso é apenas [inaudível] para que você possa adicionar qualquer coisa que quiser a esta postagem do blog. O terceiro item é o corpo, que é o conteúdo real do nosso post no blog. Vou pegar o conteúdo da nossa página de índice. Como uma corda, podemos colar isso dentro da seção do corpo. Se você vir algum erro exatamente como vemos aqui, isso seria porque estamos usando texto multi-linha. Poderíamos passar por cada uma dessas linhas individualmente e trazê-las para a mesma linha. Assim, mas esta não é uma maneira eficiente de fazer as coisas. Ou outra maneira de fazer isso é usar os backticks. Então, em vez dessas citações, poderíamos substituí-las pelo ícone de backtick. Isso agora nos permitirá usar texto multi-linha. Só para nos dar algum conteúdo para trabalhar, eu vou copiar este objeto, e então eu vou colar isso para uma segunda postagem no blog. O ID de dois, altere o título. Este vai usar o CDN do Vue. Em seguida, o terceiro, que tem o ID de três. Este vai ser como eu dominei o Vue, que você pode escrever quando terminar este curso. Mesmo que esses posts sejam objetos, ainda é uma matriz de objetos. O que significa que podemos usar novamente a diretiva V-for em nosso HTML. Até a seção de blog que estamos controlando com esta instância do Vue. Temos dois artigos codificados. Por simplicidade, vamos remover o segundo. Agora podemos usar um loop V-for para repetir isso quantas vezes forem necessárias. Queremos repetir o artigo. Assim, podemos acrescentar a directiva “V”. Desta vez, este será postado em postagens. Lembre-se que post é o nome da nossa matriz e a variável post é o nome para cada item da matriz. Agora podemos acessar isso dentro do nosso artigo. Dentro das chaves duplas, podemos produzir nosso post. Vamos ver como isso parece no navegador. Se emitirmos o post, este é o valor do nosso objeto post completo. Isso será repetido três vezes. Uma vez que temos três postagens de blog separadas, também é único. Temos o ID de um, o ID de dois e o ID de três na parte inferior. Em vez de acessar esta postagem completa do blog, podemos escriturar isso acessando qualquer uma dessas propriedades. Este era o título do post. Podemos acessar isso com post.title. Então, em vez deste texto dentro dos elementos p, podemos acessar o post.body. Tudo isso funciona agora perfeitamente bem. De volta ao nosso script, se você adicionar muito mais propriedades de dados como esta. Nossa instância do Vue pode rapidamente se tornar realmente lotada. Para ajudar com isso, também podemos pegar nossa matriz de objetos e colocá-lo fora da instância do Vue. Vamos pegar todo o conteúdo da matriz, incluindo os colchetes. Pegue tudo isso, deixando apenas a variável post. Fora da instância do Vue, podemos criar uma variável JavaScript regular. Isso é chamado de postagens. Em seguida, podemos definir isso igual ao nosso array. Este post array agora pode ser referenciado dentro de nossa instância do Vue. Assim, a propriedade post date pode ser igual à nossa matriz posts. Vamos verificar se isto está a funcionar. Para o navegador. A postagem gratuita do blog ainda está no lugar. Eu também estou, usando a sintaxe de propriedade abreviada ES6, uma vez que o nome e o valor são os mesmos, podemos encurtá-lo para apenas o valor único, que também funciona completamente bem também. 11. Listar indexes e chaves: No momento, não estamos fazendo nenhuma alteração em nenhuma de nossas listas, então Vue.js realmente não tem muito trabalho a fazer. No entanto, em aplicativos do mundo real, nossos dados podem mudar frequentemente, seja pelo usuário adicionando algo em um formulário ou uma atualização de nosso servidor. Talvez até mesmo um novo blogpost sendo adicionado e atualizado com uma API. Uma vez que o Vue recebe essas atualizações desde que usamos a propriedade data, ele atualizará nosso HTML com um novo valor, uma vez que as propriedades de dados são reativas. Isso é simples o suficiente para algo como uma cadeia de texto, mas e se tivéssemos milhares de blogposts? Imagine que excluímos ou atualizamos um direito no meio, como o Vue.js lida com isso? A resposta é usar um atributo especial chamado chave. Vou adicionar isso ao nosso blogpost, que está cercado no artigo. Logo após o nosso loop v-for, podemos adicionar em um atributos-chave e definir isso igual a um valor particular. Essa chave é uma maneira de fornecer um identificador exclusivo para cada um desses itens da lista. Se tivéssemos centenas ou mesmo milhares de blogposts, ter essa chave única permitirá que Vue, js identifique melhor cada elemento quando chegar a hora de atualizar ou reordenar. Se nunca usarmos chaves, você precisará se referir a um algoritmo para detectar qualquer uma dessas alterações. Esta chave deve ser única, como um ID de produto ou para o nosso blog, nós também temos um ID exclusivo para cada blogpost. Vamos dar uma olhada. Temos um ID exclusivo que é armazenado nesta propriedade ID. Podemos passar no post.id. Se adicionarmos um atributo em exatamente como este, Vue.js iria ler este valor chave como uma string chamada post.id. Em vez de extrair os valores reais da variável, que é o valor de um, Dois ou três. Se fôssemos inserir algum JavaScript ou uma variável, assim como usamos aqui. Temos de tornar esta chave dinâmica. A maneira de fazer isso é usar a diretiva v-bind. Este é um prefixo que se foi para dizer Vue.js para ler o valor aqui dentro como uma variável em vez da string de textos que é post id. Esta é outra diretiva Vue.js. Isso também pode ser encurtado para simplesmente usar os dois pontos. Esta é a nossa chave agora cuidada. Também ao usar a directiva v-for, também podemos acessar o número do índice. Esta é a posição de cada um dos nossos itens dentro da matriz. Nosso primeiro blog é a posição 0, depois a posição 1 e assim por diante. Para fazer isso, podemos envolver nossa variável dentro dos colchetes assim. Ainda podemos acessar o post, mas também podemos acessar o índice número 2. Se quiséssemos, poderíamos produzir o índice. Novamente dentro das chaves duplas, temos a posição 0, a posição 1 e, em seguida, a posição 2. Isso também é como JavaScript, podemos adicionar mais um. Este pode ser o primeiro valor, o segundo valor e assim por diante. Isso pode ser útil para coisas como numerar nossos itens que exibimos. Bem, para o nosso blog, o exercício não é necessário. Também podemos remover isso. Uma das principais coisas a observar é, é recomendável não usar esta posição de índice como um valor para a nossa chave. Isso ocorre porque se nenhuma chave é fornecida, vamos fazer uso da posição de índice de qualquer maneira. Também ao lado de vincular esses atributos chave, também podemos vincular outros atributos também, que vamos dar uma olhada em seguida. 12. Construindo atributos: Demos uma primeira olhada nos atributos de vinculação no último vídeo usando a chave. Agora vamos passar a olhar para os atributos de classe e estilo de ligação Vue. Para fazer isso, podemos criar um DarkMode para o nosso blog que o usuário pode ativar ou desativar. Para criar os estilos para este DarkMode precisamos ir para a nossa folha de estilos, e depois para baixo podemos adicionar uma classe DarkMode que vamos ativar ou desativar. Isso vai ser bem simples. Podemos criar o fundo e definir isso para uma cor mais escura, o que eu vou usar vai ser 38383a. Para compensar isso vamos mudar a cor para ser um valor mais leve de whitesmoke. Para aplicar este DarkMode vamos adicionar isso como uma classe, e em torno de todo o nosso conteúdo, como a seção de cabeçalho e nosso blog temos este elemento div circundante. Na tag de abertura, apenas dentro do corpo, podemos adicionar isso como uma classe regular e isso irá aplicar nossas mudanças. Isso funciona bem, mas precisamos de uma maneira de ativar e desativar isso, e também para integrar isso em nosso aplicativo Vue. Atualmente temos um pequeno problema que é que estamos usando o Vue para controlar a seção de cabeçalho e também a seção de blog de forma independente. Mas quando alternamos apenas DarkMode queremos que esta classe seja aplicada ao site completo. Podemos simplificar as coisas mesclando nossas duas instâncias do Vue. Para fazer isso tudo o que precisamos fazer é pegar nossas postagens do segundo aplicativo, e depois colar isso na propriedade de dados para nossa primeira seção. Não temos mais dados aqui dentro, então podemos remover esta instância completa e então vamos montar isso na seção do corpo. Isso significa que a instância do Vue agora está controlando toda a nossa página web. A primeira etapa para permitir que essa classe seja ativada e desativada é definir isso como uma propriedade de dados. Uma propriedade de dados vai ser um booleano, e eu quero chamar isso de DarkModeSet, que será um valor booleano inicial de false. Para alternar dinamicamente a classe DarkMode com base nesta propriedade de dados particular, precisamos passar nosso atributo de classe como um objeto em vez de atributos regulares, assim como este. Dentro daqui, precisamos adicionar um objeto usando as chaves. Nós só queremos que esta classe escura para aplicar se a propriedade de dados que é DarkModeSet vai ser igual a true. Atualmente, isso é falso, então Vue.js não aplicará essa classe escura. Podemos ver isso se atualizarmos o navegador, a classe escura não se aplica mais. Mas se fosse para alternar isso para ser verdade, Vue.js deve então aplicar nossa classe. Mas se atualizarmos isso, não vemos nenhuma alteração, e isso ocorre porque, assim como quando definimos a propriedade chave anteriormente, precisamos vincular isso como um valor dinâmico. Atualmente, Vue.js está lendo isso como uma string, que podemos ver se entramos nas ferramentas de desenvolvedor. Vou clicar com o botão direito do mouse e inspecionar a “seção Body” e, em seguida imediatamente dentro vemos que nossa classe é saída como uma string. Esta não é uma classe válida, então, em vez disso, o que vamos fazer é usar a diretiva v bind. Ou, como antes, podemos encurtar isso para ser um cólon. Agora, em vez de uma string, isso será interpretado como JavaScript, e se atualizarmos as ferramentas do desenvolvedor veremos que a classe de dark foi aplicada agora, e isso também foi aplicado ao nosso projeto também. Juntamente com esta classe, também podemos adicionar propriedades de dados para estilos embutidos também. Vamos remover isto. Eu vou configurar uma propriedade de estilo regular que é apenas HTML regular. Dentro daqui podemos definir o valor da cor, vamos para um valor de hotpink. Este é apenas HTML normal, por isso, se atualizarmos isso será aplicado aos nossos projetos. Também podemos mover essa propriedade de cor para ser uma propriedade de dados também. Dentro do script vamos definir TextColor para ser o valor de cadeia de caracteres de hotpink. Então, como fizemos com os atributos de classe, precisamos passar esse estilo como um objeto. O primeiro passo é cercar isso nas chaves e, em seguida substituir esta cadeia de hotpink com a nossa propriedade de dados que era TextColor. Esta é uma variável, então precisamos ligar isso usando v ligação ou a abreviação que foi o cólon. Atualize e, desta vez, nosso estilo foi aplicado a partir da propriedade data. Se tivéssemos várias propriedades de estilo que queríamos adicionar assim, nosso HTML poderia rapidamente ficar confuso. Em vez disso, poderíamos remover isso, deixando nos atributos de estilo e, em seguida, em nosso script, podemos criar um objeto de estilo como uma propriedade de dados. Podemos remover isso e, em vez disso, vamos configurar nosso darkMode.CSS usando os mesmos estilos que aplicamos na parte inferior. Vamos comentar isso e, em seguida, configurar nosso plano de fundo que foi o valor hexadecimal de 38383a. Também a cor para o texto, que vai ser whitesmoke. Este objeto DarkMode agora pode ser colocado diretamente como um atributo. Como seu valor já é um objeto, não precisamos colocar nele as chaves. Isso pode apenas ser adicionado diretamente. Vamos dar uma chance a isso. Nosso DarkMode agora foi aplicado. Podemos até adicionar vários objetos de estilo também, por exemplo, se quisermos configurar uma família de fontes base ou alguns estilos de base, podemos configurar um novo objeto, e vamos definir o fontFamily para ser o valor de monospace. Se você não estiver familiarizado com a adição de propriedades CSS com JavaScripts, todas essas propriedades CSS precisam se tornar um caso. Se estivéssemos usando CSS diretamente em nossa folha de estilo, definiríamos o FontFamily todos em minúsculas e separados com os traços. Em vez disso, em JavaScript, definimos isso como CamelCase para cada palavra após a primeira comece com uma letra maiúscula. Agora vamos ter esses objetos de estilo múltiplo que queremos adicionar. Estes podem agora ser colocados em como uma matriz. Podemos passar entre colchetes e, em seguida, nosso segundo objeto, que era base, salvar isso, e o estilo para ambos os nossos objetos foram mesclados. Se entrarmos nas ferramentas do desenvolvedor, podemos ver isso passando o mouse sobre nossa div principal. Isso tem nossa cor de fundo, ele tem o TextColor e, em seguida, nossa FontFamily do segundo objeto JavaScript. 13. Mini desafio: links dinâmicos: Usando o que aprendemos até agora, tenha um mini desafio para experimentar as coisas sozinho. O que eu gostaria que você fizesse é ir para a seção de cabeçalho que contém nossos links de navegação gratuitos. Atualmente, cada um desses links tem um atributo href que está apontando para a barra. Em vez de ter esse embutido, poderíamos criar isso como um atributo dinâmico, e definir o valor href dentro de nossa propriedade de dados. Se formos para nossos scripts, um bom ponto de partida seria substituir esta matriz de links por uma matriz de objetos, assim como acima, onde criamos nossas postagens de blog como uma matriz de objetos, e ele pode usar esta matriz como um bom ponto de partida de seus links. Este é o número 1 coberto. Em seguida, o objeto deve ter propriedade URL com um link. Em vez do ID, do título e do corpo que temos em nossa postagem do blog, talvez possamos mudar para ser o ID, o nome e o URL. A URL pode ser composta, pode ser um link externo, ou um link interno para uma página fictícia, como portfólio de barra. Mas agora, não se preocupe se a página que nos vinculamos está sendo criada ou não. Tudo o que nos preocupa é criar uma ligação dinâmica. Então, assim como com as postagens do blog, o número 3 é percorrer essa matriz usando v-for e definir uma chave única. Finalmente, usando o elemento, vamos criar um link para cada página. Como uma dica, podemos usar a diretiva v-bind que aprendemos no último vídeo para o atributo href 2. 14. Links dinâmicos: minha solução: Espero que tenha corrido bem para vocês, e agora vou completar este desafio e mostrar a minha solução. Começando com o número 1, que era criar um objeto contendo todos os nossos links, assim como fizemos com a postagem do blog. Fora da instância Vue, nossa constante para os nossos links que vai ser uma matriz de objetos. O primeiro é o ID de 1, o nome que vai ser a nossa casa. A terceira propriedade vai ser para o nosso URL, este vai ser o local para onde vamos vincular. O link inicial será o index.html separado por uma vírgula. Precisamos de mais dois links, o ID de 2 e este vai vincular ao nosso portfólio, e o URL vai ser portfolio.html. Como mencionado no último vídeo, não importa se esta página foi criada ou não, tudo o que nos interessa nesta fase é criar um link dinâmico. O terceiro é para entrar em contato comigo no contact.html. Remova a matriz de nossa propriedade de dados e podemos definir isso através de links ou podemos ver a abreviação ES6. Como ambas as palavras são as mesmas, isso cuida do passo um e do passo 2, e para o passo 3, precisamos fazer loop para esses links e eu vou colocá-los em nosso HTML. Na nossa página Índice já temos a configuração do loop for, então isso é cuidado. O próximo passo é adicionar oito chave dinâmica, que vai ser link.id. Como o link é agora um objeto, também precisamos passar o nome e tudo deve agora ainda funcionar no navegador. Finalmente, o passo 4 é usar o <a> elemento para criar um href dinâmico. Primeiro de tudo a diretiva v-bind, ou podemos mais uma vez usar a abreviação que é e dois-pontos, e em vez de a barra, podemos acessar o link.url. Eu posso experimentar todos os links no navegador, link home ainda vai ligar para esta página atual, o portfólio. Este link para encaminhar barra portfolio.html e a barra direta entrar em contato comigo também está funcionando. Novamente, não se preocupe se isso estiver vinculando a um arquivo que não criamos, tudo o que importa é que nossos links estão funcionando agora. 15. Expressões de Javascript: Em nossos arquivos HTML, já usamos os calibraces duplos até agora, também referidos como interpolação para saídas de nossas propriedades de dados, e também dentro de nossos loops para produzir uma variável também. Se necessário, esses calibraces duplos também podem suportar expressões JavaScript também. Um pequeno símbolo poderia usá-los para executar um cálculo JavaScript e, em seguida, produzir o resultado. Em qualquer lugar dentro daqui, vamos logo abaixo do cabeçalho. Podemos usar esses calibraces duplos e criar uma adição simples, como 1 mais 3. Se você apenas vai avaliar esta expressão e, em seguida, produzir o resultado de 4, nós poderíamos usar nossas expressões JavaScript também, como dividir ou poderíamos dizer 10 dividido por 2, o valor de 5. Também podemos usar métodos JavaScript embutidos também. Por exemplo, poderíamos acessar o objeto matemático e, em seguida, selecionar um método chamado aleatório. Isto irá então gerar um número aleatório entre zero e um, cada vez que recarregar o navegador. Também podemos acessar nossas propriedades de dados existentes, como o nome e transformar isso usando métodos JavaScript como ToupperCase. Em seguida, tomará o nosso nome original, que é colocado em uma propriedade de data, e, em seguida, transformá-lo em maiúsculas antes de enviar isso no navegador. Poderíamos ir ainda mais longe para coisas estranhas, como o operador ternário JavaScript. Poderíamos verificar se o name.length é maior que zero. Isso é verdade atualmente, uma vez que temos mais de zero caracteres dentro da string. Se isso for verdade, o que sabemos que é, então vamos apenas produzir uma sequência de boas-vindas, seguido pelo nome do nosso usuário. Caso contrário, usamos o cólon para fornecer uma segunda condição, que será “convidado de boas-vindas”. Este é JavaScript regular e não é nada específico para visualizar JS. O único envolvimento da visão é que estamos produzindo isso usando os calibraces duplos. Sabemos que o nosso nome.length é maior que zero, por isso vemos a mensagem de boas-vindas em nosso nome. Se fôssemos criar uma string vazia. Por exemplo, se um usuário não estiver conectado, veríamos a mensagem de “Bem-vindo convidado”. Outra coisa que podemos fazer para, é adicionar expressões em nossos atributos dinâmicos também, logo acima de onde definimos essa propriedade de estilo dinâmico. Digamos que queríamos definir apenas o objeto DarkMode se uma determinada condição for verdadeira. Como um exemplo aleatório, poderíamos dizer que se 10 é menor que cinco, se isso for verdade, vamos então exibir o DarkMode, ou se não, vamos produzir uma string vazia, significa que nenhuma classe será aplicada. Salve isso e atualize. Dez é menor que cinco, então o DarkMode não será aplicado se mudarmos isso para ser verdade, então 10 é maior que cinco, DarkMode deve agora ser aplicado ao nosso projeto, ou como um exemplo mais realista, de volta em nossos roteiros. Temos esta propriedade de conjunto DarkMode. Agora podemos usar isso para renderizar condicionalmente nosso DarkMode em vez desse valor numérico, podemos dizer “DarkModeSet”, que é atualmente verdadeiro, então DarkMode permanecerá habilitado. Se definirmos isso para ser falso, ele agora deve ser removido. Também podemos remover a nossa mensagem de boas-vindas. Ativar e desativar manualmente este DarkMode não é ideal. No próximo vídeo, vamos definir isso para reagir a um botão. 16. Manipulação de eventos: Além das directivas que temos analisado até agora, que incluem V4 e V vincular. Agora vamos olhar para outra diretiva útil chamada V-on, que nos permitirá reagir a certos eventos. Esta diretiva V-on também é passada para os nossos elementos, dentro da tag de abertura como um atributo, e nós vamos usá-lo para mudar entre o modo luz e escuro. Quando o usuário clica em um botão, trazendo-nos de volta em nosso index.html. Dentro de nossa seção de blog, vamos adicionar um botão HTML. Podemos então incluir dentro do lado aberto do V-on a directiva, que vai ouvir os eventos de um clique. Também podemos ouvir eventos mais, assim como em JavaScript regular, como on-submit, on-mouseover, on-cube e assim por diante. A única diferença é que removemos o prefixo on-prefixo, significa que não em eventos como o on-mouseover simplesmente mudaria para mouseover. Nós, no entanto, nesta ocasião, queremos ouvir um clique neste botão, e, em seguida, dentro das citações, queremos realmente fazer algo quando este botão foi clicado. Neste caso, queremos alternar entre o modo escuro, e temos este conjunto como uma propriedade de dados chamada modo escuro set. Dentro daqui vamos alternar a lista definindo modo escuro definido para ser igual ao oposto. O ponto de exclamação significa que, se o modo escuro definido for atualmente verdadeiro, isso irá alterná-lo para ser falso, e também o oposto se aplica também. Vamos tentar isso, na verdade, precisamos adicionar algum texto entre o nosso botão também. Clique sobre isso, e isso agora irá alternar nosso modo escuro. Podemos ver a saída do modo escuro definido, se pegarmos isso, e então podemos produzir isso entre as chaves. Para ver isso mais claro, isso está definido como false no momento. Assim, será verdadeiro, falso, e assim por diante. Assim como esta sintaxe V-on, também é uma abreviação também, assim como quando encurtamos a ligação para usar dois pontos, podemos encurtar V-on para usar o símbolo at, e isso funcionará exatamente da mesma forma. Este botão de alternância não é o melhor visual, então, em vez disso, vamos substituir isso por uma entidade HTML. Podemos então alternar entre um filho e um ícone da lua, dependendo do nosso estado de alternância. Os dois ícones que vamos exibir vão substituir este texto de alternância. Primeiro de tudo, vamos produzir nossos dois ícones. O primeiro é o e comercial, o áspero, e, em seguida, 9788 seguido pelo ponto e vírgula. O segundo é o e comercial, o duro, e este é 9789. Isso nos dará nossos dois ícones que precisamos, mas só queremos mostrar um deles de cada vez. Podemos usar o operador ternário JavaScript para alternar entre esses dois ícones. Abra as chaves duplas e podemos verificar se o modo escuro definido é atualmente verdadeiro. Se for, vamos sair como uma string, o primeiro ícone, que é o sol. Se não, usamos o cólon e depois passamos na lua. Recarregar. Estamos no modo de luz, então vemos a lua. Clique nisso e isso mudará para o sol. Como mencionamos antes ao lado de ouvir nossos eventos de cliques, também podemos ouvir eventos sobre, como mouseover, e isso agora deve alternar nosso estado cada vez que passarmos o mouse sobre este botão em particular. No entanto, para este exemplo, um evento de clique faz mais sentido. Eu não concedi expressões JavaScript diretamente no evento clique como este, é ok para pequenos exemplos, mas geralmente é considerado melhor para extrair isso do nosso HTML e colocar em uma função ou um método, e isto é o que vamos descobrir a seguir. 17. Métodos: Dentro do Vue.createApp, até agora só temos trabalhado dentro desta seção de dados. Agora, vamos adicionar uma nova seção que vai ser para os nossos métodos. Isso nos permitirá fazer muitas coisas legais, como alterar nossos dados, e geralmente tornar nossos aplicativos muito mais interativos e úteis. Se você estiver familiarizado com funções em JavaScript, os métodos fazem a mesma coisa. Por exemplo, eles têm o método name porque eles fazem parte deste objeto. Considerando que nossa seção de dados foi configurada como uma função, nosso método para configurar como um objeto, porque vamos chamá-los manualmente. Certifique-se de que estamos fora de nossa seção de dados. Vamos rolar para baixo até a chave de fechamento. Então, depois disso, vamos configurar nossos métodos, usá-lo como um objeto. O primeiro método que vamos usar será alternar nosso modo escuro. Isso ocorre porque não queremos muita lógica JavaScript substituída em nosso arquivo HTML. Vamos abstrair a alternância do nosso esquema de cores para este método. Vamos cortar isso e colar isso dentro do nosso método. Então precisamos mudar o modo escuro definido para ser this.DarkModeSet. A razão pela qual estamos usando isso, esta palavra-chave é porque tanto a seção de dados a seção de método é parte do que é chamado de API de opções. As seções, entre outras, que veremos em breve, têm acesso a cada propriedade do Vue usando esta palavra-chave. Por exemplo, nossos métodos podem acessar qualquer coisa da seção de dados, desde que usemos essa palavra-chave, então poderia acessar this.name, this.links e também em troca a seção de dados pode chamar nosso método, ou poderíamos dizer isso. Togglemode. Agora tudo o que resta a fazer é chamar este método a partir da nossa página de índice. Passando o modo de alternância, atualizar o navegador, e agora ainda podemos alternar entre nossas duas versões de cores para este tempo, extraindo todo o código em um método. 18. HTML raw: Se quiséssemos, também podemos saída HTML usando Vue.js. De volta para dentro do nosso script.js e até o topo, temos esta matriz de posts de blog. Digamos que queríamos formatar o corpo desta postagem de blog adicionando alguns elementos HTML dentro deste texto. Por exemplo, poderíamos cortar qualquer uma dessas palavras e, em seguida, criar os elementos fortes. Colocando esta palavra de volta no meio. Nós também poderíamos adicionar qualquer um dos elementos também, como a tag break, que então colocará isso em uma nova linha. Vamos voltar ao navegador e ver o efeito que isso terá. Podemos ver que não estamos conseguindo o resultado que queremos, os elementos fortes e também a tag break acaba de ser saída como parte de uma string. Isso ocorre porque estamos produzindo isso em nosso index.html entre essas chaves duplas. Essas chaves duplas gerarão o valor como texto sem formatação. Isso faz com que este colchetes não seja uma boa escolha para o texto que contém quaisquer elementos HTML. Em vez disso, Vue fornece uma nova diretiva chamada v-HTML. Como sempre, adicionamos nossas diretivas como um atributo, e isso substituirá nossas chaves duplas. Este é V-HTML e, em seguida, podemos definir isso igual ao nosso post, o corpo. Também podemos remover isso, atualizar o navegador. Nossa tag forte agora entrou em vigor e também nossa tag break também. Tudo isso funciona completamente bem agora, mas por razões de segurança, precisamos ter cuidado ao usar v-html. Só devemos injetar HTML de fontes confiáveis. Por exemplo, nunca devemos usar HTML que está sendo fornecido pelo usuário final do nosso site, pois isso pode levar a potenciais ataques de script entre sites. É muito importante ao usar esta diretiva que tenhamos certeza absoluta de que esta fonte é segura. É assim que podemos usar V-html. Em seguida, vamos descobrir ganchos de ciclo de vida. 19. Ciclo de vida do Vue: Quando criamos nossa instância de visão geral superior do Vue, há uma série de etapas acontecendo nos bastidores. A documentação do Vue tem um diagrama muito bom do que acontece quando criamos um novo aplicativo do Vue. Você não precisa se lembrar disso ou entender completamente por enquanto, mas esteja ciente de que podemos executar algum código em cada estágio deste ciclo de vida. Por exemplo, na parte superior vemos Vue.CreateApp enquanto passamos nossas opções. Esta é a fase inicial que já olhamos, e então queremos isso para o DOM com app.mount. Depois que esta instância foi criada, temos acesso ao befoRecreate e também aos ganchos criados. Esses ganchos de ciclo de vida podem ser adicionados ao nosso objeto, que você passa para o CreateApp juntamente com os dados e os métodos que estamos usando atualmente. Vamos dar uma olhada nesses dois primeiros ganchos de ciclo de vida em nossos roteiros. Juntamente com nossos dados, vamos primeiro analisar antes de criar. O segundo separado por uma vírgula é o gancho criado. Dentro destes dois ganchos podemos adicionar qualquer código que você deseja executar nestes dois primeiros estágios. Para poder ver exatamente quando cada um desses ganchos será executado, podemos fazer um log de console. O primeiro eu vou adicionar algum texto de befoRecreate, então sabemos exatamente qual log do console está sendo executado, e então lembre-se usando esta palavra-chave, podemos acessar quaisquer outras propriedades de nossa instância do Vue, que tem nosso ações dos dados. Podemos produzir o valor do nosso nome usando this.name. Com isso, também podemos produzir isso dentro do gancho criado sobre o console. Clique com o botão direito do mouse e inspecionar, e também principalmente para atualizar também. Vemos que o antes de criar gancho retorna um valor de indefinido. Mas abaixo disso dentro do gancho criativo, temos acesso à nossa propriedade de dados. Por que é isso? Bem, não é até o estágio criado onde Vue terminou o processamento e configuração de coisas em nosso objeto de opções. Que tem os nossos dados e métodos. O que resulta em qualquer coisa de nossa instância Vue, como nossas propriedades de dados para ser retornado como indefinido dentro do antes cria gancho. Isso significa que usaríamos isso apenas para algo como uma chamada de API, que não está vinculada a nenhuma seção sobre, como nossas propriedades de dados. Também podemos ver isso se voltarmos ao desenho. Podemos ver dentro desta seção que não temos acesso a nenhuma atividade do espectador até depois do gancho befoRecate. Depois disso, descemos para a opção de modelo, que nos dá duas opções separadas. Vamos dar uma olhada nesta opção de modelo em breve quando olharmos para componentes. Esta é basicamente a seção onde nós produzimos todo o nosso HTML, que inclui as seções dinâmicas com um duplo colchetes. Se esta opção de template não estiver disponível, em vez disso, ela descerá para a nossa seção na qual montamos, e avaliará o conteúdo aqui dentro. Depois disso, temos uma série de etapas quando o aplicativo foi montado no DOM, podemos acessar antes de montar ou assim que o aplicativo foi montado. Uma vez que o aplicativo foi montado no DOM, também podemos ouvir quaisquer alterações também. Podemos então executar algum código antes da atualização ter acontecido ou depois que a atualização foi finalizada. As duas fases finais é quando um componente está sendo removido do DOM e podemos acessá-lo antes de um gancho de montagem e também o gancho desmontado também. Essas duas etapas finais são úteis para qualquer trabalho de limpeza, talvez queira parar de ouvir qualquer evento, e este é o lugar para fazê-lo. Veja como tudo isso funciona na prática e agora vamos fazer uma chamada de API simples para obter algumas postagens de blog de uma fonte externa. A fonte para esta postagem de blog estará disponível a partir do espaço reservado JSON. Esta é uma API muito simples e comentários que podemos usar para obter alguns dados de exemplo, como nossas postagens de blog. Podemos ver que podemos obter blogposts, podemos obter comentários. Temos álbuns, fotos, todos, e também usuários. Vamos acessar a seção /post, que vai retornar 100 postagens de blog de amostra. Então isso é muito simples, nós apenas adicionamos /posts no final deste URL. Isso retornará uma lista de 100 postagens de blog no formato JSON, e também podemos fazer uma chamada para este URL a partir de um método Vue. Volte para o Visual Studio Code e em nosso script, podemos chamar isso de dentro de nossa seção de método, e o método que eu vou chamá-lo vai ser getposts. Dentro daqui, vamos fazer uso da API Fetch para fazer uma chamada para este URL. Cole isso em como uma string, e esta API de busca é apenas JavaScript regular. Não tem nada a ver com Vue JS. Podemos então armazenar os dados que temos de volta dentro de uma variável chamada resposta. Como estamos alcançando uma API externa, esta será uma chamada assíncrona. Isso significa que os dados que recebemos de volta podem voltar em alguns milissegundos. Pode levar cinco segundos , pode não voltar. Então, para lidar com isso, podemos fazer uso de um único peso, que é um recurso JavaScript. que nos permitirá esperar que os dados voltem antes de fazermos alguma coisa com eles. Para fazer isso, podemos marcar nosso método como assíncrono. Então, adicionamos a palavra-chave assíncrona pouco antes, e então vamos esperar que nossos dados voltem. Isso significa que se tentarmos acessar a variável de resposta antes que esses dados voltem, ele não lançará um erro. Agora isso nos deixa com o objeto de resposta de nossa chamada API, e então precisamos extrair o JSON da resposta. Para fazer isso, vamos acessar nossa resposta e, em seguida, chamar o método JSON. Isso vai extrair o JSON de nossa resposta, que podemos armazenar em uma constante ou uma variável chamada dados. Nós também [inaudível] isso para garantir que isso esteja concluído antes de acessar nossos dados e, em seguida, registraremos isso no console. Agora, antes de avançarmos, vamos dar um passo atrás e pensar no que queremos fazer. Temos uma lista de blogposts que estamos recebendo de volta da API, e isso é armazenado dentro desta variável de dados. Deixando-nos com duas coisas que precisamos fazer. Primeiro, precisamos passar esses dados para nossa seção de dados e adicionar isso às nossas postagens. A segunda coisa que precisamos fazer é chamar esse método. Como olhamos anteriormente, poderíamos adicionar um botão aos nossos sites e fazer esta chamada, ou isso não seria um bom uso. Em vez disso, queremos fazer isso automaticamente, e podemos fazer isso a partir de um gancho de ciclo de vida. Podemos usar o gancho BefoRecreates. Desde lembrar que isso é chamado antes do aplicativo ser criado, então o método get post será indefinido. Poderíamos usar montado uma vez que o aplicativo é montado no DOM, ou poderíamos ir ainda mais cedo e usar o gancho criado, que procuramos antes. Nós não precisamos mais disso befoRecreate, então vamos mover isso e então descer para a seção criada. Em vez de fazer um log de console, vamos chamar o nosso método GetPost, que podemos acessar com this.getPosts. Para o navegador, e podemos abrir as ferramentas do desenvolvedor. Vou dizer que a resposta não está definida, então temos um erro de ortografia. Lá vamos nós. Resposta. Refresque. Há nosso registro de console com 100 postagens de blog diferentes. Cada uma dessas postagens de blog tem um ID, um corpo, um título e também o ID de usuário que o criou. Estes são exatamente os mesmos dados que já temos, mais esse ID de usuário extra, que podemos ignorar se não quisermos usar. Agora vamos usar esses dados para substituir os posts de blog gratuitos que já temos. Primeiro, vamos desdefinir as postagens de blog que já temos da nossa propriedade Data. Para fazer isso, podemos rolar para cima até nossos posts e, em seguida, definir isso para ser um array vazio, e agora podemos atualizar esses posts do nosso método. Faça isso em vez de um log do console. O que vamos fazer é acessar este.posts, e definir isso igual aos nossos dados. Para o navegador. Isso agora nos deixa com 100 postagens de blog diferentes dentro de nossa página. A razão pela qual isso funciona é porque os dados que recebemos de volta da API, que teríamos visto no log do console, estruturados da mesma forma que as postagens originais do blog. Podemos ver isso dentro da nossa página de índice. Na seção do blog, temos acesso ao título, ao corpo, e estes também têm um ID. Se os dados que vieram de nossa API fossem ligeiramente diferentes, por exemplo, se a seção do corpo fosse intitulada conteúdo, tudo o que precisaríamos fazer é mudar isso aqui dentro, e estaremos prontos para ir. 20. Introdução: conceitos básicos de componentes: Ao trabalhar com estruturas front-end ou bibliotecas como Vue.js, um dos conceitos mais importantes a serem aprendidos são componentes. Nos próximos vídeos, vamos descobrir como Vue.js usa componentes, o que eles são, os diferentes tipos de componentes, e então podemos olhar para coisas como podemos passar dados entre esses componentes. Vamos começar no próximo vídeo, e vamos dar uma olhada no que exatamente é um componente. 21. O que são componentes?: Vue.js e alguns outros amigos e frameworks ou bibliotecas têm esse conceito de construir nossos aplicativos usando componentes. A razão por trás disso é dividir nosso aplicativo em pedaços menores, tornando nosso projeto mais fácil de manter, organizar e depurar. Mas o que é um componente? Bem, considere esta imagem que é do nosso próximo projeto. Este é um aplicativo de contagem regressiva onde vamos adicionar eventos e eles serão exibidos em ordem de data. Também podemos ver o número de dias para o evento. Poderíamos construir este aplicativo completamente no arquivo App.vue. Mas mesmo que este não seja um aplicativo enorme, ele pode rapidamente se tornar lotado e desorganizado ou estar em um único arquivo. Para ajudar com isso, podemos dividir nosso aplicativo em partes ou seções, como nosso botão na parte superior, que pode até fazer parte do arquivo App.vue ou podemos movê-los para ser um componente separado. Também com nossos eventos também, o código para estes pode ser retirado deste arquivo App.vue e colocado em componentes independentes. Isolar este código em um componente como este significa que agora sabemos onde procurar para editar este código em vez de percorrer um arquivo grande. Além disso, se houver um problema com esta seção de eventos, nosso código agora está isolado também, que ajudará a corrigir o problema. Este projeto também inclui um formulário que usaremos para adicionar um novo evento ou para editar um já existente também. Este também seria um bom caso de uso para um componente. Não há nenhuma regra difícil ou rápida para determinar exatamente qual caminho devemos fazer em um componente, é algo que você tem que julgar a si mesmo quando um arquivo se torna grande ou ouvido para manter. Isso pode ser um bom sinal de que você precisa terceirizar em um componente separado, ou você também pode organizar por recursos também como vemos aqui com este formulário de edição. O número de componentes que criamos não dificulta nosso desempenho ou aumenta a bolha de tamanho, já que usamos web part para agrupá-los completamente eficientemente no final. É neste pacote que o navegador usa para nossos aplicativos de página única. 22. Conhecendo os componentes: Os slides anteriores usaram o conceito de componentes de arquivo único, é um componente que é reproduzido em um arquivo dedicado para manter as coisas mais organizadas. Para fazer isso, precisamos de uma configuração muito mais sofisticada que veremos na próxima seção. Esses componentes colocados em seu próprio arquivo é provavelmente o tipo de componentes mais comumente usado. Mas primeiro, vamos olhar para algumas maneiras diferentes de escrever isso começando com o componente global. A primeira coisa que eu vou fazer dentro do nosso script.js é armazenar nossa instância view dentro de uma constante chamada aplicativo. Agora, temos este aplicativo armazenado nesta referência aplicativo. Vamos então usar essa montagem de chamada, então app.mount. Vamos então remontar isso para a seção do corpo. Se atualizarmos o navegador, não vemos nenhuma alteração aqui dentro, mas agora, ter essa referência separada para nossa aplicação significa que agora podemos chamar um método chamado componente. Este app.component leva em dois argumentos. O primeiro é o nome que queremos dar a este componente, e o meu vai ser app-header. Ao usar o link CDN exatamente como estamos, o nome deste componente deve ser todo minúsculo, mais de uma palavra, e separado por traços. Isso é porque vamos inserir isso de volta em nosso HTML apenas como um elemento regular para que não queremos nenhum confronto de nomeação. Esta convenção de nomenclatura também significa que não entramos em conflito com quaisquer elementos HTML regulares, como o cabeçalho, o nav, também um hv regular, por exemplo. Depois disso, o segundo argumento separado por uma vírgula vai ser um objeto. Este objeto é como uma mini aplicação. Ele pode ter seus próprios dados, seus próprios métodos, e basicamente, qualquer coisa que temos logo acima em nossa instância de visualização regular. Juntamente com isso, ele também tem um template que é uma string, e este vai ser o HTML que queremos produzir dentro do navegador. Isso pode ser qualquer código HTML, como um título de nível um. Vamos apenas adicionar algum texto dentro dele aqui por enquanto. Agora, podemos usar este app-header dentro de nossa página de índice como um elemento HTML normal. Vamos comentar a seção de cabeçalho e, em seguida, podemos substituí-lo com nossos elementos app-header, salvar, e isso é agora saída no lugar do nosso cabeçalho regular. Agora sabemos que isso está funcionando, agora podemos pegar nossa seção de cabeçalho regular. Podemos descomentar isso e cortar este lugar, e então podemos agora colocar isso como nossa string template. [ inaudível] de todos esses sublinhados vermelhos, mas o editor de texto está destacando um problema. Isso ocorre porque estamos usando cotações para cercar todo esse HTML. Isso funciona perfeitamente bem quando usamos uma única linha de HTML, assim como nosso cabeçalho de nível 1. No entanto, quando temos várias linhas de HTML assim, precisamos substituir essas citações com os bacticks. Quando usamos a visualização CLI para configurar nosso projeto em breve, isso nos dará uma maneira mais limpa de escrever nosso código HTML dentro desses componentes. Mas, por enquanto, mova para o navegador. Isso agora aparece dentro de uma seção de cabeçalho, mas estamos faltando as variáveis. Nós não vemos mais coisas como nossas seções dinâmicas, que é o nome, e também o link logo abaixo. Para que isso funcione, também podemos configurar a seção de dados que precisa para este modelo. Então, role até a seção de dados que temos usado. Precisamos do nome e também o link para que eu vou cortar estes fora da instância vista e, em seguida, colocá-los de volta em nosso componente. Nós configuramos os dados exatamente como fizemos acima. Esta é uma função que vai retornar um objeto e podemos colar em nosso nome e nossos links. Não se esqueça de separar a seção de dados e o modelo com uma vírgula. Isso agora coloca nossos dados de volta no navegador, mas desta vez, de um componente. 23. Reutilização de componentes e propriedades: Além de isolar nosso código, outro benefício do uso de componentes é que eles também podem ser reutilizados. Não só isso, mas também podemos reutilizar os mesmos componentes e também passar valores diferentes. Para ver isso, vamos mover uma de nossas postagens de blog para um componente. Podemos cortar ou substituir a seção completa do artigo do nosso blog em nosso index.html. Assim como no último vídeo, vamos criar um novo componente. Novamente, certifique-se de que isto é um pouco acima do valor. Então, novamente, isso é up.components e o primeiro argumento vai ser o nome, que eu vou chamar de blog-post, separado por uma vírgula que passamos em nosso objeto. Isso vai levar em nosso modelo, que é multi-linha. Então, novamente, usamos a pasta de carrapatos traseira em nosso artigo. Para nossa simplicidade, vamos remover o loop for. Também podemos mudar isso para ser simplesmente um título e a seção de corpo. Então nós vamos passar isso para baixo em um único post. Então, assim como fizemos com o componente de cabeçalho, vamos enviar nossa nova postagem de blog dentro do HTML. Isso vai ser colocado de volta dentro de nossa seção de blog. Desta vez, porém, em vez de ter os dados dentro do componente, assim como fizemos com a seção de cabeçalho. Desta vez vamos passar os dados para este componente usando adereços. Props são apenas como atributos regulares que podemos usar para enviar os dados que o componente precisa, e este componente precisa do título e também do corpo e a maneira de fazer isso, assim como um atributo, é entrar na tag de abertura do blog postagens. Primeiro de tudo, podemos passar o título e isso é apenas alguns dados de amostra por enquanto para que possamos dar a este título qualquer que você quiser. Isso também precisa da seção do corpo também, para que possamos dar a este um segundo atributo ou um segundo adereço. Mais uma vez, esta vai ser uma string simples. Uma vez que este é um composto, também podemos reutilizar estes dois. Então vamos copiar e colar isso. Mude o título. Cada vez que fazemos isso e reutilizamos os componentes, cada incidência de componente é independência dos outros e também tem seus próprios dados, que também é referido como estado. Ou seja, embora tenhamos duas postagens de blog separadas, elas não entrarão em conflito entre si. Então passamos nossos dois adereços, passamos o título e também o corpo. No entanto, embora estas não sejam automaticamente atribuídas a estas variáveis. Uma coisa que precisamos fazer primeiro é declarar exatamente quais adereços esse componente espera receber. Uma vez que estamos recebendo vários adereços, podemos adicionar isso como uma matriz e, em seguida, adicionar uma vírgula no final. O primeiro adereço é o título, e depois o segundo é o corpo. Isso agora significa que ambos os adereços estão agora disponíveis para uso dentro do nosso template. Vamos tentar isso no navegador. Quando eu passar o mouse dois componentes de postagem de blog, cada um com dados independentes. Embora isso funcione completamente bem, não é uma maneira eficiente de criar, digamos, 100 postagens de blog. Então, uma maneira melhor de fazer isso seria reutilizar este componente com um V para loop. De volta à nossa página de índice e em vez de termos em duas postagens de blog separadas, o que vamos fazer é apenas ter nossa única postagem de blog. Então podemos usar um V para loop. Dentro deste V for loop, queremos aproveitar os dados que já temos. Estas são todas as postagens do blog que armazenamos aqui dentro. Então podemos dizer post, em posts passam em uma chave, que vai ser nosso post.id. Agora, em vez de passar para baixo nosso título e nosso corpo como texto simples, em vez disso, vamos passar para baixo um prop ou post, que vai ser igual ao nosso post do loop logo acima. Uma vez que esta é uma variável, também precisamos vincular isso usando uma sintaxe v bind. Isso é passado como o conteúdo de nossa variável em vez de a string de post. Agora esta postagem do blog está sendo passado de um objeto chamado post sobre o nosso script em até nossos componentes. Em vez de receber o título e o corpo, agora está recebendo a postagem como um objeto. Em seguida, podemos acessar o post.title e também o post.body. Vamos verificar isso. Nosso componente de postagem de blog agora está reintegrado. Mas desta vez eles têm todos os dados que precisam que foram passados como um adereço. 24. Componentes locais: O tipo de componentes usados até agora usando este app.component é classificado como um componente global, que significa que eles estão instantaneamente disponíveis para uso em qualquer lugar em nossa aplicação. Isso também inclui subcomponentes também. Por subcomponentes, quero dizer componentes que estão aninhados dentro de outros. Por exemplo, não que faça muito sentido, mas também podemos colocar nossos componentes de cabeçalho dentro desta postagem do blog. Este modelo é exatamente como o nosso HTML, então poderíamos colocar isso em exatamente como fizemos na página de índice, mas isso era app-header, e também fechar isso fora. Se agora salvarmos isso e atualizarmos nosso projeto, veremos que nosso título de cabeçalho e nossos links de navegação estão disponíveis em cada uma de nossas postagens de blog, e isso acontece porque eles estão disponíveis globalmente. Portanto, a menos que você queira especificamente esse comportamento, também podemos restringir o uso de componentes, em vez disso registrando-os localmente. O registro local envolve a mudança de app.component e a criação de objetos JavaScript regulares. Esses objetos precisam ser criados acima do Vue.CreateApp, e veremos o porquê em apenas um momento. O primeiro vai ser para o nosso AppHeader. Assim como dissemos, este vai ser um objeto JavaScript regular. O segundo componente foi para o BlogPost. Agora, podemos pegar o conteúdo de ambos os nossos componentes e colocá-los dentro desses objetos. Então, o primeiro é o AppHeader, então eu vou rolar para baixo até o nosso componente AppHeader, e então podemos copiar todo o conteúdo dentro dessas chaves. Não copie esta chave, vamos apenas copiar o conteúdo até a seção de cabeçalho de fechamento. Vamos pegar isso e depois colar isso dentro do nosso objeto. O próximo é o nosso BlogPost, e podemos fazer exatamente o mesmo. Você vai pegar os adereços e também o modelo. Adicione isso aqui dentro. Vamos então registrar nossa intenção. Eles usam esses componentes dentro do Vue.CreateApp. Podemos fazer isso criando uma seção componente e, em seguida, adicionar uma vírgula no final. Então o nome do primeiro componente será blog-post, que será igual ao nosso objeto que você criou acima, que é BlogPost. Separado por vírgula, o segundo será o AppHeader. Nossos componentes estão agora registrados para uso dentro de nossa página de índice. Algumas coisas a observar primeiro, o objeto JavaScript, que criamos acima, deve ser declarado acima deste CreateApp para que possamos acessá-los dentro de nossos componentes. Se também tivermos várias instâncias do Vue, agora podemos controlar exatamente quais componentes queremos aparecer ou estar disponíveis em cada um. Nós não precisamos mais desses componentes globais na parte inferior, então eu vou comentar o AppHeader e também o BlogPost para o navegador. Atualize a página, adicione nosso BlogPost e agora apareça ao lado de nosso cabeçalho. Mas uma coisa para notar que dentro de cada um de nosso BlogPost não veria mais este AppHeader. Lembre-se de antes, se rolarmos até nossos componentes, ainda temos esses componentes AppHeader dentro de cada BlogPost, mas não o vemos mais dentro do navegador. Por que é isso? Bem, este cabeçalho de aplicativo agora é um subcomponentes do nosso BlogPost, e agora que nossos componentes são locais e não globais, agora não temos acesso aos nossos componentes em qualquer lugar que queremos. Se quiséssemos usar este AppHeader ou quaisquer outros componentes dentro daqui, nós também precisaríamos passar na opção componentes também. Assim como fizemos dentro de um Vue.CreateApp, também podemos passar em nossos componentes. Isto, novamente, é um objeto e, em seguida, vamos declarar que estamos usando este app-header, que vai apontar para o objeto AppHeader. Salve e atualize, e seu registro local agora coloca nosso AppHeader em cada um desses BlogPosts. Claro que não precisamos disso para o nosso projeto, então eu vou remover esses componentes e também a linha de código dentro daqui. Mas este é um exemplo se você quiser registrar localmente um componente dentro de outro. Agora, nós entendemos mais sobre Vue e componentes. Em seguida, vamos descobrir uma configuração melhor usando uma CLI do Vue junto com o início do nosso próximo projeto. 25. Introdução: crie ferramentas e aplicações de página única: Importar Vue.js como um link CDN é realmente útil para projetos simples ou para começar, aprender tudo sobre o Vue. Mas para aplicações maiores ou mais reais, geralmente queremos usar uma configuração mais sofisticada. Isso nos permitirá dividir nossos aplicativos em componentes reutilizáveis, colocá-los em arquivos separados e criar coisas como aplicativos de página única. Para fazer isso, os próximos vídeos se concentrarão em uma ferramenta chamada Vue CLI. 26. Aplicações de página única: No projeto anterior, analisamos como podemos usar Vue.js para trabalhar com apenas um único caminho para o aplicativo. Podemos tomar um site ou aplicativo existente, criar uma nova instância do Vue e, em seguida, montá-lo para qualquer um dos elementos HTML que você deseja usá-lo em. Também como mencionado anteriormente, também podemos usar Vue.js para controlar nosso front-end completo. Podemos usá-lo para construir o que é chamado de aplicativo de página única. Este é um aplicativo que é controlado inteiramente por JavaScript e funciona dentro do navegador. Com a maneira tradicional de construir sites, pode-se clicar em um link de página, como este link Sobre. A página é então solicitada a partir de um servidor web, que, em seguida, responde com o conteúdo da página, e isso, em seguida, exibido no navegador. Aplicativos de página única funcionam de forma diferente. Em vez de solicitar páginas sobre ativos conforme precisamos deles, Vue construirá nosso aplicativo em pacotes JavaScript. Quando um usuário visita pela primeira vez um aplicativo de página única, o pacote é baixado do servidor. Este pacote JavaScript inclui o conteúdo do nosso projeto, como nossas páginas, significa que toda a navegação entre essas páginas é tratada pelo JavaScript dentro do navegador sem a necessidade de solicitar mais nenhuma página do servidor, daí o nome aplicativo de página única. Como qualquer abordagem de finura, tem prós e contras. Um dos profissionais é que a velocidade é muito rápida. Alternar entre páginas com JavaScript é muito mais rápido do que solicitar uma página de um servidor web. Isso proporciona uma ótima experiência de usuário, uma vez que não há carregamento e navegação em nosso aplicativo é quase instantâneo. Além disso, como este pacote é armazenado dentro do navegador, ele também pode funcionar offline também. Ele também tem algumas desvantagens, porém, como baixar um pacote grande pode ser inicialmente mais lento quando o usuário visita seu site pela primeira vez. Isso pode ser otimizado com divisão de código e veremos isso mais tarde no curso. Além disso, geralmente não é considerado como SEO amigável como páginas geradas pelo servidor tradicional. Como o conteúdo HTML retornado é mínimo e o resto do conteúdo é gerado dentro do navegador resultando em conteúdo que é mais difícil de rastrear por motores de busca, embora as maiores empresas de motores de busca parecem ter realmente melhorou isso recentemente. Além disso, como nota lateral, uma vez que JavaScript pode ser executado dentro do navegador e também o servidor também. Também é possível usar o Vue para criar o que é chamado de aplicativo renderizado no lado do servidor. Isso converte nosso aplicativo JavaScript para ser mais parecido com a maneira tradicional de fazer as coisas, onde solicitamos páginas quando necessário. Este é mais um tópico avançado, porém, e um que não é abordado neste curso. Há também uma ferramenta de estrutura, como Node.js, que ajudará com isso. Vamos em seguida, dar uma olhada em algumas ferramentas que nos ajudarão a criar esses tipos de aplicativos de página única. 27. A ILC do Vue: No projeto com o qual trabalhamos até agora, usamos um link CDN para acessar os recursos do Vue JS. A configuração é boa para projetos menores ou quando apenas se trabalha com uma parte do nosso site. No entanto, para projetos maiores, muitas vezes precisamos de uma configuração melhor com mais recursos e ferramentas. Para ajudar com isso, há o Vue CLI, que está disponível em cli.vuejs.org, que tem plugins para muitas ferramentas populares, que tem TypeScript, Babel, Testing, e também para adicionar facilmente pacotes que podemos precisar, como o Roteador Vue. Mesmo se você não planeja usar muitos dos recursos ou plugins, você provavelmente vai querer uma configuração como esta que nos permita usar componentes mais facilmente e também construir para produção. Ele também inclui ferramentas como Webpack para que possamos agrupar todos os nossos arquivos e ativos para criar esses aplicativos de página única. O CLI é criado e mantido pela equipe central do Vue JS. Embora saibamos que não é necessário, uma vez que já construímos um projeto Vue JS sem ele, geralmente é aceito como a maneira padrão de criar projetos Vue JS. Se rolarmos para baixo, há uma seção de Introdução na parte inferior para nos configurar dentro do terminal. Uma coisa a observar aqui é que Node.js é necessário antes de irmos em frente e fazer isso. Se você ainda não tiver o Node.js instalado, vá para nodejs.org e clique na versão atual para baixar para seu sistema operacional. Além disso, se já faz algum tempo desde que você atualizou, também pode valer a pena passar pelo processo de instalação. É apenas um caso de alguns cliques. Node.js é uma maneira de executar JavaScript no servidor. Nós não estaremos escrevendo qualquer código Node.js ou, de fato, qualquer código relacionado ao servidor. Este é apenas um requisito nos bastidores para o Vue CLI. Uma vez baixado, só precisamos descompactar o pacote e, em seguida, ele continuar através do processo de instalação para o seu sistema operacional particular. Tudo feito. Agora podemos fechar esta janela. Instalando o Node como este também instalará o npm, que é o gerenciador de pacotes do Node, que usaremos para instalar o Vue CLI e também quaisquer pacotes adicionais que precisamos para nossos projetos. Para prosseguir com a instalação, você precisará ir para o terminal. Você pode usar qualquer terminal para isso, como o Mac Terminal interno, você pode usar o Windows PowerShell e também há um incorporado no Visual Studio Code. Se você abrir, selecione a opção terminal e, em seguida, vá para “Novo Terminal”, que abrirá isso na parte inferior do nosso editor de texto. Over, eu vou estar usando iTerm para este projeto. A primeira coisa a fazer é verificar o npm e Node estão ambos corretamente instalados. Primeiro podemos digitar no nó e, em seguida, traço v. Isso irá retornar para nós a versão atual dos nós que está instalado. Em seguida, npm -v, que retorna a versão instalada do npm. Ambos os comandos devem retornar o número da versão, mas se você vir um erro, você precisará instalar corretamente Node e npm antes de continuar. Voltando à página inicial do Vue CLI, temos esta seção de instalação na parte inferior. Podemos usar npm ou o gerenciador de pacotes Yarn. De qualquer forma está completamente bem. Se você não tiver atualmente a configuração do Yarn em sua máquina, eu recomendaria usar o comando npm pois isso não precisa de nenhuma instalação adicional. Vamos copiar e colar isso acabou, pressione “Enter”, e isso passará pelo processo de instalação da CLI. Se você é um usuário do Mac e acertar quaisquer erros de instalação relacionados a permissões, você também pode precisar adicionar o pseudo prefixo antes desta instalação do npm, então você precisará digitar a senha quando solicitado. Ou melhor ainda, você também pode corrigir as permissões que estão impedindo a instalação. Depois de fazer isso, podemos usar o comando Vue create, seguido do nome do nosso projeto. Mas primeiro, vamos usar o comando cd para mudar para o nosso diretório onde queremos instalar nosso projeto. Vou mudar para a área de trabalho, aperte “Enter”. Bem, você pode colocar isso em qualquer lugar que você quiser. Podemos então usar Vue criar e o nome do projeto que eu vou chamar de demonstração CLI, clique em “Enter”. No momento da gravação, o Vue CLI nos dá a opção de Vue versão 2 ou Vue 3, que também vem com a configuração Babel e também eSlint para nós. Selecione “Vue 3". Além disso, lembre-se de que, no futuro, a opção para o Vue 2 pode não estar lá. Às vezes, as opções mudam, mas geralmente é bastante auto-explicativo. Agora deve nos deixar com nosso projeto de demonstração na área de trabalho. Agora precisamos mudar para este diretório de demonstração. Como diz, Babel pode usar cd para mudar o diretório em nossa demonstração CLI. Agora estamos dentro desta demonstração, podemos então executar nosso servidor de desenvolvimento. Se você usar um npm, podemos digitar npm servir, pressione “Enter”. Na verdade, este é npm executar servir, pressione “Enter”. Isto irá agora configurar o nosso servidor de desenvolvimento. Uma vez feito isso, ele nos dará um link que você pode agora abrir dentro do navegador. Veja o projeto inicial toda a configuração. Tudo o que precisamos fazer agora para editar isso é abrir este projeto dentro do nosso editor de texto para que possamos conectar isso. Agora estamos prontos para escrever em nosso código Vue JS. Este projeto, no entanto, parece um pouco diferente da estrutura do projeto anterior. Em seguida, vamos ter uma visão geral do que está incluído na configuração do projeto. 28. Estrutura do projeto: Eu só quero tirar alguns momentos para olhar para a estrutura do projeto, que acabamos de criar. Se olharmos na barra lateral veremos todos os arquivos e pastas que estão agora dentro do nosso projeto. A primeira pasta que vemos são os módulos do nó. Esta pasta é onde todos os módulos MPM estão instalados. Se você já usou nó antes, você estará familiarizado com este tipo de configuração. Normalmente, projetos que usam nó é dividido em pacotes. Cada um adiciona algumas funcionalidades. Podemos ter um pacote, por exemplo, que formata datas, um que faz validação de formulário. Nós também podemos adicionar nossos próprios pacotes aqui também, usando MPM que acabamos de configurar. Este é o lugar onde coisas como as bibliotecas de código vue.js localizadas, em vez de vinculá-lo ao script CDN como fizemos no primeiro projeto. Se você estiver familiarizado com tudo isso, uma instalação MPM foi executada para nós quando configuramos o projeto com a CLI. Depois disso, temos a pasta pública que contém nossos arquivos estáticos, como qualquer imagem que queremos usar, e também qualquer HTML. Primeiro temos o favicon, que é o ícone que aparecerá na aba do navegador. Então temos o index.html. Se abrirmos este index.html, não vemos muito conteúdo dentro daqui, e como mencionei no vídeo do aplicativo de página única, esses tipos de aplicativos têm uma estrutura html mínima. Em seguida, o resto do código será empacotado e injetado nesta div com o ID do aplicativo. Assim como no primeiro projeto onde montamos a instância vista para um determinado elemento em HTML. Este é o local neste projeto, qual ele será montado. Veremos como isso é feito muito em breve. Depois disso, temos a pasta de origem. Esta pasta é onde fazemos a maior parte do nosso trabalho. Aqui é onde estaremos na maior parte do nosso código para este projeto. Aqui temos a pasta de ativos, é aqui que armazenamos os ativos para o projeto, como qualquer arquivo CSS qualquer ícone nossos telefones e também podemos colocar imagens dentro daqui também. Abaixo disso, a pasta de componentes é algo que veremos com mais detalhes em breve. Mas ao invés de criar componentes como vimos na última seção, podemos organizá-los em arquivos separados. E é aqui que vamos armazená-los. O único componente que temos configuração é este exemplo HelloWorld. Este é um exemplo de um único componente de arquivo. Isso é geralmente dividido em três seções. Primeiro de tudo, temos a seção template, que vai conter nosso código HTML. Isso é semelhante à última seção onde criamos nossos componentes globais e locais, tivemos a seção de modelo como uma string. No entanto, com um único componente de arquivo, isso é muito mais conveniente, já que podemos colocar isso como HTML normal. Também podemos usar as chaves duplas para inserir nossos dados. Então, tudo isto deve parecer bastante familiar. Se nós rolar para baixo até o final da seção de modelo, então temos uma seção de script. Na verdade, é onde vamos adicionar o nosso JavaScript e também o nosso código JS de visualização. Dentro desta seção padrão de exportação é onde podemos configurar coisas como nossos dados e métodos. Então, finalmente, na parte inferior, também temos uma seção de estilo onde poderíamos colocar nosso CSS, dividindo nosso código em componentes de arquivo único como este. É possível usando ferramentas de contas como o Web Park, que agrupa tudo junto, lança em um arquivo de saída que é então usado para produção. Em seguida, vemos o arquivo App.vue, e este é um arquivo especial do Vue que você pode pensar como o arquivo principal ou o componente principal. Assim como com o exemplo HelloWorld que acabamos de olhar, este arquivo também tem uma seção de template, um script, e também a seção de estilo também. Poderíamos escrever nosso código de projeto completo dentro deste único arquivo. No entanto, vai ficar muito grande. Em vez disso, geralmente pegamos nosso código e dividi-los em componentes menores. Como esses componentes em seu próprio arquivo separado, precisamos importá-los, assim como vemos aqui, antes de poder usá-los em nosso template. Então, com todo esse código Vue.js no lugar, agora só precisamos de uma maneira de montar isso para o dom. Já vimos no index.html, temos este ponto de montanha, que é o div com o ID do App. Esta montagem é feita no próximo arquivo, que é o main.js. Este é o principal arquivo JavaScript para o nosso projeto e o lugar onde também podemos adicionar plugins para tais como o roteador. Como agora estamos usando o módulo de visualização MPM, agora vamos precisar importar as partes desta biblioteca que precisamos. A parte principal que precisamos é este CreateApp e estamos usando as chaves. Então importamos apenas a única seção da biblioteca vue. Isso também é conhecido como uma importação nomeada. Agora temos acesso ao CreateApp. Podemos usá-lo exatamente como fizemos no projeto anterior e, em seguida, montar isso para a div com o ID do App, que acabamos de ver em nossa página de índice. No projeto anterior, adicionamos um objeto ao CreateApp. Fizemos isso manualmente passando em um objeto e, em seguida, salvamos coisas como nossos dados. Mas agora, em vez disso, com esse tipo de configuração, importamos os componentes raiz, que é o app.vue. Então todos os nossos componentes serão aninhados dentro daqui. Tudo isso pode parecer um pouco complexo no início, mas tudo o que estamos fazendo geralmente é criar uma página de índice ou um arquivo HTML e, em seguida, montar nosso aplicativo de visualização para ele. A diferença agora, em vez de passar em um objeto, é que este novo arquivo de aplicativo também pode conter componentes, mas, finalmente, todos eles aninhados sob este um arquivo App.vue. Depois disso, temos o arquivo gitignore. Se você estiver usando o git para controle de versão, temos um arquivo para dizer quais arquivos não queremos incluir no gits, seguido por um arquivo de configuração babel, que podemos usar para adicionar qualquer configuração personalizada do babel. Babel é uma ferramenta usada para transformar qualquer código JavaScript mais recente que escreve na sintaxe de estilo antigo. Se o navegador ainda não o suporta, o package.json é um arquivo de configuração que temos em projetos baseados em nós. Ele contém informações do projeto, como o nome e também quaisquer scripts que vamos usar para iniciar nosso projeto e também construir para produção. Nós já usamos este script serve quando executamos MPM run serve, inicializando nosso servidor de desenvolvimento. Dependências logo abaixo são os principais pacotes nosso projeto precisa e não podemos adicionar mais em uma data posterior também. Vamos vinculá-lo ao pacote Vue.js em vez de usar um link CDM. Dependências de desenvolvimento são pacotes que só precisamos durante o desenvolvimento, como o servidor de desenvolvimento para executar o projeto e também coisas como eslint, que irá verificar a qualidade de nosso código dentro do editor durante o desenvolvimento. Estes não serão incluídos quando enviarmos o nosso site para a produção e teremos um arquivo de bloqueio que não tocamos. O meu é uma versão de fio, mas o seu pode não ser se você estava apenas usando MPM. Este é um arquivo gerado automaticamente que lista todos os pacotes que usamos, juntamente com todas as dependências dos números de versão exatos que temos instalado. Finalmente, uma nota rápida também, temos apenas uma pequena quantidade de dependências e dependências de desenvolvimento dentro de um aqui. No entanto, isso resultou em muito mais módulos de nó. Isso ocorre porque alguns desses pacotes também têm sub dependências também. Assim, outros pacotes também são puxados para dentro com MPM. Mas agora esta é uma visão geral do nosso projeto de curso e vamos ficar muito mais familiarizados ao criarmos nosso próximo projeto. 29. A extensão Vetur: No vídeo anterior, este arquivo App.vue, entre outros, tinha algum bom realce de sintaxe codificado por cores dentro do nosso editor de texto. Mas sua versão pode ser bem simples, assim como vemos aqui. O realce de sintaxe, entre outros recursos, foi criado dentro do Visual Studio Code por uma nova extensão. Se você estiver usando o Visual Studio Code, eu recomendaria que você também instale isso. Para fazer isso, vá para a guia Extensões. Então podemos procurar por uma extensão chamada Vetur. Selecione isso, e você precisará instalar isso e habilitar. Eu já tenho isso instalado, então eu vou clicar no botão Ativar. Então podemos voltar para o nosso app.vue. Vetur agora nos dá este belo realce de sintaxe para tornar nosso código muito mais legível, juntamente com alguma formatação e auto-completamento também. Se você estiver usando o Visual Studio Code, eu recomendaria que você instale essa extensão, mas uma experiência de desenvolvedor muito melhor. 30. Introdução: projeto de contagem regressiva: Essas próximas seções vão se concentrar na criação de um novo projeto, que é um aplicativo de contagem regressiva de eventos. Vamos usar a configuração mais sofisticada do Vue CLI, e também aprender sobre como passar dados entre componentes, e também muito mais técnicas que o Vue tem para oferecer, como observadores, propriedades computadas e assim muito mais. Vamos pular para o próximo vídeo, onde vamos baixar o iniciante, e então podemos começar a construir nosso projeto. 31. Download do projeto inicial: Para este projeto, eu forneci um modelo inicial que está disponível para download no repositório do GitHub. No início, quando baixamos o repositório completo, meu salvo na área de trabalho como um vue-3-curso mestre. Aqui dentro, você verá muito mais pastas. Para o que você estava interessado é um motor de contagem regressiva. Vamos arrastar isso para o código do Visual Studio. Vou começar a trabalhar com nosso novo projeto. Usar o projeto inicial é exatamente o mesmo que o Vue-cli-setup, que analisamos na seção anterior. Mas usar um projeto inicial significa que todos temos os mesmos números de versão. Também atualizarei isso quando for seguro fazê-lo. Dentro de um código do Visual Studio, você verá todos os arquivos e pastas familiares da demonstração anterior. A única diferença é se formos para o arquivo App.vue. Dentro do nosso script, temos esta matriz de dados de eventos. Esta é uma matriz de objetos que vamos usar como ponto de partida para este projeto. Isso só vai, digamos, eu estava digitando alguns eventos diferentes, para que possamos ver essa informação no navegador. Mas muito em breve, vamos criar esses eventos. Vamos atualizá-los e também removê-los de nossos projetos. Se desejar, você também pode alterar qualquer uma dessas informações do evento, como os nomes do evento, os detalhes, todas as cores do plano de fundo. Mas uma coisa a notar são estas datas. Muito em breve, vamos precisar de uma data de evento que no passado ou tenha expirado. Nós vamos precisar de alguns no futuro e vamos precisar de alguns para os dias de hoje também. Isso só nos permitirá testar as coisas quando chegarmos a esse estágio, mas voltaremos a isso muito em breve. Também para manter o tamanho do download baixo, eu também removi os módulos do nó. Precisaremos ir até o terminal e também instalar isso. Se você usar qualquer built-in no terminal dentro de um código do Visual Studio, você iria para Terminal, Novo Terminal, e isso seria aberto dentro da pasta do projeto. Se você usar qualquer terminal separado, você precisará usar o comando CD, que irá navegar para o nosso diretório de projeto. O meu é salvo na área de trabalho. Para começar, vamos CD na pasta do repositório, que é o vue-3-course-master. Em seguida, a partir daqui, você vai CD na vista Countdown Starter. Certifique-se de que você está na pasta correta. Em seguida, vamos instalar os módulos de nó com npm i. npm i é abreviado para instalado. Isso vai puxar todos os pacotes que precisamos para este projeto. Uma vez feito isso, podemos iniciar o servidor de desenvolvimento com npm run serve. então isso vai abrir nosso projeto no host local. Se Command ou Control clicar, isso abrirá isso dentro do navegador. Ao desenvolver este projeto. Podemos deixar este servidor de desenvolvimento em execução. Mas se quisermos fechar isso, tudo o que precisamos fazer é pressionar Control-C, que fechará nosso servidor de desenvolvimento para que não possamos mais acessar nosso site. Em seguida, para reiniciar as coisas, em seguida, executar npm run serve mais uma vez. Agora podemos acessar nosso projeto mais uma vez no navegador. 32. Componentes de arquivo único: Anteriormente, quando olhamos para os componentes, tínhamos uma prévia do que vamos construir agora, e também a estrutura dos componentes também. Usando esta configuração da CLI de visualização, podemos criar esses componentes em seu próprio arquivo para mantê-los organizados usando o método de componentes de arquivo único. Isso é possível, uma vez que a CLI usa ferramentas como o Web Park para agrupá-las todas para produção. Portanto, não somos penalizados por ter muitos arquivos para baixar para o usuário. Sobre coisas a observar é que temos uma pasta de componentes, mas podemos criar componentes em qualquer lugar dentro desta pasta de origem. Mas geralmente os agrupamos na pasta de componentes, por isso é mais organizado. Agora vamos criar nosso primeiro componente para este projeto, que vai ser o event.vue. Como uma convenção de nomenclatura, geralmente começamos nomes de componentes com uma letra maiúscula. Essas necessidades têm a extensão.vue. Este Event.vue vai ser o componente que vamos usar para cada um dos eventos listados. Aqui, podemos configurar os componentes como vimos anteriormente com nossas seções gratuitas. Tenha a seção de modelo. Temos a seção de script com nossos padrões de exportação. Então, finalmente, na parte inferior da seção de estilos. Isso funciona exatamente como anteriormente quando olhamos para componentes globais e locais. Nós movemos sobre a seção de modelo do nosso HTML. Isso é muito mais conveniente agora, já que podemos apenas escrevê-lo como um arquivo HTML normal, em vez de incluir um isto como uma string. Nosso JavaScript entra na ação de scripts, inclui nossos dados, nossos métodos, adereços e outros também. Em seguida, envolvemos isso em um padrão de exportação, para que possamos importar todos os componentes para outros arquivos. A seção de estilo, ele pode ser escrito apenas como uma folha de estilo regular. O CSS que escrevemos aplica-se a toda a nossa aplicação, não apenas ao modelo dentro deste arquivo. No entanto, se você quiser restringir isso apenas para se aplicar ao arquivo único, temos os atributos com escopo. Além disso, se quisermos usar outros idiomas também, podemos adicionar isso como um atributos Lang, dentro do carregador apropriado. Coloque mais sobre isso mais tarde. Veja nosso componente. Primeiro precisamos adicionar algum conteúdo dentro do modelo. Agora, vamos para o nosso event.vue e simplesmente adicionar elementos AP com o texto de oi. No momento, nosso componente de evento é apenas um arquivo normal do Vue. Para vê-lo, precisamos colocá-lo exatamente onde queremos que ele apareça. Lembre-se desde o início que duro neste arquivo App.vue, que é o arquivo Vue.js principal, que é montado no DOM. Então, tudo começa a partir daqui. Este vai ser o lugar onde podemos adicionar e registrar, nosso componente para exibir. Em primeiro lugar, poderíamos remover os componentes HelloWorld. Também podemos remover isso da pasta de componentes. Então podemos registrar nosso novo arquivo Event.vue. Role para baixo até logo abaixo deste objeto de amostra. Aqui vemos que ainda estamos tentando importar o exemplo HelloWorld. Onde, em vez disso, queremos importar o nosso evento, que também está dentro da pasta de componentes. Em seguida, precisamos registrar este componente para usar em nosso modelo. Para fazer isso, passamos nosso nome importado para o objeto de componentes. Com isso agora registrado, podemos ir até o modelo. Então eu vou colocar isso entre um template tags. Podemos até fazer isso como um elemento HTML com a tag de abertura e fechamento. Ou também podemos usar uma tag de fechamento automático, assim como faríamos com uma imagem. Salve isso e vemos o texto de alta dentro do navegador. Esse é outro dos benefícios de usar a configuração da CLI do Vue. Por padrão, ele inclui recarregamento a quente, então, se salvarmos o projeto, ele será atualizado instantaneamente no navegador. Obviamente não queremos esta mensagem de oi, então, em vez disso, vamos passar para nossos componentes Event.VUE, e substitui com nossos dados de evento. Cada um dos nossos eventos vai ser cercado em um artigo, que possamos mudar isso para um artigo elementos. Em seguida, uma div que vai ter a classe de dados. Então, ao lado disso, vamos ter uma segunda div, e isso vai ter a classe de contagem regressiva. Isso nos dará a estrutura de que precisamos para nossos eventos. A seção de dados irá conter o nome e também os detalhes dos nossos eventos. Então a seção de contagem regressiva abaixo será a seção do lado direito, que contará o número de dias para esses eventos. Então, primeiro dentro dos dados, o título de nível três, que será para o título. Por enquanto, podemos apenas código rígido em qualquer evento dentro daqui, como uma formatura, uma classe de nome. Que usará NCSS, muito em breve. Elementos AP, que vai ser os detalhes. Então podemos codificar algum texto para nossos detalhes. Esta vai ser toda a estrutura para a seção de dados, então para baixo para a contagem regressiva. Isto será dividido em duas seções: A primeira vai ser uma div, que irá conter um botão. Este botão irá simplesmente emitir uma cruz para que possamos excluir o evento. O wrapper terá uma classe de remove_btn_wrapper, então podemos colocar nosso botão aninhado dentro. Para nos dar a cruz podemos adicionar uma pequena entidade h, que é o e comercial, o hash, e, em seguida, o valor de 10060. Isso seria um ponto-e-vírgula e uma classe de botão, mas eu vou estilo em que vai ser remove_btn. Vamos adicionar algum estilo em breve, então esta seção de dados fica à esquerda e, em seguida, esta seção de contagem regressiva está à direita. Por enquanto, porém, se formos abaixo deste remove_btn_wrapper, a próxima coisa é adicionar elementos PA, que será o número de dias restantes. Por enquanto, isso seria um valor codificado de 56, uma tag break, e então dentro dos pequenos elementos, podemos ter os textos dos dias restantes. Rolando para baixo por enquanto, tudo o que precisamos fazer dentro de nossa ação de scripts, é dar um nome a esses componentes. Dado que um componente chamado não poderia ajudar na depuração, já que o nome do componente pode aparecer ao lado de mensagens, e também nas ferramentas de desenvolvedor do Vue também. Então, finalmente, eu vou estilo seção na parte inferior, e isso também vai ter os atributos esculpir. Portanto, esses estilos só se aplicam a este modelo. Do topo, todo o evento está cercado nos elementos do artigo. As cores serão dinâmicas em breve, mas por enquanto podemos definir uma cor de fundo de cinza de ardósia clara. Isso também fará uso da flexbox para layout então exibir flex. Em seguida, isso nos permitirá usar uma linha itens e, em seguida, censurar nosso conteúdo. O raio de fronteira de um rem. Uma vez que haverá vários eventos, também podemos adicionar alguma margem no exterior deste artigo de um rem na parte superior e inferior e zero à esquerda e à direita. Algum preenchimento, que é o espaço dentro, dentro do evento de 0,2 rems na parte superior e inferior. Em seguida, um valor maior de um rem à esquerda e à direita. A cor do texto apenas se destaca nos fundos mais escuros da fumaça branca. Finalmente o peso da fonte de 300. Em seguida, temos aninhado dentro da seção de dados e também a seção de contagem regressiva. Estes vão fazer uso da flexbox para que possamos adicionar algum espaço. Para fazer isso, podemos aplicar um valor flexível antes de tudo aos dados. Deve ser um valor de três. Então podemos descer para a seção de contagem regressiva. Se definirmos o valor flex dentro daqui para ser um, a seção de dados agora ocupará três vezes o espaço da seção de contagem regressiva. Após o centro da cidade, o texto alinhar para estar no centro, o tamanho da fonte de 1.6 rems. Em seguida, uma placa no lado esquerdo, que vai dividir nossas duas seções. Podemos fazer isso com uma borda esquerda, que terá um pixel de largura e uma linha sólida. Depois disso, vamos definir o tamanho da fonte para o nosso texto de nome e também detalhes. Nós apenas nomear seções ser um pouco maior para que possamos definir o tamanho da fonte para ser 1.8 rems. Em seguida, a seção de detalhes, que será um pouco menor, então vamos para um tamanho de fonte de 1,6. A última seção é cuidar é este botão remover e também o texto. Então, primeiro de tudo, vamos passar pelo botão real. Se rolarmos para cima, podemos ver que isso tem uma classe de remove_btn. Um fundo transparente para remover a cor de fundo branco. Defina o botão de largura da borda none. Também podemos mudar o cursor para ser um ponteiro. Quando o usuário passa o mouse sobre este botão. Finalmente, podemos pressionar este botão para o lado direito, definindo a linha de texto no wrapper. O wrapper tinha a classe de remove_btn_wrapper. A única propriedade CSS é definir a linha de texto para estar correta. Isto dá-nos agora a base de que precisamos para o nosso evento. Agora podemos usar um loop for, para percorrer este evento e tornar o conteúdo mais dinâmico. 33. Tornando nossos eventos dinâmicos: Incluído com este curso dentro do arquivo App.vue, eu forneci uma matriz de objetos. Este é o nosso EventData que agora vamos usar para fazer loop through e fornecê-los como adereços para o nosso componente de evento. Atualmente isso é comentado já que se temos uma variável como esta e não a usamos, o plugin eSLint que usamos em, irá lançar um erro. Agora, vamos usar isto. Podemos selecionar tudo isso e descomentar tudo isso. Podemos fazer tudo isso ao mesmo tempo com realce e , em seguida, um comando ou controle ao lado da barra. Uma coisa para ter cuidado aqui é que não podemos colocar em nenhum código JavaScript que queremos dentro desta seção de script, mas Soul Vue reconhece, ele também precisa estar presente dentro do padrão de exportação. Então agora precisamos criar uma propriedade date e, em seguida, atribuir esta matriz a ele. Criar esta seção de dados e, em seguida, dentro da seção de devoluções, vamos criar uma propriedade date chamada events. Isso vai ser igual ao nosso array, que é EventData. Vue agora está ciente deste EventData, uma vez que agora está armazenado dentro de eventos. Agora podemos ir até o nosso modelo e vamos percorrer todos esses eventos. Em seguida, ele cria um novo componente para cada um. Para isso, criaremos uma lista não ordenada e criaremos um item de lista para gerar cada um de nossos eventos. Este item da lista vai ser repetido, então podemos usar v-for. Vamos dizer “evento em eventos”. Além disso, isso precisa de uma chave dinâmica por trás dela. Temos um valor exclusivo para cada um, que é este ID. Em seguida, podemos mover nossos componentes de eventos dentro deste item de lista onde vamos passar nosso evento como um adereço. Use dois pontos uma vez que isso leva em alguns dados dinâmicos, e vamos definir este nome para ser evento, que será igual à nossa variável de evento do loop. Salve isso e instantaneamente veremos que temos seis eventos diferentes dentro do navegador. Como temos seis eventos dentro de nossos dados de eventos, temos, no entanto, todos temos a mesma informação, todos têm o mesmo nome e também a mesma descrição, e a mesma data para. Para corrigir isso, vamos passar para o nosso componente Event.vue. O primeiro passo é receber esses dados como adereços. Props é uma matriz que leva em nossas cordas, e apenas prop que estamos recebendo é a informação do evento. Agora podemos usar isso em nosso modelo. Temos o nome do evento, então abra as chaves duplas e, em seguida, substitui pelo event.name. Esse é o nosso nome agora tratado. Em seguida, na seção de detalhes, remova isso. Este foi o evento.details. Bom. Tudo isso está funcionando, mas todos eles ainda têm a mesma cor de fundo. Se formos para o nosso EventData, podemos ver que uma cor de fundo diferente foi fornecida para cada um desses eventos. Agora podemos fazer uso disso sobre em nosso componente de evento, passando isso como uma propriedade de estilo dinâmico e usar isso para definir o plano de fundo. Dentro do artigo de abertura podemos usar os dois pontos para vincular uma seção de estilo dinâmico. Lembre-se, nossos estilos são passados como um objeto, então precisamos abrir as chaves. Aqui dentro vamos definir o fundo para ser igual ao nosso event.background. Bom. Isso apenas nos deixa com o número de dias restantes para os quais vamos voltar já que não precisamos realizar um cálculo a partir do EventDate. Eu também vou corrigir o contraste de cor também para fundos como este amarelo, onde não podemos ver o texto que foi sobreposto. Para terminar isso, vamos apenas adicionar um pouco de CSS, em primeiro lugar, à nossa lista na seção do aplicativo e role para baixo até a seção de estilo na parte inferior. Os eventos são cercados na lista não ordenada, que vamos definir para ter um preenchimento zero para remover qualquer padrão do navegador. Em seguida, cada um desses eventos são armazenados no item da lista. Então vamos definir o estilo da lista para ser nenhum. Então, finalmente, o cursor vai ser um ponteiro cada vez que eu passar o mouse sobre qualquer um desses itens da lista. Para restringir também a largura máxima desses eventos, se esticarmos o navegador, vamos agora definir a largura máxima dentro deste wrapper aplicativo. Este aplicativo é o wrapper para toda a nossa aplicação, e podemos ver isso se entrarmos em nosso index.html. Esta é a seção exatamente aqui onde nossa aplicação é montada. Isso se aplicará globalmente. Tudo o que vou fazer aqui é definir a largura máxima para 600 pixels. Então podemos centralizar isso com margem zero auto. Zero irá definir a margem na parte superior e inferior e, em seguida, auto irá aplicar toda a margem, que está disponível igualmente à esquerda e à direita. 34. Calculando dias restantes: Para cada um de nossos eventos, precisamos calcular o número de dias restantes até que o evento ocorra. Para fazer isso, vamos criar um cálculo baseado na data atual e, em seguida, a data dentro de nossos objetos, então esta propriedade dentro de cada um de nossos itens. Uma vez que você tem isso e as datas atuais, nós podemos então calcular a diferença entre essas duas datas e, em seguida, converter este para ser o número de dias. Isto dentro do [inaudível] nós vamos criar um método. Sob a seção de dados, podemos criar nossa seção método, eo nome do método vai ser Dias Left. Dias restantes vão levar no evento em particular que queremos calcular. Isto irá em breve calcular o número de dias restantes. Mas primeiro precisamos de uma maneira de realmente chamar esse método e também fornecer os dados do evento. Bem, não podemos fazer tudo isso de uma vez em nosso modelo. Podemos configurar uma propriedade que vai ser passada para os nossos eventos. Isto será dinâmico, e este será o número de dias restantes. Isso pode ser definido como método antigo, que também é chamado Dias Esquerda, onde vamos passar em cada evento individual, que é do nosso loop. Uma coisa para ter cuidado aqui é que nós não estamos realmente passando este método como um adereço. Em vez disso, o que vamos fazer é passar o resultado deste método, que vai ser devolvido. A maneira que podemos fazer isso é chamando esta função e, em seguida, fornecendo uma seção de retorno no final. Nós vamos retornar valor em vez da referência real a este método. Vamos primeiro verificar se nosso método está funcionando e estamos recebendo os dados do evento fazendo um log do console. Vamos fazer o event.date e para isso vamos precisar ir para as ferramentas de desenvolvedor do navegador com o botão direito do mouse e inspecionar, abrir o console e agora vemos seis datas diferentes, já que estamos chamando este método para cada um dos nossos eventos, principalmente isso está funcionando bem. Agora precisamos trabalhar com alguns métodos de data JavaScript, e para obter a data atual, podemos usar date.now. Primeiro vamos fazer isso dentro de um log de console e podemos verificar se temos todas as informações que precisamos para registrar dados agora. Então podemos atualizar o navegador, e isso pode parecer bastante confuso, mas precisamos olhar para cada um desses problemas. Estamos fazendo isso dois logs de console para cada vez que o método é chamado. Os dois primeiros são para o primeiro evento, o terceiro, quarto item é para o segundo evento e assim por diante. Podemos ver que tanto o event.date, que é o primeiro na data.now está em formatos completamente diferentes. O primeiro da data do evento é uma string, que é o ano, o mês e, finalmente, o dia e, em seguida, abaixo da data atual. A data atual será formatada em vários milissegundos desde 1 de janeiro de 1970. Para comparar esses dois, precisamos converter a data do evento para estar no mesmo formato, e para fazer isso JavaScript nos fornece um método de data chamado Pass, upon é substituir, novamente vamos acessar o objeto date e chamar o método Call Pass. Onde vamos passar em nosso event.date, atualize o navegador e veremos agora que cada par de datas que temos agora está no mesmo formato. Isso é bom porque isso agora significa que podemos comparar nossas duas datas que temos. Temos de construir isto em várias etapas. A primeira etapa é deduzir a data atual da data do evento. Pegue isso e depois deduzimos a data. Agora. Isso nos dará a diferença que eu vou armazenar em uma constante chamada Tempo. Assim como os resultados dentro do console desta vez, variável também vai ser armazenado em milissegundos. Esta constante de tempo é armazenada em milissegundos, então precisamos agora converter isso. Pegue todas as constantes e para converter milissegundos em segundos, dividimos o resultado por 1000, o que nos dará o número de segundos entre a data atual e a data do evento. Mas não queremos o número de segundos. O que queremos fazer é converter isso no número de dias. Para converter esses segundos dias, primeiro, precisamos multiplicar isso por 60 segundos e então novamente, vamos multiplicar isso por 60 minutos e por último, vamos multiplicar isso por 24 desde que temos 24 horas em um dia. Estes serão nossos novos resultados que podemos armazenar dentro de uma constante chamada Dias e garantir que o editor de texto não coloque esses colchetes nos lugares errados. Precisamos fornecer os parênteses em torno dos números. Como recapitulação, temos tempo em milissegundos. Para converter isso em segundos, dividimos isso por 1000. Multiplicamos isso pelo número de segundos em um dia, o número de minutos em um dia e, em seguida, o número de horas em um dia, o que resulta no número de dias entre nossa data atual e também a data do evento. Podemos dar um passo fora destes dois reduzindo 60 multiplicados por 60 em vez de passar no resultado de 3.600. Isso é exatamente o mesmo, mas apenas uma maneira mais curta de fazer as coisas. A última coisa a fazer para obter o nosso número de dias corretamente formatado é arredondar este número para cima. Corte o resultado disso, use uma função matemática chamada Seal, que vai arredondar nosso número para o número inteiro mais próximo. Passa [inaudível]. Podemos limpar nossos logs de console e é esse número de dias que queremos retornar a partir deste método. É o valor de retorno que vai ser passado como um prop para o componente de evento. Vamos para este componente de evento agora, podemos receber isso como um adereço dentro de nossa matriz. Este prop foi dias restantes, então podemos verificar se isso está funcionando, produzindo isso dentro do nosso modelo. Em vez deste valor codificado, vamos remover este e saída prop que estava dias restantes. Para o navegador e isso agora mudou para cada um de nossos eventos. Observe que ele verá números positivos e negativos e isso é completamente normal e isso é algo que vamos lidar em breve. 35. Renderização condicional: Anteriormente, quando olhamos pela primeira vez para esta matriz de dados de evento, eu recomendei que você defina algumas das datas nesses objetos sejam no passado e outras no futuro. Se você ainda não fez isso, agora será a hora de fazê-lo. Isto é o que eu gostaria que vocês fizessem: definam pelo menos uma data para estar no passado, uma para estar com a data de hoje, uma para estar com a data de amanhã, e outra com qualquer data futura. Isso ajudará a testar as coisas muito em breve. Para fazer isso, vamos fazer uso de renderização condicional, que é uma maneira de mostrar apenas algo, como nosso evento, quando uma determinada condição é atendida. No nosso caso, a condição será o número de dias restantes, que temos configuração do último vídeo dentro deste método. Se isso retornar um número positivo, este evento ainda está para ocorrer. No entanto, se ele retornar um número negativo, sabemos que essa data passou. O que significa que podemos esconder isso do usuário dentro do navegador. Para fazer isso, vamos para o nosso event.view e, em seguida, abrir dentro da seção de artigo de abertura. Podemos mostrar e ocultar esses eventos usando uma diretiva vista chamada v-show.v-show é outra diretiva e só mostrará este elemento se esta condição for verdadeira. Por exemplo, se 10 for maior que 1, isso agora é verdadeiro e nossos eventos serão exibidos agora. Se dissermos se 10 é igual a 1, isso não é verdade, então isso agora removerá nossos eventos. Mas, em vez disso, o que precisamos fazer é olhar para esses dias restantes adereços e decidir se é um número positivo ou negativo. Para d isso, podemos usar uma função JavaScript chamada Math.sign. Isso nos permitirá passar em qualquer número e recuperar um negativo, um positivo ou um zero. Podemos ver aqui com os exemplos, se passarmos no valor de três, obterá uma saída de um. Se for negativo, teremos o valor de um negativo. Se for zero, obtemos o valor de zero. Não importa o valor do número que estamos passando, só vamos recuperar um 1, um negativo, ou um zero. Isso vai ser perfeito para usar em nosso v-show vamos passar em Math.Sign e, em seguida, nossos dias esquerda prop. Agora podemos verificar se isso é igual a negativo ou ao projeto. Os resultados que você vê aqui atrás dependerão da data que você definiu para cada um dos seus eventos. Atualmente só tenho um evento que está no passado, então só vejo um no navegador. Para ver os acontecimentos que ainda estão por acontecer, podemos mudar isto para ser positivo. Mas com estas duas opções, só vimos cinco dos nossos seis eventos. Isso ocorre porque definimos um desses eventos para ser a data de hoje, que significa que haverá zero dias restantes. Para lidar com isso, vamos definir isso para não ser igual a um negativo, que irá filtrar todas as datas de validade e apenas nos deixar com a data que é hoje ou qualquer no futuro. A próxima coisa a cuidar é o texto, que são os dias que faltam. Se o número de dias restantes for zero, ele deve ser lido hoje, e para quaisquer eventos passados, ele deve ler dias atrás. Podemos, novamente, fazer uso dos dias restantes prop, que é eventReceive, e combiná-lo com mais algumas diretivas vista chamados v-if e v-else. Como eles soam, estes funcionam como instruções JavaScript if-else. Nós fornecemos duas seções de código chamado if e else. Se a condição for verdadeira, essa seção será executada. Se for falso, a seção mais que será executada. Na parte inferior deste modelo de evento, temos este p elementos, que vou colocar para esta seção logo acima. Vamos lidar com os eventos de hoje primeiro. Abra os elementos p e vamos definir o texto para ser hoje. Então, que condição queremos exibir esse elemento? Bem, vamos verificar se o número de dias restantes é igual ao valor de zero. Podemos então combinar isto com uma directiva v-if e verificar se o número de dias restantes é igual a zero. Se isso for verdade, isso vai renderizar o texto de hoje para este evento em particular. Guarde isso, e só temos um evento que é hoje, e vemos este texto aqui dentro. Isso agora deixa nossos dois elementos p ao lado do outro, mas só queremos mostrar um ou outro. Para isso, podemos adicionar a diretiva v-else para o próximo elemento p. Salve isso, e agora só vemos uma dessas seções dependendo do número de dias restantes. Uma coisa é estar ciente ao usar v-if e v-else, a seção v-else deve seguir imediatamente o elemento v-if, então não poderíamos ter nada entre tais como um span. Como podemos ver, isso causará um erro. Isso agora significa que o primeiro elemento de hoje mostrará se o número de dias é zero. Se o evento estiver no passado ou no futuro, o segundo elemento p será exibido. Dentro deste segundo p elementos, há mais algum trabalho que precisamos fazer para mostrar as palavras corretas. Em primeiro lugar, dentro da pequena seção, temos essa palavra de dias. Esta palavra deve ser alterada para a palavra dia se apenas um dia for deixado e o operador ternário JavaScript vai ajudar com isso. Corte isso, abra as chaves. Podemos verificar se o número de dias restantes é igual a um. Se for verdade, emitiremos a sequência do dia. Se não, diremos dias. Isto é um ponto de interrogação. Nós salvamos isso é tudo em nosso trabalho e vemos um dia no navegador, 59 dias e 144 dias também. Nós também precisamos fazer uma coisa semelhante para esta palavra de “esquerda”. Para ver isso, se passarmos por isso fora e temporariamente mudar isso para ser positivo, quaisquer eventos que tenham expirado, o texto deve ser “dias atrás”. Vamos remover a palavra de “esquerda”, abrir as chaves duplas, e então nós vamos fazer uma coisa semelhante também no onde usamos Math.Sign para verificar se este é um número positivo ou negativo, como nos dias esquerda. Então vamos verificar se o número retornado não é igual a um negativo. Isso retornará verdadeiro se a data for no futuro, e podemos produzir o texto que vai ser “deixado”. Ou alternativamente o texto de “atrás”. Para o navegador a seção agora funciona, vemos “12 dias atrás”. Altere isso para ser negativo. Para eventos futuros vemos dias restantes. Outra coisa que temos de tratar é, se mudarmos isto para ser um número positivo, para quaisquer acontecimentos que tenham expirado, continuamos a ver 12 negativos. Isso deve ser simplificado para dizer “12 dias atrás”. Para isso, podemos usar outra função matemática JavaScript, que é chamada absoluta. Se voltarmos para o site da Mozilla e para baixo para a seção de método, temos este Maths.abs. Até a seção de exemplo, podemos ver independentemente de se passarmos em um número negativo ou qualquer número positivo, isso sempre retornará o valor absoluto sem o símbolo negativo e isso será ideal para o nosso caso de uso. Voltar ao nosso modelo e onde produzimos o número de dias restantes. Vamos agora passar isso para Math.abs, salve isso, e agora nosso número negativo deve ser removido. Vamos verificar se os números positivos estão funcionando bem e tudo isso agora está funcionando também. 36. Mais sobre renderização condicional: Até agora, usamos v-show, v-if e v-else para mostrar e esconder nossos elementos. Mas qual é a diferença entre eles? Vamos dar uma olhada nisso e algumas outras coisas que podemos fazer com renderização condicional. Aqui está um exemplo simples que pode ser usado em um aplicativo bancário ou similar, que pede ao usuário para alterar a senha após um número de dias. Este exemplo simples não seria bom se o usuário alterasse a senha ontem ou até 10 minutos atrás. Nós usaríamos renderizações condicionais que só mostram esta mensagem se o usuário não tiver feito login por digamos, mais de 100 dias. Isso funcionaria, mas a directiva v-for foi repetida. Talvez não seja um grande problema para este pequeno exemplo. E se uma secção completa dependesse desta condição, quem precisa de acrescentar esta directiva a muitos elementos? Outra maneira é agrupar todos esses elementos dentro de uma tag de modelo. Poderíamos então adicionar a directiva v-if a este invólucro. Significa que se aplicaria a tudo dentro. Este modelo também pode ser uma div, uma seção ou qualquer um dos elementos. Para o benefício de usar o modelo é que ele não será renderizado dentro do navegador. O navegador irá ler o código assim como vemos na parte inferior. Ele age como um invólucro invisível para que não vamos interferir com o resto do nosso código, otimizar quaisquer divs rápidas desnecessárias. No vídeo anterior, observamos o uso de v-if e v-else. Mas e se tivéssemos uma terceira condição? Ou seja, poderíamos também fazer uso de v-else-se. Neste exemplo mais complexo, damos as boas-vindas ao usuário se o número de dias desde o último login for inferior a 50. Em seguida, v-else-if pode ser anexado aos próximos elementos únicos ou a um grupo de elementos usando o wrapper modelo. A seção verifica se o número de dias desde o último login está entre 50 e 99 e, em seguida, solicitará ao usuário que redefina sua senha em breve. Então, como uma seção final, podemos usar a diretiva else, e ele será executado se as duas condições acima não foram atendidas. Ou seja, isso será executado se o usuário não tiver logado por cem dias ou mais. Em seguida, pedir-lhes-emos que redefinam a palavra-passe. Nós também poderíamos usar várias seções v-else-if também, e isso é se tivermos mais de três condições que queremos verificar assim como podemos fazer com JavaScript regular. Podemos usar quantos deles quisermos, desde que cada um desses elementos siga um do outro. Nós agora vimos ambos v-show e v-if como diferentes maneiras de renderizar elementos condicionalmente. Mas por que o Vue tem as duas maneiras quando eles parecem fazer a mesma coisa na superfície? Bem, por baixo de mostrar e esconder coisas, há algumas diferenças. Os elementos show são sempre renderizados para o DOM. Mesmo que não sejam visíveis, eles ainda estão lá. Ele está usando a propriedade CSS display sob os capuzes para mostrar e ocultar. Ele não pode ser usado em combinação com elementos de modelo como um wrapper, nem vai ser usado em combinação com v-else. Como esta diretiva está sempre presente no DOM e a propriedade de exibição CSS é usada para alternar, muitas vezes é uma boa escolha se esperamos que ele alterne regularmente. V-if é mais uma renderização condicional real. Ao contrário do v-show, v-if nem sempre está presente no DOM, em vez disso, ele só renderiza se a condição for definida como true. Se uma condição se tornar falsa, todas as seções e controles serão completamente destruídos, incluindo todos os ouvintes de eventos ou componentes filhos também. Uma vez que há um custo ligeiramente mais pesado de complementar ou mover completamente as seções, pode ser benéfico usar quando esperamos que a condição mude com menos frequência. Todos eles têm necessidade de desmontá-lo completamente do DOM. 37. Propriedades computadas: Recentemente criamos esta seção DayLeft, que tem um pouco de lógica JavaScript aninhada dentro. Mesmo que todo esse código tenha funcionado perfeitamente, as coisas começam a ficar um pouco confusas. Geralmente, pode ser recomendado extrair lógica mais complexa longe de nossos templates sempre que possível, deixando o modelo mais próximo do HTML, para qual foi destinado. Ajudar com isso, não podemos terceirizar essa lógica em nossa seção de script como um método. Vamos fazer isto. Bem, os adereços. Métodos de visualização e o nome do método que eu vou dar isso é string DayLeft. Isso será responsável por retornar uma string que substituirá todo o texto que vemos no lado direito. Ele vai dizer DayLeft, dias atrás, dependendo do número de dias restantes. Para isso, podemos reutilizar a maior parte da seção entre essas tags pequenas, então copie as duas linhas de código dentro das chaves. Isso agora pode ser usado como um ponto de partida para o nosso método. Agora não estamos mais em nosso modelo, então precisamos remover as chaves duplas para cada uma dessas seções. Além disso, uma vez que agora estamos nos referindo a DayLeft, e este caminho de nossa instância Vue. Precisamos nos referir a isso com this.daysLeft em ambas as nossas linhas de código. Em seguida, armazene cada uma dessas linhas em uma constante. Isto vai ser o dia ou a palavra dias. Não quero ligar para o meu dia ou dias constantes. Então isso é igual a este valor. Em seguida, uma segunda constante, que será a palavra esquerda ou ir. Então podemos retornar o valor de ambas as palavras combinadas. Precisamos devolver algo como dias atrás ou DayLeft. Podemos fazer isso retornando o valor. Então precisamos adicionar ambas as constantes e retorná-las do método, então isso seria dia ou dias mais o valor de esquerda ou ir. Agora podemos chamar esse método no lugar de onde cortamos essas duas linhas de código. Entre as pequenas seções, abrimos as chaves duplas e, em seguida, chamamos nosso método. Uma vez que realmente queremos executar esta função, nós a chamamos usando os colchetes. Isso será substituído pelo novo valor de string, que será retornado do nosso método. Isso nos deixa com um modelos muito mais limpos, e também podemos reutilizar o código em outro lugar, se necessário. Vamos testar isto. Você vê que um dia restou, isso é tudo o que estamos confinados, e mudar isso para um número positivo. Isto deve dizer que há dias, o maior espaço entre estes, tudo o que precisamos fazer é adicionar um espaço dentro da nossa cadeia. Após dia ou dias, e um espaço e isso será mostrado no navegador. Isso é bom, mas nem sempre a melhor solução para todos os casos, já que um método precisa ser chamado manualmente, assim como estamos fazendo aqui. O método só será chamado quando o componente for carregado. Se um dia passar e o número de dias mudar, a interface do usuário não será atualizada com o novo valor, até que atualizemos a página ou chamemos esse método manualmente. Em situações como esta, poderíamos usar uma propriedade computada. Computado é outra seção que é possível opções API, que temos usado até agora com os dados e as seções métodos. A estrutura é exatamente a mesma que a nossa seção de método. Então tudo o que precisamos fazer é mudar isso para ser computado. Vou ver imediatamente isso causa um erro, que é porque, ao contrário de um método, não precisamos chamar isso usando os colchetes. Tudo o que precisamos fazer é fornecer uma referência que é propriedade computada e ainda funciona exatamente da mesma forma. Um método e uma propriedade computada têm a mesma aparência na superfície. Chamamos um método manualmente, mas uma propriedade computada atualizará automaticamente o modelo se alguma alteração acontecer dentro daqui. Vemos atualmente dentro daqui temos alguns dados reativos, que é isso.DaysLeft. Se uma propriedade computada contém dados reativos como este, ou qualquer outra propriedade de dados ou métodos. Cada vez que os dados forem atualizados, ele atualizará automaticamente o modelo. Significa que se DaysLeft mudar, nosso modelo mudaria automaticamente para. Essas propriedades computadas também são muito eficientes, eles são armazenados em cache, e só reavaliarão se algo reativo muda. Se nada dentro daqui mudar, [inaudível] esta propriedade computada resultaria nos resultados em cache retornados, tornando-o muito eficiente de usar. Mais um exemplo de uma propriedade computada seria alterar o contraste de cores entre nossos planos de fundo do evento e nosso texto. Se devolvermos isso a um negativo, o fundo amarelo é difícil de ler, e também um pouco para o verde também. Para os eventos que têm esses dois conjuntos de fundo, vamos escurecer a cor do texto. Esta também será uma propriedade computada então logo após a nossa string DayLeft, a segunda propriedade computada será chamada ChangeContrast. Este é o nosso [inaudível] tal como um método e tal como a nossa secção computada anterior. O primeiro passo é configurar uma constante que vai ser uma matriz com nossas duas cores de fundo. Vou chamar isso de fundo de baixo contraste. Se você alterar qualquer uma das cores para usar com seus eventos, ele também pode alterar os valores dentro daqui também. Os valores amarelo e verde serão f9f970 e, em seguida, o segundo item de matriz é 68ee94. Não se preocupe se vir um erro neste momento. Isso significa apenas que criamos esse array, mas ainda não o usamos. Em seguida, precisamos verificar se este evento atual tem qualquer um desses dois conjuntos de fundo, temos o evento passado como um adereço. Cada um desses eventos tem uma propriedade de fundo. O que significa que agora você pode verificar se nosso event.background inclui qualquer uma dessas cores de array. A maneira de fazer isso é acessar um método de matriz JavaScript chamado includes. maneira de fazer isso é acessar nossa matriz que é fundos de baixo contraste, e, em seguida, chamar um método JavaScript chamado includes. Isso vai pousar pegar todos os valores dentro daqui, e verificar se inclui um valor particular. Um valor específico que queremos verificar é o event.background uma vez que isso também está dentro de nossa instância view, usamos essa palavra-chave antes de chamar event.background. Uma propriedade computada deve sempre retornar um novo valor. Esse novo valor será verdadeiro ou falso, dependendo se essa cor estiver incluída como plano de fundo do evento. Assim, podemos chamar essa propriedade computada ChangeContrast. Dentro das chaves duplas ou lugares logo abaixo do nosso artigo de fechamento. Isso, e mais para o navegador, então o amarelo é um pouco difícil de ver, mas realmente selecionar tudo. Podemos ver que o amarelo é verdadeiro. Nós como falso para as outras cores. Este verde também é mostrado falso, então vamos ver o que está acontecendo aqui. Isto é 68ee94, podemos comparar isto. Esta foi a palestra da conferência, eu acho que isso é apenas por causa das letras maiúsculas. Então vamos mudar isso, tornando isso uma correspondência exata. Agora isso está definido como dois como esperado. Nós não queremos apenas produzir o valor de true ou false assim em nosso modelo. Um melhor uso seria aplicar apenas uma cor de texto escura se isso resultar em verdadeiro. Já examinamos como fazer isso usando atributos de estilo vinculados. Isso já está resolvido para cada um de nossos artigos separados por uma vírgula. Também podemos definir a propriedade de cor CSS, dependendo do valor de ChangeContrast. Se ChangeContrast for igual a dois, faremos uso do operador ternário JavaScript, a alternância entre duas cores diferentes. Se isso for verdade, a cor que queremos colocar é um valor hexadecimal de 45 antes de cair. Se isso for falso, o que significa que não estamos nos fundos de baixo contraste. Podemos então definir a cor da fonte para ser o valor da fumaça branca. Salvar e a cor do texto foi atualizada para o fundo amarelo e também para o verde. Os benefícios de usar uma propriedade computada aqui é que mais tarde, estaremos permitindo que o usuário edite cada um desses eventos, incluindo a cor de fundo, o que significa que ele irá observar quaisquer alterações no plano de fundo, e, em seguida, atualize a cor conforme necessário. 38. Observadores e múltiplos nós-raiz (fragmentos): Juntamente com as propriedades do computador, a UJS também nos fornece uma outra maneira de observar as mudanças de dados. Em seguida, executar algum código depois que isso aconteceu, isso é usando um observador. Para fazer isso, precisamos adicionar a propriedade watch ao nosso objeto opções dentro do arquivo App.Vue, juntamente com nossos dados e nossos métodos. Podemos colocar em nossa seção de relógios como um objeto. Dentro daqui vamos passar em uma função de retorno de chamada, que é executado quando qualquer um dos dados que assistimos e vai mudar. Podemos observar quando uma propriedade de dados, um prop ou até mesmo uma propriedade computada muda nomeando a função de retorno de chamada para o valor que você deseja observar. Então, por exemplo, se tivéssemos uma propriedade de dados chamada DarkModeSet, que foi inicialmente definida como false, então nomearíamos nosso observador após essa propriedade que estamos observando. Então, para este, este será DarkModeSet, e então nós executaríamos algum código dentro. Então é melhor você ver este exemplo, nós também podemos adicionar um botão que vai alternar isso entre true e false. Abra o modelo no topo, configure o botão com um ouvinte de evento at click, que vai definir DarkModeSet para ser igual ao oposto, e então eu vou colocar o valor logo abaixo para verificar se isso está funcionando. Agora eu deveria ser capaz de alternar a lista entre true e false. Outra coisa que fizemos aqui também é aproveitada de outro recurso livre do Vue, que é vários nós raiz, também referidos como fragmentos. Aqui dentro do nosso modelo, colocamos um botão ao lado da nossa lista não ordenada. Então, efetivamente, temos duas raízes ou nós pais. Anteriormente, ao usar o Vue 2, precisaríamos envolver todo esse conteúdo em um único elemento pai. Então, por exemplo, precisaria usar um div ou um wrapper semelhante e, em seguida, colocar nosso código dentro. Isso não é mais necessário no Vue versão 3, e evita a adição de wrappers desnecessários em nosso HTML. Voltar para o nosso observador que foi configurado, nós também podemos passar para o nosso observador o valor, que vai ser o valor depois que os dados foram alterados. Eu quero nomear isso como Val, mas isso pode ser qualquer coisa que você preferir. Podemos ver isso com um log do console e, em seguida, abrir as Ferramentas do desenvolvedor. Não temos nada aparecendo no navegador, mas se clicarmos no botão de alternância, isso refletirá os dados após isso ter mudado. Então isso agora é verdade, clique nele novamente. Isso agora é alterado para false. Isso agora nos dá a oportunidade de executar qualquer código que você quiser depois que algo for alterado. Também nos dá acesso ao novo valor. Mas e se quiséssemos também acessar o valor antigo antes que a mudança ocorresse. Isso podemos passar em dois parâmetros. Novamente, nós nomes de nossa escolha. Então o primeiro pode ser o novo valor, depois o segundo, o valor antigo. Coloque ambos dentro do registro do console. Abra as Ferramentas do desenvolvedor. Agora, se clicarmos em “Alternar”, isso agora nos dará acesso ao novo e também aos valores antigos. Então é assim que um observador funciona no máximo simples, e isso é muitas vezes suficiente para cobrir tantos casos usados. Mas também há mais algumas opções que têm disponíveis e também alguns casos Edge também. [ inaudível] quer assistir um objeto ou uma matriz, vamos ver isso alterando isso para assistir a nossa matriz de eventos. Agora podemos tentar adicionar um novo evento e ver o que acontece quando tentamos atualizar isso. Então, volte para o nosso modelo, e desta vez vamos acessar nossos eventos. Em seguida, pode empurrar para o final um novo evento. Podemos pegar qualquer um desses eventos como um modelo, colar isso e apenas mudar alguns dos detalhes, vai ser o número sete. Uma vez que estamos dentro dessas citações duplas, precisamos saber usar as citações simples dentro deste objeto. Então, passe por cada um destes e altere as aspas duplas para ser simples. Então, uma vez que terminamos com isso, todos nós podemos colocar o valor dos eventos. Salve este arquivo. Vemos que temos todos os valores de um a seis. Clique em um botão. Nosso objeto sete está sendo adicionado agora. Abra as Ferramentas do desenvolvedor, clique em “Atualizar”. Vamos ver o que acontece com o nosso observador. Clique em “Alternar”. Agora nosso sétimo evento foi adicionado, mas não vemos nada dentro do console. Mesmo que ainda estamos olhando para fora para os eventos antigos e novos, e também tentando registrar isso para o console apenas aqui, Isso agora significa que o nosso observador parece não estar reagindo a quaisquer mudanças. Isso acontece quando estamos observando uma matriz ou um objeto. Se você estiver familiarizado com a forma como o JavaScript lida com tipos primitivos e de referência, isso fará mais sentido no momento. Caso contrário, isso será abordado em um vídeo de reatividade posterior. Por enquanto, porém, você precisará entender que quando nos referimos a um objeto ou a uma matriz, quaisquer alterações nos elementos ou nas propriedades do objeto aninhadas dentro não dispararão uma atualização. Para que este observador seja acionado, precisaríamos substituir o array completo ou objeto, em vez de apenas uma das propriedades que temos dentro. Ou, alternativamente, podemos passar em uma opção profunda que irá dizer Vue apenas para também observar quaisquer mudanças que estão aninhadas dentro. Para passar esse objeto profundo, precisamos também mudar a maneira como construímos nosso observador. Ao invés de configurar uma função de retorno de chamada como temos aqui, precisamos também mudar isso para ser um objeto. Este objeto agora significa que ainda estamos atentos a qualquer um desses eventos. Agora podemos passar algumas das opções. A primeira propriedade é essa opção profunda, que vamos definir como verdadeira. Separados por vírgula, em seguida, adicionamos em nossa função de manipulador, que vai ser executado a qualquer momento este evento muda de dados, e ele está dentro deste método manipulador, que vai substituir nossa função de retorno de chamada. Então, assim como com tudo isso, também pode tomar no valor que você pode registrar no console, atualizar e abrir as Ferramentas do desenvolvedor. Agora, quando adicionamos nossos eventos extras, isso agora é refletido dentro do console. Abra isso e clique na seção do array, e temos sete objetos diferentes. Observe também aqui dentro do nosso observador, nós apenas passando para o manipulador um único parâmetro. Isso se deve novamente ao fato de que estamos observando um objeto ou uma matriz. Agora só temos acesso ao novo valor, em vez do valor antigo. Outra propriedade que podemos adicionar a este observador é Imediate. A opção Imediate nos permitirá executar o observador assim que nosso componente carregar, juntamente com qualquer uma das alterações também. Então, atualmente, deixe-me atualizar o navegador. Vemos que este observador não é executado imediatamente até que façamos quaisquer alterações nesses dados. Se quisermos que este observador também seja executado assim que o componente for carregado, passaremos na opção Imediate e, em seguida, vamos definir isso como verdadeiro. Teste isso, abra o navegador, atualize. Vemos que o observador é executado imediatamente, e também pode clicar no botão “Alternar” também. Há um pouco acontecendo aqui e você pode estar se perguntando por que Vue nos fornece tanto o observador quanto as opções computadas. Quando os dois parecem fazer coisas semelhantes na superfície. Bem, há realmente algumas diferenças chave entre essas duas opções, que vamos descobrir a seguir. 39. Dados computados ou observadores?: Quando começar pela primeira vez com Vue JS, talvez confunda por que tanto a propriedade computada e o observador ambos existem quando ambos parecem fazer uma coisa semelhante sobre o que você precisa para uma mudança e, em seguida, executar algum código. Mas há algumas diferenças importantes e uma delas é se você quiser observar vários pedaços de dados. A documentação Ver mostra este grande exemplo onde temos o primeiro nome e sobrenome. Nós não precisaríamos criar dois relógios para o primeiro e último nome para construir o nome completo que precisamos. Neste caso, uma propriedade computada seria melhor uma vez que podemos referenciar várias partes de dados reativos e ele será executado se qualquer uma dessas alterações. Considerando este mesmo exemplo, observe aqui que estamos pegando alguns dados e, em seguida, retorná-lo um novo valor. Como sabemos, esse valor pode ser acessado em qualquer lugar em nosso modelo usando o nome computado de criar nome completo. Isso é perfeitamente válido com uma propriedade computada na maneira correta de usá-lo. Mas não devemos tentar usá-los para alterar qualquer dado externo ou estado, como qualquer coisa dentro de nossas propriedades de dados, pois resulta no que é chamado de efeito colateral, que então lançará um erro. A chave aqui é usar uma propriedade computada quando queremos observar uma alteração de dados e, em seguida, retornar um novo valor. Então, se quisermos atualizar nossos dados, ou nosso estado, isso deve ser feito usando um observador. Para resumir, podemos usar uma propriedade de observação quando queremos executar uma função quando os dados mudam. Mas, em vez disso, se quisermos retornar um novo valor que é calculado em alguns dados existentes, usaríamos um valor calculado. Também computado nos permite assistir várias fontes de dados, muito mais eficientemente também. Como olhamos no último slide, não devemos usar uma propriedade computada para mutar diretamente o estado, nem devemos usá-lo para qualquer operação assíncrona. Ou seja, se tivéssemos tarefas assíncronas, como milho de alguns dados da API, que pode levar algum tempo para voltar do servidor. Um observador é o caminho a percorrer. Como já vimos, as propriedades computadas também são diretamente acessíveis a partir do modelo. Então podemos usar nossa saída, o novo valor de retorno. Outra diferença é que as propriedades não calculadas também são armazenadas em cache. Imagine que uma propriedade de data está sendo observada por ambos uma propriedade computada sob observação? Se a propriedade data é então atualizada, bem, o valor é o mesmo que era anteriormente. Uma propriedade computada não será recalculada uma vez que o valor não foi alterado. No entanto, a propriedade watch ainda executará a função de retorno de chamada, independentemente. Como você pode ver, ambos têm seus usos e vantagens, tanto para diferentes casos de uso. 40. Ordenando e alternando eventos passados: Dentro do nosso event.vue no topo do modelo, temos mudado manualmente entre os eventos no passado e no futuro, alterando este show sentou-se. Mas agora vamos mudar isso, adicionando um botão, faça isso a seguir. Junto com isso, nós também vai adicionar uma propriedade computada, vamos organizar esses eventos em ordem data para. Pouco antes de fazer isso, também podemos remover os dados do vídeo de relógios anteriores. Como não precisamos disso para o nosso projeto, não precisamos da seção de relógio, isso pode ser removido, a propriedade set modo escuro, e também a seção do nosso template que era o botão, e também a saída de eventos. Então, dentro desta seção app.vue, vamos começar com o botão de alternância, adicionando uma nova propriedade de dados que vai ser chamado ShowPastEvents. Este será um valor booleano que será inicialmente definido como false e, em seguida, abrir o modelo. Também podemos passar isso para nossos componentes do evento. Certifique-se de que isso também é dinâmico, então vamos usar os dois pontos para vincular o nome apropriado de ShowPastEvents, que também será igual ao valor com o mesmo nome. Uma vez que estes dados são uma propriedade, também precisa ir para o nosso event.vue e passar isso para os nossos adereços. Este prop agora também pode ser usado dentro do nosso template para mostrar e ocultar cada um desses eventos, e dentro do v-show, vamos passar diretamente no operador O. Ele também mostra evento se nosso prop ShowPastEvents é igual a true. No momento, temos isso definido como false, então vamos alternar isso para baixo na seção de dados. Se tornarmos isso verdadeiro, atualize o navegador e agora todos os eventos anteriores também serão exibidos para, está tudo em nosso trabalho. Então agora precisamos introduzir um botão que vai mudar isso para nós dentro do modelo app.vue e logo acima da nossa lista não ordenada, então isso aparece no topo da nossa aplicação. Cria uma nova div com a classe de opções. Este será o wrapper para o nosso botão ao lado de alguns outros botões que adicionaremos mais tarde. O botão vai ouvir um evento clique onde vamos alternar o valor de ShowPastEvents. Este botão também precisa de um nome para que possamos ver isso no navegador. Em seguida, sobre o navegador, vamos tentar também o nosso botão, e isso agora vai alternar entre mostrar e ocultar quaisquer eventos passados. Voltaremos a este botão mais tarde e adicionar algum estilo, mas agora vamos adicionar uma propriedade computada para organizar esses eventos em ordem de data. Podemos ver aqui que este que é hoje deve estar no topo, então devemos ver o único dia que resta, 59. Portanto, esses eventos não estão atualmente em ordem. Este arquivo app.vue contém todos os nossos eventos que são armazenados nesta propriedade de dados. Em vez de agora looping através destes diretamente, primeiro, vamos configurar uma propriedade computada que vai reorganizar estes na ordem correta e, em seguida, retornar a matriz de eventos recém-organizados. Para isso, vamos precisar de uma seção computada com uma propriedade chamada eventos de ordem. O que queremos fazer nesta seção computada é pegar todos os nossos eventos e reorganizar a ordem. Como sabemos de vídeos anteriores, não podemos manipular diretamente o estado para que não possamos alterar o valor dentro dessa propriedade de dados. Então, em vez disso, o que vamos fazer é criar uma variável local que vai ser a cópia desses eventos. Então, uma constante chamada EventsToOrder. O conjunto é igual a ser uma cópia usando this.events. Propriedades computadas precisam retornar algo, um [inaudível] com um valor deste eventsToOrder depois que chamamos o método de classificação JavaScript. Se nossa matriz de eventos não incluísse objetos e fosse muito mais simples, e fosse composta de coisas como strings de texto ou números pares, isso seria tudo o que precisaríamos fazer, já que, por padrão, os valores quando usamos o método de classificação são convertido em strings e será ordenado alfabeticamente em ordem crescente. nosso caso é um pouco mais complexo. Temos uma matriz de objetos e precisamos classificá-los pela propriedade date. Para fazer isso, podemos passar para o método de classificação uma função de comparação opcional. Isso vai comparar quaisquer dois elementos em nossa matriz a qualquer momento. Os nomes que damos a esses dois elementos são completamente para nós, e podemos passá-los como uma função de seta. Então passando quaisquer nomes de variáveis para nossos dois elementos para comparar. Eu quero simplesmente chamar isso de a e b. Isso agora vai percorrer todos os nossos objetos dentro desta matriz e, em seguida, compará-lo com outro tempo. Terei acesso a esses dois objetos que estão sendo comparados com essas variáveis a e b, que significa que podemos comparar as datas de cada um. Primeiro de tudo, vamos verificar se a propriedade day no objeto é maior do que a propriedade day no objeto b. Se isso for verdade, usaremos o operador ternário JavaScript, que retornará um valor de um. Se isso for falso, retornaremos o valor de um negativo. É número positivo ou negativo vai reorganizar nossos objetos, definindo a posição do índice. Então, ao comparar essas datas, se uma delas for maior, ela será empurrada para cima a posição do índice com um número positivo. Caso contrário, ele será empurrado para baixo com o número negativo, e depois que terminar a classificação comparando todos os itens em nosso array, nós então voltaremos para o array original na nova ordem, que podemos então usar em nosso template para through no lugar de nossos eventos originais. Agora vamos pegar eventos de ordem até a nossa lista não ordenada e, em seguida, percorrer isso no lugar de nossa propriedade de dados, salvar isso, e instantaneamente, nossos eventos e agora atualizados na ordem correta. No topo, temos quaisquer eventos anteriores que são passados, temos o evento de hoje, e então estes agora são ordenados do mais próximo para o mais distante, e eles também devem funcionar se ocultarmos quaisquer eventos anteriores. Além disso, eu sei os benefícios de como perdemos em uma propriedade computada. Mais tarde, se o usuário editar a data em qualquer um desses eventos, isso também irá recalcular o pedido para. 41. Componente Teleport: No momento, a nossa aplicação tem eventos codificados. Mas em breve, vamos permitir que o usuário adicione novos eventos e também edite quaisquer outros já existentes. Você vai fazer isso adicionando um formulário, este formulário pode ser um componente, e ele pode até ser colocado em sua própria página. Um cenário comum, porém, é colocar o formulário em um modelo pop-up. Isso significa que o usuário permanece na mesma página, mas o formulário aparecerá sobre o conteúdo. Dependendo da estrutura HTML, os modais podem ser difíceis de posicionar usando CSS, qualquer teletransporte poderia ajudar com isso. Como um exemplo dentro do arquivo app.vue, no topo do nosso modelo, imagine que tivemos um elemento de formulário assim como este, neste eu vou apenas dizer adicionar novos eventos. Para criar isso como um pop-up modal, não precisaríamos aplicar algum CSS. Atualmente, este formulário é apenas começar no topo dos componentes, mas geralmente queremos um pop-up modal sobre o resto do conteúdo. Muitas vezes fazemos isso definindo a propriedade posição CSS para ser igual a absoluto, qualquer elemento que é definido para ser absoluto, vai procurar um elemento pai que está definido para ser relativo, e, em seguida, usar este recipiente relativo para referência de. No momento, este não é um grande problema, já que aqui estamos dentro dos componentes de nível superior. Bem, se esse formulário foi profundamente aninhado dentro de muitos componentes diferentes e muitos wrappers diferentes, ele se tornará uma tarefa CSS mais complexa. O modal de posicionamento exatamente onde queremos, para ajudar com isso, o recurso de teletransporte nos permitirá manter este código dentro do modelo para realmente renderizá-lo em outro lugar. Fazendo isso fornece algumas vantagens, como podemos manter esta estrutura HTML formas dentro dos mesmos componentes que os dados de formulário ou sua lógica. Ele ainda pode acessar qualquer coisa de nossas seções de visão, como nossos dados e nossos métodos, mas em vez de ser processado dentro deste componente, sua saída em uma parte diferente pode estar em qualquer lugar, como outros componentes, cumprir um modal, pode ser uma vantagem para colocar isso dentro do índice raiz ou arquivo HTML. Se entrarmos na pasta pública, isto está contido aqui dentro. Esta página de índice tem o nosso contêiner de aplicativos principal, é aqui que o resto do seu aplicativo é injetado. Como acabamos de mencionar, podemos teleportar nossa forma para qualquer um desses componentes aninhados. Ou, alternativamente, podemos adicionar isso à seção do corpo ou pode até mesmo teleportar é forma diferentes elementos completamente. Tive uma div diferente com o ID de modal. Poderíamos teleportar este código de forma e lugares dentro desta seção div, significa que é completamente independente do resto da estrutura aninhada. Isso resultaria em nossa forma ou qualquer outra seção que nós queríamos que o teletransporte ter um wrappers esquerdo e também o código circundante para lidar com, e também outro benefício que está relacionado com formulários. Se você sabe o que é a propagação de eventos, você também deve remover isso, uma vez que agora não tem passagem elementar. Agora temos esse elemento para montar também, mas como podemos realmente adicionar isso à seção? Bem, para fazer isso, vamos cortar nossa seção de formulários. Então aninhe isto dentro das etiquetas de teletransporte. Na tag de teletransporte de abertura, podemos então passar em um dois atributos que vai ligar para os nossos elementos. Isso é exatamente como quando usamos um seletor de consulta ou quando selecionamos um elemento com CSS, que significa que usamos o áspero para um id, e estes são o id de modal. Salve isso e agora sobre o navegador, lembre-se de antes de adicionar o teletransporte no formulário, estava aparecendo no topo do navegador. Agora, se atualizarmos e rolarmos até o fundo, esse formulário agora será colocado na parte inferior do nosso projeto, significa que nosso teletransporte está entrando em vigor. Isso vai ser, em última análise, um formulário pop-up, então agora precisamos de uma propriedade de dados. Podemos alternar isso ligado e desligado sobre a seção de dados, diz obedecer propriedade de dados, que vai ser um valor booleano chamado ShowForm. Isso também vai precisar de um botão para cima em nosso template, e podemos adicionar isso dentro de nosso wrapper opções, então logo após o primeiro botão vamos adicionar um segundo botão, mas nosso CSS, podemos adicionar a classe de AddNew. Isso também vai ouvir por um clique. Assim como acima quando alteramos a propriedade data, faremos exatamente o mesmo para ShowForm, e entre a parte inferior, também adicionaremos uma entidade HTML, que será o ícone de adição. O símbolo de adição é feito com os comerciais, o hash 43 e um ponto-e-vírgula. Então, finalmente, vamos mostrar e ocultar este formulário com base em se esta propriedade de dados ShowForm é dito como verdadeiro ou falso. Podemos fazer isso usando v-if. Salve isso, e agora podemos testar isso no navegador. Você tem o ícone de mais, clique sobre isso, veja adicionar novos eventos, clique sobre isso novamente, e isso agora foi removido. Este efeito também será mais claro se abrirmos as ferramentas de desenvolvedor do navegador, abrir a seção do corpo. Agora, aqui dentro podemos ver o div com o id do aplicativo e também o div com o id de modal. Estas foram as duas seções que temos dentro da nossa página de índice. Agora, se abrirmos o modal, vemos uma forma aninhada dentro. No entanto, se alternarmos a lista clicando em um botão, isso agora reage ao nosso estado verdadeiro ou falso. Ele também é muitos outros usos também para teletransporte, como exibir mensagens para o usuário, dicas de ferramentas, ou simplesmente colocar conteúdo em outros locais, então não estamos restritos pelo nosso componente atual. Na próxima seção, faremos uso deste formulário que acabamos de adicionar a ambas as edições e também adiciona novos eventos. 42. Introdução: formulários, eventos e modificadores: Estes próximos vídeos vão se concentrar em uma parte realmente importante do, não apenas Vue.js, mas desenvolvimento web em geral, e isso é lidar com formulários. Vamos dar uma olhada em muitas coisas, como a emissão de dados, backup para um componente pai, validação de todos os formulários, também vinculação de nossos dados com Vue.js, e também algumas outras coisas, como propagação de eventos e como podemos lidar isso com modificadores. 43. Nosso componente de formulário: Como Vue.js tem essa idéia de criar modelos em nossos componentes de arquivo único, criar um formulário é geralmente o mesmo que com HTML normal. Precisamos de um formulário que nos permita adicionar um novo evento e também editar quaisquer eventos existentes também. Poderíamos criar duas formas deste, ou ambas as operações podem fazer uso dos mesmos componentes de formulário, se quiséssemos. Primeiro de tudo, vamos criar um componente. Então eu vou abrir a pasta de origem para os componentes e, em seguida, nosso novo arquivo será chamado de AddUpdateForm; novamente com a extensão.vue. Agora podemos passar para o app.vue e então podemos registrar este arquivo para possamos usá-lo em vez desta forma que criamos dentro do script. Abaixo do nosso objeto, podemos criar uma nova importação, mas desta vez nossa importação vai importar nosso AddUpdateForm. Assim como o evento acima, este é./ componentes./. Então, se entrarmos nisso, temos o AddUpdateForm. Não se esqueça de registrar também isso dentro dos componentes. Em seguida, até o teletransporte no topo do nosso modelo, então vamos substituir esta seção de formulário. Lembre-se que esta tem a seção v-if, para que possamos alternar esses componentes em um off. Nós também precisamos trazer isso para o nosso novo componente, então eu vou colocar todos os componentes dentro do modal que também vai incluir as declarações condicionais v-if de show form. Com isso agora em vigor, não precisamos mais desta seção de formulário logo acima. Vamos adicionar todas as entradas de formulário dentro de nossos novos componentes. Em seguida, podemos começar como de costume com o modelo para o nosso HTML, e depois aninhá-lo dentro de uma seção div que vai ter a classe de form_ wrapper. Podemos então colocar a nossa forma, aninhá-la dentro. A razão pela qual temos este wrapper form_ em torno nosso formulário é porque ele vai nos ajudar mais tarde quando nós estilo este modal. Vamos ter este formato rapper como um fundo mais escuro, então ele cobre todo o resto do conteúdo quando este modal estiver ativo. Em seguida, esta seção de formulário terá um fundo mais leve, então isso irá sobrepor esta div. A primeira seção vai ser cercada em uma div, e isso vai ser para a nossa entrada de forma de nome. Este será o nome do evento, como formatura. Primeiro de tudo, o rótulo que vai ser para a seção de nome, e isso terá o rótulo do nome. A entrada, o tipo de texto. O ID para isso será o nome que corresponde aos nossos quatro atributos. O próximo, se verificarmos nosso objeto, este será para os detalhes e precisamos de um para a data e , em seguida, um para a cor de fundo. Vamos copiar esta seção div uma vez que esta próxima também vai ser a entrada com o tipo de texto, mas desta vez isso vai ser para os detalhes; o rótulo também de detalhes e também o ID correspondente. No navegador, podemos verificar se isso está funcionando clicando em nosso botão e rolar para baixo, e temos nossas duas entradas de formulário. O próximo logo abaixo deste será para o nosso serviço de data, teremos a entrada com o tipo de data. Isso nos dará um seletor de datas para selecionar a data do evento. Este rótulo também é data, e também o texto para o rótulo também. Agora isso apenas deixa a cor de fundo, e para isso temos seis opções diferentes para nossos seis eventos de exemplo. Vou fazer uso das mesmas seis cores que usamos dentro daqui. Para escolher entre qualquer um destes, vamos usar uma entrada seletiva. Isso também terá um wrapper div para manter o estilo consistente, também o rótulo para o fundo. Mas desta vez isso terá as entradas de seleção HTML. Select tem uma abertura e uma tag de fechamento para que possamos adicionar todas as opções que precisamos selecionar no meio. É ID é tanto é o rótulo de fundo, e então temos nossas seis opções diferentes que vamos incluir eo primeiro valor é a cor hexadecimal de F34949. Isto é para a nossa opção vermelha. A segunda opção foi para a nossa cor rosa e isso tem o valor hexadecimal de F07949 e o texto de rosa. A terceira opção será para o valor roxo, que tem a cor hexadecimal de 997AF0. Para o azul, este é 7AD3F0. Em seguida, adicionaremos uma opção verde, e a cor verde que vou usar é 68EE94. A opção para o amarelo, isso vai ser um valor de F9F970. Finalmente, também adicionaremos uma opção para a cor laranja, e esse valor hexadecimal será EB980F; qualquer texto laranja. Esta é agora todas as opções que precisamos e para terminar todo formulário vamos apenas colocar uma div na parte inferior com o botão, para que possamos adicionar um novo evento. Mas agora este botão não vai fazer nada, vamos apenas adicionar o texto de adicionar. Podemos ir até o navegador e verificar se tudo está funcionando, então eu vou ativar isso. Temos nossas entradas de texto, o seletor de datas, para que possamos selecionar uma data para o evento. Eu tenho a opção Selecionar com todos os nossos valores de cores diferentes e, finalmente, o botão na parte inferior. Muito em breve vamos dar uma olhada em como podemos extrair os valores deste formulário de entrada e colocá-lo em nossos dados. Mas, em seguida, vamos voltar a este formulário e adicionar um pouco de estilo, e transformá-lo em um popup modal. 44. Estilo e posicionamento do modal do formulário: Como ex-criado no último vídeo, agora precisa de algum estilo para não só torná-lo um pouco mais agradável, mas também para fazer esta sobreposição todo o resto do conteúdo. Lembre-se, no último vídeo, criamos este formulário. Também adicionamos esta div como um invólucro. Isso nos permitirá criar um efeito modal e este wrapper irá esticar a altura total na largura total da página. Ele terá uma cor de fundo mais escura, que vai nos dar o efeito de um aparecendo sobre o resto do conteúdo. E, em seguida, no topo desta seção escura, vamos então incorporar nosso formulário, que vai ser centrado na página e também ter uma cor de fundo mais clara para destacá-lo. Para fazer isso na parte inferior, vamos explodir nosso modelo, criar nossa seção de estilo. Ele também pode ser definido para os estilos aplicados somente a este componente específico. Então, primeiro de tudo, vamos direcionar o Formulário Wrapper, que está em torno de todo o nosso formulário e vamos dar-lhe esta cor de fundo mais escura. Então, para dar-lhe esta cor de fundo mais escura, íamos adicionar um valor RGBA. Isto vai primeiro permitir-nos criar a cor escura de 000. E então o quarto canal, que é o alfa, nos permitirá adicionar o valor de opacidade de 0,7, isto é semelhante a 70 por cento de capacidade. E isso vai garantir que nosso passado será um pouco transparente. Agora, esta será uma cor de fundo mais escura, mas ainda podemos ver o conteúdo em segundo plano. Em seguida, vamos fazer algum posicionamento para que possamos colocar isso para fora para ser a largura total e a altura total da página. Primeiro, vamos tirar isso do fluxo do resto do conteúdo por certamente posicionar o valor para ser absoluto. Em seguida, podemos usar os quatro valores de topo, direita, inferior e esquerda, que vai esticar nossos componentes de formulário para os quatro lados da página. Podemos fazer isso com o valor superior de zero, o valor direito de zero e, em seguida, também o mesmo para a parte inferior e também para a esquerda. Agora, se abrirmos nosso modelo, vemos que a cor de fundo mais escura foi definida, mas é ligeiramente transparente. Isso também se estende para todos os quatro lados do navegador. Atualmente, embora todos os formulários colocados no canto superior esquerdo. Para mover isso para o centro da página, vamos fazer uso da flexbox CSS. Então vamos começar com o tipo de exibição de flex, e então podemos definir o conteúdo justify para estar no centro, o que nos dará o alinhamento em toda a página. Agora podemos definir o alinhamento vertical com itens de alinhamento. Isso agora é como fazê-lo com o Formulário Wrapper e agora podemos passar para baixo para estilizar a seção de formulário real. Para destacar isso, daremos uma cor de fundo branco. E também fazer isso um pouco mais largo e também mais alto. Então vamos definir a largura mínima de 60 por cento da largura da viewport com 60 vw. Em seguida, também a altura mínima de 40 por cento da altura da viewport. Algum preenchimento para adicionar algum espaço dentro do formulário. Vamos para Roms e depois arredondar as curvas com um raio de fronteira. Bom. Isto agora vai para algum lugar. Em seguida, vamos passar para cada uma dessas entradas de formulário. Lembre-se de cima quando criamos qualquer uma dessas entradas, eles estavam todos cercados em uma seção div. Então vamos primeiro selecionar o nosso formulário e, em seguida, vamos direcionar qualquer div que imediatamente segue. Estes terão o tipo de exibição de flex. Então, se empilhados verticalmente, eles terão a direção flexível dos espaços de coluna. Podemos aplicar alguma margem na parte superior e inferior de um Rem e manter o valor da margem à esquerda e à direita em zero. Em seguida, o tamanho da fonte de 1.6 Roms e, em seguida, movendo-se mais para dentro desta seção formulário se entrarmos em nossas divs, então teremos o estilo de entrada dentro daqui. Então, vamos até a parte inferior da nossa seção de estilo. Vamos direcionar toda a seção do formulário e qualquer entrada que esteja dentro. Primeiro, vamos adicionar alguma margem na parte superior e inferior desta entrada, que vai espaçar estes para fora do rótulo 0.6 Roms na parte superior e inferior e zero na esquerda e direita. Então eu estou preenchendo valor novamente, 0.6 Roms na parte superior e inferior. Depois um Rem à esquerda e à direita. O valor de um Rem à esquerda e à direita, nos dará algum espaçamento quando digitarmos na entrada. Este é o espaçamento que vemos no lado esquerdo. As bordas para nossas entradas de formulário vamos configurá-los para ser um pixel, como cinza e uma linha sólida. Para corresponder ao Formulário Wrapper externo. Também vamos definir o raio da borda para 0,3 Roms também. Isso se aplicará às nossas entradas de formulário livre. Para também manter isso consistente, também podemos aplicar isso à nossa entrada selecionada, e vamos fazer isso adicionando-o para a mesma seção, separado por uma vírgula. Finalmente, temos o botão de formulário na parte inferior. Então, primeiro a cor de fundo, que será RGB, e o valor vermelho de um, dois, três, o valor verde de um, nove quatro, e o valor azul de um, dois, três. A largura, vou definir isto para 100 Pixels. Remova a borda, adicione algum espaço interno com o preenchimento de 0,6 Roms, um raio de borda correspondente de 0,3. Então, finalmente, vamos também definir o tamanho da fonte como 16 pixels. Vamos também tonificar a cor preta OC para o rótulo, e podemos fazer isso apenas na parte inferior e na cor de fundo para isso. Então, a cor do texto, vamos começar com uma cor preta e, em seguida, podemos selecionar uma cor mais clara passando o mouse sobre isso e escolher um valor iluminado no seletor de cores. Uma vez que você tem uma cor que você está feliz com, dê este arquivo um salvamento. Agora, se formos para o navegador, nosso estilo agora está completo. Você também pode brincar com isso se quiser e alterar o estilo do layout. Isso é completamente bom também. Mas uma coisa a observar aqui é se tentarmos agora clicar neste botão de alternância no topo, nosso formulário agora não será fechado. Isso acontece porque nosso modal, ou em particular, nosso invólucro modal, que temos aqui, agora é ocupado ou cobrindo toda a largura e altura da página, que agora está cobrindo o resto do conteúdo. Para corrigir isso, em seguida, vamos adicionar um botão fechado dentro do modal e olhar para como podemos fazer isso com eventos personalizados. 45. Emitir eventos personalizados: Agora temos um formulário, mas este formulário está preso aberto até que atualizemos a página desde que não temos mais acesso a este botão de alternância atrás deste modal. A correção disso, vamos adicionar uma pequena cruz no canto superior do nosso modal que usamos para clicar para fechar isso. Vamos fazer isso dentro do nosso AddUpdateForm apenas dentro deste elemento de formulário de abertura. Então vamos adicionar um span, isso terá uma classe de close junto com uma entidade HTML que é o e comercial, um hash 10060, e um ponto-e-vírgula. Isso vai nos dar uma cruz vermelha que agora podemos descer e adicionar um pouco de estilo. A primeira coisa a fazer é este formulário que é o wrapper direto, vamos definir isso para fazer uso da caixa flexível para que possamos alinhar isso no canto superior direito, para baixo para a seção do formulário, podemos definir o tipo de exibição para ser flexível, e então todos os elementos são empilhados uns sobre os outros, podemos mudar a direção flexível, a coluna. Uma vez que o wrapper está agora usando a caixa flexível, agora podemos controlar este botão fechar com align-self. Vamos fazer isso no topo. Este botão tem a classe de fechar. Align-self irá empurrar este item individual para a direita direita se definirmos o valor para ser flex-end. Então o usuário sabe que isso é clicável, também podemos definir o cursor para ser um ponteiro. Isso agora deixa nossa cruz exatamente onde queremos que ela esteja. Esta cruz está agora no lugar, mas isso também agora nos deixa com algo que precisamos resolver. Esta cruz é colocada dentro do nosso componente AddUpdateForm, mas isso é alternado de nosso pai, componente App.vue. No momento, nosso aplicativo está estruturado assim. Temos o app.vue, que tem nosso AddUpdateForm, e também os componentes de evento aninhados dentro. A partir deste app.vue, teremos um botão que alterna este formulário para mostrá-lo e ocultá-lo como nosso modal pop-up. Isso funciona porque showForm está dentro do app.vue também e isso é usado para mostrar e ocultar o componente de formulário. Mas e quanto a esta cruz que acabamos de adicionar? Isso é colocado dentro do componente, mas a propriedade ShowForm dates que precisamos alterar está no pai, app.vue. Nós já sabemos como passar dados de um componente pai para um filho usando adereços. E o contrário? Queremos alterar os dados ShowForm para serem falsos, mas desta vez, a partir do componente AddUpdateForm. Para fazer isso, podemos emitir um evento personalizado do filho até o componente do pai. De volta no app.vue, sabia saber como usar um evento regular, como uma manutenção ou um evento clique. Usamos clique para alternar o formulário usando v-if. Juntamente com esses elementos regulares, também podemos criar nosso próprio evento personalizado. Assim como aqui dentro do nosso componente AddUpdateForm, em vez de um clique, ouvimos nossos próprios eventos chamados close-form. Para esses nomes de eventos, é recomendável usar palavras minúsculas separadas por um traço. Uma vez que este evento é passado para o componente filho, é dentro desta criança onde vamos chamá-lo. Primeiro, adicionamos a lista de eventos a uma matriz de emissões. Isso é novo no Vue 3, não os declaramos anteriormente na versão 2. O [inaudível] é assim especialmente ao lado de nossos adereços, nos permite ver facilmente quais dados estão entrando no componente e, em seguida, quais dados são emitidos de volta para o componente. Dentro do modelo, estamos organizando nossa cruz vermelha usando a extensão. Quando clicamos nele, acionamos nosso evento personalizado usando símbolo dólar emit que irá definir ShowForm para ser falso. Portanto, escondendo nossa forma de volta dentro de nossa aplicação. Isso é exatamente o que vamos fazer agora. Começando no app.vue, vamos até a seção de modelo onde podemos configurar nosso evento personalizado, passar isso para o nosso AddUpdateForm. Como acabamos de ver, este evento vai ser chamado de forma estreita. Quando isso é acionado, vamos definir ShowForm para ser igual a false. Isso está sendo passado para baixo para AddUpdateForm então vamos para aqui, e então podemos adicionar isso a uma matriz emit. No momento, não temos uma seção de script para que possamos criá-la agora, certificando-se também de adicionar o padrão de exportação, e passamos isso dentro de uma matriz. Ele agora deve nos dar acesso ao nosso loop de eventos personalizado dentro do modelo. A extensão que acabamos de adicionar para a nossa cruz irá então executar algum código quando o usuário clicar neste botão, e o código que você deseja executar é este evento emit. Podemos acessar isso com este símbolo de dólar ponto emitir, em seguida, passar em nome do nosso evento que é de forma próxima. Este prefixo do símbolo do dólar significa que é um método interno de propriedades do Vue JS, e veremos mais destes durante o curso. Salve este arquivo e sobre o navegador, que é atualizar, abra nosso formulário, clique na cruz, e isso agora irá acionar nosso evento personalizado no componente pai. 46. Vincular entrada de formulário: Temos mais eventos personalizados para emitir também, como adicionar novas entradas ao nosso array, editar eventos existentes e também removê-los. Antes que possamos adicionar e editar nossos eventos, precisamos de uma maneira de capturar o que o usuário digita em todos esses campos de formulário. Uma visão nos fornece uma diretiva para isso chamada v-model. Isso significa que podemos configurar uma propriedade de dados que vai conter todos os valores que o usuário digita em, como este nome. Para fazer isso, vamos para o formulário AddUpDate e, em seguida, em nossa seção de script. Precisamos de uma propriedade de dados que vai conter todos esses valores que o usuário digita em. Primeiro, vamos começar com o nome que podemos definir inicialmente como uma string vazia. Para ver isso em ação, também podemos produzir este nome, loop dentro do modelo. Agora, para pegar o valor que foi adicionado em nossa entrada de nome e armazenar isso dentro de nossa propriedade de dados, vamos adicionar a diretiva que acabamos de mencionar, que é v-model e, em seguida, atribuímos isso ao nosso nome e propriedade de dados. Podemos agora dar uma chance se abrirmos o formulário e digitar qualquer coisa aqui dentro. À medida que digitamos dentro deste campo, podemos ver esse valor é atualizado em nosso modelo. A coisa boa sobre v-model é que ele também configura ligação de dados bidirecional. Isso significa que não só a entrada atualiza nossa propriedade de dados, mas também funciona de forma inversa também. Ele adiciona à nossa seção de nome em vez de passar em uma string vazia. Se isso tivesse um valor inicial como este, podemos então salvar isso e mais para o navegador. Agora, em nossa forma, isso agora aceita o valor inicial que é passado de nossa propriedade de dados e isso também pode ser atualizado. Esta ideia logo se tornará mais útil quando também usarmos este formulário para editar os eventos existentes. Ele pode levar quaisquer dados de eventos atuais e, em seguida, o usuário pode atualizar usando este formulário. Além disso, quando estamos usando HTML regular, nós algumas maneiras diferentes de definir os valores iniciais. Por exemplo, se formos para a seção de detalhes para nossa entrada de texto, poderíamos definir o valor inicial para ser qualquer coisa que você passar e podemos ver isso apenas aqui. Esta é uma maneira de definir o valor inicial com entradas baseadas em texto ou caixas de seleção, temos os atributos marcados e podemos usar selecionados para selecionar entradas. No entanto, ao usar Vue.js, todos esses valores iniciais serão ignorados e devemos em vez disso, usar v-model para o valor inicial se quisermos fornecer um. Por enquanto, vamos nos concentrar em adicionar novos eventos. Para isso, precisamos configurar um objeto de evento no lugar de nosso nome. Ao invés de definir todos estes individualmente, vamos agrupá-los em um objeto de evento, isso também pode ser substituído dentro de nossa saída. Também nosso v-model agora vai ser o event.name. Vamos também copiar isso e podemos adicionar isso em cada uma de nossas entradas. A entrada para nossos detalhes será event.details, a data e, em seguida, também o fundo. Isso é adicionado dentro do wrapper select e este é event.background. Vamos ver isso agora, devemos ver um objeto enquanto escrevemos em cada um de nossos campos. O nome, os detalhes, a data e também a cor de fundo atualizarão nosso objeto de evento, o que nos deixa com todas as informações necessárias para criar um novo evento. 47. Emitir dados com evento personalizado: Agora capturamos os dados do formulário do usuário e armazenamos isso dentro dessa propriedade de dados. Agora, vamos usar esses dados para adicionar um novo evento à nossa matriz. Atualmente, esses novos dados de evento estão no componente AddUpdateForm. No entanto, a matriz de eventos real está dentro deste pai, app.vue, o que significa que precisamos emitir um backup de eventos personalizado do nosso formulário. Vamos configurar isso assim como já procuramos anteriormente no app.vue. Vamos até o AddUpdateForm. Dentro daqui, podemos adicionar um novo atributo que vai ser para os nossos eventos personalizados. Estes eventos personalizados, podemos dar a este qualquer nome que você quiser. O meu vai ser adicionar novo evento. Quase quando adicionamos este evento de forma fechada, definimos diretamente esses dados ShowForm para ser igual a false. Isso é muito simples, mas nosso novo evento adicionará mais alguns passos. Então, em vez de inchar este modelo, podemos, em vez disso, passar em um método. Este método então precisa ser resolvido em nossa seção de script. Vamos passar por nossa seção de métodos. No topo, podemos colocar em nosso método add. Isto vai ser responsável por empurrar para a nossa matriz de eventos. Antes de avançarmos, porém, vamos dar um passo atrás e pensar exatamente no que queremos fazer. O trabalho deste método é adicionar um novo evento ao nosso array mas como você acessar esses novos dados de evento que você deseja enviar? Bem, isso pode ser passado quando acionamos o evento personalizado sobre em nosso AddUpdateForm. Em primeiro lugar, assim como fizemos com close-form, precisamos adicionar isso à matriz emite. Vamos então emitir isso quando o botão Adicionar for clicado. Este é o botão que você vê apenas aqui, e isso vai acionar nossos eventos personalizados no botão. Quando clicado, isso vai emitir nossos eventos personalizados que passamos como o primeiro parâmetro, e isso foi adicionar novos eventos. A diferença desta vez, porém, quando emitimos um evento chamado close-form, isso não tinha nenhum dado que precisávamos passar. Nós também podemos remover esta palavra-chave também, isso não é necessário em nosso modelo. Mas como um segundo argumento, vamos passar os dados reais que são os eventos. Nós também poderíamos extrair isso e colocar um método chamado dentro daqui se quiséssemos, mas isso é bem simples por enquanto. Como agora estamos passando essas informações ao lado de nosso evento personalizado, de volta no app.vue, agora podemos receber essas informações usando uma variável especial chamada evento símbolo dólar. Só para ser claro aqui também, isso é sempre chamado evento símbolo dólar. Nós não apenas nomeamos este evento desde que passamos em algumas informações sobre eventos. Se tivéssemos um usuário que passará, isso ainda seria chamado evento símbolo dólar. Agora, isso é passado para o nosso método add, ele agora está disponível em nosso método abaixo. Nós vamos receber isso exatamente como nós normalmente faria com qualquer evento, então nós podemos dar a este qualquer nome que nós queremos. Podemos testar se isso está funcionando com um log de console e verificar se estamos recebendo as informações do evento do nosso formulário. Para testar isso, precisamos atualizar e ir para as Ferramentas do desenvolvedor, abrir o console e, em seguida, podemos tentar adicionar um novo evento. Não importa quais dados estamos colocando para agora, isso pode ser qualquer valor, clique em “Adicionar”. O que aconteceu lá, não vemos nada dentro do console, e agora, todos os formulários estão sendo fechados. Bem, se olharmos mais de perto e olharmos para esta seta de atualização aqui, podemos adicionar o novo evento de formulário. Veja esta seta desaparecer se clicarmos em “Adicionar”, isso agora atualiza a página e também limpa nosso console. Isso acontece porque o comportamento padrão do navegador é atualizar quando um formulário é enviado. Se você já encontrou isso antes e trabalhou com outras bibliotecas ou trabalhar com JavaScript, você pode já ter escrito algo como Event.PreventDefault dentro do método. Mas o Vue também fornece um atalho para isso, e isso é para adicionar um modificador de evento que podemos adicionar ao usar [inaudível] em nossa forma quando clicamos neste botão. Voltar para AddUpdateForm, aqui, estamos usando o V na sintaxe, em seguida, também podemos chamar ponto previne. Este modificador de evento agora deve impedir o comportamento padrão. Vamos voltar ao navegador e testar isso. Abra as Ferramentas de Desenvolvimento, clique em “Adicionar”, que nos dá o registro do console com todos os dados do formulário. Agora podemos usar esses dados para enviar uma nova entrada para o nosso array, mas uma coisa que também precisamos fazer é adicionar um ID. Atualmente, temos o nome, detalhes, datas e planos de fundo, mas lembre-se que cada um desses eventos também precisa de um ID exclusivo. Se você estivesse salvando essa entrada em um banco de dados, muitas vezes obteríamos de volta um ID exclusivo do banco de dados que poderíamos usar. Mas para simplificar, vou numerá-los em ordem, assim como temos com nossos dados de amostra. Para fazer isso, podemos adicionar uma nova propriedade ao nosso objeto de evento chamado ID, e, em seguida, precisamos também descobrir quantos eventos está atualmente dentro da nossa matriz, e, em seguida, adicionar um número no final. Se você tem atualmente seis eventos, o próximo que adicionarmos será o número sete, número oito, e assim por diante. Primeiro, podemos pegar o comprimento do nosso array atual com this.events.length e, em seguida, definir esse ID para ser um extra. Em seguida, vamos acessar nossos eventos e, em seguida, chamar o método push JavaScript que irá empurrar nossos novos eventos para o final desta matriz. Então, finalmente, podemos fechar nosso formulário. Vamos dar uma chance a isso. Clique em “Adicionar”, há um que acabamos de adicionar. Vamos tentar mais uma. para a cor diferente desta vez e verificar se está tudo bem, adicione isso. Agora, dois eventos são exibidos no navegador. 48. Emitir múltiplos eventos: Não estamos restritos a emiti-lo apenas em um único evento de nossos componentes. Podemos emitir quantos quisermos. Mais no formulário add update, para baixo na seção emit, teremos acesso a vários eventos personalizados, e podemos usá-los ao mesmo tempo também. Por exemplo, na exibição de atualização, quando adicionamos esse novo evento apenas aqui, em vez de fechar o formulário usando esse método, poderíamos, em vez disso, fazer uso do evento personalizado de forma fechada. Então, para fazer isso, tudo o que precisamos fazer é ir até o nosso modelo, e então tudo o que precisamos fazer é adicionar uma vírgula e passar em nosso segundo evento personalizado. Se fôssemos usar vários eventos como este, também pode ser mais limpo para extraí-los do modelo e movê-los para métodos separados. Quanto a isso, lembre-se que comentamos este formulário ponto show. Então, agora, se isso fecha o formulário depois de enviar, agora saberia que isso está emitindo vários eventos personalizados. Novamente, a informação do evento importa, podemos adicionar em qualquer dado. Clique em “Adicionar”. O evento está agora sendo exibido, e também nosso formulário foi fechado, mas desta vez, de nossos eventos personalizados. 49. Modificadores: Em nossa forma, nós tocamos em modificadores um pouco mais cedo quando usamos a palavra-chave de prevenção, que vai impedir o comportamento padrão do navegador, que é atualizar ao enviar um formulário. Há outros modificadores também, que veremos durante o curso juntamente com os modificadores de chave. Modificadores de teclas nos permitem fazer certas coisas quando uma tecla de teclado é pressionada. Você poderia usar caso seria talvez permitir que o usuário para pressionar “Enter”, para enviar o formulário, em vez de sempre ter que usar este botão “Adicionar”. Mas isso podemos copiar este evento clique e, em seguida, colá-lo em nosso Form Wrapper. Copie tudo isso, clique em “Seção” e, em seguida, role para cima até a marca de formulário de abertura, cole isso em. Agora, em vez de ouvir um clique, vamos ouvir uma chave para cima. Isso é algo que já sabemos, mas a diferença é que vamos usar um modificador para dizer exatamente qual chave queremos ouvir. Mais na documentação vista, temos uma lista de aliases de chave comuns que podemos usar, como delete, escape , space, mas vamos fazer uso de enter. Claro, isso não cobre todas as teclas que estão disponíveis no teclado, estes são apenas alguns dos aliases para os mais comuns. Se quiséssemos usar um botão de tecla que não está listado aqui, poderíamos usar quaisquer nomes de chave válidos, e podemos ver uma lista apenas aqui. Podemos fazer referência a qualquer uma dessas chaves, como página para baixo, que vemos aqui. Mas em vez de digitar assim, precisamos fazer tudo isso em minúsculas e separá-lo por traços. Para o nosso exemplo, vamos apenas usar a tecla “Enter”, [inaudível] isso logo após a tecla para cima. Vamos experimentar nosso aplicativo e atualizar novos eventos. Agora, para que isso funcione, precisamos interagir com todos os formulários já que adicionamos isso ao elemento de formulário. Então, clique em qualquer uma dessas entradas, e a partir daqui podemos pressionar “Enter”, que então enviará nosso formulário. 50. Validando nosso formulário: Vamos agora passar para adicionar em alguma validação de formulário ao nosso formulário. Atualmente, se nós apenas entrar e adicionar nenhum valor para essas entradas, podemos clicar em “Adicionar”, e isso irá então enviar um eventos vazios. Para corrigir isso, vamos primeiro passar por um método de validação que irá verificar se todos os campos obrigatórios foram preenchidos. Caso contrário, exibiremos as mensagens de erro para o usuário. Como não pode haver mais de um campo ausente, estes serão armazenados dentro de uma matriz. Então, em nosso formulário de atualização adicionar, o primeiro passo é adicionar uma nova propriedade de dados que vai armazenar esses erros. Para passar esses erros, vamos então precisar adicionar um método que vai validar todas as nossas entradas de formulário. Logo após a seção de dados, que é sobre métodos, e este nome de método vai ser validado. Vamos supor que isso preenche todas essas salas cada vez que o usuário clica no botão adicionar. Primeiro, queremos redefinir quaisquer erros anteriores. Podemos fazer isso definindo esteis.errors para ser mais uma vez definido para uma matriz vazia. Vamos então verificar o nosso formulário. Tivemos alguns depoimentos. O primeiro, vamos verificar se isso.events.name não existe. Podemos fazer isso adicionando o ponto de exclamação. Em seguida, esta instrução if só será executada se a propriedade name não existir. Poderíamos então adicionar o código que queremos executar nessas chaves ou, em vez disso, para simplificar, se mantivermos tudo isso na mesma linha. Isso vai funcionar bem também. Se este nome não existir, queremos enviar uma nova mensagem para a nossa matriz de erros. Vamos primeiro acessar estes. errors e nosso método push que irá, em seguida, empurrar uma nova cadeia de texto, que será nome é necessário. Duplicar isso e agora podemos fazer o mesmo para os detalhes do evento. Nós, então, também temos a data em segundo plano que você precisa cuidar, então duplique isso novamente. Este é o encontro. Então, finalmente, o fundo. Verifique se isso está funcionando, produzindo esses erros array em nosso modelo. Não precisamos mais dessa saída de informações de evento, mas podemos substituir isso por nossa matriz de erros. Para realmente ver isso, precisamos chamar nosso método de validação a partir deste botão. Vamos extrair todo esse código do manipulador de cliques e , em seguida, colocá-lo em um novo método até os métodos na parte inferior. Primeiro, vamos configurar nosso novo método que é você adicionar o evento e, em seguida, colar dentro de nossa seção intermediária. Remova a vírgula entre estes. Agora, uma vez que isso está dentro de nosso JavaScript ou nossa seção de visão, agora precisamos chamar emit com este prefixo, linha prata 1, linha 2 e também quando acessamos o evento. Agora, quando este formulário é enviado, a primeira coisa que queremos fazer é passar pelo método de validação. Em seguida, chamaremos adicionar eventos muito em breve. Além disso, nosso fundo add, vamos chamar o método de validação. Também o mesmo para todo o invólucro de formulário. Obter resultados e, em seguida, chamar validar. Agora, se formos até nossa seção de validação, aqui dentro teremos dois resultados. O primeiro resultado será que o formulário tem erros. Não queremos adicionar ao evento. O segundo resultado é que está tudo bem. Não temos nenhum erro. Agora queremos criar este evento. Se este for o caso e não tivermos erros, tudo o que queremos fazer é chamar este método add event. Como isso também vive na instância view, precisamos chamar isso com este prefixo. No entanto, se houver alguns erros, não queremos adicionar um novo evento. Em vez disso, o que vamos querer fazer é retornar para este método de validação antes de chegar a esta seção add events embora possamos primeiro verificar se this.errors, que é a nossa matriz. Podemos verificar se o comprimento é maior que zero. Isso significa que temos erros e vamos retornar deste método de validação. Vamos tentar isso no navegador. Primeiro de tudo, se apertarmos o botão “Adicionar”, isso então chama o método de validação e, em seguida, atualiza nossa matriz de erros com nossas quatro mensagens. Isso significa que nossos erros são maiores que zero e a palavra-chave return irá certificar-se de que você sair deste método de validação antes de enviar esses novos eventos. Isso é bom. Novamente, podemos adicionar algo no nome e nos detalhes, clique em “Adicionar”. Você vê a data em segundo plano está ausente. Vamos tentar isso sem erros. Adicione a data em segundo plano. Isso agora nos permite adicionar nosso novo evento. O estágio final é produzir esses erros como uma lista em vez de uma matriz. Para fazer isso, em vez de simplesmente produzir nossos erros como uma propriedade de data, em vez de ir para loop through. Crie um wrapper div. Nós só queremos mostrar esta seção se nossos errors.length vai ser maior que zero. Se for, vamos produzir estes como não ordenados para listar e, em seguida, produzir cada um desses erros como um item de lista. Podemos fazer isso com v-for e isso será erro em erros. Passe em uma chave dinâmica que pode ser igual ao nosso erro, uma vez que cada uma de nossas mensagens de erro é única. Então vou colocar a mensagem de erro. Vamos tentar isso nos novos eventos e as mensagens de erro serão agora saídas como uma lista não ordenada. 51. Atualizando eventos: Bem-vindo de volta. Agora, para atualizar e remover qualquer um desses eventos, precisamos novamente fazer uso de nossos eventos personalizados. Nós também vamos fazer uso deste mesmo formulário que usamos para adicionar um novo evento, mas desta vez vamos pré-preencher todos os detalhes do formulário com os detalhes do evento atual. A primeira coisa que precisamos fazer antes de entrar em qualquer um desses eventos é habilitar um manipulador de cliques em qualquer um desses eventos. Uma vez que clicamos nesses eventos, queremos que este formulário abra para que o usuário possa editar esse evento em particular. Agora, para fazer isso, vamos ouvir agora para um clique sobre o app.view dentro deste componente de evento ou, de fato, isso é cercado no item de lista, então nós também podemos adicionar isso no wrapper pai. Vamos adicionar um listener clique e, em seguida, vamos acionar um novo método chamado setForm. O SetForm vai, em seguida, passar os detalhes do evento atual. Estamos pegando os detalhes do evento do nosso ciclo. Cada vez que clicarmos em qualquer um desses itens em particular, ele irá então pegar os dados do evento para aquele em que clicamos. Até a seção de método. Este método agora precisa fazer duas coisas. Ele precisa primeiro exibir o formulário e também passar o evento selecionado para a propriedade data. Esta propriedade de dados será então usada como um prop para o próprio componente de formulário, o que significa que temos todos os dados para preencher previamente todas as seções. Para começar o nosso método que foi SetForm, estamos recebendo os detalhes do evento e uma vírgula no final. A primeira coisa que queremos fazer é definir a propriedade data do evento atual que ainda não criamos. Isto vai ser chamado de evento atual. Na verdade, este é um caso [inaudível]. Vamos definir isso igual ao evento que é passado. Se houver um erro ou nenhum dado for passado, enviaremos apenas um objeto vazio. Agora vamos definir este evento atual como uma propriedade data logo acima e inicialmente definir isso como um objeto. O que vai acontecer é clicar nesta seção ou em qualquer um desses eventos. Isso irá então acionar este método, em seguida, ele vai passar esses dados de evento para o evento atual, que podemos, em seguida, passar para todos os formulários em apenas um segundo. Mas primeiro precisamos exibir esse formulário. Podemos fazer isso alternando esta propriedade ShowForm. Queremos que isso seja verdade, então o formulário será exibido no navegador. Vamos verificar isso. Clique em qualquer um deles, todo o formulário aparece, e tudo isso parece funcionar para cada um de nossos eventos. Este formulário agora precisa desses dados do evento que temos armazenado no evento atual. Podemos pegar isso e passar para o nosso modelo e, em seguida, passar isso para o nosso AddUpdateForm. Isto vai ser dinâmico, por isso precisamos da ligação. O nome da propriedade vai ser evento atual, que também é igual aos dados do evento atual. Overt para o formulário que agora podemos adicionar em nossa matriz adereços dentro do padrão de exportação. O único adereço que temos neste momento vai ser um acontecimento actual. No momento temos o evento atual que é passado para este formulário. Temos o objeto de evento que é armazenado em dados. Este objeto de evento também está fazendo uso de v-model para vincular isso a toda a nossa entrada de formulário. Agora, para passar este evento atual como o valor inicial, primeiro precisamos definir este evento para ser igual ao nosso evento atual. Podemos fazer isso assim que o aplicativo for carregado dentro do gancho montado onde vamos definir this.event para ser igual a this.current evento.current. Vamos testar isso tudo está funcionando clicando em qualquer um desses eventos e atualizar primeiro. Temos a formatura. Vamos tentar o aniversário. A palestra da conferência. Também agora, se entrarmos em nosso ícone mais para adicionar formulário, a próxima coisa que vamos fazer é alternar este botão na parte inferior, atualmente vemos o botão add, mas se entrarmos na seção de edição, ainda vemos o botão add também. Isso ocorre porque dentro do modelo temos apenas o botão de adição único. Também precisamos duplicar isso e criar um botão de atualização. Isto vai ser para actualizar. Isso também precisa ser executado através do mesmo método de validação para garantir que todos os campos de formulário que usamos estão mudando, ainda estão presentes depois que eles são salvos. Só queremos mostrar um desses botões de cada vez. A maneira como podemos fazer isso é verificar se nosso evento tem uma propriedade id. Isso ocorre porque a propriedade id só é adicionada uma vez que salvamos, portanto, o evento já existe, então devemos estar atualizando-o. Dentro do primeiro botão que é atualizar, vamos adicionar uma seção v-if, e isso vai verificar se o currentEvent.ID existe. Se esta declaração for verdadeira, veremos o botão de atualização. Caso contrário, adicionaremos a seção el-para mostrar o botão adicionar. Vamos tentar isto. Vamos para o botão adicionar para começar. Vamos ver ambos aqui porque não adicionamos v-else. Precisamos disso porque isso não é apenas JavaScript regular. Agora vou ver o botão de atualização, então tudo isso está funcionando bem. Agora de volta aos nossos dois botões. Agora, ambos os botões, um primeiro, chamando o método de validação. Quando chamamos isso, ele precisa saber se estamos atualizando um evento ou indo adicionar um novo. Para fazer isso, vamos passar em uma string e para este, isso será atualização. Este será adicionado. Agora temos um tipo de evento que você vai querer executar após a validação. Passe isso para o nosso método de validação. Este é um nome de variável que eu vou chamar tipo. Isto vai ser executado através de toda a validação. Antes de ir em frente e adicionar um novo evento, nós só queremos chamar este método se o tipo é igual a adicionar. Vamos adicionar uma declaração if. Se variável externa é igual a adicionar, vamos chamar this.AddEvent. Se não, vamos adicionar um el-section, então isso deve significar que o tipo é atualizar e, portanto, queremos chamar um método diferente que vai ser chamado UpdateEvent. Atualizar nosso evento vai parecer muito semelhante a este método AddEvent, que possamos duplicar isso para começar, ele muda para ser atualizado. Ainda não criamos um evento de atualização personalizada, então vamos deixar esse evento em branco. Você também precisará receber os novos detalhes do evento e fechar o formulário, então o resto está tudo bem. Vamos agora criar este evento personalizado sobre no app.view até a seção AddUpdateForm. Isso vai seguir um padrão semelhante a esta seção adicionar novo evento. Mas desta vez isso é para atualização, então vamos adicionar um novo evento personalizado chamado evento de atualização. Isso vai acionar uma função de atualização e também receberemos os dados do evento. Vamos agora definir isso em nossos métodos. Isso levará nos detalhes do evento que é passado. A primeira coisa que precisamos fazer quando estamos atualizando um evento dentro destes array de eventos, queremos encontrar a posição de índice para aquele que queremos atualizar. A maneira que podemos fazer isso é chamando this.event para pegar nossa matriz completa, e então precisamos chamar um método de matriz JavaScript chamado FindIndex. Isto vai então chamar uma função, e esta função vai ser chamada para cada item dentro da nossa matriz de eventos. Estamos efetivamente looping através de cada um e, em seguida, ele executar uma função. Cada vez que percorrer um evento individual, vamos então armazenar o valor ou o elemento dentro desta propriedade el. Este é apenas um nome de variável, então você pode chamar isso do que quiser. Vamos então verificar se este element.id vai ser igual ao id que é passado a partir deste evento. Isso está em uma constante chamada índice. Isto deve agora dar-nos a posição de índice do nosso evento dentro desta matriz de eventos. Se nós selecionamos o primeiro, esta será a posição de índice zero. Esta será a posição um, dois, três, e assim por diante. Vamos então chamar this.events e pegar o particular pelo número de índice e, em seguida, substituí-lo pelo nosso novo objeto de evento. Tudo o que resta agora é chamar este evento personalizado do nosso componente. No formulário add update, primeiro precisamos receber isso na matriz emit. Então isso está pronto para chamar do nosso método. Em evento de atualização e podemos substituir isso com evento de atualização, dizer isso, e podemos testar nossa funcionalidade de atualização. Entre em qualquer um desses, podemos editar os detalhes. Clique em atualizar, e isso agora é salvo. Vamos tentar um diferente. Vou mudar a cor de fundo para laranja. Isso tudo funciona bem. Vamos apenas fazer uma recapitulação rápida porque é muita coisa acontecendo aqui. Estamos passando dados entre dois componentes diferentes. A primeira coisa que fizemos mais no app.view foi ouvir um clique em qualquer um desses eventos. Em seguida, acionamos um método chamado setForm. Isso também recebeu os dados do evento atual. Agora dentro deste método, a primeira coisa que fizemos foi definir uma propriedade de dados chamada evento atual. Isso era igual à nossa informação do evento e, em seguida, ele também apareceu o formulário. Este evento atual de volta ao topo foi então um passado para o nosso formulário, que então ele usou para preencher todas as seções dentro daqui. Ele fez isso porque nós atribuímos isso à nossa propriedade de dados. Assim que este componente montou este botão de atualização, em seguida, chamado o método de validação. Então, uma vez que você verificou toda a validação, nós então chamamos o método add ou update, que nós configuramos logo acima usando nossos eventos personalizados. Pouco antes de seguirmos em frente, também vamos verificar se a validação está funcionando ou a seção de atualização. Se removermos um nome, o nome é obrigatório e também os detalhes do evento também são necessários. Uma coisa a observar, porém, se atualizarmos este aplicativo, o aplicativo voltará a ser como era originalmente, já que não estamos usando um banco de dados para armazenar todos esses eventos em. Em seguida, vamos passar para realmente remover esses eventos quando o usuário clica neste botão. 52. Remover eventos e interromper propagação: Pouco antes de passarmos para remover nossos eventos usando este botão Cross, vamos corrigir um pequeno problema que vimos no último vídeo. Agora, esta questão foi destacada. Se entrarmos na seção Adicionar novo, veremos que não temos nenhum desses formulários pré-preenchidos. No entanto, se entrarmos em uma seção Editar, que está funcionando completamente bem. Feche isso e, agora, se voltarmos para a seção Adicionar, todos os campos de formulário de trabalho serão preenchidos previamente. Agora, a razão pela qual isso acontece é porque uma vez que você abre a seção Editar, isso está configurando no app.view, nossa propriedade de dados, que é CurrentEvent, e isso é, em seguida, enviar isso para os dados CurrentEvent. Agora, para corrigir isso, vamos redefinir isso de volta para um objeto vazio quando fecharmos este formulário. Quando fechamos este formulário, olhe para a parte superior, tudo o que você está fazendo é definir a propriedade showForm para ser igual a false. Agora vamos mover isso para um método, e também podemos redefinir nossos dados CurrentEvent. Vamos cortar isso, vamos usá-lo em um momento. Este método vai ser chamado de forma fechada, e então podemos rolar para baixo e criar isso logo abaixo. Formulário fechado não precisa levar em nenhum dado, tudo o que precisamos fazer é colar isso de volta. Agora, uma vez que estamos em nossa seção de visão, nos referimos a isso com esta palavra-chave. Depois disso, redefiniremos nosso feedback de dados do CurrentEvent para ser um objeto vazio. Vamos tentar isso, atualizar o navegador. Isto está vazio. Isto é bom. Em seguida, de volta ao nosso formulário de adição, isso agora está tudo vazio. Agora podemos passar para remover nossos eventos usando este botão Cross. A remoção de eventos seguirá um padrão semelhante de criação de um evento personalizado, e dois-pontos nos componentes filho. Desta vez, porém, ele será chamado a partir do componente de evento em vez do formulário. Para o event.view, onde já temos este botão configurado, e muito em breve vamos ligar isso a um evento personalizado. Olhe para a direita, é um evento personalizado como sempre no app.view. Primeiro, vamos configurar um método que este evento personalizado vai chamar. Isto vai ser chamado de remover. Isso também será dados de eventos passados, então sabemos quais eventos queremos remover. Agora, assim como na seção de atualização, também precisamos encontrar a posição do índice, então sabemos qual deles queremos remover do nosso array. Podemos copiar isso e colar isso dentro daqui, e só podemos usar essa posição de índice para selecionar o evento correto. Primeiro vamos selecionar this.events, em seguida, o método de matriz JavaScript, que é chamado de splice, vai nos permitir remover um item específico. Isto vai levar em duas coisas. O primeiro será a posição do item que queremos remover. Sabemos que já temos isso do índice. Em segundo lugar, o número de itens desta posição de índice. Nós só queremos remover o único evento, significa que o valor é um. Em seguida, rolamos para cima até nossos modelos e a seção de eventos onde queremos passar nosso evento personalizado. Como um atributo, vamos passar em nosso método cristal, que é remove-evento. Isso será igual ao nosso método de remoção, que também receberá os dados do evento. O próximo passo deve ser bastante familiar. Vamos até os componentes do evento, e então vamos adicionar nossa matriz de emissões. Esta matriz emite está atualmente indo apenas para tomar em um evento, e isso é remover evento. Até ao nosso botão. Para acionar isso, precisamos ouvir um clique. Em seguida, vamos clicar neste botão, isso irá então chamar o método remove, que agora irá configurar logo abaixo. Nós não temos uma seção de método, então precisamos configurar isso e, em seguida, configurar nosso método de remoção onde vamos emitir nosso evento personalizado. Já que estamos na seção de exibição, precisamos chamá-lo com esta palavra-chave. Digite o nome do nosso evento que é remove-events. Então queremos passar os dados do evento. Nós já temos isso salvo como um adereço, então nós passamos isso como o segundo argumento. Vamos dar uma chance a isso. Vá para o navegador e atualize. Agora, se tentarmos clicar em qualquer um desses eventos, podemos ver em segundo plano que o evento foi removido. Também veremos esse formulário aparecendo. Vamos tentar mais uma vez. Vamos remover o aniversário, e podemos ver do fundo que isso se foi. Mas por que estamos vendo esse formulário? Bem, isso ocorre porque, mesmo que neste componente, estamos clicando neste botão. Este botão é aninhado dentro do app.view e dentro deste app.view emparelhamento, também temos isso cercado em um listener clique, que está disparando setForm. Em seguida, dentro de ShowForm se rolar para baixo, podemos ver que definimos em this.showForm para ser igual a true. Por que está sendo chamado quando clicamos no botão Remover? Bem, a razão disso acontecer é por causa de algo chamado propagação de eventos. Isso não tem nada a ver com Vue.js, apenas algo que você geralmente deve estar ciente ao usar JavaScript. Sim, estamos clicando no botão remover que está aninhado dentro, mas clicar em um evento dentro do HTML iria desencadear uma reação em cadeia. Para ver isso, podemos abrir as ferramentas do desenvolvedor. Clique com o botão direito e inspecione O que precisamos encontrar é este botão Remover, então na seção do corpo, na seção do aplicativo. Então dentro daqui temos uma lista desordenada com todos os eventos, e então podemos selecionar um de nossos itens da lista. Se abrirmos isso, isso está em um invólucro de artigo, e o botão está aninhado na seção de contagem regressiva aqui. Como podemos ver, isso coloca é profundamente aninhado, tem divs circundantes, tem itens de lista. Em ordem listar a seção do corpo, e ele vai direto para o topo da árvore, que é a janela. Mesmo que estejamos clicando neste botão, ele irá desencadear uma série de fases. Começará no topo e, em seguida, passará por todos os elementos até chegar ao nosso botão. Isso é chamado de fase de captura. Em seguida, ele atinge o botão ou os elementos em que clicamos, e isso é chamado de alvo. Portanto, o estágio é chamado de estágio alvo. Finalmente, uma vez que atinge este botão, ele então sobe de volta através de todos os elementos pai, um por um. Ao fazer isso, também acionaremos quaisquer eventos no caminho de volta. Como acabamos de olhar, um desses eventos no caminho de volta ainda abrirá o formulário. Este estágio é chamado de fase borbulhante. Agora, você não precisa entender completamente tudo isso por enquanto. Tudo que você precisa entender é que quando clicamos em um evento, ele passa por todos os elementos DOM pais e vamos acionar outros ao longo do caminho também. Tudo isso é referido como propagação de eventos. Vue.js também nos fornece um modificador de eventos para parar esse comportamento, se necessário. No event.view. Assim como anteriormente quando adicionamos o modificador de prevenção que interrompeu o comportamento padrão do navegador, este modificador de parada irá parar esta propagação de evento. Vamos guardar isto e passar para o nosso projecto. Clique nestes. Agora, esses eventos são removidos com sucesso. Só para terminar as coisas, vou fazer um pequeno refactor no app.view. No momento, dentro deste método de remoção e também a atualização, estamos duplicando essa linha de código. Para evitar isso, vamos colocar essa linha de código em seu próprio método reutilizável. Nós cortamos isso, e também este também, e, em seguida, criar um novo método chamado FindEventIndex, onde podemos colar nesta linha de código. Este método também precisa de acesso ao nosso evento, que possamos cortar o ID do evento. Ou, alternativamente, podemos simplificar isso e apenas passar o ID dos eventos. Podemos fazer esse chamado FindEventIndex, então vamos pegar isso e primeiro no método remove. Agora não temos acesso a essa constante de índice, então vamos substituir isso por uma chamada de método. Podemos chamar FindEventIndex, onde também precisamos passá-lo em um ID válido que podemos pegar a partir do Event.ID. Isso também precisa ser chamado quando a palavra-chave this, e também podemos copiar esta seção e substituir a seção de atualização onde chamamos o índice. Vamos colar isto. Agora precisamos retornar o valor deste método. Em vez de armazenar isso dentro de uma constante, vamos retornar seu número de índice, que será então disponível dentro dessas duas seções. Vamos testar isso. Primeiro de tudo, podemos remover um evento, e isso funciona bem. Em seguida, a funcionalidade de atualização, você alterar qualquer um dos detalhes. Clique em Atualizar, e isso também funciona bem. 53. Introdução: validação e aprofundamento sobre propriedades: Nós não queremos apenas lançar quaisquer dados antigos em componentes antigos. Queremos ser mais específicos sobre o tipo de dados que vamos receber e os formatos em que estão. Caso contrário, podemos obter erros e não queremos aqueles em nossa aplicação. Vamos dar uma olhada nisso no próximo vídeo, e então vamos dar uma olhada em algo chamado atributos não-prop, que é uma maneira diferente de passar dados entre nossos componentes. 54. Validação de propriedades: Em nosso projeto, adereços são uma parte importante de como tudo funciona. É uma boa idéia adicionar alguma validação para garantir que obtemos as informações corretas passadas através de nossos componentes. Dentro deste arquivo app.view principal, este é o componente de nível superior, portanto este não é passado nenhum adereço. Para começar com a validação de prop, vamos para os componentes events.view. A primeira coisa que precisamos fazer para adicionar validação é mudar essa matriz em um objeto, que é resultados comuns, e então vamos restabelecer nossa propriedade adereços para este tempo como um objeto. O primeiro que temos logo acima são os eventos. Sua validação de prova mais simples , não pode simplesmente declarar o tipo de dados que esperamos receber. O evento vai ser um objeto. Separados por uma vírgula, temos o DayLeft. O DayLeft vai ser um número. Então finalmente temos ShowPastEvents. O tipo de dados para isso é um booleano. Este é apenas um simples verdadeiro ou falso, para que possamos esconder os eventos se os dias tiverem expirado. Nós também pode passar em um tipos de dados válidos também, como matriz, função, símbolo, data e string. Vamos tentar isto. Mais no navegador, atualizar, vemos que tudo está funcionando perfeitamente bem. Abra as ferramentas do desenvolvedor e podemos verificar se não há áreas dentro do console. Sim, está tudo bem. Mas agora se passarmos para o app.view, vamos fazer uma alteração para os dados que estamos passando para baixo para este componente evento. Por exemplo, vamos para ShowPastEvents que é verdadeiro ou falso. Agora, se removermos a ligação, isso não significa que isso será passado como um valor de string em vez de um booleano. Abra isso, atualize e agora veremos um aviso para todos os nossos seis eventos diferentes. O aviso é o tipo de prop inválido, a verificação de tipo falhou para o prop ShowPastEvents. Vemos que esperávamos um booleano porque isso é o que colocamos dentro de nossos componentes. Mas depois temos uma corda. Também não estamos restritos a um único tipo de dados. Se quisermos aceitar uma string ao lado deste booleano, tudo o que precisamos fazer é passar isso como uma matriz. É em torno disso dentro deste colchetes, em seguida, separados por uma vírgula também aceitará um valor de string. Atualize, e agora nossos erros desaparecerão agora. Nós não queremos booleano para este exemplo particular, então podemos remover os colchetes e também na ligação de volta para aqui. Esses erros que você vê eles só são mostrados em desenvolvimentos e podem ser realmente úteis se cometemos um erro ou alteramos nossos dados inesperadamente. Nós não podemos ir ainda mais longe, não apenas declarando o tipo de dados, que estamos fazendo atualmente, mas também para restringir os valores que você recebe também, para fazer isso podemos passar em propriedades extras e transformar isso em um objeto, então chame-nos para fora e adicionar a chave é transformar isso em um objeto, podemos então passar no tipo com a propriedade type. O que vamos definir este prop novamente para ser um objeto, o DayLeft, nós fazemos o mesmo para este e a propriedade type, e também o mesmo para todos os booleanos. Agora estes são todos objetos, estes agora podem aceitar várias propriedades. Por exemplo, se quisermos ter certeza que esse suporte é necessário, podemos definir isso como verdadeiro. Também o mesmo para o DayLeft. Isso significa que isso deve fluir em um erro se mesmo uma dessas propriedades não for passada para esses componentes. Teste isso para o app.view, podemos remover qualquer um desses. Vamos para o DayLeft. Vamos chamar isso temporariamente. Agora, no navegador, vemos o suporte ausente ou necessário de DayLeft para todos os seis de nossos eventos. Mais no event.view, observe aqui como paramos a propriedade necessária, para ShowPastEvents. Isso ocorre porque esse tipo de adereço é um booleano. Se não passássemos para baixo este prop, um valor booleano sempre será padrão para false de qualquer maneira, que significa que ele ainda parece estar presente de qualquer maneira. Isto é apenas algo para ter cuidado ao passar adereços booleanos. Vamos apenas restabelecer rapidamente seu DayLeft e salvar este arquivo. Props também pode receber um valor padrão também, que podemos usar se nenhum valor for fornecido. Agora, em vez de dizer que este tipo de prop deve estar presente, também podemos dizer que se isso não estiver presente, vamos passar em vez de um valor padrão. Este é o tipo de número, e vamos para um número de 10. No momento, isso não fará diferença se atualizarmos o navegador porque ainda estamos passando o prop para esses componentes. Mas novamente, se pudéssemos isso, atualize, embora os eventos agora retornem o padrão de 10 dias restantes. Vamos desfazer isso e salvar esse arquivo. Isso apenas funciona para coisas como números ou strings, booleano ao validar as funções, matrizes são objetos. Precisamos passar essa propriedade padrão como uma função. Nosso evento é o tipo de objeto, por isso podemos dar uma tentativa, remover a propriedade necessária e, em seguida, ele muda para ser o padrão. Para isso, uma vez que este é um objeto, precisamos configurar isso como uma função. Então, se nenhum evento prop for passado, vamos retornar este objeto padrão. Isso precisa ter a mesma configuração que temos aqui dentro. Temos a identificação, para cada evento, que apenas dá algumas informações aleatórias. Temos o nome, que é um valor de string, os detalhes do evento. Se estiver bem, salve isso, e é claro que não deve afetar nada que temos atualmente porque ainda estamos recebendo o adereço do evento. Mas se removermos isso, devemos agora chutar em nossos eventos padrão com dados que passamos aqui dentro. O que realmente queremos olhar para é a propriedade validator. Vamos apenas adicionar o nosso evento aqui dentro, e depois voltar para os nossos eventos. A propriedade validador é uma função personalizada que nos dá uma maneira muito mais flexível de validar nossos adereços. É colocado para fora de uma maneira semelhante à nossa função padrão, mas em vez disso, substituímos isso com validador. Esta função também terá um valor, que é o valor da prop que é passado. Atualmente este será o evento. Agora podemos validar esse valor de qualquer maneira que quisermos usando JavaScripts. Por exemplo, se quiséssemos apenas permitir certos nomes de eventos, poderíamos fazer algo assim. Vamos configurar matriz aberta com os nomes de eventos em voz alta que você deseja passar através deste validador. Vamos para dois do nosso nome atual do evento. Temos aniversário, e também temos um Natal. Em seguida, podemos usar o JavaScript inclui método para verificar se algum dos nossos eventos inclui o título de aniversário ou Natal. Sabemos que as informações do evento são passadas dentro deste valor, para que possamos acessar nossos objetos e, em seguida, o nome do evento. Se qualquer um de nossos eventos incluir o título de aniversário ou Natal, então queremos retornar esse valor, e isso será verdadeiro ou falso. Vamos salvar isso e voltar para o navegador para as ferramentas do desenvolvedor. Veremos agora que este validador falhou em nossos quatro eventos que não incluem o título ou o nome do aniversário ou Natal. Nós não precisamos desta função validador dentro deste projeto, mas é útil saber que isso está lá e nos dá uma maneira realmente flexível de validar nossos adereços. Também podemos adicionar validação de tipo de prop ao nosso AddUpdateForm também, role para baixo até nossa ação scripts. Nós só temos o único adereço dentro aqui, então podemos comentar isso, definir este aplicativo tem um objeto, base em nossos eventos atuais, que tem o tipo de objeto. Salve este arquivo. Agora, se atualizarmos o navegador, abrirmos o console, tudo agora ainda funciona como esperado. 55. Atributos sem propriedades definidas: No projeto anterior, adicionamos uma opção de modo escuro, e agora vou fazer algo semelhante que é aplicar um GrayMode. Se este esquema de cores que você tem atualmente é um pouco demais para o usuário, isso deve ser bastante familiar, nós reduzimos usando muitas das técnicas que já usamos. Começando de novo no app.vue, primeiro precisamos de algumas propriedades de dados. Dentro da seção de retornos, o primeiro será GrayModeSet, este é um valor booleano que será atualmente definido como false. Em seguida, também um objeto GrayMode que vai conter o esquema de cores, mas o nosso fundo e também a nossa cor da fonte. Isso será para o nosso silício CSS, primeiro defina a propriedade de fundo para ser cinza ardósia claro. Então também a nossa propriedade de cor para o texto, e você pode escolher qualquer cor que você quiser e eu vou para um valor hexadecimal de 454444. Mover para os modelos, isso também precisa de um botão para que possamos ativar e desativar isso. Vou colocar isso dentro de nossas opções div, e também entre esses dois botões de cor. O primeiro passo é, pelo menos agora para um clique neste botão e, em seguida, vamos alternar este GrayModeSet para estar ligado e desligado. Assim como fizemos acima com o show eventos passados, vamos fazer o mesmo, mas desta vez para GrayModeSet. Vamos definir isto para ser o oposto. Nós também poderíamos adicionar algum texto dentro daqui, mas em vez disso eu vou usar um esconderijo minha entidade, que vai ser o sol ou a lua. Para tornar isso dinâmico, precisamos das chaves duplas e também faremos uso do operador ternário JavaScript. Se o modo cinza definido é atualmente verdadeiro, vamos definir o ícone que é a lua. Assim, o ícone da lua é o e comercial, o áspero no número de 9788;. Se isso for falso, mostramos a imagem da lua. Definimos esse valor padrão para ser falso, então vemos o ícone da lua dentro daqui. Vamos clicar nisso, vemos o sol. Então tudo isso parece funcionar bem. Agora os estilos que foi configurado como uma propriedade de dados, agora precisa ser passado para baixo para estes componentes de evento. Podemos alterar a cor de fundo e também o texto para cada um desses eventos. No passado, passamos adereços para esses componentes do evento. Assim como vemos aqui. Poderíamos fazer isso mais uma vez, mas desta vez vamos tirar vantagem de atributos não-prop. Isso funciona de forma semelhante aos adereços que vimos no passado. Bem, em vez de dentro dos componentes, o modelo herdará automaticamente esses valores. Para esses componentes específicos, o artigo é os principais elementos do wrapper, e quaisquer atributos sem fins lucrativos a serem transmitidos serão automaticamente herdados por este wrapper principal. Eles também aparecem como um atributo regular dentro da tag de abertura, então se passarmos um atributo ID, ele seria algo parecido com isso. Vamos remover isso e para fazer isso, vamos voltar para os pais app.vue, e então podemos passar isso para os componentes do evento. Usando o mesmo exemplo, vamos definir o ID igual a uma string, dizer isso e sobre o navegador, podemos atualizar e abrir as ferramentas de desenvolvedor. Use o seletor e escolha qualquer um desses eventos. Eles são armazenados dentro de uma lista não ordenada, e se entrarmos em nossos itens de lista no artigo, isso em torno de um artigo agora herdou nosso ID. Isso significa que se formos para o nosso Event.vue, não precisamos mais registrá-los como nossos adereços, eles são automaticamente herdados dentro do modelo. Agora, como um exemplo mais prático, vamos substituir esse ID pelos estilos que você define como uma propriedade de dados. Combinamos isso como um atributo de estilo onde vamos passar nossos fundos e também nossa cor. Dentro da seção de dados, temos este conjunto dentro de nosso objeto GrayMode. Agora só queremos passar esses valores se GrayModeSet for verdadeiro. Agora podemos usar o operador ternário JavaScript para determinar se vamos passar isso como um objeto e podemos fazer isso usando o operador ternário JavaScript. Podemos primeiro verificar se GrayMode está definido. Se for, então vamos passar nosso objeto, que é GrayMode. Caso contrário, vamos simplesmente passar uma string vazia, então nenhum desses estilos será aplicado. Vamos dar uma volta para o navegador, e nossa alternância está funcionando agora. Dentro das ferramentas de desenvolvedor, podemos ver isso se entrarmos na seção de elementos, sua lista não ordenada, e depois até o nosso artigo onde agora temos essa propriedade de estilo dinâmico, que tem a cor de fundo e também a cor do texto também. Clique no Sol e, em seguida, nosso CSS regular apenas se aplica. Agora com todo esse trabalho e nós vamos apenas aplicar algum estilo para esses três botões na parte superior, e o botão show past events ao lado desta alternância vai permanecer sobre a esquerda. Vamos apertar o botão AddNew Vamp para a direita. Faça isso no app.vue, até os três botões, e vamos agrupar nossos dois primeiros botões juntos dentro de uma div. Então, podemos pegar estes, adicionar um div, e colocá-los de volta dentro. O estilo, e vamos dar a isso uma classe de opção nos botões do crânio. Isto agora significa que a nossa classe de opções agora tem esta div e também este botão. Podemos fazer uso da flexbox CSS para definir o alinhamento e adicionar algum espaçamento entre essas duas seções. Seção de estilo downscale. Primeiro de tudo, essas opções wrapper, o tipo de exibição de flex, que agora talvez não pudéssemos definir o conteúdo justificado para nos dar algum espaço entre. Isso agora nos dá o espaçamento entre eles, então agora podemos nos concentrar neste tempo e para esses botões individuais, vamos começar com este botão AddNew. Se voltarmos para o nosso modelo, o botão sobre a direita, como esta classe de AddNew. Então, nossos dois botões à esquerda têm essa classe de botões de opção. Para baixo para a nossa seção de estilo, vamos primeiro para o botão AddNew. Podemos fazer isso um pouco maior com o tamanho da fonte de três rems e também a cor da fonte, que será um valores RGB. Então o vermelho é 92, o verde é 84, e então 84 para o azul também. O cursor, este será um ponteiro, então ele muda quando o usuário passa o mouse sobre este botão. Em seguida, remova também o fundo padrão e também a borda também. Agora, o grupo de opções à esquerda, que tinha a classe de botões de opção. Então, quando queremos atingir os dois botões que estão aninhados dentro, começar em algum preenchimento de 0,5 rems na parte superior e inferior e, em seguida, em um rem à esquerda e à direita. Isso só vai fazer esses botões um pouco maiores e também adicionar algum espaçamento entre eles, podemos aplicar alguma margem sobre a direita, o fundo de nenhum. Então vamos para a fronteira. Primeiro de tudo, o raio da borda de um rem nos dá os cantos arredondados, e então a borda real, que terá dois pixels de largura, uma cor de azul de aço claro e também uma linha sólida. O tamanho da fonte de 1.2 rems e, finalmente, o cursor, apenas tanto passou para ser um ponteiro. Os toques finais também para garantir que temos alinhamento vertical de nossos dois botões à esquerda para todos os botões à direita. Podemos ver que isso coloca isso é um pouco menor e a maneira de corrigir isso está dentro do wrapper, e tudo o que precisamos fazer dentro daqui é definir a propriedade align items para estar no centro, que agora alinha nossas duas seções. Há também mais algumas coisas para descobrir com atributos não-prop, e vamos descobrir isso a seguir. 56. Mais sobre atributos sem propriedades: Agora sabemos como passar atributos básicos não-prop, mas também há mais algumas coisas que podemos analisar também. Uma dessas coisas é cancelar a herança automática. Sabemos desde o último vídeo que o componente filho herda os atributos automaticamente. Mas se não queremos que isso aconteça, temos controle total sobre isso. Dentro do componente filho, que é o Event.vue, descemos para a nossa seção de script e podemos adicionar uma nova propriedade, que é InheritAttrs. Se, em seguida, definir isso como false, isso agora significa que nosso template não herdará automaticamente todos os atributos não-prop que passamos para baixo. Podemos provar que isso está funcionando alternando, vamos colocá-lo aqui, e nosso esquema de cores permanece exatamente o mesmo. Mas por que iríamos querer fazer isso? Bem, digamos, por exemplo, não queremos que todos esses atributos sejam herdados neste wrapper de nível superior. Bem, não estamos restritos a apenas usar este wrapper de nível superior, Vue nos dá acesso a esses atributos em qualquer lugar dentro deste template, e também em nossa seção de script. Vamos fazer isso adicionando o gancho montado, e assim que este componente é montado, uma vez que ele registra no console, o valor disso. $attrs. Então, se acessarmos em nossos atributos dentro de nossa seção de script, usamos a palavra-chave 'this'. Se estamos acessando diretamente em nosso modelo, lembre-se que não precisamos usar uma palavra-chave 'this', e podemos acessá-la diretamente no console. Vamos verificar isso. Refresque. Agora temos seis atributos diferentes. Porque temos seis eventos diferentes, dentro daqui nós, ainda temos acesso ao nosso objeto de estilo e podemos acessar quaisquer outros atributos não-prop que são passados para este evento. Este atributo de símbolo de dólar é uma propriedade de visualização interna. Agora estamos livres para usar isso em qualquer lugar que quisermos. Por exemplo, se quisermos colocar isso em uma div diferente, podemos fazê-lo usando v-bind. Portanto, lembre-se, não estamos herdando isso automaticamente, portanto, este artigo não tem acesso automaticamente. Agora, podemos colocar isso em qualquer outra seção usando v-bind e, em seguida, passar em nossos atributos para o console. Na parte superior do nosso aplicativo está o objeto de opções com todos os três botões. Então estrague isso, abra a lista desordenada. Para cada evento temos o item da lista, temos o wrapper do artigo, e assim o nosso artigo. Em seguida, a div com a classe de dados, vamos alternar este botão. Em seguida, vemos o nosso atributo de estilo agora foi adicionado a esta seção com este. Este é apenas um exemplo de como podemos colocar esses atributos em qualquer seção para o nosso modelo. Algo que também precisamos estar cientes é se temos vários elementos de nível raiz. Para ver isso, vamos remover nosso v-bind. Se nós também, comentar nossos atributos herdados. Agora, se voltarmos para o nosso modelo e se fôssemos cortar este botão de remoção, a seção div completa e, em seguida, coloca logo acima do nosso artigo. Lembre-se de antes que este artigo estava herdando automaticamente. Todos os atributos não-prop que são passados para baixo, mas agora temos dois elementos ao lado do outro. Qual herdaria automaticamente esses atributos? Bem, vamos dar uma olhada no navegador. Volte para as ferramentas do desenvolvedor, para o console. Refresque. Agora também vemos algumas mensagens de erro no console uma vez que a herança só ocorrerá se houver um elemento raiz. Então faz sentido que esse comportamento exista, porque se tivermos dois elementos um ao lado do outro como este, Vue teria que adivinhar qual deles montar. Vamos então resolver isso novamente usando nossa sintaxe v-bind e, em seguida, dizer Vue.js qual desses elementos queremos vincular, assim como antes de vincular nossos atributos. Então, se voltarmos para as ferramentas do desenvolvedor, para o console, não veremos mais erros. A última coisa que vamos olhar é também uma passagem ouvintes evento como atributos também. Até agora, se formos para o nosso app.vue, e então onde renderizamos nossos componentes de eventos. Até agora, analisamos apenas dados de passagem, como estilos, mas passar um ouvinte de eventos funciona da mesma forma. Se quisermos ouvir um evento, como um clique, também podemos passar isso para nossos componentes em @click. Então, assim como com qualquer outro evento, podemos então acionar um método, ou podemos apenas fazer um JavaScript simples, como definir um modo cinza para ser igual a true, salvar isso em nosso navegador. Lembre-se no Event.vue, estamos vinculando esses atributos a este botão de remoção. Agora, se clicarmos nesta seção do botão de remoção, vemos que a cor de fundo mais escura apareceu, é que estamos configurando o modo cinza para ser verdadeiro. Também podemos ver isso agora se formos para as ferramentas de desenvolvedor, onde ainda estamos fazendo o log do console para cada um de nossos atributos. Se abrirmos isso e, em seguida, for a seção de destino, você verá que temos essa propriedade style, mas também agora um manipulador de eventos OnClick. Agora, este é apenas um exemplo simples de como um ouvinte de clique funciona com atributos não adequados. Então vamos remover isso, pois não precisamos disso em nosso projeto. Além disso, no caso, se alternarmos isso, ainda estamos passando os atributos para o botão. Queremos que estes realmente se aplicam ao artigo para que nós vamos remover todos v-bind e, em seguida, passar isso para o nosso artigo. Vamos testar isso clicando em nossa alternância, e tudo está funcionando mais uma vez. É assim que os atributos não-prop funcionam. Em seguida, vamos dar uma olhada em algumas outras maneiras de passar dados usando slots. 57. Introdução: slots e componentes dinâmicos: Até agora, analisamos várias maneiras diferentes de passar dados entre nossos componentes. Analisamos como podemos passar adereços de um pai para um componente filho e como podemos omitir o backup de eventos personalizados. Mas a seguir nesta seção, vamos dar uma olhada em algo chamado slots, que é uma maneira realmente flexível de passar dados entre nossos componentes. Mas também, teremos um novo projeto para estilo que é um aplicativo de painel. Em seguida, vamos dar uma olhada em como podemos baixar isso e começar. 58. O que vamos construir e projeto inicial: Nas próximas seções, vamos dar uma olhada em algumas maneiras diferentes de analisar dados entre nossos componentes. A seção será focada em slots. Então, na seção a seguir, vamos dar uma olhada em algo chamado Fornecer e Injetar. Para fazer isso, temos um novo projeto para começar a trabalhar. Este é um painel que você pode ver apenas aqui. Estaremos construindo isso em toda esta seção. Para começar, temos uma seção de visão geral, que vamos clicar neste menu à esquerda. Isso nos dará acesso aos nossos dados que serão separados entre nossos três componentes. Teremos o item vendido onde analisaremos os dados, o total de vendas e também filtraremos pelo item mais vendido. O próximo link é para nossas ordens. Isso vai percorrer todos os nossos pedidos e exibi-los nesta página juntamente com nossos componentes de vendas totais. Isso será reutilizado em nossa seção de visão geral. disso, também terá nossa página de best-sellers. Isto voltará a percorrer todas as nossas ordens. Em seguida, extraímos todos os produtos vendidos e, em seguida, vamos totalizá-los em ordem da quantidade vendida. Este projeto nos permitirá obter uma compreensão mais profunda de como os slots funcionam no Vue. Tal como acontece com os projetos anteriores, se você for para o repositório do GitHub. Dentro dos downloads, você tem os dados de um painel. Isso é exatamente como os projetos anteriores em que temos uma configuração mínima do Vue CLI. Praticamente a única diferença está na fonte, nós removemos os exemplos Hello World. Além disso, temos este arquivo de encomendas. JS. Esta é uma matriz de objetos e isso é apenas alguns dados de amostra, algumas ordens de exemplo para nos fazer começar a trabalhar com nossos dados. Tudo o que contém é um número de ord ou um ID de pedido. Então, temos uma série de itens que foram vendidos para este pedido. Para começar, uma vez que você tenha baixado o iniciador, arraste isso para o seu editor de texto. Em seguida, podemos executar a instalação do NPM. Vá em frente para o diretório do projeto e, em seguida, instale os módulos com instalação do NPM. Em seguida, um servidor irá executar NPM executar servir para iniciar o nosso servidor de desenvolvimento. Em seguida, abra isto no navegador. Em seguida, vamos configurar os componentes e páginas que vamos precisar para este projeto.pa 59. Componentes e páginas do projeto: Esta seção vai ser focada em algo chamado slots e também componentes dinâmicos. Para trabalhar com ambos, primeiro precisamos de algum conteúdo para trabalhar. Lembre-se, anteriormente, dissemos que os componentes podem ser colocados em qualquer lugar dentro da nossa pasta de origem. Nós não temos apenas que restringi-los a uma pasta de componentes. Com isso em mente, eu vou criar uma nova pasta, novamente dentro deste diretório fonte, e isso vai ser chamado de views. Isso também contém componentes ou.vue arquivos, mas é comum ter uma visualização ou uma pasta de páginas para organizar melhor nossos componentes que vamos usar para nossas páginas principais. Assim como estamos vendo quando demos uma olhada na versão final, as páginas que temos dentro de nosso aplicativo foi a visão geral. Tivemos a página de vendas e também os best-sellers também. Esta pasta de visualizações geralmente contém esses tipos de arquivos que vamos usar para alternar entre quatro URLs diferentes. Considerando esta estrutura de arquivo que temos na pasta de origem e, em seguida, dentro de um componentes em uma pasta views. Ambos contêm componentes de arquivo único.vue. Esta abordagem significa que podemos organizá-los para as páginas entre as quais vamos alternar sejam todas agrupadas. Aqui as três páginas que temos para casa, contato e conta também são links dentro do nosso cabeçalho. Ou seja, se clicarmos na conta, por exemplo, o arquivo account.vue será exibido. Esses componentes de página não precisam conter todo o conteúdo das páginas. Eles também podem ser divididos e conter vários componentes. Este exemplo ao lado dos componentes do usuário na página e este componente também pode ser reutilizado em quantas páginas forem necessárias. Para o nosso aplicativo onde podemos começar a configurar nossas páginas e nossos componentes reutilizáveis. Então, primeiro de tudo, na pasta de componentes, crie um novo arquivo e isso será para o nosso best-seller.vue. Além disso, também teremos os itensSold. Então lembre-se, estes são apenas os componentes únicos que vamos colocar em nossas páginas. Depois disso, o terceiro será para o SalesTotal, e finalmente, o último componente que precisamos é para a nossa Barra Lateral. Certo, feche isso. Agora, dentro de nossos vues, vamos criar nossas páginas livres, que já vimos antes. Então, o primeiro será para os best-sellers, e essas páginas ou esses vues também terão a extensão.vue, os pedidos e, em seguida, também nossa página Visão geral. Assim, os arquivos.vue dentro de nossa pasta vues e também aqueles em nossa pasta componentes não têm nenhuma diferença além do fato de que eles estão organizados em pastas diferentes. Então vamos começar adicionando algum conteúdo em nossos vues. Começando com os BestSellers, e tudo o que vamos fazer aqui dentro é adicionar nosso template e tudo isso vai conter por enquanto é um título de nível 3, um estilo de arquivo de classe de page-title, e este vai ser Best Sellers. Selecione tudo isso e copie para nossos Pedidos, coloque isso em, cole o título e, em seguida, o mesmo para a Visão geral. Depois, os nossos componentes. Só para ficar claro, o componente BestSeller será para os produtos mais vendidos número 1 e a página BestSellers será uma lista de todos os itens mais vendidos do mais alto ao mais baixo. Então, o modelo, novamente uma tag de artigo HTML, e isso terá uma classe de estatísticas. Vamos fazer uso disso na página Visão geral, então vamos ter isso como um componente à esquerda e, em seguida, temos os itensSold e, em seguida, o SalesTotal também. Agora, vamos dar a isso um título de nível 4 do item mais vendido. Selecione tudo e copie. Até ItemsSold, podemos colar isso. Tudo o que você precisa fazer é mudar este título de nível 4, os itensSold. Em seguida, o SalesTotal, que será muito semelhante também, que terá o título do total de vendas, e por enquanto, vamos deixar este assinado por vazio. Ok, bom. Agora, temos algum conteúdo no lugar. Temos nossos pontos de vista, todas as páginas, e também alguns componentes. No próximo vídeo, vamos dar uma olhada em como podemos passar dados para esses componentes usando slots. 60. Introdução aos slots: vídeos anteriores focaram na transmissão de dados entre componentes, usando adereços e emitindo eventos personalizados. Esses próximos vídeos mostrarão como os slots funcionam no Vue.js, que é uma maneira realmente flexível de transmitir dados em nossos aplicativos. Este exemplo que vimos no último vídeo incluía um componente de página, que era o account.view. Reutilizamos os componentes aninhados dentro, passamos informações para esses componentes usando adereços, assim como vemos aqui para o nome do usuário. Outra maneira de produzir nossos componentes é usar uma tag de abertura e fechamento no lugar do estilo de fechamento automático de antes. Este estilo também funciona exatamente da mesma forma. Para este estilo também agora nos deixa com a opção adicionar coisas entre nossas tags de componentes. Ele passaria em um título de nível 3, mas o que exatamente acontece com esse cabeçalho entre nossas tags? Bem, isso depende de nós. Se não fizermos nada, o conteúdo será ignorado ou podemos usar slots para usar esses dados em nossos componentes de usuário. Olhando para o nosso modelo de componentes de usuário à direita, temos um outro elemento que contém uma lista livre itens, e isso é tudo bastante padrão. Dê uma olhada acima deste nav, e temos o que é chamado de slot. Slot atua como um suporte para o conteúdo que passamos para ele entre os componentes de abertura e fechamento tags, e no nosso caso era um cabeçalho de nível 3. Este elemento slot é muito flexível e pode ser colocado em qualquer lugar dentro do modelo do nosso componente. Essa abordagem pode ajudá-lo a pensar em por que temos slots disponíveis quando podemos simplesmente passar adereços? Bem, esta é uma pergunta muito válida e que é muito compreensível, olhando para um exemplo simples como este. Mas também é muito mais para slots e muito mais casos de uso, e vamos dar uma olhada neles nos próximos vídeos. 61. Visão geral da estrutura de página: Você vê esses slots em ação dentro do nosso projeto. Primeiro precisamos de algum conteúdo para trabalhar. Atualmente, temos todas as nossas visualizações e nossos componentes configurados, mas ainda não temos nada registrado na página. Para fazer isso, vamos para o nosso app.vue. Aqui dentro temos esta div com a classe de app_wrapper. Esta classe simplesmente aponta para alguns estilos que vai definir a família da fonte e também a cor da fonte base. O que vamos fazer é adicionar alguma estrutura a este aplicativo, e também importar e registrar nossa primeira página que é o overview.view. Para fazer isso, vamos importar isso como qualquer componente normal. O nome é Visão Geral e isto é de./. Isso está em nossa pasta Views e, em seguida, o nome do componente é Visão geral. Configure nossa seção de componentes. Aqui dentro só temos um componente, por enquanto, por isso passa-o. Vemos um erro porque ainda não usamos isso, mas vamos primeiro adicionar nossa estrutura dentro do nosso app_wrapper. A primeira coisa que vamos fazer é criar uma seção de cabeçalho, e isso vai conter um título de nível um com o texto de Chris Dashboard. Esta seção de cabeçalho uma div com a classe de conteúdo, e esta seção vai conter duas seções aninhadas. A primeira é a barra lateral com links para nossas páginas gratuitas, e depois no lado direito teremos algum conteúdo, que é para cada uma dessas páginas que clicamos. Em primeiro lugar, o elemento de lado. Então, depois disso, o principal. A seção de lado por enquanto só vai conter três links diferentes. Nós não precisamos de href porque nós vamos controlá-lo usando view. O primeiro link é Visão geral. Tenho mais duas páginas, a segunda é Pedidos, e a terceira é Best Sellers. Isso é tudo para o bar de lado. Então, na seção principal, o que vamos fazer é, em primeiro lugar, passar dentro dessas pequenas tags, e dentro daqui vamos passar algumas migalhas de pão para que o usuário saiba exatamente onde eles estão em nosso site. Isso diria, algo como dashboard/visão geral. Mudaremos esta seção dependendo da página em que estamos atualmente. Para estilizar isso eu também vou cortar a seção do painel e adicionar um elemento span. Então vamos dar a isso uma cor diferente dentro do nosso CSS. Depois disso, o conteúdo da página real, e por enquanto só temos um componente para exibir. Esta é a visão geral, vamos postar alguns dados para esta visão geral muito em breve. Mas, por enquanto, vamos até as folhas de estilo. Vamos começar com nossa seção de cabeçalho. A seção de cabeçalho vai ter uma cor de fundo branco. Ele também vai fazer uso da flexbox css também. Em primeiro lugar, fundo que é uma cor branca. Em seguida, adicione uma borda na parte superior e também na parte inferior. Este será um pixel, uma linha sólida e, em seguida, a cor do ddd. Esta linha cinza do Chris na parte superior, também vamos adicionar um na parte inferior, e em breve também vamos adicionar uma linha vertical que vai separar nossa barra lateral apenas conteúdo da página. Duplicar isto. Eu também vou adicionar um na parte inferior. Após a nossa seção de cabeçalho, temos a nossa seção de conteúdo, que é a div que envolve tanto o lado como também a seção principal. Este é basicamente todo o conteúdo abaixo do nosso cabeçalho. Para estilizar isso e posicionar isso, vamos definir o tempo de exibição para ser flexível. A direção flex padrão é bruta ao usar flexbox. Agora, essas duas seções aparecerão lado a lado. Para definir a largura de cada, um, vamos usar as fontes flexbox novamente, e a seção de lado pode ter o valor flex de 1, e então a seção principal terá o valor flex de 3. Isso significa que a seção principal ocupará três vezes a largura da barra lateral, sobre a barra lateral o valor flexível de 1. Mas também muito em pensionista, mas desta vez isso vai ser vertical. Então precisamos colocar esta borda à direita, e essa é a nossa linha ali, e precisamos ter certeza de que esta linha é a altura total da página. O que vamos fazer para esta seção é definir a altura mínima ser 100 por cento da viewport. Esta linha agora vai até o fundo. Agora, para a nossa seção principal do à direita, tem o invólucro principal. O valor flexível de 3, então isso leva cerca de três vezes o espaço disponível da barra lateral e, em seguida, um valor de preenchimento de 1ram. A última coisa a fazer nesta seção é também mudar a cor de nossas migalhas de pão. Então, agora vamos cercar o painel com esta classe de azul. Agora podemos usar isso para definir a cor. A cor do texto terá um valor RGB de 25, 149 e 243. Nós também podemos espaço para fora dentro desta pasta /2 de HTML tudo o que precisamos fazer é adicionar um espaço pouco antes e depois e lá vamos nós. Isso agora nos dá uma base para começar a explorar nossos slots no próximo vídeo. 62. Slots, na prática: Nos slides um pouco mais cedo, descobrimos que podemos passar dados para um componente filho, passando-os entre os componentes, abrindo e fechando tags. Este método é chamado de slots, e agora vamos configurar algum conteúdo de slot. A página que atualmente definimos dentro daqui é esta visão geral que registramos no app.vue. Esta página agora exibirá nossos três componentes do best-seller, o item vendido, e também o total de vendas também. Assim como aqui na versão final. Embora isso, primeiro precisamos registrá-los dentro de nosso arquivo overview.vue. Vamos entrar aqui e para fazer isso vamos criar nossa seção de script, em seguida, registrar nossos três componentes. A primeira importação será para itens vendidos. Isto vai ser a partir do local que é.. /componentes e, em seguida, para os itens vendidos componentes, que são alterados. Além disso, podemos substituir isso com o símbolo @, e este é um atalho para a pasta de origem. Precisamos duplicar isso mais duas vezes. O segundo é para o total de vendas, altere o caminho do arquivo. O terceiro é o best-seller. Descendo para exportação. A primeira coisa é criar um nome para este componente, e o meu vai ser a visão geral. Em seguida, registre nossos três componentes para que possamos usá-los dentro do nosso modelo. Temos itens vendidos, o total de vendas, e também o best-seller. Para exibi-las, criaremos uma nova seção logo abaixo do nosso título. Esta seção vai então exibir nossos três componentes e, em seguida, vamos aninhar entre o nosso conteúdo de slot. O primeiro é itens vendidos e também fecha. O segundo é para o total de vendas, e depois o best-seller. Salve isso e veremos os títulos de todos os três componentes, que começarão dentro de nosso título de nível 4. Agora, vamos passar nosso conteúdo de slot entre cada um desses elementos. Assim como vemos na versão final, temos os itens vendidos, o total de vendas, e também o item mais vendido, mas agora isso vai ser apenas alguns dados estáticos. Mas muito em breve, vamos pegar todos esses valores que estão contidos em nosso arquivo orders.js. Voltando à nossa visão geral e entre os itens vendidos elementos, vamos passar nossos dados de slot. Isso pode ser qualquer coisa como texto normal. Podemos passá-lo em elementos HTML e também visualizar dados js entre chaves duplas também. Eu só estou indo para a saída do span, e o span também vai ter uma classe. Então podemos aplicar algum estilo, muitas vezes texto leve, colocar em qualquer valor dentro daqui e copiar isso. O próximo é para o nosso total de vendas, coloque em qualquer símbolo de moeda e também qualquer valor monetário também. Finalmente, o best-seller. Qualquer produto por agora é bom, eu vou colocar no moletom Vue em tamanho médio. Salve isso, e no momento não vemos nada dentro do navegador. Isso ocorre porque primeiro precisamos dizer ao Vue.js exatamente onde queremos que esse conteúdo apareça em nossos componentes. Isto é muito fácil de fazer. Tudo o que precisamos fazer é ir para os nossos componentes e, em seguida, adicionar os elementos do slot. Esta é basicamente uma perspectiva para o conteúdo que passamos por este componente. Podemos ir a qualquer lugar aqui dentro. Mas eu vou colocar isso abaixo do nível 4 título, o mesmo para o total de vendas, como em nosso slot. Vemos os valores que aparecem abaixo de cada um de nossos títulos, um best-seller. Outros slots aqui também, e isso agora aparece na página. Bom. Agora vamos adicionar um pouco de estilo na página de visão geral. No início, lembre-se, todas essas três seções foram cercadas dentro deste invólucro de seção. Vamos fazer estes percorrer a página, assim como vemos aqui, vamos direcionar esta seção e definir o tipo de exibição para ser flexível. Para fazer isso, precisamos de uma seção de estilo. Isso também pode ter escopo, portanto, só se aplica a este componente. [ inaudível] e defina a tela para ser flexível. Alguns espaçamento, podemos também tirar proveito de conteúdo justificado e distribuir todo o espaço disponível para ser entre esses três elementos. Também coloque uma borda em torno de todas essas três seções, adicione um alvo, esses cabeçalhos individuais e conteúdo do slot. Agora vamos para o app.vue. Esta seção de estilo não tem escopo, portanto, todos esses estilos serão aplicados a quaisquer componentes, incluindo todas essas três seções. Comece nosso título de nível 4, que é o título para todos os três componentes. Nós removeremos qualquer margem padrão definindo isso como zero e, em seguida, adicionaremos algum preenchimento na parte inferior deste título para nos dar mais espaçamento do conteúdo do slot. Este conteúdo slot também tinha uma classe. Se formos para a página de visão geral e até os modelos, isso teve a classe de texto leve. Vamos pegar isso. Tudo o que vamos fazer nesta seção é reduzir o peso da fonte para um valor de 300. Para aplicar a borda em torno de cada um desses itens, se entrarmos no componente, cada um desses artigos tem a classe de estatísticas. Aqui dentro, vamos definir a borda para ser o peso de um pixel, uma linha sólida, e uma cor cinza claro, que é ddd. O raio da borda de cinco pixels. Em seguida, algum espaço interno com o valor de preenchimento, que será um 1rem. Bom. Vamos ter nossos componentes agora estilizados. Só para trabalhar com esta seção de cabeçalho, vou reduzir para baixo o título de nível 1. Isso é um pouco grande demais, então vamos marcar o cabeçalho H1 e, em seguida, reduzir o tamanho da fonte. Vamos tentar 1.4 rems, e isso parece melhor. Eu também posso brincar com a font-family também, eu vou remover isso e mudá-lo para ser Avenir, mas você também pode alterá-lo para se adequar ao seu estilo. É assim que podemos usar slots em um nível muito básico. No próximo vídeo, vamos dar uma olhada no escopo dos slots, e também como passar dados dinâmicos. 63. Passando dados dinâmicos e escopo: No último vídeo, olhamos para a passagem de dados como slot na forma de um elemento HTML. Isso pode ser tudo o que quisermos, incluindo um texto simples e também conteúdo dinâmico. Essas três seções que temos aqui de itens vendidos, total de vendas e best-seller incluirão conteúdo dinâmico como adereços do app.vue pai. Agora, no app.vue, vamos agora configurar nossos adereços gratuitos no componente de visão geral. O primeiro adereço será a quantidade de itens vendidos, que é igual a 32. Isso, novamente, pode ser qualquer valor. Ainda não importa. Ao lidar com números, também, precisamos usar v-bind. Isso é avaliado como uma expressão JavaScript em vez de um valor de string. Em seguida, o valor total de vendas. Adicione qualquer coisa aqui dentro. O terceiro vai ser para o best-seller. Isso não precisa usar v-bind uma vez que isso vai ser apenas um valor de string. Uma vez que estes são adereços, também precisamos passar para o nosso componente de visão geral e registrá-los em nosso script. Nós também podemos adicionar alguma validação simples. Então vamos configurar isso como um objeto. O primeiro é o valor total de vendas, e o tipo é o número. O segundo é a quantidade de itens vendidos. Isso também terá o tipo de número também. O terceiro é para o best-seller. Este tem o tipo de string. Estes três adereços agora podem substituir o conteúdo que passamos para o nosso slot. O primeiro, remova o primeiro valor de sete, e podemos substituir isso dentro das chaves duplas com nosso adereço, que era a quantidade de itens vendidos. O próximo, ainda podemos deixar no símbolo da moeda, mas substituir o valor pelo prop, que era o valor total das vendas. O terceiro, para o nosso best-seller, e este está faltando, então vamos dar uma olhada. Isto só quer ser um “B “minúsculo, e lá vamos nós. Tudo isso funciona agora com nossos dados dinâmicos. Como você pode ver, slots não se importam se os dados são texto, elemento HTML, ou até mesmo conteúdo dinâmico como este. Mas ao passar dados dinâmicos, assim como estamos aqui, quais componentes têm acesso a esses dados? Dentro de nossa visão geral, por exemplo, temos essa quantidade de itens vendidos adereços. Isso está dentro de nosso componente de visão geral, mas também é renderizado dentro de nossos itens vendidos componente também. Qual destes dois componentes tem acesso a ele? Bem, você já deve ter adivinhado que, uma vez que estamos usando isso dentro de nosso arquivo de visão geral, esse arquivo tem acesso total a esses dados. Isto está correcto. Mas e o componente filho, que são itens vendidos, onde esses dados estão sendo processados dentro do? Bem, vamos pegar isso e dar uma olhada no item vendido componente. Em seguida, podemos tentar produzir isso dentro das chaves duplas. Não vemos nenhum dado exibido agora, então isso não funciona. Mas que tal isso estar disponível como um adereço? Bem, nós poderíamos tentar isso também. Podíamos colocar no guião. Podemos ver que temos acesso a isto através de adereços. Este, ainda não temos acesso a esses dados. Isso agora significa que o componente filho real, que está exibindo o conteúdo, só é responsável por apresentar isso dentro do navegador. Ele não tem acesso às nossas variáveis. Eles só estão disponíveis no escopo do pai. Se quisermos acessar esses dados dentro de ambos os componentes, há uma maneira de fazer isso, e isso é pelo que é chamado de slot com escopo. Vamos dar uma olhada nestes muito em breve. 64. Conteúdo de fallback: Aqui, temos este slot sobrevive ao conteúdo que foram passados para baixo, mas e se adicionarmos algo entre essas duas tags também? Bem, fazemos isso se quisermos fornecer algum conteúdo de fallback para mostrar se nada é passado para o slot. Talvez possamos adicionar uma mensagem que não tenha dados disponíveis. Para o navegador, não vemos esta mensagem ainda, mas se formos para os pais, que é a visão geral, e então ele remove temporariamente os elementos de extensão que passamos para o item vendido. Isso agora é substituído por esta mensagem de não haver dados disponíveis. Isso é usado para qualquer conteúdo de fallback se não fornecermos dados de slot para nossos componentes filho, eu quero desfazer isso e salvar esse arquivo, mas isso é útil para várias situações. Por exemplo, podemos nem sempre ter alguns dados de slot para passar para os componentes filho, especialmente se estamos reutilizando os componentes várias vezes ou pode haver um atraso na geração dos dados do slot, portanto, se esses dados que colocamos dentro de um ele foi talvez buscar de um banco de dados ou uma API. Enquanto estamos aguardando que esses dados voltem, podemos querer exibir algum girador de carregamento ou uma mensagem de espaço reservado. Além disso, se estamos usando um componente, digamos cinco vezes em nosso projeto, se os dados forem os mesmos para quatro deles, poderíamos fazer uso do conteúdo de fallback para fornecer o padrão para esses quatro componentes. Em seguida, ele mudou os quinto componentes passando dados de slot. Isso é muito simples, mas muito útil também. Em seguida, manteremos slots subjetivos e descobriremos como colocar vários slots em nossos componentes. 65. Slots nomeados: Aqui em nossa página de visão geral à esquerda, dentro de cada um desses três componentes, atualmente estamos passando apenas um único elemento. Isso é completamente bom, mas para situações mais complexas, passar muito mais conteúdo em um único slot pode não ser ideal. Para este caso de uso, temos o que é chamado slot de nome. Essa é uma maneira de distribuir esse conteúdo de slot em diferentes locais nos componentes filho. Poderíamos ter várias linhas de códigos e colocá-los em nossos componentes em diferentes locais. O primeiro passo para fazer isso é basicamente agrupar nosso conteúdo dentro do elemento template. Para isso, vamos criar nosso primeiro modelo. Isso vai passar um ícone para todos esses três componentes filhos. Teremos nosso primeiro modelo e também adicionaremos um segundo grupo dentro do modelo 2. O que vamos fazer aqui dentro do segundo modelo, é pegar nossos elementos de span originais e mover isso para a segunda seção. A primeira seção que vamos adicionar em nosso ícone, e isso também será um elemento span. A entidade HTML para este ícone vai ser o e comercial, o hash e, em seguida, 128200 seguido por este ponto e vírgula. Uma vez que estes serão slots de nome, precisamos dar a cada um desses modelos um nome exclusivo. Podemos fazer isso com ranhura v. V ranhura também é uma directiva. Vou chamar o primeiro de ícone. Em seguida, para baixo para o segundo modelo, novamente adicionando slot v. Este vai ser para a quantidade. Então eu vou salvar isso, e nós estamos entre as seções de itens vendidos, então, se vamos passar para esses componentes, agora precisamos fornecer nossos dois locais onde queremos que eles sejam exibidos. Para começar, o ícone está indo para um lugar ao lado do nosso nível 4 cabeça dentro. Adicionando o nosso slot e, em seguida, descobrir qual conteúdo queremos ser colocados dentro aqui, nós adicionamos os atributos de nome. Isso será para a seção de ícones e a segunda foi para a quantidade. Feche o navegador e vemos o nosso ícone e também a nossa quantidade também. Se quiséssemos também, também poderíamos omitir um desses nomes de slot, e usar isso como o padrão. Isso está deixando apenas um de nossos slots com um nome, e isso vai ser para o conteúdo padrão. A maneira como definimos isso é voltar ao nosso template, definir isso como o local padrão e ele ainda funciona exatamente da mesma maneira. Vamos agora descer e fazer o mesmo para o nosso total de vendas e para o best-seller também. Estes precisam de um modelo e podemos trazer este valor total de vendas e, em seguida, colocar o nosso ícone dentro da primeira seção. Isso também será uma extensão, se apenas se este for o e comercial, o severo 128176. Adicionar ao nosso modelo, adicionando a directiva slot v e este é para o ícone 2. O segundo colocado na directiva slot v, e este pode permanecer como o local padrão para baixo para o best-seller e isso seria exatamente o mesmo. Os modelos e vamos colocar no slot v, é elementos divertidos para o ícone real e a entidade para isso é o comercial, o hash 128293. O final são os nossos slots padrão. Vamos ter um span e também dar a este o nome, que vai ser padrão. Ok, então podemos encontrar nossas lojas e a primeira foi para o total de vendas. Neste lugar componente no slot para a localização do nosso ícone. Tem o nome do ícone. Em seguida, podemos deixar o nosso segundo slot para o local padrão. Finalmente, os adversários best-seller farão o mesmo que os dois últimos componentes. Adicionando nossos slots, colocando nosso nome de ícone e novamente, este é o conteúdo padrão 2. Bom. Podemos ver no navegador que temos todos os nossos três ícones e ainda temos o conteúdo que é passado para baixo. A última coisa a olhar é uma abreviação, que podemos colocar na nossa directiva ranhura v. Se voltarmos para a visão geral, tudo o que precisamos fazer para encurtar isso é substituir slots v com o áspero. Podemos fazer isso para o nosso ícone e também o slot padrão 2, substituir todos os seis destes. Salve nosso arquivo, e tudo ainda funciona como antes. 66. Scoped slots: Isso agora nos traz para slots com escopo. É aqui que as coisas começam a ficar um pouco mais interessantes em termos de acesso aos nossos dados. Neste arquivo overview.view, atualmente estamos passando dados dinâmicos para esses componentes filhos, ou se era o contrário e esses dados viviam dentro de nossos componentes filho, o que queríamos acessá-lo dentro deste arquivo. Bem, podemos fazer isso com slots com escopo. Anteriormente, adicionamos componentes da barra lateral, mas ainda não adicionamos nenhum componente. Então vamos passar para isso e podemos começar a trabalhar dentro de nosso sidebar.view, colocando nosso modelo, isso vai renderizar nossos links livres dentro da barra lateral, e também nos dar uma chance de olhar para slots com escopo. Colocando a navegação e lista desordenada, então podemos percorrer nossas páginas com o item da lista. Nós ainda não criamos essas páginas, mas vamos chamar essas páginas, então vamos percorrer a página em páginas, também vincular uma chave dinâmica. Esta vai ser simplesmente a página, apenas por simplicidade. Dentro daqui, coloque-o em um elemento de link, e isso é apenas indo para a saída entre as chaves duplas, nossa página. Isso é tudo o que precisamos para o modelo, então, indo para a seção de script, podemos configurar nossa propriedade de dados para todas as páginas. Pages vai ser uma matriz bastante simples, então vamos apenas começar em nossas strings livres. O primeiro foi Visão geral, temos pedidos e também Best Sellers. Isso vai ser processado e registrado em nosso app.vue. Vá para o nosso script e nós podemos primeiro importar nossos novos componentes. Esta é a barra lateral, que está disponível a partir do caminho, que é componentes de barra de ponto. Em seguida, barra lateral para frente. Registre isso dentro dos componentes, então podemos usá-lo em nosso modelo. O lugar para fazer isso vai ser dentro da seção de lado. Podemos remover nossos links gratuitos existentes e, em seguida, colocar em nossa barra lateral. Bom, agora temos nossos links gratuitos ainda mostrando, mas agora estes são de nossos componentes da barra lateral. Mas vá para nossos componentes sidebar.vue, temos esse link aqui, que são nossos dados dinâmicos, que vivem nesses componentes filhos. Como exemplo, imagine se vamos usar esta navegação várias vezes em nossa aplicação. Podemos querer que este link tenha um estilo diferente em locais diferentes ou tenha algumas opções de layout exclusivas diferentes. Como já sabemos, se fôssemos cortar isso e, em seguida, colocar entre nossa barra lateral, isso não funcionará, já que o escopo desta página está dentro dos componentes da barra lateral, não este app.vue. Se queria lidar com isso, teríamos que fazer uso de slots com escopo para nos permitir passar loop de dados de volta para seus pais. Primeiro no sidebar.vue, primeiro passamos os componentes do slot onde queremos que esses dados sejam exibidos. Queremos agora passar é página de backup variável para os pais. A maneira que podemos fazer isso é vinculando um atributos dinâmicos. Não quero manter isto consistente e chamar esta página. Esses atributos são chamados de adereços ranhura. Agora podemos acessar esses atributos dentro dos componentes pai, que é o app.vue. Primeiro, vamos envolver este link dentro de um modelo e atribuir-lhe o local padrão. Assim como vimos no último vídeo, podemos criar nossos modelos e, em seguida, usar os slots ou a abreviação, que é o hash. Em seguida, dê a este o local padrão onde podemos agora colar nosso link de volta dentro. Isso parece praticamente o mesmo que o último vídeo, mas a diferença desta vez é aqui vamos passar um valor para ranhura v. Este valor é um nome de variável, que podemos chamar qualquer coisa que você quiser. Para manter este descritivo, eu vou chamar isso de SlotProps. Agora, usando esta variável, temos acesso aos dados que tinham sido passados para cima do nosso slot. Agora teremos acesso a esta página. Agora, em vez de acessar diretamente nossa página, precisamos primeiro acessar nossos adereços de slot, depois os atributos da página. Nós vemos imediatamente que nossas páginas gratuitas agora aparecem na barra lateral, então agora estamos recebendo esses dados de nossos componentes filho. Alternativamente, em vez de acessar todos os nossos adereços nesta variável, podemos fazer uso da destruição de JavaScript. Podemos retirar qualquer uma de nossas variáveis ou qualquer um de nossos atributos, como nossa página. Agora podemos acessar isso diretamente em nosso modelo. É assim que funciona um suporte de ranhura. Você pode pensar com tudo isso, por que temos outra maneira de passar dados quando já temos todos os adereços e emite. Bem, isso é tudo sobre nos dar como desenvolvedor total flexibilidade. ranhuras com mira abrem a porta para tantas coisas diferentes. Por exemplo, se esta página tivesse autenticação de usuário e tivéssemos acesso ao nosso usuário a partir de nossos dados. Como exemplo, se tivéssemos uma propriedade de dados como esta, e se este exemplo tivesse objetos de usuário. Se você só queria mostrar certos links, se o usuário estava logado, então você precisará passar esses objetos usados para os componentes da barra lateral através de adereços. No entanto, usando slots com escopo, poderíamos fazer isso exatamente a mesma configuração e podemos verificar se o usuário está presente, colocando este v-if nestes componentes pai, podemos verificar se o usuário existe antes de renderizar qualquer um dos nossos links. Um usuário existe no momento. Se mudarmos para nulo, isso removerá nossos links gratuitos. Este é apenas um exemplo para evitar aqueles que passam adereços para os componentes filhos. Também podemos remover isso, uma vez que isso não é necessário. Além disso, outro exemplo, se quiséssemos alugar esse componente em vários locais, poderíamos duplicar o conteúdo assim e poderíamos adicionar classes diferentes a cada um de nossos itens de lista. Por exemplo, isso pode ser colocado dentro da barra lateral. Talvez queiramos que o estilo seja diferente para o cabeçalho. Isso nos dará a flexibilidade para talvez adicionar uma cor diferente links, nós também poderíamos colocar a navegação cabeçalho horizontalmente em toda a página, a barra lateral poderia ser vertical e temos total flexibilidade para fazer o que quisermos manter ambos únicos. Vamos remover isso e arredondar este vídeo adicionando um pouco de estilo aos nossos links gratuitos. [ inaudível] isso na barra lateral, crie esta seção de estilo. Primeiro de tudo, vamos para a lista desordenada. Podemos remover as balas definindo o estilo de lista como nenhum. Em seguida, ele redefine qualquer preenchimento padrão para ser zero. Em seguida, podemos adicionar algum espaço nele para esses links com o item da lista, de repente preenchendo para ser 10 pixels na parte superior e inferior, e em seguida zero na esquerda e direita. Tem algum espaçamento entre estes três elos. 67. Página de pedidos: Até agora, só temos trabalhado nesta página Visão geral. Em breve vamos fazer uso de componentes dinâmicos, alternar entre estas três páginas. Mas primeiro, vamos adicionar nosso conteúdo aos pedidos e aos best-sellers. A página Pedidos será composta por duas seções. Para a primeira seção vamos colocar no total de vendas componentes para que possamos ver o valor total de vendas. Em seguida, abaixo deste irá criar uma nova seção que irá exibir todos os nossos pedidos. Vamos até nossa página Pedidos, abrir a barra lateral, e isso está na seção Exibir. Nossa primeira seção, logo abaixo do nível três. Este vai ser um slot que irá produzir o conteúdo de nossos componentes totais de vendas. Vamos dar um nome de total. Vamos passar isso através do nosso modelo em apenas um momento. A segunda seção, vai ser o wrapper para o nosso segundo slot, e este será para a lista de pedidos. Coloque na nossa segunda vaga aqui dentro. Não precisamos dar um nome a ele, pois isso pode herdar o valor padrão. Próximo ao app.vue. Podemos primeiro começar a trabalhar nesta página de Pedidos. Vamos comentar esta visão geral, e também o registro, e depois substituí-lo por nossas importações para nossos pedidos. Este está na pasta Visualizações. Registra isso dentro da seção do componente. Em seguida, faça backup para nossos modelos, vamos comentar a seção de visão geral, e substitua isso por nossos pedidos. Estaremos passando este conteúdo do slot para que isso precise da abertura e da tag de fechamento. Temos dois locais de slot, então isso precisa de dois modelos. Estes atributos de slot, para o primeiro, para ser para o total. O segundo será para o nosso conteúdo padrão, que será nossa lista de pedidos. Esta primeira seção de modelo vai conter nossos componentes totais de vendas, assim como usamos na Visão geral. Se dermos uma olhada nesta seção, isso também contém slots para. Aqui estamos passando nosso ícone, e também o valor total de vendas. Para manter isso consistente, podemos copiar esta seção completa de componentes, em seguida, fazer uso disso sobre em nosso app.vue. Cole isto. Isso também precisará ser registrado e importado. Vamos fazer isso agora. Importe nosso total de vendas, barra de pontos, e isso está nos Componentes. Então pegamos nosso total de vendas. Então, finalmente, registre este componente. Digamos que há mais alguém aqui dentro de sua página de pedidos, agora terá o componente exibindo. Podemos ver o ícone, mas ainda não passamos nosso conteúdo dinâmico, que é o valor total de vendas. Vamos fazer isso agora, se voltarmos aos nossos modelos dentro do app.vue. Anteriormente, quando criamos a página Visão geral, passamos esse valor total de vendas como um prop. Estes eram apenas alguns dados fictícios, mas agora vamos pegar nossos dados reais, que são fornecidos com este projeto. Para pegar isso dentro da barra lateral, dê uma olhada no arquivo Orders.js. Agora podemos importar isso, e percorrer todos os nossos pedidos para extrair todos os dados que precisamos passar para baixo para estes componentes. Faça uso disso, precisamos primeiro importar este arquivo, para que possamos usá-lo dentro do nosso JavaScript. Podemos importar nossos pedidos do nosso arquivo de pedidos. Esta é uma importação nomeada dentro dessas chaves. Isso nos permitirá importar um único membro do nosso arquivo de pedidos. Um único membro que queremos importar é essa variável de ordens. Podemos importar isso porque exportamos isso como uma constante. Se o arquivo de pedidos tivesse outras exportações, também poderíamos importá-las individualmente aqui dentro para, mas só temos este único pedido. Então o que precisamos fazer é rolar para baixo e criar nossa seção de dados, para que possamos fazer uso disso em vista JS. Coloque nos pedidos que acabamos de importar. Agora, temos acesso a isso dentro do nosso modelo. Para produzir estes corretamente dentro do nosso modelo, primeiro precisamos fazer dois loops. O primeiro loop vai percorrer cada uma das nossas ordens e , em seguida, para cada ordem, precisamos percorrer todos os itens dentro desta ordem. Vamos fazer isso agora, no app.vue, role para cima. Dentro desta seção de pedido, procure este segundo modelo padrão. É aqui dentro onde vamos criar esses dois loops. Primeiro, uma div wrapper que terá a classe de ordem, sublinhado, wrapper. Em seguida, dentro deste invólucro, uma segunda div que vai cercar cada uma de nossas ordens. Para percorrer essas ordens, vamos percorrer todas as propriedades de dados de pedidos. Isso também precisará de uma chave dinâmica que podemos pegar do id exclusivo, que está disponível para cada um desses pedidos. Podemos acessar isso com order.id. Agora, para estruturar esses, vamos adicionar algum texto no topo, e isso vai exibir o número do pedido. Sabemos que já temos acesso a este número de pedido com order.id. Podemos colocar isso dentro das chaves duplas e, em seguida, explodir cada um desses números de ordem. Crie uma lista não ordenada, que analisaremos cada um dos nossos itens vendidos. O invólucro. Em seguida, usaremos o item da lista para criar um loop v-for para cada um dos nossos itens. Podemos começar cada um destes na variável que é item, em order.items. Encontrar uma chave dinâmica. Agora, precisamos ter cuidado com a chave para cada um desses. Se dermos uma olhada em cada um de nossos pedidos, lembre-se que a matriz de itens contém o mesmo produto em qualquer um dos pedidos. Portanto, poderíamos fazer uso de IDs duplicados. Agora, se estivermos usando um banco de dados, poderíamos gerar um id exclusivo. Mas para fins de demonstração, já que não estamos usando um banco de dados, e não temos acesso a um ID exclusivo. também para acessar o número do índice e combinar isso com o item. Logo após o item, pegue o índice. Coloca isto como a chave. Se este era um local de produção real, isso é provavelmente algo a evitar. Você deve realmente tentar gerar um id exclusivo para cada um desses produtos. Para fins de demonstração, isso será ótimo. Dentro daqui irá criar um elemento P que está indo para a saída do item.name. Então também podemos produzir o preço do item, logo depois com item.price. Dê uma atualização, agora você verá uma lista de todos os nossos pedidos, e estes agora estão formatados como uma lista não ordenada. Terminamos isso no nosso arquivo Orders.vue, onde podemos adicionar um pouco de CSS. Primeiro de tudo, a lista não ordenada [inaudível] marcadores com estilo de lista, permite definir isso como não. O estilo de fonte de itálico. Em seguida, o invólucro para cada uma das nossas ordens, que é difícil na classe de ordem. Estou preenchendo para dar a isso algum espaçamento de 10 pixels. Além disso, para dar a isso algum espaçamento na parte superior e inferior, podemos adicionar alguma margem de 10 pixels na parte superior e inferior, e então zero na esquerda e na direita. Um pensionista para cada um de nossos pedidos de um pixel. Uma linha sólida. Eu vou para um valor cinza de DDD, limite de raio de cinco pixels. Salve isso e atualize o navegador. Agora, temos todas as nossas ordens no lugar. 68. Página de mais vendidos: Em seguida, temos nossa página de best sellers, na qual vamos trabalhar, e isso está dentro da pasta views. Atualmente só temos esse título de nível 3, mas o que vamos fazer agora é criar uma tabela com todos os nossos dados, que vamos obter do nosso arquivo orders.js. Para conseguir isso, vamos criar dois loops. O primeiro loop vai percorrer todo o nosso array de ordens, e isso nos dará cada uma dessas ordens. Em seguida, nosso segundo loop dentro irá então percorrer todos esses itens, e então nós vamos pegar cada um desses itens e empurrar para um novo array. Esta é a aparência do nosso novo array, vamos extrair todos os produtos de nossos pedidos e, em seguida, empurrá-los para este novo array. Além do ID, do nome e do preço, também adicionaremos um campo de quantidade. Isso nos evitará ter muitos produtos duplicados. Em vez disso, quando nos depararmos com um produto dentro do nosso loop, que já está dentro deste array, aumentaremos o campo de quantidade em um. Este é o primeiro passo, e o segundo passo depois de fazer isso é então reordenar esta matriz com a quantidade mais alta para a mais baixa. Vamos passar para o app.vue e vamos criar isso como uma propriedade computada logo abaixo dos dados, configurar isso, e o nome computado de SortedItems. O primeiro passo é criar nosso novo array chamado SortedItems, e vamos inicialmente definir isso para ser um array vazio. O próximo passo é criar o nosso primeiro ciclo, que irá percorrer todas as nossas ordens. Temos isso armazenado acima nas propriedades de estado, para que possamos acessar this.orders e, em seguida, mapear através de todas essas ordens, aumentando uma função de retorno de chamada. Cada item neste pedido, vamos armazenar isso dentro da variável chamada ordem. Como acabamos de mencionar, vamos pegar nosso pedido e, em seguida, vamos criar um segundo loop dentro, que vai percorrer todos os itens. Vamos mapear sobre estes e, em seguida, executar uma função em cada um desses itens. Além disso, antes de ir mais longe, lembre-se propriedades computadas sempre precisará retornar um valor. Então vamos retornar nossa nova matriz, que é itens classificados. Certifica-te de que isto está fora dos nossos laços. Vamos retornar esse valor. Backup dentro deste loop é onde vamos empurrar cada um desses itens para este novo array, mas pouco antes de fazer isso, primeiro precisamos verificar se este item já está dentro deste array para evitar qualquer duplicados, e a maneira de fazer isso é acessar nosso novo array, que é itens classificados. Podemos chamar o método de busca JavaScript. Isto irá executar uma função para cada item dentro da nossa matriz, armazenando cada item dentro desta variável, que eu vou chamar item classificado. Esta função será responsável por verificar se o item.id classificado é igual ao id do item deste loop atual. Se o id do item atual que possuímos corresponde a qualquer um dos IDs que estão dentro desta matriz, isso irá então retornar o item atual. Vamos então armazenar isso dentro de uma constante chamada item existe. Em seguida, podemos criar uma instrução if logo abaixo dele para verificar se o item existe é verdadeiro. Se for verdade, temos um item duplicado e tudo o que queremos fazer é acessar este item, que é item existe, e, em seguida, selecionar o campo de quantidade, incrementando isso por um e, em seguida, podemos retornar fora desta instrução. Se este item não existir, isso significa que esta é a primeira vez que este novo item será enviado para a nossa matriz. Então o que vamos fazer é criar um novo objeto chamado novo item. Isso será igual ao nosso item que possuímos, e também adicionaremos no campo de quantidade também. A quantidade será um valor inicial de um e, em seguida, usando o operador de propagação JavaScript, também passaremos o valor do item também. Agora temos este novo item e a última coisa a fazer é empurrar isso para este array. Logo após o nosso objeto, pegue nossa matriz de itens classificados e, em seguida, acesse o método push JavaScript, que irá empurrar nosso novo item. Vamos testar isso. Podemos acessar nossos itens classificados propriedade computada dentro das chaves duplas, então apenas em qualquer lugar em nosso modelo. Lá vamos nós. Agora, em vez de termos cada um dos nossos produtos listados individualmente, aumentamos a quantidade. Primeiro, temos itens cúbicos. Temos camisetas grátis, duas de nossas pequenas camisas personalizadas, quatro, os moletons, e depois um dos chapéus. Agora isso está funcionando. A etapa final é reorganizar os itens dentro deste array pela maior quantidade vendida. Atualmente temos a quantidade livre. Então temos dois, temos quatro, e depois temos um, então isso não está em ordem. Podemos reorganizar estes pouco antes de retorná-los de nossa seção computada. Logo acima da instrução return, acessar os itens classificados e, em seguida, podemos usar o método de classificação JavaScript. O método de classificação JavaScript irá percorrer todos os nossos itens classificados e, em seguida, executar uma função de comparação. Esta função de comparação levará em duas variáveis com o nome de nossa escolha. Eu só vou chamar isso de A e B para mantê-lo simples, e estes são os dois itens atuais que estão sendo comparados. Mas eu vou verificar se a propriedade de quantidade no item A é maior do que a quantidade no item B. Usando o operador ternário, vamos então definir a posição de índice, se isso for verdade, para ser negativa, se isso for falso, então será positivo. Lembre-se, ao lidar com arrays, um número de índice mais baixo aparecerá primeiro em nosso array, então definir este como negativo irá empurrá-lo para cima no array. Podemos ver imediatamente no navegador que a quantidade de quatro é colocada em primeiro lugar, temos a quantidade de três, e finalmente, nosso chapéu vue que é a quantidade de um. Agora temos todos os dados que precisamos, agora podemos importar a página mais vendidos dentro deste app.vue. Nós também vamos registrar isso e exibir isso dentro do modelo. Vamos duplicar isto, e este é para os nossos best-sellers. Adicione isso aos nossos componentes, mas vou comentar nossos componentes de auditoria e também a seção mais antiga do nosso modelo. Pegue isso até a etiqueta de fechamento, comente isso, e agora podemos colocar dentro de nosso template nossos best-sellers. Isso é apenas pela nossa simplicidade, que possamos nos concentrar em um componente de cada vez. Vemos um erro aqui dentro que o componente total de vendas não está sendo usado, então também podemos comentar isso. Também o registro, mesmo isso com a nossa página de best-sellers. [ inaudível] topo, vamos remover esta seção computada, e então configurar nossa mesa dentro dos best-sellers. Colocando isso dentro da tag de abertura e fechamento, então isso será passado como conteúdo de slot. Em primeiro lugar, vamos configurar nossa seção de tabela externa, o cabeçalho da tabela para nossos títulos e, em seguida, nossa primeira linha de tabela. Dentro desta linha, vamos colocar em nosso primeiro pedaço de dados dentro do cabeçalho da tabela, e isso é para a quantidade vendida. O próximo título da tabela é para o nome do produto, o terceiro para o ID do produto e, finalmente, o preço do produto. Após a seção da cabeça temos o corpo da tabela, e é dentro desta seção do corpo da tabela vamos fornecer todos os dados da nossa seção computada. Para fazer isso, vamos criar uma nova linha da tabela, e precisamos repetir isso para cada item dentro desta seção computada. [ inaudível] Para Loop. Podemos adicionar em nosso item em itens classificados. Então nós poderíamos acessar o item completo como este ou nós também poderíamos usar a estrutura e para retirar o id, a quantidade, o nome, e também o preço. Também precisamos vincular uma chave dinâmica, e a chave dinâmica para isso pode ser a ID do produto. Essas quatro variáveis agora podem ser produzidas como dados de tabela. Dentro da linha, os dados da tabela para o primeiro são para a quantidade, e nós teremos o nome, o ID e, em seguida, o preço. Estes são todos os dados de slot que agora precisamos passar, então para a nossa página de best-sellers nas exibições, e vamos mostrar isso como um slot. Lá estamos nós. Há um cabeçalho de tabela de palavras e também nossos dados de tabela, e agora esses itens estão listados da maior para a menor quantidade. Apenas para terminar esta página, vá para o nosso componente best-sellers onde podemos configurar alguns estilos básicos para esta tabela. Primeiro de tudo, o wrapper de tabela, a borda de um pixel, uma linha sólida e a cor do DDD. Alinhe o texto com o centro alinhado de texto. O raio da borda de cinco pixels. Em seguida, nós também vamos dar isso algum espaço em com alguns valores de preenchimento dentro dos cabeçalhos da tabela e também os dados da tabela também. Isso agora espaça todos os nossos dados dentro da nossa tabela. Esta é agora a nossa página de best-sellers concluída. No próximo vídeo, vamos dar uma olhada em como podemos alternar entre essas três páginas usando componentes dinâmicos. 69. Componentes dinâmicos: Ao trabalhar em nossas três páginas até agora, temos comentado cada uma delas e, em seguida, adicionando uma nova para trabalhar. Aplicativos grandes geralmente alternam entre páginas usando um roteador. Farei isso para nosso projeto final de trabalho. Para este caso simples, vamos configurar componentes dinâmicos para lidar com isso, abrir o Vue. Vamos comentar nosso componente final, que são os best-sellers, e depois substituí-lo pelos elementos componentes. Para declarar qual página ou quais componentes vamos exibir neste local do componente, podemos vincular a propriedade is e definir isso igual a uma propriedade date chamada selectedPage. Vou chamá-lo do que quiser, desde que corresponda a uma propriedade de data que vamos criar agora. Neste fim, podemos inicialmente definir isso para a nossa primeira página, que é a visão geral. A página selecionada será atualizada quando clicarmos em qualquer um dos links da barra lateral. Uma coisa a saber ao usar os componentes dinâmicos é Vue não sabe qual componente vamos usar, por isso não vai lançar um erro se tivermos quaisquer importações, que não estamos usando. Como podemos ver aqui, ainda temos a importação, os best-sellers. No momento, não estamos usando isso no modelo. Para disponibilizar todos esses componentes, vamos descomentar a visão geral, os pedidos, e também o total de vendas, e o mesmo quando registramos nossos componentes também. Uma vez que definimos a SelectedPage, a visão geral, agora vemos isso dentro do navegador. Agora, atualizar esta página podemos listar agora para um clique em qualquer um desses links da barra lateral, até a seção da barra lateral e dentro do nosso link, lista agora para um clique em qualquer uma dessas três páginas, vamos definir a página selecionada para ser igual a a página que é armazenada dentro desta variável apenas aqui. Podemos ter o mesmo lado dos ticks traseiros como uma string template. Vamos dar isso no navegador. Refresque. Como você pode ver, a visão geral está funcionando bem, mas não temos nenhum dos dados passados ainda. As ordens, novamente, nós apenas vemos o título porque nós não passamos quaisquer dados dinâmicos ainda. Os best-sellers, não vemos nada quando clicamos nesta página. Vamos entrar nas ferramentas do desenvolvedor e ver o que está acontecendo. No console, ele diz que o nome da tag fornecido pelos best-sellers não é um nome válido. Lembre-se, estamos tentando carregar qualquer um de nossos componentes com base no nome desta página. Tente pausar e tomar um momento para pensar sobre o que pode estar causando esse erro. Se você ainda não descobriu, a resposta é o espaço entre essas duas palavras. Estamos tentando vincular a uma página, o que é melhor, e um espaço, e depois vendedores. Mas se olharmos para o nome da nossa página, isso não tem espaço no meio. A correção é, precisamos remover qualquer espaço em branco ao chamar esses componentes. Podemos definir isso será dentro de nossos componentes dinâmicos. Uma maneira de fazer isso é usando um método de substituição de string JavaScript. Isso levará a nossa cadeia de existência que é SelectedPage. Podemos então modificá-lo para remover qualquer espaço em branco e, em seguida, retornar um novo. Chame o método de substituição. Em seguida, podemos colocar em uma expressão regular JavaScript entre essas duas barras. Quando expressões regulares, a maneira como podemos combinar qualquer espaço em branco é usando a barra invertida e o S, separados por uma vírgula, vamos então substituir este espaço em branco por uma string vazia contendo nenhum espaço. Vamos guardar isto e experimentar isto. A visão geral, os pedidos, e quando também a página de best-sellers está aparecendo também. Ótima. Agora podemos trocar de páginas, mas falta muito do conteúdo. Isso ocorre porque não passamos qualquer adereços ou conteúdo de slot para essas três páginas. Componentes dinâmicos também podem aceitar adereços e conteúdo de slot se quisermos. Mas lembre-se, cada componente tem dados diferentes. Para adereços, precisaríamos passar todos os adereços que talvez precisemos dentro deste único componente. Além disso, se passar um conteúdo de slot, também é difícil, uma vez que cada componente tem dados diferentes. Embora na próxima seção, vamos resolver esses problemas usando uma técnica chamada fornecer e injetar. 70. Introdução: provide/inject: Ao trabalhar com Vue.js e passar dados, precisamos passar adereços para cada componente. Se temos um componente filho que é talvez dois ou mais níveis de profundidade, precisamos passar todos os adereços de nosso pai e, em seguida, para baixo para cada um dos componentes principais no caminho. Isso é realmente útil para manter o controle de nossos dados, mas nem sempre é ideal. Este Vue.js nos tem coberto com uma técnica chamada fornecer e injetar, e vamos dar uma olhada nisso durante esta seção. 71. O que significa provide/inject?: Ao trabalhar em um mundo ideal, nossos dados ou nosso estado não terão que viajar muito longe, como tem este aplicativo aqui que se comunica com os componentes cal. Isto é bastante simples. Temos muitas opções que analisamos no passado, como passar dados como adereços e emiti-los de volta com eventos personalizados. Também a opção de usar os slots também, mesmo este aplicativo muito simples está começando a obter componentes aninhados mais fundo do que um nível. Esta aplicação JS vista alterna entre três páginas e nossa página de visão geral foi aninhada dentro de nossos componentes filho gratuitos. Se nossos dados estavam no app.vue principal, poderíamos usar adereços para passá-los para todas as nossas páginas. Então nós também poderíamos continuar passando para baixo os adereços dos componentes aninhados dentro, e esta cadeia pode continuar indo para tantos níveis profundos quanto precisamos. Isso, no entanto, causa um monte de código extra. Precisaremos registrá-los como cada componente, validar esses adereços e, em seguida, passá-los para o próximo filho como um atributo. Para passá-los de volta, usamos eventos personalizados. Novamente, isso é realmente bom para aplicações simples, mas para muitos níveis profundos, pode se tornar uma dor. Seria muito mais conveniente se pudéssemos ignorar tudo isso e fornecer os dados diretamente em qualquer componente filho. Vue tem uma biblioteca de gerenciamento de estado disponível como um módulo separado chamado Vuex, que é realmente bom e também mantido pela equipe do núcleo vue.js. Isso fornece um armazenamento de dados central, mas também vem com o custo da necessidade de instalar e configurar um novo pacote. É razoavelmente fácil de aprender e também de usar, mas é algo extra que não precisamos nesta fase. Além disso, provavelmente melhor usado em aplicações de maior escala. Alternativamente, o Vue também tem um recurso embutido chamado fornecer e injetar. O conceito é, temos um provedor que é usado para fornecer dados para o resto da nossa aplicação e isso é colocado em qualquer componente pai. Em seguida, qualquer componente filho abaixo em qualquer nível pode ser injetado com esses dados. Não só isso, mas um pouco como quando emitimos eventos personalizados de volta na cadeia. Nós também pode mudar o estado no pai por métodos de disparo. Isto é fornecer e injetar, que agora vamos dar uma olhada durante esta seção. 72. Configurando um provedor: Vamos agora dar uma olhada em como podemos configurar um provedor. Neste arquivo App.vue, temos esse componente dinâmico que configuramos recentemente, e isso será responsável por renderizar uma de nossas páginas gratuitas, e cada uma dessas páginas requer dados diferentes. Em vez de passar todos os adereços para cobrir todas essas situações, podemos, em vez disso, usar fornecer e injetar, colocar os dados corretos diretamente em nossos componentes do gráfico. Primeiro, vamos começar com a nossa página de visão geral, que é a nossa top, apenas aqui. Aqui dentro, isso é renderizar nossos componentes gratuitos, temos os itens vendidos, o total de vendas e o best-seller. Lembre-se que isso está usando slots e estamos usando esses dados que são passados como adereços, então em vez disso, o que vamos fazer é mover esses dados diretamente sobre os componentes e, em seguida, vamos acessar os dados que precisamos usando fornecer e injetar . Vamos começar com este item vendido. Pegamos o conteúdo do slot entre o modelo, bem como ir para o ícone e, em seguida, para os itens vendidos componentes, podemos substituir o nosso slot, onde isso é saída. Na visão geral, temos a segunda parte do conteúdo do slot, que é para o padrão, e, em seguida, substituir nosso segundo slot. Agora podemos limpar este componente de itens vendidos, e temos nossos modelos e, em seguida, podemos fazer o mesmo para o total de vendas, sem o ícone, lugares no slot ícone, e, em seguida, mesmo para o nosso valor total de vendas, colar isso em nosso slot padrão e dos componentes, e exatamente o mesmo para o nosso terceiro componente também, o ícone para o best-seller [inaudível] e também o conteúdo também. Em seguida, limpe nosso componente best-seller. Agora, isso nos deixa com nossos componentes de gráfico livre com dados dinâmicos, que agora precisamos passar para baixo. Isso podemos adicionar um provedor em qualquer um dos componentes paren e ainda não vai passar para o arquivo App.vue e, em seguida, para a seção de script. A opção de fornecer é bastante simples. Tudo o que precisamos fazer é fornecer um objeto. Este é outro lugar onde podemos fornecer quaisquer dados que você deseja estar disponíveis em qualquer um dos componentes do gráfico. Já sabemos quais dados precisamos. Precisamos da quantidade de itens vendidos, precisamos do valor total de vendas, e também do best-seller também. Vamos preparar estes. Em primeiro lugar, a quantidade de itens vendidos. Podemos colocar em qualquer valor dentro daqui por enquanto e muito em breve obteremos esse valor usando nosso arquivo de pedidos. Em seguida, precisamos do valor total de vendas. Isso vai ser qualquer valor novamente, e o terceiro para o best-seller, que é uma corda, você quer ir para o hoodie Vue em média, e este é o nosso dado fornecido. Em seguida, veremos como podemos acessar esses dados em nossos componentes de gráfico. 73. Injetando dados: Dentro do nosso arquivo app.vue, agora temos este objeto fornecer que irá fornecer todos os dados dentro de qualquer um dos componentes filho. Esses dados não são herdados automaticamente nos componentes filho. Em vez disso, o que precisamos fazer é entrar em qualquer componente, onde queremos usá-lo e adicionar uma matriz injetora com as propriedades que queremos aceitar. Vamos começar nos itens vendidos, onde precisamos dessa quantidade de itens vendidos valor. Podemos começar a ter um roteiro, como quando aceitamos qualquer adereço. Aqui dentro, vamos configurar um array chamado injetar. Então podemos passar o valor que precisamos, que é a quantidade de itens vendidos. Se salvarmos isso, veremos que o valor foi atualizado dentro do navegador. Isso funciona porque ambos os nomes corresponderão. Vamos pegar a seção de script, e vamos colocar isso também no total de vendas. Isso também precisa do valor total de vendas que é passado para baixo. Salve isso, e isso aparecerá agora. Então, finalmente, o best-seller. Lá vamos nós. Mas, como já sabemos, isso é apenas dados estáticos atualmente, mas deve ser dinâmico e baseado em nosso arquivo orders.js. Para fazer isso de volta em nosso app.vue, agora vamos definir esses dois primeiros valores para ser dinâmico, configurando uma propriedade computada. Primeiro, vamos para a quantidade de itens vendidos. Eles estão por baixo dos nossos itens ordenados, separados por vírgula, vamos configurar isto. Agora isso nos deixa com algumas opções. Poderíamos ir diretamente para o nosso arquivo orders.js. Assim como fizemos anteriormente, podemos percorrer todos os pedidos e, em seguida, todos os itens do pedido, ou, alternativamente, logo acima disso, já temos nossos itens classificados, que é uma matriz de todos os itens que vendemos. Em vez disso, podemos usar isso, mas primeiro vamos criar uma nova variável chamada quantidade, e configurar isso para ser um valor inicial de zero. Em seguida, para obter isso, podemos pegar nossa propriedade computada que foi itens classificados, loop sobre este. Em seguida, crie uma função para cada item. Estamos passando por todos esses itens vendidos e temos esse objeto, assim como vemos aqui. Lembre-se de que cada um desses objetos tem um campo de quantidade. O que agora precisamos fazer é atualizar nossa quantidade com o campo de quantidade deste item. Então pegue nossa variável, e então podemos adicionar usando o operador +=, o item.quantity. Este operador renovará automaticamente a quantidade do item para o valor existente em vez de substituí-lo. Em seguida, devolva a nossa quantidade a partir deste valor calculado. Agora podemos usar este nome abertamente fornecer objetos e substituir o valor embutido de 54 com o valor desta quantidade de pontos de itens vendidos. Em seguida, o valor total de vendas. Vou apenas [inaudível] adicionar uma vírgula, e configurar nossa segunda propriedade computada. Assim como ambos irão criar uma nova variável, desta vez chamada total, e definir isto para um valor inicial de zero. uma vez, para este, temos algumas opções. Poderíamos mais uma vez viver através de nossos itens classificados. Poderíamos fazer algo como multiplicar a quantidade pelo preço do item, ou podemos ir diretamente para a nossa matriz de pedidos. Em seguida, percorra nossos pedidos , percorra os itens e, em seguida, adicione todos os preços. Isto é o que eu vou fazer, que é percorrer todas as nossas ordens. Fazemos isso.orders.map. Vamos pegar cada ordem individual e, em seguida, loop através da propriedade items. Selecione cada item. Em seguida, para cada item em um de nossos pedidos individuais, vamos então pegar o campo de preço, e atualizar o nosso total, e em seguida, retornar de volta este valor total. Agora, volte para o nosso provedor, mova isso. Podemos definir esse valor para ser this.totalsalesvalue. Dê isso um salvamento e off para o navegador. Não estamos vendo dados aqui dentro. Vamos ao inspetor e ver o que está acontecendo no console. Recebemos um erro dizendo que não podemos ler a propriedade da quantidade de itens vendidos. Agora, a razão pela qual estamos vendo esse erro é porque ao fazer referência quaisquer propriedades de dados ou dados dinâmicos neste objeto fornecer, precisamos retornar isso como uma função. Esta função é configurada como a propriedade data acima. Isso vai retornar todos os nossos valores que incluem dados dinâmicos. Isso estava completamente bem antes porque tudo o que estávamos produzindo era dados estáticos, como a string e também nossos números. Se nós transformamos isso em uma função, assim como os dados, nós vamos pegar nossos três valores e, em seguida, retorná-los de volta de todas as funções off para o navegador. Agora vemos os itens vendidos, mas estamos perdendo o total de vendas. Vamos dar uma olhada. Temos isso.totalsalesvalue da quantidade de itens vendidos. Acho que precisamos colocar isso na seção computadorizada, então cortamos isso. Se dermos uma olhada na cinta de fechamento para o computado, só precisamos colocar isso dentro da seção direita, separados por uma vírgula, e lá vamos nós. Por último, temos este item mais vendido que é passado atualmente como uma string. Agora, vamos corrigir isso acessando novamente os itens classificados, que é uma matriz de nossos itens mais vendidos. Lembre-se que esta é a maior quantidade vendida primeiro. Tudo o que precisamos fazer para isso é acessar o primeiro item dentro de nossa matriz. Vou cortar a corda. Podemos aceder a isto. Sorteditems. Em seguida, acesse este primeiro que é a quantidade mais vendida. Isso devolverá nosso objeto completo para este item. Agora podemos restringir isso nos componentes best-seller e acessar diretamente a propriedade name. Agora, nossos valores injetados gratuitamente estão nos componentes corretos. 74. Mini desafio: atualize as páginas de pedidos e de produtos mais vendidos usando provide/inject: Agora convertemos nossa página de visão geral para usar fornecer e injetar. O que eu gostaria que você fizesse agora como um desafio é ir em frente e fazer o mesmo para os pedidos e as páginas de best-sellers. Agora, no app.vue, ainda comentamos nossa seção best-seller e rolando para cima também temos esta seção de pedidos aqui também. Nós já fizemos a visão geral para que possamos ignorar isso. O que eu gostaria que você fizesse é mover sobre todo o conteúdo do slot, que temos para cada página, para os componentes individuais, assim como fizemos com a visão geral onde extraímos todo o conteúdo para o componentes individuais. Em seguida, preencha todas as seções que têm dados dinâmicos, como este caminho, configurado por fornecer dentro deste app.vue e, em seguida injetar os dados nos componentes necessários de idades. Eles vão nos dar uma chance e em seguida eu vou ver como eu fiz isso. 75. Atualize as páginas de pedidos e de produtos mais vendidos usando provide/inject: Vou começar com a página de Ordens. Se deslocarmos para cima até a seção comentada no app.vue, vamos começar com esta seção de ordem. Vou descomentar isso, então está um pouco mais claro o que estamos fazendo. Dentro daqui, a primeira seção ou o primeiro slot que temos é esta seção total. Isso contém o componente total de vendas. O que precisamos fazer é cortar isso, e depois ir para a página de Pedidos, e colocar isso no lugar de nossa vaga total. O Orders.vue, este é o slot com o nome de Total. Colar em nossos componentes. Agora, estamos fazendo uso de um componente. O que precisamos fazer é também importar isso para este arquivo também. Vamos criar uma seção de script. Eu só vou estragar isso. Crie nossa seção de scripts e logo acima do padrão de exportação, vamos importar este único componente que era o total de vendas. O caminho do arquivo é.. /componentes e, em seguida, para o total de vendas. Configure o assunto do nosso componente. Passando este total de vendas. Em seguida, sobre o app.vue, ainda temos esta seção padrão. Se eu destacar isso, podemos agora pegar toda a div, que é aninhada dentro com a classe de wrapper ordem. Coloque isso para fora, eu vou limpar esses componentes pedidos e, em seguida, colar isso em nosso slot. A partir daqui, consideramos esta seção que precisa de acesso a todas as ordens para que possamos agora passar isso usando ele fornece e injetar. Primeiro, nosso provedor, que está no app.vue, configurar os pedidos, que é igual a esses dois pedidos que vivem em nossa propriedade de dados. Para os orders. Vue, agora podemos injetar isso em nosso script. Este é um array com o único valor de ordens. Isso agora coloca nossos pedidos de volta nesta seção. Ainda vamos ver isso porque temos mais em app.vue, ainda estamos colocando nesses componentes pedidos. Vou comentar isso e clicar no link Pedidos. Tudo está funcionando bem. Ao lado da nossa página de best-sellers, novamente, vamos descomentar isso para ficar mais claro. Este é um pouco mais simples. Só temos esta mesa. Codifique isso. Sobre a página Bestsellers.vue, e podemos substituir o conteúdo do slot com a nossa tabela, isso também precisa de acesso à nossa propriedade de computador que é itens classificados. Vamos passar isso para o nosso provedor. Itens classificados, que vai ser igual a este tem itens classificados, que é uma propriedade de computador sobre o nosso componente, que é best-sellers Configurar um script. Tudo o que precisamos fazer para isso é configurar nosso conjunto de injetores, que vai aceitar os itens salgados. Há a nossa tabela e podemos limpar o nosso app.vue removendo qualquer um dos componentes antigos, deixando esta seção dinâmica. Não precisamos dos best-sellers, não precisamos dos pedidos, e também não precisamos da seção de visão geral. Foi um teste, temos a visão geral dos pedidos e também os best-sellers também. 76. Atuando o provedor de partir de um componente filho: Junto com o uso fornecer e injetar para passar dados, também podemos precisar de uma maneira de mudar de estado em um componente pai de dentro de um filho. Sabemos como fazer isso emitindo eventos personalizados. Mas ao usar fornece e injetar, a maneira de abordar isso é ter um método no mesmo arquivo que o provedor, e então passamos para os componentes filho, uma referência a este método que você pode então acionar. Estamos essencialmente criando um método em um componente pai e, em seguida, chamando-o de um filho que vê uma ação. Nós vamos descobrir a mudança de nossas páginas de componentes de RH dentro do app.view. Vamos limpar esta seção da barra lateral e remover todo o conteúdo do slot. Isso removerá nosso link e agora podemos colocar isso de volta em nosso arquivo sidebar.vue em vez de nossos slots, já que agora não recebemos nenhum dado de slot, podemos substituir isso por um link. Este link irá simplesmente saída da página do nosso loop, e agora precisamos configurar um método no app.view que é acionado quando clicamos em qualquer um desses links. Para baixo para nossos scripts irá configurar a seção de método, e este método vai ser chamado ChangePage. Isso também precisará tomar na página que você deseja alternar para, e então tudo o que vamos fazer é alterar a propriedade dates de selectedPage para ser igual a este valor. Agora podemos passar uma referência a este método dentro do nosso provedor. Vou manter estes consistentes e também chamar isso de ChangePage, que é igual ao nosso método com o mesmo nome. Nós queremos alternar esta página de mudança para baixo dentro da barra lateral, e assim como nós passaríamos para baixo qualquer dado ou estado, nós também podemos adicionar isso em uma matriz de injeção. Agora esta página tem acesso a todos os métodos ChangePage. Agora vamos usar nosso link dentro do modelo para ouvir um clique e ativar este método, então isso agora para um clique, que agora é um nome de método de ChangePage. Lembre-se, isso também precisa levar na página para a qual você deseja navegar, e teremos acesso a isso com esta variável de página. Vamos tentar isso para o navegador, ter a visão geral, os pedidos, e também os best-sellers que agora foram acionados a partir deste componente filho. Você termina fora podemos mudar o cursor para ser um ponteiro e passamos o mouse sobre qualquer um desses links. Um estilo li já está configurado e tudo que eu preciso fazer é adicionar no cursor para ser um ponteiro. Agora tudo isso funciona muito bem, mas há algo para estar ciente, que é por padrão fornece e injetar não é reativo. Isso significa que se qualquer um dos valores fornecidos for alterado, os componentes filho não serão atualizados. Há algumas maneiras que podemos ver isso se fizermos na reatividade, e nosso aplicativo tem uma estrutura de componentes que não é muito profundo. Poderíamos usar adereços e emitir. Poderíamos também usar fornece e injetar, definir os valores iniciais para componentes filho uma vez que o upload, ou alternativamente, se realmente quiséssemos usar fornece e injetar, mas a reatividade era importante. Há uma maneira de fazer isso quando combinamos isso com a API de composição livre de visualização, e isso é algo que vamos descobrir em breve. 77. Introdução ao roteamento: Ao criar nossos aplicativos, muitas vezes temos o caso de uso para alternar entre várias páginas. Para este Vue também nos tem coberto fornecendo um pacote de roteador. Se o roteador é criado e mantido ativamente pela equipe do núcleo Vue.js para que possamos ter certeza de que ele será compatível com sua versão do Vue, e também quaisquer atualizações, também. Ao lado, se você estiver alternando entre nossas páginas, o pacote relativo também tem muitas outras ótimas características, que descobriremos nesta próxima seção. 78. O que vamos construir e projeto inicial: Bem-vindo de volta a esta nova seção. Para as próximas seções, também teremos um novo projeto chamado Creative Cards. Este vai ser um aplicativo de edição de cartão e podemos ver a partir da tela inicial aqui temos a seção de cabeçalho, temos alguns links para categorias populares. Então temos todas as nossas categorias disponíveis listadas abaixo. Tudo isso é gerado dinamicamente a partir dos dados que temos em nossa aplicação. Podemos clicar em qualquer uma dessas categorias e ver todos os cartões disponíveis, que correspondem a esta categoria atual. Se selecionarmos tudo, veremos um link para todos os cartões disponíveis, que agora podemos selecionar para editar. Se clicarmos em qualquer um deles, então somos levados para a exibição de edição. Podemos selecionar todas as páginas. Temos a frente, o interior à esquerda, dentro à direita, e também a parte de trás também. A partir de qualquer um desses pontos de vista, temos o cruzamento do à direita. Podemos selecionar novas imagens que você deseja usar para todos os fundos. Podemos trocar a posição desta imagem. Também podemos remover a imagem também se não quisermos ter uma para esta página específica. Também podemos editar este texto e todas as alterações que fizermos são refletidas na visualização à esquerda. Mais e mais isso também temos algum acesso a todas as opções. Podemos alterar o tipo de fonte, podemos alterar o estilo da fonte. Podemos mudar a cor e também torná-la negrito, itálico. Podemos aumentar o tamanho da seção. Podemos definir o alinhamento horizontal e vertical também. Isso é exatamente o mesmo para qualquer uma de nossas páginas. Estes são todos totalmente editáveis. Nós não estamos presos com os padrões que são fornecidos no primeiro clique neste cartão. Isto também será ligado a uma base de dados, por isso queremos ser felizes. Podemos então clicar no botão Fazer Ordem e ele vai enviar este pedido através de um banco de dados. Junto com um banco de dados, também exploraremos alguns novos recursos nas próximas seções, como funções sem servidor, vamos dar uma olhada no roteador vue, a API de composição vue e muito mais. Tal como acontece com o resto do projeto, se você baixar o iniciador do cartão criativo do repositório do GitHub, se você já tiver a pasta desde o início do curso, você pode ir até lá e abrir o iniciador do cartão criativo. Já navegei até isto dentro do terminal e abri isto dentro do código visual do estúdio. Para começar, temos um setter de CLI de visualização bastante básico. Mas vamos apenas ficar algumas adições para este projeto dentro do índice HTML. Adicionei um link para o Google Fonts. A fonte contém diretamente dentro da pasta de ativos, alguns ícones e também algumas imagens que vamos usar como ponto de partida. Teremos uma pasta de roteador e vamos dar uma olhada nisso em seguida. Mas provavelmente a parte mais importante é este ponto de dados js. Esta é uma matriz de cartões diferentes que vamos usar como ponto de partida para este projeto. Estas são as seções que são totalmente editáveis. Quando mudamos essas seções dentro daqui, este é um array que contém objetos para cada um de nossos cartões. Eu tenho o ID, o nome, e também as categorias a que este cartão pertence e estes são todos usados para gerar as categorias que você vê na página inicial apenas aqui. Depois disso, uma matriz de páginas, temos a frente, o interior esquerdo, o interior direito, e também a parte de trás, uma posição de imagem de fundo padrão. Então saltamos para as seções do cartão, esta é a seção de tecnologia com todos os dados. Temos a altura, a cor, e também a família de fontes, juntamente com todas as outras opções que são todas editáveis a partir do nosso menu. A única coisa que precisamos fazer agora é ir para o terminal e executar a instalação do NPM usando o comando NPM I. Isso irá instalar todos os pacotes de nós que precisamos para este projeto. E uma vez feito isso, vamos agora passar para o próximo vídeo onde vamos instalar o roteador vue. 79. Configurando o roteador Vue: Se você nunca usou um roteador antes, é um pacote que podemos usar para basicamente alternar entre nossas páginas ou visualizações. Como estamos lidando com aplicativos de página única, não temos a maneira tradicional de alterar páginas solicitando-as a partir deste servidor. Em vez disso, contamos com um roteador que mapeará uma URL para um de nossos componentes. Esta é uma maneira muito mais flexível e avançada de navegar em nossos aplicativos, a única maneira que olhamos no projeto anterior quando configuramos um componente dinâmico para este caso de uso. Não é apenas sobre a mudança de páginas, porém, há muito mais recursos, nós também vamos apenas passar para. Além disso, o pacote vue-router é oficialmente suportado e mantido pela equipe Core Vue.js. Por isso, é profundamente integrado, suportado e também mantido atualizado. Há um link CDN, mas como estamos usando a visualização CLI, instalação é realmente simples. Para manter nossos pacotes na mesma versão, o projeto inicial que temos aqui, já tem este roteador instalado. Podemos ver isso no package.json nas dependências. Nós temos o vue-router que é realmente simples de adicionar, e se você quiser adicionar este um projeto diferente que você está criando por conta própria, yo u pode ir até o terminal. Lembre-se, isso já está instalado, então não execute esse comando. Mas se você estivesse usando isso em um projeto diferente, você poderia instalar com o vue-router, com o comando de um roteador vue add. Isso adicionará o vue-router como um plug-in CLI e também lhe dará a opção de configurar um modo histórico, que veremos mais tarde. Para este projeto específico, ainda não configuramos o modo histórico quando incluir novo roteador. Quando o comando vue add router terminar a execução, se você entrar no diretório de origem, isso adicionará uma nova pasta. A nova pasta é este roteador apenas aqui, que contém um arquivo Index.js. Se olharmos para o topo, a primeira coisa que faremos é importar os pacotes que precisamos do vue-router, falaremos sobre os modos de histórico muito em breve, mas este é o pacote que precisamos para criar um novo vue-router. Em seguida, abaixo disso, importamos qualquer componente entre o qual você deseja alternar do nosso roteador. Aqui temos a importação de nossos componentes Home, que foi adicionado com o Vue CLI. É criado um diretório de visualizações com o sobre, e também a página inicial para começar com o roteador. Em seguida, temos uma série de rotas que queremos usar para nossa aplicação. Cada um desses objetos contém um caminho. Nós temos o link home e também o link do sobre logo abaixo. Cada um desses links será mapeado para um componente específico. Este está a ligá-lo aos nossos componentes domésticos. Se dermos uma olhada no componente sobre, isso é um pouco diferente do acima. Este está usando divisão de código, e vamos dar uma olhada em como fazer isso mais tarde. Em seguida, criamos um objeto roteador que contém qualquer configuração que precisamos, como o histórico que acabamos de mencionar antes. Nós também passamos em nossa matriz de rotas também. Finalmente, exportamos nosso arquivo de roteador, para que isso possa ser usado em nossa aplicação do para o main.js. Em seguida, importamos este roteador exportado apenas aqui e, em seguida, adicionamos isso ao nosso aplicativo antes que este seja montado para o feito. É uma ação que vai para o terminal e inicia nosso servidor de desenvolvimento seria NPM executar servir. Abra isso. Agora temos dois links no topo da página, sobre a casa, que tem links para/, então também sobre esta página também. 80. Link de roteador e visualização do roteador: Agora temos dois links no topo da página. Temos o Lar que tem links para a barra. Em seguida, também a página Sobre Nós também. Isso é muito necessário duas rotas que vimos no arquivo do roteador apenas aqui, e então mapeando para nossos componentes. A CLI do Vue é adicionada automaticamente nessas fotos de duas rotas. Mas geralmente, precisamos adicionar isso em nossas células. Além disso, esses links que você vê aqui, se formos para o nosso app.vue, a CLI já adicionou esses dois links em fotos usando o link do roteador. O link do roteador é um componente que aceita os dois prop como um atributo. É aqui dentro onde passamos na rota para a qual queremos navegar. Podemos colocar esses links de roteador em qualquer componente ou qualquer página que queremos. Usar este link de roteador também é preferido em vez de usar o HTML regular a elementos por várias razões. Se dermos uma olhada nas saídas de qualquer ferramenta de desenvolvedor do navegador, clique com o botão direito do mouse em “Inspecionar”, abra a seção do corpo e dê uma olhada no aplicativo na navegação. Vemos no lugar do nosso link do roteador, temos este um elemento, nosso Lar, e também o link Sobre. Há, no entanto, uma diferença entre o elemento que foi adicionado automaticamente, entre o qual nos acrescentamos. Quando tivermos o modo histórico definido, que vamos dar uma olhada em breve, este link que foi adicionado irá interceptar quaisquer cliques e impedir que o navegador atualize a página automaticamente. Tente usar um link de roteador sempre que possível, em vez de um elemento de link HTML. Além disso, se você usou o roteador no Vue versão 2, você também pode ter usado o prompt Tag assim. Isso nos permitiu alterar o elemento que envolveu nosso link, qualquer outro elemento HTML, como um item de lista. No entanto, esteja ciente de que isso não está disponível na versão mais recente do roteador, portanto, você precisará removê-lo se o tiver em qualquer projeto existente. Nós não estamos limitados apenas a passar em uma string estática como esta, cerca de dois prop, nós também podemos passar em dados dinâmicos também. Por exemplo, podemos ter um usuário como este. Vamos criar uma seção de script com nosso padrão de exportação, com nossa seção de dados, e então vamos retornar um usuário. Este usuário pode ser um objeto com o nome e também um ID de usuário. Podemos então fazer esta dinâmica com os dois pontos e, em seguida, passar em uma string modelo dentro do [inaudível]. Podemos querer ir para uma rota, que é o usuário barra, e, em seguida, o ID do usuário. Dê isso um salvamento, atualização, e agora se clicarmos em “Sobre”, isso nos envia para o usuário/12345, e isso nos dá um ID da flexibilidade que temos ao selecionar novas rotas. Nós também podemos estender ainda mais, passando em um objeto. Em vez de nosso caminho assim, podemos passar em nosso objeto. É mais simples, podemos passar em um caminho para o qual queremos navegar. Novamente, podemos passar em um caminho dinâmico ou podemos apenas adicionar em uma string regular. Isso também precisará ser dinâmico, então adicionamos a ligação. O mesmo para o nosso segundo link, podemos adicionar no caminho. Agora, uma vez que temos um objeto, também podemos adicionar propriedades adicionais também. Por enquanto, salve isso e podemos atualizar o navegador, link para nossa página inicial e também para a página Sobre Nós também, ou alternativamente, em vez de fazer referência a um caminho como este, também podemos sair do roteador e entrar no índice ou js, e, em seguida, usar o nome que já fornecemos aqui dentro. Temos os nomes Home e About Us, qualquer um deles agora pode ser usado em nosso link de roteador. Dentro do nosso objeto, podemos substituir o nosso caminho com a propriedade name. No primeiro foi Lar, e o segundo foi Sobre. Vamos testar isso, atualizar. Ele ainda navega para nossas duas páginas. Basta abaixo de nossos links, podemos ver o conteúdo da página logo abaixo. A razão pela qual podemos ver isso é por causa desta visão do roteador que foi colocado sob nossos links. Isso funciona como um [inaudível] para os componentes que estamos visualizando atualmente. Podemos colocar isso em qualquer lugar dentro do nosso modelo. 81. Parâmetros e consultas: O pacote de roteador tem mais a oferecer do que apenas alternar entre componentes. Ele também pode ser usado para passar dados na forma de parâmetros e também uma string de consulta também. Primeiro, vamos dar uma olhada em parâmetros ou parâmetros, que são variáveis para uma determinada rota no link do roteador, que temos apenas aqui. Podemos adicionar nossos parâmetros dentro deste objeto dois. Então, logo após nosso nome separado por uma vírgula, adicione nossos parâmetros. Dentro deste objeto, podemos adicionar quantos parâmetros quisermos. Mas agora eu vou apenas adicionar um ID de usuário, que é o nome. O valor será igual a user.id, que podemos obter a partir de nossos dados. Aqui estamos lidando com esta página inicial. Vamos para o Vue e, em seguida, para os componentes home.vue. Aqui dentro temos várias maneiras de acessar nossos dados de roteadores. Dentro das chaves duplas, podemos produzir isso com o roteador símbolo dólar. Para o link da casa. Isso agora nos dá muitas informações sobre o roteador. Podemos ver isso um pouco mais fácil se entrarmos nas ferramentas do desenvolvedor. Então, vá para Inspect, abra os componentes da casa, e isso agora mostra todas as nossas informações de roteamento um pouco mais estruturadas. Temos acesso a coisas como a rota atual. Podemos ver quaisquer consultas ou quaisquer parâmetros, como o ID do usuário que acabamos de adicionar. Se rolarmos para baixo, teremos muito mais informações disponíveis para este roteador, como quaisquer opções. Também podemos ver todas as rotas que definimos em nosso arquivo roteador. Temos o componente de casa que é o caminho da barra para a frente. Então temos um pouco abaixo de dois. Então é assim que podemos acessar todas as informações de roteadores. Nós também poderíamos usar isso para acessar os parâmetros [inaudíveis], ou em vez disso poderíamos usar a rota do símbolo do dólar, que irá filtrar muitas dessas informações e apenas nos dar acesso às informações atuais da rota. Já podemos ver que isso é muito mais simples. Podemos ver neste objeto que temos acesso aos nossos parâmetros. Aqui dentro podemos acessar pontos params. Salve isso. Agora tenha acesso ao nosso ID de usuário. Se quiséssemos apenas acessar esse valor diretamente ou se você tivesse vários parâmetros, também podemos acessá-los pelo nome deles também. Agora esse ID de usuário nos daria acesso ao valor. O roteador também pode lidar com seqüências de caracteres de consulta também. Se você não usou uma string de consulta no passado, é uma maneira de fornecer algumas informações adicionais dentro de uma URL. Você pode ter visto uma URL que se parece com isso. Temos um ponto de interrogação, que é usado para separar a consulta da URL. Então teremos nossos nomes e valores assim. Agora o usuário, que é igual a qualquer valor. Esta é uma seção. Também podemos usar o e comercial para atender a vários parâmetros de consulta. Essas cadeias de consulta podem ser acessadas localmente ou também podemos enviá-los para o servidor também. Um caso de uso típico para uma string de consulta é quando usado com um formulário HTML. Podemos ver isso se adicionarmos um formulário simples ou modelo. Vamos apenas mantê-lo simples em uma entrada de nome. Em seguida, o atributo name é importante. Vamos ligar para esse usuário. Este atributo name é aquele que é mostrado na string de consulta. Veremos isso em um segundo. Também adicionaremos um local. Novamente, uma entrada com o tipo de texto. Este pode ter o nome da localização. Um botão para enviar isso com o tipo de envio. Agora, para o navegador, se adicionarmos qualquer nome aqui dentro, um local, podemos enviar. Isso agora é adicionado à URL como uma string de consulta. Vemos que o usuário é igual a Chris e também o local para este usuário e também este local é coberto de todos os formulários a partir desses atributo nome. Todas as informações serão enviadas para o servidor com o nosso formulário. Vamos remover isso e todas essas strings de consulta foram adicionadas automaticamente ou podem ser enviadas como formulário. Mas também podemos adicioná-los manualmente também. Se formos para o nosso app.vue e, em seguida, em nosso link roteador, é uma configuração assim como nossos parâmetros, podemos adicionar uma vírgula. Dentro do nosso objeto, configurar nossa consulta, onde podemos adicionar em quantas strings de consulta gostaríamos. Por exemplo, poderíamos adicionar um token com este link sobre, salvar isso. Clique no link sobre, e isso é adicionado ao final do nosso URL. Se também quiséssemos acessar qualquer uma dessas informações, poderíamos acessá-la diretamente do nosso modelo também. De volta aos nossos componentes de casa e ainda neste objeto de rota, em vez de acessar nossos parâmetros, tudo que você precisa fazer é acessar nossa consulta, atualizar. Não vemos nada aqui dentro desde que adicionamos isso ao link sobre. Podemos cortar isso para o sobre neste fim e essa é a nossa questão. Nós também podemos adicionar em várias consultas também e, em seguida, acessá-los por seu nome, como este token. É assim que podemos acessar parâmetros e nossas strings de consulta. No próximo vídeo, vamos dar uma olhada em como podemos combinar rotas dinâmicas. 82. Combinando rotas dinâmicas: URLs nem sempre são tão simples quanto o que temos aqui com nossa barra direta e a barra direta sobre rota. Eles também precisam ser mais dinâmicos e conter dados que irão alterar seus dados que são diferentes para cada usuário. Por exemplo, você pode ter um caminho que se parece com isso, você pode ter contas de barra. Esse caminho seria simples para o manipulador de roteadores, só precisamos mapear isso para um componente de conta. Mas e se quiséssemos também passar o ID do usuário, esse link para um determinado usuário assim? Seria muito trabalho criar uma nova rota para cada uso que tivemos em nosso banco de dados, mas para isso o roteador fornece o que é chamado de segmentos dinâmicos que é uma maneira de ter parte de nossa URL que pode mudar esses dois aponta para os mesmos componentes. Dentro do nosso arquivo de índice de roteadores a primeira coisa que vamos fazer é importar um novo componente, ainda não criamos isso, mas vamos fazer isso em apenas um momento. Vamos importar nossa conta, este seria o mesmo local que logo acima, ele estará na pasta views, e este será o account.vue. Depois disso, criaremos um objeto de caminho exatamente como vemos aqui, então abra as chaves e o caminho para isso, voltaremos para você em apenas um segundo. Nós vamos ter um nome de conta e também apontar para nossos componentes que acabamos de importar esse arquivo de serviço e agora podemos criar esses componentes de conta dentro de nossa pasta views. Será bem simples por enquanto, vamos colocar um título de nível 1 da minha conta. Eu vou para o roteador podemos agora criar nosso caminho para este componente, então queremos que este mapeie para encaminhar contas de barra, e então queremos lidar com quaisquer seções dinâmicas, como nosso ID de usuário. Então o que vamos fazer aqui é basicamente passar em uma variável usando os dois pontos podemos dar a isso um nome de nossa escolha, isso vai nos permitir capturar essa informação, se necessário. No nosso caso, vamos chamar isso de ID de usuário, e depois para o app.vue precisamos criar um link de roteador para vincular aos nossos novos componentes para que seja colocado no final, abrindo e fechando tags e, em seguida, dentro da tag de abertura. Quando eu fiz os dois prop, Eu vejo nenhum objeto onde o caminho, isso será dinâmico para que possamos colocar isso dentro dos ticks traseiros e queremos ir para a conta barra e, em seguida, podemos fazer uso de nossos objetos de usuário e link para o ID. Então, no navegador, e nós também precisamos adicionar um nome dentro daqui, e nós também podemos colocar um destes separados em dois entre cada um destes nome deste símbolo pipe. Atualizar e agora clique em nossas contas e nossa seção minha conta está agora sendo exibida quando nós vinculamos a esta seção de conta que inclui o ID de usuário dinâmico. Se precisarmos acessar os dados dentro desta seção dinâmica, como este ID de usuário, podemos acessar esses roteiros.params estranhos, assim como olhamos anteriormente. Até o account.vue, abra as chaves duplas que podemos acessar as informações atuais da rota, os parâmetros que agora nos dá acesso a essa variável ID de usuário que sentamos dentro do nosso arquivo de roteador. Além disso, se quisermos vincular a esta rota pelo nome de um app.view, podemos fazer isso exatamente como fizemos ambos com esta rota para casa então em vez de ter um caminho como este que inclui uma seção dinâmica, podemos vincular ao nome da rota que foi conta, então, podemos passar nos parâmetros assim como vemos acima que era um objeto. Precisamos passar o ID do usuário, que é igual ao user.id. Por isso, a página Início, Sobre e Conta ainda está funcionando também, também podemos passar em vários parâmetros e também ter várias dinâmicas seções também. Então, por exemplo, se esta seção de conta e, em seguida , ir para listar todas as postagens de blog para este usuário, poderíamos então também armazenar qualquer uma das postagens de blog individuais em oito segmentos dinâmicos e isso funciona exatamente da mesma forma. Se formos para o app.vue, podemos passar em um segundo parâmetro. Este foi o post e podemos passar em qualquer nome exclusivo para aqui, atualizar, vamos experimentar isso. Vemos que o nosso post ID também está disponível. 83. Rotas aninhadas: Dentro do nosso arquivo App.vue, estamos lidando com todas as alterações de rota com esses links e exibindo a página selecionada com essa exibição do roteador. Isto está tudo bem. Bem, e se não quiséssemos que todos os nossos vues fossem colocados neste local? Por exemplo, e se tivéssemos a nossa conta.Vue apenas aqui. Isso também tinha algumas páginas relacionadas, como os pedidos anteriores e também uma seção para atualizar o perfil. Podemos querer que essas duas novas seções sejam mostradas somente dentro deste vue de conta. Mas se usado caso, temos o que é chamado de rotas aninhadas. Para ver isso em ação, precisamos criar algumas novas páginas dentro da pasta do Vue. Crie um novo arquivo. O primeiro é o perfil de atualização e o segundo é as ordens do usuário. Um título básico será bom por enquanto. Nós configuramos o modelo com um cabeçalho de nível 1 que é para os pedidos anteriores. Podemos guardar isto e copiar isto para o perfil do utilizador. Nós, é claro, também precisamos de alguns links para links para nossas novas páginas. Então, de volta ao componente app.vue, configure nossos novos dois links de roteador para atualizar o perfil. Então, o segundo é para as nossas ordens anteriores. Como acabamos de mencionar, ambos os links estão relacionados à nossa página de conta, então pode fazer sentido tê-los abaixo do caminho da conta exatamente como este. Poderíamos ter contas de barra e atualizações de barra. Também podemos aninhar dentro do nosso perfil. Vamos incluir estes com o para solicitar, analisar em nosso objeto que inclui o caminho. Isso será dinâmico, então precisamos do backtick. Isso irá para encaminhar conta barra, em seguida, para o user.id específico e, em seguida, para encaminhar atualização barra. Agarra isto. Ao mesmo tempo, mas este vai para ordens até que terminemos com esta cabeça sobre o arquivo relativo onde vamos importar nossos dois novos componentes. Este próximo foi o perfil de atualização, e o último foi o pedido do usuário. Em seguida, podemos configurar o caminho do nosso roteador logo abaixo. Uma opção é criar duas novas rotas. Um que aponta para a nossa atualização de barra e outro que aponta para as nossas ordens de barra. Isso não é ideal [inaudível], já que ainda queremos exibir mesmos componentes da conta, mas queremos que essas duas novas páginas sejam aninhadas dentro. Para lidar com isso, podemos adicionar uma matriz de filhos. Isso declarará quais componentes devem ser aninhados dentro desta página de conta de nível superior. Primeiro, não precisamos desta seção de postagem para que possamos remover isso. Em seguida, separados por uma vírgula, podemos adicionar em nossa matriz filhos. Aqui dentro, vamos analisar em um novo objeto, que é uma nova rota, mas a diferença é que a nova rota que você analisa aqui dentro será o que acontece no final desta rota [inaudível]. Por exemplo, se quiséssemos uma atualização de barra, simplesmente analisaríamos no caminho como atualização. Em seguida, uma vez que o usuário visita a conta de barra, barra a ID de usuário, barra de atualização. Em seguida, declaramos quais componentes queremos renderizar. No nosso caso, é a página que acabamos de criar chamada perfil de atualização. Em seguida, nosso segundo objeto será para ordens de barra. Isso exibirá o componente que acabamos de importar, que eram ordens do usuário. Vamos tentar isso, atualizar o navegador. Agora, vemos nossos links na parte superior, clique em atualizar perfil. Isso só nos levará aos componentes da conta. Ainda assim, com a seção de atualização de barra, podemos tentar os pedidos anteriores. Novamente, temos o URL correto e ainda está me mostrando componentes da conta. Como você pode ver, ainda vemos este componente principal da conta. Mas e os dois componentes aninhados dentro? Bem, para isso, precisamos dizer a um Vue JS exatamente onde queremos que esses dois componentes sejam exibidos dentro de nossos pais. Para a conta. Vue. Bem, para isso, também podemos passar em um componente de visão de roteador. Agora, quando alternamos entre nossos dois links filho, também vemos o conteúdo desses componentes. 84. Classes ativas: Também nos ajudará a entender melhor em que rota estamos atualmente. As rotas do Vue também adicionam algumas classes ao link ativo. Pouco antes de vermos isso em ação, vamos para o app.vue e remover rapidamente nossos parâmetros não utilizados deste link de conta. Não precisamos deste post desde que removemos isso no último vídeo, e agora, se formos para o navegador e entrarmos ferramentas do desenvolvedor, clique com o botão direito do mouse em Inspecionar. Precisamos abrir isso na seção de navegação. Isso contém todos os nossos links sobre o topo, e se clicarmos no link Home, você verá que essa classe aparecerá de roteador-link-active e também roteador-link-exact-active também. Vamos tentar o about e essas classes agora é movido para o link about. A conta, isso também recebe. Mas se clicarmos em “Atualizar perfil”, ainda vemos que nossas duas classes estão sendo adicionadas ao link Atualizar perfil, mas o link da conta ainda tem essa classe roteador-link-active. O mesmo se formos para pedidos anteriores, nossas duas classes estão agora em nossos pedidos anteriores, mas o link do roteador ativo ainda está em nosso link de conta, mesmo que não tenhamos clicado neste link. Isso ocorre porque esse roteador-link-active sempre será aplicado mesmo em uma correspondência parcial. Atualmente, estamos em /account, o ID do usuário e, em seguida, /orders. Mas como o link da conta também começa com /account, isso também será considerado uma correspondência. Roteador-link-exact-active, porém, é mais específico e deve corresponder ao caminho exato em que estamos para que esta classe seja aplicada. Se fecharmos isso e ir para o app.vue, quando também configuramos o ViewRouter, ele também adicionou algumas classes dentro de aqui também. Temos algumas classes para nossa navegação, e também, esta classe para roteador-link-exata-ativo definindo a cor do nosso link. É por isso que quando clicamos em qualquer um desses links no topo, vemos essa cor verde, mesmo que não tenhamos definido isso nós mesmos, dentro das folhas de estilo, já que esta é a classe exata, você vai apenas defina a cor verde quando houver uma correspondência exata. No entanto, se fôssemos alterar isso, o roteador-link-active, já que nosso caminho atual começa com /account, isso também corresponderá a esse link de conta também. Também o mesmo se clicarmos em pedidos anteriores, vemos nossos dois links estão ativos. Nós vamos fazer isso. O estilo agora só se aplica à rota exata em que estamos. Então isso é apenas algo para estar ciente e nos dá um controle fino sobre o estilo de nossos links. 85. Páginas de fallback: Também é importante lidar com o que acontece se o usuário aterrissar na parte errada do nosso aplicativo ou em uma página que não existe. Podemos configurar uma captura geral todos os componentes, como uma seguir quatro página para exibir se não sobre rotas são correspondidas. No momento, se formos para o navegador e digitar URL não reconhecido, não vemos nenhum componente exibido no navegador. Para pegar isso, vamos para nossas visualizações e criar uma nova página chamada NotFound.vue. Apenas um modelo simples ficará bem com um título de nível 1, e este cabeçalho só vai dizer página não encontrada. Se quiséssemos, também poderíamos colocar em links para diferentes partes para o aplicativo ou até mesmo redirecionar de volta para a página inicial se quiséssemos. Isso é bom para este exemplo. Diga isso e agora para acessar isso, precisamos ir para o nosso roteador, e no topo, vamos importar isso como não encontrado. Em seguida, em nossa matriz de roteador, criar um novo objeto que vai lidar com todas as rotas que não são reconhecidas logo acima. Ele também precisará tomar em um caminho que vamos dar uma olhada em apenas um segundo. O nome, não encontrado, e também os componentes que você acabou de importar, que também não é encontrado também. Se você já usou a visualização para no passado e usou um roteador para capturar caminhos não reconhecidos, tudo o que precisaríamos fazer é adicionar uma estrela aqui dentro, e isso renderizaria nossos componentes NotFound para qualquer caminho não reconhecido. No entanto, embora na vista 3, precisamos passar em um parâmetro personalizado. Um parâmetro personalizado é exatamente como os que usamos acima para o ID do usuário, mas a diferença desta vez é que também precisamos passar em uma expressão regular para corresponder a qualquer rota não reconhecida. Vamos adicionar em nosso parâmetro personalizado, que eu vou chamar o nome do caminho. Um erro na expressão regular, que é o ponto e a estrela, e isso irá corresponder a quaisquer outras rotas que não estão listadas acima. Eu vou dizer isso, nós vemos que nosso URL não reconhecido agora renderizará nossa página componentes não encontrados. Nós também podemos acessar esses parâmetros também que temos apenas aqui dentro do componente. Faça isso, nós os acessamos como qualquer outro parâmetro de roteador. Abrimos as chaves duplas, acessamos a rota atual e, em seguida, selecionamos os parâmetros. Isso agora nos dá acesso a essa variável de nome de caminho e também o valor também. Poderíamos também acessar vários caminhos assim se adicionássemos uma barra e, em seguida, um segundo segmento. No entanto, embora isso apenas renderizará uma string simples. Se quisermos dividir as seções e acessá-las individualmente, podemos repetir isso e criar uma matriz de parâmetros. Para fazer isso, tudo o que precisamos fazer é ir para nosso roteador e, em seguida, adicionar uma estrela opcional no final, e principalmente dizer que vemos que isso é convertido em um array com vários valores. Isso agora nos dá a opção de usar esses parâmetros individualmente se precisarmos, ou até mesmo navegar por esse caminho também. Também não precisamos muito do URL completo assim. Isso também pode ser uma seção do nosso URL também. Por exemplo, se este foi a barra Admin, isso corresponderia à seção admin, e então poderíamos usar a seção catch-all para qualquer coisa que se segue. Isso nos permitiria ser mais específicos, e poderíamos criar componentes personalizados para páginas diferentes, o que pode estar errado. Para este caso de uso, poderíamos personalizar nossa página não encontrada para ser mais pessoal para esta rota de administração, talvez possamos adicionar em alguns textos ou apenas nenhuma página de administração encontrada, e então nós também poderíamos passar no roteador, deixar o o usuário sabe exatamente em qual caminho eles estão. Como isso está na rota de administração, não estamos vendo esta página não encontrada. O que precisamos fazer é ir para a frente barra admin e, em seguida, colocar em qualquer coisa após este caminho ou página não encontrada é então renderizado, e, em seguida, também a nossa mensagem do cliente logo abaixo. 86. Configurando nossos componentes e rotas do projeto: Bem-vindo de volta. Agora tivemos um pouco de tempo para brincar com o Vue Router e ver alguns de seus recursos. Agora, podemos pegar o que você aprendeu e aplicá-lo ao nosso novo projeto. Para começar, vamos limpar esta página seguinte de quatro, removendo a mensagem e, em seguida, ir para o nosso arquivo de roteador e restabelecer isso para cobrir todas as páginas não encontradas. Em seguida, vamos para a pasta views e criar as quatro novas páginas que precisamos para o nosso projeto. Podemos remover o sobre, não precisamos disso, a conta, remover a página inicial. Nós vamos até mesmo precisar de componentes NotFound, podemos remover o UpdateProfile e também os UserOrders também. Por enquanto, vamos criar nossas quatro novas páginas, e o primeiro arquivo que vamos acessar é o Admin.vue. A próxima página será para o AppHome. O terceiro é para a Categoria. Esta é uma página para exibir todos os nossos cartões pela categoria. Então, finalmente, o create.vue, que será o vue que usamos para editar o cartão. Só para que possamos vê-los por enquanto, vamos adicionar um modelo e um título de nível 1, e o título desta página foi criado. Podemos copiar isto, colar isto nas outras três páginas. Este foi categoria, salvar este, eo AppHome, e também o administrador também. Também usaremos o roteador para alternar entre os quatro vues. Então vá para a página de índice de roteadores, eu vou substituir todas essas quatro páginas por nossas novas páginas. O primeiro é para o administrador, o segundo é o AppHome, o terceiro é para criar e, em seguida, também a categoria. Os pontos de entrada do roteador doméstico serão este AppHome. Podemos alterar isso, não precisamos da página sobre, então podemos mudar isso para ser a categoria, o nome da categoria também, e depois substituir essa importação dinâmica por um componente regular. Também não precisamos da seção conta para que possamos substituir isso para ser /create, o nome de criar, o componente. Também podemos remover a matriz de crianças. Também precisamos criar mais um objeto, e este é para nossa rota de administração. Ao longo do nosso arquivo app.vue principal, aqui dentro, nós vamos remover todos os links, deixando-o apenas no lugar da visão do roteador, para possamos pegar essa div, que é o wrapper, remova isso. Este aplicativo não vai ter um menu de estilo tradicional para alternar entre essas páginas. Em vez disso, navegaremos quando o usuário clicar em uma categoria ou um cartão específico. Uma vez que o cartão foi selecionado, usaremos o roteador para alternar entre essas páginas de cartão. Por enquanto, podemos testar as rotas. Tudo o que precisamos fazer é ir ao final da nossa URL e testar a categoria. Além disso, criar, também temos a rota de administração. Isso também é bom. Então, finalmente, a página inicial. Todas essas rotas agora estão mapeadas corretamente para nossas quatro páginas. Também precisamos de um componente de cabeçalho, para que possamos colocar isso dentro da pasta de componentes. Abra isso e ainda temos este componente HelloWorld. Podemos renomear isso como AppHeader.vue. Vamos limpar isto. Vou remover tudo por enquanto e colocar no modelo, que vai conter a seção de cabeçalho e também o nosso título dentro de um cabeçalho de nível 1 de cartões criativos. Depois disso, uma seção de navegação, que conterá três links para categorias populares. Então crie uma lista não ordenada com três itens de lista. O primeiro item da lista conterá o link do roteador. Passe no para adereço. Nós não precisamos fazer essas dinâmicas, uma vez que esta é apenas uma string regular de /category. Então vamos até a seção de aniversário. Passe o texto de aniversário. Também podemos copiar este item da lista e usá-lo mais duas vezes. O próximo será ir para a rota do aniversário, o texto, e depois colar no terceiro na parte inferior. Isto vai ser Natal. Você também pode alterar essas categorias, se você quiser, muito mais fácil se data seção diferente. Seja qual for a rota que possuímos, sempre estaremos exibindo esse AppHeader principal, então podemos importar isso no app.vue. Na seção de script, crie nossa importação. Podemos usar o símbolo @ para acessar a fonte para os componentes e, em seguida, o AppHeader. Registre isso logo abaixo, remova os dados também. Também não precisamos disso dos vídeos anteriores, portanto podemos removê-lo. Em seguida, até o modelo, podemos registrar isso logo acima da vista do roteador, então este AppHeader será sempre exibido no topo. Em seguida, o conteúdo da nossa visualização do roteador será colocado logo abaixo. Bom. Então, agora vemos o cabeçalho, podemos testar esses links. Temos o aniversário, o aniversário, o Natal, mas este cabeçalho precisa de um pouco de estilo. Você pode colocar todos os estilos no componente de cabeçalho se quiser, mas eu vou colocar na lista geral estilos em nosso app.vue. Além disso, a seção não terá o atributo scope, portanto, isso se aplicará a todos os itens da lista em nosso aplicativo. Removendo estilos de navegação, estes foram adicionados automaticamente do roteador, acessar a lista não ordenada. Então aqui dentro, vamos apenas redefinir qualquer padrão do navegador definindo a margem para ser zero e também o mesmo para o preenchimento também. Depois disso, vou listar itens e também nossos links. Definimos a decoração do texto para não ser nenhuma. Isso removerá todos os sublinhados de nossos links. O estilo da lista também é nenhum, e para remover também a cor do link padrão, definiremos a cor para herdar do pai. Ok. Estes são apenas redefinições gerais e padrões para nossos itens de lista, e para os estilos de cabeçalho mais específicos, vamos voltar para o nosso AppHeader e, em seguida, criar nossa seção de estilo. Isso também pode ser escopo. Primeiro de tudo, todo esse conteúdo foi encapsulado dentro deste cabeçalho. Vou definir a família de fontes usando uma fonte do Google, que está dentro da nossa página de índice. A partir dos arquivos iniciais dentro de nossa página de índice, isso está vinculado apenas aqui. Isso nos dá acesso a dois estilos de fonte que podemos usar em nosso projeto. Você também pode ir para o Google Fonts, para qualquer provedor de fonte diferente, e usar um estilo diferente, se preferir. De volta à nossa seção de cabeçalho, uma queda cursiva e, em seguida, também o espaçamento entre letras de um pixel. Isso só vai adicionar um pouco mais de espaço entre cada uma de nossas cartas. O tamanho da fonte de 18 pixels, uma borda na parte inferior de um pixel, uma linha sólida, e a cor de cinza claro, e pixels todos preenchimento também na parte inferior que vai separar o conteúdo desta linha. Em seguida, podemos acessar a caixa flexível para mover este título para a esquerda e, em seguida, nossos links para a direita. Flexão de exibição, espaço entre justificaria o conteúdo e alinhamento vertical com itens de alinhamento, colocando-os no centro. Muito em breve, este título de nível 1 também irá ligar para a rota de casa, que possamos adicionar um cursor ao nosso h1. O cursor do ponteiro, e também remover quaisquer margens padrão ou o cabeçalho. Sobre nossos links sobre a direita, pegue a lista desordenada, e então podemos definir os alinhamentos com o display flex. Como a direção flex padrão é linha ao usar a caixa flexível, eles agora são colocados em toda a página. Só precisamos de espaço entre os itens da lista. Podemos fazer isso com algum preenchimento à esquerda de 0.5 rems, e agora, nosso cabeçalho está completo. 87. Navegação programática: Esses links de roteador que temos usado até agora em nosso projeto nos permitem mudar para diferentes locais com o clique de um botão. Anteriormente, também analisamos brevemente o acesso à instância de roteadores usando o roteador símbolo dólar. Isso nos deu acesso a coisas como os parâmetros em nosso código. Este roteador símbolo dólar também expõe muitas das coisas para sugerir a capacidade de navegar usando métodos como push. Isso significa que também podemos construir na navegação também em nossos ouvintes de cliques ou métodos. Ao longo deste AppHeader.vue, temos este título do site no nível no cabeçalho e realmente o que queremos é vincular de volta à página inicial e poderíamos envolver isso no link do roteador ou navegar programaticamente acessando o roteador símbolo dólar quando clicamos sobre isso. Vamos dar uma olhada em como podemos fazer isso com o método de envio de roteadores. Dentro do interior aberto vamos ouvir um clique como normalmente faria, e então vamos responder a isso acessando o roteador que tem este método push. Dentro daqui podemos adicionar um caminho para o qual queremos navegar, então adicione a barra, clique no título do nosso site e isso agora navega de volta à nossa página inicial. Isso também é útil para coisas como empurrar o usuário para a área da conta depois de ter feito login, já que isso também pode ser usado dentro de um método também, a única diferença é que se usássemos isso em nossa seção de script, lembre-se, precisaríamos adicionar esta palavra-chave na frente. Vamos dar uma olhada em outra coisa que é o método de substituição. Atualize agora para o aniversário e, em seguida, o nosso título é para ser é trabalhar exatamente o mesmo, mas há uma diferença chave. Ao navegar no navegador, cada página que visitamos é adicionada ao histórico anterior de entradas, é assim que o navegador sabe para onde navegar quando clicamos nesses botões para trás e para frente. Quando usamos o método push que acabamos de procurar antes, essas entradas também são adicionadas ao nosso histórico. No entanto, como soa quando usamos o método de substituição, assim como estamos agora, isso irá então substituir a entrada atual em vez de adicionar uma nova. Podemos verificar isso se atualizarmos, vamos para o aniversário, depois clicar na rota inicial e agora se clicarmos no botão Voltar, agora vamos levá-lo de volta para o link anterior, que é aniversário, porque isso está sendo substituído. Se voltarmos para o método push e fizermos exatamente o mesmo, atualizar, ir para o link de aniversário, voltar para a nossa casa e agora se clicar em volta isso então nos leva de volta ao nosso link de aniversário original desde que a barra está sendo adicionado à pilha do navegador em vez de substituir a anterior. Ao lado deste roteador também tem um método go que nos permitirá navegar pelas entradas do navegador, então ao invés de navegar em um determinado caminho como este, podemos voltar ou avançar através de quantas entradas você quiser. Se quiséssemos voltar às páginas, poderíamos usar negativo 2 e vamos tentar isso. Vá para casa, clique em aniversário, aniversário e Natal, em seguida, clique no título do site e nós somos levados volta para as entradas que estavam de volta para o nosso link de aniversário. Se mudarmos isso para ser um 2 positivo, clique sobre isso, isso irá nos empurrar de volta para as entradas, que está de volta para o nosso link de Natal. Isso é útil se quiséssemos voltar e avançar várias páginas, no entanto, se quiséssemos apenas ir para trás ou para a frente por uma página, poderíamos também substituir isso por frente ou também para trás. Isso funcionará exatamente da mesma forma que ir, mas só funcionará para uma única página. Assim como estes, há também alguns outros métodos também que você pode encontrar dentro dos documentos API, se necessário, mas estes são alguns dos mais comuns. Nosso projeto, vamos deixar isso como empurrar e vincular isso à string ou barra, que vamos vincular à página inicial. Em seguida, vamos dar uma olhada nos diferentes tipos de modos de histórico que o roteador fornece. 88. Diferentes modelos de roteador: Neste projeto, estamos usando um projeto inicial que é baixado do GitHub. Ele já tem o Vue Router instalado. Mas ao passar pelo processo de configuração do roteador, nos perguntam se queremos usar o modo histórico. Seu modo histórico não está incluído no início deste projeto, então estamos atualmente no que é chamado de modo histórico de hash. É por isso que temos esse hash dentro da URL. Como estamos usando um aplicativo de página única, esse hash é usado internamente. A parte após o hash é a rota para a qual você deseja navegar. Aqui estamos navegando /category e, em seguida, nossa categoria selecionada. Ter este hash dentro da URL no entanto, pode ter um impacto negativo sobre SEO. Se isso é uma preocupação, podemos alterar o roteador para fazer uso do modo HTML5. Para fazer isso, vamos fazer essa alteração no arquivo de índice do roteador e, em seguida, rolar para baixo até a parte inferior. Em vez do histórico de hash da Web, podemos substituir isso por CreateWebHistory. Também precisamos importar isso do pacote do roteador. Até o topo, podemos substituir a versão hash com o histórico da web. Isto e para o nosso projeto, podemos remover tudo após o nosso localhost pela navegação. Tudo isso funciona exatamente da mesma forma, mas desta vez sem o hash na navegação. Isto funciona bem aqui. Mas lembre-se de que nosso aplicativo é uma única página para cima, e todo o roteamento é tratado no front-end. Isso, ao implantar nosso aplicativo, devemos configurar o servidor para sempre retornar nossa página principal index.html. Ter essa configuração permitirá que nosso roteador manipule onde precisamos estar no front-end se o usuário visitar a página errada ou uma rota dinâmica. Vamos dar uma olhada em como configurar isso mais tarde quando implantarmos nosso aplicativo. Além disso, uma vez que só estamos recebendo de volta a página principal index.html, também precisamos lidar com quaisquer erros 404 também. Estamos fazendo isso dentro de nosso roteador, que é rota catch-all. Vamos testar se isso está funcionando indo para qualquer link não reconhecido. Ainda vemos a “Página não encontrada”. Além disso, se clicarmos em qualquer um dos nossos links na parte superior, obtemos o componente “Página não encontrada”, uma vez que não configuramos a segunda seção logo após a nossa categoria. Atualmente, o que só temos é /category, então esta é uma rota não reconhecida. Mas se removermos a última seção, agora temos uma correspondência do componente categoria. 89. Introdução: API de composição: Bem-vindo, você chegou à seção API de composição. Esta API de composição é um recurso de visualização livre de versão e algo que é provavelmente a parte mais aguardada desta nova biblioteca. Vamos dar uma olhada na composição desde o início usando conjuntos de funções, também vamos integrá-la em nosso aplicativo de cartões criativos. Vamos olhar para todos os novos recursos que fornecem como podemos dividir nosso código em arquivos composable, como podemos importá-lo e reutilizá-lo. Além disso, veremos como podemos integrar algumas das coisas que já sabemos, tais como: métodos diferentes, como podemos criar funções, como podemos criar propriedades computadas, observadores e também alguns dos novos recursos como efeitos de observação e como adicionar reatividade também. Estou ansioso para esta seção e eu vou vê-lo no próximo vídeo. 90. O que é a API de composição?: Quando a API de Composição foi anunciada pela primeira vez, ela recebeu inicialmente um pouco de feedback negativo na comunidade do Vue. Isto deveu-se principalmente à falta de compreensão do que a API de Composição pretendia alcançar. Pensamos que a equipe central vue.js pretendia substituir a API de opções existente, que inclui coisas como os dados, os métodos nas seções computadas e substituí-la por uma coisa totalmente nova para aprender. Este não é o caso, no entanto, a maneira como escrevemos o código vue.js com a API de Opções ainda é completamente válida, e tudo o que cobrimos até agora é essencial para aprender vue.js. No entanto, com o Vue 3, a API de composição também é fornecida como uma forma adicional de escrever código Vue. Uma composição inferior é usada no lugar da API de opções existente. A equipe do Vue recomenda usar apenas a API de composição quando seu projeto existente está se tornando grande, difícil de manter e difícil de navegar como desenvolvedor. Na verdade, ambos podem ser usados juntos nos mesmos componentes, se necessário, tornando a refatoração muito mais suave. A motivação por trás da composição era tornar muito mais fácil organizar, manter e reutilizar nosso código. Componentes reutilizáveis nos levam até agora, mas o JavaScript real dentro desses componentes pode ser organizado de uma maneira melhor. Ele terá um componente típico do Vue que tem um usuário, produtos e uma cesta de compras. O código relacionado ao usuário está na seção de dados, montado, há um método, e também um relógio também. Nós também temos produtos em dados, nós buscá-los usando um método que é chamado quando o aplicativo monta, eo código restante é para a nossa cesta. O usuário pode atualizar ou adicionar produtos à cesta, eles podem então verificar com o conteúdo desta cesta, e nós também temos uma seção computada para mostrar apenas a cesta se o usuário tiver adicionado um item. Este é o código vue.js tradicional e nada de errado com isso. Por que introduzir uma nova maneira? Como mencionado anteriormente, isso é bom até que nossa aplicação fique muito maior. Este é um exemplo bastante simples onde podemos ver uma visão geral de alto nível de todo o nosso código, também foi simplificado para preencher esta página. Nós não temos código dentro de nossos métodos, e em uma aplicação real, este exemplo simples poderia facilmente ser 3-4 vezes mais longo. Outra desvantagem é que o nosso código relacionado está todo separado. Todas essas partes relacionadas não são coladas e só se torna um problema à medida que nossos arquivos ficam maiores. Esta é uma das coisas que a composição pretende resolver. Agora podemos escrever código mais como JavaScript tradicional e também agrupar nosso código muito mais facilmente. Em JavaScript regular, podemos escrever a seção de usuário assim, usando uma constante [inaudível] o objeto de uso, e uma função para obter o usuário de um banco de dados. Para os produtos, também poderíamos ter a matriz de produtos e também uma função para obter os dados que precisamos. Além disso, para a cesta relacionada ir para, talvez algum código que se sobrepõe abaixo da linha, mas já podemos ver que agrupando estes juntos para tornar o nosso código muito mais organizado. Mas onde colocamos todo esse código? Como sempre, ele vai em nossa seção padrão de exportação. Ambos isso, nós envolvê-lo em uma função de configuração dentro daqui, em seguida, também retornar qualquer coisa que queremos, em seguida, estar disponível para uso em nosso template, como nossas constantes e nossas funções. Também não vamos deixar o Vue para trás com esta nova sintaxe. Ainda temos acesso a coisas familiares, como ganchos de ciclo de vida, usando o prefixo on. Aqui, vemos OnMonted para obter o usuário, e também os produtos quando o componente montar. Também importamos isso da biblioteca Vue como uma importação nomeada, significa que importamos apenas as peças que precisamos. Além disso, coisas familiares como relógios e computados também está disponível. Neste exemplo aqui, importamos computado e envolvemos nosso código show basket com ele para mantê-lo atualizado com quaisquer alterações. A segunda coisa que a composição visa melhorar é a reutilização. Este refator que vemos não tornou os componentes menores ou mais reutilizáveis, ele simplesmente agrupou as seções relacionadas. Podemos querer reutilizar os objetos de uso e também os produtos também em uma parte diferente do nosso aplicativo. As soluções atuais incluem a possibilidade de obter esses dados em um componente de nível superior e, em seguida, passá-los para baixo como suporte. Embora isso possa ficar confuso quando os componentes estão profundamente aninhados, ele também pode colocar componentes de codificação que nunca foi planejado para estar em. Poderíamos também usar uma biblioteca de gestão de estado, como Vuex, que é uma boa opção e fornece uma loja central. Embora isso seja algo mais para aprender e também alguma maneira extra de adicionar ao nosso projeto, seria ótimo se Vue fornecesse nativamente uma solução para tornar nosso código mais facilmente acessível e reutilizável? Graças à composição, isso agora é possível movendo nosso código reutilizável para arquivos separados. O nome da pasta é obtuso, mas você pode vê-lo normalmente chamado composables onde cada seção do nosso código é então colocada em um arquivo JavaScript, comumente usando o prefixo de uso, que podemos então importar para qualquer componentes que precisam usá-lo. Isso deixa nossos componentes muito mais leves e reutilizáveis. Todo esse código pode parecer estranho e confuso no início, especialmente se você é novo no Vue. No começo, também me fez, mas vamos passar muito tempo escrevendo código de composição nas próximas seções, então você terá muita prática e isso logo se tornará mais familiar. 91. Configuração de composição: Nos slides anteriores, observamos como nosso código de composição entra dentro de uma função de configuração. Vamos agora configurar isso em nosso Apphome.vue, e aqui, precisamos de um script com nosso padrão de exportação. Então vamos passá-lo em nossa função de configuração, que se parece com isso. A instalação é executada antes que o componente seja criado. É aqui dentro onde vamos escrever nosso código de composição em uma sintaxe mais JavaScript. Como acabamos de ver no vídeo anterior, esta página inicial será o ponto de entrada para o nosso usuário. Vamos usá-lo para exibir uma lista de todas as categorias disponíveis para nossos cartões, aniversário e aniversário da criança. No arquivo data.js fornecido, vamos abrir isso, apenas aqui, cada um de nossos cartões tem uma seção de categoria que inclui um array. São esses dados que vamos fazer um loop para cada cartão para construir esta página. Então vamos precisar de loop através de todos os nossos cartões e, em seguida, vamos criar um segundo loop para percorrer todas as categorias e, em seguida, salvar estes. Primeiro de tudo, vamos importar esses dados que precisamos neste componente. Logo abaixo do script, vamos importar a matriz de cartões. O caminho do arquivo para isso foi.. /dados. Nós, então, normalmente definir os cartões para ser uma propriedade de dados. Mas com a composição, podemos criar uma constante regular JavaScript ou variável. Então vamos configurar uma constante chamada AllCards. Podemos inicialmente configurar uma matriz vazia. Além disso, precisamos de uma segunda variável que vamos usar para armazenar todas as categorias que encontramos. Vamos percorrer todos os nossos cartões. Então isso vai ser empurrado também. Vamos criar uma licença e vamos chamar isso de exclusividade. Poderíamos configurar isso para ser um valor inicial de uma matriz vazia, ou melhor ainda, podemos substituir isso por um novo conjunto. Um conjunto é uma coleção de valores, e assim como uma matriz, podemos fazer loop sobre eles também. Mas a diferença é que só aceitará valores únicos. Isso é ideal em alguns de nossos cartões têm a mesma categoria, então não queremos que esses dados sejam duplicados. Além disso, um objeto definido é JavaScript regular e nada relacionado ao vue JS. Em seguida, podemos criar uma função chamada GetUniqueCategories. Mais funções na composição, eles também podem ser escritos em qualquer outro tipo de JavaScript válido também, como funções de seta, se você preferir. Como esta função soa, isso vai ser responsável por atribuir todas as nossas categorias a esta variável. Então, para começar, vamos pegar todas as cartas. Na verdade, nós só precisamos atribuir isso a cartões em vez de nossa matriz, e então nós podemos loop sobre estes com ForEach como uma função e cada item irá armazenar isso na variável chamada cartão. Então lembre-se, cada cartão dentro de nosso arquivo de dados tinha essas categorias propriedades. Então vamos criar um segundo loop onde selecionamos nosso cartão e, em seguida, as categorias, e, em seguida, um segundo loop com ForEach, que leva na categoria. Em seguida, queremos empurrar esta categoria para UniqueCategories. Agora, se UniqueCategories fosse uma matriz, poderíamos usar o método push JavaScript. Mas desde que configuramos isso como um conjunto, precisamos usar o método add passando na categoria. Em seguida, fora de nossa função, podemos registrar este console para testar isso fora. Isso agora nos deixa com nossa função, mas agora, nós realmente precisamos chamar isso de código a ser executado. Então, para fazer isso, podemos adicionar isso para esperar onMontado gancho ciclo de vida onde estamos passando o nome da função. Ao usar o gancho do ciclo de vida, então você tem o mesmo nome que usamos anteriormente, como montado, mas para composição, adicionamos o prefixo on. Além disso, ao usar qualquer um desses recursos como esses dois, agora precisamos importá-los individualmente da biblioteca vue. Então, podemos importar, o nome importar o gancho de ciclo de vida OnMonted da biblioteca vue. Vamos tentar abrir as ferramentas de desenvolvedor do navegador no console. Aqui, vemos nosso conjunto com 11 valores. Vamos abrir isso, e veremos 11 valores únicos. Então, tudo isso é bom. Temos agora o que precisamos, mas também seria útil ter uma categoria para todos os cartões, e também podemos acrescentar isso. Então, no topo da nossa função, nosso loop também irá acessar nossos UniqueCategories, chamar o método add, em seguida, vamos adicionar a categoria all, refresh, agora temos 12 valores, que também inclui todos os categoria também. Finalmente, podemos retornar de configurar quaisquer valores que agora queremos disponibilizar para uso em nosso modelo. Este será um objeto, e a única coisa que precisamos para retornar ao nosso modelo é UniqueCategories. Então adicione isso, mova para o nosso modelo, podemos remover nosso cabeçalho de nível 1 e, em vez disso, colocar em uma lista não ordenada onde vamos percorrer todas essas categorias. Então, a classe de wrapper grade, vamos adicionar isso em breve para o nosso CSS, o item de lista, que terá a classe de item categoria. Nós também podemos passar em v-for para percorrer todos os nossos itens. Então vamos percorrer a categoria em categorias como em uma chave. Uma vez que usamos conjunto, cada uma de nossas categorias é única. Então também podemos usar isso como uma chave. Entre o item da lista, podemos criar isso em um link passando no link do roteador. Isso leva no para solicitar e passando todo o objeto onde o nome do link vai ser categoria, que nós configuramos sobre em nosso arquivo de índice de roteadores, vamos dar uma olhada, isso é apenas aqui. Na verdade, precisamos usar um C maiúsculo para esse nome. Além disso, passar em nosso objeto parâmetros para onde a categoria vai ser igual ou categoria do nosso loop v-for. Então, isso agora irá vincular a categoria de barra e , em seguida, barra para frente o nome da nossa categoria exclusiva também. Esse link também precisa de algum texto entre o componente de link do roteador. Então, passando nossa categoria entre as chaves duplas. Na verdade, isso só quer ser categorias únicas. É muito o nome que devolvemos da composição. Como agora estamos passando parâmetros para essa rota, também precisamos passar pelo arquivo de índice de roteadores e também adicionar um segmento dinâmico chamado categoria. Então, agora, se atualizarmos o navegador, não vemos nada na tela. Agora, isso parece estranho porque sabemos que temos as categorias porque nós as registramos no console aqui e vimos 12 valores únicos. Bem, a razão pela qual isso está acontecendo é por causa do gancho OnMounted. No início deste vídeo, mencionamos que a configuração é executada antes do componente ser criado. Mas OnMonted é chamado depois disso. Isso significa que estamos passando inicialmente UniqueCategories apenas aqui como um conjunto vazio. Inicialmente, este é o valor que está sendo retornado ao nosso modelo. Então estamos fazendo um loop através de um valor vazio. Isso basicamente significa que precisamos chamar nossa função GetUniqueCategories antes desta fase montada. Uma opção é remover o gancho OnMonted e chamar isso como uma função JavaScript regular. Como não estamos mais usando OnMonted, também podemos comentar isso e também o navegador, atualizar isso, agora vemos nossos UniqueCategories. Se clicarmos em qualquer um desses, vemos nosso componente categoria e, em seguida, levamos para a URL correta. Ou, alternativamente, se não precisarmos chamar essa função a qualquer momento, também podemos mover o wrapper de função e apenas deixar o código para executar dentro da configuração. Salve isso, e em nossa página inicial, isso também funciona exatamente da mesma maneira. A capacidade de adicionar em código como este para executar na configuração significa que, com a composição, não precisamos mais do antes de criar e também os ganchos de ciclo de vida criados. Ambos foram agora removidos em favor desta abordagem. 92. Tipos por referência vs primitivos: Para ajudá-lo a entender melhor a reatividade, vamos primeiro analisar a diferença entre tipos primitivos e de referência em JavaScript. Se você já está confortável com a diferença, você pode passar para o próximo vídeo. Caso contrário, este vídeo irá ajudá-lo a se preparar para os próximos vídeos. Você não precisa digitar isso ou seguir junto com essa codificação, mas há algo que eu quero mostrar para ajudá-lo a entender melhor o que vamos olhar para fora, e para ver isso, vamos para o app.vue e, em seguida, para baixo nossos roteiros. O que estou prestes a mostrar é passar um simples objeto como um adereço. Dentro deste app.vue, vamos criar uma seção de dados. Isso será muito parecido com o que tivemos nos primeiros vídeos. Vamos apenas retornar um novo objeto com um usuário. Este usuário criará uma propriedade name e também um ID de usuário. Até o modelo, o único componente que temos para passar adereços é esse cabeçalho do aplicativo, então vamos passar nossos adereços para isso. O usuário é igual ao usuário. Isto e, em seguida, podemos passar para este componente de cabeçalho do aplicativo e nós normalmente vamos fazer algo assim. Vamos criar uma seção de script. Configure os adereços. Se como um objeto ou uma matriz. Vamos manter isso simples e apenas passar isso como um array. Vamos então talvez aceitar esses adereços dentro da seção de dados, onde poderíamos definir uma propriedade date como o objeto use para ser igual ao nosso prop, que é this.user. Agora, isso recebe nosso adereço de usuário e armazena isso localmente nos componentes para que pudéssemos modificar isso, talvez usando um formulário com modelo V. Vamos fazer isso em qualquer lugar em nossos modelos. Configurar uma entrada baseada em texto. Poderíamos configurar modelo V, ligado ao nosso objeto de usuário. Vamos pegar o nome. Faça isso e vemos nossa entrada e nosso nome como esperado, mas se voltarmos ao nosso app.vue onde temos esses dados originais, vamos rapidamente produzir isso. Você precisa de chaves duplas colocadas no usuário. Agora temos nossos dados em dois locais. Temos os dados originais do nosso app.vue. Em seguida, aqui em cima, temos os adereços que foram copiados dentro deste cabeçalho aplicativo. Vamos dar uma chance a isso. Podemos modificar nossa entrada. Vamos adicionar algo aqui dentro. Vemos assim que atualizamos este cabeçalho aplicativo, que também, os dados dentro do app.vue pai também é atualizado. Agora, isso pode parecer um pouco estranho porque nós passamos isso para baixo como adereços, nós então tomamos uma cópia, e agora devemos estar apenas modificando os dados em nosso cabeçalho do aplicativo. Normalmente, esperaríamos que esse comportamento só acontecesse se emitissemos um evento personalizado para alterar os dados dentro dos pais. Mas isso está fazendo isso automaticamente. Vamos dar uma olhada em outro exemplo de volta no app.vue. O uso do objeto passará um nome de usuário simples, que é apenas uma string simples, e agora abrir o cabeçalho do aplicativo, também podemos passar isso como adereços. Nome de usuário para ser igual ao nome de usuário, e também saída isso dentro do nosso aplicativo. Para o cabeçalho. Passa isto para a nossa matriz. Faremos o mesmo que nosso objeto, passaremos isso para nossos dados. O UserNameProp será igual a isso.username. Vamos também duplicar a entrada, o tipo de texto, e desta vez, vamos V-model para o UserNameProp. Agora, se tentarmos modificar este nome de usuário, se não qualquer coisa, desta vez, não há alterações nos componentes pai. No entanto, se fizermos isso ao nosso objeto original, veremos que os componentes pai serão atualizados. Isso pode parecer estranho no início, mas não é um novo recurso JS. É algo relacionado a JavaScript e tipos de dados, que podem ser colocados em dois grupos e esses grupos são referidos como primitivos e tipos de objetos. Tipos de objetos em JavaScript são considerados funções, matrizes e um objeto em si. Primitivas são dados que não é um objeto e tipos de string, booleano, número, indefinido, símbolo e BigInt. A parte em que estamos interessados está dentro deste cabeçalho aplicativo, você terá todos os dois adereços de usuário, e nome de usuário e, em seguida, tomar cópias suficientes de ambos os valores. A diferença é que ambos os valores se encaixam em nossos dois grupos. Este primeiro é uma referência de objeto e o segundo é um primitivo. Este atual é um tipo de string e é aqui que reside a diferença. Quando copiamos um valor primitivo, assim como fazemos, copiamos neste nome de usuário, cada cópia contém seu próprio valor exclusivo. Você pode pensar nisso como dois valores separados, é por isso que quando atualizamos nossa entrada e nosso nome de usuário, o original não é afetado. Os tipos de objetos, no entanto, como temos com nosso usuário, se comportarão de forma diferente. Mesmo quando tomamos uma cópia de um objeto sobre os objetos que estão apontando para o mesmo valor na memória, mesmo que eles estão em diferentes componentes e locais. Isso também é conhecido como um tipo de referência, uma vez que todas as variáveis estão se referindo à mesma coisa e é por isso que vemos o nome original atualizado. Isso nos deixa com uma pergunta, por que usar coisas como emit para fornecer atualizações nos componentes pai? Por que não passar sempre tipos de objetos? Afinal, isso salvaria muito código. Esta é uma pergunta razoável e não há nada impedindo você de fazer isso se você quisesse, especialmente em um projeto menor e mais fácil de gerenciar. No entanto, geralmente é recomendado evitar isso, se possível, uma vez que pode começar a ficar confuso se várias fontes estão mutando o mesmo objeto. Uma opção é fazer um clone profundo do original e ainda usar as técnicas como emit para modificar apenas os dados dentro do componente pai. Também podemos nivelar ou reorganizar nossos dados para serem usados como objetos ou podemos reestruturar nossos adereços para apenas passar propriedades do objeto em vez do objeto completo. Outra opção é também passar o objeto como um valor inicial para o filho e, em seguida, modificar uma propriedade data diferente no pai. Seja qual for a opção que escolhermos, a chave é tornar as atualizações mais previsíveis e garantir que saibamos quais componentes ou métodos alteraram nossos dados a qualquer momento, vez de adivinhar qual referência aos dados causou as atualizações. Se tudo isso é completamente novo, pode parecer um pouco confuso, mas a coisa chave a lembrar é que um primitivo, assim como uma simples string ou número, é mais como uma cópia independente. Mas um tipo de objeto como este ainda apontará para o objeto original. Agora, não precisamos de nada disso em nosso projeto, isso é apenas para nossa demonstração, então podemos remover todos esses, incluir entradas em app.vue Nós não precisamos desses adereços e podemos remover nossas propriedades de dados também. Essa compreensão de referências a objetos e primitivos se tornará mais útil nos próximos vídeos, onde veremos como tornar nossos dados de composição reativos. 93. Introdução rápida a proxies: A reatividade livre é criada usando um recurso ES6 chamado proxies. Vue 2 usar um recurso ES5 chamado Object.defineProperty, que criou os getters e setters para atualizar nossos dados. Essas ressalvas bonitas, uma delas era ser de uma nova propriedade de dados foi adicionada após o carregamento do aplicativo, ele não se tornou automaticamente reativo. Poderíamos alterar propriedades de dados existentes, mas não adicionar novas dinamicamente. Isso está sendo resolvido com proxies. Um proxy é como um wrapper para um objeto. Este wrapper nos permite interceptá-lo e fazer alterações antes de executar uma atualização. Proxies podem ser um assunto complexo, mas vou dar-lhe uma visão geral rápida para que você tenha alguma compreensão básica. Neste componentes app.vue, vamos adicionar um exemplo simples ao nosso script. Para interceptar um objeto e fazer algumas alterações, primeiro precisamos de um objeto para trabalhar. Fora do nosso padrão de exportação, eu quero criar uma constante chamada estado, e configurar isso para ser um objeto, passando uma propriedade de usuário e também uma ocupação. Em seguida, podemos configurar um proxy com novo Proxy, P maiúsculo, que tomará os alvos e o objeto manipulador. Isso pode ser constante chamado proxy. Este alvo que vemos aqui é o objeto original que queremos proxy. Podemos nomear isso como estado, assim como nosso objeto logo acima, este é o alvo que queremos interceptar, em seguida, um manipulador que é um objeto para configurar ou queremos fazer para este objeto alvo original. Vamos também configurar isso também, contras manipulador, e assim isso seria um objeto. Depois que isso cria um log de console, eu estou novamente, indo para a saída do conteúdo enquanto proxy. Lembre-se, esse é o nosso ponto de proxy para o objeto original que você passa aqui. Este é o nosso estado. Isso agora nos dá acesso a todas essas propriedades, como o usuário e também a ocupação. Primeiro, vamos tentar o usuário, ir com o navegador, podemos entrar no console, abrir isso. Agora, vemos o nome de usuário do Chris, a ocupação. Lá vamos nós. Como você pode esperar aqui, vemos o usuário original sobre a ocupação original. Uma vez que este manipulador não está configurado para criar quaisquer modificações ainda, seu manipulador tem um número de funções que podemos usar. Estes são às vezes chamados de adereços. Uma dessas funções é get. Isso é usado para obter um de nossos valores de propriedade. Passe os alvos e o adereço, e então podemos fazer alguns logs de console para ver exatamente quais dados temos para cada um deles. Vá para o alvo. Então este é para o adereço. Salve isso e atualize o console. Em primeiro lugar, vemos os alvos, e se abrirmos isso, vemos o usuário e também a ocupação. Como este alvo é o objeto original, depois disso, vamos ver o adereço, que é a ocupação, e este adereço é a propriedade individual que estamos selecionando, no nosso caso, estamos selecionando a ocupação. Isso apontará para toda a ocupação dentro do console. O destino é o objeto de estado geral. Em seguida, o prop é a propriedade individual deste objeto. Agora, temos acesso a todas essas informações. Agora podemos interceptar esses valores e fazer o que quisermos com eles. Por exemplo, poderíamos retornar a prop original, que é ToupperCase. Salve e atualize. Vemos a ocupação que agora é maiúscula. É assim que funciona um proxy. Ele leva o alvo ou o objeto original, e então ele irá interceptar este objeto e pegar qualquer um dos valores. Podemos fazer o que quisermos com esses valores. Juntamente com gets, há também um manipulador funções também, tal conjunto, que é usado para definir os novos valores de propriedade. Tudo o que vemos aqui é apenas um JavaScript normal. Como tudo isso funciona com um Vue.js? Bem, tudo o que adicionarmos a uma seção de dados é automaticamente convertido em proxies. Qualquer coisa que adicionarmos em uma seção de dados dentro daqui será automaticamente convertida para ser um proxy do objeto original. Assim como este manipulador get apenas aqui, Vue também irá adicionar sua própria função de manipulador, que é proxy, que tem getters e setters para habilitar Vue.js para rastrear e atualizar os dados cada vez que há uma mudança. É assim que funciona para todas as propriedades de dados. Mas e as variáveis regulares que criamos com a composição? Bem, para este caso de uso, Vue também fornece alguns rappers para adicionar reatividade. Vamos dar uma olhada neles nos próximos vídeos. 94. Usando Reactive e isReactive: Para dar início a este vídeo no arquivo app.vue, podemos remover toda a demonstração de proxy do último vídeo. Remova tudo até este objeto de data. Agora vamos dar uma olhada em como podemos adicionar reatividade aos dados em nossa API de composição. Temos propriedades de dados que temos usado até agora no objeto de opções. Por padrão, tudo é reativo. Ou seja, se fizermos quaisquer alterações a esses dados, quaisquer outras partes do nosso aplicativo que dependam desses dados também serão atualizadas para na V3. Como mencionado no último vídeo. Isso ocorre porque o VGS converterá essas propriedades em proxies ao usar a composição. Agora essas variáveis que declaramos não são reativas automaticamente, assim como quando criamos variáveis com JavaScript regular. Estes são os que você adicionou dentro da função de configuração dentro da casa do seu aplicativo. Assim como as categorias únicas e todos os cartões. Você livre é muito mais modular do que V versão 2. Primeiro precisamos importar o pacote de reatividade, que precisamos da biblioteca de exibição. Isso significa que importamos apenas a parte que estamos realmente usando em nosso aplicativo. Vamos ver como isso funciona na composição. Dentro desta casa app e também dentro da função de configuração. Podemos criar um objeto JavaScript para manter algumas propriedades de dados. Vamos chamar esses dados, e definir isso igual a um objeto. Esse nome de dados é completamente diferente e não está relacionado a uma propriedade de datas regulares. Aqui dentro podemos adicionar algumas propriedades a isso e vamos para nome e também uma Ocupação. Agora, no momento, não temos nada para atualizar este objeto de dados. Para simular uma atualização e verificar isso, vamos criar uma função SetTimeout logo abaixo. Queremos que esta função seja executada a cada três segundos, que você possa passar em 3.000 milissegundos. Em seguida, vamos querer fazer para acessar o objeto de dados, e, em seguida, ele mudou os dados dentro, como a ocupação, ou acessar os dados, a ocupação. Podemos definir isso igual a aposentado. Verifique se isso está funcionando. Podemos devolver nossos objetos de dados da nossa composição. Isso agora significa que se rolarmos para cima até o modelo, agora podemos usar isso dentro do nosso código. Como este é um exemplo, podemos colocar isso em qualquer lugar. Isso é acessar nossos dados, ocupação de pontos, atualizar o navegador. Vemos o texto de um desenvolvedor web. Se esperarmos três segundos, não veremos nenhuma atualização para esse código. Mesmo que devêssemos mudar isso para aposentado depois de três segundos. Mesmo que nós estamos mudando isso depois de três segundos, ele apenas com JavaScript regular, a interface do usuário não será atualizada. Para isso, precisamos dizer ao VGS que queremos que esses dados sejam reativos. Esta primeira técnica que vamos dar uma olhada para fazer isso é importando, o pacote reativo. Primeiro, como mencionei antes, a visualização é modular, então precisamos importar isso da biblioteca de exibição. Isso é chamado de reativo. Podemos então usar este pacote reativo como um wrapper para todos os nossos dados. Vamos cortar este objeto em reatividade. Então, dentro, podemos colar em nosso objeto, atualizar navegador. Agora, após três segundos, nossa interface de usuário agora é atualizada com esses novos dados usando este wrapper reativo. Qualquer dado que está dentro do qual muda ou é atualizado, ele irá então notificar quaisquer outras partes do aplicativo que depende disso. No nosso caso, a Ocupação. Isso acontece porque o modo de exibição terá uma cópia reativa deste objeto original e, em seguida, envolvê-lo em um proxy. Reativo também é usado nos bastidores para converter objetos quando usamos as propriedades de dados com a API de opções. Se você queria executar uma verificação para ver se um objeto estava reativo. Também temos acesso ao É reativo. Isso também pode ser importado da biblioteca de exibição. É reativo agora pode ser usado para verificar se um objeto é um objeto normal, JavaScript, ou se é um proxy reativo. Você vê que este cria um log de console, o acesso é reativo. Em seguida, podemos passar em nossos dados, abrir as ferramentas de desenvolvedor para o console. Podemos ver que isso é verdade. No entanto, embora dentro de nossa configuração, também temos acesso aos nossos cartões que usam um objeto regular. Em vez disso, se colocarmos em todos os cartões, atualizar, agora vemos o resultado de false, uma vez que todos os cartões é um objeto JavaScript regular em vez de um proxy reativo. É assim que podemos usar o reativo. View também fornece um recurso de nunca reatividade chamado Raf, que agora vamos dar uma olhada. 95. Adicionando reatividade com Ref: Objetos reativos, assim como este, são ideais se tivermos várias propriedades, assim como fazemos aqui, especialmente se eles também estão relacionados e queremos agrupá-los juntos. Mas e quanto a valores mais simples, como strings ou números? Se tivéssemos apenas um único valor como um primitivo, digamos que um usuário, que era igual a uma string, também poderíamos colocar nossa propriedade de usuário em um objeto, assim como este, e então usar reativo, ou para valores como este , pode ser mais conveniente usar um ref. Agora, para ver um ref em ação, nós também precisamos importar isso da biblioteca de visão, e então, assim como reativo acima, nós também usamos ref como um wrapper, então quando podemos cortar isso e embrulhar isso dentro de nosso ref. Para usar isso em nosso template, também precisamos retornar isso da configuração, e vamos adicionar isso ao nosso template, e definir nosso usuário para ser igual a este usuário que acabamos de retornar. Está bem. Então, agora vemos nosso usuário dentro do navegador, mas também precisamos testar a reatividade também. Podemos fazer isso dentro do nosso tempo limite. Em vez de atualizar nossos dados, agora podemos atualizar o nome de usuário. Então isso e atualize o navegador. Vemos um erro informando que estamos tentando atualizar o usuário, mas isso é uma constante. Então, isso é justo o suficiente. Podemos mudar isso para deixar e ver o que acontece, e depois de três segundos, não vemos nenhuma atualização para este nome de usuário. Agora, isso pode parecer estranho, mas há uma razão para isso estar acontecendo. Nos bastidores, nosso valor de usuário, que temos aqui, também está sendo convertido em um objeto reativo, e para acessar o valor de nosso objeto, ele nos dá uma propriedade chamada valor, e precisamos fazer referência a isso cada vez que deseja acessar nosso usuário. Então, para acessar o nome dentro daqui, precisamos acessar user.value. Salve e atualize o navegador. Três segundos depois, nosso usuário está atualizado. Esta propriedade value sempre precisa ser usada ao trabalhar dentro da seção JavaScript. No entanto, acima no modelo, apenas aqui, como podemos ver, não precisamos usá-lo dentro do modelo. Ao acessar um valor ref dentro do modelo, o valor é automaticamente desembrulhado para nós. Agora, com ref e reativo, isso agora nos deixa com duas opções quando se trata de tornar os valores reativos, e de qualquer maneira, acabamos com um objeto reativo. O uso exato para ambos é bastante flexível, tanto como regra geral. Eu uso reativo quando eu quero agrupar várias propriedades ou valores em um objeto como sintaxe, em seguida, usar ref, assim como este, e vamos um único valor autônomo, como uma string, um número, ou até mesmo um único objeto também. Mas novamente, o caso de uso de ambos é bastante flexível e cabe a nós, como desenvolvedor, qual preferimos usar em nosso projeto. 96. Desestruturação e toRefs: Temos objetos reativos como temos aqui. Às vezes, você pode querer extrair um único valor deste objeto. Por exemplo, se eu tivesse um e-mail, bem, esse caso de uso e especialmente se precisarmos acessar vários valores, muitas vezes podemos fazer uso da destruição de JavaScript. Assim como este, poderíamos configurar uma constante chamada e-mail e extrair isso do nosso objeto de dados. Isso agora extrairá a propriedade de email e salvará isso na variável de email. Poderíamos também acessar vários valores se também quiséssemos o nome assim, poderíamos acessar o e-mail e também essas variáveis de nome também. Isso é bastante comum e isso é apenas JavaScript regular. Mas vamos ver o que acontece quando tentamos renderizar isso para o nosso modelo. Primeiro, precisamos retornar isso do nosso objeto e até o nosso modelo. Primeiro, vamos mudar isso para ser nosso objeto de dados completo, e depois disso, nosso e-mail. Mais uma vez, podemos rolar para baixo até nosso tempo limite definido e simular uma atualização alterando nossos dados. O que vamos fazer aqui é acessar nosso objeto de dados e atualizar a propriedade de e-mail. Pode ser qualquer corda. Vá para o navegador e atualize. Três segundos depois, nosso objeto de dados original que temos aqui, agora foi atualizado. No entanto, a nossa cópia que é armazenada dentro desta propriedade de e-mail ainda é o valor original. Isso acontece porque quando destruímos valores de um objeto como este, ele perderá toda a sua reatividade. Significa que quaisquer atualizações que fizermos para o objeto original não serão passadas para esta variável. Se ainda quiséssemos fazer uso da estruturação como esta, ainda vamos manter a reatividade. Podemos envolver este objeto de dados com algo chamado ToRefs. Abra a importação, vamos importar isso e, em seguida, use isso como um wrapper para nossos dados. Vamos experimentar isso, salvar isso e atualizar o navegador. Após três segundos, nosso e-mail no objeto de dados é atualizado, e também a cópia também. O que estamos fazendo aqui com ToReFS é efetivamente converter todas essas propriedades em nosso objeto para fazer uso de ref. Isso significa que podemos manter a reatividade, portanto, se algum desses dados mudar, nossa cópia também será atualizada. 97. Readonly (somente leitura): Às vezes, podemos precisar esperar para controlar exatamente quais componentes podem atualizar nossos dados. Se tivermos um objeto reativo que foi compartilhado entre vários componentes, podemos querer que todos leiam os dados ou apenas permitir que alguns deles atualizem. Para isso, temos disponível somente leitura, que leva um objeto. Isso pode ser um objeto JavaScript regular ou reativo, que usa ref ou reativo, e então retorna um proxy somente leitura para o original. Mais uma vez, precisamos importar isso da biblioteca do vue. No AppHome, em nossa instrução de importação, passe somente leitura. Então o que vamos fazer é pegar uma cópia somente leitura de nossos dados, armazenar isso em uma constante chamada ReadOnlyData. Então, assim como fizemos com reativo e com ISReactive, usamos isso como um wrapper, passando somente leitura e, em seguida, queremos envolver nossos dados de cima. Agora temos esses novos dados, que podemos retornar de nossa configuração e, em seguida, podemos produzir este loop no topo. Vamos limpar isto. Primeiro de tudo, vamos digitar somente leitura e, em seguida, vamos produzir nosso objeto somente leitura na propriedade e-mail. Além disso, o usuário, para que possamos testar o objeto original, ainda está funcionando. Podemos enviar os data.email. Até o nosso SetTimeout onde simulamos uma atualização. Dentro daqui ainda estamos atualizando o objeto reativo original e certamente novo endereço de e-mail. Então vamos para o navegador e atualizar e ver o que acontece. Após três segundos, a versão somente leitura e o original foram atualizados. Então isso significa que a cópia ainda está reativa. Vamos ver o que acontece se tentarmos atualizar a cópia no Timeout em vez dos dados. Vamos mudar isso para ser ReadOnlyData. Salve isso e atualize. Três segundos depois, nada acontece. Esta atualização falhará agora porque a cópia é somente leitura, e isso nos permite proteger todos os dados que não queremos alterar em nossos componentes, ou dados que você pode querer controlar mais de perto. 98. Computados: As propriedades computadas também estão disponíveis na composição e agora podemos usá-las para filtrar nossos cartões pela categoria selecionada. Mais nos componentes Apphome.vue, acima no modelo, temos um link que liga para a nossa categoria e, em seguida, cortar nossos parâmetros. Na verdade, isso pode ser encurtado e ver o mesmo nome e também na página de índice do nosso roteador. Nós já configuramos um caminho para lidar com isso e, em seguida, exibir nosso componente Categoria. Agora está dentro desta Categoria onde podemos lidar agora, filtrando esses cartões pela categoria clicada. Logo abaixo do modelo, vamos criar uma seção de script, e então vamos criar uma seção de configuração que vai lidar com todo o nosso código de composição. Precisamos acessar todos os cartões disponíveis para filtrar. Também podemos fazer isso reativo importando ref. Primeiro, vamos importar todos os nossos cartões e vamos importar estes de ponto barra e para os nossos dados. Como isso será reativo, também importaremos o ref da biblioteca vue para a configuração. Agora podemos importar nossos cartões para vue JS, armazenar isso dentro de uma constante chamada AllCards, como no ref como um invólucro, e vamos embrulhar nossos cartões. Apenas como uma medida temporária, vamos configurar uma constante chamada categoria. Isso vai armazenar na categoria que usam os cliques em tais como viagens, Halloween, ou aniversário. Mas em breve obteremos isso a partir dos parâmetros de URL. Agora, vamos definir isso para ser tudo. Em seguida, podemos configurar uma propriedade computada que observa esta categoria e quando ela muda, ele irá então retornar os cartões filtrados para baixo. Nós configuramos isso como uma variável ou uma constante e uma vez que eu chamar meu em CardsByCategory, e então podemos atribuir isso para ser um valor computado. Dentro daqui passamos em uma função que será executada cada vez que os dados mudam. Uma vez que agora estamos usando computado, isso também precisa ser importado da biblioteca vue. Agora, aqui dentro podemos retornar um de dois valores. Em primeiro lugar, se a categoria é igual a todos, tudo o que queremos fazer é devolver todos os cartões disponíveis. Não queremos realizar nenhuma filtragem. Vamos primeiro verificar se a categoria é igual a todos. Se for, retornaremos os dados, que são os AllCards. Uma vez que esta é uma referência reativa, também precisamos retornar o valor. Se isso não for igual a todos, isso significa que clicamos em uma categoria e temos alguma filtragem que precisamos fazer. Em vez disso, vamos retornar Allcards.value, chamar o método de filtro JavaScript. Isto irá então correr através de todos os nossos cartões e, em seguida, vamos executar uma função para cada um deles. Isso só retornará a versão filtrada de todos os cartões. Agora, precisamos passar no cartão individual e realizar um teste para cada um. O teste que vamos adicionar é percorrer o cartão, selecionar as categorias e, em seguida, queremos verificar se a categoria inclui um determinado valor. A categoria contra a qual queremos verificar é esta categoria apenas aqui. Só para recapitular, estamos passando por todos os nossos cartões e então vamos retornar uma versão filtrada. A maneira como filtramos é selecionando cada cartão individual percorrendo as categorias e verificando se ele inclui a categoria selecionada de cima. Pouco antes de fecharmos, preparem uma cinta. Então devolveremos isto. Podemos usar isso em nosso modelo, até o topo. Dentro do cabeçalho Categoria, o que vamos fazer é selecionar o roteador ou a rota atual. Então, quando clicamos em qualquer um destes, podemos então levar para a categoria barra para a frente e, em seguida, podemos acessar os parâmetros individuais. Selecione os parâmetros e o que nos interessa é a categoria. Verifique se isso está escrito corretamente. Ver aniversário, marido, esposa. Então, abaixo disso, podemos verificar a nossa propriedade do computador está funcionando, produzindo o CardsByCategory. Primeiro de tudo, vamos clicar em qualquer um desses links, vamos ver uma lista de todos os nossos cartões. Agora, nós não vemos a versão filtrada apenas aqui porque nós definimos a categoria para ser toda. Nós mudamos isso para ser qualquer outro valor, como aniversário. Agora só devemos ver os cartões que foram filtrados pela categoria de aniversário. Podemos tentar mais um. É por esposa, atualizar, e podemos ver a categoria do cartão número 1. Inclui a categoria de esposa. Agora, sabemos que isso está funcionando. Vamos agora passar para o modelo. Vou colocar isso em uma lista não ordenada, uma classe para o CSS que vai ser grade e isso é chamado wrapper. Em seguida, um item de lista que incluirá o loop for, que será cartão em CardsByCategory, uma chave. Cada um dos nossos cartões tem acesso a uma identificação única. Esta é uma chave ideal para usar. Entre este item da lista, também podemos permitir que o usuário clique neste cartão e, em seguida, encaminhá-lo para a tela de edição. Isso precisará de um link de roteador. Agora, vamos mantê-lo simples e vamos emitir o cartão.name. Ele também precisa da propriedade para. Vamos ligar isto à página inicial. Salve no navegador, clique em qualquer um deles e, em seguida, vamos levá-lo de volta para a página inicial. Agora, tudo isso funciona e um pouco mais tarde vamos voltar a isso e vamos vincular esses cartões à tela de edição. 99. Funções de composição autônoma: Dentro deste arquivo category.view, este código de composição que escrevemos até agora só resolve uma das preocupações, que é que agora podemos agrupar código relacionado. Por exemplo, temos essa variável de categoria, e temos isso organizado e colocado ao lado da nossa seção computada, que depende desta variável. Com a API de opções, por exemplo, essa categoria seria uma propriedade de dados. Então podemos ter esta seção computada muito mais abaixo em nosso componente. Outro benefício que a composição pretende resolver é a reutilização e organização. Mesmo que ainda não tenhamos escrito muito código para este projeto, já vimos algumas duplicatas. Por exemplo, aqui na categoria estamos importando cartões e depois atribuindo-os a essa constante. Mais na casa do aplicativo estamos importando os cartões e, em seguida, um pouco mais para baixo, estamos fazendo exatamente o mesmo aqui. Para ajudar com isso, podemos extrair nosso código de composição em funções autônomas. Estes também podem ser colocados em seus próprios arquivos separados. Para ver isso iria para a barra lateral, para a fonte, bem vamos criar uma nova pasta chamada composables. Este nome de pasta depende totalmente de nós, mas é comum salvar este composables nomeado. Então dentro vamos criar um novo arquivo JavaScript. Queremos que o nome do arquivo seja descritivo, e novamente, o nome depende totalmente de nós. Mas a convenção de nomenclatura comum até agora parece ter o prefixo de uso, então teremos nomes para nossos projetos como UseCards e também UseCategories. Este será para UseCards, e este é um arquivo JavaScript regular, então usamos a extensão the.js. Dentro deste arquivo, vamos exportar a função padrão. Quero dar o mesmo nome do nosso arquivo, que é UseCards. Isso agora significa que podemos extrair todo o código de composição de qualquer uma de nossas seções de configuração e colocá-lo nesta função. Podemos então importá-lo e ter acesso a todos os dados e todas as funções que colocamos no interior. Por enquanto, vamos selecionar AllCards, vamos copiar isso e depois colar isso em nossa função. Também precisamos ter acesso aos nossos dados e também importar o ref da biblioteca vue. Assim como aqui, vamos trazer esses dois lugares de importação fora da função e não precisamos computados. Nós não vamos trazer nenhuma das seções relacionadas à categoria porque estas vão para o seu próprio composable separado. Tudo que este arquivo é responsável por fazer é buscar os cartões iniciais de nosso arquivo de dados, e então, assim como quando usamos isso em nossos componentes, nós vamos retornar um objeto. Isto vai dar aos nossos componentes acesso a qualquer um dos dados, qualquer uma das variáveis, qualquer um dos métodos que temos nesta função. Isto é muito simples, tudo o que temos é AllCards, para que possamos devolver isto. No momento este arquivo não está realmente fazendo nada e ele está apenas sentado lá e podemos importá-lo quando precisamos dele. Mas, em seguida, vamos criar um novo arquivo, que é para o código relacionado à nossa categoria. Portanto, vamos dar a este um nome descritivo chamado UseCategory, com a extensão js. Configure nosso padrão de exportação com o mesmo nome que o arquivo. Isso também precisa retornar algo também. Para começar de novo na casa do aplicativo, este componente está recebendo uma lista de todas as nossas categorias que apenas aqui. Em seguida, na categoria estamos recebendo os cartões individuais para esta categoria selecionada. Faria sentido extrair todo este código relacionado a categoria de ambos os arquivos e, em seguida, colocá-lo em nosso novo composable. Eu vou para o UseCategory e para começar, vamos precisar de acesso a todos os nossos cartões que estão dentro deste UseCards. Lembrem-se que exportamos isto e devolvemos isto do nosso objecto. Agora podemos importar isso para o nosso composable, que era UseCards. O caminho do arquivo é. /UseCards, e esta é uma das coisas boas sobre composables. Podemos reutilizar dados entre cada um de nossos arquivos. Aqui temos efetivamente importado a função completa de UseCards. Agora queremos retirar a variável AllCards. Agora vamos armazenar isso em uma constante, isto é AllCards, e então vamos extrair isso de nossa função UseCards. Agora podemos começar a trazer todo o nosso código relacionado categoria a menos que vamos na casa do aplicativo. Nós já temos nossas seções AllCards, então pegue o UniqueCategories e também o loop logo abaixo. Podemos cortar isso e colocá-lo logo abaixo de AllCards. Então também precisamos retornar um UniqueCategories. Com isso agora extraído em seu próprio arquivo, podemos voltar para a casa do aplicativo ou quaisquer outros componentes que precisam dessas informações e importá-lo para usar. Bondade app home tem um pouco de código de exemplo, para que possamos remover tudo isso da função de configuração. Não precisamos de AllCards. Vou remover as declarações de devolução por enquanto. Não precisamos dos dados, então removemos todas essas importações. A importação que precisamos agora é a nossa UseCategory. Isso está importando nossa função UseCategory, e o caminho do arquivo foi a fonte, que é o símbolo at. Vamos para a pasta composable e, em seguida, para UseCategory, e certifique-se que isso está escrito corretamente, UseCategory. Esta função UseCategory está exportando nossos UniqueCategories, e agora podemos entrar em nossa seção de configuração e instalar dentro de uma constante. Isso é extrair UniqueCategories desta função UseCategory. Tornar isso disponível em nosso modelo, também precisamos retornar isso e abrir nosso modelo. Lembre-se, nós vamos fazer uso deste exclusivo Categories dentro deste loop v-for. Vamos experimentar isso, atualizar, agora não vemos nada dentro do navegador, então vamos dar uma olhada dentro das ferramentas de desenvolvedor no console. Vemos que Allcards.foreach não é uma função. Agora isso está acontecendo em nosso arquivo useCategory.js. Aqui estamos tentando loop sobre AllCards, e isso é jogado na seta porque quando escrevemos pela primeira vez a seção, AllCards constante não estava fazendo uso de refs. Mas aqui dentro de AllCards. Se passarmos para a seção onde isso é criado, abrimos isso em um ref, isso agora significa que precisamos acessar Allcards.value, e isso agora deve corrigir o problema. Ainda vemos uma seta não pode ler propriedade, e-mail e isso provavelmente é do modelo. No entanto, também podemos remover isso, basta tentar mais algumas, e há todas as nossas categorias agora de volta na tela. Mas desta vez a partir de uma função de composição. 100. Mini desafio: movendo os cartões por categoria: Embora todo esse novo código possa parecer muito para assimilar, mas como acontece com a maioria das coisas, é preciso apenas um pouco de prática. Isso também foi confuso para mim no início também quando comecei a aprender todo esse novo código de composição. Mas no final deste projeto, teremos muito mais prática a partir de agora, onde também vamos passar o código desta categoria.vue. O que eu gostaria que você fizesse é olhar para esta seção de configuração, vamos remover todo o código relacionado à categoria e mover isso para o nosso composable UseCategory. O código relacionado que precisamos é esta constante. Também precisaremos dos cartões por categoria. Você também precisará importar a seção computada e mover todo esse código, assim como fizemos no último vídeo com AppHome. Então você precisa limpar este componente para remover qualquer código não utilizado, e também importar nosso arquivo de composição, assim como fizemos no último vídeo. Então dê uma chance, e se você ficar preso, eu vou passar por isso no próximo vídeo. 101. Movendo os cartões por categoria: Vamos agora passar por cima do código relacionado à categoria a partir desta categoria dotVue. Se você estiver confiante de que o seu está funcionando corretamente e você o concluiu com sucesso no último vídeo, você pode ignorar este vídeo. Para começar, precisamos desta categoria constantes e também nossa seção computada também. Corte isso, vá para o UseCategory, cole isso. Então também precisamos retornar o CardsByCategory, então eu vou usar isso em mais de arquivos. Isso também está fazendo uso de computado, por isso também precisamos importar isso, apenas biblioteca Vue. Salve este arquivo, e de volta para a categoria, agora precisamos limpar todo o código não utilizado. Não precisamos dos AllCards, não precisamos dos dados, também podemos remover a importação da nossa biblioteca do Vue e substituí-la pelo nosso UseCategory. O símbolo @ para a pasta de origem, composables, UseCategory para baixo durante a configuração. Tudo isso dentro de uma constante, e lembre-se mais no UseCategory agora podemos retornar em nosso CardsByCategory, para que possamos importar isso dentro das chaves. Estamos importando perdido de nossa função que foi UseCategory. Ainda estamos retornando este CardsByCategory e usando isso em um modelo. Vamos salvar esse arquivo e tentar isso. Quando clicamos em qualquer uma dessas categorias, vemos o título da categoria está mudando. Atualmente, nós ainda temos apenas as mesmas cartas para cada uma, porque nós definimos isso como a categoria em nosso composable. Mas isso é algo que vamos abordar no próximo vídeo, onde vamos dar uma olhada em como podemos acessar um roteador dentro desses arquivos. 102. Acessando o roteador: No momento, quando clicamos em qualquer um desses links aqui, somos levados para a página da categoria, mas ainda vemos os mesmos cartões para cada um deles. Então, esta categoria de crianças ainda mostrará o primeiro aniversário. Vá viajar, veremos as mesmas cartas. Isso ocorre porque em nosso uso category.Js, onde você define a categoria, se é valor fixo, esta categoria fixa significa que os valores são sempre os mesmos, independentemente da categoria que clicamos. Neste vídeo, porém, vamos substituir isso e torná-lo mais dinâmico acessando-o, os parâmetros de URL. Então, atualmente, temos esse parâmetro de viagem. Nós clicamos em qualquer um desses. Elas sempre aparecerão dentro da URL. Então o que vamos fazer agora é pegar esse parâmetro e, em seguida, fornecer isso para a nossa seção computada. Onde vamos fazer isso é acessando o roteador na categoria.vue. Então, cada vez que chamamos causado por categoria, vamos passar em um parâmetro para esta função, e então podemos usar isso dentro daqui, em vez deste valor embutido. Então vamos começar a trabalhar com a passagem do nosso roteador para esta função. Com a API de Opções, podemos fazer algo assim. Poderíamos acessar this.router.params, e isso funcionará perfeitamente definido com a API de Opções. No entanto, ao usar a composição, esta palavra-chave não está disponível. Então precisamos acessar o roteador de uma maneira diferente. Para isso, o pacote relativo da view nos permite importar funções do pacote do roteador. Podemos acessar UserOuter totalmente completo objeto roteador ou Useroute para as informações atuais do roteador. Primeiro, precisamos importar isso do pacote do roteador de exibição. Então o primeiro foi UserOute o segundo foi UserOuter, e este é do pacote VureRoute UserOute o segundo foi UserOuter, . Para acessar ambos em uma configuração, vamos então instalá-los dentro de consoantes. Então, o primeiro é o roteador, que é igual a UserOuter. Esta é uma função, então ele precisa chamá-la. A segunda é a rota individual e a maior parte é igual a Useroute. Essas duas constantes agora funcionarão como anteriormente quando acessado $Router para o pacote completo do roteador e o $Route, que é a rota atual em que estamos, portanto, ainda temos acesso a todas essas mesmas coisas, como router.push, onde podemos navegar através de uma nova página. Bem, aqui é onde só precisamos acessar a rota atual desde que queremos, selecionar os parâmetros. Então, podemos remover o roteador e também a importação também, e podemos verificar se temos todas as informações que precisamos com console.log. Passe na rota. Params. Atualize e abra as ferramentas de desenvolvedor no console. Tenha o aniversário, que vemos aqui, e também o casamento. Então agora podemos fazer uso disso com o console.log, e agora podemos passar isso para a nossa função quando a chamamos. Então o route.params, e queremos acessar o parâmetro de categoria. Agora, vamos para usar a categoria onde podemos agora passar isso para a nossa função. Uma vez que nomeamos esta categoria, também podemos remover a nossa constante de categoria de baixo, e agora no lugar desta seção computada, vamos usar a categoria que é passada para esta função. Vamos testar isso. Para o navegador. Vamos para a esposa. Veremos o que tínhamos antes. Comemorar. - Tudo. Viajar. Então, todos eles estão funcionando atualmente, mas se clicarmos em nossos links gratuitos sobre o topo, clique em todos eles e nossos cartões permanecem exatamente os mesmos. Então, atualmente, esses três links de navegação não funcionam, mas isso é algo que vamos consertar muito em breve. 103. Watch e WatchEffect: Descobrimos no último vídeo que quando clicamos em qualquer um desses links de categoria, tudo isso funciona bem e filtra nossos cartões pela categoria selecionada. No entanto, se clicarmos em qualquer um desses links de navegação, o primeiro será inicialmente carregado corretamente da página inicial, mas se tentarmos alternar entre esses links de categoria, não veremos mais nenhuma atualização. Isso acontece por causa do roteador de exibição, e a razão é porque quando estamos na página inicial, assim como nós clicamos em qualquer uma dessas categorias, estamos mudando do componente home para o componente de categoria. Esta mudança de rota ou mudança de componente faz com que nosso componente rerenderize, portanto, mais uma vez, chamando nossa função de categoria. Mas quando já estamos no componente categoria assim e alternamos entre esses links nav gratuitos, estamos ficando neste componente categoria, mas basta mudar agora os parâmetros. Quando fazemos algo assim, as rotas de visualização não rerenderizarão os componentes porque ainda estamos neste componente de categoria, e por razões de desempenho, ele não rerenderizará esses componentes apenas para uma mudança de parâmetros. Como o roteador de exibição não rerenderizará esses componentes para uma mudança de parâmetros, precisamos agora ter cuidado com isso manualmente. Nós já olhamos para um observador durante este curso, e eles podem ser usados com composição também ao lado de uma nova versão chamada WatchEffect de na categoria de uso composable. Dentro desta função vamos receber o novo nome de categoria dos parâmetros do roteador, e então dentro de nossa seção computada, nós enviamos de volta os cartões com base nesta categoria, e passamos esta categoria para o nosso arquivo apenas aqui. Uma vez que este componente category.vue não está sendo re-renderizado quando clicamos nesses links de navegação, o que vamos fazer é remover esta seção apenas aqui e usar um roteador diretamente dentro de nosso composable, este nos permitirá então colocar um observador neste roteador ou, mais especificamente, parâmetros que precisamos e, em seguida, acionar as atualizações uma vez que haja uma alteração nesses parâmetros. Para fazer isso, ele funciona exatamente como olhamos para o interior dos componentes, primeiro precisamos importar Useroute do vue.router, e então dentro da função vamos salvar isso dentro de uma constante chamada rota. Uma vez que agora acessamos este roteador diretamente, também podemos remover isso de nossa category.vue. Vou remover isso, vamos passá-lo para a nossa função, também podemos remover a importação do roteador e também a constante também. Uma vez que não postamos mais sobre isso, também podemos remover isso de dentro daqui. Mas lembre-se que esta seção computada ainda está esperando uma categoria, então agora podemos criar um localmente para substituir o que acabamos remover, então const categoria. Isso também será igual a route.parameter.category, mas desta vez vamos fazer isso reativo passando isso dentro de ref, e puxar isso logo acima. Uma vez que esta categoria é agora um ref, também precisamos acessar o valor do ponto e também na seção de inclusões também. Algo que precisamos notar aqui é esta categoria, ele só vai ser assinado com o valor inicial quando este carregar. Em seguida, precisamos observar manualmente quaisquer alterações nesses parâmetros e, em seguida, atualizar esse valor. Para provar isso, agora podemos registrar isso no console logo abaixo, então registre a categoria.value, abra as ferramentas do desenvolvedor, atualize a página, para que vejamos o aniversário. Como mencionado anteriormente, se formos para a página inicial e, em seguida, clicar em uma categoria, vemos a correta apenas aqui. E se alternarmos entre esses três links na parte superior, vemos que a categoria não é atualizada. O que agora precisamos fazer é atentar para a mudança para esses parâmetros, obter a categoria, e uma vez que isso é reativo isso irá então executar novamente nossa seção computada e, em seguida, atualizar nossos componentes. Para isso, vamos importar relógio da biblioteca Vue e, em seguida, passar isso para dentro daqui. Quando usamos o observador, estamos compondo em todos os dados que queremos assistir, como um ref ou uma propriedade reativa. Aqui se passarmos na categoria, nesta ocasião isso não seria útil, sabemos que isso não vai funcionar porque como acabamos de verificar no console, esta categoria não será atualizada quando houver uma mudança de parâmetros. Em vez disso, podemos substituir isso por uma função getter, que vai retornar o valor do nosso roteador diretamente, acessar a route.params.category e, em seguida, separá-lo por uma vírgula, assistimos a uma função de retorno de chamada, que é vai correr quando houver uma mudança. É dentro desta função de retorno de chamada onde queremos atualizar o valor da categoria com os novos parâmetros do roteador, então category.value será igual a route.params.category. Vamos experimentar isso no navegador, e graças ao nosso observador, esses links de navegação funcionarão agora. Este observador que acabamos de usar é o mesmo que quando olhamos anteriormente com a API de opções, mas há também outro tipo também, que é chamado WatchEffect. Com isso, também precisamos importar isso. WatchEffect é um pouco mais simples do que assistir, e parece com isso. Dentro dos colchetes, podemos então passar em qualquer função que queremos executar, então, apenas como uma demonstração, poderíamos fazer um log de console, olhar o valor da nossa categoria. Esta função dentro daqui será executada cada vez que os dados dentro muda. No nosso caso, cada vez que o valor da categoria muda, devemos ver um novo log de console, no console, clique com o botão direito do mouse e inspecionar, atualizar a página, e agora nós apenas rota de aniversário, então vemos isso executado por aniversário Natal, e este WatchEffect agora é executado novamente para cada alteração de parâmetro. WatchEffect é um pouco como uma propriedade computada, passamos em uma função que é chamada uma vez qualquer propriedade reativa dentro muda, mas a diferença é que ele também pode executar efeitos colaterais também. Então, em vez de calculamos que só pode retornar um valor, WatchEffect, por outro lado, pode atualizar diretamente nossos dados ou estado. Há também algumas diferenças entre o relógio e o WatchEffect também. Observe como quando recarregamos o navegador, vemos a categoria imediatamente. Se voltarmos ao console e atualizarmos, veremos que um registro do console foi executado imediatamente, mesmo que não tenhamos clicado em nenhum desses links. Isso ocorre porque WatchEffect será executado imediatamente e também quando os dados dentro de alterações. No entanto, o relógio é considerado preguiçoso e só será executado após uma alteração de dados. Outra diferença é o relógio também nos permitirá acessar o anterior e os próximos valores também, e passamos estes para esta função callback. Se quiséssemos acessá-los, poderíamos passá-los com nomes de variáveis, então temos acesso a estes dentro de nossa função. Atualmente não precisamos de acesso ao WatchEffect para nossos projetos, então eu vou remover isso, e nós também precisaremos remover a importação também apenas para recapitular tanto o relógio quanto o WatchEffect, vamos executar novamente quando os dados observados são alterados. Como acabamos de ver, WatchEffect também será executado imediatamente mesmo se não houver alteração de dados, e já vimos isso antes com o log do console. Se precisarmos acessar os valores anteriores e próximos, podemos fazer isso passando-os para a função de retorno de chamada de observadores e usá-los exatamente como fizemos com a API de opções. 104. Usando a API de opções: Já sabemos que a composição não se destina a substituir completamente a API de opções. Mas e se você quisesse usar os dois ao mesmo tempo? Dentro do nosso aplicativo home dot view componentes, temos esta função de configuração. Ainda podemos analisar em seções ao lado de nossa função de configuração a partir da API de opções. Como se quiséssemos acessar qualquer dado, assim como fizemos em projetos anteriores. Pode ser benéfico usar ambos durante a transição ou refatoração das opções para a composição à medida que seu aplicativo cresce, ou até mesmo mover gradualmente um aplicativo da visualização 2 para a visualização 3. Algo que precisamos ter cuidado, embora ao fazer isso, é que os dados não são transferíveis em ambos os sentidos. [ inaudível] podemos adicionar um nome aos dados e à configuração. Primeiro de tudo, uma propriedade name para os dados e, em seguida, criar uma constante dentro da configuração. Também precisamos retornar isso, para que possamos usar isso dentro do modelo [inaudível]. Vamos agora produzir o valor de nossos dados corretamente. Isso pode ir a qualquer lugar. Analisando o nome que é igual à nossa propriedade de dados do nome. Veja isso, precisamos ir até o link inicial, esse é o nosso nome no fundo, como esperado. Mas e sobre acessar nosso código de composição dentro de nossas propriedades de dados? Se quisermos acessar o nome completo dele aqui dentro, talvez sejamos tentados a fazer algo assim. Poderíamos acessar esse nome completo, experimentar isso. Esse é o nosso nome completo que é da função de configuração. Como vemos, a seção de dados tem acesso ao nosso código de composição. Isso também se aplica a outras seções na API de opções, não apenas aos dados. Poderíamos acessar nosso código de configuração dentro de métodos e computadores, e isso também funcionaria. Mas e o contrário? Mais uma vez, vamos tentar isto. Podemos restabelecer o nosso nome e, em seguida, podemos tentar acessar esta propriedade de dados dentro da configuração; este nome de ponto. Também precisamos mudar o nome para ser o nome completo, e vemos uma tela em branco. Percebe quaisquer erros dentro das ferramentas do desenvolvedor. Não podemos ler o nome da propriedade indefinido. Ok, então vamos tentar sem essa palavra-chave, atualizar. Ainda não temos acesso a este nome. O problema que temos aqui quando fazemos as coisas desta forma é a função de configuração é resolvida antes da API de opções. Portanto, a função de configuração não pode acessar nenhuma de nossas propriedades de dados. Esta palavra-chave também não está disponível dentro de uma configuração. Se fosse, ele se comportaria de forma diferente de como esperaríamos que ele se comportasse dentro da API de opções, então ele foi removido para evitar qualquer confusão. Então, só para ficar claro, não podemos usar essa palavra-chave dentro da função de configuração. Mas como acabamos de ver, ele funciona de forma inversa, e podemos acessar nossas propriedades de configuração dentro de nossos dados ou nossa API de opções. Podemos limpar este código. Nós não precisamos de acesso ao nome completo e mover isso a partir da instrução return, a seção de dados, e também a saída dentro do modelo. Esta é uma introdução à API de composição. Na próxima seção, vamos continuar com nosso projeto, e também teremos muito mais prática usando a composição à medida que avançamos nesses vídeos. 105. Introdução: continuando nosso projeto: Eu gosto de dar meus cursos muito práticos e práticos. Nesta próxima seção, vamos colocar todo o conhecimento de composição que aprendemos em nossos projetos de cartões criativos. Vamos continuar pegando o cartão selecionado, qual o usuário clica. Vamos recuperar as páginas. Mudaremos entre as diferentes páginas para as cartas. Adicionaremos nossas entradas de texto para nossas seções, nossas saídas de texto para que o usuário possa visualizá-las. Permitiremos que as seções sejam atualizadas, reorganizadas, editadas e muito mais. Esta será uma boa oportunidade para reforçar o nosso conhecimento de composição juntamente com a construção do nosso projeto. Vejo-te lá dentro. 106. Vinculação a um cartão selecionado e estilização de categoria: Para esta próxima seção, vamos continuar com nosso projeto e reforçar o que aprendemos até agora sobre Vue e composição. Começando com um pouco de estilo para as categorias, atualmente, temos dois arquivos que precisam de um layout de estilo de grade, e esta é a category.vue. Temos essa classe de wrapper de grade, e isso vai listar todos os nossos cartões em um layout de estilo de grade. O mesmo sobre o AppHome, fazer uso da mesma classe apenas aqui. O app.vue tem uma folha de estilo na parte inferior que não tem o atributo scope. Então eu vou adicionar o estilo para esta grade aqui dentro. Portanto, isso significará que ele será aplicado a todos os componentes que usam essa classe. Então vamos adicionar isso em, e isso vai entrar dentro de uma consulta de mídia. O layout de estilo de grade só se aplica quando obtemos mais de 600 pixels. A primeira consulta de mídia à qual vamos aplicar isso é a largura mínima de 600 pixels. Pegue o invólucro da grade. Primeiro acima é exibido para a grade, em seguida, as colunas do modelo de grade. Para esta consulta de mídia em particular, vamos colocar dois cartões lado a lado. Vou definir isso para ser repetido. Um precisa ser repetido duas vezes. Então, se passarmos em uma unidade fracionada, ambas as colunas ocuparão a mesma largura disponível. Colocar espaço entre esses cartões também irá colocar em um espaço de grade de 10 pixels. Para o navegador, agora vemos o layout inicial do nosso sistema de grade. Além disso, se você clicar em qualquer um desses cartões, vemos que o mesmo se aplica a este componente também. Em seguida, teremos mais espaço disponível. Vou adicionar uma segunda consulta de mídia. Vamos copiar esta seção, colar isso logo abaixo. Para isso, vamos fazer este 1.000 pixels. Já temos o tipo de exibição declarado e também a lacuna da grade. Tudo o que precisamos fazer aqui dentro é as mudanças para ter três colunas de largura. Então, quando esticamos isso para ser mais de 1.000 pixels, ele então muda para ser três colunas. Em seguida, de volta à página inicial, vamos definir um CSS mais específico para este componente específico no AppHome. Coloque a seção de estilo na parte inferior. Isto é apenas CSS normal. Cada um desses itens dentro de nossa grade tem a classe de item categoria. Vamos apenas definir um gradiente de fundo em torno cada um e também adicionar algum preenchimento para espaçar cada uma dessas categorias. Vamos pegar isso, o item da categoria. O fundo vai ter em um gradiente linear, que nos permitirá fazer a transição entre duas cores. As duas cores, eu vou passar em valores RGB no primeiro de 253, o verde, 207, e também 207 para o azul também. Separado por uma vírgula, o segundo valor RGB será vermelho de 140, 140 para verde também, e também 236 para o azul. Isso nos dá o gradiente de rosa para roxo, e também, a cor foi de cima para baixo. Eu só vou compensar isso colocando em um ângulo como o primeiro parâmetro de 30 graus. Isso apenas mudará a cor para oito ângulos diferentes. Em seguida, algum preenchimento para dar a isso algum espaçamento do texto de seis rems na parte superior e inferior. Não precisamos de nada à esquerda e à direita, já que estamos usando esse layout de grade. Este item de categoria está aplicando estilos a cada um de nossos itens de lista. Agora, para adicionar algum espaço no topo desta lista não ordenada, vou agora selecionar a lista não ordenada no lugar em um rem de margem no topo. Isso nos dará o nosso espaço no topo do cabeçalho. O texto para cada um deles é cercado neste link de roteador. Lembre-se de que o link do roteador produz um elemento HTML. Também podemos usar isso no CSS. Tudo o que vamos fazer aqui é definir o tamanho da fonte para 20 pixels. É um pouco maior. Ainda podemos clicar neles e passar para a categoria individual também. Quando passamos por esta página, isso é controlado pelo componente category.vue. Atualmente, quando clicamos em qualquer uma dessas placas individuais, temos apenas o link do roteador apontando para a barra direta. Mas o que queremos quando clicamos em qualquer um desses cartões em vez este para ser levado para os cartões reais para que possamos editar. A tela de edição de qualquer um dos nossos cartões é este componente de criação, que adicionamos no início. Agora, vamos para a nossa categoria e podemos mudar este link de roteador para ser dinâmico, fechar na barra lateral e, em seguida, colocar nele os backticks. Precisamos ir para o /create, tem agora uma variável que vai ser o card.id. Lembre-se, temos esta variável de cartão a partir deste loop logo acima. A primeira coisa que queremos ver é a primeira página deste cartão. Mais tarde, também adicionaremos alguns links para esta página de criação, que nos permitirá alternar entre a frente, o interior esquerdo, o interior direito, e também o verso também. Agora, com esse link no lugar, precisamos passar para a página de índice de roteadores, e também alterações criar componente para. Ao invés de ir para /create, nós também queremos pegar nossas variáveis, que é o ID do cartão e também a página atual. O primeiro parâmetro é para o nosso id e o segundo é para a página. Esse é o meu resultado. Aniversário, este é o cartão com o ID de um, mas depois levado para a primeira página. Vamos tentar o Halloween. Este é o cartão número 5. Isso tudo está funcionando bem também. Vamos nos concentrar neste criar vue no próximo vídeo. Mas, por enquanto, vamos voltar para esta seção de categoria onde vamos terminar esta grade, adicionando uma imagem de pré-visualização em vez do nome do cartão. Na pasta de ativos, nas imagens, temos esta seção de visualização do cartão. Isto tem uma imagem com uma pré-visualização da primeira página de cada um dos nossos cartões. Além disso, cada um tem o título com o ID correspondente para esse cartão específico. Tudo o que precisamos fazer é acessar o ID do cartão e, em seguida, vinculá-lo a este caminho de arquivo. Na seção de categoria, em vez de enviar este nome de cartão, vamos passar no elemento de imagem, passar em v-bind para a fonte, e, em seguida, dentro dos backticks, podemos adicionar o nosso URL dinâmico. O e comercial será vinculado à origem, à pasta de ativos, às imagens, às visualizações do cartão. Cada uma destas pré-visualizações de cartão tem um nome que liga a este card.id. Também passando o tipo de arquivo também. Voltando ao navegador, não vemos nenhuma imagem exibida no. Temos um erro de ortografia aqui. Tente novamente e ainda não vemos nenhuma imagem para esta tela. Agora, isso acontece quando usamos em uma imagem dinâmica como estamos aqui. Poderíamos colocar em uma string de imagem estática sem variáveis, e isso funcionaria completamente bem. Por estático, queremos dizer se não temos este dois-pontos e a ligação, e não temos nenhuma variável dentro, podemos apenas vincular ao 1.jpg com os backticks. Este funciona completamente bem. Esse caminho dinâmico de arquivo falha porque nos bastidores, usamos no que é chamado webpack. Webpack é usado para agrupar todos os nossos arquivos e todos os nossos ativos do diretório fonte em um grande pacote JavaScript. Este é qualquer pacote que é servido ao navegador quando visitamos nosso site. Mas o problema é que quando este caminho de arquivo é dinâmico, webpack não sabe que os resultados desta variável são compilados tempo. Neste estágio de compilação, ele sabe que há uma variável dentro aqui, que pode mudar, mas ainda não sabe o valor exato. Há algumas maneiras de resolvermos isso. Poderíamos mover as imagens para a pasta pública e isso funcionará completamente bem. Ou, em vez disso, poderíamos permitir webpack e dizer-lhe que precisamos passar esta cadeia dinâmica por rugosidade em exigem. O que precisamos fazer para isso é colocar para fora esta cadeia completa nos backticks conforme necessário. Então, dentro dos suportes, colamos em nossa corda. Nós vemos imediatamente no navegador, ele agora teria nossas imagens na tela. Claro, eles são muito grandes. Então o que vamos fazer é ir até o app.vue e também direcionar todas as imagens que estão em nosso aplicativo e definir a largura máxima ser 100 por cento. Salve isso. Ele agora deixa um layout de grade agradável para nossos cartões. 107. A visualização de criação: Clicar em qualquer um desses cards selecionados agora nos vinculará a este componente Criar. Esta página é o que queremos trabalhar agora. Vamos dividi-lo em duas seções. A seção esquerda terá uma visualização do cartão, que mostrará as cartas iniciais e também quaisquer alterações que faremos também. Em seguida, a seção direita será usada para editar este cartão, incluindo as imagens e também as seções de texto também. Para essas seções, para a visualização e a seção de edição, vamos criar dois novos componentes na pasta de componentes para mantê-los organizados, uma pasta chamada cartão. Isso agrupará todos os nossos componentes relacionados a cartões. Um novo arquivo. Um deles é o Cardedit. Vue. Além disso, o segundo, também na mesma pasta é para a visualização do cartão. Agora, ambos eles vão ter apenas um modelo simples com um cabeçalho de nível 1. Esta é a pré-visualização do cartão. Pegue isso e salve. Então podemos colocar isso dentro do CardEdit. Como acabamos de mencionar, ambos os componentes serão exibidos dentro deste create.vue. Para começar a criar uma seção de script, que será usada para importar ambos os componentes, o primeiro, o CardPreview para a origem, os componentes, a nova pasta de cartão e o CardPreview. Duplicar isto. Este é para o CardEdit. Dentro da exportação, registraremos nossos componentes. Isto é tudo o que precisamos para o nosso guião, por enquanto. Eu iria até o nosso modelo. Vou criar uma div com a classe de card_wrapper. Esta é a div wrapper principal para ambas as seções. Teremos a pré-visualização à esquerda e a seção de edição à direita. Isso só significa que podemos direcionar a seção com nosso estilo. Primeiro, a seção esquerda e depois a seção direita. A esquerda é para o CardPreview. Agora, coloque a seção CardEdit à direita. Vamos ver se está tudo bem. Refresque. Temos os componentes CardPreview e CardEdit. Claro, estes não estão dispostos à esquerda e à direita ainda porque precisamos ir até a seção de estilo e adicionar algum CSS a este card_wrapper. Ele também vai ser escovado. Para iniciar o tipo de exibição de flex, e a direção flex padrão é linha, que colocará esses dois componentes na página. Além disso, este wrapper principal terá uma cor de fundo. Vamos pegar o simples e ir para uma cor cinza claro de EEE, uma sombra de caixa de um pixel, um pixel, dois pixels. A cor do DDD e a sombra a ser inserida. Isso significa que a sombra será colocada dentro de nossa seção em vez de fora. Em seguida, vamos dar uma olhada na versão final e entrar em um desses cartões. Vemos que tanto esta seção à esquerda quanto a seção à direita são iguais. Para conseguir isso, vamos pegar nosso card_wrapper, e cada um deles foi embrulhado em uma seção. Torne os dois iguais. Podemos passar em um valor flexível de um e também um pouco de preenchimento no interior de 10 pixels. Refresque. Agora, esse valor flexível de um será aplicado a ambas as seções, dando-lhes espaçamento igual. Agora, temos este layout todo configurado. No próximo vídeo, vamos realmente exibir o cartão selecionado nesta página. 108. Recuperando o cartão selecionado: Ao selecionar qualquer um desses cartões da nossa grade, então tomamos essa ótima visão, e também temos acesso ao ID do cartão selecionado. Isso significa que podemos usar isso para obter o cartão que precisamos exibir, e isso também pode ir dentro de um arquivo composable 2, para a barra lateral, e, em seguida, para os composables, criar um novo arquivo dentro aqui chamado, usar cartão atual. Lembre-se que estes têm a extensão JS. Configurar uma exportação, com a função padrão chamada usar cartão atual. O trabalho desta função será obter o cartão selecionado, para recuperar isso, também precisamos acessar todos os nossos cartões, para que possamos filtrar o selecionado, podemos possivelmente usar cards composable, nesta seção. Apenas o caminho do arquivo, que vai ser ponto barra, e o nome do arquivo de cartões de uso. Lembre-se o uso Cards voltou a este todas as variáveis cartões, agora precisamos voltar para o nosso composable, e depois extrair isso de nossa função. Agora temos todos os nossos cartões e o que precisamos fazer agora é criar uma segunda constante, que vai armazenar o cartão selecionado. Este cartão selecionado também será um objeto, podemos passar em um objeto vazio como o valor inicial. Uma vez que estamos usando um ref, nós também precisamos importar isso a partir da biblioteca vista, e então nós vamos filtrar isso tudo seção Cartão que com o cartão selecionado. Primeiro pegue os cartões selecionados, e podemos definir o valor, para ser igual a todos os cartões. Isso tudo cartão também é irromper em uma jangada 2, nós também precisamos usar o valor de ponto para acessar o resultado, e fazer uso do método de filtro JavaScript que vai tomar em uma função, que vai filtrar estes se o cartão id ponto é igual a alguma coisa. Agora nós apenas definimos isso para um valor estático de um, de volta para ter um ótimo ponto view componentes. Agora podemos verificar se isso está funcionando importando este composable, e então exibir isso dentro do modelo. Primeiro importe isso. Ele diz usar cartão atual, a partir do caminho do arquivo para os composables de origem, e, em seguida, usar cartão atual, em nossas exportações, para a função de configuração. Na verdade, esquecemos de fazer uma coisa, e que uma coisa acabou e usar cartões atuais, também precisamos retornar um valor para usar em nossos componentes, eo valor de retorno vai ser cartão selecionado, espero que você viu esse, volta para a seção de criação na configuração. Agora extrairá isso em uma constante. Para exibir isso nos templates, isso também precisa ser retornado desta função e, em seguida, colocá-lo em qualquer lugar no modelo acima, apenas para verificar se isso está funcionando. Vamos verificar isto. Vemos um erro em nosso composable, tudo é definido, mas nunca usado. Também podemos autocompletar isso. Atualize e lá está o nosso cartão selecionado. Bom, estes são todos os detalhes do nosso cartão com a ID 1, que definimos apenas aqui. Mas observe como nosso objeto de cartão também está cercado nesses colchetes de matriz. Isso ocorre porque nossos dados de todos os cartões é uma matriz de objetos. Para trabalhar com este único objeto, precisamos retirá-lo deste array com distritos. Nós dissemos antes que este cartão selecionado precisa ser um objeto, e nós distribuímos este outs de nossa matriz, cercando isso nos colchetes. Atualizar e esses colchetes agora desapareceram. Em seguida, em vez de usar o valor codificado de um, agora vamos importar o roteador e obter o ID dos parâmetros. Primeiro importe isso. Usamos a rota igual. Isto é a partir do pacote de visão relativa, e, em seguida, armazenar está em uma constante para que possamos acessar isso dentro de nossa função. Essas rotas agora podem ser usadas para acessar os parâmetros em vez desses valores codificados, parâmetros de rota e o nome do parâmetro que você deu isso na página de índice de roteadores, era o ID do navegador, e ele só quer para ser rota de uso. O cartão desapareceu agora. Vamos tentar mais uma. Agora, nós tínhamos um cartão na tela pouco antes, mas agora como nós substituímos isso pelo nosso roteador, nós não vemos nada na tela. Agora, este é um deles, desenvolvimento web apanhou momentos. O que precisamos aqui, é de um ID de cartão, que entramos com o router.params.id. Precisamos que este seja um tipo de dados de número. Em ato, quando lemos qualquer coisa de nossos parâmetros de URL, isso é retornado como uma string. Podemos ver isso se fizermos um registro de console. Apenas em qualquer lugar dentro deste arquivo, acessar a rota params.id, e podemos usar JavaScript para rastrear o tipo de dados com tipo de no console, atualizar o navegador e vemos o tipo de dados é string, e é por isso que todos filtro não está funcionando porque isso está comparando, com a igualdade estrita que verificamos se o tipo de dados de string, é igual a isso, que é um número. Poderíamos usar os duplos iguais assim. Isso ignoraria a diferença de tipo de dados e usaria apenas o valor. Ou, alternativamente, poderíamos pegar isso, envolver isso dentro da função numérica, e isso converteria a string para ser um número, e isso também funcionaria para. Vamos checar mais algumas cartas. Este será o terceiro. Vemos a identificação 3. O quinto, ID 5. Isso também corresponde a até. 109. Selecionando a página atual: No vídeo anterior, dissemos que esta página de criação exibe as informações completas do cartão selecionado. Mas, na verdade, para essa visão, só precisamos mostrar um determinado pedaço de dados. Lembre-se que nosso cartão é dividido em quatro páginas. Temos a frente, o interior à esquerda, o interior à direita, e também a vista de trás. Quando estamos editando esta página, queremos ver apenas uma dessas seções de cada vez. Somente quando clicamos nesses cartões, somos então levados para a vista, que é a frente do cartão. Os dados para estas quatro páginas são armazenados dentro da matriz desta página apenas aqui, e recuperar a página exata que precisamos desta matriz é o que vamos focar neste vídeo. Em seguida, adicionaremos também alguns links para que você possa alternar entre essas páginas. Para começar tudo no arquivo de cartão UseCurrent, leia a constante para armazenar a página selecionada em. Agora não precisamos desse registro do console. Esta constante vai ser armazenada na página selecionada. Isso também será dinâmico e um tipo de data de objetos que é obedecer função chamada get selected page. Esta função vai definir a nossa página selecionada. Este é um ref, então nós pegamos o valor, e isso vai ser igual ao nosso cartão selecionado, o valor. Como vimos no navegador, também precisamos acessar a matriz de páginas dentro daqui. Em seguida, precisamos obter o número de índice para a página selecionada. Temos quatro valores diferentes para a frente, o interior esquerdo, direito e verso, então isso pode ser zero, um, dois ou três. Para obter o número de índice para a página específica que precisamos, vou entregá-lo a uma função separada, para manter as coisas limpas. A função será chamada get page index. Para obter o índice de página que precisamos, precisamos pegar o cartão selecionado, o valor, as páginas e, em seguida, usar um método de matriz JavaScript chamado find index. Encontrar índice vai executar uma função para cada uma de nossas páginas nestes cartões. Cada uma de nossas páginas será armazenada dentro desta constante página. Queremos verificar se a page.name é igual a rota. params.id. Apenas para recapitular, estamos acessando todas as páginas no cartão selecionado. Em seguida, usamos qualquer JavaScript, find index método, e isso vai verificar se a page.name. Que você pode ver se entrarmos em nossos dados, cada uma de nossas páginas tem sua propriedade de nome, como front, e estamos comparando esse nome com o valor dentro de todos os parâmetros. Na verdade, em vez de ID, este para ser a página, como a frente que temos aqui. Isso irá então retornar o número do índice, então eu preciso retornar isso de volta da nossa função. Podemos acessar esse valor de retorno, minha chamada agora funciona dentro daqui. Bom. Agora temos essa função chamada get selected page, e agora precisamos de uma maneira de realmente chamar isso. Bem, podemos fazer isso usando desmontado assumindo nossa função chamada get selected page. Ele está subindo e bind foi importado automaticamente ao salvar, mas se o seu não, se você fosse adicionar desmontado a esta importação. Agora também precisamos retornar de volta nossa página selecionada, para que possamos usar isso no modelo. E também adicione um ponto-e-vírgula se isso estiver causando alguns problemas, e sobre o Criar. vista. Agora, em vez de renderizar o cartão selecionado completo, podemos substituir isso com a página selecionada, retornando-nos de volta, e então eu vou colocar isso dentro de um modelo. Refresque. Óptimo, ali está a frente. Vamos tentar a parte de trás. Bom, a direita de dentro. Excelente. Agora isso está funcionando e agora podemos configurar alguns links no próximo vídeo para alternar entre essas quatro páginas. 110. Alternando páginas de cartão: Agora sabemos a partir do último vídeo que podemos recuperar a página correta que precisamos do URL. Agora vamos configurar alguns botões para alternar entre estas quatro páginas. Este, um novo componente, uma nova pasta de componentes e, em seguida, na pasta do cartão. Este vai ser chamado de mudar de página. Configurar os modelos que você está indo apenas para [inaudível] link para que possamos passar no elemento nav, a lista não ordenada e, em seguida, nossos itens de lista serão wrappers para o link do roteador. Cada um desses links de roteador será vinculado às quatro páginas do nosso cartão. Passe no para adereço. Isso vai ligar para a frente, e vamos dar uma olhada nisso em apenas um segundo. Mas agora uma classe de seleção de página é relativamente igual a metade do texto para a frente, ao lado de um ícone para. Este ícone foi fornecido com este curso e você pode acessá-lo na pasta de ativos. Primeiro, o texto dentro da extensão de execuções e, em seguida, exiba o ícone com a imagem. Este não precisa ser dinâmico, só precisamos ir para os ativos, para os ícones. O mesmo ícone será usado na frente e na parte de trás do cartão, então este é chamado front-back.svg. Coloque em algum texto alt e agora podemos duplicar isso para todos os três links restantes. Copie e cole o item da lista completa. Este próximo item da lista é para o interior esquerdo. O nome do ícone está dentro da esquerda. O texto alt, copie este, em seguida, altere todas essas ocorrências para dentro da direita. Temos o link do roteador, temos o texto, a fonte da imagem, o texto alt. Também podemos corrigir esse erro de digitação. Finalmente, cole o último e isso é para a parte de trás do cartão. Sabemos o que fazer agora, o link do roteador, o texto. Lembre-se, este compartilha o mesmo ícone da frente, então este nome era front-back. Em seguida, encerre este último link com o texto alt. Salve este arquivo e este componente será colocado dentro do create.view. Primeiro importe isso. Depois de duplicar o CardEdit, este é para SwitchPage. Há o caminho e também importar isso para o nosso objeto componentes. Coloque isso no topo. Para o navegador na frente, dentro da esquerda. Isso também está mudando o URL, o interior direito, o verso também. Observe como cada um desses links está apenas substituindo a seção final de nossa URL. Isso ocorre porque quando adicionamos o link do roteador, não usamos uma barra antes de nenhuma dessas rotas. Se usássemos uma barra, assim como esta, clique na parte de trás. Isso substituirá o nosso URL completo. Mas deixar isso de fora só substituirá a seção em que estamos atualmente. Outra coisa a observar aqui é quando clicamos em qualquer um desses links, a página selecionada não está sendo atualizada. A razão pela qual isso não é atualizado é a mesma razão anteriormente quando tentamos atualizar esses links de três categorias. Isso ocorre porque ainda estamos nos mesmos componentes de criação, então quando acabamos de mudar os parâmetros como estamos aqui, nenhuma atualização ocorrerá. Também podemos corrigir isso com a mesma solução, que é adicionar um observador, ou UseCurrentCard no topo. Importar relógio e podemos assistir a uma mudança de parâmetros. Primeiro passe em uma função getter que vai assistir a quaisquer alterações em todos os parâmetros do roteador, e em particular, nossa página. Em seguida, uma função de retorno de chamada, que será executada cada vez que houver uma alteração, e sua função já está configurada logo acima. Isto, e adicionar um ponto-e-vírgula logo após o nosso observador. Mantenha isso separado da expressão abaixo e, em seguida, sobre o navegador. Refresque. Vemos a frente porque somos apenas URL frontal. Dentro, esquerda, dentro direita, e também, a parte de trás está funcionando também. 111. O componente de pré-visualização do cartão: Mas sobre este create.vue componentes e aqui dentro, estamos exibindo a SelectedPage. Em vez de mostrar isso como um objeto, agora vamos mover isso e passar a página para baixo como adereços para nossos dois componentes, que era a visualização do cartão e também a edição do cartão. Primeiro, remova isso, passe isso primeiro para a visualização do cartão, o nome apropriado de SelectedPage, que é igual a SelectedPage. O mesmo logo abaixo para a edição atual. Este prop dará ao cartão visualização todas as informações que ele precisa para exibir o cartão e sobre a direita, a seção de edição do cartão usará este prop como o valor inicial para todos os nossos campos de entrada. Se quiséssemos, em vez de configurar isso aqui e passar isso como adereços, também poderíamos importá-los diretamente em nossos dois componentes também. Mas para isso, eu vou ficar com adereços. Para a visualização do cartão. Isso precisa de uma seção de script para aceitar esses adereços, passá-los para o nosso objeto. O tipo, esses objetos, e também, isso também é necessário. Até o modelo, não precisamos desse título de nível 1. Em vez disso, substitua isso por um div e este div vai ser o invólucro para o nosso cartão. Precisamos adicionar a imagem de fundo, assim como vemos se vamos para a versão final, nesses cartões. Este será o wrapper para a nossa pré-visualização, e este terá o atributo style para definir a imagem de fundo. Primeiro, uma classe de wrapper de visualização de cartão e, em seguida, vincular um estilo dinâmico , que levará em um objeto, e está dentro do objeto de estilo onde vamos passar no URL de fundo dentro do bactics. Assim como poderíamos com CSS regular, podemos definir a URL de fundo. Mas como isso vai ser dinâmico, nós também precisamos definir isso dentro do bactics, colocar em nossa variável, que é o SelectedPage de nossos adereços. Selecione a propriedade de plano de fundo. Em seguida, o tamanho do plano de fundo, que será uma string regular de 100 por cento. Em seguida, repita o plano de fundo. Além disso, lembre-se, já que estamos fazendo isso dentro do JavaScript, precisamos fazer cada um desses CamelCase. Se isso fosse CSS normal, faríamos assim com o hífen. Mas já que estamos usando JavaScript, precisamos fazer cada um desses CamelCase. O valor para isso não será repetido. Então, finalmente, a posição de fundo. Isso também será dinâmico, uma vez que temos esse conjunto dentro de nossos dados. Vá até o arquivo de dados. Pegamos o fundo como antes, mas agora vamos pegar essa posição de fundo. Isso também é extraído de todos os adereços. Agora, dentro desta div, precisamos percorrer cada uma de nossas seções. Nesta página selecionada, vamos ver isso dentro de nossos dados. Esta primeira página tem esta matriz de seções. A maioria das informações em cada uma dessas seções é para estilo e CSS. Mas aquele que vamos usar para exibir o texto real de uma seção é essa entrada do usuário. Vou colocar dentro daqui uma div com um v-for, passar na seção em SelectedPage.Sections. Cada uma dessas seções tem um ID exclusivo. Então a chave será section.id. Para verificar se isso está funcionando, vou colocar a seção completa, atualizar. Podemos apenas ver uma imagem de fundo e nossas sobreposições de texto. Mas também precisamos dar a essa imagem de fundo uma largura e uma altura. Voltar aos componentes, podemos acessar o wrapper de visualização do cartão. Em seguida, defina uma seção de estilo na parte inferior. Isso também pode ser escopo. Primeiro, a largura desta imagem será fixada em 450 pixels e, em seguida, uma altura de 600. Bom. Agora podemos ver o tamanho total da imagem. A última coisa a fazer é definir a propriedade overflow para esta seção e isso nos ajudará mais tarde se o usuário aumentar a altura de qualquer uma dessas seções para ser maior do que o cartão. Ótima. Agora, tudo isso está funcionando. Vemos também que a frente do cartão é a única com uma imagem e que algumas dessas seções não têm nenhum texto. Todas essas seções de texto, não queremos mostrar o objeto completo como este. Em vez disso, queremos apenas a saída da entrada do usuário, que você pode fazê-lo assim, Section.UserInput. Ok, ótimo. Este texto que sobrepusemos será colocado em breve em um componente separado e também aplicaremos a ele todos esses dados extras, como o estilo e também o layout. 112. Componentes de saída de texto: O que temos no momento é esta pré-visualização do cartão que exibe uma imagem de fundo. Em seguida, logo abaixo para cada uma de nossas seções nesta página, ele irá então produzir a entrada do usuário. Todos nós vimos algo assim. Se formos para a primeira página, vemos a imagem de fundo. Em seguida, o texto sobreposto para páginas com várias seções de textos como o interior direito. Vemos estes exibindo apenas aqui. Este texto, porém, não se destina a ser exibido como texto sem formatação, assim como este. Se formos para o data.js, temos uma matriz de seções com um objeto, e este particular tem essa entrada de usuário apenas aqui. Então temos várias coisas para estilo e layout. Para mostrá-los, vamos criar um novo componente para enviar cada um desses pedaços de texto para a seção do componente e para o cartão. Este é o texto output.vue, o modelo, e apenas um texto simples por enquanto. Isto vai ser exibido dentro de nossa visualização de cartão no lugar deste texto apenas aqui, na ação de scripts, importar este arquivo, que é a saída de texto. Isso está na mesma pasta, então tudo o que precisamos fazer é. /, e, em seguida, em nossa saída de texto , registrar nossos componentes, e fazer backup para o modelo, nós não precisamos desta seção, nós não usamos mais entradas. Substitua isso pelo nosso novo componente. Claro, esta saída de texto precisa de alguns dados para exibir, então vamos enviar para baixo o conteúdo completo da seção como um prop. Isto é tudo o que precisamos fazer para este componente. Para a saída de texto. Os scripts, coloque em nossos adereços, e a seção prop terá o tipo de objeto. Lembre-se, esta é a abreviação para o tipo. Ao invés de ter o objeto, estou colocando o tipo assim. Assim como na visualização do cartão, se agora produzirmos o conteúdo da seção, também devemos ter acesso às entradas do usuário. Vamos ver. Bom. Temos todas as três entradas de usuário separadas e também, o mesmo para as frentes do cartão também. Isso nos deixa na mesma posição que o início do vídeo. Temos apenas a casa de texto simples, mas desta vez a partir de um componente separado. Agora podemos usar esses valores CSS que vemos no arquivo de dados para criar um objeto CSS e aplicá-lo a este texto. Primeiro, coloque em nossa função de configuração e uma constante para armazenar nosso objeto CSS. Fique de olho em quaisquer mudanças. Nós vamos fazer uso de um valor computado dentro desta função de configuração. Vamos passar em uma função e esta função vai ser executada cada vez que os dados dentro muda. Assim como ao usar a API de Opções, isso também precisa retornar alguns dados, mas eu vou apenas colocar em um objeto vazio e vamos voltar a isso em apenas um segundo. Antes de esquecer, número lugar retorna ação para a configuração, onde vamos retornar nosso objeto CSS, porque agora usamos computado, precisamos importar isso da biblioteca de exibição para o nosso objeto CSS retornado. Este vai ser um objeto com todas essas propriedades CSS que podemos puxar a partir desta seção. Mas primeiro, temos um par de valores CSS estáticos que não vão mudar, mas apenas uma borda que irá cercar cada um desses pedaços de texto que o usuário saiba a altura da seção como uma string, a largura de um pixel, um pontilhado linha, uma cor cinza e, em seguida, separar cada um destes com uma vírgula. O tipo de exibição será igual a flex. Este tipo flexível nos permitirá fazer uso das propriedades flexbox, que estão acima nesses dados, e em particular, os valores para alinhamentos como JustifyContent e itens de alinhamento. Uma vez que agora estamos retornando o objeto CSS, podemos testar isso está funcionando em nosso arquivo de texto. Uma propriedade de estilo CSS e defina isso igual ao nosso objeto. Se agora atualizarmos o navegador, veremos a linha pontilhada, então nosso objeto CSS está entrando em vigor. O resto do estilo a aplicar a este texto vai ser dinâmico e baseado nos valores que tinham sido passados para baixo de nossos adereços. Por exemplo, a propriedade de cor CSS, normalmente poderíamos acessar isso usando o objeto options com algo como this.section. Então poderíamos acessar as propriedades individuais, mas lembre-se, porém, usando a composição liquidar, não teremos mais acesso para ler esta palavra-chave. A maneira de fazer isso na composição é passar os adereços para a configuração. Isso nos dará acesso direto aos nossos adereços, onde podemos acessar a seção, e, em seguida, um de nossos valores sobre este objeto seção, que é a cor. Em seguida, a altura da seção, props.secção.altura. Como estamos trabalhando com CSS, também precisamos adicionar o valor de pixel. Após a altura, temos JustifyContent, que é igual a prompts.section.JustifyContent. Alinhar itens. Em seguida, salve esta seção e teste isso no navegador. Bom. Vemos que temos várias alturas para estes pedaços de texto. Temos uma cor diferente. Para a frente. Bom, temos uma altura aqui também, e isso também está alinhado no centro, então nossas propriedades de flexbox estão entrando em vigor. Vamos também colocar na família de fontes e o tamanho da fonte. O tamanho da fonte. Coloque na vírgula, e agora vemos um texto maior, e também a família de fontes foi aplicada. Não se preocupe com o espaçamento entre essas seções ou a parte inferior estar fora da página por enquanto. Vamos corrigir isso com CSS em um pouco. Embora agora terminemos com nosso objeto de estilo e esta seção computada manterá a visualização do cartão atualizada. Quando atualizarmos o cartão da seção de edição mais tarde, todos esses valores serão atualizados em nossa função composable. Em seguida, os valores reativos serão passados de volta para baixo na cadeia para este componente de visualização. 113. Componente de edição de cartão: Vamos dar uma olhada neste componente create.vue. No início, passamos no CardPreview e também o CardEdit. Também passamos na SelectedPage para ambos os componentes. Em um vídeo anterior, usamos este SelectedPage, percorremos cada uma das seções e, em seguida, vou colocar o texto em cada seção. Vamos fazer uma coisa semelhante para o CardEdit, que também tem os mesmos adereços. Desta vez, vai estar do lado direito. O texto será colocado em uma área de texto que o usuário pode editar. Também podemos passar o mouse sobre esta seção. Vamos ver um menu suspenso para editar qualquer um dos estilos também. Mas nesta seção, configuramos os componentes Cardedit.vue no início. Vamos começar a trabalhar neste componente adicionando primeiro a nossa ação de scripts. Eu preciso tomar os adereços como um objeto, passar na SelectedPage, que é o tipo de objeto. Mas agora este modelo será bastante simples. Estamos apenas conter lugar em uma div, que vai conter um v para atributos. Nós podemos viver através de cada uma das seções em nossa página selecionada. A chave, todos nós temos uma chave única para cada uma dessas seções que podemos ver nos dados. Podemos acessar a Section.id. Mas eu vou passar na section.UserInput apenas para verificar se tudo isso está funcionando. Como acabamos de mencionar um pouco mais tarde, isso foi colocado dentro de uma área de texto para que o usuário possa editar este texto, salvar este e o único pedaço de texto para este cartão é agora exibido tudo na seção de edição. Vamos tentar o interior à direita. Isso tudo está funcionando também. Um vídeo bastante simples, mas agora temos o texto disponível na tela. No próximo vídeo, vamos substituir essas entradas de usuário por um componente separado. 114. Componente de entrada de texto e menu flutuante: Atualmente, na seção Editar, estamos simplesmente produzindo as tags de cada uma dessas seções, mas assim como fizemos com o lado de visualização, vamos substituir cada um desses pedaços de texto ou cada um desses seções com componentes autônomos. Este componente irá conter uma área de texto que conterá essa entrada do usuário para que eles possam editar o texto, que será exibido na visualização. Também colocaremos em um menu suspenso, para que o usuário também possa editar esse texto. Eles podem adicionar estilos diferentes e também alterar o layout e o posicionamento também. Voltar para a barra lateral, temos a saída de texto para o lado esquerdo. Então vamos criar uma entrada de texto para a tela de edição, um modelo, em seguida, uma div com a classe de wrapper de entrada de texto. Coloque em qualquer texto dentro aqui e, em seguida, podemos importar isso para o nosso componente Code Edit. Até o script, a entrada de texto. Isso na mesma pasta, então esta será uma entrada de texto de barra de ponto. Última nos objetos componentes, substitua nossa entrada de usuário por este novo componente. Ele também precisa dos dados da seção completa, então isso pode ser um adereço. Isso agora nos dá algumas informações para trabalhar com, colocando esses scripts seção, os adereços de seção, que é o tipo de objeto, e, em seguida, substituir o nosso texto com a área de texto, mover estes. Em seguida, defina as colunas padrão para 50 e, em seguida, quatro linhas. Agora, veja esta entrada de usuário dentro de sua área de texto. Agora precisamos colocar dentro do modelo V, mas lembre-se que não podemos mudar diretamente os adereços. Em vez disso, precisamos tirar uma cópia desta seção. Então podemos usar isso para o nosso modelo V. Isso podemos passar na configuração, tomando os adereços, e então uma constante que vai ser uma cópia chamada seção atual. Enrole isso em um árbitro. Vamos passar na seção adereços. Importe esta referência da biblioteca Ver e, em seguida, devolva a nossa secção actual da configuração. Esta seção atual é agora uma cópia de todos os adereços, que agora podemos usar dentro do v-model. A propriedade nesta seção é a entrada do usuário. Vamos carregar o navegador e agora temos nossas áreas de texto livre, cada uma com as entradas de texto. Além disso, se você está se perguntando o que este círculo verde está à direita, esta é uma extensão Grammarly, que está disponível para ajudar com quaisquer erros de digitação. Algo a observar aqui quando digitamos em uma dessas áreas de texto é, a visualização atual também será atualizada automaticamente. Agora, eu não admiti nenhum evento personalizado. Não criamos nenhuma função para atualizar isso, mas isso volta para a referência de objeto discutida anteriormente. Poderíamos ficar com isso e permitir que isso atualize automaticamente, mas pessoalmente, prefiro quebrar a referência e fazer uma atualização manual só para termos um pouco mais de controle sobre as atualizações, e isso faz com que seja um pouco mais previsível. Para quebrar essa referência, o que vamos fazer é ir até a configuração e em vez de pegar diretamente uma cópia assim. Vamos cortar isso, criar um novo objeto, e depois espalhá-los de volta. Podemos testar isso, atualizar. Agora, vamos atualizar essas áreas de texto. A seção anterior não é afetada. Junto com a obtenção neste texto a partir da área de texto, também queremos fornecer um menu suspenso quando o usuário passa o mouse sobre cada uma dessas seções. Este menu suspenso irá conter todas as opções para alterar coisas como as fontes, as cores e também o posicionamento. Isto, crie uma div dentro do modelo, logo abaixo da área de texto. Se você diz classe de menu, precisamos de uma maneira de controlar este menu aparecendo. Vamos adicionar os atributos V-show e definir isso igual a Mostrar Opções. Por enquanto, apenas alguns textos como menu é completamente bom. Em seguida, para baixo para a função de configuração, agora podemos configurar Mostrar Opções para ser um valor inicial de false. Isso também será reativo, então passe o ref e o valor inicial de false. Então precisamos retornar isso da nossa função como esta. Ainda não vemos os textos do menu. Precisamos de uma maneira de definir isso para ser verdadeiro quando o mouse passar sobre esta seção. Para isso, temos acesso ao mouse sobre evento. Quando o mouse passa sobre esta seção div, vamos definir, mostrar opções para ser igual a true. Em seguida, também fazer uso do mouse para fora evento, que vai definir as opções show para ser igual a false uma vez que o usuário move o mouse para longe desta seção. Portanto, isso vai então um fechar o menu como este e podemos experimentar isso. Sobre qualquer uma dessas seções é o nosso menu, que então desaparecerá quando nos afastarmos do menu. Vamos tentar este. Isso agora funciona para cada uma de nossas seções, e são componentes do menu, que vamos construir em seguida. 115. Adicionando opções em um menu: Vamos agora passar para o menu para cada uma dessas entradas de texto. Nós já configuramos um mouse, que então exibe nosso menu, e agora vamos adicionar algumas opções a este menu. Esta foi uma div que criamos no último vídeo. Cercado dentro desta div, vamos colocar em três novas seções. O primeiro será uma div com a classe de topo do menu, o segundo, meio do menu e o terceiro, fundo do menu. Haverá algumas opções diferentes que adicionaremos a este menu. Neste vídeo, vamos nos concentrar neste topo do menu. Menu superior será a linha superior de nossas opções e irá conter a família de fontes. O usuário pode alterar o tamanho da fonte, a cor da fonte e também as opções negrito e itálico também. Primeiro passamos em nossa opção de seleção, que vai agrupar todas as nossas famílias de fontes. Tudo o que precisamos fazer como um atributo é passar em v-model, que vai vincular à nossa seção atual. Depois a família da fonte. A primeira opção. Em seguida, dentro dos valores que precisamos escrever na família de fontes exatamente da mesma maneira que você estaria em CSS porque isso vai ser empurrado para o nosso objeto cartão. Assim como nos nossos dados, se procurarmos a família de fontes, estes serão os valores finais que vemos aqui. O primeiro, vou para Times New Roman. Você pode alterá-los para ser qualquer família de fontes que você gostaria. Além disso, o texto de exibição, duplique isso. O segundo da Geórgia. O número três será Arial. Vamos ficar um pouco loucos e adicionar Comic Sans. Novamente coloque isso exatamente o mesmo que você faria com CSS. A família de fontes Verdana para o número cinco. Então o último que vou colocar em Courier New. Ok. Vamos tentar isso, atualizar o navegador. Há a nossa seleção com todas as nossas famílias de fontes. Em seguida, logo após essa seleção, colocamos em um novo grupo de seleção. Este vai ser para o nosso tamanho de fonte. Novamente, isso precisa de v-model para que tenhamos todos os dados para empurrar para o nosso objeto cartão. Vamos selecionar a seção atual e, desta vez , o tamanho da fonte. A primeira opção de 1.6 rems. Em seguida, o texto do normal. Em seguida, o texto de grande com um valor de dois rems. O próximo irá para 2,5 rems. O texto é maior. Então maior, que vai ser três rems. Certo, vamos tentar isso. Bom. A terceira entrada será uma entrada com o tipo de cor. Modelo em V para a seção atual e selecione a cor. Ok. Então, isto e depois vamos. Isso agora nos deixa com o itálico e as eleições audaciosas. Primeiro vamos adicionar um rótulo. Este vai ser uma caixa de seleção aninhada dentro para nossa seleção ousada. Analisando a entrada, o tipo de caixa de seleção, modelo V. Para estes dois próximos, temos as opções é negrito e itálico, que são apenas construir sobre valores. O que vamos fazer para isso é adicionar uma entrada ao lado de uma imagem. Agora, a razão pela qual estamos fazendo isso é porque a imagem vai ser um dos ícones que você tem na pasta de ativos. Mas, ainda assim, queremos manter essas entradas ao lado por razões de acessibilidade. Isso significa que ele pode ser lido por leitores de tela e também manter as interações do teclado também. Mas no CSS em apenas um pouco, vamos esconder essa entrada. Nós só vemos este ícone logo abaixo. Para a fonte adicionada aos ativos, e assim ícones. Temos um ícone fornecido que é chamado bold.svg eo ícone alt texto negrito. Em seguida, também temos uma caixa de seleção para o é itálico. Para acelerar as coisas, podemos copiar esta seção, então a mudança é negrito para ser itálico. O italic.svg, e também o texto alt também. Salve isso. Vamos ver onde isso nos deixa. Ok. Então parece muito horrível no momento, mas vamos corrigir isso com CSS. Há nossas caixas de seleção ao lado de nossos ícones. Mas como eu mencionei antes, vamos ocultar essa caixa de seleção mais tarde. Algo a observar aqui é, especialmente ao usar o Chrome, que pode não ser o mesmo em navegadores diferentes. Eu acredito que não é com o Firefox, mas ao usar o navegador Chrome se clicarmos neste seletor de cores e, em seguida, tentar selecionar as cores, todo o menu desaparecerá. Agora o Chrome detém uma enorme quota de mercado para o mercado de navegadores, então isso é obviamente algo que queremos corrigir. O que está acontecendo aqui quando passamos desta entrada de cor para o seletor de cores real? O seletor é uma seção separada. Mover para esta nova seção significa que estamos deixando este wrapper principal, isso então aciona o evento do mouse para fora e, em seguida, oculta tem opções. solução alternativa para isso é observar o mouse saindo desta seção superior do menu. Então, mais uma vez, defina todas as opções do Mouse como verdadeiras. Adicione um mouse, deixe os eventos aqui dentro. Vamos definir as opções Mostrar V igual a true. Salve e teste isso. Clique na entrada. Agora vamos nos afastar desta seção superior. A opção Mostrar opções ainda está definida como true, que significa que ainda podemos ver nossas entradas de cor. Já consertamos isso. A última coisa que precisamos fazer é verificar se nossa seção atual está sendo atualizada com qualquer uma dessas entradas. Vou colocar isso dentro das chaves duplas no modelo. Tudo o que temos de fazer é alterar o nosso texto. Vemos as entradas do usuário é alterado. Clique neste negrito, e isso irá alternar isso apenas aqui itálico. A família de fontes, isso muda para Arial. Finalmente, o tamanho da fonte. Tudo isso parece estar funcionando, e no próximo vídeo vamos adicionar o resto de nossas opções de menu. 116. Continuação sobre opções de menu: Seguindo com esta seção do menu suspenso, ainda temos a seção do meio e também a seção inferior também em nossa entrada de texto. Então, se formos para este menu na seção do meio, isso vai conter uma seta para cima e para baixo. Mas agora eles vão ser apenas um conjunto de ícones, mas mais tarde, isso iria acionar uma função. Para alterar a altura da seção, envolva-os em um botão, e o ícone também está na pasta de ativos, nos ícones. Este é a seta up.svg, o texto alt também. Então o segundo botão é para a seta para baixo. Salvar. Lá vamos nós. Então, finalmente, temos este botão Menu. Este botão Menu vai ser principalmente alinhamento, para que possamos mover o texto para cima e para baixo, e da esquerda para a direita também. Estes serão dois conjuntos de botões de rádio, um para o alinhamento vertical e outro para o alinhamento horizontal. Então eu vou passar em um rótulo, que irá envolver nossa entrada com o tipo de rádio, o modelo, que vai modelar para a seção atual. Em seguida, justifique o conteúdo. conteúdo Justify controlará o posicionamento na página da esquerda para a direita. Então passamos um valor. O valor será o texto que passamos para o nosso objeto de cartão e este precisa ser um dos valores CSS justificar o conteúdo. Então este será flex-start. Em seguida, o nome da horizontal. Este nome de horizontal será usado para vincular todos os três botões horizontais. Então teremos algumas ligações verticais para o alinhamento vertical. Assim como fizemos acima com a caixa de seleção, também vamos ocultar essa entrada de rádio e substituir isso por um ícone. O ícone vai nos elementos da imagem e o caminho está nos ativos. Para os ícones. O icon.svg esquerdo e o texto alt também. Então este está controlando o alinhamento esquerdo e vamos copiar isso e colar isso em mais duas vezes, e o do meio é para o centro. Então, ainda justificamos qualquer conteúdo, mas o valor desta vez é central. Estes três botões estão relacionados, por isso mantemos o mesmo nome de horizontal. Isso significa que o usuário só pode pressionar um desses botões de cada vez. A imagem é o centro, o texto alt. Em seguida, o terceiro definirá o alinhamento certo ou na linguagem flex-box, esta será a extremidade flexível. A imagem tem o nome da direita, e também o texto alt também. Agora, vamos ver se isso funciona bem no navegador. Nós só podemos selecionar um destes de cada vez, uma vez que todos eles têm o mesmo nome e estes também estão atualizando nosso objeto no topo. Então o próximo grupo será para o alinhamento vertical. Se copiarmos um destes, colar isto logo abaixo, temos mais algumas alterações a fazer. Em vez de configurá-lo JustifyContent, precisamos alterar isso para alinhar itens. O primeiro valor é para o flex-start, o nome da vertical. Este ícone é para o topo. Então ele duplicou este mais duas vezes. A próxima é para o centro. O ícone tem um nome de meio. O final é para a parte inferior, que é o valor da caixa flexível de extremidade flexível. A imagem é bottom.svg. Finalmente, o texto alt. Para o cardápio. Está parecendo muito ruim agora, mas vamos tentar isso. Para cada um deles, vemos o flex-start, o sensor, e também o flex-end também. Agora temos este menu no lugar e sabemos que ele está agora ligado à nossa seção atual. Em seguida, vamos passar a melhorar o estilo. 117. Estilização de menu: Este menu agora precisa de algum estilo e também algum layout também, que queremos fazer mais no textinput.view, começando com esta linha superior que tem a classe de menu superior. Então, vou pular para baixo, criar a seção de estilo e também adicionar o atributo com escopo. Lembre-se que cada um dos nossos ícones está rodeado pelo elemento de imagem, então o que vamos fazer para isso é definir a largura máxima para 30 pixels. O menu completo foi cercado nesta classe de menu e este foi um wrapper para todas as nossas entradas. Primeiro de tudo, vamos definir a posição para ser absoluta e definindo isso como absoluto, isso irá flutuar acima de todo o resto do conteúdo em vez de empurrar isso para baixo. O que queremos dizer com isso, se você for a um projeto, se você tiver várias entradas, como fazemos aqui, os ícones aparecerão sobre qualquer conteúdo logo abaixo, em vez de empurrar isso para baixo da página. O fundo. Você pode escolher qualquer cor que lhe convier, mas eu vou colocar em um gradiente linear de 30 graus e os valores de RGB 253, 207, 207, 207, adicionar uma vírgula, e a segunda cor de vermelho, 140, verde 140 e azul, 236. Isso também precisa de algum preenchimento dentro e vamos arredondar os cantos inferior esquerdo e inferior direito também. Preenchimento de 10 pixels e o raio do corpo, nós só queremos aplicar isso a dois lados externos, modo que o topo será zero, e depois três pixels para o nosso fundo. Ok. Em seguida, envolvemos cada uma de nossas funções na classe de menu superior, menu, meio e muitos inferiores, e podemos fazer uso do flexbox CSS para definir o alinhamento em toda a página. Todas essas entradas são alturas diferentes, então não precisaremos estar na mesma linha central dentro do nosso estilo. Pegue nosso menu superior e também, o menu-bottom, o display type all flex e, em seguida, alinhe os itens em nosso centro. Em seguida, esta linha do meio, onde temos as setas para cima e para baixo, isso precisa ser sobre à esquerda do menu e podemos fazer isso definindo o tipo de exibição para ser flexível. Pegue a seção do meio, defina isso para ser flexível, e definindo isso para flex, teremos os valores padrão da linha de fluxo e também aparecem no início da linha também. Agora, também queremos remover a borda e o fundo para esses dois botões também, e também mudar o cursor para ser um ponteiro. Nós também poderíamos fazer isso dentro desses mesmos componentes, mas eu vou colocar isso sobre dentro do app.vue, e, portanto, isso também se aplicará a outros botões também. Então vamos pegar nosso botão. Remova o fundo, remova a borda sem nenhum, o cursor do ponteiro. O tamanho da fonte de 14 pixels e, em seguida, remova qualquer preenchimento padrão com um valor de zero. Refresque. Ok. Então isso também talvez queira algum espaçamento também, então de volta à nossa entrada de texto. Pegue o meio do menu, e vamos selecionar a imagem. A altura de 10 pixels e, em seguida, algum preenchimento. Nós não queremos que este estofamento empurre isso para longe da borda esquerda, então nós vamos aplicar o estofamento no topo, na direita e também no fundo. Lá vamos nós. Isso agora nos dá um pouco mais de espaçamento. Só para esclarecer, quando adicionamos este estilo de botão no aplicativo, não é essencial que coloquemos qualquer estilo global aqui dentro. Pode ser apenas um lugar conveniente para colocar estilos sem escopo se não tivermos uma quantidade enorme. Se tivermos muitos estilos diferentes, talvez seja uma ideia melhor para terceirizar isso em um arquivo diferente. A próxima coisa que vamos fazer é voltar em nossa entrada de texto e vamos esconder as caixas de seleção e também os botões de opção também, até mesmo ajustar esses ícones. Lembre-se de anteriormente, nós dissemos que deixá-los em por razões de acessibilidade e assim o usuário também pode fazer uso dos controles do teclado também. A razão pela qual eles ainda estão acessíveis e ainda podemos controlá-los com o teclado é porque não estamos removendo-os completamente. Em vez disso, estamos simplesmente escondendo-os com CSS. Então, o primeiro passo é selecionar nossa entrada com o tipo de rádio, e, em seguida, também nossa caixa de seleção. Então isso não é mais visível. Vamos definir a opacidade para ser igual a zero, a largura de zero também, e também a altura. Vamos ver se isto funciona. Bom. Estes agora são removidos e a próxima coisa que vamos fazer é selecionar a imagem e tornar o cursor um ponteiro, e para fazer isso, vamos pegar os dois, adicioná-los abaixo. Use o seletor adjacente, que é o ícone de adição, e isso irá selecionar todos os elementos de imagem que seguem este rádio. O mesmo para a caixa de seleção. O cursor para ser um ponteiro. Isso não mudará quando passarmos o mouse sobre nossas caixas de seleção e nossos botões de opção. [ inaudível] quaisquer entradas de formulário original como este, nós também precisamos lidar com o estado verificado e se clicarmos em qualquer um destes, nós não vemos os botões são realçados. Então, se o usuário estivesse navegando com um teclado, ele não teria idéia de qual deles está ativo no momento. Então, para corrigir isso, também precisamos contabilizar o estado verificado. Então pegue nossas duas entradas e a imagem. Em seguida, vamos criar uma nova seção logo abaixo, mas desta vez, vamos direcionar o estado de verificação. Agora, o que vamos fazer dentro daqui é definir um contorno quando qualquer uma dessas imagens foi clicada para que o usuário saiba que isso está sendo selecionado, de dois pixels, uma cor sólida, e então uma cor para este contorno. Eu vou para o valor vermelho de 119, 123, e também 125. Isso está chegando muito perto, mas ainda não está lá. Isso vai colocar um contorno no botão da imagem quando um usuário clica em qualquer um deles, mas também queremos que este contorno apareça quando o usuário estiver usando o botão Tab no teclado para percorrer esses botões. Então, novamente, vamos copiar os dois, adicionar uma vírgula, colá-los novamente, mas desta vez, o estado de foco. Salve este arquivo e vá para o navegador, vamos verificar isso. Passe o mouse sobre o menu e instantaneamente, vemos nossos contornos para o primeiro grupo e também para o segundo grupo também. Podemos selecionar valores diferentes e estes também serão destacados. Além disso, se usarmos o botão da aba Teclado para percorrer nosso site, uma vez que chegamos ao menu, temos as opções, o negrito, itálico, nossos botões de abertura, e então se apertarmos “Tab” mais uma vez, podemos usar os botões do teclado esquerdo e direito para o nosso primeiro grupo. Pressione “Tab” mais uma vez, e o segundo grupo se torna ativo. Bom. Apenas para terminar isso, nós também adicionaremos alguns estilos à nossa área de texto, e também esses botões de seleção também. Primeiro, a área de texto. Mova a borda padrão com nenhum. Um raio entediado de três pixels. A largura de 100 por cento. O peso da fonte de mais leve. Cinco pixels de preenchimento. Também para o dimensionamento, vamos definir o tamanho da caixa para ser igual a border-box. Então, por último, essas entradas selecionadas são um pouco agrupadas e tudo o que eu vou fazer é adicionar alguma margem à direita. Cinco pixels devem estar bem, e lá vamos nós. Este é o estilo agora terminado para o nosso menu e, em seguida, vamos configurar as atualizações do cartão. 118. Atualizando o cartão: Podemos ver a partir de todos esses objetos sobre direitos aqui, que todas essas seções atualizadas são armazenadas dentro dos componentes de entrada de texto. Agora podemos usar esses dados para atualizar o cartão com todas essas novas informações atualizadas. Um bom lugar para fazer isso seria mais, dentro do cartão atual de uso. Teremos o nosso cartão selecionado, que é o nosso principal objeto cartão. O que vamos fazer é criar uma função para selecionar este cartão, e então vamos obter a página específica em que estamos trabalhando, e, em seguida, atualizar qualquer seção que esses dados são enviados. Esta função vai ser chamada UpdateCard. Uma vez que este cartão é uma jangada, pegamos o cartão selecionado, acessamos o valor, vamos para a matriz de páginas, e o item que você deseja encontrar ou a página que você deseja encontrar está disponível a partir desta função logo acima. Lembre-se, isso vai obter o número de índice selecionado a partir dos parâmetros de roteadores. Podemos chamar esta função aqui dentro. Depois disso, queremos atualizar uma seção específica. Para esta página, será qualquer uma dessas três seções. Mas como sabemos qual queremos pegar? Bem, atualmente não temos. Não temos nenhuma maneira de acessar essa informação, então teremos que analisar isso quando chamarmos a função. Isto significa que esta função irá receber alguns dados. Chamarei isso de SectionIndex. [ inaudível] Junto com isso, também precisamos analisar os novos dados para esta função também, que será usado para atualizar o cartão. Vamos definir esta seção específica para ser igual a esses dados. Isto é tudo o que precisamos fazer para esta função. Agora podemos retornar isso, e então podemos chamá-lo com nosso SectionIndex, e também os dados atualizados. Coloque o UpdateCard em nosso objeto de retorno, e os componentes que precisamos chamar isso, está dentro da entrada de texto. Como sempre, precisamos importar nosso composable, que é chamado UseCurrentCard e o caminho do arquivo, usar o símbolo at para ir para o código-fonte, a pasta composable e, em seguida, para UseCurrentCard. Até a nossa configuração, extrair isso em uma constante, e precisamos extrair a função UpdateCard da função que é chamada UseCurrentCard. Temos nossa função agora em vigor nos componentes atuais. Mas se pensarmos sobre isso, quando queremos agora chamar essa função de atualização? Como nós realmente queremos executar isso? Poderíamos ir até o cartão e quando este componente é carregado, poderíamos executar esta função após um certo atraso de tempo. Poderíamos executar a função quando o menu é fechado e tantas outras opções. Mas um sensato pode ser ter cuidado com esta seção atual. Lembre-se, todas as nossas entradas de cima estão vinculadas a esta seção atual usando V-model. Sempre que uma de nossas entradas mudar, os dados da seção atual também mudarão. Portanto, uma opção sensata pode ser estar atento às alterações nesta seção atual e, em seguida, chamou essa função de atualização. Isso precisará importar o efeito do relógio ou do relógio. Eu quero usar o relógio, já que o efeito do relógio será executado imediatamente, e nós realmente não precisamos disso. Em nossa importação, após o ref, importe nosso observador, e então chamamos isso dentro da configuração. Em seguida, analisamos em dois argumentos para este observador. A primeira é a parte real de dados que queremos assistir, e no nosso caso, é a seção atual, separada por uma vírgula. Em seguida, queremos chamar nossa função UpdateCard quando qualquer um desses dados muda. Analisando esta função, e nós também vamos chamar isso também. Lembre-se quando configuramos esta função UpdateCard em nosso composable, ele também precisa receber dois pedaços de dados, o índice de seção e também a nova seção para atualizar. Atualmente, não temos este índice de seção ainda, então vamos voltar a isso. Mas temos os dados atualizados armazenados dentro de nossa seção atual. Também precisamos acessar o valor uma vez que este é armazenado dentro de um ref. Isso apenas nos deixa com a tarefa de descobrir o índice de seção atual. Este arquivo atual da entrada de texto não tem o número de índice, já que tudo o que estamos fazendo é analisar nesta seção como adereços. Para obter o número de índice real para esta seção particular, precisamos subir um nível. Esta entrada de texto é chamado a partir do nosso cartão, editar componente. Então, neste arquivo como nosso componente de entrada de texto. Como estamos percorrendo todas essas seções, também podemos acessar o índice número 2. Nós olhamos para como fazer isso cedo. Nós escrevemos isso dentro dos colchetes, e também podemos acessar o número de índice 2. Isto significa que agora temos este índice, nós também podemos passar isso para baixo como adereços para o nosso componente de entrada de texto. Índice de seção é igual ao nosso índice. Bom, agora de volta à entrada de texto e agora temos um segundo prop para adicionar a isso, que é o índice de seção, que é um tipo de número. Agora, podemos analisar isso quando chamamos nossa função. Em nossa configuração, temos acesso a todos os adereços e, em seguida, nosso índice de seção. Além disso, apenas certifique-se de que estamos assistindo a seção atual do valor 2 e sobre o navegador, vamos ver onde estamos agora com o nosso projeto. Falta-nos o texto à direita. Agora, vamos para o console e ver o que está acontecendo aqui. Não podemos definir propriedade zero de indefinido e nenhum uso cartão atual. Esta é a nossa função de cartão de atualização, parece que temos um erro apenas aqui. Vamos ver o que está acontecendo. Nós acessamos no cartão selecionado o valor nas páginas, o índice da página. Sabemos que isso está funcionando porque usamos isso logo acima quando obtemos a página selecionada. Isso tudo funciona bem. Em seguida, para as seções. Eu acho que isso deve ser apenas seção com um S sobre os dados. Sim, só precisamos de um “S” no final da nossa secção. Esperemos que vejamos o nosso texto mais uma vez. Bom. Agora, vamos tentar editar este texto, e vemos uma atualização. Em seguida, você vê um estilo de fonte, os alinhamentos. Bom, isso funciona porque quando atualizamos o cartão, o valor do cartão também é reativo. Todas as alterações são então repassadas para os componentes que precisam dela. É por isso que vemos as atualizações na visualização do cartão. Mas há duas opções que ainda não funcionarão. Este é o ousado e itálico. Isso ocorre porque ambos são caixas de seleção que são ou vai ser um valor verdadeiro ou falso. Para lidar com isso, vamos passar para a nossa saída de texto e criar dois novos estilos. Essas classes podem ser ativadas ou desativadas. O primeiro vai ser para negrito, que vai definir o CSS da propriedade wave para negrito e, em seguida, o segundo é para itálico. Vamos definir o estilo da fonte para ser igual a itálico até o topo. Todos têm dentro do nosso modelo é o nosso elemento P para o nosso texto. É aqui dentro onde vamos adicionar as classes dinâmicas como um objeto. Dentro deste objeto, agora temos duas classes que você deseja adicionar. Estas são as nossas duas classes que foram criadas no fundo. Temos ousado e temos Itálico. Agora precisamos de uma maneira de ativar ou desativar essas classes, dependendo se essas caixas de seleção estão selecionadas. A maneira de fazer isso, vamos dar uma olhada em nosso objeto é que temos isso é propriedade itálica e também é negrito. Ambos estão disponíveis em nosso objeto de seção. O primeiro é seção ponto é negrito e, em seguida, ponto seção é itálico. Isso significa que, se isso for verdade, nossa classe ousada será aplicada e também o mesmo para Itálico também. Antes de encerrarmos isso, vamos dizer isso e tentar isso no navegador. Vamos mudar o texto, ficar em negrito, e isso funciona também. Torne-se em itálico e isso ativará e desativará a classe. Também podemos ver se vamos para entradas de texto diferentes que todas essas seções são completamente independentes também. 119. Adicionando novas seções: Mesmo que tenhamos fornecido ao usuário alguns cartões de amostra editar, que é todos estes usados aqui. Nós também queremos torná-los mais flexíveis permitindo que eles adicionem e removam seções também, começando com a seção “Adicionar em novo texto”, que é esta seção apenas aqui. Vamos permitir que o usuário clique em um botão e adicione novas seções logo abaixo. Mas isso primeiro precisamos de um botão no qual o usuário pode clicar. Vou colocar isso na edição do cartão. Logo acima deste V para loop, colocado em uma nova div com a classe de adicionar wrapper seção. Com base em um botão e efeitos de adicionar nova seção de texto. Não queremos que o usuário enlouqueça e adicione muitas e muitas seções de texto diferentes que não cabem nesta página. Então o que vamos fazer é restringir o usuário a adicionar apenas em quatro seções. Dentro da função, também cuidaremos de restringir isso a quatro seções. Mas no front-end dentro do nosso template, nós só vamos mostrar este botão se o número de seções for menor que 4. Nós já temos acesso aos nossos adereços de página selecionados que terão esta informação, pegar a página inteira nas seções e podemos verificar se o comprimento é inferior a 4. Se for, vamos aprender a exibir este botão. Nós temos esses clusters aqui, eu vou pegar isso e descer para a “Seção de Estilo”, que também pode ser escopo. Antes de fazer isso, vamos atualizar o navegador e ver onde este botão é colocado. Agora isso nos deixa com um problema. Vemos o erro de não é possível ler o comprimento da propriedade de indefinido. Se dermos um passo atrás e pensarmos nisso, algumas de nossas páginas não têm nenhuma seção, como algumas das costas dos cartões e algumas da parte interna esquerda não têm nenhuma seção de texto para exibir. Aqui estamos tentando acessar a propriedade length de algo que não existe. Para lidar com isso, podemos adicionar um ponto de interrogação logo após as seções e isso é o que é chamado de encadeamento opcional. Isso é tudo JavaScript e nada a ver com VUEJs. Este encadeamento opcional é basicamente uma maneira de dizer que às vezes essas seções podem estar lá e às vezes podem não estar. Estamos completamente cientes disso, então não jogue um erro. Se salvarmos isso e agora atualizarmos o navegador, vemos que não vemos nenhum problema mesmo que não tenhamos nenhuma seção como esta parte de trás da página. Com este endereço, agora podemos voltar para a nossa seção de estilo e vamos colocar esta “Adicionar nova seção de texto” no lado direito. Isso fará uso da flexbox e, em seguida, empurra para a direita com “Justify Content Flex End”. Veja imediatamente, isso é empurrado para a direita da nossa seção. Isso também precisa de alguma margem na parte inferior. O espaço está fora do golpe de conteúdo. O golpe de conteúdo é atualmente o assunto e não temos mais uso para isso. Podemos ir para as entradas de texto e também remover isso do nosso modelo. Este botão e também os links gratuitos suficientes sobre a conversa também se beneficiariam de um estado flutuante também. Quando o usuário passa o mouse sobre isso, você pode alterar a cor para que o usuário saiba que isso é clicável. Como queremos aplicar isso a diferentes seções, vou colocar isso na visão [inaudível]. Como esta seção de estilo não tem escopo, basta soprar o botão. Passar os estados e também o mesmo para todos os itens da lista também. Apenas uma propriedade para isso definirá a propriedade color. Este valor RGB de 108108241. Seu estado de foco agora está funcionando, pois agora podemos continuar com a funcionalidade para adicionar uma nova seção. Depois disso, vamos passar para o que usamos cartão atual e criar uma função que vai atualizar o nosso cartão selecionado. Para baixo, crie uma nova função chamada “Adicionar Seção”. Lembre-se antes que dissemos que vamos limitar o número de seções para antes. Mas também podemos cuidar disso no topo de nossa função. Podemos verificar se a página selecionada, o valor, as seções, o comprimento é maior ou igual a 4. Se isso for verdade, irá então retornar para fora desta função sem executar as linhas de código, que estamos prestes a escrever. O que vamos fazer agora é basicamente criar um novo objeto e, em seguida, ele empurra para o nosso cartão selecionado para manter a mesma estrutura que todos os outros cartões, cabeça para o ponto js de dados, e cópia de um desses objetos de seção. Mas para todas as lojas de função em uma constante chamada Nova seção. Isto é igual a objetos. Para solicitar ao usuário, vamos definir a entrada do usuário para ser “digite seu texto aqui”. Podemos manter no lugar uma altura padrão, uma cor padrão, família de fontes, e todas as outras opções que podemos manter como um valor padrão. Você também pode alterá-los se preferir. Então o que precisamos fazer agora é selecionar nossos cartões completos, ir para a página selecionada e, em seguida, adicionar cada nova seção. Isso é muito semelhante ao que estamos fazendo quando atualizamos o cartão apenas aqui. Basta explodir nossa nova seção, cortar o cartão selecionado, o valor para as páginas e podemos acessar o número de índice com nossa função de índice de página get. Chame esta função para as seções. Em seguida, vamos empurrar um novo item para esta matriz. O que queremos empurrar é esta nova seção. Retornar esta função na parte inferior e, em seguida, volta para a nossa edição de código onde podemos importar este arquivo e também acessar nossa função é usado para executar cartão. Isto é da nossa pasta composable. Em seguida, entrevista cartão atual. Em seguida, precisamos de uma função de configuração para acessar esta função dentro de uma constante. A função estava na seção. Este é de usar cartão atual e, finalmente, adicionar seção pode ser devolvido a partir da nossa configuração. [ inaudível] qualquer cliques pode chamar esta função que é o nosso botão, eu clique, que vamos chamar de nossa função adicionar seção. Vamos tentar isso, atualizar. Esta página em particular já tem três seções. Tentamos adicionar mais um. São todas as quatro seções e nosso botão agora desaparece. Vamos tentar a frente. Tem uma seção, 234 e tudo isso está funcionando agora. Os próximos vídeos vamos seguir um padrão semelhante sobre o uso de cartões atuais. Vamos criar uma série de funções para atualizar nosso cartão selecionado e, em seguida, chamar esta função de nossos componentes particulares. O próximo será remover uma de nossas seções. 120. Removendo seções: No último vídeo, configuramos este botão para adicionar uma nova seção de texto a qualquer uma de nossas páginas, e neste próximo vídeo, vamos configurar um botão para remover qualquer uma das seções também. Remover uma seção será um pouco mais simples do que adicioná-los , pois se dermos uma olhada em nossos dados, dentro de qualquer uma de nossas páginas, essas seções são colocadas dentro de um array. Este em particular só tem uma única seção de texto, mas poderíamos ter até quatro seções dentro daqui. Para removê-los, só precisamos saber o número de índice da seção que queremos remover. Isto, vamos criar uma função em UseCurrentCard. Então vamos até o fundo e criar nossa função chamada RemoveSection. Como acabamos de mencionar, o removeSection também precisará tomar no SectionIndex quando chamamos essa função. Assim como acima, quando adicionamos uma nova seção, também precisamos pegar o cartão selecionado, ir para a página atual, e depois para a matriz de seções. Então vamos mudar isso. Mas desta vez, em vez de empurrar um novo item para a matriz, queremos fazer uso do método de splice JavaScript. Com emenda, precisamos passar dois valores. O primeiro será a posição dentro da matriz do item que queremos remover, e esta será a partir do SectionIndex, separado por uma vírgula, o número de itens que queremos remover. Nós só queremos remover a única seção. Ok. Em seguida, retorne esta função. Esta função vai ser chamada a partir do componente de entrada de texto. Nosso composable já foi importado, então tudo o que precisamos fazer é importar ou extrair nossa função, que é RemoveSection. Além disso, o retorno é para que possamos usar isso dentro do nosso modelo. RemoveSection, como acabamos de ver também, requer o SectionIndex quando chamamos essa função. Este componente já tem isso disponível dentro de adereços. Então agora podemos ir até o topo do nosso modelo e logo acima da área de texto, criar uma nova seção que vai quebrar o nosso botão para remover a seção. Para estilo, coloque na classe, text-input-header. Então aqui dentro vamos colocar em um botão. Juntamente com este botão de remoção, também adicionaremos alguns dos outros botões mais tarde. Mas agora, nós só precisamos do único botão com um x, que vai ouvir por um clique. Então acionar nossa função. Passe no SectionIndex, que é o nosso adereço. Vá para o navegador e teste isso. Clique no X. Isso agora é removido. Vamos para um cartão diferente e remover o do meio. Como tudo está reativo, removê-los também atualizará a visualização. Também como uma nota lateral antes de encerrarmos este vídeo, se entrarmos no console, vemos que estamos sendo gritados pela biblioteca de visualização porque estamos usando uma função de relógio e isso é apenas por causa da maneira que estruturamos isso Sentinela. Se descermos, este observador está esperando uma função de retorno de chamada como o segundo valor. Então, para remover este, o que precisamos fazer é remover esta função diretamente. Crie uma nova função UpdateCard abaixo. Passa isto. Então podemos simplesmente chamar essa atualização como um retorno de chamada. Vá para o navegador. Abra as ferramentas de desenvolvedor, no console, e isso agora se livra da nossa mensagem de erro. 121. Reordenando a ordem de seções: Se temos várias seções de texto exatamente como vemos aqui, no lado direito, pode ser útil também colocar em um botão para cima e para baixo para reorganizar a ordem das seções. Para fazer isso, vamos até as entradas de texto e, em seguida, ele precisa no topo. No último vídeo, criamos esta seção. Isto foi para o nosso cabeçalho. Então, logo acima deste botão, crie uma nova seção div, que será um wrapper para ambos os botões para cima e para baixo. O primeiro, vamos listar agora para um clique, que vai acionar uma função que ainda não criamos, mas isso será chamado UpdateSectionOrder. Esta função vai levar em duas coisas. O primeiro vai ser o SectionIndex, que é de adereços, e a função que vamos precisar para que ele saiba qual seção queremos mover. O segundo valor é a direção que queremos mover esta seção. Então, se pensarmos sobre isso, isso é um array. Então esta será a posição de índice 0, este será um, e este será dois. Então, para mover qualquer uma dessas seções para cima, precisamos passar em um negativo para nos empurrar para cima na matriz. Dentro do nosso botão, vamos colocar em um ícone dentro do elemento de imagem. A fonte é o símbolo at para os ativos, os ícones, e temos um ícone chamado arrow-up.svg, o texto alt da seta para cima, em seguida, ele duplicar este botão para o próximo e colocar isso logo depois. Isso chamará a mesma função, mas desta vez teremos uma positiva, a seta para baixo, e a mesma para o texto alt. Está bem. Há nossos dois botões, mas isso também precisa de um pouco de estilo. Esta seção irá envolver todos os botões como o cabeçalho de entrada de texto clássico. Vou pegar isso e fazer o ninho lá dentro. Temos o nosso div e também este botão. Podemos fazer uso da flexbox e também o espaço entre a propriedade para alinhar isso em toda a página. Até o fundo da seção de estilo, fiz a nossa aula. Primeiro, o tipo de exibição de flex. Isso nos dará a direção flex padrão da linha, então isso será colocado em toda a página. Apenas pelo conteúdo, vamos adicionar o espaço entre e, em seguida, algum preenchimento na parte inferior. Em seguida, reduza o tamanho das imagens direcionando o mesmo wrapper e, em seguida, os elementos da imagem. Largura de 15 pixels e isso reduzirá o tamanho de nossos ícones. Algum preenchimento à direita de cinco pixels. Basta jogar algum espaço entre cada um desses ícones. Está bem. Agora precisamos configurar essa função no UseCurrentCard. Na parte inferior, função, chamar este UpdateSectionOrder. Isso também passou do SectionIndex como o primeiro valor, e o segundo foi a direção, que foi positiva ou negativa. É positivo ou negativo um número que vamos usar para atualizar a posição do índice de seções. O primeiro passo é criar uma matriz que vai conter todas as seções para esta página. Assim como acima, podemos acessar nossas seções com esta parte do código, copie isso. Logo abaixo disso antes de realmente executar esta opção, também precisamos verificar se esta opção é realmente possível. Com isso, queremos dizer se estamos atualizando o topo aqui e clicamos em cima, isso não tem para onde ir. O mesmo para a parte inferior também se clicarmos para baixo, não temos uma seção abaixo para substituí-la. Então, para nos protegermos contra isso, vamos colocar em uma declaração if, colar em nossas seções. Então aqui dentro, se passarmos em nosso SectionIndex mais a direção, então vamos verificar se isso é igual a indefinido. Está bem. Então, só para esclarecer o que estamos fazendo aqui, estamos pegando todas as nossas seções nesta página. Queremos nos proteger contra este ser ou a primeira ou a última seção onde o que estamos fazendo é pegar o SectionIndex atual. Então, se este foi o primeiro, ele será posicionado zero. Se o usuário clicou no botão para cima, este será zero e, em seguida, um negativo. Se esse fosse o caso, isso seria igual a indefinido, então isso seria verdade. Se sectionIndex, no entanto, foi a nossa última área de texto, neste caso será a posição de índice 2. Se a direção fosse positiva, este seria então o número de índice 3, que não está disponível, portanto, retornaríamos indefinido. Se mesmo um desses for o caso, queremos retorná-lo desta função sem atualizar nossas seções. Caso contrário, a função continuará a funcionar, e se chegarmos a este estágio, podemos agora mudar todas as posições. Isto é realmente apenas uma questão de mudar as posições de índice de dois itens de matriz. Estes dois itens de matriz é a seção de impostos que clicamos e também a seção de impostos que está no lugar para onde queremos movê-lo. É assim que parece. Precisamos criar uma matriz, que é igual a outra matriz. Vamos definir a nossa taxa de câmbio para ser igual a uma diferente. Este primeiro, que é o array atual, vai levar em duas coisas. Primeiro, o item da matriz que queremos mover, que podemos acessar com matriz, em seguida, passando nossa sectionIndex, e depois separados por uma vírgula, selecione o item da matriz que queremos substituir. Então nós vamos pegar nosso array, mas desta vez vamos passar no SectionIndex mais a direção. Em seguida, fazemos o oposto na segunda matriz, então alternamos em torno das posições. A primeira descoberta é a nossa matriz, passar no SectionIndex mais a direção, e, em seguida, substitui com matriz sectionIndex, e retornar isso de volta da nossa função e, em seguida, importar isso em nossa entrada de texto. Já estamos acessando nossa função UseCurrentCard, mas apenas passando nosso UpdateSectionOrder. Este nome corresponde à função que são colocados na parte superior. Então, quando clicamos em qualquer um desses botões, eles agora devem atualizar nossos números de índice. Vamos tentar isso em qualquer uma de nossas seções. Agora podemos clicar para baixo na seção superior, ele agora se move para o meio. Clique para baixo novamente na seção superior, e este eu vou trocar os números de índice. Olhe na seção inferior e isso funciona, e também teste contra nossos guardas para a seção inferior. Se clicarmos para baixo, nada acontece. Se clicarmos em loop na seção superior, isso também funciona bem também. Isso também irá atualizar a seção de edição e a seção de visualização, já que tudo é reativo, mas temos um pequeno problema no entanto. Se formos para qualquer uma de nossas páginas que não tem novas seções, adicionamos quatro novas seções aqui. Isso pode ser o número 1, o número 2, o número 3 e o número 4. Vamos tentar atualizar isso. Se clicarmos no botão para cima e para baixo, não vemos nada sendo atualizado neste lado de edição. Agora, isso remonta a algo que aprendemos mais cedo, que é adicionar chaves ao nosso loop v-for. Ao atualizar uma lista de itens como este, v precisará de uma chave única para ser capaz de atualizar de forma eficiente. Ainda não colocamos um ID em nossas novas seções. Podemos ver que isso vai para a edição do cartão e para o nosso loop v-for. Cada uma dessas chaves depende de um ID de seção. Para gerar um ID para isso, vá para o nosso UseCurrentCard e podemos colocar em um campo ID dentro de nossa nova seção. Como vamos gerar um ID exclusivo? Se estamos usando um banco de dados, isso seria relativamente simples. O banco de dados geraria um para nós. Poderíamos então recuperar o item salvo e também armazenar isso em nossa nova seção. Para o nosso caso, precisamos gerar um dentro do aplicativo. Para isso, vamos importar um novo pacote, então abra o terminal. Host neste servidor com Command ou Control C, e então vamos instalar um novo pacote com npm, eu instalei, e o nome do pacote é UUID. Este pacote vai gerar um ID exclusivo para cada um dos itens. É muito simples de usar. Se formos para o topo deste arquivo, então vamos importar este módulo. Vamos importar a versão 4 como uuidv4 do nosso pacote, que é UUID. Agora, nós importamos nossa versão 4 e nós vamos ser capazes de acessá-la com esta variável apenas aqui. Agora, se vamos para a outra seção e definir isso igual ao nosso nome que é uuidv4, e, em seguida, chamar esta função para gerar um novo ID. Vamos tentar isto. Agora, precisamos reiniciar o servidor com npm run serve, abrir o saque e adicionar quatro novas seções; número 1, número 2, número 3, número 4. Vamos clicar para cima, isso vai subir. Mais uma vez, vamos tentar. Tudo isso agora está funcionando corretamente. 122. Alterando a altura de uma seção: Quando criamos o menu quando passamos o mouse sobre esta área de texto, também adicionamos alguns botões para aumentar ou diminuir a altura da seção. Agora podemos usar isso e criar a função para fazer essa alteração. Isso fará com que cada uma dessas áreas de texto seja ainda menor ou maior. Este [inaudível] para o nosso menu, que está dentro da entrada de texto, e então eu vou fazer uma pesquisa para o meio do menu. Esta é a seção que precisamos, aqui, temos nossos botões para cima e para baixo. O botão que precisa [inaudível] para um clique, que vai acionar uma função quando você ainda não criou chamado change height. Esta função vai levar no número de pixels que queremos aumentar ou diminuir a altura. Eu vou colocá-lo em 100 embora este botão vai aumentar a altura desta seção. Sobre isso, o lugar está em nosso segundo botão, mas desta vez vamos diminuir a altura em 100 até a configuração. Vamos criar esta função. Isto está no fundo. Esta foi a altura de mudança, que aceitará o valor e isso será um positivo ou um negativo 100 pixels. A primeira coisa que queremos fazer é armazenar a altura atual da seção ou podemos extrair isso da nossa seção atual. Isso é [inaudível] então também precisamos acessar o valor e, em seguida, a propriedade height. Pouco antes de atualizarmos esta seção da cidade alta, vamos passar em um guarda. Queremos nos proteger contra a seção ser muito pequena ou muito grande. Depois disso, vamos verificar se a seção vai ser reduzida a uma altura de zero ou aumentada acima de 600 pixels, que é a altura deste card. Para fazer isso, coloque nas instruções if, vamos verificar se a altura atual que temos logo acima é atualmente igual a 100 pixels e o valor é igual a 100 negativos. Então isso é verificar se a altura atual da área de texto é 100 pixels e também se o usuário clicou no botão diminuir. Isso resultará em uma altura atual sendo zero. Nós obviamente não queremos isso, então nós precisamos verificar contra isso e também o oposto se estamos na altura máxima. Então, se a altura atual é igual a 600 pixels, e também se o valor que é passado para esta função é igual a 100, se for, vamos retornar alteração disfunção sem executar qualquer código. Isso lançou um erro e eu acho que só precisamos envolver toda a seção dentro dos suportes. Mas se chegarmos a este estágio abaixo, isso significa que agora podemos atualizar a altura. Para atualizar isso, vamos atualizar esta seção atual, precisamos acessar o valor, e então a propriedade height, e vamos definir isso igual à nossa altura atual mais o valor, que será [inaudível] 100 pixels maior ou 100 pixels abaixo. Isto é realmente tudo o que precisamos fazer para esta função porque se nós atualizarmos nela a seção atual apenas aqui, nós já temos um observador colocado sobre isso, que irá então atualizar nosso composable. Isso significa que só precisamos retornar isso de volta de todas as funções, então podemos testar isso. Para o primeiro, aumente o tamanho, vamos aumentar, e podemos diminuir o tamanho também. Se continuarmos clicando, não podemos reduzir isso abaixo de 100 pixels e também se aumentarmos isso, ele chega a um tamanho máximo também. 123. Estilização adicional: Este vídeo vai se concentrar em terminar alguns dos toques CSS que precisamos adicionar ao nosso projeto, começando com a fonte no app.vue. Atualmente, temos esta fonte que está aqui, e você está livre para usar esta se preferir, ou qualquer outra família de fontes. Com o projeto inicial, se entrarmos no index.html, dentro da seção de cabeçalho, temos esse link para duas famílias de fontes diferentes. Este Merriweather é o que eu vou colocar dentro do app.vue e já usamos este overblown cedo dentro do cabeçalho. Podemos ver isso se entrarmos no cabeçalho do aplicativo. Esta é a fonte que definimos para esta seção. Mas vamos voltar ao app.view. Vamos colocar na fonte Merriweather, com um recurso Serif, caso haja algum problema ao carregar esta fonte. Além disso, vamos adicionar esta fonte para a entrada, e também a área de texto também. Copie isto. A razão pela qual fazemos isso é porque, por padrão, as entradas não herdam as fontes automaticamente. Então também precisamos colocá-los assim. Vamos salvar isso. Esta nova fonte agora entrou em vigor. Dentro desta visão de criação, que você pode ver apenas aqui, também temos alguns problemas para resolver. Temos esses botões de página enormes que precisam se alinhar em toda a parte superior, e também diminuir o tamanho também. Também temos algum espaçamento entre cada uma dessas seções de texto e isso também resulta nas seções sendo empurradas para fora da página, para o componente de saída de texto. Primeiro, lidaremos com essas seções de texto removendo as margens padrão e aproveitando o tamanho da caixa também. A seção inicial é toda envolta no elemento p. A margem padrão será definida de volta para zero. Salve isso e verifique se está funcionando. Cada uma dessas seções p também está cercada na fronteira. Lembre-se quando adicionamos uma borda a qualquer elemento HTML, ele também irá adicioná-lo ao tamanho geral. Para evitar isso, podemos definir o tamanho da caixa para ser border-box. A próxima coisa a fazer é tirar desses quatro botões para mudar as páginas. Isso tem seu próprio componente, que é o SwitchPage.vue. Teremos uma lista normal e desordenada. Podemos fazer uso da flexbox CSS dentro da seção Estilo. Há nossos links colocados em toda a página porque a direção flex padrão é linha e eu acho que nós só precisamos mover esses links apenas fora da seção cartão. Podemos ver que estes têm esta cor de fundo cinza. Mas nós vamos apenas para a seção Criar, que está nos vues. Acho que vamos levantar os componentes da página de comutação para estar fora do invólucro. Isso será colocado logo acima de todas as seções de cartas. Se eu passar para o estilo dentro do componente de página switch, continue a trabalhar com a lista não ordenada, adicionando alguma margem na parte superior e inferior, de 1,6 gramas e, em seguida, zero à esquerda e à direita. A próxima coisa que precisamos fazer é reduzir o tamanho de cada um desses ícones e também alinhar o texto ao centro desse ícone. Cada um desses links teve a classe de página selecionada, e podemos usar essa classe para reduzir esse tamanho de ícone. Primeiro de tudo, os alinhamentos farão uso da flexbox e, em seguida, definirão o alinhamento vertical com itens de linha no centro. Há o nosso alinhamento vertical, e em seguida, uma margem no lado direito de 10 pixels. Isso vai nos dar algum espaçamento no lado direito de cada um desses links. A seguir, a imagem. A largura máxima deste ícone desta imagem será de 30 pixels. Deve reduzir o tamanho dos nossos ícones para baixo. Além disso, se adicionarmos alguma margem à esquerda, isso adicionaremos um pouco de espaço entre a imagem e também o texto. Bom. Este projeto agora parece um pouco melhor, e você também está livre para ir em frente e mudar qualquer estilo que você gostaria de apenas alguns estilos base para melhorar a aparência geral. Pouco antes de encerrarmos esta seção, vamos olhar em seguida para usar fornecer e injetar com a API de composição. 124. Provide/inject com composição: Fornecer e injetar é algo que já analisamos, ter uma fonte de dados em um componente de nível superior e, em seguida, injetá-lo diretamente em qualquer componente filho sem a necessidade de passar adereços para cada nível de componente. Também podemos usar isso com a ferramenta de composição. A função de configuração pode aceitar fornecer ou injetar. Um dos problemas anteriores era que os dados fornecidos não eram reativos. Quando houve uma alteração nos dados dentro deste provedor, qualquer um dos componentes filho abaixo que dependia disso, não foi atualizado. Mas agora sabemos sobre visualização livre, a API de composição e também reatividade, agora podemos fazer uso disso para corrigir esse problema. Sobre os componentes de exibição de atualização e eu vou mostrar a vocês como podemos usar isso com a composição. Lembre-se de que um provedor pode ser colocado em qualquer componente, não apenas nesta exibição de atualização principal. Primeiro, precisamos de uma função de configuração com alguns dados. Coloque isso dentro de nossa seção de script e, em seguida, para nossos fins de demonstração, crie um objeto de usuário com a propriedade name e também a ocupação. Uma vez que este é o nosso componente de nível superior, vamos colocar no provedor dentro daqui. Para fazer isso, precisamos importar isso da biblioteca de exibição. Isso é fornecido a partir da biblioteca de exibição. Em seguida, para baixo para a função de configuração que podemos colocar em nosso provedor, que vai levar em duas coisas. O primeiro é o nome desses dados, e isso é como um nome de variável. O próximo é o usuário. Em seguida, separados por vírgula, vamos passar para baixo os dados reais que você deseja enviar. No nosso caso, isso se refere aos nossos objetos de usuário. Dentro de qualquer um desses componentes filho, quando injetamos no usuário, esses são os dados que ele receberá. Para salvar este arquivo, vou passar para a saída de texto. Nós já temos uma função de configuração e nós também temos uma importação apenas aqui, então nós também podemos importar injetar aqui, e então nós podemos injetar este objeto de usuário para baixo para a configuração, criar uma constante. Para armazenar isso, os dados do usuário, o acesso injetar. Em seguida, quando ele passa nos dados que você deseja injetar, e no nosso caso, nós damos este nome o usuário. Passe isso como uma string. Também podemos adicionar um segundo valor opcional dois, que é um valor padrão. Como quando usamos esses slots no início, quando adicionamos um padrão ou um pedaço de fallback de dados, eu vou apenas alternar string de nenhum dado disponível. Retorno é constante de dados do usuário na parte inferior. Podemos verificar se isso está funcionando, produzindo isso dentro do nosso template, sobre o navegador e recarregar isso, e há o nosso objeto no topo de cada um dos nossos componentes de saída de texto. Agora, a reatividade era um problema no início quando olhamos para fornecer e injetar, com as opções API, vamos ver como isso se compara com a composição. Voltando ao nosso app dot vue, podemos simular os dados obtidos com o tempo limite definido como função NA, que chamaremos após três segundos. O que eu quero fazer dentro daqui é começar a usar objetos, acessar a propriedade name, e definir isso para qualquer valor diferente. Podemos experimentar isso com uma atualização. Dê três segundos a isto. Não vemos atualizações dentro deste componente filho. Mesmo com a composição fornece e injetar não é reativo por padrão. Mas, como já sabemos, a composição nos dá acesso a invólucros reativos, que possamos usar tanto áspero quanto reativo. Nesta ocasião eu vou para reativa, dentro do app dot vue e puxar isso. Isso agora vai ser um wrapper para nossos objetos de uso. Corte o conteúdo do objeto, coloque em reativo, cole isso dentro dos suportes. Salve isso mais uma vez e sobre o navegador, atualize. Dê-lhe três segundos, e o nosso nome será actualizado. Se tivéssemos várias partes de dados para passar para componentes filhos, também poderíamos configurar vários provedores, assim como este aqui, ou alternativamente, poderíamos passar todos os nossos dados em um grande objeto reativo, e em seguida, passe isso para o provedor. É assim que fornecer e injetar funciona com a composição. Nós não precisamos disso para nossos projetos, então eu vou remover a função de configuração, as importações, nós também temos a injeção dentro da saída de texto, mover os dados do usuário, a importação, os dados do usuário e, em seguida, finalmente, nosso objeto retornado. Os casos de uso para fornecer e injetar podem não ser tão comuns agora, já que também temos a capacidade de usar arquivos composable e, em seguida, importá-los diretamente para componentes filho. Mas não é uma opção e uma nova maneira de transmitir nossos dados, especialmente se talvez tenhamos um aplicativo menor, não planejamos dividir nosso código em arquivos composable menores. Nós empurramos através de um pouco de código de projeto nesta seção, e nosso projeto é quase totalmente funcional. Na próxima seção, descobriremos que alguns recursos mais legais do vue.js E também o roteador de visão fornece. 125. Introdução: guardar de navegação e lazy loading: Às vezes, em nosso projeto, não queremos que o usuário visite todos os locais que temos ou às vezes também queremos fornecer algumas verificações para ver se o usuário é realmente permitido em qualquer rota específica. Nesta próxima seção, vamos dar uma olhada nos guardas de navegação, que são fornecidos com o roteador Vue. Também vamos olhar para uma técnica nunca realmente útil chamada de carregamento lento, que nos permitirá dividir nosso aplicativo em partes menores para melhorar o tempo de carregamento da página. 126. Guardas de navegação: Como parte do pacote de visão do roteador que instalamos, podemos fazer uso de protetores de navegação ao mudar entre nossa rota. Você pode pensar em um guarda de navegação como alguém parado na porta de um clube, pedindo para ver alguma identificação antes de entrar. Em termos de código, esta identificação, pode ser qualquer coisa como se o usuário está logado, se ele tem as permissões corretas ou mesmo coisas como apenas permitir que um usuário acesse uma área de download se ele tiver comprado esse item específico. Podemos basicamente executar qualquer código que gostamos antes ou depois de uma mudança de rota. Há diferentes guardas disponíveis, mas vamos dar uma olhada em alguns dos comuns, começando com se queremos aplicar uma guarda contra toda a nossa rota, com isso podemos usar uma guarda global que é chamada BeforeEach. Fazemos isso para o nosso arquivo de rota, e isso está dentro do roteador e, em seguida, o index.js. Abaixo da matriz da nossa rota, podemos acessar nosso roteador com essas constantes de roteador. Precisamos ir logo abaixo disso, então podemos acessar este roteador e chamar o guarda, que é BeforeEach. BeforeEach é um protetor de navegação global para que ele se aplique a todas as rotas em nosso projeto. Quando é uma mudança, vamos fornecer uma função de retorno de chamada, e é dentro desta função onde podemos interceptar esta mudança de rota e, em seguida, ele executa algum código. Como um exemplo muito básico, podemos retornar false dentro desta função e isso irá parar qualquer mudança de rota ocorrendo. Não podemos nem carregar nosso aplicativo. Não podemos clicar no botão Início e também esses links de categoria também não funcionam. Mas é o mais básico. É assim que bloqueamos uma mudança de rota e, uma vez que isso não é muito específico, ela se aplicará a todas as mudanças de rota. BeforeEach também nos dá acesso aos detalhes da rota, de onde você está indo e também à rota que estamos deixando. Vamos passar estes para as nossas funções com e de. Como parece, o valor de to é rota para onde você está indo e o de é aquele que estamos deixando. Vamos ver como estas parecem. Passando o para e, em seguida, também o de variáveis. Para a consola. Esses são os nossos dois objetos. A primeira é a rota para onde você está indo e esta é apenas a rota de casa. Isto faz sentido. O segundo é o de objetos, e uma vez que não estamos alterando rotas, este ainda é barra padrão versus se removermos a instrução return e alternar entre suas rotas sobre. Vamos da página inicial para a nossa categoria, e podemos ver esta categoria se clicarmos na seção, e fazemos convênio a partir da rota para casa. Esses objetos nos dão acesso a coisas como o caminho completo da rota, as consultas, o nome de nossas rotas, os parâmetros, e todos eles são totalmente acessíveis a partir de nossa função, e essa informação significa que podemos ser mais específicos com quais rotas queremos guardar. Por exemplo, em vez de observar todas as nossas rotas dentro daqui, podemos observar um usuário entrando em uma rota de administração. Podemos adicionar uma declaração if dentro daqui e podemos acessar nosso para valor e, em seguida, selecionar o nosso nome. Este nome, tal como a categoria apenas aqui, é um nome que damos para a rota dentro da nossa matriz logo acima. Podemos acessar o administrador. Se to.name for igual a admin, e certifique-se de que este valor é o nome acima. Se isso for verdade, retornaremos um alerta ao usuário com o texto “Esta área é somente para usuários conectados”. Vamos verificar isso no navegador. Nós não usamos nenhuma de variáveis, então nós também podemos remover isso. Toda a rota parecia funcionar completamente bem, e vamos ao /Admin, e aí está o nosso alerta. Uma vez que clicamos em “Ok”, ainda somos levados para esta rota de administração. Atualmente não estamos realmente bloqueando no usuário, estamos simplesmente exibindo um alerta. Na realidade, embora talvez queiramos verificar se o usuário está logado ou tem privilégios de administrador, em vez de apenas um alerta. Se não houvesse acesso permitido, poderíamos retornar false ou até mesmo retornar um método de redirecionamento de roteador, como o método push, e a maneira de fazer isso é acessar também a variável relativa, e então ainda temos acesso para fazer coisas como o método push que olhamos anteriormente. Isso significa que se o usuário estiver tentando acessar essa rota de administração, podemos redirecioná-lo para a página inicial. Estamos na página inicial no momento. Mas se formos para o administrador, Isso vai, em seguida, empurrar-nos de volta para a página inicial. Junto com isso antes de cada guarda que é executado antes da mudança de rota. Nós também temos AfterEach para, e este é um gancho que é executado uma vez que a navegação terminou. Como a navegação já aconteceu, ela também não pode fazer alterações, como redirecionar ou bloquear a rota. Ou, em vez disso, podemos usá-lo para coisas como rastrear as visitas de um usuário a uma página específica ou até mesmo alterar alguns detalhes da página depois que ela é carregada. Ele também pode receber os dados de e para, se necessário, e ambos os protetores são considerados globais, uma vez que será executado para cada mudança de navegação. Se não quisermos que eles sejam globais, também podemos colocá-los diretamente em uma única rota também. Vou apenas comentar isto e deixar isto para uma referência. Mas também podemos colocar isso em qualquer uma de nossas rotas componentes também. Ou seja, se quiséssemos proteger apenas esta rota de administração, por exemplo, poderíamos colocar diretamente uma guarda nesse objeto. O guarda para isso é chamado antes de entrar e, em seguida, configurar um método que vai ser executado cada vez que tentar entrar nesta rota admin. Assim como antes podemos fazer coisas como retornar um falso para bloquear qualquer acesso a esta rota. A página inicial funciona, a categoria funciona, a caixa funciona. Mas se estamos tentando entrar no admin, podemos ver que o componente não está carregado, já que não temos o título de administrador. Isso também poderia levar no para e também o de variáveis também se precisássemos de acesso a essa informação. Mas realisticamente, nós voltaríamos a fazer algo como verificar se o usuário está conectado antes de realmente carregar esta rota. No momento, não temos acesso a um usuário para este projeto, mas podemos simular um para este exemplo. Logo acima das rotas que seriam constantes chamadas logadas, que serão inicialmente falsas. Podemos usar isso dentro da nossa guarda. Em vez de retornar false diretamente, vamos primeiro verificar se o usuário não está logado antes de bloquear esta rota. Lembre-se que isso é falso no momento. Então, se tentarmos atualizar, não vemos nenhum acesso a esses componentes. Se mudarmos isso para true, agora temos acesso ao nosso administrador. Este tipo de guarda também será acionado apenas em uma mudança de rota completa. Ou seja, a mudança de rota deve desencadear um novo componente. Ele não será executado se nós apenas temos uma alteração da consulta ou a mudança de parâmetros na URL. Assim como antes quando tivemos que alterá-los manualmente, quase alternando entre essas categorias. Bem, para este exemplo, ainda estamos nos componentes da categoria, mas estamos apenas mudando os parâmetros. Neste caso em particular, o guarda não funcionará, já que estamos nos mesmos componentes. Outra coisa útil que podemos fazer com esses guardas é mover o código para funções autônomas, então se eu tivesse uma função que verifica se o usuário está logado. Poderíamos então extrair nosso código de nossa guarda. Ele vai colocar para fora as declarações if-, colocar isso em nossa função, e seu nome de função pode agora ser guarda rápida como um array. Então, para isso, não queremos executar este método, vez de passar em uma matriz um nome de função antigo. Salve isso e nossas rotas funcionarão. Vamos tentar visitar o administrador. Podemos acessar isso já que nosso uso é verdadeiro, muda para o falso, e desta vez ele bloqueia nosso acesso. Se necessário, essas funções também podem tomar esses dois e isso a partir de dados, se precisarmos acessar as informações de rota. Um caso de uso muito bom para essas funções é se temos vários guardas em rotas diferentes, e vamos querer verificar se o usuário está logado em mais de um. Isto significa que, em vez de duplicar este código dentro da função para cada uma dessas rotas, poderíamos, em vez disso, reutilizar essas funções quantas vezes for necessário. O último tipo de guarda que quero mostrar-vos está em guardas de componentes. Assim como eles soam, eles vão para os arquivos de componentes individuais, como o nosso componente de administração. Então, antes de fazermos isso, vamos comentar isso, também todos protegem desses componentes, e, em seguida, também nossa variável logada. Para isso em proteções de componentes, também vamos ficar com o componente admin. Então vá para esta página dentro das vistas. Escreva nossa seção de script. O primeiro guarda que vamos olhar chama-se Beforerouteleave. Como parece isso vai executar esta função antes de tentarmos deixar uma rota particular. Isso pode ser útil para solicitar que o usuário efetue logout antes de sair desta página específica. Além disso, certifique-se de que eles tenham salvo quaisquer alterações antes de serem perdidas. No prompt, o usuário que vamos acessar a janela, eles confirmam, e isso irá configurar uma mensagem de confirmação para o usuário. Esta mensagem será uma corda e eu vou dizer, “Você realmente quer ir embora?” Você tem alterações não salvas. Ele só precisa ser um w minúsculo, e, em seguida, irá armazenar isso dentro de uma constante chamada confirme. Esta caixa de confirmação dará ao usuário a opção clicar em ok ou cancelar, que deixará essa constante verdadeira ou falsa. Se isso for falso, vamos cancelar a navegação retornando false. Isso parece estar funcionando, atualize a página de administração. Agora, se tentarmos clicar em uma rota diferente, vemos a confirmação. Clique em “Cancelar” e isso será definido como falso, então retornaremos false, e isso resulta em permanecer nesta página de administração. No entanto, se tentarmos fazer uma alteração e clicar em “Ok”, então confirmaremos que isso é bom para fazer, e então vamos em frente com a nossa mudança de rota. Isso também tem acesso de e para se precisarmos acessar as informações da rota. Temos também acesso a mais dois guardas que podemos usar; um que é para entrar na rota, e outro foi para atualizá-lo. O primeiro é beForeRouteEnter, e veja isso vamos colocar em um log de console. Este é entrar e uma vírgula. O segundo é BeForeRouterUpdate, colocado em um log de atualizações do console. Agora podemos ver quando cada uma dessas rotas é executada. Salve isso e abra as ferramentas do desenvolvedor. Para o nosso administrador. Só vemos esta mensagem de introdução e, mesmo que continue a actualizar, não vemos que a mensagem de actualização está em execução. Então, o que exatamente vai acionar essa mensagem de atualização? Bem, este é executado quando a rota é atualizada, mas o mesmo componente é reutilizado. Então, como exemplo, se clicarmos em qualquer um desses links sobre o topo, ele confirmará isso. Quando alternamos entre todos esses três links, ficamos nos mesmos componentes de categoria, mas apenas atualizamos a consulta. Para este caso de uso, este BeForeRouteUpdate será executado. Confirme isto de [inaudível] ambos os protetores de maçanetas e, em seguida, vá para a nossa página de categoria. Isso está dentro das vistas e cole isso em nossa exportação. Refresque. Vemos entradas, desde que entramos no componente catalítico. Alterne entre essas três páginas e você verá que a atualização está sendo chamada agora. Protetores de componentes também podem ser executados dentro da função de configuração, mas com um pequeno ajuste. Primeiro, dentro da categoria, remova esses dois guardas e, em seguida, volte para nossos componentes de administração. Usando a composição, primeiro precisamos importá-los do pacote de roteador de exibição. Com composição, temos acesso a BeforeRouteleave e também BeforeRouteUpdate. A única diferença é que usamos o prefixo on. Então este vai estar em BeForerouTeleave. Isso é do roteador view, geralmente seção L para que ele não seja executado, colocado na função de configuração. Acesso em BeForerouTeleave, que então vai executar uma função. Eu só vou fazer uso do mesmo exemplo de cima. Cole isto e descomente isto. Salve este arquivo e dirija-se ao nosso administrador. Tente sair, cancele e ficamos na mesma página. Clique em “Ok” e, em seguida, a navegação é concluída. Esses guardas são realmente úteis por tantas razões, como proteger o acesso não autorizado, redirecionar e também escrever através para apenas exibir em uma mensagem simples para o usuário. 127. Rotas de lazy loading: Outro recurso que o Vue Router oferece é o Lazy Loading. Isso remonta ao pacote JavaScript que discutimos anteriormente. Nosso aplicativo é dividido em componentes e arquivos menores, o que torna muito mais fácil para nós, o desenvolvedor, escrever e manter nosso código. Ferramentas como o webpack, envolverão todos os nossos componentes e arquivos em um grande arquivo JavaScript, que pode ser lido pelo navegador. Como você pode imaginar em grandes projetos, esses pacotes podem se tornar realmente grandes e diminuir o tempo de carregamento da página na primeira visita. No momento, se passarmos para o nosso arquivo de roteadores index.js, importamos em todos os componentes que talvez precisem. Assim, quando os usuários que visitam nosso site podem nunca clicar em nenhum desses links ou páginas, mas ainda pagarão o preço com o download deles no pacote inicial. Carregamento lento é o processo de dividir os componentes desses roteadores em pacotes ou blocos separados, e somente baixado quando necessário, resultando no tamanho inicial do pacote sendo reduzido. Claro, haverá um pequeno tempo de download para puxar os novos componentes quando uma rota for visitada. Mas se você estiver usando componentes de forma eficiente, o efeito deve ser mínimo. No momento, todos esses componentes são importados usando a sintaxe de importação padrão. Com o carregamento lento add, podemos fazer uso de uma sintaxe de importação dinâmica, que é suportada pelo Vue Router, e fazemos isso substituindo cada importação por uma função. Pouco antes de fazermos isso, vamos abrir as ferramentas de desenvolvedor dentro do navegador, e podemos ver como as coisas vão ficar antes de fazer essa mudança. Vá para a guia Rede. A primeira coisa que vamos fazer é clicar em “Desativar cache”, que não vejamos nenhum arquivo salvo. Para este exemplo, nós só nos preocupamos com C e nossos arquivos JavaScript. Então, podemos clicar no botão “JavaScript” para exibir apenas os arquivos JavaScript. Mine já está definido para JavaScript, mas você pode ter esse link todo selecionado. Com isso selecionado, atualize a página e agora vemos que baixamos dois arquivos JavaScript separados. O primeiro do app.js é nosso pacote JavaScript principal e o pacote de fornecedores contém código de módulos de terceiros, como os pacotes MPM que colocamos em nosso projeto. A coisa chave a lembrar aqui é que temos apenas um pacote de projeto principal, que é o app.js. Voltando ao nosso arquivo de roteador, agora podemos substituir essas importações estáticas por dinâmicas. Primeiro, comente isso, e então vamos criar uma função para cada um deles para substituir nossas importações padrão. O primeiro é o administrador e, em seguida, defina isso igual a uma função, e a maneira como isso funciona é todas essas importações originais serão importadas imediatamente. No entanto, uma importação dinâmica é colocada dentro de uma função, e esta função só será chamada quando necessário. Em vez de chamar nossa importação diretamente, armazenamos isso dentro de uma constante, pegamos o caminho do arquivo e colamos isso como uma string. Poderíamos também substituir isto, o símbolo @, e deve funcionar exatamente da mesma forma. Eu duplicei isso mais cinco vezes e o segundo é para o AppHome, cole o caminho. O terceiro é para Criar. Em seguida, temos a categoria e, em seguida, a última é NotFound. Salve isso quase ver o efeito que isso tem. Se atualizarmos o navegador, ainda veremos nossos dois arquivos originais, que são o nosso pacote e o pacote do fornecedor, mas agora teriam arquivos JavaScript renovados. Agora, pode ser difícil saber exatamente o que cada um desses arquivos é, já que eles são apenas um número. Se clicarmos sobre estes e entrarmos na pré-visualização, vemos um monte de código JavaScript. Também podemos substituir esse número por um nome de bloco. De volta ao nosso roteador. A maneira como fazemos isso é adicionar um comentário. Fazemos isso apenas dentro das instruções de importação, e isso é estruturado como um comentário CSS regular. O comentário que precisamos colocar dentro daqui é o WebpackChunkName, e então damos a este pedaço um nome de nossa escolha. Vamos manter isso consistente e ir para o administrador, e ele corrige. Então vou copiar isto e substituir o resto da nossa importação. O segundo é para o AppHome, Create, a categoria e, finalmente, o NotFound. Agora, este WebPackChunkName está no lugar. Se formos para o navegador, vemos que nossos nomes são agora colocados em vez desses arquivos numerados. Este inferior que é o AppHome não deve ser uma surpresa, já que estamos atualmente na página AppHome. Mas acima disso, vemos alguns arquivos diferentes. Vemos a categoria e também o Create.js. Agora, isso pode parecer estranho porque ainda não visitamos estas páginas. Você pode esperar que, por exemplo, a categoria não seja carregada até que clicemos em um desses links. Bem, isso acontece porque, por padrão, ao usar o Vue CLI, ele fará uso de uma técnica chamada prefetching, que é como ver antecipando quais arquivos podemos precisar em seguida. Uma vez que já possuímos esses componentes AppHome, Vue reconhece que esta página vamos vincular à nossa categoria e, em seguida, criar componentes. Efetivamente antecipa que precisaremos desses componentes em breve. O download desses dois arquivos não começará até que nossa página inicial termine de carregar, então não afetaremos o tempo de carregamento da página. Se olharmos de perto, também não vemos a página de administração ou os componentes NotFound também e isso ocorre porque não temos também e isso ocorre porque não temos links diretos para esses dois componentes deste AppHome. Se quisermos ver isso, precisaremos ir ao administrador, que baixará o admin.js. Além disso, se formos para qualquer rota não reconhecida, veremos que o componente NotFound está sendo baixado. Ambos os administradores neste NotFound não vinculam a nenhum dos componentes, portanto, não vemos nenhuma pré-busca para esta página. Este carregamento preguiçoso é uma maneira realmente eficiente de cargas em nossos componentes e melhorar o tempo de carregamento inicial da página. Outra característica útil é que nossos componentes só baixados quer. Por exemplo, esses componentes NotFound só serão baixados do servidor na primeira vez que for necessário e, em seguida, quaisquer visitas futuras a esta página servirão uma versão em cache para eficiência, para que não baixemos um arquivo múltiplo vezes. É assim que podemos usar o Lazy Loading em nosso Vue Router. Em seguida, queremos dar uma olhada em como podemos agrupar partes relacionadas. 128. Agrupando de rotas em chunks: No vídeo anterior, demos um nome a cada uma dessas importações dinâmicas colocando em um comentário. Cada uma dessas importações é chamada de bloco, e junto com o uso deste comentário para nomear nossos arquivos importados, também podemos usá-lo para agrupar partes para. Um exemplo pode ser se tivéssemos uma barra de navegação, poderíamos agrupar todas as páginas em links navbar também e baixá-las todas juntas. A maneira de fazer isso é dar a cada componente que queremos agrupar o mesmo nome de bloco. Atualmente, mesmo que nós pré-buscar os blocos, a categoria nos componentes de criação ainda faz o download separadamente. Se quiséssemos agrupá-los, tudo que você precisa fazer é dar a eles o mesmo nome de grupo. Por exemplo, um grupo de cartões. O mesmo para a categoria. Em seguida, volte para a guia de rede e atualize. Vemos como antes, temos o Apphome que é preguiçoso carregado, mas acima disso, não vemos mais nossas importações separadas ou criar e também nossa categoria. Em vez disso, temos este grupo de cartões que contém o conteúdo de nossos dois blocos. O uso é para agrupar blocos como este irá variar dependendo da estrutura do seu projeto, mas isso pode ser realmente útil para agrupar componentes que você precisava ao mesmo tempo. Esta técnica realmente nos dá muita flexibilidade para controlar quais componentes são baixados a qualquer momento. 129. Introdução: upload de imagens: Ei, bem-vindo a esta seção de imagens. Nesses próximos vídeos, vamos ver como podemos permitir que o usuário carregue uma nova imagem em qualquer uma de nossas quatro páginas de cartões. Esta imagem será um fundo como os que vimos nos cartões de amostra. Essas imagens serão carregadas, vamos ler o conteúdo do arquivo, vamos salvá-los no Cloudinary, vamos atualizar nossa visualização do cartão, e ao lado de tudo isso também vamos ver como podemos remover imagens existentes e também reposicioná-los também. Vejo-te lá dentro. 130. Componente de upload de imagens: Esta próxima seção será focada nas imagens do cartão. Cada página, colocamos um componente de imagem sobre o lado de edição e isso vai ficar logo acima de nossos componentes de entrada de texto. Teremos isso no topo, e isso significa que podemos enviar uma nova imagem para qualquer uma dessas páginas. Se já temos uma imagem como temos na capa aqui, também podemos substituir esta imagem. Esta imagem de componente baixo vai enviar a imagem do Cloudinário. Nós também vamos exibir uma pequena imagem de pré-visualização uma vez que selecionamos isso, e também isso será atualizado no cartão Vue 2. Para começar, precisamos de um componente disso para a pasta do cartão e então chamaremos isso de upload de imagem. Configurar os modelos. Todo este componente será cercado na div com a classe de wrapper de upload de imagem. Dentro desta div, uma testa nivelada com o texto da imagem, e então com isso, estamos usando todo o tamanho de imagem recomendado. Continuaremos a ser 450 pixels por 600 pixels para que isso se encaixe bem no cartão. Em seguida, uma entrada e o tipo para esta entrada precisam ser arquivados para que o usuário possa selecionar qualquer arquivo de imagem de seu próprio computador e elementos de imagem. Mas agora isso vai ficar vazio, não precisamos de uma fonte. A fonte será definida muito em breve a partir do arquivo que o usuário carrega. Esta será uma pequena imagem de pré-visualização, então ela nos dará a classe de imagem de pré-visualização, uma div com a classe de padrões de imagem, este é um wrapper para uma série de botões que vamos para como reposicionar o imagens para o topo, o meio e a parte inferior do cartão, e também um botão para remover esses dois. Os botões superior, central e inferior serão agrupados em uma div direita no primeiro botão e cada um desses botões terá um ícone. Então podemos ir para os ativos, para a pasta de ícones. Este é o top.svg, todo o texto do seletor superior da imagem, e então faremos isso mais duas vezes. O ícone para isso, novamente nos ativos, nos ícones. Este é o middle.svg. O botão final é para o fundo. O ícone para isso é o bottom.svg, o último texto alt é o fundo da imagem. Todos estes três botões estão agrupados dentro desta div. Se formos logo abaixo disso, vamos adicionar um quarto e último botão que será remover a imagem selecionada. A classe de remove_btn. Eu quero configurar isso para acionar uma função mais tarde nesta seção. Mas agora, esta é toda a ação templates que precisamos exibir na tela e queremos que este componente de upload de imagem seja exibido no topo desta seção de edição. Então vá até o Cardedit.vue, importe nosso componente com o nome do upload de imagem. O caminho do arquivo está nos componentes, isso foi armazenado na pasta do cartão, e selecione nosso upload de imagem, coloque isso dentro do objeto de componentes e, em seguida, renderize isso na parte superior do nosso modelo. Para o navegador, há nossa imagem, componentes de upload, e eles devem ser exibidos para cada uma de todas as páginas. Isso, naturalmente, também precisa de algum estilo. Precisamos alinhar todo esse conteúdo e também reduzir o tamanho desses botões. Também queremos que isso se misture com as entradas de texto logo abaixo para que possamos adicionar alguns estilos compartilhados comuns a ambas as seções. O upload de imagem que acabamos de criar tem essa classe de wrapper de upload de imagem, e as entradas de texto que estão logo abaixo tem essa classe de wrapper de entrada de texto. Agora podemos aplicar alguns estilos compartilhados no app.vue a ambas as seções. Então, até a parte inferior da seção de estilo, o primeiro é o wrapper de upload de imagem e, em seguida, selecione também o wrapper de entrada de texto. Então, para isso, vamos colocar algum preenchimento dentro do elemento, algum espaçamento na parte inferior de cada um desses elementos com uma margem, uma sombra de caixa, e também arredondaremos os cantos também. Primeiro, 10 pixels separados em todos os quatro lados. Então margem, que só se aplicará ao fundo de 10 pixels, uma sombra de caixa de um pixel, um pixel, dois, dois. A cor que é DDD, que será uma cor cinza, e eu quero que esta sombra caixa seja no interior, então vamos definir isso para ser inserido. Isso nos dá esse efeito da sombra de um pixel à direita e também a parte inferior e isso também se mistura a dois pixels no topo à esquerda. Corremos estas esquinas com o raio da fronteira. Apenas um pequeno ficará bem, todos os três pixels. Isso agora nos dá o efeito de que estas são todas seções separadas. Agora, vamos voltar para o nosso componente de upload de imagem e aplicar alguns estilos que agora só se aplicam a esta imagem de componente baixo. Então, o estilo que também vai ser escopo. Primeiro de tudo, empurre todo o conteúdo para a esquerda selecionando o wrapper, que era o wrapper de upload de imagem. Linha extra fora da esquerda, e em seguida, vamos adicionar algum espaço entre todos esses três botões e também reduzir o tamanho do ícone para baixo para, vamos até o modelo. Todos esses quatro botões estão cercados nesta classe de botões de imagem. Então, se definirmos este Cluster B, um tipo de exibição de flex, este grupo de botões aparecerá ao lado do nosso botão Remover. A classe de botões de imagem, o tipo de exibição de flex, e, em seguida, espaços para fora com justificar o conteúdo e colocar o espaço entre, como nosso botão agora ao lado de todos esses três ícones. Em seguida, reduzimos o tamanho das três imagens. Estes estavam no mesmo wrapper que é os botões de imagem, mas nós só vamos aplicar isso para as imagens. A largura de 30 pixels. Isso agora é um pouco menor no cabeçalho de nível quatro, que é o texto da imagem. O peso da fonte de 300, e nós vamos apenas reduzir o tamanho disso para que possamos ver isso melhor. Isso só nos dará o texto mais leve. Também alguma margem de 10 pixels na parte superior e inferior, e zero na esquerda e direita. Movendo-se para baixo, também precisamos de algum espaço entre essa entrada de arquivo e nossas imagens gratuitas. Então selecione a nossa entrada e, em seguida, podemos colocar no tipo que é igual ao arquivo, eo estilo só se aplica a quaisquer entradas de arquivo. Colar em alguma margem de zero na parte superior, zero à direita, 10 pixels na parte inferior e, em seguida, zero à esquerda, em seguida, algum espaço entre esses botões, pegar todos os nossos elementos de botão e, em seguida, alguma margem à direita de cinco pixels. Bom. A próxima coisa que vamos fazer é mudar a cor deste botão Remover e também a cor do mouse para na parte inferior de todos os estilos. Estas são a classe de remove_btn. A única propriedade que precisamos adicionar dentro daqui é a cor, adicionar um valor RGB de 208, 90 e 90 para o azul, o que nos dá a cor vermelha que vemos aqui. Então, finalmente, o estado de pairar. Então eu vou duplicar isso, mas desta vez, direcione o estado de foco e altere a cor RGB para 123, 44 e 44, que é apenas uma cor vermelha ligeiramente mais escura que podemos ver se passamos o mouse sobre este botão. É isso agora para os visuais do nosso componente de upload de imagens. Em seguida, precisamos de algum lugar para realmente armazenar essas imagens que o usuário carrega. Para isso, vamos dar uma olhada em um serviço chamado Cloudinary. 131. Configuração do Cloudinary: Agora precisamos de um lugar seguro para carregar e armazenar nossas imagens. Um serviço popular que eu uso para muitos do meu próprio site é Cloudinary, que você pode encontrar aqui em cloudinary.com. Cloudinary é um serviço de hospedagem para vídeos e imagens, e também tem muitas características excelentes, como a capacidade de transformar nossas imagens e também servir as imagens de tamanho correto, e também formatos para o dispositivo do usuário. Eu já tenho uma conta que diz sobre o Cloudinary, mas se você nunca usou isso, vá em frente e crie uma conta gratuita. É gratuito para se inscrever, e também nos dá uma enorme franquia gratuita de cerca de 20.000 uploads de imagens gratuitas. Uma vez conectado, você será direcionado para a área do painel, que será algo parecido com isso. Bem, antes de enviarmos qualquer imagem para o Cloudinary, primeiro precisamos configurar uma predefinição. Uma predefinição é um conjunto de padrões com imagens que carregamos para transformar o tamanho e o formato. Podemos definir isso a partir de nossas configurações. As configurações podem ser acessadas a partir deste botão apenas aqui e, em seguida, ir para a seção de upload. Vá para baixo. Aqui, vamos configurar e fazer upload da predefinição. No topo, temos esse nome predefinido de upload, que vai ser importante. Vou copiar isto com o Comando ou Controle C, e depois ir para a nossa imagem, carregar componentes. Vamos apenas criar uma seção de script por enquanto, e depois colocar isso no topo como um comentário. A primeira opção que temos é o Modo de Assinatura. Tenha a opção de Uploads Assinados e também Não Assinados. A opção Assinada envolve o uso de um servidor web, projetar as imagens com o nosso segredo Cloudinary, que vimos pouco antes no painel. Ou temos a versão Unsigned, que vamos usar, o que significa que podemos fazer upload diretamente do navegador sem precisar do segredo. Se quiséssemos, também podemos criar uma pasta dedicada onde vamos colocar nessas imagens. Vamos pegar as cartas. O resto, vamos nos deixar padrão, e depois vamos para a seção de análise de mídia. Esta seção é se queremos fazer upload de nossas imagens com qualquer tag. Se queremos adicionar qualquer tipo de IA, como detecção de rostos, se queremos extrair qualquer texto das imagens, e muito mais recursos avançados, que não precisamos atualmente. Abaixo disso, temos as manipulações de imagem. Isso nos dará a chance de configurar qualquer tamanho de imagem padrão e também formatos, e até mesmo adicionar algum raio de rotação ou canto à medida que carregamos esta imagem. Vamos deixar todos esses como padrão e, em seguida, salvar essas predefinições. Verifique se você tomou nota desse nome predefinido e adicionou isso ao seu projeto. Em seguida, daremos nossos primeiros passos para carregar esta imagem lendo o conteúdo do carregador de arquivos. 132. Leitura de objetos de arquivo e pré-visualização: Em seguida, fez uma função para carregar esta imagem. Poderíamos adicionar este arquivo composable bidirecional se quiséssemos. Mas já que só precisamos disso neste componente de upload de imagem, queremos colocar isso dentro daqui. Então temos um script que adicionamos na última seção, e colocar em uma função de configuração, para que possamos adicionar algum código de composição. A função que precisamos será chamada Upload File, e isso também precisará levar os detalhes do evento também. Os detalhes deste evento serão passados quando enviarmos uma imagem deste uploader de imagem. Não precisamos passar isso manualmente. Isso será recebido automaticamente de nossa entrada, e podemos acessar isso dentro de nossa função. Então, vamos também retornar isso, e agora podemos chamar essa função em nossa entrada de arquivo. Para fazer isso, vamos listar agora para uma alteração e, em seguida, executar nossa função. Essa alteração será executada assim que a imagem for carregada. Voltar para a nossa função, podemos ver quais informações estão incluídas com este evento fazendo um log de console. Salve este arquivo e sobre o navegador no console. Agora daqui para ver esta corrida, precisamos fazer upload de uma imagem. Você pode usar novas imagens, se preferir. É bom ter uma lista de todas as imagens que são usadas neste curso. Então eu vou selecionar um desses, que irá inserir uma função e também nosso registro de console se abrirmos isso, vamos para o alvo, e depois para os arquivos. A partir daqui, só carregamos uma imagem de cada vez. Assim, nossa imagem será sempre este primeiro arquivo nesta matriz na posição de índice zero. Vemos coisas como o nome do arquivo, o tamanho do arquivo e também que esta é uma imagem PNG. Então nós temos a informação que precisamos, mas em seguida precisamos de uma maneira de realmente ler esses dados de arquivo e para isso, JavaScript tem o que é chamado de objeto leitor de arquivos. Então, abaixo do nosso registro do console. Vamos obedecer constante para armazenar isso em leitor frio. Isso é igual a um novo objeto leitor de arquivos JavaScript. Arquivo ler objeto é capaz de ler o conteúdo do arquivo a partir do computador do usuário. Esta imagem pode ser usada para definir uma pequena imagem de visualização, que foi configurada anteriormente no modelo. Este é o elemento de imagem vazia que atualmente não tem uma fonte. Para definir a fonte, vamos configurar alguns dados reativos. Isto irá importar o pacote reativo da vista e, em seguida, dentro da função de configuração, configurar um estado de chamada constante, que irá conter todos os dados que precisamos para esta imagem. Nós também vamos embrulhar isso no invólucro reativo e colocar em um objeto. A primeira propriedade que vamos adicionar aqui dentro é para a visualização da imagem. Atualmente, isso vai ser apenas uma string vazia, mas vamos atualizar isso do nosso leitor de arquivos. Uma vez que fizermos isso, isso será definido para a fonte da imagem dentro do modelo. Por isso, também precisamos voltar ao nosso estado. Passe isso para o nosso objeto, e agora vamos combinar isso dentro dos elementos da imagem. Coloque na fonte, e isso será igual ao nosso objeto de estado e, em seguida, a propriedade de visualização da imagem. Atualmente, é claro, isso não funcionará, vez que está configurado para ser uma string vazia. Então precisamos atualizar isso com o conteúdo do nosso leitor de arquivos. O arquivo lido tem várias propriedades e métodos que podemos acessar agora ajudar com isso. Mas antes de atualizar a visualização da imagem, precisamos primeiro ter certeza de que o arquivo terminou de ler. Então, se temos uma imagem realmente grande que foi carregada, este estágio de leitura pode levar algum tempo, e então você verifica isso. Primeiro vamos acessar nosso leitor e, em seguida, usar a propriedade onload. Isso significa que uma vez que o leitor de arquivos tenha terminado de ler nosso objeto de imagem, isso vai então acionar uma função e é dentro desta função onde queremos atualizar nossa visualização de imagem de ponto de estado para ser igual aos resultados do ponto do leitor. Isso será executado quando a operação de leitura terminar, mas ainda não começamos a ler o conteúdo do arquivo. Tudo o que fizemos foi criar um novo objeto leitor de arquivos vazio. Para realmente ler o arquivo, temos um método disponível chamado read as data URL. Então selecione nosso leitor, objetivo, ler como URL de dados, e os dados de arquivo que queremos ler é o que acabamos de ver dentro do console. Então isso estava dentro do evento, dentro do alvo. Os arquivos que era uma matriz, e nós sempre carregamos apenas em um único arquivo. Então esta será sempre a posição zero. Está bem. Assim que isso terminar de ler o arquivo, ele irá então executar nossa função onload, que então atualizará nossa visualização de imagem. Vamos verificar isso. Atualize o navegador e selecione qualquer uma dessas imagens. Abra isso. Podemos ver que nossa visualização de imagem agora está funcionando, e você também pode restringir o tamanho dessa imagem. Particularmente se tivermos uma imagem alta como esta. Também seria uma boa idéia para lidar com possíveis problemas de leitura, e enviar uma nova mensagem para o usuário. Isso podemos colocar uma mensagem em nosso estado, e valor vazio inicial, e pouco antes da propriedade onload, também podemos lidar com quaisquer erros com on error. Então reader.onerror. Esta propriedade também vai acionar uma função, é exatamente como acima, onde vamos atualizar nosso state.message para ser igual a uma nova string. Esta mensagem depende de nós, mas colocar algo descritivo, como, houve um problema ao carregar sua mensagem, tente novamente. Não precisamos devolver nada, já que já devolvemos nosso objeto de estado completo. Tudo o que precisamos fazer é colocar em um elemento de texto, que eu vou colocar como o state.message e também um condicional também para exibir esta mensagem apenas se a mensagem existir. Bom, agora isso deixará o usuário saber se houve um erro ao fazer o upload da imagem. Agora sabemos que este leitor de imagens está funcionando corretamente. Em seguida, vamos usá-lo para salvar nossas imagens no Cloudinary. 133. Carregando o arquivo de imagem: O primeiro vídeo nos deu acesso à imagem enviada pelo usuário. Em seguida, iniciamos a visualização da imagem para o usuário ver. Agora vamos guardar isto para o Cloudinary. Assim que o Cloudinary receber essas imagens, também lhe atribuiremos um URL exclusivo. Também em breve salvaremos este URL no nosso objeto de cartão. Vamos fazer isso dentro de nossa função de upload de arquivo, logo abaixo onde lemos o arquivo real. Como estamos enviando dados para um local diferente, podemos lidar com isso usando try and catch, que irá lidar com quaisquer erros. Em seguida, pegue o que levará em quaisquer erros. Se houver um erro, lançaremos um novo erro, passando essa mensagem de erro. Até a seção try, a primeira coisa que faremos aqui dentro é criar um novo objeto FormData. Um objeto FormData é uma maneira de construir conjuntos de pares de valor de chave em um formato correto que é necessário para enviá-lo para um servidor. Esses pares de valores-chave conterão nossas predefinições Cloudinary e também o arquivo de imagem que queremos enviar. Nós também manteremos isso em sincronia com nosso estado, então logo acima de onde temos nosso objeto de estado. Também o FormData, que inicialmente será nulo. Podemos então atualizar nosso FormData com o conteúdo deste objeto. Então este será State.FormData. Defina isto igual ao nosso objeto que está atualmente vazio. Mas para adicionar algum conteúdo a este FormData ou alguns pares de valor de chave, podemos usar o método append, que será parecido com isso. Ganhamos acesso ao nosso State.FormData. Em seguida, podemos chamar append para passar nossos pares de valor chave. Uma das coisas que precisamos carregar com esta imagem é o upload_preset. Esta é a chave do nome e, em seguida, separados por vírgula, o valor é a predefinição, que recebemos do Cloudinary. Embrulhe isso, e coloque isso como uma string. Duplicar isso e o segundo par de valor chave será para o nosso arquivo de imagem. O arquivo está disponível em event.target. Seu FormData agora vai ser usado para enviar o Cloudinary. Mas primeiro precisamos de uma maneira de enviar este pedido. Para isso, vou usar um pacote chamado axios. Axios é um pacote para fazer solicitações web, e podemos instalar isso usando npm. Abra o terminal, feche isso com o controle C, e então instale isso em nosso projeto com o NPM. Instale toda a mão curta i e, em seguida, o nome do pacote que é axios. Uma vez feito isso, reinicie o servidor com o npm run serve. Voltar ao nosso componente, e para usar este pacote axios, primeiro precisamos importá-lo. Então importe axios. Como este é um módulo de nó, não precisamos adicionar no caminho do arquivo. Podemos apenas adicionar o nome do pacote. De volta à nossa função, axios, agora precisamos de algumas coisas para fazer esta solicitação e enviar esses dados para Cloudinary. Vou guardar tudo isto dentro de um objecto. Então const ImageRequestData. Configurar este objeto onde vamos passar em três coisas. Primeiro, o URL, o método e também os dados. Primeiro de tudo, temos a URL, e este é o local para onde queremos enviar esta imagem, e esta é a API Cloudinary, passar isso como uma string, que é https://api.cloudinary.com/, a API número da versão, que é v1_1. Então precisamos apontar para nossa própria conta, volta para o painel Cloudinary. Podemos obter isto a partir dos detalhes da nossa conta. Este é o nome Cloud que está no topo. Copie isto e isto no final da nossa URL e, em seguida, /upload. Por isso temos o método, e este é um pedido de post desde que estamos postando dados. Então, por último, os dados, que são os dados reais que queremos enviar. Nós já temos isso armazenado em nosso state.FormData. Bom. Isto é tudo o que precisamos agora para fazer um pedido axios. Então vamos chamar a biblioteca axios e, em seguida, passar os dados de solicitação de imagem. Se você quisesse, você poderia passar um objeto diretamente para aqui, vez de criar um objeto separado. Mas pessoalmente, acho que esta é uma abordagem mais limpa. Cortaria esse erro de digitação antes de irmos mais longe? Certo, diga isso. Agora, de volta ao nosso projeto, atualize isso. Agora, se fizermos upload de um novo arquivo, use qualquer imagem aberta. Há nossa prévia para Cloudinary e para a Biblioteca de Mídia. Lembre-se quando configuramos a predefinição, também configuramos essas pastas de cartões. Então vá para isso. Lá vemos nossa imagem, e agora sabemos que isso está funcionando. No próximo vídeo, vamos pegar nosso URL de imagens, que foi atribuído a esta imagem pelo Cloudinary, e então configurar uma função de atualização para salvar isso em nosso objeto de cartão. 134. Salvando a URL de imagem em nosso cartão: Anteriormente fizemos uma solicitação axios para salvar nossas imagens no Cloudinary. Esta imagem ou URL desta imagem também precisará ser salvo em nosso objeto de cartão também. Mas como colocamos essa imagem em nosso objeto de cartão? Bem, podemos passar em uma referência de URL, que é fornecida pela Cloudinary. Quando vemos nossos cartões apenas aqui, temos esta seção URL cópia. Se copiarmos isso, cole isso em uma nova guia, e esse é um link direto para nossa imagem. Isso é fornecido para qualquer imagem que você enviar para o Cloudinary, mas não precisamos copiar manualmente todos os URLs como este. Em vez disso, quando fazemos esta solicitação de post com axios, obtemos de volta uma resposta que podemos armazenar dentro de um objeto e acessar esses dados, portanto, não sabemos quanto tempo levará para salvar esta imagem e obter de volta uma resposta. Também podemos fazer uso de assíncrono/aguarde. Asynchronc/Await nos permitirá esperar os dados voltando do servidor antes de salvarmos isso em nossas constantes, isso nos impedirá de tentar acessar os dados salvos aqui dentro, antes que eles sejam realmente retornados. Vamos esperar que esses dados voltem, e assim podemos usar essa palavra-chave. Também precisamos marcar nossa função como assíncrona. Podemos registrar nossa resposta de volta para o console, e ver quais dados são retornados em nosso projeto. Faça upload de um novo arquivo, já que estamos enviando isso para o servidor e ele precisa ser devolvido, talvez seja necessário esperar alguns segundos para que isso aconteça. Uma vez que isso é salvo e nós obter de volta uma resposta, nós vemos nosso log do console apenas aqui. Os dados que precisamos estão dentro desta seção de dados, e isso conterá nossa URL, e é esse URL que precisamos salvar em nosso objeto de cartão. Ainda não criamos uma função para executar essa atualização, mas podemos colocar isso dentro de nosso componente por enquanto, remover o log do console, e essa função será chamada UpdateImage. Passando o URL que é armazenado dentro da resposta, os dados e, em seguida, o URL, esta função vai ser colocado dentro do nosso composable UseCurrentCard juntamente com as outras funções de atualização. Também precisamos importar isso para o topo. Importe o UseCurrentCard a partir deste caminho de arquivo, que é os composables, e, em seguida, para UseCurrentCard. Antes de podermos chamar essa função, que estamos fazendo aqui, também precisamos extrair isso do nosso arquivo para a configuração. Salve-o como uma constante, que será chamado UpdateImage, da nossa função UseCurrentCard até o arquivo UseCurrentCard, agora precisamos configurar esta UpdateImage. Agora, na parte inferior, escreva esta função e para atualizar o cartão, isso precisa levar na URL, que estamos passando quando chamamos esta função apenas aqui. Agora, para atualizar este cartão, vamos usar uma técnica semelhante que usamos na função de atualização logo acima. Pegamos o cartão selecionado e, em seguida, a página atual. Vou copiar isto, neste intervalo de funções. Nós não precisamos ir para as seções porque se dermos uma olhada em nosso cartão diretamente dentro de nossas páginas, é onde temos a imagem de fundo armazenada, o que significa que só precisamos atualizar esta propriedade de fundo, assim como este. Eu defini isso igual ao URL que é passado para esta função, retorná-lo de volta da nossa função, e agora podemos testar isso no navegador. O que queremos ver aqui é, agora, quando selecionamos um novo arquivo, vemos a visualização, ele é salvo no Cloudinary, e isso também deve atualizar nossa visualização atual também, já que isso é mantido atualizado com nossos dados reativos, deixe está usando um arquivo. Nossa função é acionada e nossa pré-visualização do cartão agora é atualizada com este novo URL de imagem. Estas imagens também podem ser colocadas em páginas diferentes. Se selecionarmos uma imagem diferente para esta página, ela será completamente independente de todas as outras páginas. Bom. Agora, quando tudo isso estiver funcionando. No próximo vídeo, vamos nos concentrar nesses três botões de alinhamento para alinhar esta imagem, a parte superior, o meio ou a parte inferior deste cartão. 135. Reposicionando a imagem: Dentro de nosso componente ImageUpload anteriormente quando configuramos o modelo, colocamos três botões para reposicionar a imagem, a parte superior, o meio ou a parte inferior da página selecionada. Para que estes botões funcionem, precisamos [inaudível] clicar em qualquer um destes e, em seguida, executar uma função. A função que ainda não configuramos, mas isso será chamado de RepositionImage, que levará no topo, no meio ou no fundo. Vamos pegar isso, copiar isso, e colocar isso em nosso segundo botão, como nesta cadeia do meio, o terceiro é chamado de fundo. Sobre o composable UseCurrentCard, agora podemos configurar isso para baixo na parte inferior. Este foi RepositionImage, como na posição. Isso será muito semelhante à nossa função logo acima. Mas desta vez, em vez de atualizar nosso plano de fundo, vamos atualizar o BackgroundPosition e definir isso igual à nossa posição, que é passada para todas as funções. Além disso, se quiséssemos logo acima nesta função UpdateImage, também poderíamos passar isso para e configurar uma posição padrão para esta imagem, como o centro e, em seguida, retornar nossa função. Então, de volta ao upload de imagens, já estamos importando nosso composable. Nós também precisamos da função que foi RepositionImage, e, em seguida, retornar esta função de volta a partir de nossa configuração. Isso corresponde ao nome da função que estamos chamando cada vez que clicamos nesses três botões. Vamos tentar isto. Atualmente, para imagens corretamente dimensionadas que temos aqui, os botões não funcionarão para este caso particular porque temos uma imagem de tamanho completo. Mas se escolhermos “Arquivo” e inserir uma pequena imagem, que não cobre toda a altura do cartão, agora podemos tentar todos esses botões. Vemos imediatamente que a posição está no centro, no topo, e a do meio não está funcionando. Isso só precisa ser central. Vamos tentar isto. Temos que recarregar o arquivo. Tentamos isso de novo. [ inaudível] o topo, o centro e também o fundo, e isso corrige nosso problema. A razão pela qual isso funciona porque nos componentes CardPreview, configuramos isso como uma propriedade style. Abra isso e no modelo no início quando definimos o plano de fundo, também adicionamos a propriedade backgroundPosition e como tudo é reativo, isso também está sendo atualizado com a nova posição cada vez que os dados mudam. 136. Removendo imagens: A última coisa a fazer com nossas imagens é removê-las deste cartão. Isso não deve ser muito incômodo. Tudo o que precisamos fazer é configurá-lo por função, que vai selecionar o fundo e definir isso para ser uma string vazia. Tal como acontece com o resto da atualização, vá para o UseCurrentCard, onde podemos configurar uma função. RemoveImage. Isso será muito semelhante ao UpdateImage, então podemos copiar esta linha de código, colar isso em. Mas desta vez, em vez de definir a URL, esta será uma string vazia. É tudo o que precisamos fazer. Retorna esta função. Em seguida, podemos colocar isso no componente ImageUpload, salve isso como uma constante. Com esta função, também podemos retornar esta parte da nossa configuração e chamar isso diretamente do nosso botão de remoção. Mas, em vez disso, o que vamos fazer é configurar uma nova função chamada remove e isso é porque não só queremos chamar essa função, também precisaremos limpar a visualização da imagem também. Configure isso. A função chamada remove. Primeiro vamos acessar nosso estado e o ImagePreview e redefinir isso para ser uma string vazia. Isso removerá a imagem de visualização menor que vemos dentro da tela de edição. Então podemos chamar nossa função importada. Devolva isto da nossa configuração. Nós já temos uma configuração remove_btn dentro do modelo. Podemos [inaudível] @click, que vai chamar essa função. Vou tentar isso no navegador. Clique em “remover”. Nossa imagem se foi. Vamos tentar fazer upload de uma imagem. Clique em “remover”. Isso ainda excluirá a imagem, deixando nossa funcionalidade de imagem completa agora. 137. Implantação para Netlify: O primeiro passo para implantar nosso aplicativo na web é construir nosso projeto para nossa produção. Podemos criar este pacote para produção usando o comando build, que você pode ver se vamos para o package.json, dentro da barra lateral. Abra isso, e até agora, para executar nosso projeto, temos executado NPM run serve, que começará com nosso servidor de desenvolvimento, e ele também nos dará coisas como mensagens de erro durante o desenvolvimento, mas não queremos ver coisas como esta durante a produção. Em vez disso, o que queremos fazer é construir uma versão pronta para produção do nosso aplicativo, que é um pacote JavaScript. Podemos fazer isso com o comando logo abaixo, que é build, e nós, novamente, executamos isso a partir do Terminal. O que precisamos fazer é pressionar “Control” e “C” para fechar o Terminal, e desta vez, MPM executar compilação, e isso começará construindo nosso projeto e todos os arquivos serão colocados dentro de uma pasta de disco. Veremos isso em um segundo quando isso terminar. Agora podemos dizer isso sobre o topo da nossa barra lateral. Esta pasta de disco contém uma versão pronta para produção do nosso aplicativo, contendo todos os nossos CSS, nossas imagens e também nossos pacotes JavaScript também. Para JavaScript, abrimos isso, contém nosso pacote sobre o qual falamos anteriormente, ou vários pacotes se estamos usando carregamento preguiçoso, assim como estamos aqui. Então vamos ver coisas como nossos pacotes de administração, nossos pacotes de aplicativos, nossa casa do aplicativo, nossos grupos de cartões que configuramos para os grupos de blocos. Vemos a página não encontrada, e estes são todos os arquivos de pacote JavaScript chumbo que podem ser baixados individualmente ou juntos a partir do navegador. Esses arquivos também são minificados e otimizados para produção, e também removemos coisas como as mensagens de erro e quaisquer avisos que vemos durante o desenvolvimento. Agora podemos tomar esta pasta de disco e usá-lo para implantar em um serviço de hospedagem. O serviço de hospedagem que vou mostrar vai estar no netlify.com. Há muitos provedores de hospedagem excelentes lá fora, mas isso é muito popular e fácil de começar, e também há uma versão gratuita generosa também. Para fazer uso desta hospedagem, vou abrir o terminal e fazer uso do Netlify CLI. Se você não usou o Netlify CLI no passado, precisamos instalá-lo globalmente. Fazemos isso com MPM, instale. Este é o NetLify_CLI e, em seguida, precisamos usar o sinalizador -g para instalar isso globalmente. Eu já tenho isso instalado, então eu não vou pressionar Enter, e se você ver quaisquer permissões, erros, onde uma configuração isso off, você também pode precisar corrigir essas permissões ou usar o pseudoprefixo para instalar isso como administrador. Uma vez que temos acesso a isso, quando instalado, podemos então usar vários comandos Netlify, e o que queremos usar é o comando deploy. Certifique-se de que você está dentro da pasta do projeto, pressione “Enter” e, se esta for sua primeira vez usando o Netlify, você também pode precisar fazer login ou criar uma nova conta se você ainda não tiver uma. Depois de se inscrever e verificar seu e-mail, você será levado para a área da conta no navegador, onde você também pode criar um novo projeto. Não faça isso no navegador, já que vamos fazer isso aqui dentro do Terminal. Você também pode ser solicitado a autorizar no Netlify CLI em seu primeiro uso também. Eu já estou logado desde que eu usei isso muitas vezes no passado. Então, de volta a este Terminal, precisamos responder a algumas perguntas simples para começar. Em primeiro lugar, ainda não temos um novo site, então vamos criar um dentro do Netlify. Já tenho os nomes da minha equipa configurados no Netlify, por isso vou clicar em “Enter”. Também podemos adicionar um nome de site, se quisermos. Isto é opcional. Também podemos clicar em “Enter” e Netlify irá gerar um para nós. Em seguida, o diretório público, e este é o local dentro do nosso projeto onde nosso site recém-construído será armazenado. Estamos apenas vendo que o nosso está armazenado dentro da pasta do disco. Então eu vou apertar “Enter”, e isso permitirá a implantar um site projecto. Aqui, se nós apenas esticar isso um pouco mais, nós temos um site, rascunho URL, abrir este rascunho URL dentro do navegador, e então nós vemos um URL ao vivo que exibe nosso site. Podemos clicar ao redor e verificar se tudo funciona. Tudo isso parece bem até agora. Vemos o nosso cartão. Também podemos editar e vemos todas as várias páginas e categorias também. No entanto, no final do nosso URL principal, vamos tentar entrar no admin. Bem, vemos página não encontrada, e também, se formos para uma URL não reconhecida, vemos a mesma mensagem. O erro é porque criamos um aplicativo de página única, significa que quando visitamos este aplicativo, obteremos um único pacote JavaScript, que já conhecemos. Em seguida, navegamos através de nossas páginas de aplicativos no frontend usando o roteador. Quando digitamos /admin ou, de fato, barra de qualquer coisa manualmente, estamos fazendo uma solicitação para o servidor e esperando que esta página esteja disponível. No entanto, como sabemos, temos um aplicativo de página única, não temos várias páginas para solicitar do servidor. Em vez disso, quando usamos coisas como o link do roteador, isso irá interceptar a seção apenas aqui e, em seguida, encontrar a parte exata do JavaScript que precisamos exibir dentro do navegador. A solução para isso ao usar aplicativos de página única é ignorar qualquer solicitação de página adicional e sempre retornar nossa página inicial principal. Em seguida, no frontend, nosso roteador pode então cuidar de todas as páginas que precisam ser exibidas. Faça isso e apenas sirva esta página inicial em qualquer solicitação. Isso é muito simples de fazer. Vá para a pasta dist recém-criada, e dentro da raiz da nossa pasta de disco, crie um novo arquivo, que é chamado _redirects. A sintaxe para retornar somente nossa página inicial se parece com isso. É /* /index.html, e depois 200. Isso diz ao servidor web, independentemente da página que estamos tentando solicitar, para retornar apenas para casa principal index.html, e também o código de status de serviço de 200, que significa que tudo está bem. Sempre retornando esta mensagem ok significa que precisamos lidar com quaisquer erros no frontend e estamos fazendo isso com nosso componente não encontrado. Guarde este arquivo e poderemos reimplantar seu aplicativo, que limparemos o Terminal e executaremos o netlify deploy pela segunda vez. O diretório publicado ainda é dist. Em seguida, chame o rascunho, e vemos que todas as páginas ainda estão funcionando. Se tentarmos ir para a barra, em seguida, quaisquer solicitações de página adicionais. Netlify está respondendo com nossa página de índice principal. Em seguida, o roteador vue reconhece que temos o componente admin para carregar, e é por isso que vemos o administrador na tela. Vamos tentar a página 404 com uma rota não reconhecida e veremos a página não encontrada. Ok, bom. Uma vez que estamos felizes que tudo está funcionando, agora podemos nos livrar deste rascunho URL e gerar uma versão de produção ao vivo. A maneira de fazer isso é, mais uma vez, executar a implantação do Netlify, mas desta vez —prod para sinalizar isso. Estamos felizes com tudo o que vemos e queremos finalmente empurrar isso para a produção. Lá vamos nós. Nossa implantação agora está ativa, e vemos o URL do nosso site em vez do rascunho. Abra isso. Aí está a nossa versão final. Vamos testar nossas rotas não reconhecidas mais uma vez. Lá vamos nós. Se também entrarmos em nossa conta Netlify, faça login se você precisar, agora vemos nossos sites apenas aqui. Clique neste, e este é o mesmo URL que acabamos de ver dentro do navegador. Este é um link ao vivo e estará disponível para qualquer pessoa ver na web. Também podemos acessar nossas configurações de domínio. Se você quiser um nome personalizado nas opções, podemos editar o nome, e você também pode alterar isso para ser algo mais descritivo, desde que o nome não tenha sido usado no passado por outra pessoa. Isso também terá a extensão.netlify.app quando estivermos usando esse plano gratuito. Ou você também pode usar um domínio totalmente personalizado se você já tiver um. Ou você também pode comprar um da Netlify. Por último, Netlify também torna muito fácil ter um site seguro por padrão, podemos ver, se clicarmos nisso, temos o símbolo do cadeado aqui. Ou seja, por padrão, nosso site é carregado com um certificado SSL, significa que nosso site é seguro. Também podemos ver isso na parte inferior de nossas configurações, abaixo do HTTPS. Se você também carregou um domínio personalizado, você também pode habilitá-lo gratuitamente. Este é o nosso site agora implantado na web, que agora você pode compartilhar com amigos e familiares. 138. Obrigada!: Bem-vindo, você chegou até o fim. Parabéns por ter chegado tão longe. Eu realmente espero que você tenha gostado do curso e tenha muito fora dele, e também tenha gostado de construir os projetos também. Por enquanto, é isso. Continua a aprender, continua a construir coisas, e vemo-nos na próxima.